Slider detail + normalize position names

2 files changed, 30 insertions, 14 deletions

diff --git a/index.html b/index.html
index 2ab8278..3764064 100644
--- a/index.html
+++ b/index.html
@@ -35,11 +35,11 @@
     <content>
         <span class="widget button" style="--top-color: blue; --side-color:red;">Lamp 1</span>
         <div class="widget button toggle">Lamp 1</div>
-        <div class="widget slider" style="--fill-percent: 0.3;"></div>
+        <div class="widget slider" style="--percent: 0.3;"><div class="detail">10%</div></div>
         <div class="widget button checkbox"></div>
         <div class="widget color-wheel" style="--pos-x: 0.3; --pos-y: 0.3;"></div>
-        <div class="widget color-temp" style="--pos: 0.3;"></div>
-        <div class="widget color-light" style="--pos: 0.3;"></div>
+        <div class="widget color-temp" style="--percent: 0.3;"></div>
+        <div class="widget color-light" style="--percent: 0.3;"></div>
         <div class="widget thermostat" style="--percent: 0.3; --arch-color: #0084ff;">
             <div class="arch"></div>
             <div class="gague">68</div>
diff --git a/styles/widgets.css b/styles/widgets.css
index 16bc7f5..20e4529 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -76,6 +76,7 @@
 .slider {
     width: var(--base-unit);
     height: calc(3 * var(--base-unit));
+    overflow: unset;
 }
 
 .slider.h {
@@ -88,7 +89,7 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    height: calc(100% * var(--fill-percent));
+    height: calc(100% * var(--percent));
     width: 100%;
     background-color: var(--w-sl-fill);
 
@@ -132,19 +133,34 @@
 }
 
 .slider > .detail {
-    display: none;
+    display: block;
     position: absolute;
-    left: calc(100% + 5px);
-    background-color: #0084ff;
-    color: white;
+
+    left: calc(100% + 20px);
+    bottom: calc(-1 * var(--base-unit) / 2 + 100% * var(--percent));
+
+    background-color: rgba(0, 132, 255, 0);
+    color: rgba(255, 255, 255, 0);
+
+    border-radius: 10px;
+
+    z-index: 1;
+
     font-weight: bold;
-    width: var(--base-unit);
+    min-width: var(--base-unit);
     height: var(--base-unit);
-    clip-path: path("");
+    transition-duration: 0.15s;
+    pointer-events: none;
+
+    align-content: center;
+    text-align: center;
+    padding-left: 3px;
+    padding-right: 3px;
 }
 
 .slider:active > .detail {
-    
+    background-color: rgba(0, 132, 255, 1);
+    color: rgba(255, 255, 255, 1);
 }
 
 /**
@@ -252,7 +268,7 @@
     height: 14px;
     border: 5px solid #444;
     position: absolute;
-    bottom: calc(100% * var(--pos) - 7px);
+    bottom: calc(100% * var(--percent) - 7px);
     left: -4px;
 
     box-sizing: border-box;
@@ -279,7 +295,7 @@
     width: 14px;
     border: 5px solid #444;
     position: absolute;
-    left: calc(100% * var(--pos) - 7px);
+    left: calc(100% * var(--percent) - 7px);
     top: -4px;
 
     box-sizing: border-box;
@@ -315,7 +331,7 @@
     top: calc(50% - 45px);
     left: calc(50% - 100px);
     
-    
+    /* Strange half-circle path */
     clip-path: path("M 6.6525702323609295 64.13556976925895 A 100 100 0 0 1 193.34742976763908 64.13556976925895 A 5 5 0 0 1 184.01268679087516 67.72201279233306 A 90 90 0 0 0 15.987313209124835 67.72201279233306 A 5 5 0 0 1 6.6525702323609295 64.13556976925895 ");
     background-color: #222;
 }