Make the UI a bit more consistent

src/app.css

@@ -4,33 +4,34 @@
 :root {
     --app-width: 715px;
     --app-height: 700px;
+    --sidebar-width: 215px;
 
     /* Base text variables */
     --font-family: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     --font-family-mono: monospace, monospace;
     --font-size: 14px;
     --font-color: #EBE6EE;
-    --font-color-muted: #a7a3aa;
+    --font-color-muted: #A19FA3;
 
 
     /* Background levels */
     --bg-level-1: #2C2733;
     --bg-level-2: #2F2935;
-    --bg-level-3: #322D39;
-    --bg-level-4: #3a3541;
-    --bg-separator: #393440;
+    --bg-level-3: #332D38;
+    --bg-level-4: #39343F;
+    --bg-separator: #39333F;
     --bg-input-focus: #1F1E1F;
     --bg-modal: #231E2A;
-    --bg-basic-button: #625D67;
+    --bg-basic-button: #635F68;
 
     /* Corresponding border levels */
     --border-level-1: #000000;
-    --border-level-2: #4b4652;
-    --border-level-3: #3C3743;
-    --border-level-4: #433d49;
+    --border-level-2: #4F4A54;
+    --border-level-3: #4C4651;
+    --border-level-4: #423E48;
     --border-separator: #302B37;
     --border-input: #443e4b;
-    --border-input-focus: 3px solid #2656c9;
+    --border-input-focus: 3px solid var(--color-input-accent);
 
     /* Border radii */
     --radius-level-1: 15px;
@@ -40,18 +41,24 @@
     --radius-level-5: 4px;
 
     /* Switch colors */
-    --switch-body-color: #453F4C;
-    --switch-active-body-color: #514b5a;
-    --switch-checked-color: #3973D3;
-    --switch-active-checked-color: #4181e9;
+    --switch-body-color: var(--border-input);
+    --switch-active-body-color: hsl(from var(--switch-body-color) h s calc(l + 10));
+    --switch-checked-color: var(--color-input-accent);
+    --switch-active-checked-color: hsl(from var(--switch-checked-color) h s calc(l + 10));
 
     /* Special colors */
-    --accent-color: #56A4F5;
-    --selected-color: #2C56B9;
+    --font-color-accent: #56A4F5;
+    --color-selected: #134FAC;
+    --color-input-accent: #1769E6;
 
     --color-danger: #F25F58;
     --color-warning: #FBBE3C;
     --color-success: #58CB42;
+    /*
+    tab color #134FAC
+    switch color #1675DB
+    slider #1769E6
+    */
 
 
     font-size: var(--font-size);
@@ -99,54 +106,15 @@ body {
 	align-items: center;
 }
 
-h1,
-h2,
-p {
-    font-weight: 400;
-}
-
-p {
-    line-height: 1.5;
-}
-
 a {
-    color: var(--accent-color);
+    color: var(--font-color-accent);
     text-decoration: dotted underline;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
-h1 {
-    font-size: 2rem;
-    text-align: center;
-}
-
-h2 {
-    font-size: 1rem;
-}
-
-pre {
-    font-size: 16px;
-    font-family: var(--font-family-mono);
-    background-color: rgba(255, 255, 255, 0.45);
-    border-radius: var(--radius-level-5);
-    box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-    padding: 0.5em;
-    overflow-x: auto;
-    color: var(--font-color);
-}
-
-.text-column {
-    display: flex;
-    max-width: 48rem;
-    flex: 0.6;
-    flex-direction: column;
-    justify-content: center;
-    margin: 0 auto;
-}
-
 input,
 button,
 select {
@@ -157,21 +125,3 @@ select {
 button:focus:not(:focus-visible) {
     outline: none;
 }
-
-@media (min-width: 720px) {
-    h1 {
-        font-size: 2.4rem;
-    }
-}
-
-.visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: auto;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
-}

src/lib/components/Admonition.svelte

@@ -16,6 +16,7 @@
 .admonition {
     background: var(--bg-level-3);
     border: 1px solid var(--border-level-3);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
     border-radius: var(--radius-level-3);
     padding: 12px;
     display: flex;

src/lib/components/ColorPicker.svelte

@@ -99,7 +99,6 @@
 .picker-container {
     position: relative;
     background: var(--bg-modal);
-    border-radius: 1px;
     border: 1px solid black;
     box-shadow: 0 0 20px -1px rgba(0,0,0,0.7);
     padding: 12px;
@@ -203,7 +202,6 @@
     display: flex;
     flex: 1 1 50%;
     min-height: 100%;
-    border-radius: 2px;
     border-radius: var(--radius-level-3);
     border: 1px solid rgba(0, 0, 0, 1);
     box-shadow: 0 0 1px rgba(255, 255, 255, 1) inset;
@@ -223,7 +221,6 @@
     display: flex;
     justify-content: center;
     background: var(--bg-input-focus);
-    border-radius: 2px;
     padding: 2px;
     border: 1px solid var(--border-input);
     border-radius: var(--radius-level-5);
@@ -247,7 +244,6 @@
     display: flex;
     justify-content: center;
     background: var(--bg-input-focus);
-    border-radius: 2px;
     padding: 2px;
     border: 1px solid var(--border-input);
     border-radius: var(--radius-level-5);

src/lib/components/History.svelte

@@ -34,9 +34,12 @@
     align-items: center;
     background: none;
     border: 0;
-    color: inherit;
     padding: 4px 4px 4px 12px;
-    border-radius: 4px;
+    border-radius: var(--radius-level-5);
+}
+
+.history button svg {
+    fill: var(--font-color-muted);
 }
 
 .history button.forward {

src/lib/components/Tab.svelte

@@ -44,7 +44,7 @@
     }
 
     .nav-tab.selected {
-        background: var(--selected-color);
+        background: var(--color-selected);
     }
 
     .nav-tab .tab-icon {

src/lib/components/User.svelte

@@ -34,7 +34,7 @@
     }
 
     .user-tab.selected {
-        background: var(--selected-color);
+        background: var(--color-selected);
     }
 
     .user-avatar img {

src/lib/components/settings/Group.svelte

@@ -52,6 +52,7 @@ h4 {
     background: var(--bg-level-2);
     border-radius: var(--radius-level-3);
     border: 1px solid var(--border-level-2);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
     padding: 12px;
     margin-bottom: 12px;
 }

src/lib/components/settings/Keybinds.svelte

@@ -81,11 +81,11 @@
 }
 
 .list-controls {
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 var(--radius-level-3) var(--radius-level-3);
     background: var(--bg-level-4);
     min-height: 30px;
     max-height: 30px;
-    border-top: 1px solid var(--border-level-4);
+    border-top: 2px solid var(--border-level-4);
     display: flex;
     align-items: center;
     padding-left: 10px;
@@ -105,7 +105,7 @@
 }
 
 .keybind:nth-of-type(even) {
-    background: var(--bg-level-4);
+    background: rgba(255, 255, 255, 0.05)
 }
 
 .keybind.selected {

src/lib/components/settings/Number.svelte

@@ -12,6 +12,7 @@
     let {value = $bindable(), min, max, step, size, range}: Props = $props();
 
     const inputType = range ? "range" : "number";
+    if (!size && !range) size = max ? max.toString().length : value.toString().length + 2;
 </script>
 
 <div class="input-wrapper">
@@ -22,6 +23,7 @@
 </div>
 
 <style>
+/* TODO: make custom component */
 .input-wrapper {
     display: flex;
     align-items: center;
@@ -30,16 +32,43 @@
 
 input {
     background: var(--bg-level-2);
-    border: 1px solid var(--border-input);
+    border: 1px solid transparent;
     border-radius: var(--radius-level-5);
     outline: none;
     color: inherit;
-    /* text-align: right; */
+    text-align: right;
     max-width: 175px;
 }
 
 input[type="number"]:focus {
     background: var(--bg-input-focus);
     outline: var(--border-input-focus);
 }
+
+
+/* Chrome is dumb so TODO: add a custom slider */
+input[type="range"] {
+   border: 0;
+   height: 5px;
+   background-color: var(--bg-separator);
+}
+
+input[type="range"]::-moz-range-progress {
+   background-color: var(--color-input-accent);
+   border-radius: 5px;
+   height: 5px;
+   width: 100%;
+}
+
+input[type="range"]::-moz-range-thumb {
+   margin-top: -10px;
+   background-color: #98949B;
+   border-radius: 50%;
+   height: 20px;
+   width: 20px;
+}
+
+input[type="range"]:focus::-moz-range-thumb {
+    background-color: hsl(from #98949B h s calc(l + 10));
+}
 </style>

src/lib/components/settings/Separator.svelte

@@ -6,7 +6,6 @@
     height: 2px;
     width: 100%;
     background: var(--bg-separator);
-    border-bottom: 1px solid var(--border-separator);
     margin: 12px 0;
 }
 </style>

src/lib/components/settings/Switch.svelte

@@ -25,15 +25,13 @@
 }
 
 .switch-body {
-    --symbol1path: path('M5.13231 6.72963L6.7233 5.13864L14.855 13.2704L13.264 14.8614L5.13231 6.72963Z');
-    --symbol2path: path('M13.2704 5.13864L14.8614 6.72963L6.72963 14.8614L5.13864 13.2704L13.2704 5.13864Z');
-
     border-radius: 14px;
     width: 32px;
     height: 20px;
     background-color: var(--switch-body-color);
-    transition: 250ms cubic-bezier(0, 0.3, 0.7, 1) background-color;
+    transition: 250ms cubic-bezier(0, 0.3, 0.7, 1) background-color, 250ms cubic-bezier(0, 0.3, 0.7, 1) box-shadow;
     position: relative;
+    box-shadow: 0 0 1px transparent inset;
 }
 
 .switch input:active + .switch-body {
@@ -42,8 +40,7 @@
 
 .switch input:checked + .switch-body {
     background-color: var(--switch-checked-color);
-    --symbol1path: path('M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z');
-    --symbol2path: path('M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z');
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5) inset;
 }
 
 .switch input:checked:active + .switch-body {

src/lib/components/settings/Text.svelte

@@ -14,7 +14,7 @@
     }
 </script>
 
-<input class:blank class={align} type="text" onclick={click} onchange={change} bind:value />
+<input class:blank class:empty={value === ""} class={align} type="text" onclick={click} onchange={change} bind:value />
 
 <style>
 input {
@@ -25,6 +25,7 @@ input {
     color: inherit;
     text-align: right;
     max-width: 175px;
+    padding: 0 4px 2px 0;
 }
 
 input:focus, input.blank:focus {
@@ -34,7 +35,11 @@ input:focus, input.blank:focus {
 
 input.blank {
     background: none;
-    border: 0;
+    border-width: 0;
+}
+
+input.blank.empty {
+    border-width: 1px;
 }
 
 input.left {

src/lib/data/settings.ts

@@ -194,8 +194,8 @@ export default [
                 id: "resize",
                 name: "Sizing & Resizing",
                 settings: [
-                    {id: "windowHeight", name: "Initial window height", note: "This size is not in pixels but in number of terminal grid cells", type: "number", value: 0, min: 4, step: 1, size: 12},
-                    {id: "windowWidth", name: "Initial window width", note: "This size is not in pixels but in number of terminal grid cells", type: "number", value: 0, min: 10, step: 1, size: 12},
+                    {id: "windowHeight", name: "Initial window height", note: "This size is not in pixels but in number of terminal grid cells", type: "number", value: 0, min: 4, step: 1, size: 4},
+                    {id: "windowWidth", name: "Initial window width", note: "This size is not in pixels but in number of terminal grid cells", type: "number", value: 0, min: 10, step: 1, size: 4},
                     {id: "windowStepResize", name: "Resize in grid cell increments", type: "switch", value: false},
                     {id: "resizeOverlay", name: "Show resize overlays", type: "dropdown", value: "after-first", options: ["always", "never", "after-first"]},
                     {id: "resizeOverlayPosition", name: "Resize overlay position", type: "dropdown", value: "center", options: ["center", "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"]},