Slider pixel fiddling

EternityForest · Nov 15, 2023 · e08cb66 · e08cb66
1 parent 2eece27
commit e08cb66
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/css/barrel.css b/css/barrel.css
@@ -678,6 +678,10 @@ header {
                 border-radius: var(--control-border-radius);
             }
 
+            &>label {
+                gap: 2px;
+            }
+
             &>label,
             &>p {
                 &>* {
@@ -1955,7 +1959,13 @@ footer.padding {
 
         &>input {
             background-color: var(--alt-control-bg);
-            flex-grow: 5;
+
+            &:not([type="checkbox"], [type="radio"]) {
+                flex-grow: 5;
+                border-top: none;
+                border-bottom: none;
+                border-inline-end: none;
+            }
         }
 
         /*Exception: the first item always growable so it can be the title*/
@@ -2347,10 +2357,11 @@ input[type='checkbox']:not(.toggle) {
 input[type="checkbox"].toggle {
     border-radius: 50px;
     width: calc(var(--control-height) * 1.77) !important;
+    --slider-position: var(--control-border-width);
 
     &:checked {
         position: relative;
-        --slider-position: calc(var(--control-height) * 0.77);
+        --slider-position: calc(calc(var(--control-height) * 0.777) + var(--control-border-width));
     }
 
     &:checked::before {
@@ -2366,11 +2377,13 @@ input[type="checkbox"].toggle {
         box-sizing: border-box;
         border: var(--control-border-width) solid var(--control-border-color);
         left: var(--slider-position);
+        top: var(--control-border-width);
+        vertical-align: middle;
         border-radius: 50px;
         margin: 0px;
         padding: 0px;
-        height: calc(var(--control-height) - calc(var(--control-border-width) *2));
-        width: calc(var(--control-height) - calc(var(--control-border-width) *2));
+        height: calc(100% - calc(var(--control-border-width) *2));
+        aspect-ratio: 1;
         background: var(--convex-item-bg);
         transition: left 0.25s ease, background 0.4s ease;
     }

diff --git a/css/blast.css b/css/blast.css
@@ -30,7 +30,7 @@
         --control-height: 28px;
         --control-border-radius: 6px;
         --control-border-width: 1px;
-        --3d-shadow: #dc7d09;
+        --3d-shadow: #fc9841;
         --3d-highlight: #ffd744;
         --control-bg: #ffc400;
         --alt-control-bg: #ffd744;

diff --git a/css/lair.css b/css/lair.css
@@ -3,21 +3,22 @@
     --red: rgb(255, 0, 119);
     --fg: #cdb8a6;
     --graphical-fg: #1a091a;
-    --accent-color: rgb(186 20 151);
+    --accent-color: rgb(151 41 102);
     --bg: #49011c;
     --box-bg: #2e2424;
     --padding: 2px;
     --gap: 2px;
     --border-color: #1a091a;
     --border-radius: 0rem;
     --control-border-radius: 0px;
-    --control-border-width: 1px;
-    --3d-highlight: #9d005f;
-    --3d-shadow: #5c3c3c;
+    --control-border-width: 2px;
+    --control-border-color: black;
+    --3d-highlight: #8b053d;
+    --3d-shadow: #73043d;
     --concave-item-bg: linear-gradient(180deg, var(--3d-shadow) 12%, var(--3d-highlight) 88%);
     --convex-item-bg: linear-gradient(180deg, var(--3d-highlight) 0%, var(--3d-shadow) 96%);
     --convex-item-active-bg: var(--concave-item-bg);
-    --concave-item-box-shadow: inset 0px 0px 4px 2px #171616bf;
+    --concave-item-box-shadow: #17161659;
     --control-bg: #482155;
     --alt-control-bg: #620d38;
     --control-fg: #cdb8a6;