Fix minor UI issues

Logo margin in info page
copy to clipboard button text on two lines
noslide on preset API textfield
Preset margins

wled00/data/index.css

@@ -587,7 +587,7 @@ button {
 	margin: 0 auto;
 }
 
-#imgw {
+#info #imgw {
 	/*display: inline-block;*/
 	margin: 8px auto;
 }
@@ -654,7 +654,7 @@ img {
 	border-radius: 10px;
 	background: var(--c-3);
 	color: var(--c-f);
-	padding: 4px 4px 2px;
+	padding: 2px 4px;
 	font-size: 14px;
 	right: 3px;
 	transition: visibility 0.25s ease, opacity 0.25s ease;
@@ -780,7 +780,7 @@ input[type=range]::-moz-range-thumb {
 	margin: 0;
 }
 .btn-icon {
-	margin: -4px 4px 0 0;
+	margin: -4px 4px -1px 0;
 	vertical-align: middle;
 	display: inline-block;
 }
@@ -911,7 +911,7 @@ input[type=text] {
 	background: var(--c-3);
 	color: var(--c-f);
 	border: 0px solid var(--c-2);
-	border-radius: 5px;
+	border-radius: 10px;
 	padding: 8px;
 	/*margin: 6px 6px 6px 0;*/
 	font-size: 19px;
@@ -971,7 +971,7 @@ textarea {
 }
 
 .ptxt {
-    margin: 0 4px 4px !important;
+  margin: -1px 4px 8px !important;
 	display: none;
 }
 
@@ -1191,7 +1191,7 @@ TD .checkmark, TD .radiomark {
 /* segment & preset wrapper */
 .seg, .pres {
 	background-color: var(--c-2);
-	color: var(--c-f);
+	/*color: var(--c-f);*/ /* seems to affect only the Add segment button, which should be same color as reset segments */
 	border: 0px solid var(--c-f);
 	text-align: left;
 	transition: background-color 0.5s;
@@ -1282,6 +1282,10 @@ TD .checkmark, TD .radiomark {
 	background-color: var(--c-3);
 }
 
+/*.selected .radiomark {
+	border: 1px solid var(--c-3);
+}*/
+
 /* selected list item */
 .lstI.selected {
 	top: 0;
@@ -1332,7 +1336,7 @@ TD .checkmark, TD .radiomark {
 /* list item palette preview */
 .lstIprev {
 	width: 100%;
-	height: 7px;
+	height: 6px;
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -1402,6 +1406,10 @@ TD .checkmark, TD .radiomark {
 	display: inline-block !important;
 }
 
+.m6 {
+	margin: 6px 0;
+}
+
 .c {
 	text-align: center;
 }
@@ -1415,6 +1423,7 @@ TD .checkmark, TD .radiomark {
 	color: red;
 }
 
+/* horizontal divider (playlist entries) */
 .hrz {
 	width: auto;
 	height: 2px;

wled00/data/index.js

@@ -414,7 +414,7 @@ function presetError(empty)
 		else
 			cn += `Here is a backup of the last known good state:`;
 		cn += `<textarea id="bck"></textarea><br>
-			<button class="btn btn-p" onclick="cpBck()">Copy to clipboard</button>`;
+			<button class="btn" onclick="cpBck()">Copy to clipboard</button>`;
 	}
 	cn += `</div>`;
 	gId('pcont').innerHTML = cn;
@@ -1694,7 +1694,7 @@ function resetUtil()
 //	gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</button>';
 	gId('segutil').innerHTML = '<div class="seg btn btn-s" style="border-radius:24px;padding:0;">'
 	+ '<label class="check schkl"><input type="checkbox" id="selall" onchange="selSegAll(this)"><span class="checkmark"></span></label>'
-	+ '<div class="segname" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</div></div>';
+	+ '<div class="segname" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</div></div>';
 }
 
 var plJson = {"0":{
@@ -1848,9 +1848,9 @@ ${makePlSel(plJson[i].end?plJson[i].end:0, true)}
 	<span class="checkmark"></span>
 </label>
 </div>
-<div class="po2" id="p${i}o2">API command<br><textarea class="apitxt" id="p${i}api"></textarea></div>
+<div class="po2" id="p${i}o2">API command<br><textarea class="apitxt noslide" id="p${i}api"></textarea></div>
 <div class="po1" id="p${i}o1">${content}</div>
-<div class="c">Save to ID <input class="noslide" id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div>
+<div class="c m6">Save to ID <input class="noslide" id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div>
 <div class="c">
 	<button class="btn btn-p" onclick="saveP(${i},${pl})"><i class="icons btn-icon">&#xe390;</i>Save</button>
 	${(i>0)?'<button class="btn btn-p" id="p'+i+'del" onclick="delP('+i+')"><i class="icons btn-icon">&#xe037;</i>Delete':'<button class="btn btn-p" onclick="resetPUtil()">Cancel'}</button>
@@ -1911,7 +1911,8 @@ function makePlUtil()
 	if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr;
 	let p = gId('putil');
 	p.classList.remove('staybot');
-	p.innerHTML = `<div class="pres"><div class="segin expanded" id="seg100">${makeP(0,true)}</div></div>`;
+	p.classList.add('pres');
+	p.innerHTML = `<div class="presin expanded" id="seg100">${makeP(0,true)}</div></div>`;
 	refreshPlE(0);
 	gId('p0txt').focus();
 	p.scrollIntoView({
@@ -1927,8 +1928,8 @@ function resetPUtil()
 	let p = gId('putil');
 	p.classList.add('staybot');
 	p.classList.remove('pres');
-	p.innerHTML = `<button class="btn btn-s" onclick="makePUtil()" style="float:left;"><i class="icons btn-icon">&#xe18a;</i>preset</button>`
-	+ `<button class="btn btn-s" onclick="makePlUtil()" style="float:right;"><i class="icons btn-icon">&#xe18a;</i>playlist</button>`;
+	p.innerHTML = `<button class="btn btn-s" onclick="makePUtil()" style="float:left;"><i class="icons btn-icon">&#xe18a;</i>Preset</button>`
+	+ `<button class="btn btn-s" onclick="makePlUtil()" style="float:right;"><i class="icons btn-icon">&#xe18a;</i>Playlist</button>`;
 }
 
 function tglCs(i)

wled00/wled.h

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