Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: crt mode not working on buttons #4810

Merged
merged 1 commit into from
Nov 27, 2023
Merged

fix: crt mode not working on buttons #4810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions frontend/static/funbox/crt.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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