From bd2058fae02dc0b2ee80596471b1663f3916d5d2 Mon Sep 17 00:00:00 2001 From: Christian Fehmer Date: Mon, 27 Nov 2023 13:56:33 +0100 Subject: [PATCH] fix: crt mode not working on some buttons (fehmer) (#4810) - apply box-shadow on buttons - fix lavender theme hiding buttons on hover - update crt mode specific themes not to use nested css --- frontend/static/funbox/crt.css | 19 +++++ frontend/static/themes/chaos_theory.css | 101 ++++++++++++------------ frontend/static/themes/dmg.css | 26 +++--- frontend/static/themes/dots.css | 76 +++++++++--------- frontend/static/themes/lavender.css | 9 +-- frontend/static/themes/moonlight.css | 26 +++--- frontend/static/themes/snes.css | 80 ++++++++++--------- frontend/static/themes/taro.css | 16 ++-- 8 files changed, 190 insertions(+), 163 deletions(-) diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css index 92deb6c8b443..bf8482848d90 100644 --- a/frontend/static/funbox/crt.css +++ b/frontend/static/funbox/crt.css @@ -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; diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css index 99bf438a5c7b..ecfecfdd92ab 100644 --- a/frontend/static/themes/chaos_theory.css +++ b/frontend/static/themes/chaos_theory.css @@ -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); } diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css index 9b3d6e6725d5..71a677bdba4a 100644 --- a/frontend/static/themes/dmg.css +++ b/frontend/static/themes/dmg.css @@ -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; - } +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; +} - 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 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; } diff --git a/frontend/static/themes/dots.css b/frontend/static/themes/dots.css index 518faf98912f..23e98baa74b9 100644 --- a/frontend/static/themes/dots.css +++ b/frontend/static/themes/dots.css @@ -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; } diff --git a/frontend/static/themes/lavender.css b/frontend/static/themes/lavender.css index 8f7667fdc8e0..eb9660965142 100644 --- a/frontend/static/themes/lavender.css +++ b/frontend/static/themes/lavender.css @@ -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; } diff --git a/frontend/static/themes/moonlight.css b/frontend/static/themes/moonlight.css index 71055003332a..d0d49667f28a 100644 --- a/frontend/static/themes/moonlight.css +++ b/frontend/static/themes/moonlight.css @@ -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; } diff --git a/frontend/static/themes/snes.css b/frontend/static/themes/snes.css index 9e24cfec827c..e6d14bc42123 100644 --- a/frontend/static/themes/snes.css +++ b/frontend/static/themes/snes.css @@ -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; } diff --git a/frontend/static/themes/taro.css b/frontend/static/themes/taro.css index 2dba09ec3a8c..a96cf01d923e 100644 --- a/frontend/static/themes/taro.css +++ b/frontend/static/themes/taro.css @@ -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); - } +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(2) { + box-shadow: 3px 0 1px var(--crt-error-color-glow), + -3px 0 var(--crt-error-color-glow); }