Better color sliders

2 files changed, 37 insertions, 19 deletions

diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js
index 3d9d004..4ac47fe 100644
--- a/scripts/gui-common/widgets.js
+++ b/scripts/gui-common/widgets.js
@@ -99,7 +99,7 @@ class Widget extends EventTarget{
 
         if (event.type == "touchstart")
             this.element.classList.add("touch");
-        else if (event.type == "touchend")
+        else if (event.type == "touchend" || event.type == "touchcancel")
             this.element.classList.remove("touch");
 
         if (this.inactive)
@@ -722,7 +722,7 @@ class WidgetColorTemp extends WidgetSlider
             out = this.ORANGE.interpolate(this.WHITE, percent / 0.7);
         else
             out = this.WHITE.interpolate(this.BLUE, (percent - 0.7) / 0.3);
-        el.style.setProperty("--detail", out.rgb());
+        this.element.style.setProperty("--detail", out.rgb());
     }
 }
 
@@ -741,12 +741,6 @@ class WidgetColorLight extends WidgetSlider
     {
         super(1, 0, 0.01, 0, 1);
         this.element.classList.replace("slider", "color-light");
-        
-        let fills = this.element.getElementsByClassName("fill");
-        for(let f of fills)
-        {
-            f.remove();
-        }
 
         this.setDetailUpdater(this.update_detail.bind(this));
         this.set(0);
@@ -761,7 +755,7 @@ class WidgetColorLight extends WidgetSlider
     update_detail(el, val, percent)
     {
         let out = this.BLACK.interpolate(this.WHITE, percent);
-        el.style.setProperty("--detail", out.rgb());
+        this.element.style.setProperty("--detail", out.rgb());
     }
 }
 
diff --git a/styles/widgets.css b/styles/widgets.css
index 987c857..28c12e1 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -129,7 +129,7 @@ input {
     width: calc(3 * var(--base-unit));
 }
 
-.slider > .fill {
+.slider > .fill, .color-light > .fill, .color-temp > .fill {
     overflow: hidden;
     width: 100%;
     height: 100%;
@@ -409,6 +409,12 @@ input {
     overflow: unset;
 }
 
+.color-temp.h {
+    height: var(--base-unit);
+    width: calc(3 * var(--base-unit));
+    background: linear-gradient(to left, rgb(190, 200, 255), white 30%, rgb(250, 160, 100));
+}
+
 .color-light {
     width: var(--base-unit);
     height: calc(3 * var(--base-unit));
@@ -417,31 +423,49 @@ input {
     overflow: unset;
 }
 
-.color-temp::after, .color-light::after {
+.color-light.h {
+    height: var(--base-unit);
+    width: calc(3 * var(--base-unit));
+    background: linear-gradient(to left, white, black);
+}
+
+.color-temp > .fill::after, .color-light > .fill::after {
     content: '';
-    width: calc(100% + 8px);
-    height: 14px;
+    width: 18px;
+    height: 18px;
     border: 5px solid #444;
     position: absolute;
-    bottom: calc(100% * var(--percent) - 7px);
-    left: -4px;
+    bottom: calc(100% * var(--percent) - 9px);
+    left: calc(50% - 9px);
 
     box-sizing: border-box;
 
-    border-radius: 7px;
+    border-radius: 50%;
 
     transition-duration: 0.15s;
 }
 
-.color-temp:active::after, .color-light:active::after, .color-temp.touch::after, .color-light.touch::after {
+.color-light > .fill::after {
+    border-color: color-mix(in srgb, white calc(100% * (1 - var(--percent))), black calc(100% * var(--percent)));
+}
+
+.color-temp.h > .fill::after, .color-light.h > .fill::after {
+    left: calc(100% * var(--percent) - 7.5px);
+    bottom: calc(50% - 7.5px);
+}
+
+.color-temp:active > .fill::after,
+.color-light:active > .fill::after,
+.color-temp.touch >  .fill::after,
+.color-light.touch >  .fill::after {
     transition-duration: 0s;
 }
 
-.color-temp:hover::after, .color-light:hover::after {
+.color-temp:hover > .fill::after {
     border-color: #888;
 }
 
-.color-temp.inactive::after, .color-light.inactive::after {
+.color-temp.inactive > .fill::after, .color-light.inactive > .fill::after {
     border-color: rgb(68, 68, 68, 0);
 }