CSS/JS fixes.
This commit is contained in:
Blaz Kristan
parent
b339f426f2
commit
c8eefbaa2e
@ -310,17 +310,13 @@ button {
|
||||
|
||||
#segutil, #segutil2, #segcont, #putil, #pcont, #pql {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
margin: 10px auto 0;
|
||||
}
|
||||
|
||||
#segutil .seg {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#segcont, #segutil, #putil {
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
|
||||
.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }
|
||||
|
||||
.tab-label {
|
||||
@ -663,18 +659,16 @@ input[type=range]::-moz-range-thumb {
|
||||
transform:translate3d(0,0,0);
|
||||
overflow: clip;
|
||||
text-overflow: clip;
|
||||
border: 1px solid var(--c-2);
|
||||
background-color: var(--c-2);
|
||||
}
|
||||
.btn:hover {
|
||||
border: 1px solid var(--c-4);
|
||||
border: 1px solid var(--c-5);
|
||||
background-color: var(--c-5);
|
||||
}
|
||||
.btn {
|
||||
border: 1px solid var(--c-1);
|
||||
background-color: var(--c-2);
|
||||
}
|
||||
.btn-s {
|
||||
width: 100%;
|
||||
margin: 0 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.btn-icon {
|
||||
margin: -4px 4px 0 0;
|
||||
@ -683,7 +677,7 @@ input[type=range]::-moz-range-thumb {
|
||||
}
|
||||
.btn-n {
|
||||
width: 230px;
|
||||
margin: 0 8px 10px 0;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
.btn-p {
|
||||
width: 120px;
|
||||
@ -762,7 +756,7 @@ option {
|
||||
input[type=number], input[type=text] {
|
||||
background: var(--c-3);
|
||||
color: var(--c-f);
|
||||
border: 1px solid var(--c-2);
|
||||
border: 0px solid var(--c-2);
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
margin: 6px 6px 6px 0;
|
||||
@ -827,21 +821,22 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
*/
|
||||
.segname, .pname {
|
||||
padding: 4px 0;
|
||||
/*padding: 4px 0;*/
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.segpwr {
|
||||
padding: 4px 0 4px 8px;
|
||||
padding: 4px 0 0 8px;
|
||||
}
|
||||
|
||||
.pid {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
top: 2px;
|
||||
left: 0px;
|
||||
padding: 12px 0px 0px 12px;
|
||||
font-size: 16px;
|
||||
@ -993,18 +988,22 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
.seg, .pres {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
padding: 10px 0;
|
||||
margin: 0 0 10px;
|
||||
background-color: var(--c-2);
|
||||
color: var(--c-f);
|
||||
border: 0px solid var(--c-f);
|
||||
border-radius: 20px;
|
||||
border-radius: 24px;
|
||||
text-align: left;
|
||||
transition: background-color 0.5s;
|
||||
filter: brightness(1);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.pres {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.seg:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
@ -1015,10 +1014,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.pres {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
@ -1029,15 +1024,15 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.lstI {
|
||||
display: flex;
|
||||
/*display: flex;*/
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
background-color: var(--c-2);
|
||||
overflow: hidden;
|
||||
position: sticky;
|
||||
border: 1px solid var(--c-2);
|
||||
border-radius: 25px;
|
||||
/*border: 1px solid var(--c-2);*/
|
||||
border-radius: 24px;
|
||||
margin: 10px auto 0;
|
||||
min-height: 24px;
|
||||
}
|
||||
@ -1046,22 +1041,18 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
background: var(--c-4);
|
||||
}
|
||||
|
||||
#pcont .pres:hover, #pcont .selected:hover,
|
||||
#segcont .seg:hover:not([class*="expanded"]),
|
||||
#pcont .pres:hover:not([class*="expanded"]),
|
||||
#pcont .selected:hover:not([class*="expanded"]),
|
||||
.lstI:hover {
|
||||
border: 1px solid var(--c-5);
|
||||
/*border: 1px solid var(--c-5);*/
|
||||
background: var(--c-5);
|
||||
}
|
||||
|
||||
#pcont .expand, #pcont .expand:hover {
|
||||
border: 1px solid var(--c-1);
|
||||
background-color: var(--c-2);
|
||||
}
|
||||
|
||||
.selected .checkmark,
|
||||
.selected .radiomark,
|
||||
.selected input[type=number],
|
||||
.selected input[type=text],
|
||||
.selected button.btn {
|
||||
.selected input[type=text] {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
@ -1073,22 +1064,22 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
.lstI.sticky, .lstI.selected {
|
||||
z-index: 1;
|
||||
}
|
||||
/*
|
||||
/* calculated in index.js
|
||||
#fxlist .lstI.selected {
|
||||
top: 142px;
|
||||
}
|
||||
*/
|
||||
#pallist .lstI.selected {
|
||||
top: 84px;
|
||||
top: 82px;
|
||||
}
|
||||
/* must be after .selected */
|
||||
/*
|
||||
/* calculated in index.js
|
||||
#fxlist .lstI.sticky {
|
||||
top: 99px;
|
||||
}
|
||||
*/
|
||||
#pallist .lstI.sticky {
|
||||
top: 42px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.lstIcontent {
|
||||
@ -1098,7 +1089,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
text-align: left;
|
||||
display: inline-block;*/
|
||||
position: relative;
|
||||
left: 40px;
|
||||
/*left: 40px;*/
|
||||
}
|
||||
|
||||
.lstIname {
|
||||
@ -1128,35 +1119,34 @@ input[type="text"].fnd {
|
||||
text-align: left;
|
||||
border-radius: 25px;
|
||||
background: var(--c-2);
|
||||
border: 1px solid var(--c-3);
|
||||
/*border: 1px solid var(--c-3);*/
|
||||
}
|
||||
|
||||
input[type="text"].fnd:focus {
|
||||
background-color: var(--c-4);
|
||||
}
|
||||
|
||||
.selected button.btn:hover,
|
||||
input[type="text"].fnd:not(:placeholder-shown),
|
||||
input[type="text"].fnd:hover {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
.segin {
|
||||
padding: 0 8px 8px;
|
||||
padding: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.segin .btn {
|
||||
border: 1px solid var(--c-2);
|
||||
border: 1px solid var(--c-3);
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
.segin .btn:hover {
|
||||
border: 1px solid var(--c-4);
|
||||
border: 1px solid var(--c-5);
|
||||
background-color: var(--c-5);
|
||||
}
|
||||
|
||||
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after,
|
||||
.expanded {
|
||||
.expanded, .expanded .segin {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -155,7 +155,7 @@
|
||||
<button id="csl1" class="btn xxs" onclick="selectSlot(1);">2</button>
|
||||
<button id="csl2" class="btn xxs" onclick="selectSlot(2);">3</button>
|
||||
</div>
|
||||
<p class="labels h" id="cslLabel"></p>
|
||||
<p class="labels hd h" id="cslLabel"></p>
|
||||
<div id="hexw">
|
||||
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
|
||||
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon"></i></button>
|
||||
@ -239,7 +239,7 @@
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
<div class="il">
|
||||
<p class="labels" id="modeLabel">Effect mode</p>
|
||||
<p class="labels hd" id="modeLabel">Effect mode</p>
|
||||
<div class="staytop fnd" id="fxFind">
|
||||
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist')" />
|
||||
<i class="icons clear-icon" onclick="clean(this);"></i>
|
||||
@ -269,7 +269,7 @@
|
||||
<div id="pql">
|
||||
</div>
|
||||
<div id="pcont">
|
||||
Loading...
|
||||
<span onclick="loadPresets()">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -52,7 +52,7 @@ function applyCfg()
|
||||
gId('hexw').style.display = ccfg.hex ? "block":"none";
|
||||
gId('picker').style.display = ccfg.picker ? "block":"none";
|
||||
gId('vwrap').style.display = ccfg.picker ? "block":"none";
|
||||
gId('kwrap').style.display = ccfg.picker ? "block":"none";
|
||||
//gId('kwrap').style.display = ccfg.picker ? "block":"none";
|
||||
gId('rgbwrap').style.display = ccfg.rgb ? "block":"none";
|
||||
gId('qcs-w').style.display = ccfg.quick ? "block":"none";
|
||||
var l = cfg.comp.labels;
|
||||
@ -514,7 +514,7 @@ function populateQL()
|
||||
var cn = "";
|
||||
if (pQL.length > 0) {
|
||||
pQL.sort((a,b) => (a[0]>b[0]));
|
||||
cn += `<p class="labels">Quick load</p>`;
|
||||
cn += `<p class="labels hd">Quick load</p>`;
|
||||
for (var key of (pQL||[])) {
|
||||
cn += `<button class="btn btn-xs psts" id="p${key[0]}qlb" title="${key[2]?key[2]:''}" onclick="setPreset(${key[0]});">${key[1]}</button>`;
|
||||
}
|
||||
@ -527,7 +527,7 @@ function populatePresets(fromls)
|
||||
if (fromls) pJson = JSON.parse(localStorage.getItem("wledP"));
|
||||
if (!pJson) {setTimeout(loadPresets,250); return;}
|
||||
delete pJson["0"];
|
||||
var cn = `<p class="labels">All presets</p>`;
|
||||
var cn = `<p class="labels hd">All presets</p>`;
|
||||
var arr = Object.entries(pJson);
|
||||
arr.sort(cmpP);
|
||||
pQL = [];
|
||||
@ -633,7 +633,7 @@ function populateSegments(s)
|
||||
if (i == lowestUnused) lowestUnused = i+1;
|
||||
if (i > lSeg) lSeg = i;
|
||||
|
||||
cn += `<div class="seg ${i==s.mainseg ? 'selected' : ''}" id="seg${i}wrp">
|
||||
cn += `<div class="seg ${i==s.mainseg ? 'selected' : ''} ${expanded[i] ? "expanded":""}" id="seg${i}">
|
||||
<label class="check schkl">
|
||||
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
|
||||
<span class="checkmark schk"></span>
|
||||
@ -649,7 +649,7 @@ function populateSegments(s)
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}">
|
||||
<div class="segin" id="seg${i}in">
|
||||
<input type="text" class="ptxt noslide" id="seg${i}t" autocomplete="off" maxlength=32 value="${inst.n?inst.n:""}" placeholder="Enter name..."/>
|
||||
<table class="infot segt">
|
||||
<tr>
|
||||
@ -1248,7 +1248,7 @@ function setSliderAndColorControl(idx, applyDef=false)
|
||||
|
||||
// set top position of the effect list
|
||||
gId("fxFind").style.top = topPosition + "px";
|
||||
topPosition += 42;
|
||||
topPosition += 40;
|
||||
var fxList = gId("fxlist");
|
||||
for (let f of fxList.children) f.style.top = null; // remove top
|
||||
var selected = fxList.querySelector('.selected');
|
||||
@ -1379,6 +1379,7 @@ function requestJson(command=null)
|
||||
var s = json.state ? json.state : json;
|
||||
readState(s);
|
||||
if (!(ws && ws.readyState === WebSocket.OPEN)) makeWS();
|
||||
if (!pJson) loadPresets();
|
||||
reqsLegal = true;
|
||||
})
|
||||
.catch((e)=>{
|
||||
@ -1483,7 +1484,6 @@ function makeSeg()
|
||||
function resetUtil()
|
||||
{
|
||||
gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon"></i>Add segment</button>';
|
||||
//for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i); // collapse all expanded elements
|
||||
}
|
||||
|
||||
var plJson = {"0":{
|
||||
@ -1660,7 +1660,6 @@ function makePUtil()
|
||||
block: 'start',
|
||||
});
|
||||
gId('putil').innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`;
|
||||
//for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i); // collapse all expanded elements
|
||||
}
|
||||
|
||||
function makePlEntry(p,i) {
|
||||
@ -2262,9 +2261,10 @@ function expand(i, c=false)
|
||||
gId('sege' +i).classList.toggle("exp");
|
||||
gId(util).classList.toggle(stay);
|
||||
|
||||
// presets
|
||||
if (i >= 100) {
|
||||
var p = i-100;
|
||||
gId(`p${p}o`).classList.toggle('expand');
|
||||
gId(`p${p}o`).classList.toggle('expanded');
|
||||
if (expanded[i]) {
|
||||
if (isPlaylist(p)) {
|
||||
plJson[p] = pJson[p].playlist;
|
||||
|
||||
3260
wled00/html_ui.h
3260
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
// version code in format yymmddb (b = daily build)
|
||||
#define VERSION 2203031
|
||||
#define VERSION 2203041
|
||||
|
||||
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||
//#define WLED_USE_MY_CONFIG
|
||||
|
||||
Loading…
Reference in New Issue
Block a user