Small CSS alignment adjustments

mainseg is not highlighted by default, but can be enabled by CSS only
Simplify some CSS (new segment box, segment brightness slider)
Started labeling CSS classes

wled00/data/index.css

@@ -45,8 +45,6 @@ body {
 	text-align: center;
 	-webkit-touch-callout: none;
 		-webkit-user-select: none;
-			 -moz-user-select: none;
-				-ms-user-select: none;
 						user-select: none;
 	-webkit-tap-highlight-color: transparent;
   scrollbar-width: 6px;
@@ -128,11 +126,6 @@ button {
 	width: 100%;
 }
 
-.segt {
-	table-layout: fixed;
-	width: 76%;
-}
-
 .segtd {
 	text-align: center;
 	text-transform: uppercase;
@@ -554,12 +547,9 @@ input[type=range]:active + .sliderbubble {
 	margin: 0px -20px 5px -6px;
 }
 
+/* Segment brightness slider wrapper div */
 .sws {
-	width: 230px;
+	margin-left: -7px;
-}
-
-.sis {
-	width: 214px !important;
 }
 
 .hd {
@@ -763,9 +753,6 @@ input[type=number]::-webkit-outer-spin-button {
 .pname, .plname, .segname {
 	position: absolute;
 	left: 50%;
-	text-align: center;
-	overflow: hidden;
-	text-overflow: clip;
 	transform: translateX(-50%);
 	white-space: nowrap;
 	cursor: pointer;
@@ -778,15 +765,18 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .segname {
-	top: 2px;
+	top: 0px;
 	padding: 9px 0;
 }
 .pname, .plname {
 	width: 208px;
 	padding: 8px 0;
+	text-align: center;
+	overflow: hidden;
+	text-overflow: clip;
 }
 .pname {
-	top: 2px;
+	top: 1px;
 }
 .plname {
 	top:0;
@@ -831,15 +821,13 @@ input[type=number]::-webkit-outer-spin-button {
 	border-radius: 5px;
 }
 
+/* Segment apply button (checkmark) */
 .cnf-s {
-	/*position: absolute;
+	padding: 8.5px 21px 5px;
-	bottom: 100px;
-	right: 23px;*/
-	padding: 9px 22px 7px;
-	margin: 0;
 	display: inline;
 }
 
+/* Segment power button icon */
 .pwr {
 	color: var(--c-6);
 	transform: translate(2px, 3px);
@@ -850,11 +838,6 @@ input[type=number]::-webkit-outer-spin-button {
 	color: var(--c-f);
 }
 
-.half {
-	padding: 7.5px;
-	bottom: 35px;
-}
-
 .del {
 	position: absolute;
 	bottom: 8px;
@@ -899,7 +882,6 @@ input[type=number]::-webkit-outer-spin-button {
 
 .checkmark, .radiomark {
 	position: absolute;
-	top: 6px;
 	left: 0;
 	height: 24px;
 	width: 24px;
@@ -908,9 +890,14 @@ input[type=number]::-webkit-outer-spin-button {
 	/*border: 1px solid var(--c-2);*/
 }
 
+.checkmark {
+	top: 6px;
+}
+
 .radiomark {
 	border-radius: 50%;
 	background-color: transparent;
+	top: 7px;
 }
 
 .schk {
@@ -932,13 +919,13 @@ input[type=number]::-webkit-outer-spin-button {
 
 
 .check:hover input ~ .checkmark {
-	background-color: var(--c-4);
+	background-color: var(--c-5);
 }
-/*
+
 .check input:checked ~ .checkmark {
 	background-color: var(--c-6);
 }
-*/
+
 .checkmark:after, .radiomark:after {
 	content: "";
 	position: absolute;
@@ -950,7 +937,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .check .checkmark:after {
-	left: 9px;
+	left: 8px;
 	top: 4px;
 	width: 5px;
 	height: 10px;
@@ -962,11 +949,11 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .radio .radiomark:after {
-	width: 14px;
+	width: 12px;
-	height: 14px;
+	height: 12px;
 	top: 50%;
 	left: 50%;
-	margin: -7px;
+	margin: -6px;
 	border-radius: 50%;
 	background: var(--c-f);
 }
@@ -1000,8 +987,13 @@ input[type=number]::-webkit-outer-spin-button {
 .selected {
 	background-color: var(--c-4);
 }
+/* "selected" CSS class is applied to the segment when it is the main segment.
+	By default, do not highlight. Can be overridden by skin.css */
+.selected .seg {
+	background-color: var(--c-2); /* var(--c-4); */
+}
 .selected .checkmark, .selected .radiokmark {
-	background-color: var(--c-6);
+	background-color: var(--c-4); /* var(--c-6); */
 }
 
 .list {
@@ -1023,7 +1015,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .lstI:hover {
-    background: var(--c-4);
+	background: var(--c-4);
 }
 
 .lstI:last-child {
@@ -1073,10 +1065,10 @@ input[type="text"].search {
 	display: block;
 	width: 230px;
 	box-sizing: border-box;
-  padding: 8px 8px 9px 38px;
+	padding: 8px 8px 9px 38px;
-  margin: 6px auto 0 auto;
+	margin: 6px auto 0 auto;
 	text-align: left;
-  background-color: var(--c-3);
+	background-color: var(--c-3);
 }
 
 input[type="text"].search:focus {

wled00/data/index.js

@@ -576,7 +576,7 @@ function populateSegments(s)
 				<div class="sbs">
 				<i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i>
 				<div class="sliderwrap il sws">
-					<input id="seg${i}bri" class="noslide sis" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
+					<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
 					<div class="sliderdisplay"></div>
 				</div>
 				</div>
@@ -1283,18 +1283,19 @@ function makeSeg() {
 	<br>
 	<div class="segin expanded">
 		<input type="text" class="ptxt stxt noslide" id="seg${lowestUnused}t" autocomplete="off" maxlength=32 value="" placeholder="Enter name..."/>
-		<table class="segt">
+		<table class="infot">
 			<tr>
 				<td class="segtd">Start LED</td>
 				<td class="segtd">${cfg.comp.seglen?"Length":"Stop LED"}</td>
+				<td class="segtd">Apply</td>
 			</tr>
 			<tr>
 				<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})" onkeydown="segEnter(${lowestUnused})"></td>
 				<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount-(cfg.comp.seglen?ns:0)}" value="${ledCount-(cfg.comp.seglen?ns:0)}" oninput="updateLen(${lowestUnused})" onkeydown="segEnter(${lowestUnused})"></td>
+				<td class="segtd"><i class="icons e-icon cnf cnf-s" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i></td>
 			</tr>
 		</table>
 		<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LED${ledCount - ns >1 ? "s":""}</div>
-		<i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i>
 	</div>
 </div>`;
 	d.getElementById('segutil').innerHTML = cn;
@@ -1511,11 +1512,14 @@ function tglSegn(s)
     (window.getComputedStyle(d.getElementById(`seg${s}t`)).display === "none") ? "inline":"none";
 }
 
+// Select only the clicked segment and unselect all others
 function selSegEx(s)
 {
 	var obj = {"seg":[]};
 	for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":(i==s)});
-	obj.mainseg = s;
+	// optionally, force mainseg to be first selected
+	// WLED internally regards the first selected as mainseg regardless of this as long as any segment is selected
+	//obj.mainseg = s;
 	requestJson(obj);
 }
 
@@ -1530,7 +1534,7 @@ function rptSeg(s)
 	var name = d.getElementById(`seg${s}t`).value;
 	var start = parseInt(d.getElementById(`seg${s}s`).value);
 	var stop = parseInt(d.getElementById(`seg${s}e`).value);
-	if (stop == 0) {return;}
+	if (stop == 0) return;
 	var rev = d.getElementById(`seg${s}rev`).checked;
 	var mi = d.getElementById(`seg${s}mi`).checked;
 	var sel = d.getElementById(`seg${s}sel`).checked;
@@ -1819,15 +1823,17 @@ function updatePSliders() {
   v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs);
   updateTrail(v);
 
-	//update Kelvin slider
+	// update Kelvin slider
   d.getElementById('sliderK').value = cpick.color.kelvin;
 }
 
+// Fired when a key is pressed while in the HEX color input
 function hexEnter() {
 	d.getElementById('hexcnf').style.backgroundColor = "var(--c-6)";
 	if(event.keyCode == 13) fromHex();
 }
 
+// Fired when a key is pressed while in a segment input
 function segEnter(s) {
 	if(event.keyCode == 13) setSeg(s);
 }

wled00/wled.h

@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2202222
+#define VERSION 2203010
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG