Playlist UI (Aircoookie#2046)

* Test 1

* State 2

* Playlist UI progress

* Playlist saving

* Playlist saving

* Playlist object array

* Added Offset to segment options

* Positioning

* Playlist UI complete

wled00/data/index.css

@@ -402,9 +402,8 @@ button {
 }
 
 #imgw {
-	width: 200px;
-	height: 55px;
 	display: inline-block;
+	margin: 8px;
 }
 
 #kv, #kn {
@@ -432,6 +431,12 @@ img {
 	max-height: 100%;
 }
 
+.wi {
+	image-rendering: pixelated;
+	image-rendering: crisp-edges;
+	width: 210px;
+}
+
 @keyframes fadein {
 	from {bottom: 0; opacity: 0;}
 	to {bottom: calc(var(--bh) + 22px); opacity: 1;}
@@ -519,12 +524,16 @@ input[type=range]:active + .sliderbubble {
 	position: relative;
 }
 
+.sbs {
+	margin: 0px -20px 5px -6px;
+}
+
 .sws {
-	width: 212px;
+	width: 230px;
 }
 
 .sis {
-	width: 192px !important;
+	width: 214px !important;
 }
 
 .hd {
@@ -561,12 +570,11 @@ input[type=range]:active + .sliderbubble {
 }
 
 .btn-s {
-	padding: 9px;
 	width: 276px;
 	background-color: var(--c-2);
 }
 .btn-i {
-	padding-bottom: 3px;
+	padding-bottom: 4px;
 }
 .btn-icon {
 	margin: 0px 8px 4px 0;
@@ -578,6 +586,19 @@ input[type=range]:active + .sliderbubble {
 .btn-p {
 	width: 216px;
 }
+.btn-xs {
+  width: 39px;
+}
+.btn-pl-add {
+  position: absolute;
+  bottom: -29px;
+  left: 94px;
+}
+.btn-pl-del {
+	position: absolute;
+	right: 2px;
+	bottom: -3px;
+}
 
 #qcs-w {
 	margin-top: 10px;
@@ -601,6 +622,16 @@ input[type=range]:active + .sliderbubble {
 	width: 42px;
 }
 
+.sel-pl {
+  width: 200px;
+  background-position: 176px 16px;
+}
+
+.sel-ple {
+	width: 216px;
+  background-position: 192px 16px;
+}
+
 select {
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -665,6 +696,11 @@ input[type=text] {
 	margin: 26px 0 6px 12px !important;
 }
 
+.plentry {
+  margin-top: 16px;
+  position: relative;
+}
+
 .stxt {
 	width: 50px !important;
 }
@@ -741,9 +777,9 @@ input[type=number]::-webkit-outer-spin-button {
 
 .cnf-s {
 	position: absolute;
-	top: 66px;
-	right: 28px;
-	padding: 43px 6px;
+	top: 172px;
+	right: 23px;
+	padding: 7.5px 22px;
 }
 
 .pwr {
@@ -1016,6 +1052,16 @@ input[type="text"].search:not(:placeholder-shown) {
 	color: red;
 }
 
+.hrz {
+  width: auto;
+  height: 2px;
+  background-color: var(--c-e);
+}
+.hrz-pl {
+  margin: 20px 0;
+	position: relative;
+}
+
 ::-webkit-scrollbar {
 	width: 6px;
 }

wled00/data/index.htm

@@ -165,15 +165,7 @@
 		<div id="pcont">
 			Loading...
 		</div><br>
-		 <label class="check psvl">
-			Preset cycle
-			<input type="checkbox" id="cyToggle" onchange="toggleCY()">
-			<span class="checkmark psv"></span>
-		</label><br>
-		First preset: <input id="cycs" class="noslide" type="number" min="1" max="249" value="1"><br>
-		Last preset: <input id="cyce" class="noslide" type="number" min="2" max="250" value="3"><br>
-		Time per preset: <input id="cyct" class="noslide" type="number" min="0.2" max="6553.5" step="0.1" value="1.2">s<br>
-		Transition: <input id="cyctt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">s
+		Transition <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">s
 	</div>
 </div>
 
@@ -189,7 +181,7 @@
 <div id="namelabel" onclick="toggleNodes()"></div>
 <div id="info" class="modal">
 	<div id="imgw">
-		<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAACMCAYAAAAZQlGEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKLSURBVHhe7dgxjtwwEADBpf//5zUDwklnpzFAnKoSTigNFTT0AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDcOieX+G5nvNLaznil6f1Nv+/tz3c7+3tmen/Tpu/jbe877c85AQD+EQgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAINY5+aHvdsYRazvjK9jfM7fvz/0+Y3+/2+336w8CABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAADEOudrfLczXmltZ3yF6fuwv2em9+d+n5ne3zT3cZfp+/AHAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAYp3zNb7bGUes7Yz8wO334fmeuf35bmd/z9y+v9ufzx8EACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAIAQCABACAQCIdc4x3+2MV1rbGfmFpr+/6e/l9ue73fT+pt1+H2/bn+/lGX8QAIAQCABACAQAIAQCABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgP/u8/kLYCqAxINTyZkAAAAASUVORK5CYII=">
+		<img class="wi" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAFCAYAAAC5Fuf5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVChTlY9bDoAwDMNW7n9nwCipytQN4Z8tbrTHmDmF4oPzyldwRqp1SSdnV/NuZuzqerAByxXznBw3igkeFEfXyUuhK/yFM0CxJfyqXZEOc6/Sr9/bf7uIC5Nwd7orMvAPAAAAAElFTkSuQmCC" />
 	</div><br>
 <div id="kv">Loading...</div><br>
 <button class="btn infobtn" onclick="requestJson(null)">Refresh</button>