monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 07:16:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: crt mode not working on some buttons (fehmer) (#4810)

Browse source 
- apply box-shadow on buttons
- fix lavender theme hiding buttons on hover
- update crt mode specific themes not to use nested css
This commit is contained in:
Christian Fehmer 2023-11-27 13:56:33 +01:00 committed by GitHub
parent f5073385a6
commit bd2058fae0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 192 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/static/funbox/crt.css
View file

@ -5,6 +5,7 @@ body.crtmode .customBackground {
var(--bg-color) 90%
);
}
body.crtmode::after {
content: "";
display: block;
@ -26,6 +27,7 @@ body.crtmode::after {
mix-blend-mode: color-burn;
pointer-events: none;
}
body.crtmode #scanline {
width: 100%;
height: 100px;
@ -42,6 +44,7 @@ body.crtmode #scanline {
);
animation: scanline 10s linear infinite;
}
body.crtmode header,
body.crtmode main,
body.crtmode footer,
@ -50,55 +53,66 @@ body.crtmode #popups,
body.crtmode #notificationCenter,
body.crtmode .word.error,
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 #testConfig,
body.crtmode #testModesNotice {
text-shadow: none;
}
body.crtmode #testConfig .textButton,
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 #testConfig .textButton:hover,
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 #testConfig .textButton.active,
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 #testConfig .row,
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 #logo .icon {
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
}
body.crtmode .avatars,
body.crtmode nav .account .avatar,
body.crtmode nav .account .levelAndBar,
@ -106,25 +120,30 @@ body.crtmode header.focus #logo .icon {
filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
}
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;

101
frontend/static/themes/chaos_theory.css
View file

@ -98,6 +98,7 @@ footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
-webkit-transform: rotateY(180deg);
transition: 0.5s;
}
nav {
gap: 0.5rem;
}
@ -140,55 +141,53 @@ nav .textButton:nth-child(8) {
background: #f3ea5d;
}
body.crtmode {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
-3px 0 color-mix(in srgb, #7ae1bf 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
-3px 0 color-mix(in srgb, #ff5869 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(5) {
box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(6) {
box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
}
#caret {
box-shadow: none !important;
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
}
header.focus nav .textButton {
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
-3px 0 var(--crt-sub-color-glow);
}
body.crtmode nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
-3px 0 color-mix(in srgb, #7ae1bf 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
-3px 0 color-mix(in srgb, #ff5869 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(5) {
box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(6) {
box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
}
body.crtmode #caret {
box-shadow: none !important;
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
}
body.crtmode header.focus nav .textButton {
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
-3px 0 var(--crt-sub-color-glow);
}

28
frontend/static/themes/dmg.css
View file

@ -19,9 +19,11 @@ header.focus nav .textButton {
background: var(--bg-color);
size: 1rem;
}
header.focus nav .textButton:nth-child(1) {
background: #e34c6c;
}
header.focus nav:before,
header.focus nav:after {
background: var(--sub-color);
@ -33,17 +35,17 @@ nav .textButton {
background: var(--main-color);
}
body.crtmode {
nav .textButton {
box-shadow: 3px 0 1px var(--crt-main-color-glow),
-3px 0 var(--crt-main-color-glow), 0 0 3px;
}
header.focus nav .textButton {
box-shadow: none;
&:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
-3px 0 color-mix(in srgb, #e34c6c 30%, transparent), 0 0 3px;
}
}
body.crtmode nav .textButton {
box-shadow: 3px 0 1px var(--crt-main-color-glow),
-3px 0 var(--crt-main-color-glow), 0 0 3px;
}
body.crtmode header.focus nav .textButton,
body.crtmode nav .textButton:hover {
box-shadow: none;
}
body.crtmode header.focus nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
-3px 0 color-mix(in srgb, #e34c6c 30%, transparent), 0 0 3px;
}

76
frontend/static/themes/dots.css
View file

@ -92,43 +92,41 @@ nav .textButton.account .xpBar {
bottom: -0.75rem !important;
}
body.crtmode {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
-3px 0 color-mix(in srgb, #f94348 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
-3px 0 color-mix(in srgb, #9261ff 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
-3px 0 color-mix(in srgb, #3cc5f8 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
-3px 0 color-mix(in srgb, #4acb8a 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #ffd543 20%, transparent),
-3px 0 color-mix(in srgb, #ffd543 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #ff9349 20%, transparent),
-3px 0 color-mix(in srgb, #ff9349 30%, transparent), 0 0 3px;
}
header.focus nav .textButton {
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
-3px 0 var(--crt-sub-color-glow);
&.account {
box-shadow: none;
}
}
body.crtmode nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
-3px 0 color-mix(in srgb, #f94348 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
-3px 0 color-mix(in srgb, #9261ff 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
-3px 0 color-mix(in srgb, #3cc5f8 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
-3px 0 color-mix(in srgb, #4acb8a 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #ffd543 20%, transparent),
-3px 0 color-mix(in srgb, #ffd543 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #ff9349 20%, transparent),
-3px 0 color-mix(in srgb, #ff9349 30%, transparent), 0 0 3px;
}
body.crtmode header.focus nav .textButton {
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
-3px 0 var(--crt-sub-color-glow);
}
body.crtmode header.focus nav .textButton.account {
box-shadow: none;
}

9
frontend/static/themes/lavender.css
View file

@ -19,11 +19,10 @@ nav .textButton {
nav .textButton:hover {
color: var(--bg-color);
background: var(--text-color);
}
body.crtmode {
nav .textButton {
box-shadow: 3px 0 1px var(--crt-text-color-glow),
-3px 0 var(--crt-text-color-glow), 0 0 3px;
}
body.crtmode nav .textButton {
box-shadow: 3px 0 1px var(--crt-text-color-glow),
-3px 0 var(--crt-text-color-glow), 0 0 3px;
}

26
frontend/static/themes/moonlight.css
View file

@ -11,14 +11,17 @@
--colorful-error-color: #b81b2c;
--colorful-error-extra-color: #84131f;
}
nav {
gap: 0.5rem;
}
header.focus nav .textButton,
header.focus nav:before,
header.focus nav:after {
background: var(--bg-color);
}
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
@ -27,6 +30,7 @@ nav .textButton:nth-child(4) {
color: #191f28 !important;
background: #c69f68;
}
nav .textButton:nth-child(1):hover,
nav
.textButton:nth-child(2):hover
@ -38,6 +42,7 @@ nav
color: #4b5975 !important;
transition: 0.25s;
}
/* nav .textButton:nth-child(1) {
background: #c69f68;
}
@ -62,15 +67,14 @@ header.focus nav .textButton.discord::after {
border-color: transparent;
}
body.crtmode {
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
-3px 0 color-mix(in srgb, #c69f68 30%, transparent), 0 0 3px;
}
header.focus nav .textButton {
box-shadow: none;
}
body.crtmode nav .textButton:nth-child(1),
body.crtmode nav .textButton:nth-child(2),
body.crtmode nav .textButton:nth-child(3),
body.crtmode nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
-3px 0 color-mix(in srgb, #c69f68 30%, transparent), 0 0 3px;
}
body.crtmode header.focus nav .textButton {
box-shadow: none;
}

80
frontend/static/themes/snes.css
View file

@ -29,18 +29,23 @@ nav .textButton {
nav .textButton:nth-child(1) {
background: #553d94;
}
nav .textButton:nth-child(2) {
background: #6851a4;
}
nav .textButton:nth-child(3) {
background: #7962b3;
}
nav .textButton:nth-child(4) {
background: #8c76c3;
}
nav .textButton:nth-child(5) {
background: #9f8ad4;
}
nav .textButton:nth-child(6),
nav .textButton:nth-child(7) {
background: #9f8ad4;
@ -54,40 +59,43 @@ header.focus nav .textButton.discord::after {
border-color: transparent;
}
body.crtmode {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
-3px 0 color-mix(in srgb, #553d94 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
-3px 0 color-mix(in srgb, #6851a4 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
-3px 0 color-mix(in srgb, #7962b3 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
-3px 0 color-mix(in srgb, #8c76c3 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(5) {
box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(6),
nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
}
nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #a692d7 20%, transparent),
-3px 0 color-mix(in srgb, #a692d7 30%, transparent), 0 0 3px;
}
header.focus nav .textButton {
box-shadow: 3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
-3px 0 color-mix(in srgb, #99989f 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
-3px 0 color-mix(in srgb, #553d94 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
-3px 0 color-mix(in srgb, #6851a4 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
-3px 0 color-mix(in srgb, #7962b3 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
-3px 0 color-mix(in srgb, #8c76c3 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(5) {
box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(6),
body.crtmode nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #a692d7 20%, transparent),
-3px 0 color-mix(in srgb, #a692d7 30%, transparent), 0 0 3px;
}
body.crtmode header.focus nav .textButton {
box-shadow: 3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
-3px 0 color-mix(in srgb, #99989f 30%, transparent), 0 0 3px;
}

18
frontend/static/themes/taro.css
View file

@ -26,14 +26,12 @@ nav .textButton:nth-child(2) {
border-radius: 50%;
}
body.crtmode {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px var(--crt-caret-color-glow),
-3px 0 var(--crt-caret-color-glow);
}
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px var(--crt-error-color-glow),
-3px 0 var(--crt-error-color-glow);
}
body.crtmode nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px var(--crt-caret-color-glow),
-3px 0 var(--crt-caret-color-glow);
}
body.crtmode nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px var(--crt-error-color-glow),
-3px 0 var(--crt-error-color-glow);
}