Fix input styles for Chrome

tim-harding · Oct 17, 2024 · 2296c3f · 2296c3f
1 parent ed954d4
commit 2296c3f
Show file tree

Hide file tree

Showing 3 changed files with 213 additions and 201 deletions.
diff --git a/pages/public/style.css → pages/assets/style.css b/pages/public/style.css → pages/assets/style.css
@@ -1,133 +1,7 @@
----
----
-
-@property --subtext-1 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --subtext-0 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --overlay-2 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --overlay-1 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --overlay-0 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --surface-2 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --surface-1 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --surface-0 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --base {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --mantle {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --crust {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --rosewater {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --flamingo {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --pink {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --mauve {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --red {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --maroon {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --peach {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --yellow {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --green {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --teal {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --sky {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --sapphire {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --blue {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --lavender {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-:where(:not(html, head *, svg *)) {
+a,
+button,
+svg,
+input {
   all: unset;
 }
 
@@ -154,36 +28,48 @@ th-theme-button {
 }
 
 input[type="range"] {
-  &::-moz-range-thumb,
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.375rem;
+  border-radius: calc(0.375rem / 2);
+  background-color: var(--surface-0);
+  border: 1px solid var(--surface-1);
+
   &::-webkit-slider-thumb {
-    all: unset;
+    -webkit-appearance: none;
     width: 1.25rem;
     height: 1.25rem;
     border-radius: 50%;
     background: linear-gradient(var(--rosewater), var(--flamingo));
     box-shadow: 0rem 0.125rem 0.25rem (#d20f3950);
   }
 
-  &::-webkit-slider-runnable-track,
-  &::-moz-range-track {
-    box-sizing: border-box;
-    width: 100%;
-    height: 0.375rem;
-    border-radius: calc(0.375rem / 2);
-    background-color: var(--surface-0);
-    border: 1px solid var(--surface-1);
+  /* For some reason, combining these identical rules doesn't work for Chrome */
+  &::-moz-range-thumb {
+    all: unset;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: linear-gradient(var(--rosewater), var(--flamingo));
+    box-shadow: 0rem 0.125rem 0.25rem (#d20f3950);
   }
 }
 
 input[type="color"] {
+  all: unset;
   width: 100%;
+  height: 100%;
   border-radius: 0.25rem;
 
   &::-webkit-color-swatch-wrapper {
-    all: unset;
+    padding: 0rem;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
   }
 
-  &::-webkit-color-swatch,
   &::-moz-color-swatch {
     border: none;
   }
@@ -201,64 +87,6 @@ input[type="color"] {
   border-width: 0;
 }
 
-.theme-latte {
-  --text: #4c4f69;
-  --subtext-1: #5c5f77;
-  --subtext-0: #6c6f85;
-  --overlay-2: #7c7f93;
-  --overlay-1: #8c8fa1;
-  --overlay-0: #9ca0b0;
-  --surface-2: #acb0be;
-  --surface-1: #bcc0cc;
-  --surface-0: #ccd0da;
-  --base: #eff1f5;
-  --mantle: #e6e9ef;
-  --crust: #dce0e8;
-  --rosewater: #dc8a78;
-  --flamingo: #dd7878;
-  --pink: #ea76cb;
-  --mauve: #8839ef;
-  --red: #d20f39;
-  --maroon: #e64553;
-  --peach: #fe640b;
-  --yellow: #df8e1d;
-  --green: #40a02b;
-  --teal: #179299;
-  --sky: #04a5e5;
-  --sapphire: #209fb5;
-  --blue: #1e66f5;
-  --lavender: #7287fd;
-}
-
-.theme-frappe {
-  --text: #c6d0f5;
-  --subtext-1: #b5bfe2;
-  --subtext-0: #a5adce;
-  --overlay-2: #949cbb;
-  --overlay-1: #838ba7;
-  --overlay-0: #737994;
-  --surface-2: #626880;
-  --surface-1: #51576d;
-  --surface-0: #414559;
-  --base: #303446;
-  --mantle: #292c3c;
-  --crust: #232634;
-  --rosewater: #f2d5cf;
-  --flamingo: #eebebe;
-  --pink: #f4b8e4;
-  --mauve: #ca9ee6;
-  --red: #e78284;
-  --maroon: #ea999c;
-  --peach: #ef9f76;
-  --yellow: #e5c890;
-  --green: #a6d189;
-  --teal: #81c8be;
-  --sky: #99d1db;
-  --sapphire: #85c1dc;
-  --blue: #8caaee;
-  --lavender: #babbf1;
-}
-
 body {
   display: grid;
   grid-template-rows: max-content 1fr;