refactor: use id instead of class

2025-11-10 06:01:28 +08:00 · 2023-09-21 11:27:10 +01:00 · 2023-09-21 11:27:10 +01:00 · c76b2f40e8
commit c76b2f40e8
parent 54ceadd488
27 changed files with 46 additions and 46 deletions
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@ -136,7 +136,7 @@ header {
  -webkit-user-select: none;
  user-select: none;

-  .logo {
+  #logo {
    // margin-bottom: 0.6rem;
    cursor: pointer;
    display: grid;
@ -269,12 +269,12 @@ header {
      fill: var(--sub-color) !important;
    }

-    .logo .text {
+    #logo .text {
      color: var(--sub-color) !important;
      // opacity: 0 !important;
    }

-    .logo .top {
+    #logo .top {
      opacity: 0 !important;
    }

--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@ -344,7 +344,7 @@

 //800px
@media only screen and (max-width: 50rem) {
-  header .logo .text {
+  header #logo .text {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-top: -0.1em;
@ -691,7 +691,7 @@
  .pageAbout .section .contributors {
    grid-template-columns: 1fr 1fr;
  }
-  header .logo .bottom {
+  header #logo .bottom {
    margin-top: 0;
  }
  .pageLogin {
@ -737,7 +737,7 @@
 //550px
@media only screen and (max-width: 34.375rem) {
  header {
-    .logo {
+    #logo {
      grid-template-columns: auto;
      .text {
        display: none;
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@ -1554,7 +1554,7 @@ $("#popups").on(
  }
 );

-$("header").on("click", "nav #startTestButton, .logo", () => {
+$("header").on("click", "nav #startTestButton, #logo", () => {
  if (ActivePage.get() === "test") restart();
 });

--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@ -43,7 +43,7 @@ if (isLocalhost()) {
  window.onerror = function (error): void {
    Notifications.add(error.toString(), -1);
  };
-  $("header .logo .top").text("localhost");
+  $("header #logo .top").text("localhost");
  $("head title").text($("head title").text() + " (localhost)");
  $("body").append(
    `<div class="devIndicator tl">local</div><div class="devIndicator br">local</div>`
--- a/frontend/static/email-handler.html
+++ b/frontend/static/email-handler.html
@ -98,7 +98,7 @@
  <body>
    <div id="centerContent">
      <header>
-        <div class="logo">
+        <div id="logo">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
@ -387,7 +387,7 @@
          switch (mode) {
            case "resetPassword":
              // Display reset password handler and UI.
-              $(".logo .text span").text("Reset Password");
+              $("#logo .text span").text("Reset Password");
              document.title = "Reset Password | Monkeytype";
              showResetPassword();
              break;
@ -396,7 +396,7 @@
              handleRecoverEmail(actionCode);
              break;
            case "verifyEmail":
-              $(".logo .text span").text("Verify Email");
+              $("#logo .text span").text("Verify Email");
              document.title = "Verify Email | Monkeytype";
              // Display email verification handler and UI.
              handleVerifyEmail(actionCode, continueUrl);
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@ -95,14 +95,14 @@ body.crtmode #paceCaret.banana,
 body.crtmode #paceCaret.carrot {
  box-shadow: none;
 }
-body.crtmode .logo .icon {
+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 {
+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));
 }
--- a/frontend/static/html/header.html
+++ b/frontend/static/html/header.html
@ -1,5 +1,5 @@
 <header>
-  <a class="logo" href="/" router-link>
+  <a id="logo" href="/" router-link>
    <div class="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
--- a/frontend/static/privacy-policy.html
+++ b/frontend/static/privacy-policy.html
@ -62,7 +62,7 @@
  <body>
    <div id="centerContent">
      <header>
-        <div class="logo">
+        <div id="logo">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
--- a/frontend/static/security-policy.html
+++ b/frontend/static/security-policy.html
@ -66,7 +66,7 @@
  <body>
    <div id="centerContent">
      <header>
-        <div class="logo">
+        <div id="logo">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
--- a/frontend/static/terms-of-service.html
+++ b/frontend/static/terms-of-service.html
@ -62,7 +62,7 @@
  <body>
    <div id="centerContent">
      <header>
-        <div class="logo">
+        <div id="logo">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@ -60,7 +60,7 @@ header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
--- a/frontend/static/themes/blueberry_dark.css
+++ b/frontend/static/themes/blueberry_dark.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #d996ac;
 }

-header .logo .bottom {
+header #logo .bottom {
  color: #962f7e;
 }
--- a/frontend/static/themes/blueberry_light.css
+++ b/frontend/static/themes/blueberry_light.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #d996ac;
 }

-header .logo .bottom {
+header #logo .bottom {
  color: #df4576;
 }
--- a/frontend/static/themes/camping.css
+++ b/frontend/static/themes/camping.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #7e3a39;
 }

-header .logo .bottom {
+header #logo .bottom {
  color: #ad4f4e;
 }
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@ -12,17 +12,17 @@
  --colorful-error-extra-color: #b03c47;
 }

-header .logo .text {
+header #logo .text {
  -webkit-transform: rotateY(180deg);
  unicode-bidi: bidi-override;
  transition: 0.5s;
 }

-header .logo .top {
+header #logo .top {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
 }

-header .logo .icon {
+header #logo .icon {
  -webkit-transform: rotateX(180deg);
  transition: 0.5s;
 }
@ -80,16 +80,16 @@ header.focus nav:after {
  -webkit-transform: rotateY(180deg) !important;
 }

-header.focus .logo .text,
-header.focus .logo:before,
-header.focus .logo:after {
+header.focus #logo .text,
+header.focus #logo:before,
+header.focus #logo:after {
  -webkit-transform: rotateY(0deg);
  direction: ltr;
 }

-header.focus .logo .icon,
-header.focus .logo:before,
-header.focus .logo:after {
+header.focus #logo .icon,
+header.focus #logo:before,
+header.focus #logo:after {
  -webkit-transform: rotateX(0deg);
  direction: ltr;
 }
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@ -43,6 +43,6 @@
  }
 }

-header > div.logo > div.icon > svg path {
+header > div#logo > div.icon > svg path {
  animation: 10s linear infinite 0.1s rgb;
 }
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@ -60,7 +60,7 @@ header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
--- a/frontend/static/themes/fundamentals.css
+++ b/frontend/static/themes/fundamentals.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #413157;
 }

-header .logo .bottom {
+header #logo .bottom {
  color: #196378;
 }
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@ -60,7 +60,7 @@ header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
--- a/frontend/static/themes/ishtar.css
+++ b/frontend/static/themes/ishtar.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #849224;
 }

-header .logo .bottom {
+header #logo .bottom {
  color: #fae1c3;
 }
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@ -11,7 +11,7 @@
  --colorful-error-extra-color: #8f2f19;
 }

-header .logo .bottom {
+header #logo .bottom {
  color: #f4bc46;
 }

--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@ -11,7 +11,7 @@
  --colorful-error-extra-color: #667c91;
 }

-header .logo .bottom {
+header #logo .bottom {
  color: #8fadc9;
 }

--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@ -9,7 +9,7 @@
  --colorful-error-color: #ff0008;
 }

-header .logo .text {
+header #logo .text {
  background: linear-gradient(
    90deg,
    #60b6ce,
@ -29,7 +29,7 @@ header .logo .text {
  animation: rainbow-gradient 30s alternate ease-in-out infinite;
 }

-header .logo .top,
+header #logo .top,
 .account .levelAndBar .level,
 [aria-label][data-balloon-pos]::after {
  -webkit-text-fill-color: initial;
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@ -90,7 +90,7 @@ header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
@ -113,6 +113,6 @@ a:hover,
  animation: rgb 5s linear infinite;
 }

-header .logo path {
+header #logo path {
  animation: rgb-fill 5s linear infinite;
 }
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@ -19,7 +19,7 @@ nav .textButton:hover {
  color: #c6915e;
 }

-header .logo .text {
+header #logo .text {
  background-color: #ffffff; /* fallback */
  background: -webkit-linear-gradient(
    #2d2076,
@ -36,7 +36,7 @@ header .logo .text {
  -webkit-text-fill-color: transparent;
 }

-header .logo .text .top {
+header #logo .text .top {
  /* prevent it from being transparent */
  -webkit-text-fill-color: #385eca;
 }
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@ -11,11 +11,11 @@
  --colorful-error-extra-color: #d8d8d8;
 }

-header .logo .icon {
+header #logo .icon {
  color: #8c3230;
 }

-header .logo .text {
+header #logo .text {
  color: #557d8d;
 }

--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@ -48,7 +48,7 @@ header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,