178 lines
4.0 KiB
CSS
178 lines
4.0 KiB
CSS
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;
|
|
}
|