guestbook ip js keyboard

keyboard/style.css

@@ -5,13 +5,12 @@ button, p {
 }
 
 .help {
-    color: #f0f0f0;
+    color: var(--text);
     background: none;
     border: none;
 }
 
-.container {
-    background-color: #4b4b4b;
+.cards {
     border-radius: 8px;
     padding: 30px 100px;
     box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
@@ -22,13 +21,12 @@ button, p {
     text-align: center;
     top: 0;
     left: 0;
-
 }
 
 .counter {
     font-size: 24px;
     margin: 40px 0;
-    color: #ffffff;
+    color: var(--white);
     width: 100%;
     display: grid; 
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
@@ -38,7 +36,7 @@ button, p {
 }
 
 .counter > * {
-    background-color: rgb(90,90,90);
+    background-color: var(--overlay0);
     padding: 10px 5px 10px 5px;
     margin: 15px;
     border-radius: 10px;
@@ -46,99 +44,19 @@ button, p {
 }
 
 p, h6, h1, h3 {
-    color: #f0f0f0;
+    color: var(--text);
     transition: color 0.3s;
 }
 
-.reset, .button {
+button {
     transition: background-color 0.3s;
-    color: #2a2a2a;
-    background-color: rgb(116, 116, 116);
-    border: 2px solid rgb(135,135,135);
+    color: var(--text);
+    background-color: var(--surface0);
+    border: 2px solid var(--surface1);
     border-radius: 5px;
     padding: 5px;
     cursor: pointer;
     margin-top: 15px;
     outline: none;
     transition: border 0.3s;
-}
-
-.reset:hover, .button: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: fixed;
-    top: 0px;
-    left: 0px;
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: left;
-    background-color: rgb(42,42,42,0.775);
-    backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
-    width: 100%;
-}
-
-.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;
-
-}
+}