click

click/style.css

@@ -1,18 +1,21 @@
 @import url(/global.css);
 
+* {
+    user-select: none;
+}
+
 button, p {
     font-weight: 600;
 }
 
 .help {
-    color: #f0f0f0;
+    color: var(--text);
     background: none;
     border: none;
 }
 
-.container {
+.cards {
     text-align: center;
-    background-color: #4b4b4b;
     border-radius: 8px;
     padding: 30px 100px;
     box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
@@ -28,100 +31,29 @@ button, p {
 .counter {
     font-size: 24px;
     margin: 40px 0;
-    color: #ffffff;
+    color: var(--text);
 }
 
 p, h6, h1 {
-    color: #f0f0f0;
+    color: var(--text);
     transition: color 0.3s;
 
 }
 
 .reset {
     transition: background-color 0.3s;
-    background-color: #b0b0b0;
-    color: #2a2a2a;
-    border: 2px solid rgb(120, 120, 120);
+    background-color: var(--surface0);
+    color: var(--text);
+    border: 1px solid var(--overlay2);
     border-radius: 5px;
     padding: 5px;
     cursor: pointer;
     margin-top: 15px;
     outline: none;
     transition: border 0.3s;
+    color: var(--text);
 }
 
 .reset:hover {
-    border: 2px dashed #3c7855;
-}
-
-.navBar > *:hover:not(.seperator) {
-    cursor: pointer;
-    scale: 1.05;
-}
-
-.navBar > * {
-    transition: scale 0.3s;
-
-}
-
-.theme-button {
-    background-color: rgb(0,0,0,0);
-    border-color: rgb(0,0,0,0);
-    transition: 0.3s;
-    color: #f0f0f0;
-    cursor: pointer;
-    outline: none;
-    margin-top: -5px;
-    z-index: 1000;
-    right: 20px;
-    top: 20px;
-    margin-left: 5px !important;
-}
-
-.theme-button:hover {
-    scale: 1.1;
-}
-
-.theme-button svg {
-    pointer-events: none;
-}
-
-.navBar {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-}
-
-.navBar > * {
-    margin: 5px 1px 5px 10px;
-}
-
-.github,
-.web {
-    text-align: center;
-    transition: 0.3s;
-    user-select: none;
-    pointer-events: none;
-    z-index: 10;
-    color: #747474;
-    text-decoration: none;
-}
-
-.github svg,
-.web svg {
-    pointer-events: all;
-    transition: 0.3s;
-    fill: #747474;
-}
-
-.seperator {
-    height: 25px;
-    width: 2px;
-    border-radius: 10px;
-    background-color: #747474;
-
+    background-color: var(--surface1);
 }