🎨 Major UI update

assets/css/styles.scss

@@ -20,6 +20,7 @@ $responsiveWidth: 720px;
 
 ::placeholder {
   color: var(--fg-color);
+  opacity: 0.3;
 }
 
 * {
@@ -91,7 +92,7 @@ button {
   justify-content: center;
   margin: 4px;
   padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: 8px;
   background-color: var(--ac-color);
   color: var(--act-color);
   font-weight: 700;
@@ -108,14 +109,13 @@ button {
 
   &.icon {
     background-color: var(--bg-color);
-    color: var(--ac-color);
-    fill: var(--ac-color);
+    color: var(--fg-color);
+    fill: var(--fg-color);
   }
 
   &:not([disabled]):hover,
   &:not(.disabled):focus {
     background-color: var(--bg-color);
-    box-shadow: inset 0 0 0 2px var(--ac-color);
     color: var(--ac-color);
     fill: var(--ac-color);
   }
@@ -123,8 +123,9 @@ button {
 
 fieldset {
   margin: 16px 0;
-  border: 2px solid var(--fg-color);
-  border-radius: 4px;
+  border: 1px solid var(--brd-color);
+  border-radius: 8px;
+  background-color: var(--bg-color);
 }
 
 legend {
@@ -138,74 +139,38 @@ fieldset pre code {
   resize: vertical;
 }
 
-fieldset.blue {
-  border-color: #57b5f9;
-}
-
 fieldset.blue legend {
   color: #57b5f9;
 }
 
-fieldset.gray {
-  border-color: #bcc2cd;
-}
-
 fieldset.gray legend {
   color: #bcc2cd;
 }
 
-fieldset.green {
-  border-color: #50fa7b;
-}
-
 fieldset.green legend {
   color: #50fa7b;
 }
 
-fieldset.cyan {
-  border-color: #8be9fd;
-}
-
 fieldset.cyan legend {
   color: #8be9fd;
 }
 
-fieldset.purple {
-  border-color: #bd93f9;
-}
-
 fieldset.purple legend {
   color: #bd93f9;
 }
 
-fieldset.orange {
-  border-color: #ffb86c;
-}
-
 fieldset.orange legend {
   color: #ffb86c;
 }
 
-fieldset.pink {
-  border-color: #ff79c6;
-}
-
 fieldset.pink legend {
   color: #ff79c6;
 }
 
-fieldset.red {
-  border-color: #ff5555;
-}
-
 fieldset.red legend {
   color: #ff5555;
 }
 
-fieldset.yellow {
-  border-color: #f1fa8c;
-}
-
 fieldset.yellow legend {
   color: #f1fa8c;
 }
@@ -221,19 +186,19 @@ textarea,
 pre {
   margin: 4px;
   padding: 8px;
-  border-radius: 4px;
+  border-radius: 8px;
   width: calc(100% - 8px);
-  background-color: var(--bg-dark-color);
+  background-color: var(--brd-color);
   color: var(--fg-color);
   font-size: 18px;
   font-family: monospace;
   transition: all 0.2s ease-in-out;
-  user-select: all;
+  user-select: text;
 
   &:not([readonly]):hover,
   &:not([readonly]):focus {
     background-color: var(--bg-color);
-    box-shadow: inset 0 0 0 2px var(--ac-color);
+    box-shadow: inset 0 0 0 2px var(--fg-color);
   }
 }
 
@@ -247,7 +212,7 @@ code {
 
 .hljs,
 .hljs-subst {
-  background-color: var(--bg-dark-color) !important;
+  background-color: var(--brd-color) !important;
   color: var(--fg-color) !important;
 }
 
@@ -267,8 +232,8 @@ input[type="checkbox"] {
 
     &:before {
       content: "\2714";
-      border: 2px solid var(--fg-color);
-      border-radius: 4px;
+      border: 1px solid var(--fg-color);
+      border-radius: 8px;
       display: inline-flex;
       height: 16px;
       width: 16px;
@@ -366,23 +331,23 @@ ol li {
 }
 
 .info-response {
-  background-color: #ffeb3b;
+  color: #ffeb3b;
 }
 
 .success-response {
-  background-color: #4bb543;
+  color: #4bb543;
 }
 
 .redir-response {
-  background-color: #ff5722;
+  color: #ff5722;
 }
 
 .cl-error-response {
-  background-color: #a63232;
+  color: #a63232;
 }
 
 .sv-error-response {
-  background-color: #b71c1c;
+  color: #b71c1c;
 }
 
 .missing-data-response {
@@ -399,7 +364,7 @@ fieldset#history {
 
     span {
       position: absolute;
-      top: 44px;
+      top: 12px;
       right: 12px;
       font-family: monospace, monospace;
     }
@@ -421,7 +386,7 @@ fieldset#history {
 #response-details-wrapper {
   position: relative;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: 8px;
 
   textarea {
     margin: 0;
@@ -481,11 +446,12 @@ input[type="radio"] + label {
   transition: all 0.2s ease;
 
   &:hover {
-    border-color: var(--err-color);
+    border-color: var(--brd-color);
   }
 }
 
 input[type="radio"]:checked + label {
+  color: var(--ac-color);
   border-color: var(--ac-color);
 }
 

assets/css/themes.scss

@@ -7,17 +7,17 @@
 
 // Dark is the default theme variant.
 :root {
-  --bg-dark-color: #44475a;
+  --bg-dark-color: #1d1f27;
   // Background color
   --bg-color: #282a36;
   // Auto-complete color
   --atc-color: #3C4556;
   // Text color
-  --fg-color: #f8f8f2;
-
+  --fg-color: #d0d1dc;
+  // Border color
+  --brd-color: #333545;
   // Error color
   --err-color: #3C4556;
-
   // Active color
   --ac-color: #50fa7b;
   // Active text color
@@ -32,10 +32,10 @@
   --atc-color: #e1e4eb;
   // Text color
   --fg-color: #5d5d5f;
-
+  // Border color
+  --brd-color: #ccc;
   // Error color
   --err-color: invert(#3C4556, 1);
-
   // Active color
   --ac-color: #57b5f9;
   // Active text color