From a6adb314ec6c50c48d7784eaa25140dbdf69267c Mon Sep 17 00:00:00 2001
From: Blaz Kristan <blaz@kristan-sp.si>
Date: Mon, 11 Oct 2021 17:55:26 +0200
Subject: [PATCH] Clean up settings CSS.

---
 wled00/data/settings_leds.htm | 10 +++++-----
 wled00/data/settings_time.htm | 18 +++++++++---------
 wled00/data/style.css         |  8 ++++----
 wled00/html_settings.h        | 33 +++++++++++++++++----------------
 4 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm
index 986e9979..ce247079 100644
--- a/wled00/data/settings_leds.htm
+++ b/wled00/data/settings_leds.htm
@@ -326,11 +326,11 @@ ${i+1}:
 <span id="psd${i}">Start:</span> <input type="number" name="LS${i}" id="ls${i}" class="l starts" min="0" max="8191" value="${lastEnd(i)}" oninput="startsDirty[${i}]=true;UI();" required />&nbsp;
 <div id="dig${i}c" style="display:inline">Length: <input type="number" name="LC${i}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>
 <br>
-<span id="p0d${i}">GPIO:</span> <input type="number" name="L0${i}" min="0" max="33" required class="xs" onchange="UI()"/>
-<span id="p1d${i}"></span><input type="number" name="L1${i}" min="0" max="33" class="xs" onchange="UI()"/>
-<span id="p2d${i}"></span><input type="number" name="L2${i}" min="0" max="33" class="xs" onchange="UI()"/>
-<span id="p3d${i}"></span><input type="number" name="L3${i}" min="0" max="33" class="xs" onchange="UI()"/>
-<span id="p4d${i}"></span><input type="number" name="L4${i}" min="0" max="33" class="xs" onchange="UI()"/>
+<span id="p0d${i}">GPIO:</span> <input type="number" name="L0${i}" min="0" max="33" required class="s" onchange="UI()"/>
+<span id="p1d${i}"></span><input type="number" name="L1${i}" min="0" max="33" class="s" onchange="UI()"/>
+<span id="p2d${i}"></span><input type="number" name="L2${i}" min="0" max="33" class="s" onchange="UI()"/>
+<span id="p3d${i}"></span><input type="number" name="L3${i}" min="0" max="33" class="s" onchange="UI()"/>
+<span id="p4d${i}"></span><input type="number" name="L4${i}" min="0" max="33" class="s" onchange="UI()"/>
 <div id="dig${i}r" style="display:inline"><br><span id="rev${i}">Reversed</span>: <input type="checkbox" name="CV${i}"></div>
 <div id="dig${i}s" style="display:inline"><br>Skip 1<sup>st</sup> LED: <input id="sl${i}" type="checkbox" name="SL${i}"></div>
 <div id="dig${i}f" style="display:inline"><br>Off Refresh: <input id="rf${i}" type="checkbox" name="RF${i}">&nbsp;</div>
diff --git a/wled00/data/settings_time.htm b/wled00/data/settings_time.htm
index 5dfe0515..13e4d3b9 100644
--- a/wled00/data/settings_time.htm
+++ b/wled00/data/settings_time.htm
@@ -43,16 +43,16 @@
 	}
     function BTa()
     {
-      var ih="<tr><th>Active</th><th>Hour</th><th>Minute</th><th>Preset</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>";
+      var ih="<tr><th>En.</th><th>Hour</th><th>Minute</th><th>Preset</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>";
       for (i=0;i<8;i++)
       {
-        ih+="<tr><td><input name=\"W"+i+"\" id=\"W"+i+"\" type=\"number\" style=\"display:none\"><input id=\"W"+i+"0\" type=\"checkbox\"></td><td><input name=\"H"+i+"\" class=\"sml\" type=\"number\" min=\"0\" max=\"24\"></td><td><input name=\"N"+i+"\" class=\"sml\" type=\"number\" min=\"0\" max=\"59\"></td><td><input name=\"T"+i+"\" class=\"med\" type=\"number\" min=\"0\" max=\"250\"></td>";
+        ih+="<tr><td><input name=\"W"+i+"\" id=\"W"+i+"\" type=\"hidden\"><input id=\"W"+i+"0\" type=\"checkbox\"></td><td><input name=\"H"+i+"\" class=\"xs\" type=\"number\" min=\"0\" max=\"24\"></td><td><input name=\"N"+i+"\" class=\"xs\" type=\"number\" min=\"0\" max=\"59\"></td><td><input name=\"T"+i+"\" class=\"s\" type=\"number\" min=\"0\" max=\"250\"></td>";
         for (j=1;j<8;j++) ih+="<td><input id=\"W"+i+j+"\" type=\"checkbox\"></td>";
 		ih+="</tr>";
       }
-	  ih+="<tr><td><input name=\"W8\" id=\"W8\" type=\"number\" style=\"display:none\"><input id=\"W80\" type=\"checkbox\"></td><td>Sunrise<input name=\"H8\" class=\"sml\" value=\"255\" type=\"hidden\"></td><td><input name=\"N8\" class=\"sml\" type=\"number\" min=\"-59\" max=\"59\"></td><td><input name=\"T8\" class=\"med\" type=\"number\" min=\"0\" max=\"250\"></td>";
+	  ih+="<tr><td><input name=\"W8\" id=\"W8\" type=\"hidden\"><input id=\"W80\" type=\"checkbox\"></td><td>Sunrise<input name=\"H8\" value=\"255\" type=\"hidden\"></td><td><input name=\"N8\" class=\"xs\" type=\"number\" min=\"-59\" max=\"59\"></td><td><input name=\"T8\" class=\"s\" type=\"number\" min=\"0\" max=\"250\"></td>";
       for (j=1;j<8;j++) ih+="<td><input id=\"W8"+j+"\" type=\"checkbox\"></td>";
-	  ih+="</tr><tr><td><input name=\"W9\" id=\"W9\" type=\"number\" style=\"display:none\"><input id=\"W90\" type=\"checkbox\"></td><td>Sunset<input name=\"H9\" class=\"sml\" value=\"255\" type=\"hidden\"></td><td><input name=\"N9\" class=\"sml\" type=\"number\" min=\"-59\" max=\"59\"></td><td><input name=\"T9\" class=\"med\" type=\"number\" min=\"0\" max=\"250\"></td>";
+	  ih+="</tr><tr><td><input name=\"W9\" id=\"W9\" type=\"hidden\"><input id=\"W90\" type=\"checkbox\"></td><td>Sunset<input name=\"H9\" value=\"255\" type=\"hidden\"></td><td><input name=\"N9\" class=\"xs\" type=\"number\" min=\"-59\" max=\"59\"></td><td><input name=\"T9\" class=\"s\" type=\"number\" min=\"0\" max=\"250\"></td>";
       for (j=1;j<8;j++) ih+="<td><input id=\"W9"+j+"\" type=\"checkbox\"></td>";
 	  ih+="</tr>";
       gId("TMT").innerHTML=ih;
@@ -159,16 +159,16 @@
 		</div>
 		Countdown Mode: <input type="checkbox" name="CE"><br>
 		Countdown Goal:<br>
-		Year: 20 <input name="CY" class="small" type="number" min="0" max="99" required> Month: <input name="CI" class="small" type="number" min="1" max="12" required> Day: <input name="CD" class="small" type="number" min="1" max="31" required><br>
-		Hour: <input name="CH" class="small" type="number" min="0" max="23" required> Minute: <input name="CM" class="small" type="number" min="0" max="59" required> Second: <input name="CS" class="small" type="number" min="0" max="59" required><br>
+		Year: 20 <input name="CY" class="xs" type="number" min="0" max="99" required> Month: <input name="CI" class="xs" type="number" min="1" max="12" required> Day: <input name="CD" class="xs" type="number" min="1" max="31" required><br>
+		Hour: <input name="CH" class="xs" type="number" min="0" max="23" required> Minute: <input name="CM" class="xs" type="number" min="0" max="59" required> Second: <input name="CS" class="xs" type="number" min="0" max="59" required><br>
 		<h3>Macro presets</h3>
     	<b>Macros have moved!</b><br>
     	<i>Presets now also can be used as macros to save both JSON and HTTP API commands.<br>
     	Just enter the preset id below!</i>
 		<i>Use 0 for the default action instead of a preset</i><br>
-		Alexa On/Off Preset: <input name="A0" type="number" min="0" max="250" required> <input name="A1" type="number" min="0" max="250" required><br>
-		Countdown-Over Preset: <input name="MC" type="number" min="0" max="250" required><br>
-		Timed-Light-Over Presets: <input name="MN" type="number" min="0" max="250" required><br>
+		Alexa On/Off Preset: <input name="A0" class="m" type="number" min="0" max="250" required> <input name="A1" class="m" type="number" min="0" max="250" required><br>
+		Countdown-Over Preset: <input name="MC" class="m" type="number" min="0" max="250" required><br>
+		Timed-Light-Over Presets: <input name="MN" class="m" type="number" min="0" max="250" required><br>
 		<h3>Button actions</h3>
 		<table style="margin: 0 auto;" id="macros">
 			<thead>
diff --git a/wled00/data/style.css b/wled00/data/style.css
index 9c222031..4a4877d3 100644
--- a/wled00/data/style.css
+++ b/wled00/data/style.css
@@ -61,16 +61,16 @@ input[type="number"].xl {
   width: 85px;
 }
 input[type="number"].l {
-  width: 65px;
+  width: 64px;
 }
 input[type="number"].m {
-  width: 59px;
+  width: 56px;
 }
 input[type="number"].s {
-  width: 52px;
+  width: 48px;
 }
 input[type="number"].xs {
-  width: 46px;
+  width: 40px;
 }
 select {
   margin: 2px;
diff --git a/wled00/html_settings.h b/wled00/html_settings.h
index 67ed1ba3..d558a1c8 100644
--- a/wled00/html_settings.h
+++ b/wled00/html_settings.h
@@ -6,7 +6,7 @@
  */ 
 
 // Autogenerated from wled00/data/style.css, do not edit!!
-const char PAGE_settingsCss[] PROGMEM = R"=====(<style>body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}hr{border-color:#666}.btn,button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;border-radius:24px;display:inline-block;font-size:20px;margin:12px 8px 8px;padding:8px 12px;min-width:48px;cursor:pointer;text-decoration:none}.toprow{top:0;position:sticky;background-color:#222;z-index:1}.lnk{border:0}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input:disabled{color:#888}input[type=text]{font-size:medium}input[type=number]{width:4em;font-size:medium;margin:2px}input[type=number].xxl{width:100px}input[type=number].xl{width:85px}input[type=number].l{width:65px}input[type=number].m{width:59px}input[type=number].s{width:52px}input[type=number].xs{width:46px}select{margin:2px;font-size:medium}input[type=checkbox]{transform:scale(1.5);margin-right:10px}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}td{padding:2px}.d5{width:4.5em!important}#toast{opacity:0;background-color:#444;border-radius:5px;bottom:64px;color:#fff;font-size:17px;padding:16px;pointer-events:none;position:fixed;text-align:center;z-index:5;transform:translateX(-50%%);max-width:90%%;left:50%%}#toast.show{opacity:1;background-color:#264;animation:fadein .5s,fadein .5s 2.5s reverse}#toast.error{opacity:1;background-color:#b21;animation:fadein .5s}</style>)=====";
+const char PAGE_settingsCss[] PROGMEM = R"=====(<style>body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}hr{border-color:#666}.btn,button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;border-radius:24px;display:inline-block;font-size:20px;margin:12px 8px 8px;padding:8px 12px;min-width:48px;cursor:pointer;text-decoration:none}.toprow{top:0;position:sticky;background-color:#222;z-index:1}.lnk{border:0}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input:disabled{color:#888}input[type=text]{font-size:medium}input[type=number]{width:4em;font-size:medium;margin:2px}input[type=number].xxl{width:100px}input[type=number].xl{width:85px}input[type=number].l{width:64px}input[type=number].m{width:56px}input[type=number].s{width:48px}input[type=number].xs{width:40px}select{margin:2px;font-size:medium}input[type=checkbox]{transform:scale(1.5);margin-right:10px}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}td{padding:2px}.d5{width:4.5em!important}#toast{opacity:0;background-color:#444;border-radius:5px;bottom:64px;color:#fff;font-size:17px;padding:16px;pointer-events:none;position:fixed;text-align:center;z-index:5;transform:translateX(-50%%);max-width:90%%;left:50%%}#toast.show{opacity:1;background-color:#264;animation:fadein .5s,fadein .5s 2.5s reverse}#toast.error{opacity:1;background-color:#b21;animation:fadein .5s}</style>)=====";
 
 
 // Autogenerated from wled00/data/settings.htm, do not edit!!
@@ -77,7 +77,7 @@ onclick="B()">Back</button><button type="submit">Save & Connect</button></form>
 // Autogenerated from wled00/data/settings_leds.htm, do not edit!!
 const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta 
 name="viewport" content="width=500"><title>LED Settings</title><script>
-var timeout,d=document,laprev=55,maxB=1,maxM=4e3,maxPB=4096,maxL=1333,maxLbquot=0,customStarts=!1,startsDirty=[];function H(){window.open("https://kno.wled.ge/features/settings/#led-settings")}function B(){window.open("/settings","_self")}function gId(e){return d.getElementById(e)}function off(e){d.getElementsByName(e)[0].value=-1}function showToast(e,n=!1){var t=gId("toast");t.innerHTML=e,t.className=n?"error":"show",clearTimeout(timeout),t.style.animation="none",timeout=setTimeout((function(){t.className=t.className.replace("show","")}),2900)}function bLimits(e,n,t,a){maxB=e,maxM=t,maxPB=n,maxL=a}function pinsOK(){var e=d.getElementsByTagName("input");for(i=0;i<e.length;i++){var n=e[i].name.substring(0,2);if("L0"==n||"L1"==n||"L2"==n||"L3"==n){var t=e[i].name.substring(2);if(parseInt(d.getElementsByName("LT"+t)[0].value,10)>=80)continue}if(("L0"==n||"L1"==n||"L2"==n||"L3"==n||"L4"==n||"RL"==n||"BT"==n||"IR"==n)&&""!=e[i].value&&"-1"!=e[i].value){if(d.um_p&&d.um_p.some(n=>n==parseInt(e[i].value,10)))return alert(`Sorry, pins ${JSON.stringify(d.um_p)} can't be used.`),e[i].value="",e[i].focus(),!1;if(e[i].value>5&&e[i].value<12)return alert("Sorry, pins 6-11 can not be used."),e[i].value="",e[i].focus(),!1;if("IR"!=n&&"BT"!=n&&e[i].value>33)return alert("Sorry, pins >33 are input only."),e[i].value="",e[i].focus(),!1;for(j=i+1;j<e.length;j++){var a=e[j].name.substring(0,2);if("L0"==a||"L1"==a||"L2"==a||"L3"==a||"L4"==a||"RL"==a||"BT"==a||"IR"==a){if("L"===a.substring(0,1)){var s=e[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+s)[0].value,10)<16)continue}if(""!=e[j].value&&e[i].value==e[j].value)return alert(`Pin conflict between ${e[i].name}/${e[j].name}!`),e[j].value="",e[j].focus(),!1}}}}return!0}function trySubmit(e){if(d.Sf.data.value="",e.preventDefault(),!pinsOK())return e.stopPropagation(),!1;if(bquot>100){var n="Too many LEDs for me to handle!";maxM<1e4&&(n+="\n\rConsider using an ESP32."),alert(n)}d.Sf.checkValidity()&&d.Sf.submit()}function S(){GetV(),checkSi(),setABL()}function enABL(){var e=gId("able").checked;d.Sf.LA.value=e?laprev:0,gId("abl").style.display=e?"inline":"none",gId("psu2").style.display=e?"inline":"none",d.Sf.LA.value>0&&setABL()}function enLA(){var e=d.Sf.LAsel.value;d.Sf.LA.value=e,gId("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(gId("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:gId("able").checked=!1,enABL();break;case 30:d.Sf.LAsel.value=30;break;case 35:d.Sf.LAsel.value=35;break;case 55:d.Sf.LAsel.value=55;break;case 255:d.Sf.LAsel.value=255;break;default:gId("LAdis").style.display="inline"}gId("m1").innerHTML=maxM,d.getElementsByName("Sf")[0].addEventListener("submit",trySubmit),UI()}function getMem(e,n,t){return e<32?maxM<1e4&&3==t?e>29?20*n:15*n:maxM>=1e4?e>29?8*n:6*n:e>29?4*n:3*n:e>31&&e<48?5:44==e||45==e?4*n:3*n}function UI(e=!1){var n=!1,t=0;gId("ampwarning").style.display=d.Sf.MA.value>7200?"inline":"none",255==d.Sf.LA.value?laprev=12:d.Sf.LA.value>0&&(laprev=d.Sf.LA.value);var a=d.getElementsByTagName("select");for(i=0;i<a.length;i++)if("LT"==a[i].name.substring(0,2)){var s=a[i].name.substring(2),l=parseInt(a[i].value,10);gId("p0d"+s).innerHTML=l>=80&&l<96?"IP address:":l>49?"Data GPIO:":l>41?"GPIOs:":"GPIO:",gId("p1d"+s).innerHTML=l>49&&l<64?"Clk GPIO:":"";var o=d.getElementsByName("L1"+s)[0];for(t+=getMem(l,d.getElementsByName("LC"+s)[0].value,d.getElementsByName("L0"+s)[0].value),f=1;f<5;f++){(o=d.getElementsByName("L"+f+s)[0])&&(l>=80&&l<96&&f<4||l>49&&1==f||l>41&&l<50&&f+40<l?(o.style.display="inline",o.required=!0):(o.style.display="none",o.required=!1,o.value=""))}e&&(gId("rf"+s).checked=gId("rf"+s).checked||31==l,l>31&&l<48&&(d.getElementsByName("LC"+s)[0].value=1)),gId("rf"+s).onclick=31==l?function(){return!1}:function(){},n|=30==l||31==l||l>40&&l<46&&43!=l,gId("co"+s).style.display=l>=80&&l<96||41==l||42==l?"none":"inline",gId("dig"+s+"c").style.display=l>40&&l<48?"none":"inline",gId("dig"+s+"r").style.display=l>=80&&l<96?"none":"inline",gId("dig"+s+"s").style.display=l>=80&&l<96||l>40&&l<48?"none":"inline",gId("dig"+s+"f").style.display=l>=16&&l<32||l>=50&&l<64?"inline":"none",gId("rev"+s).innerHTML=l>40&&l<48?"Inverted output":"Reversed (rotated 180°)",gId("psd"+s).innerHTML=l>40&&l<48?"Index:":"Start:"}var r=d.querySelectorAll(".wc"),u=r.length;for(i=0;i<u;i++)r[i].style.display=n?"inline":"none";var p=d.getElementsByTagName("input"),m=0,v=0,c=0;for(i=0;i<p.length;i++){var g=p[i].name.substring(0,2);s=p[i].name.substring(2);if("LC"!=g){if("L0"==g||"L1"==g)d.getElementsByName("LC"+s)[0].max=maxPB;if("L0"==g||"L1"==g||"L2"==g||"L3"==g){if((l=parseInt(d.getElementsByName("LT"+s)[0].value))>=80){p[i].max=255,p[i].min=0,p[i].style.color="#fff";continue}p[i].max=33,p[i].min=-1}if(("L0"==g||"L1"==g||"L2"==g||"L3"==g||"L4"==g||"RL"==g||"BT"==g||"IR"==g)&&""!=p[i].value&&"-1"!=p[i].value){var f=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)f.push(d.um_p[k]);for(j=0;j<p.length;j++)if(i!=j){var L=p[j].name.substring(0,2);if("L0"==L||"L1"==L||"L2"==L||"L3"==L||"L4"==L||"RL"==L||"BT"==L||"IR"==L){if("L"===L.substring(0,1)){var y=p[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+y)[0].value,10)>=80)continue}""!=p[j].value&&"-1"!=p[j].value&&f.push(parseInt(p[j].value,10))}}f.some(e=>e==parseInt(p[i].value,10))?p[i].style.color="red":p[i].style.color=parseInt(p[i].value,10)>33?"orange":"#fff"}}else{var I=parseInt(p[i].value,10);customStarts&&startsDirty[s]||(gId("ls"+s).value=m),gId("ls"+s).disabled=!customStarts,I&&((a=parseInt(gId("ls"+s).value))+I>m&&(m=a+I),I>c&&(c=I),(l=parseInt(d.getElementsByName("LT"+s)[0].value))<80&&(v+=I))}}gId("lc").textContent=m,gId("pc").textContent=m==v?"":"("+v+" physical)",gId("m0").innerHTML=t,bquot=t/maxM*100,gId("dbar").style.background=`linear-gradient(90deg, ${bquot>60?bquot>90?"red":"orange":"#ccc"} 0 ${bquot}%%, #444 ${bquot}%% 100%%)`,gId("ledwarning").style.display=m>maxPB||c>800||bquot>80?"inline":"none",gId("ledwarning").style.color=m>maxPB||c>maxPB||bquot>100?"red":"orange",gId("wreason").innerHTML=bquot>80?"80% of max. LED memory"+(bquot>100?` (<b>ERROR: Using over ${maxM}B!</b>)`:""):"800 LEDs per output";var b=Math.ceil((100+v*laprev)/500)/2;b=b>5?Math.ceil(b):b;a="";var B=30==d.Sf.LAsel.value,S=255==d.Sf.LAsel.value;b<1.02&&!B&&!S?a="ESP 5V pin with 1A USB supply":(a+=B?"12V ":S?"WS2815 12V ":"5V ",a+=b,a+="A supply connected to LEDs");var h=Math.ceil((100+v*laprev)/1500)/2,x="(for most effects, ~";x+=h=h>5?Math.ceil(h):h,x+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=S?"":x,gId("json").style.display=8==d.Sf.IT.value?"":"none"}function lastEnd(e){if(e<1)return 0;v=parseInt(d.getElementsByName("LS"+(e-1))[0].value)+parseInt(d.getElementsByName("LC"+(e-1))[0].value);var n=parseInt(d.getElementsByName("LT"+(e-1))[0].value);return n>31&&n<48&&(v=1),isNaN(v)?0:v}function addLEDs(e,n=!0){var t=d.getElementsByClassName("iST"),a=t.length;if(!(1==e&&a>=maxB||-1==e&&0==a)){var i=gId("mLC");if(1==e){var s=`<div class="iST">\n<hr style="width:260px">\n${a+1}:\n<select name="LT${a}" onchange="UI(true)">\n<option value="22" selected>WS281x</option>\n<option value="30">SK6812 RGBW</option>\n<option value="31">TM1814</option>\n<option value="24">400kHz</option>\n<option value="50">WS2801</option>\n<option value="51">APA102</option>\n<option value="52">LPD8806</option>\n<option value="53">P9813</option>\n<option value="41">PWM White</option>\n<option value="42">PWM WWCW</option>\n<option value="43">PWM RGB</option>\n<option value="44">PWM RGBW</option>\n<option value="45">PWM RGBWC</option>\n<option value="80">DDP RGB (network)</option>\n\x3c!--option value="81">E1.31 RGB (network)</option--\x3e\n\x3c!--option value="82">ArtNet RGB (network)</option--\x3e\n</select>&nbsp;\n<div id="co${a}" style="display:inline">Color Order:\n<select name="CO${a}">\n<option value="0">GRB</option>\n<option value="1">RGB</option>\n<option value="2">BRG</option>\n<option value="3">RBG</option>\n<option value="4">BGR</option>\n<option value="5">GBR</option>\n</select></div>\n<br>\n<span id="psd${a}">Start:</span> <input type="number" name="LS${a}" id="ls${a}" class="l starts" min="0" max="8191" value="${lastEnd(a)}" oninput="startsDirty[${a}]=true;UI();" required />&nbsp;\n<div id="dig${a}c" style="display:inline">Length: <input type="number" name="LC${a}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>\n<br>\n<span id="p0d${a}">GPIO:</span> <input type="number" name="L0${a}" min="0" max="33" required class="xs" onchange="UI()"/>\n<span id="p1d${a}"></span><input type="number" name="L1${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p2d${a}"></span><input type="number" name="L2${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p3d${a}"></span><input type="number" name="L3${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p4d${a}"></span><input type="number" name="L4${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<div id="dig${a}r" style="display:inline"><br><span id="rev${a}">Reversed</span>: <input type="checkbox" name="CV${a}"></div>\n<div id="dig${a}s" style="display:inline"><br>Skip 1<sup>st</sup> LED: <input id="sl${a}" type="checkbox" name="SL${a}"></div>\n<div id="dig${a}f" style="display:inline"><br>Off Refresh: <input id="rf${a}" type="checkbox" name="RF${a}">&nbsp;</div>\n</div>`;i.insertAdjacentHTML("beforeend",s)}-1==e&&(t[--a].remove(),--a),gId("+").style.display=a<maxB-1?"inline":"none",gId("-").style.display=a>0?"inline":"none",n||UI()}}function addBtn(e,n,t){var a=gId("btns").innerHTML,i="BT"+e;a+=`Button ${e} GPIO: <input type="number" min="-1" max="40" name="${i}" onchange="UI()" class="xs" value="${n}">`,a+=`&nbsp;<select name="${"BE"+e}">`,a+=`<option value="0" ${0==t?"selected":""}>Disabled</option>`,a+=`<option value="2" ${2==t?"selected":""}>Pushbutton</option>`,a+=`<option value="3" ${3==t?"selected":""}>Push inverted</option>`,a+=`<option value="4" ${4==t?"selected":""}>Switch</option>`,a+=`<option value="5" ${5==t?"selected":""}>PIR sensor</option>`,a+=`<option value="6" ${6==t?"selected":""}>Touch</option>`,a+=`<option value="7" ${7==t?"selected":""}>Analog</option>`,a+=`<option value="8" ${8==t?"selected":""}>Analog inverted</option>`,a+="</select>",a+=`<span style="cursor: pointer;" onclick="off('${i}')">&nbsp;&#215;</span><br>`,gId("btns").innerHTML=a}function tglSi(e){(customStarts=e)||(startsDirty=[]),UI()}function checkSi(){for(var e=!1,n=1;n<d.getElementsByClassName("iST").length;n++){parseInt(gId("ls"+(n-1)).value)+parseInt(d.getElementsByName("LC"+(n-1))[0].value)!=parseInt(gId("ls"+n).value)&&(e=!0,startsDirty[n]=!0)}0!=parseInt(gId("ls0").value)&&(e=!0,startsDirty[0]=!0),gId("si").checked=e,tglSi(e)}function uploadFile(e){var n=new XMLHttpRequest;n.addEventListener("load",(function(){showToast(this.responseText,this.status>=400)})),n.addEventListener("error",(function(e){showToast(e.stack,!0)})),n.open("POST","/upload");var t=new FormData;return t.append("data",d.Sf.data.files[0],e),n.send(t),d.Sf.data.value="",!1}function GetV() {var d=document;
+var timeout,d=document,laprev=55,maxB=1,maxM=4e3,maxPB=4096,maxL=1333,maxLbquot=0,customStarts=!1,startsDirty=[];function H(){window.open("https://kno.wled.ge/features/settings/#led-settings")}function B(){window.open("/settings","_self")}function gId(e){return d.getElementById(e)}function off(e){d.getElementsByName(e)[0].value=-1}function showToast(e,n=!1){var t=gId("toast");t.innerHTML=e,t.className=n?"error":"show",clearTimeout(timeout),t.style.animation="none",timeout=setTimeout((function(){t.className=t.className.replace("show","")}),2900)}function bLimits(e,n,t,a){maxB=e,maxM=t,maxPB=n,maxL=a}function pinsOK(){var e=d.getElementsByTagName("input");for(i=0;i<e.length;i++){var n=e[i].name.substring(0,2);if("L0"==n||"L1"==n||"L2"==n||"L3"==n){var t=e[i].name.substring(2);if(parseInt(d.getElementsByName("LT"+t)[0].value,10)>=80)continue}if(("L0"==n||"L1"==n||"L2"==n||"L3"==n||"L4"==n||"RL"==n||"BT"==n||"IR"==n)&&""!=e[i].value&&"-1"!=e[i].value){if(d.um_p&&d.um_p.some(n=>n==parseInt(e[i].value,10)))return alert(`Sorry, pins ${JSON.stringify(d.um_p)} can't be used.`),e[i].value="",e[i].focus(),!1;if(e[i].value>5&&e[i].value<12)return alert("Sorry, pins 6-11 can not be used."),e[i].value="",e[i].focus(),!1;if("IR"!=n&&"BT"!=n&&e[i].value>33)return alert("Sorry, pins >33 are input only."),e[i].value="",e[i].focus(),!1;for(j=i+1;j<e.length;j++){var a=e[j].name.substring(0,2);if("L0"==a||"L1"==a||"L2"==a||"L3"==a||"L4"==a||"RL"==a||"BT"==a||"IR"==a){if("L"===a.substring(0,1)){var s=e[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+s)[0].value,10)<16)continue}if(""!=e[j].value&&e[i].value==e[j].value)return alert(`Pin conflict between ${e[i].name}/${e[j].name}!`),e[j].value="",e[j].focus(),!1}}}}return!0}function trySubmit(e){if(d.Sf.data.value="",e.preventDefault(),!pinsOK())return e.stopPropagation(),!1;if(bquot>100){var n="Too many LEDs for me to handle!";maxM<1e4&&(n+="\n\rConsider using an ESP32."),alert(n)}d.Sf.checkValidity()&&d.Sf.submit()}function S(){GetV(),checkSi(),setABL()}function enABL(){var e=gId("able").checked;d.Sf.LA.value=e?laprev:0,gId("abl").style.display=e?"inline":"none",gId("psu2").style.display=e?"inline":"none",d.Sf.LA.value>0&&setABL()}function enLA(){var e=d.Sf.LAsel.value;d.Sf.LA.value=e,gId("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(gId("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:gId("able").checked=!1,enABL();break;case 30:d.Sf.LAsel.value=30;break;case 35:d.Sf.LAsel.value=35;break;case 55:d.Sf.LAsel.value=55;break;case 255:d.Sf.LAsel.value=255;break;default:gId("LAdis").style.display="inline"}gId("m1").innerHTML=maxM,d.getElementsByName("Sf")[0].addEventListener("submit",trySubmit),UI()}function getMem(e,n,t){return e<32?maxM<1e4&&3==t?e>29?20*n:15*n:maxM>=1e4?e>29?8*n:6*n:e>29?4*n:3*n:e>31&&e<48?5:44==e||45==e?4*n:3*n}function UI(e=!1){var n=!1,t=0;gId("ampwarning").style.display=d.Sf.MA.value>7200?"inline":"none",255==d.Sf.LA.value?laprev=12:d.Sf.LA.value>0&&(laprev=d.Sf.LA.value);var a=d.getElementsByTagName("select");for(i=0;i<a.length;i++)if("LT"==a[i].name.substring(0,2)){var s=a[i].name.substring(2),l=parseInt(a[i].value,10);gId("p0d"+s).innerHTML=l>=80&&l<96?"IP address:":l>49?"Data GPIO:":l>41?"GPIOs:":"GPIO:",gId("p1d"+s).innerHTML=l>49&&l<64?"Clk GPIO:":"";var o=d.getElementsByName("L1"+s)[0];for(t+=getMem(l,d.getElementsByName("LC"+s)[0].value,d.getElementsByName("L0"+s)[0].value),f=1;f<5;f++){(o=d.getElementsByName("L"+f+s)[0])&&(l>=80&&l<96&&f<4||l>49&&1==f||l>41&&l<50&&f+40<l?(o.style.display="inline",o.required=!0):(o.style.display="none",o.required=!1,o.value=""))}e&&(gId("rf"+s).checked=gId("rf"+s).checked||31==l,l>31&&l<48&&(d.getElementsByName("LC"+s)[0].value=1)),gId("rf"+s).onclick=31==l?function(){return!1}:function(){},n|=30==l||31==l||l>40&&l<46&&43!=l,gId("co"+s).style.display=l>=80&&l<96||41==l||42==l?"none":"inline",gId("dig"+s+"c").style.display=l>40&&l<48?"none":"inline",gId("dig"+s+"r").style.display=l>=80&&l<96?"none":"inline",gId("dig"+s+"s").style.display=l>=80&&l<96||l>40&&l<48?"none":"inline",gId("dig"+s+"f").style.display=l>=16&&l<32||l>=50&&l<64?"inline":"none",gId("rev"+s).innerHTML=l>40&&l<48?"Inverted output":"Reversed (rotated 180°)",gId("psd"+s).innerHTML=l>40&&l<48?"Index:":"Start:"}var r=d.querySelectorAll(".wc"),u=r.length;for(i=0;i<u;i++)r[i].style.display=n?"inline":"none";var p=d.getElementsByTagName("input"),m=0,v=0,c=0;for(i=0;i<p.length;i++){var g=p[i].name.substring(0,2);s=p[i].name.substring(2);if("LC"!=g){if("L0"==g||"L1"==g)d.getElementsByName("LC"+s)[0].max=maxPB;if("L0"==g||"L1"==g||"L2"==g||"L3"==g){if((l=parseInt(d.getElementsByName("LT"+s)[0].value))>=80){p[i].max=255,p[i].min=0,p[i].style.color="#fff";continue}p[i].max=33,p[i].min=-1}if(("L0"==g||"L1"==g||"L2"==g||"L3"==g||"L4"==g||"RL"==g||"BT"==g||"IR"==g)&&""!=p[i].value&&"-1"!=p[i].value){var f=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)f.push(d.um_p[k]);for(j=0;j<p.length;j++)if(i!=j){var L=p[j].name.substring(0,2);if("L0"==L||"L1"==L||"L2"==L||"L3"==L||"L4"==L||"RL"==L||"BT"==L||"IR"==L){if("L"===L.substring(0,1)){var y=p[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+y)[0].value,10)>=80)continue}""!=p[j].value&&"-1"!=p[j].value&&f.push(parseInt(p[j].value,10))}}f.some(e=>e==parseInt(p[i].value,10))?p[i].style.color="red":p[i].style.color=parseInt(p[i].value,10)>33?"orange":"#fff"}}else{var I=parseInt(p[i].value,10);customStarts&&startsDirty[s]||(gId("ls"+s).value=m),gId("ls"+s).disabled=!customStarts,I&&((a=parseInt(gId("ls"+s).value))+I>m&&(m=a+I),I>c&&(c=I),(l=parseInt(d.getElementsByName("LT"+s)[0].value))<80&&(v+=I))}}gId("lc").textContent=m,gId("pc").textContent=m==v?"":"("+v+" physical)",gId("m0").innerHTML=t,bquot=t/maxM*100,gId("dbar").style.background=`linear-gradient(90deg, ${bquot>60?bquot>90?"red":"orange":"#ccc"} 0 ${bquot}%%, #444 ${bquot}%% 100%%)`,gId("ledwarning").style.display=m>maxPB||c>800||bquot>80?"inline":"none",gId("ledwarning").style.color=m>maxPB||c>maxPB||bquot>100?"red":"orange",gId("wreason").innerHTML=bquot>80?"80% of max. LED memory"+(bquot>100?` (<b>ERROR: Using over ${maxM}B!</b>)`:""):"800 LEDs per output";var b=Math.ceil((100+v*laprev)/500)/2;b=b>5?Math.ceil(b):b;a="";var B=30==d.Sf.LAsel.value,S=255==d.Sf.LAsel.value;b<1.02&&!B&&!S?a="ESP 5V pin with 1A USB supply":(a+=B?"12V ":S?"WS2815 12V ":"5V ",a+=b,a+="A supply connected to LEDs");var h=Math.ceil((100+v*laprev)/1500)/2,$="(for most effects, ~";$+=h=h>5?Math.ceil(h):h,$+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=S?"":$,gId("json").style.display=8==d.Sf.IT.value?"":"none"}function lastEnd(e){if(e<1)return 0;v=parseInt(d.getElementsByName("LS"+(e-1))[0].value)+parseInt(d.getElementsByName("LC"+(e-1))[0].value);var n=parseInt(d.getElementsByName("LT"+(e-1))[0].value);return n>31&&n<48&&(v=1),isNaN(v)?0:v}function addLEDs(e,n=!0){var t=d.getElementsByClassName("iST"),a=t.length;if(!(1==e&&a>=maxB||-1==e&&0==a)){var i=gId("mLC");if(1==e){var s=`<div class="iST">\n<hr style="width:260px">\n${a+1}:\n<select name="LT${a}" onchange="UI(true)">\n<option value="22" selected>WS281x</option>\n<option value="30">SK6812 RGBW</option>\n<option value="31">TM1814</option>\n<option value="24">400kHz</option>\n<option value="50">WS2801</option>\n<option value="51">APA102</option>\n<option value="52">LPD8806</option>\n<option value="53">P9813</option>\n<option value="41">PWM White</option>\n<option value="42">PWM WWCW</option>\n<option value="43">PWM RGB</option>\n<option value="44">PWM RGBW</option>\n<option value="45">PWM RGBWC</option>\n<option value="80">DDP RGB (network)</option>\n\x3c!--option value="81">E1.31 RGB (network)</option--\x3e\n\x3c!--option value="82">ArtNet RGB (network)</option--\x3e\n</select>&nbsp;\n<div id="co${a}" style="display:inline">Color Order:\n<select name="CO${a}">\n<option value="0">GRB</option>\n<option value="1">RGB</option>\n<option value="2">BRG</option>\n<option value="3">RBG</option>\n<option value="4">BGR</option>\n<option value="5">GBR</option>\n</select></div>\n<br>\n<span id="psd${a}">Start:</span> <input type="number" name="LS${a}" id="ls${a}" class="l starts" min="0" max="8191" value="${lastEnd(a)}" oninput="startsDirty[${a}]=true;UI();" required />&nbsp;\n<div id="dig${a}c" style="display:inline">Length: <input type="number" name="LC${a}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>\n<br>\n<span id="p0d${a}">GPIO:</span> <input type="number" name="L0${a}" min="0" max="33" required class="s" onchange="UI()"/>\n<span id="p1d${a}"></span><input type="number" name="L1${a}" min="0" max="33" class="s" onchange="UI()"/>\n<span id="p2d${a}"></span><input type="number" name="L2${a}" min="0" max="33" class="s" onchange="UI()"/>\n<span id="p3d${a}"></span><input type="number" name="L3${a}" min="0" max="33" class="s" onchange="UI()"/>\n<span id="p4d${a}"></span><input type="number" name="L4${a}" min="0" max="33" class="s" onchange="UI()"/>\n<div id="dig${a}r" style="display:inline"><br><span id="rev${a}">Reversed</span>: <input type="checkbox" name="CV${a}"></div>\n<div id="dig${a}s" style="display:inline"><br>Skip 1<sup>st</sup> LED: <input id="sl${a}" type="checkbox" name="SL${a}"></div>\n<div id="dig${a}f" style="display:inline"><br>Off Refresh: <input id="rf${a}" type="checkbox" name="RF${a}">&nbsp;</div>\n</div>`;i.insertAdjacentHTML("beforeend",s)}-1==e&&(t[--a].remove(),--a),gId("+").style.display=a<maxB-1?"inline":"none",gId("-").style.display=a>0?"inline":"none",n||UI()}}function addBtn(e,n,t){var a=gId("btns").innerHTML,i="BT"+e;a+=`Button ${e} GPIO: <input type="number" min="-1" max="40" name="${i}" onchange="UI()" class="xs" value="${n}">`,a+=`&nbsp;<select name="${"BE"+e}">`,a+=`<option value="0" ${0==t?"selected":""}>Disabled</option>`,a+=`<option value="2" ${2==t?"selected":""}>Pushbutton</option>`,a+=`<option value="3" ${3==t?"selected":""}>Push inverted</option>`,a+=`<option value="4" ${4==t?"selected":""}>Switch</option>`,a+=`<option value="5" ${5==t?"selected":""}>PIR sensor</option>`,a+=`<option value="6" ${6==t?"selected":""}>Touch</option>`,a+=`<option value="7" ${7==t?"selected":""}>Analog</option>`,a+=`<option value="8" ${8==t?"selected":""}>Analog inverted</option>`,a+="</select>",a+=`<span style="cursor: pointer;" onclick="off('${i}')">&nbsp;&#215;</span><br>`,gId("btns").innerHTML=a}function tglSi(e){(customStarts=e)||(startsDirty=[]),UI()}function checkSi(){for(var e=!1,n=1;n<d.getElementsByClassName("iST").length;n++){parseInt(gId("ls"+(n-1)).value)+parseInt(d.getElementsByName("LC"+(n-1))[0].value)!=parseInt(gId("ls"+n).value)&&(e=!0,startsDirty[n]=!0)}0!=parseInt(gId("ls0").value)&&(e=!0,startsDirty[0]=!0),gId("si").checked=e,tglSi(e)}function uploadFile(e){var n=new XMLHttpRequest;n.addEventListener("load",(function(){showToast(this.responseText,this.status>=400)})),n.addEventListener("error",(function(e){showToast(e.stack,!0)})),n.open("POST","/upload");var t=new FormData;return t.append("data",d.Sf.data.files[0],e),n.send(t),d.Sf.data.value="",!1}function GetV() {var d=document;
 %CSS%%SCSS%</head><body onload="S()"><form
  id="form_s" name="Sf" method="post"><div class="toprow"><div class="helpB">
 <button type="button" onclick="H()">?</button></div><button type="button" 
@@ -335,7 +335,7 @@ type="submit">Save</button></form></body></html>)=====";
 // Autogenerated from wled00/data/settings_time.htm, do not edit!!
 const char PAGE_settings_time[] PROGMEM = R"=====(<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=500">
 <meta charset="utf-8"><title>Time Settings</title><script>
-var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#time-settings")}function B(){window.open("/settings","_self")}function S(){BTa(),GetV(),Cs(),FC()}function gId(t){return d.getElementById(t)}function Cs(){gId("cac").style.display="none",gId("coc").style.display="block",gId("ccc").style.display="none",gId("ca").selected&&(gId("cac").style.display="block"),gId("cc").selected&&(gId("coc").style.display="none",gId("ccc").style.display="block"),gId("cn").selected&&(gId("coc").style.display="none")}function BTa(){var t="<tr><th>Active</th><th>Hour</th><th>Minute</th><th>Preset</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>";for(i=0;i<8;i++){for(t+='<tr><td><input name="W'+i+'" id="W'+i+'" type="number" style="display:none"><input id="W'+i+'0" type="checkbox"></td><td><input name="H'+i+'" class="sml" type="number" min="0" max="24"></td><td><input name="N'+i+'" class="sml" type="number" min="0" max="59"></td><td><input name="T'+i+'" class="med" type="number" min="0" max="250"></td>',j=1;j<8;j++)t+='<td><input id="W'+i+j+'" type="checkbox"></td>';t+="</tr>"}for(t+='<tr><td><input name="W8" id="W8" type="number" style="display:none"><input id="W80" type="checkbox"></td><td>Sunrise<input name="H8" class="sml" value="255" type="hidden"></td><td><input name="N8" class="sml" type="number" min="-59" max="59"></td><td><input name="T8" class="med" type="number" min="0" max="250"></td>',j=1;j<8;j++)t+='<td><input id="W8'+j+'" type="checkbox"></td>';for(t+='</tr><tr><td><input name="W9" id="W9" type="number" style="display:none"><input id="W90" type="checkbox"></td><td>Sunset<input name="H9" class="sml" value="255" type="hidden"></td><td><input name="N9" class="sml" type="number" min="-59" max="59"></td><td><input name="T9" class="med" type="number" min="0" max="250"></td>',j=1;j<8;j++)t+='<td><input id="W9'+j+'" type="checkbox"></td>';t+="</tr>",gId("TMT").innerHTML=t}function FC(){for(j=0;j<8;j++)for(i=0;i<10;i++)gId("W"+i+j).checked=gId("W"+i).value>>j&1}function Wd(){for(a=[0,0,0,0,0,0,0,0,0,0],i=0;i<10;i++){for(m=1,j=0;j<8;j++)a[i]+=gId("W"+i+j).checked*m,m*=2;gId("W"+i).value=a[i]}}function addRow(t,e,n,i){var d=gId("macros"),s=d.rows.length,c=d.insertRow(s);document.createElement("td");c.insertCell(0).innerHTML=`Button ${t}:`,c.insertCell(1).innerHTML=`<input name="MP${t}" type="number" class="m" min="0" max="250" value="${e}" required>`,c.insertCell(2).innerHTML=`<input name="ML${t}" type="number" class="m" min="0" max="250" value="${n}" required>`,c.insertCell(3).innerHTML=`<input name="MD${t}" type="number" class="m" min="0" max="250" value="${i}" required>`}function GetV() {
+var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#time-settings")}function B(){window.open("/settings","_self")}function S(){BTa(),GetV(),Cs(),FC()}function gId(t){return d.getElementById(t)}function Cs(){gId("cac").style.display="none",gId("coc").style.display="block",gId("ccc").style.display="none",gId("ca").selected&&(gId("cac").style.display="block"),gId("cc").selected&&(gId("coc").style.display="none",gId("ccc").style.display="block"),gId("cn").selected&&(gId("coc").style.display="none")}function BTa(){var t="<tr><th>En.</th><th>Hour</th><th>Minute</th><th>Preset</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>";for(i=0;i<8;i++){for(t+='<tr><td><input name="W'+i+'" id="W'+i+'" type="hidden"><input id="W'+i+'0" type="checkbox"></td><td><input name="H'+i+'" class="xs" type="number" min="0" max="24"></td><td><input name="N'+i+'" class="xs" type="number" min="0" max="59"></td><td><input name="T'+i+'" class="s" type="number" min="0" max="250"></td>',j=1;j<8;j++)t+='<td><input id="W'+i+j+'" type="checkbox"></td>';t+="</tr>"}for(t+='<tr><td><input name="W8" id="W8" type="hidden"><input id="W80" type="checkbox"></td><td>Sunrise<input name="H8" value="255" type="hidden"></td><td><input name="N8" class="xs" type="number" min="-59" max="59"></td><td><input name="T8" class="s" type="number" min="0" max="250"></td>',j=1;j<8;j++)t+='<td><input id="W8'+j+'" type="checkbox"></td>';for(t+='</tr><tr><td><input name="W9" id="W9" type="hidden"><input id="W90" type="checkbox"></td><td>Sunset<input name="H9" value="255" type="hidden"></td><td><input name="N9" class="xs" type="number" min="-59" max="59"></td><td><input name="T9" class="s" type="number" min="0" max="250"></td>',j=1;j<8;j++)t+='<td><input id="W9'+j+'" type="checkbox"></td>';t+="</tr>",gId("TMT").innerHTML=t}function FC(){for(j=0;j<8;j++)for(i=0;i<10;i++)gId("W"+i+j).checked=gId("W"+i).value>>j&1}function Wd(){for(a=[0,0,0,0,0,0,0,0,0,0],i=0;i<10;i++){for(m=1,j=0;j<8;j++)a[i]+=gId("W"+i+j).checked*m,m*=2;gId("W"+i).value=a[i]}}function addRow(t,e,n,i){var d=gId("macros"),c=d.rows.length,a=d.insertRow(c);document.createElement("td");a.insertCell(0).innerHTML=`Button ${t}:`,a.insertCell(1).innerHTML=`<input name="MP${t}" type="number" class="m" min="0" max="250" value="${e}" required>`,a.insertCell(2).innerHTML=`<input name="ML${t}" type="number" class="m" min="0" max="250" value="${n}" required>`,a.insertCell(3).innerHTML=`<input name="MD${t}" type="number" class="m" min="0" max="250" value="${i}" required>`}function GetV() {
 %CSS%%SCSS%</head><body onload="S()">
 <form id="form_s" name="Sf" method="post" onsubmit="Wd()"><div class="toprow">
 <div class="helpB"><button type="button" onclick="H()">?</button></div><button 
@@ -370,23 +370,24 @@ max="255" required><br>Show 5min marks: <input type="checkbox" name="O5"><br>
 id="ccc">Cronixie Display: <input name="CX" maxlength="6"><br>
 Cronixie Backlight: <input type="checkbox" name="CB"><br></div>Countdown Mode: 
 <input type="checkbox" name="CE"><br>Countdown Goal:<br>Year: 20 <input 
-name="CY" class="small" type="number" min="0" max="99" required> Month: <input 
-name="CI" class="small" type="number" min="1" max="12" required> Day: <input 
-name="CD" class="small" type="number" min="1" max="31" required><br>Hour: <input
- name="CH" class="small" type="number" min="0" max="23" required> Minute: <input
- name="CM" class="small" type="number" min="0" max="59" required> Second: <input
- name="CS" class="small" type="number" min="0" max="59" required><br><h3>
+name="CY" class="xs" type="number" min="0" max="99" required> Month: <input 
+name="CI" class="xs" type="number" min="1" max="12" required> Day: <input 
+name="CD" class="xs" type="number" min="1" max="31" required><br>Hour: <input 
+name="CH" class="xs" type="number" min="0" max="23" required> Minute: <input 
+name="CM" class="xs" type="number" min="0" max="59" required> Second: <input 
+name="CS" class="xs" type="number" min="0" max="59" required><br><h3>
 Macro presets</h3><b>Macros have moved!</b><br><i>
 Presets now also can be used as macros to save both JSON and HTTP API commands.
 <br>Just enter the preset id below!</i> <i>
 Use 0 for the default action instead of a preset</i><br>Alexa On/Off Preset: 
-<input name="A0" type="number" min="0" max="250" required> <input name="A1" 
-type="number" min="0" max="250" required><br>Countdown-Over Preset: <input 
-name="MC" type="number" min="0" max="250" required><br>
-Timed-Light-Over Presets: <input name="MN" type="number" min="0" max="250" 
-required><br><h3>Button actions</h3><table style="margin:0 auto" id="macros">
-<thead><tr><td>push<br>switch</td><td>short<br>on-&gt;off</td><td>long<br>
-off-&gt;on</td><td>double<br>N/A</td></tr></thead><tbody></tbody></table><a 
+<input name="A0" class="m" type="number" min="0" max="250" required> <input 
+name="A1" class="m" type="number" min="0" max="250" required><br>
+Countdown-Over Preset: <input name="MC" class="m" type="number" min="0" 
+max="250" required><br>Timed-Light-Over Presets: <input name="MN" class="m" 
+type="number" min="0" max="250" required><br><h3>Button actions</h3><table 
+style="margin:0 auto" id="macros"><thead><tr><td>push<br>switch</td><td>short
+<br>on-&gt;off</td><td>long<br>off-&gt;on</td><td>double<br>N/A</td></tr>
+</thead><tbody></tbody></table><a 
 href="https://github.com/Aircoookie/WLED/wiki/Macros#analog-button" 
 target="_blank">Analog Button setup</a><h3>Time-controlled presets</h3><div 
 style="display:inline-block"><table id="TMT"></table></div><hr><button