🎨 Minor UI updates

assets/css/styles.scss

@@ -148,11 +148,6 @@ legend {
   }
 }
 
-fieldset textarea,
-fieldset pre code {
-  resize: vertical;
-}
-
 fieldset.blue legend {
   color: #57b5f9;
 }
@@ -209,6 +204,7 @@ pre {
   user-select: text;
   width: calc(100% - 8px);
   min-height: 40px;
+  resize: vertical;
 
   &:not([readonly]):hover {
     background-color: var(--bg-dark-color);

assets/css/themes.scss

@@ -31,7 +31,7 @@
 
 :root.light {
   // Dark Background color
-  --bg-dark-color: #e8f0fe;
+  --bg-dark-color: #f6f6f6;
   // Background color
   --bg-color: #ffffff;
   // Auto-complete color
@@ -41,9 +41,9 @@
   // Light Text color
   --fg-light-color: rgb(150, 155, 160);
   // Border color
-  --brd-color: #f2f2f2;
+  --brd-color: #eeeeed;
   // Error color
-  --err-color: invert(#303341, 1);
+  --err-color: #f6f6f6;
   // Acent color
   --ac-color: #57b5f9;
   // Active text color
@@ -52,29 +52,29 @@
 
 :root.black {
   // Dark Background color
-  --bg-dark-color: rgb(23, 24, 26);
+  --bg-dark-color: rgb(8, 8, 8);
   // Background color
   --bg-color: #000000;
   // Auto-complete color
-  --atc-color: rgb(49, 49, 55);
+  --atc-color: rgb(18, 18, 18);
   // Text color
-  --fg-color: rgb(247, 248, 248);
+  --fg-color: rgb(250, 250, 250);
   // Light Text color
-  --fg-light-color: rgb(150, 155, 160);
+  --fg-light-color: rgb(100, 100, 100);
   // Border color
-  --brd-color: rgb(48, 47, 55);
+  --brd-color: rgb(16, 16, 16);
   // Error color
-  --err-color: rgb(41, 42, 45);
+  --err-color: rgb(8, 8, 8);
   // Acent color
   --ac-color: #50fa7b;
   // Active text color
-  --act-color: rgb(37, 38, 40);
+  --act-color: #000000;
 }
 
 @media(prefers-color-scheme: light) {
   :root.auto {
     // Dark Background color
-    --bg-dark-color: #e8f0fe;
+    --bg-dark-color: #f6f6f6;
     // Background color
     --bg-color: #ffffff;
     // Auto-complete color
@@ -84,13 +84,13 @@
     // Light Text color
     --fg-light-color: rgb(150, 155, 160);
     // Border color
-    --brd-color: #f2f2f2;
+    --brd-color: #eeeeed;
     // Error color
-    --err-color: invert(#303341, 1);
+    --err-color: #f6f6f6;
     // Acent color
     --ac-color: #57b5f9;
     // Active text color
-    --act-color: #fff;
+    --act-color: #ffffff;
   }
 }
 

components/toggle.vue

@@ -4,21 +4,22 @@
       <span class="handle"></span>
     </label>
     <label class="caption">
-      <slot /></label>
+      <slot/>
+    </label>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  $useBorder: true;
-  $borderColor: var(--fg-color);
+  $useBorder: false;
+  $borderColor: var(--fg-light-color);
   $activeColor: var(--ac-color);
-  $inactiveColor: var(--fg-color);
+  $inactiveColor: var(--fg-light-color);
 
-  $inactiveHandleColor: $inactiveColor;
+  $inactiveHandleColor: var(--bg-color);
   $activeHandleColor: var(--act-color);
 
-  $width: 50px;
-  $height: 20px;
+  $width: 32px;
+  $height: 16px;
   $handleSpacing: 4px;
 
   $transition: all 0.2s ease-in-out;
@@ -29,7 +30,6 @@
   }
 
   label.caption {
-    margin-left: 4px;
     vertical-align: middle;
     cursor: pointer;
   }
@@ -43,11 +43,11 @@
     background-color: if($useBorder, transparent, $inactiveColor);
     vertical-align: middle;
 
-    border-radius: 100px;
+    border-radius: 32px;
     transition: $transition;
     box-sizing: initial;
     padding: 0;
-    margin: 10px 5px;
+    margin: 8px 4px;
     cursor: pointer;
 
     .handle {

pages/index.vue

@@ -82,8 +82,11 @@
         <ul>
           <li>
             <label for="contentType">Content Type</label>
-            <autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type
-            </autocomplete>
+            <autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type</autocomplete>
+          </li>
+        </ul>
+        <ul>
+          <li>
             <span>
               <pw-toggle :on="rawInput" @change="rawInput = !rawInput">
                 Raw Input {{ rawInput ? "Enabled" : "Disabled" }}

pages/settings.vue

@@ -85,13 +85,13 @@
             "class": ""
           },
           {
-            "color": "#ebeef5",
+            "color": "#ffffff",
             "name": "Light",
             "vibrant": true,
             "class": "light"
           },
           {
-            "color": "#000",
+            "color": "#000000",
             "name": "Black",
             "class": "black"
           },