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

monkeytypegame · Aug 21, 2024 · 14c121b · 14c121b
1 parent ed8efe6
commit 14c121b
Show file tree

Hide file tree

Showing 25 changed files with 197 additions and 217 deletions.
diff --git a/frontend/static/themes/9009.css b/frontend/static/themes/9009.css
@@ -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);
 }
diff --git a/frontend/static/themes/aether.css b/frontend/static/themes/aether.css
@@ -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;
 }
diff --git a/frontend/static/themes/beach.css b/frontend/static/themes/beach.css
@@ -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;
 }
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
@@ -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,67 +77,67 @@ 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;
 }
 
 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;
 }
 

diff --git a/frontend/static/themes/desert_oasis.css b/frontend/static/themes/desert_oasis.css
@@ -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;
 }
diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css
@@ -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;
 }