UI fix.

wled00/data/index.css

@@ -513,44 +513,41 @@ img {
 .sliderdisplay {
 	content:'';
 	position: absolute;
-	/*
 	top: 13px; left: 8px; right: 8px;
 	height: 4px;
-	*/
+/*
 	top: 12.5px; bottom: 12.5px;
 	left: 13px; right: 13px;
+*/
 	background: var(--c-4);
 	border-radius: 16px;
 	pointer-events: none;
 	z-index: -1;
+/*
 	--bg: var(--c-f);
+*/
 }
 
-#rwrap .sliderdisplay { --bg: #f00; }
-#gwrap .sliderdisplay { --bg: #0f0; }
-#bwrap .sliderdisplay { --bg: #00f; }
-#wbal .sliderdisplay, #kwrap .sliderdisplay {
-	background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff);
-}
 #rwrap .sliderdisplay,
 #gwrap .sliderdisplay,
 #bwrap .sliderdisplay,
 #wwrap .sliderdisplay,
+#vwrap .sliderdisplay,
+#kwrap .sliderdisplay,
 #wbal .sliderdisplay {
 	height: 28px;
 	top: 0; bottom: 0;
 	left: 0; right: 0;
 	/*border: 1px solid var(--c-b);*/
 }
-/*
 #rwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #f00); }
 #gwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #0f0); }
 #bwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #00f); }
-*/
 #wwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #fff); }
-/*
+#vwrap .sliderdisplay { /*background: linear-gradient(90deg, #000 0%, #fff);*/ }
-#wbal .sliderdisplay  { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #d4e0ff); }
+#kwrap .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
-*/
+#wbal .sliderdisplay  { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
+
 .sliderbubble {
 	width: 24px;
 	position: relative;
@@ -583,16 +580,18 @@ input[type=range] {
 	background-color: transparent;
 	cursor: pointer;
 }
-/*
+
 #rwrap input[type=range],
 #gwrap input[type=range],
 #bwrap input[type=range],
 #wwrap input[type=range],
-#wbal input[type=range] {
+#vwrap input[type=range],
+#kwrap input[type=range],
+#wbal  input[type=range] {
 	width: 252px;
 	margin: 0;
 }
-*/
+
 input[type=range]:focus {
 	outline: none;
 }
@@ -628,6 +627,8 @@ input[type=range]::-moz-range-thumb {
 #gwrap input[type=range]::-webkit-slider-thumb,
 #bwrap input[type=range]::-webkit-slider-thumb,
 #wwrap input[type=range]::-webkit-slider-thumb,
+#vwrap input[type=range]::-webkit-slider-thumb,
+#kwrap input[type=range]::-webkit-slider-thumb,
 #wbal input[type=range]::-webkit-slider-thumb {
 	height: 18px;
 	width: 18px;
@@ -638,6 +639,8 @@ input[type=range]::-moz-range-thumb {
 #gwrap input[type=range]::-moz-range-thumb,
 #bwrap input[type=range]::-moz-range-thumb,
 #wwrap input[type=range]::-moz-range-thumb,
+#vwrap input[type=range]::-moz-range-thumb,
+#kwrap input[type=range]::-moz-range-thumb,
 #wbal input[type=range]::-moz-range-thumb {
 	border: 2px solid var(--c-1);
 }
@@ -654,6 +657,8 @@ input[type=range]::-moz-range-thumb {
 #gwrap .sliderwrap,
 #bwrap .sliderwrap,
 #wwrap .sliderwrap,
+#vwrap .sliderwrap,
+#kwrap .sliderwrap,
 #wbal .sliderwrap {
 	width: 260px;
 	margin: 10px 0 0;

wled00/data/index.htm

@@ -46,13 +46,15 @@
 <div class ="container">
 	<div id="Colors" class="tabcontent">
 		<div id="picker" class="noslide"></div>
-		<div id="vwrap" class="IL">
+		<div id="vwrap">
+			<p class="labels hd">Value</p>
 			<div class="sliderwrap il">
 				<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
 				<div class="sliderdisplay"></div>
 			</div><br>
 		</div>
 		<div id="kwrap">
+			<p class="labels hd">White balance</p>
 			<div class="sliderwrap il">
 				<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
 				<div class="sliderdisplay"></div>
@@ -86,13 +88,13 @@
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>
-		<div id="wbal">
+		<!--div id="wbal">
 			<p class="labels hd">White balance</p>
 			<div class="sliderwrap il">
 				<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div>
-		</div>
+		</div-->
 		<div id="qcs-w">
 			<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
 			<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>

wled00/data/index.js

@@ -1074,7 +1074,7 @@ function updateUI()
 
 	gId('wwrap').style.display = (isRgbw) ? "block":"none";
 	gId("wbal").style.display = (cct) ? "block":"none";
-	gId('kwrap').style.display = (lastinfo.leds.cct) ? "none":"block";
+	gId('kwrap').style.display = (cct) ? "none":"block";
 
 	updatePA();
 	updatePSliders();
@@ -2029,8 +2029,9 @@ function updatePSliders() {
 	var hsv = {"h":cpick.color.hue,"s":cpick.color.saturation,"v":100}; 
 	var c = iro.Color.hsvToRgb(hsv);
 	var cs = 'rgb('+c.r+','+c.g+','+c.b+')';
-	v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs);
+	//v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs);
-	updateTrail(v);
+	v.nextElementSibling.style.backgroundImage = `linear-gradient(90deg, #000 0%, rgb(${c.r},${c.g},${c.b}))`;
+	//updateTrail(v);
 
 	//update Kelvin slider
 	gId('sliderK').value = cpick.color.kelvin;
@@ -2095,12 +2096,6 @@ function setBalance(b)
 	requestJson(obj);
 }
 
-function setBalance(b)
-{
-	var obj = {"seg": {"cct": parseInt(b)}};
-	requestJson(obj);
-}
-
 var hc = 0;
 setInterval(function(){if (!isInfo) return; hc+=18; if (hc>300) hc=0; if (hc>200)hc=306; if (hc==144) hc+=36; if (hc==108) hc+=18;
 gId('heart').style.color = `hsl(${hc}, 100%, 50%)`;}, 910);