Minor CSS tweaks

wled00/data/index.css

@@ -174,16 +174,11 @@ button {
 }
 
 .slider-icon {
-	/*transform: translate(3px,3px);*/
 	position: absolute;
 	left: 8px;
 	bottom: 5px;
 }
 
-.e-icon {
-	/*transform: translateY(3px);*/
-}
-
 .sel-icon {
 	transform: translateX(3px);
 }
@@ -200,6 +195,10 @@ button {
 	right: 8px;
 }
 
+#segutil .g-icon {
+	top: 8px;
+}
+
 /* pop-up container */
 .pop {
 	position: absolute;
@@ -213,7 +212,7 @@ button {
 	position: absolute;
 	background-color: var(--c-2);
 	border: 1px solid var(--c-8);
-	border-radius: 16px;
+	border-radius: 20px;
 	z-index: 1;
 	top: 3px;
 	right: 35px;
@@ -228,7 +227,6 @@ button {
 	position: absolute;
 	top: 8px;
 	left: 12px;
-	/*pointer-events: none;*/
 	width: 24px;
 	height: 24px;
 }
@@ -800,8 +798,8 @@ input[type=range]::-moz-range-thumb {
 	-webkit-transform:translate3d(0,0,0);
 	backface-visibility: hidden;
 	transform:translate3d(0,0,0);
-	overflow: clip;
-	text-overflow: clip;
+	overflow: hidden;
+	text-overflow: ellipsis;
 	border: 1px solid var(--c-3);
 	background-color: var(--c-3);
 }
@@ -1018,7 +1016,7 @@ textarea {
 .segname, .pname {
 	white-space: nowrap;
 	text-align: center;
-	overflow: clip;
+	overflow: hidden;
 	text-overflow: ellipsis;
 	line-height: 24px;
 	padding: 8px 24px;
@@ -1076,11 +1074,9 @@ textarea {
 
 #csl .xxs {
 	border: 2px solid var(--c-d) !important;
-	/*box-shadow: 0 0 0 2px var(--c-d);*/
 }
 #csl .xxs-w {
 	border-width: 5px !important;
-	/*box-shadow: 0 0 0 5px var(--c-d);*/
 }
 
 .qcs, #namelabel { /* text shadow for name to be legible on grey backround */
@@ -1094,7 +1090,6 @@ textarea {
 
 .pwr {
 	color: var(--c-6);
-	transform: translate(1px, 1px);
 	cursor: pointer;
 }
 
@@ -1113,7 +1108,6 @@ textarea {
 	position: absolute;
 	top: 8px;
 	cursor: pointer;
-	/*padding: 8px;*/
 	z-index: 1;
 }
 
@@ -1258,7 +1252,6 @@ TD .checkmark, TD .radiomark {
 
 .lbl-s {
 	display: inline-block;
-	/* margin: 10px 4px 0 0; */
 	margin-top: 6px;
 	font-size: 13px;
 	width: 48%;
@@ -1308,10 +1301,6 @@ TD .checkmark, TD .radiomark {
 	background-color: var(--c-3);
 }
 
-/*.selected .radiomark {
-	border: 1px solid var(--c-3);
-}*/
-
 /* selected list item */
 .lstI.selected {
 	top: 0;
@@ -1423,7 +1412,7 @@ TD .checkmark, TD .radiomark {
 
 .check input:checked ~ .checkmark:after,
 .radio input:checked ~ .radiomark:after,
-.show, .g-icon,
+.show,
 .expanded .edit-icon,
 .expanded .segin, .expanded .presin, .expanded .sbs,
 .expanded {
@@ -1564,11 +1553,7 @@ TD .checkmark, TD .radiomark {
 		left: 12px;
 	}
 	.segname {
-		padding: 8px 16px;
-		max-width: 140px;
-	}
-	.segname, .pname {
-		max-width: 134px;
+		max-width: calc(100% - 110px);
 	}
 	.segt TD {
 		padding: 0 !important;

wled00/data/index.js

@@ -1762,11 +1762,11 @@ function makeSeg()
 
 function resetUtil(off=false)
 {
-	gId('segutil').innerHTML = `<div class="seg btn btn-s ${off?'off':''}" style="border-radius:24px;padding:0;">`
+	gId('segutil').innerHTML = `<div class="seg btn btn-s${off?' off':''}" style="padding:0;">`
 	+ '<label class="check schkl"><input type="checkbox" id="selall" onchange="selSegAll(this)"><span class="checkmark"></span></label>'
 	+ `<div class="segname" ${off?'':'onclick="makeSeg()"'}><i class="icons btn-icon">&#xe18a;</i>Add segment</div>`
 	+ '<div class="pop hide" onclick="event.stopPropagation();">'
-	+ `<i class="icons g-icon" style="color:var(--c-f);" onclick="this.nextElementSibling.classList.toggle('hide');">&#x25C9;</i>`
+	+ `<i class="icons g-icon" onclick="this.nextElementSibling.classList.toggle('hide');">&#xE34B;</i>`
 	+ '<div class="pop-c hide"><span style="color:var(--c-f);" onclick="selGrp(0);">&#x278A;</span><span style="color:var(--c-r);" onclick="selGrp(1);">&#x278B;</span><span style="color:var(--c-g);" onclick="selGrp(2);">&#x278C;</span><span style="color:var(--c-l);" onclick="selGrp(3);">&#x278D;</span></div>'
 	+ '</div></div>';
 }