Minor CSS simplifications

brentru · Mar 1, 2022 · be90bf0 · be90bf0
1 parent adcdaba
commit be90bf0
Show file tree

Hide file tree

Showing 5 changed files with 2,197 additions and 2,186 deletions.
diff --git a/wled00/data/index.css b/wled00/data/index.css
@@ -585,6 +585,13 @@ input[type=range]:active + .sliderbubble {
 	-webkit-transform:translate3d(0,0,0);*/
 }
 
+/* Small round button (color selectors, icon-only round buttons) */
+.xxs {
+	width: 40px;
+	margin: 6px;
+}
+
+/* Segments/presets auxiliary buttons (Add segment, Create preset, ...) */
 .btn-s {
 	width: 276px;
 	background-color: var(--c-2);
@@ -596,61 +603,72 @@ input[type=range]:active + .sliderbubble {
 	margin: 0px 8px 4px 0;
 	vertical-align: middle;
 }
-.btna-icon {
-	margin: 0px;
-}
+
+/* Wide button used in presets (Save, playlist test, delete) */
 .btn-p {
 	width: 216px;
 }
-.btn-xs {
-	width: 42px;
-	height: 42px;
-	margin: 2px 0 0 0;
+
+/* Delete preset from playlist button */
+.btn-pl-del {
+	margin: 0 0 0 3px;
 }
+
+/* Add preset to playlist "+" button */
 .btn-pl-add {
-	margin-left: 5px;
+	margin: 3px 0 0 8px;
 }
 
-
+/* Quick color select buttons wrapper div */
 #qcs-w {
 	margin-top: 10px;
 }
+
+/* Quick color select buttons */
 .qcs {
 	padding: 14px;
 	margin: 2px;
 	border-radius: 14px;
 	display: inline-block;
 }
+
+/* Quick color select Black button (has white border) */
 .qcsb {
 	padding: 13px;
 	border: 1px solid var(--c-f);
 }
+
+/* Hex color input wrapper div */
 #hexw {
 	margin-top: 5px;
 	display: none;
 }
+
+/* Transition time input */
 #tt {
 	text-align: center;
 }
 
+/* Color slot select buttons (1,2,3) */
 .cl {
 	width: 42px;
 }
 
+/* Playlist preset select */
 .sel-pl {
 	width: 192px;
 	background-position: 168px 16px;
 	margin: 8px 3px 0 0;
 }
 
+/* Playlist end preset select */
 .sel-ple {
 	width: 216px;
 	background-position: 192px 16px;
 }
 
 select {
 	-webkit-appearance: none;
-	-moz-appearance: none;
 	appearance: none;
 	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
 	background-size: 12px;
@@ -681,7 +699,6 @@ input[type=number], input[type=text] {
 	outline: none;
 	width: 50px;
 	-webkit-appearance: textfield;
-		 -moz-appearance: textfield;
 					appearance: textfield;
 }
 
@@ -706,18 +723,18 @@ input[type=text] {
 	text-align: center;
 }
 
-.ptxt {
-	width: 200px !important;
-	margin: 26px 0 6px 12px !important;
+input[type=text].ptxt {
+	width: 200px;
+	margin: 26px 0 6px 12px;
 }
 
-.stxt {
+input[type=text].stxt {
 	display: none;
-	margin-top: 6px !important;
+	margin-top: 6px;
 }
 
-.qltxt {
-	width: 50px !important;
+input[type=text].qltxt {
+	width: 50px;
 }
 
 input[type=number]:focus, input[type=text]:focus {
@@ -801,11 +818,7 @@ input[type=number]::-webkit-outer-spin-button {
 	padding: 6px 0 0 0;
 }
 
-.xxs {
-	width: 40px;
-	margin: 6px;
-}
-
+/* Quick preset select buttons */
 .psts {
 	background-color: var(--c-3);
 	color: var(--c-f);
@@ -814,15 +827,12 @@ input[type=number]::-webkit-outer-spin-button {
 	height: 40px;
 }
 
+/* Segment apply button (checkmark) */
 .cnf {
 	color: var(--c-f);
 	cursor: pointer;
 	background: var(--c-3);
 	border-radius: 5px;
-}
-
-/* Segment apply button (checkmark) */
-.cnf-s {
 	padding: 8.5px 21px 5px;
 	display: inline;
 }
@@ -842,8 +852,6 @@ input[type=number]::-webkit-outer-spin-button {
 	position: absolute;
 	bottom: 8px;
 	right: 8px;
-	color: var(--c-f);
-	cursor: pointer;
 }
 
 .check, .radio {
@@ -1111,6 +1119,10 @@ input[type="text"].search:not(:placeholder-shown) {
 	background-color: var(--c-b);
 }
 
+.no-margin {
+	margin: 0;
+}
+
 ::-webkit-scrollbar {
 	width: 6px;
 }

diff --git a/wled00/data/index.htm b/wled00/data/index.htm
@@ -106,7 +106,7 @@
 		</div>
 		<div id="hexw">
 			<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
-			<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button>
+			<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons no-margin">&#xe390;</i></button>
 		</div>
 		<p class="labels">
 			<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>

diff --git a/wled00/data/index.js b/wled00/data/index.js
@@ -601,7 +601,7 @@ function populateSegments(s)
 					<tr>
 						<td class="segtd"><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
 						<td class="segtd"><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
-						<td class="segtd"><i class="icons e-icon cnf cnf-s" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i></td>
+						<td class="segtd"><i class="icons e-icon cnf" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i></td>
 					</tr>
 				</table>
 				<div class="h" id="seg${i}len"></div>
@@ -616,8 +616,8 @@ function populateSegments(s)
 					<span class="checkmark schk"></span>
 				</label>
 				<div class="del">
-					<button class="btn btn-i btn-xs" id="segr${i}" title="Repeat until end" onclick="rptSeg(${i})"><i class="icons btn-icon">&#xe22d;</i></button>
-					<button class="btn btn-i btn-xs" id="segd${i}" title="Delete" onclick="delSeg(${i})"><i class="icons btn-icon">&#xe037;</i></button>
+					<button class="xxs btn no-margin" id="segr${i}" title="Repeat until end" onclick="rptSeg(${i})"><i class="icons no-margin">&#xe22d;</i></button>
+					<button class="xxs btn no-margin" id="segd${i}" title="Delete" onclick="delSeg(${i})"><i class="icons no-margin">&#xe037;</i></button>
 				</div>
 			</div>
 		</div><br>`;
@@ -806,7 +806,7 @@ function populateNodes(i,n)
 		for (var x=0;x<n.nodes.length;x++) {
 			var o = n.nodes[x];
 			if (o.name) {
-				var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
+				var url = `<button class="btn no-margin tab" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
 				urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`);
 						nnodes++;
 			}
@@ -1291,7 +1291,7 @@ function makeSeg() {
 			<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>
+				<td class="segtd"><i class="icons e-icon cnf" 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>
@@ -1470,11 +1470,11 @@ function makePlEntry(p,i) {
 		<select class="btn sel sel-pl" onchange="plePs(${p},${i},this)" data-val=${plJson[p].ps[i]} data-index=${i}>
 		${makePlSel()}
 		</select>
-		<button class="btn btn-i btn-xs btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button>
+		<button class="xxs btn btn-pl-del" onclick="delPl(${p},${i})"><i class="icons no-margin">&#xe037;</i></button>
 		<div class="h plnl">Duration</div><div class="h plnl">Transition</div><div class="h pli">#${i+1}</div><br>
 		<input class="noslide pln" type="number" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value=${plJson[p].dur[i]/10.0}>
 		<input class="noslide pln" type="number" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value=${plJson[p].transition[i]/10.0}> s
-		<button class="btn btn-i btn-xs btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button>
+		<button class="xxs btn btn-pl-add" onclick="addPl(${p},${i})"><i class="icons no-margin">&#xe18a;</i></button>
 		<div class="hrz"></div>
 	</div>`;
 }