monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-05 21:15:26 +08:00
Code Issues Projects Releases Packages Wiki Activity

style: fix some themes not working well with the new header menu

Browse source
This commit is contained in:
Miodec 2024-08-21 11:27:49 +02:00
parent ed8efe619d
commit 14c121b9ff
25 changed files with 197 additions and 217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/static/themes/9009.css
View file

@ -28,14 +28,14 @@ key {
background-color: var(--main-color);
}
nav .textButton {
nav > .textButton {
color: var(--main-color);
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: var(--error-color);
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: var(--caret-color);
}

12
frontend/static/themes/aether.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #e3002b;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #e4002b;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #c53562;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #95549e;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #6744a1;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #393c73;
}

12
frontend/static/themes/beach.css
View file

@ -11,11 +11,11 @@
--colorful-error-extra-color: #ff6f69;
}
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
nav .textButton:nth-child(4),
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(1),
nav > .textButton:nth-child(2),
nav > .textButton:nth-child(3),
nav > .textButton:nth-child(4),
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #ff6f69;
}

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

@ -13,7 +13,7 @@
}
header #logo .text {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
unicode-bidi: bidi-override;
transition: 0.5s;
}
@ -23,19 +23,19 @@ header #logo .top {
}
header #logo .icon {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
transition: 0.5s;
}
#words .incorrect.extra {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
unicode-bidi: bidi-override;
direction: rtl;
}
footer .leftright .right .current-theme .text {
/* font-family: "Comic Sans MS", "Comic Sans", cursive; */
}
/* footer .leftright .right .current-theme .text { */
/* font-family: "Comic Sans MS", "Comic Sans", cursive; */
/* } */
#caret {
background-image: url(https://i.imgur.com/yN31JmJ.png) !important;
@ -50,14 +50,14 @@ footer .leftright .right .current-theme .text {
}
.config .toggleButton {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
unicode-bidi: bidi-override;
direction: rtl;
align-content: right;
}
.config .mode .textButton {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
unicode-bidi: bidi-override;
direction: rtl;
align-content: right;
@ -67,7 +67,7 @@ footer .leftright .right .current-theme .text {
.config .time .textButton,
.config .quoteLength .textButton,
.config .customText .textButton {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
unicode-bidi: bidi-override;
direction: rtl;
align-content: right;
@ -77,25 +77,25 @@ header.focus nav .textButton,
header.focus nav:before,
header.focus nav:after {
background: var(--sub-color);
-webkit-transform: rotateY(180deg) !important;
transform: rotateY(180deg) !important;
}
header.focus #logo .text,
header.focus #logo:before,
header.focus #logo:after {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
direction: ltr;
}
header.focus #logo .icon,
header.focus #logo:before,
header.focus #logo:after {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
direction: ltr;
}
footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: 0.5s;
}
@ -103,41 +103,41 @@ nav {
gap: 0.5rem;
}
nav .textButton {
nav > .textButton {
border-radius: 10rem i !important;
color: var(--bg-color);
transition: 0.5s;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
background: #ab92e1;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
background: #f3ea5d;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
background: #7ae1bf;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
background: #ff5869;
}
nav .textButton:nth-child(5) {
nav > .textButton:nth-child(5) {
background: #fc76d9;
}
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(6) {
background: #fc76d9;
}
nav .textButton:nth-child(7) {
nav > .textButton:nth-child(7) {
background: #ab92e1;
}
nav .textButton:nth-child(8) {
nav > .textButton:nth-child(8) {
background: #f3ea5d;
}

12
frontend/static/themes/desert_oasis.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #4e7a27;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #76bb40;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #76bb40;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #76bb40;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #76bb40;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #76bb40;
}

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

@ -15,12 +15,12 @@ nav {
gap: 0.5rem;
}
header.focus nav .textButton {
header.focus nav > .textButton {
background: var(--bg-color);
size: 1rem;
}
header.focus nav .textButton:nth-child(1) {
header.focus nav > .textButton:nth-child(1) {
background: #e34c6c;
}
@ -29,23 +29,23 @@ header.focus nav:after {
background: var(--sub-color);
}
nav .textButton {
nav > .textButton {
border-radius: 10rem !important;
color: var(--bg-color);
background: var(--main-color);
}
body.crtmode nav .textButton {
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 {
body.crtmode header.focus nav > .textButton,
body.crtmode nav > .textButton:hover {
box-shadow: none;
}
body.crtmode header.focus nav .textButton:nth-child(1) {
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;
}

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

@ -15,13 +15,13 @@ nav {
gap: 0.5rem;
}
header.focus nav .textButton,
header.focus nav > .textButton,
header.focus nav:before,
header.focus nav:after {
background: var(--sub-color);
}
nav .textButton {
nav > .textButton {
border-radius: 10rem !important;
color: #121520;
}
@ -35,43 +35,43 @@ nav .textButton {
border-radius: 10rem;
} */
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
background: #f94348;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
background: #9261ff;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
background: #3cc5f8;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
background: #4acb8a;
}
header.focus nav .textButton:nth-child(6) {
header.focus nav > .textButton:nth-child(6) {
background: transparent !important;
}
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(6) {
color: var(--sub-color);
}
nav .textButton:nth-child(6):hover {
nav > .textButton:nth-child(6):hover {
color: var(--text-color);
}
nav .textButton:nth-child(7) {
nav > .textButton:nth-child(7) {
background: #ffd543;
}
nav .textButton:nth-child(8) {
nav > .textButton:nth-child(8) {
background: #ff9349;
}
/* nav .textButton:nth-child(8) {
/* nav > .textButton:nth-child(8) {
background: #f94348;
} */
@ -84,49 +84,49 @@ nav .textButton:nth-child(8) {
border-radius: 10rem;
} */
header.focus nav .textButton.discord::after {
header.focus nav > .textButton.discord::after {
border-color: transparent;
}
nav .textButton.view-account .xpBar {
nav > .textButton.view-account .xpBar {
bottom: -0.75rem !important;
}
body.crtmode nav .textButton:nth-child(1) {
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) {
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) {
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) {
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) {
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) {
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 {
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.view-account {
body.crtmode header.focus nav > .textButton.view-account {
box-shadow: none;
}

12
frontend/static/themes/dracula.css
View file

@ -11,26 +11,26 @@
--colorful-error-extra-color: #f1fa8c;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #ec75c4;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #8be9fd;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #50fa7b;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #f1fa8c;
}
nav .textButton:nth-child(5) {
nav > .textButton:nth-child(5) {
color: #ffb86c;
}
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(6) {
color: #ffb86c;
}

12
frontend/static/themes/dualshot.css
View file

@ -11,26 +11,26 @@
--colorful-error-extra-color: #ac1823;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #2884bb;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #25a5a9;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #de9c24;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #d82231;
}
nav .textButton:nth-child(5) {
nav > .textButton:nth-child(5) {
color: #212222;
}
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(6) {
color: #212222;
}

12
frontend/static/themes/froyo.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #d56558;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #ff7e73;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #f5c370;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #08d9a3;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #0ca5e2;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #875ac6;
}

12
frontend/static/themes/fruit_chew.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #a62626;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #a6bf50;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #c3921a;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #b92221;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #88b6ce;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #661968;
}

12
frontend/static/themes/future_funk.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #bd1c66;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #f04e98;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #f8bed6;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #f6eb61;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #a4dbe8;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #a266ed;
}

12
frontend/static/themes/graen.css
View file

@ -11,11 +11,11 @@
--colorful-error-extra-color: #5f0715;
}
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
nav .textButton:nth-child(4),
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(1),
nav > .textButton:nth-child(2),
nav > .textButton:nth-child(3),
nav > .textButton:nth-child(4),
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #601420;
}

12
frontend/static/themes/horizon.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #d55170;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #d55170;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #e4a88a;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #db886f;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #db887a;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #ffc819;
}

10
frontend/static/themes/metropolis.css
View file

@ -15,22 +15,22 @@ header #logo .bottom {
color: #f4bc46;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #d44729;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #d44729;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #d44729;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #d44729;
}
nav .textButton:nth-child(5) {
nav > .textButton:nth-child(5) {
color: #d44729;
}

12
frontend/static/themes/milkshake.css
View file

@ -11,26 +11,26 @@
--colorful-error-extra-color: #e58c9d;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #f19dac;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #f6f4a0;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #73e4d0;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #61cfe6;
}
nav .textButton:nth-child(5) {
nav > .textButton:nth-child(5) {
color: #ba96db;
}
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(6) {
color: #ba96db;
}

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

@ -16,65 +16,45 @@ nav {
gap: 0.5rem;
}
header.focus nav .textButton,
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),
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(1),
nav > .textButton:nth-child(2),
nav > .textButton:nth-child(3),
nav > .textButton:nth-child(4) {
border-radius: rem !important;
color: #191f28 !important;
background: #c69f68;
}
nav .textButton:nth-child(1):hover,
nav > .textButton:nth-child(1):hover,
nav
.textButton:nth-child(2):hover
> .textButton:nth-child(2):hover
nav
.textButton:nth-child(3):hover
> .textButton:nth-child(3):hover
nav
.textButton:nth-child(4):hover {
> .textButton:nth-child(4):hover {
border-radius: rem !important;
color: #4b5975 !important;
transition: 0.25s;
}
/* nav .textButton:nth-child(1) {
background: #c69f68;
}
nav .textButton:nth-child(2) {
background: #c69f68;
}
nav .textButton:nth-child(3) {
background: #c69f68;
}
nav .textButton:nth-child(4) {
background: #c69f68;
}
nav .textButton:nth-child(5) {
background: #c69f68;
}
nav .textButton:nth-child(6),
nav .textButton:nth-child(7),
nav .textButton:nth-child(8) {
background: #c69f68;
} */
header.focus nav .textButton.discord::after {
header.focus nav > .textButton.discord::after {
border-color: transparent;
}
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) {
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 {
body.crtmode header.focus nav > .textButton {
box-shadow: none;
}

12
frontend/static/themes/oblivion.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #9e3423;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #9a90b4;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #8db14b;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #fca321;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #2984a5;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #dd452e;
}

12
frontend/static/themes/retrocast.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #c04455;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #88dbdf;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #88dbdf;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #88dbdf;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
color: #ff585d;
}
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
nav > .textButton:nth-child(5),
nav > .textButton:nth-child(6) {
color: #f3e03b;
}

4
frontend/static/themes/sewing_tin.css
View file

@ -11,10 +11,10 @@
--colorful-error-extra-color: #c6915e;
}
nav .textButton {
nav > .textButton {
color: #f2ce83;
}
nav .textButton:hover {
nav > .textButton:hover {
color: #c6915e;
}

4
frontend/static/themes/sewing_tin_light.css
View file

@ -11,11 +11,11 @@
--colorful-error-extra-color: #f2ce83;
}
nav .textButton {
nav > .textButton {
color: #f2ce83;
}
nav .textButton:hover {
nav > .textButton:hover {
color: #c6915e;
}

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

@ -15,87 +15,87 @@ nav {
gap: 0.5rem;
}
header.focus nav .textButton,
header.focus nav > .textButton,
header.focus nav:before,
header.focus nav:after {
background: #99989f;
}
nav .textButton {
nav > .textButton {
border-radius: 10rem !important;
color: var(--bg-color);
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
background: #553d94;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
background: #6851a4;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
background: #7962b3;
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
background: #8c76c3;
}
nav .textButton:nth-child(5) {
nav > .textButton:nth-child(5) {
background: #9f8ad4;
}
nav .textButton:nth-child(6),
nav .textButton:nth-child(7) {
nav > .textButton:nth-child(6),
nav > .textButton:nth-child(7) {
background: #9f8ad4;
}
nav .textButton:nth-child(8) {
nav > .textButton:nth-child(8) {
background: #a692d7;
}
header.focus nav .textButton.discord::after {
header.focus nav > .textButton.discord::after {
border-color: transparent;
}
body.crtmode nav .textButton:nth-child(1) {
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) {
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) {
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) {
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) {
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) {
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) {
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 {
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;
}

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

@ -16,22 +16,22 @@
border-bottom: dotted 2px var(--text-color);
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
background: var(--caret-color);
border-radius: 50%;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
background: var(--error-color);
border-radius: 50%;
}
body.crtmode nav .textButton:nth-child(1) {
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) {
body.crtmode nav > .textButton:nth-child(2) {
box-shadow: 3px 0 1px var(--crt-error-color-glow),
-3px 0 var(--crt-error-color-glow);
}

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

@ -12,61 +12,61 @@
}
/* hide buttons while typing */
header.focus nav .textButton {
header.focus nav > .textButton {
background: none;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
background: var(--sub-color);
color: var(--bg-color);
border-radius: calc(var(--roundness) * 2) calc(var(--roundness) * 1.3)
calc(var(--roundness) * 1.7) calc(var(--roundness) * 1);
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
background: #9a7a61;
color: var(--bg-color);
border-radius: calc(var(--roundness) * 1.2) calc(var(--roundness) * 1.7)
calc(var(--roundness) * 2.1) calc(var(--roundness) * 1);
transform: rotateY(9deg);
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
background: var(--main-color);
color: var(--bg-color);
border-radius: calc(var(--roundness) * 2.8) calc(var(--roundness) * 0.6)
calc(var(--roundness) * 2) calc(var(--roundness) * 1.6);
transform: rotateY(-3deg);
}
nav .textButton:nth-child(4) {
nav > .textButton:nth-child(4) {
background: var(--text-color);
color: var(--bg-color);
border-radius: calc(var(--roundness) * 0.8) calc(var(--roundness) * 2.4)
calc(var(--roundness) * 0.8) calc(var(--roundness) * 2.8);
}
nav .textButton:nth-child(1):hover,
nav .textButton:nth-child(2):hover,
nav .textButton:nth-child(3):hover,
nav .textButton:nth-child(4):hover {
nav > .textButton:nth-child(1):hover,
nav > .textButton:nth-child(2):hover,
nav > .textButton:nth-child(3):hover,
nav > .textButton:nth-child(4):hover {
opacity: 0.8;
}
body.crtmode nav .textButton:nth-child(1) {
body.crtmode nav > .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, var(--sub-color) 20%, transparent),
-3px 0 color-mix(in srgb, var(--sub-color) 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(2) {
body.crtmode nav > .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #9a7a61 20%, transparent),
-3px 0 color-mix(in srgb, #9a7a61 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(3) {
body.crtmode nav > .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, var(--main-color) 20%, transparent),
-3px 0 color-mix(in srgb, var(--main-color) 30%, transparent), 0 0 3px;
}
body.crtmode nav .textButton:nth-child(4) {
body.crtmode nav > .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, var(--text-color) 20%, transparent),
-3px 0 color-mix(in srgb, var(--text-color) 30%, transparent), 0 0 3px;
}
body.crtmode header.focus nav .textButton {
body.crtmode header.focus nav > .textButton {
box-shadow: none;
}

6
frontend/static/themes/trackday.css
View file

@ -11,14 +11,14 @@
--colorful-error-extra-color: #bb2525;
}
nav .textButton:nth-child(1) {
nav > .textButton:nth-child(1) {
color: #e0513e;
}
nav .textButton:nth-child(3) {
nav > .textButton:nth-child(3) {
color: #cfcfcf;
}
nav .textButton:nth-child(2) {
nav > .textButton:nth-child(2) {
color: #ccc500;
}