This commit is contained in:
Benjamin Falch
177
frontend/static/funbox/crt.css
Normal file
177
frontend/static/funbox/crt.css
Normal file
@@ -0,0 +1,177 @@
|
||||
body.crtmode .customBackground {
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
var(--crt-bg-color-shine) 0%,
|
||||
var(--bg-color) 90%
|
||||
);
|
||||
}
|
||||
|
||||
body.crtmode::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 999999999;
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--crt-bg-color-stripe) 0px,
|
||||
var(--crt-bg-color-stripe) 1px,
|
||||
transparent 2px,
|
||||
transparent 5px
|
||||
);
|
||||
background-size: 50% 5px;
|
||||
opacity: 0.3;
|
||||
mix-blend-mode: color-burn;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.crtmode #scanline {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
z-index: 1001;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
var(--crt-bg-color-shine) 10%,
|
||||
rgba(0, 0, 0, 0.1) 100%
|
||||
);
|
||||
animation: scanline 10s linear infinite;
|
||||
}
|
||||
|
||||
body.crtmode header,
|
||||
body.crtmode main,
|
||||
body.crtmode footer,
|
||||
body.crtmode #result,
|
||||
body.crtmode #popups,
|
||||
body.crtmode [data-ui-element="notifications"],
|
||||
body.crtmode #words .word.error,
|
||||
body.crtmode #words .word .hints hint,
|
||||
body.crtmode input,
|
||||
body.crtmode button,
|
||||
body.crtmode textarea,
|
||||
body.crtmode #bannerCenter .banner {
|
||||
text-shadow:
|
||||
3px 0 1px color-mix(in srgb, currentColor 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, currentColor 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
body.crtmode #testModesNotice {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
body.crtmode #testModesNotice .textButton {
|
||||
text-shadow:
|
||||
3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
body.crtmode #testModesNotice .textButton:hover {
|
||||
text-shadow:
|
||||
3px 0 1px var(--crt-text-color-glow),
|
||||
-3px 0 var(--crt-text-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
body.crtmode #testModesNotice .textButton.active {
|
||||
text-shadow:
|
||||
3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
body.crtmode #testModesNotice .row {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-sub-alt-color-glow),
|
||||
-3px 0 var(--crt-sub-alt-color-glow);
|
||||
}
|
||||
|
||||
body.crtmode #caret {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-caret-color-glow),
|
||||
-3px 0 var(--crt-caret-color-glow);
|
||||
}
|
||||
|
||||
body.crtmode #paceCaret,
|
||||
body.crtmode key,
|
||||
body.crtmode #bannerCenter .banner {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow);
|
||||
}
|
||||
|
||||
body.crtmode #caret.banana,
|
||||
body.crtmode #caret.carrot,
|
||||
body.crtmode #paceCaret.banana,
|
||||
body.crtmode #paceCaret.carrot {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.crtmode header [data-ui-element="logo"] svg {
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
|
||||
}
|
||||
|
||||
body.crtmode header [data-ui-element="navAvatar"] svg {
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
|
||||
}
|
||||
|
||||
body.crtmode [data-ui-element="navAvatar"],
|
||||
body.crtmode [data-ui-element="userLevel"],
|
||||
body.crtmode [data-ui-element="xpBar"],
|
||||
body.crtmode header[data-focused] [data-ui-element="logo"] svg {
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
|
||||
}
|
||||
|
||||
body.crtmode [data-ui-element="xpBreakdown"] {
|
||||
backdrop-filter: none;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
body.crtmode .button,
|
||||
body.crtmode .scrollToTopButton {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-sub-alt-color-glow),
|
||||
-3px 0 var(--crt-sub-alt-color-glow),
|
||||
0 0 3px var(--crt-sub-alt-color-glow);
|
||||
}
|
||||
|
||||
body.crtmode .button.active,
|
||||
body.crtmode .scrollToTopButton.active {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
body.crtmode .button:hover,
|
||||
body.crtmode .scrollToTopButton:hover {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-text-color-glow),
|
||||
-3px 0 var(--crt-text-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
body.crtmode #keymap .keymapKey {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
body.crtmode #keymap .keymapKey.activeKey {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
Reference in New Issue
Block a user