Skip to content

Commit

Permalink
fix: crt mode not working on some buttons (fehmer) (#4810)
Browse files Browse the repository at this point in the history 
- apply box-shadow on buttons
- fix lavender theme hiding buttons on hover
- update crt mode specific themes not to use nested css
  • Loading branch information
@fehmer
fehmer authored Nov 27, 2023
1 parent f507338 commit bd2058f
Show file tree
Hide file tree
Showing 8 changed files with 190 additions and 163 deletions.
19 changes: 19 additions & 0 deletions frontend/static/funbox/crt.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ body.crtmode .customBackground {
var(--bg-color) 90%
);
}

body.crtmode::after {
content: "";
display: block;
Expand All @@ -26,6 +27,7 @@ body.crtmode::after {
mix-blend-mode: color-burn;
pointer-events: none;
}

body.crtmode #scanline {
width: 100%;
height: 100px;
Expand All @@ -42,6 +44,7 @@ body.crtmode #scanline {
);
animation: scanline 10s linear infinite;
}

body.crtmode header,
body.crtmode main,
body.crtmode footer,
Expand All @@ -50,81 +53,97 @@ 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,
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;
Expand Down
101 changes: 50 additions & 51 deletions frontend/static/themes/chaos_theory.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
26 changes: 14 additions & 12 deletions frontend/static/themes/dmg.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
}
76 changes: 37 additions & 39 deletions frontend/static/themes/dots.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 4 additions & 5 deletions frontend/static/themes/lavender.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading

0 comments on commit bd2058f

Please sign in to comment.