🎨 Various UI tweaks

assets/css/styles.scss

@@ -146,6 +146,7 @@ footer {
   z-index: 1;
   height: 100vh;
   padding: 0 8px;
+  background-color: var(--bg-light-color);
 }
 
 .main {
@@ -155,7 +156,6 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
-  background-color: var(--bg-light-color);
   height: 100%;
 }
 
@@ -257,14 +257,14 @@ h3 {
 }
 
 .tooltip {
-  $bgcolor: var(--bg-color);
+  $bgcolor: var(--tt-color);
   $fgcolor: var(--fg-color);
   display: block !important;
   z-index: 10000;
 
   .tooltip-inner {
-    background: black;
-    color: white;
+    background: $bgcolor;
+    color: $fgcolor;
     border-radius: 8px;
     padding: 8px 16px;
     font-size: 12px;
@@ -278,7 +278,7 @@ h3 {
     border-style: solid;
     position: absolute;
     margin: 5px;
-    border-color: black;
+    border-color: $bgcolor;
     z-index: 1;
   }
 
@@ -424,6 +424,17 @@ button {
       transition: all 0.2s ease-in-out;
     }
   }
+
+  &.primary {
+    color: var(--ac-color);
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      background-color: var(--ac-color);
+      color: var(--act-color);
+    }
+  }
 }
 
 @keyframes beat {
@@ -444,7 +455,6 @@ button {
 
 fieldset {
   margin: 16px 0;
-  // border: 1px solid var(--brd-color);
   border-radius: 16px;
   transition: all 0.2s ease-in-out;
   background-color: var(--bg-dark-color);
@@ -503,6 +513,11 @@ fieldset.yellow legend {
   color: #f1fa8c;
 }
 
+input[type="file"],
+input[type="radio"],
+.tab,
+.hide-on-large-screen,
+#installPWA,
 .hidden {
   display: none;
 }
@@ -669,18 +684,10 @@ ol li {
   display: flex;
 }
 
-.hide-on-large-screen {
-  display: none;
-}
-
 .show-on-large-screen {
   display: inline-flex;
 }
 
-#installPWA {
-  display: none;
-}
-
 .info-response {
   color: #ffeb3b;
 }
@@ -774,12 +781,6 @@ section {
   order: 1;
 }
 
-input[type="file"],
-input[type="radio"],
-.tab {
-  display: none;
-}
-
 input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
@@ -856,6 +857,7 @@ input[type="radio"]:checked + label + .tab {
     width: 100%;
     background-color: var(--bg-color);
     transition: all 0.2s ease-in-out;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
   }
 
   nav.primary-nav {

assets/css/themes.scss

@@ -9,13 +9,13 @@
 // Dark is the default theme variant.
 @mixin darkTheme {
   // Background color
-  --bg-color: rgba(18, 18, 18, 1);
+  --bg-color: rgba(32, 33, 36, 1);
   // Light Background color
   --bg-light-color: rgba(255, 255, 255, 0.02);
   // Dark Background color
   --bg-dark-color: rgba(0, 0, 0, 0.1);
   // Text color
-  --fg-color: rgba(255, 255, 255, 1);
+  --fg-color: rgba(255, 255, 255, 0.9);
   // Light Text color
   --fg-light-color: rgba(255, 255, 255, 0.5);
   // Border color
@@ -25,9 +25,11 @@
   // Acent color
   --ac-color: rgba(80, 250, 123, 1);
   // Active text color
-  --act-color: rgba(18, 18, 18, 1);
+  --act-color: rgba(32, 33, 36, 1);
   // Auto-complete color
-  --atc-color: rgba(18, 18, 18, 1);
+  --atc-color: rgba(32, 33, 36, 1);
+  // Tooltip color
+  --tt-color: rgba(53, 53, 53, 1);
 }
 
 @mixin lightTheme {
@@ -38,7 +40,7 @@
   // Dark Background color
   --bg-dark-color: rgba(0, 0, 0, 0.02);
   // Text color
-  --fg-color: rgba(0, 0, 0, 1);
+  --fg-color: rgba(0, 0, 0, 0.9);
   // Light Text color
   --fg-light-color: rgba(0, 0, 0, 0.6);
   // Border color
@@ -51,17 +53,19 @@
   --act-color: rgba(255, 255, 255, 1);
   // Auto-complete color
   --atc-color: rgba(255, 255, 255, 1);
+  // Tooltip color
+  --tt-color: rgba(220, 220, 220, 1);
 }
 
 @mixin blackTheme {
   // Background color
   --bg-color: rgba(0, 0, 0, 1);
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0);
+  --bg-light-color: rgba(255, 255, 255, 0.02);
   // Dark Background color
   --bg-dark-color: rgba(255, 255, 255, 0.02);
   // Text color
-  --fg-color: rgba(255, 255, 255, 1);
+  --fg-color: rgba(255, 255, 255, 0.9);
   // Light Text color
   --fg-light-color: rgba(255, 255, 255, 0.5);
   // Border color
@@ -74,6 +78,8 @@
   --act-color: rgba(0, 0, 0, 1);
   // Auto-complete color
   --atc-color: rgba(0, 0, 0, 1);
+  // Tooltip color
+  --tt-color: rgba(18, 18, 18, 1);
 }
 
 :root {