jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-19 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

CSS/JS fixes.

Browse Source
This commit is contained in:
Blaz Kristan 2022-03-03 01:02:23 +01:00
parent b339f426f2
commit c8eefbaa2e
5 changed files with 1678 additions and 1688 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
wled00/data/index.css
View File

@ -310,17 +310,13 @@ button {
#segutil, #segutil2, #segcont, #putil, #pcont, #pql { #segutil, #segutil2, #segcont, #putil, #pcont, #pql {
width: 280px; width: 280px;
margin: 0 auto; margin: 10px auto 0;
} }
#segutil .seg { #segutil .seg {
margin: 10px 0; margin: 10px 0;
} }
#segcont, #segutil, #putil {
padding: 10px 0 0;
}
.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out } .smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }
.tab-label { .tab-label {
@ -663,18 +659,16 @@ input[type=range]::-moz-range-thumb {
transform:translate3d(0,0,0); transform:translate3d(0,0,0);
overflow: clip; overflow: clip;
text-overflow: clip; text-overflow: clip;
border: 1px solid var(--c-2);
background-color: var(--c-2);
} }
.btn:hover { .btn:hover {
border: 1px solid var(--c-4); border: 1px solid var(--c-5);
background-color: var(--c-5); background-color: var(--c-5);
} }
.btn {
border: 1px solid var(--c-1);
background-color: var(--c-2);
}
.btn-s { .btn-s {
width: 100%; width: 100%;
margin: 0 0 10px; margin: 0;
} }
.btn-icon { .btn-icon {
margin: -4px 4px 0 0; margin: -4px 4px 0 0;
@ -683,7 +677,7 @@ input[type=range]::-moz-range-thumb {
} }
.btn-n { .btn-n {
width: 230px; width: 230px;
margin: 0 8px 10px 0; margin: 0 8px 0 0;
} }
.btn-p { .btn-p {
width: 120px; width: 120px;
@ -762,7 +756,7 @@ option {
input[type=number], input[type=text] { input[type=number], input[type=text] {
background: var(--c-3); background: var(--c-3);
color: var(--c-f); color: var(--c-f);
border: 1px solid var(--c-2); border: 0px solid var(--c-2);
border-radius: 5px; border-radius: 5px;
padding: 8px; padding: 8px;
margin: 6px 6px 6px 0; margin: 6px 6px 6px 0;
@ -827,21 +821,22 @@ input[type=number]::-webkit-outer-spin-button {
} }
*/ */
.segname, .pname { .segname, .pname {
padding: 4px 0; /*padding: 4px 0;*/
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: clip; text-overflow: clip;
line-height: 24px;
} }
.segpwr { .segpwr {
padding: 4px 0 4px 8px; padding: 4px 0 0 8px;
} }
.pid { .pid {
position: absolute; position: absolute;
top: 0px; top: 2px;
left: 0px; left: 0px;
padding: 12px 0px 0px 12px; padding: 12px 0px 0px 12px;
font-size: 16px; font-size: 16px;
@ -993,18 +988,22 @@ input[type=number]::-webkit-outer-spin-button {
.seg, .pres { .seg, .pres {
position: relative; position: relative;
display: block; display: block;
padding: 8px 0; padding: 10px 0;
margin: 0 0 10px; margin: 0 0 10px;
background-color: var(--c-2); background-color: var(--c-2);
color: var(--c-f); color: var(--c-f);
border: 0px solid var(--c-f); border: 0px solid var(--c-f);
border-radius: 20px; border-radius: 24px;
text-align: left; text-align: left;
transition: background-color 0.5s; transition: background-color 0.5s;
filter: brightness(1); filter: brightness(1);
font-size: 19px; font-size: 19px;
} }
.pres {
min-height: 24px;
}
.seg:last-child { .seg:last-child {
margin: 0; margin: 0;
} }
@ -1015,10 +1014,6 @@ input[type=number]::-webkit-outer-spin-button {
left: 8px; left: 8px;
} }
.pres {
padding-bottom: 4px;
}
.list { .list {
position: relative; position: relative;
width: 280px; width: 280px;
@ -1029,15 +1024,15 @@ input[type=number]::-webkit-outer-spin-button {
} }
.lstI { .lstI {
display: flex; /*display: flex;*/
align-items: center; align-items: center;
padding: 8px 10px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
background-color: var(--c-2); background-color: var(--c-2);
overflow: hidden; overflow: hidden;
position: sticky; position: sticky;
border: 1px solid var(--c-2); /*border: 1px solid var(--c-2);*/
border-radius: 25px; border-radius: 24px;
margin: 10px auto 0; margin: 10px auto 0;
min-height: 24px; min-height: 24px;
} }
@ -1046,22 +1041,18 @@ input[type=number]::-webkit-outer-spin-button {
background: var(--c-4); 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 { .lstI:hover {
border: 1px solid var(--c-5); /*border: 1px solid var(--c-5);*/
background: 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 .checkmark,
.selected .radiomark, .selected .radiomark,
.selected input[type=number], .selected input[type=number],
.selected input[type=text], .selected input[type=text] {
.selected button.btn {
background-color: var(--c-3); background-color: var(--c-3);
} }
@ -1073,22 +1064,22 @@ input[type=number]::-webkit-outer-spin-button {
.lstI.sticky, .lstI.selected { .lstI.sticky, .lstI.selected {
z-index: 1; z-index: 1;
} }
/* /* calculated in index.js
#fxlist .lstI.selected { #fxlist .lstI.selected {
top: 142px; top: 142px;
} }
*/ */
#pallist .lstI.selected { #pallist .lstI.selected {
top: 84px; top: 82px;
} }
/* must be after .selected */ /* must be after .selected */
/* /* calculated in index.js
#fxlist .lstI.sticky { #fxlist .lstI.sticky {
top: 99px; top: 99px;
} }
*/ */
#pallist .lstI.sticky { #pallist .lstI.sticky {
top: 42px; top: 40px;
} }
.lstIcontent { .lstIcontent {
@ -1098,7 +1089,7 @@ input[type=number]::-webkit-outer-spin-button {
text-align: left; text-align: left;
display: inline-block;*/ display: inline-block;*/
position: relative; position: relative;
left: 40px; /*left: 40px;*/
} }
.lstIname { .lstIname {
@ -1128,35 +1119,34 @@ input[type="text"].fnd {
text-align: left; text-align: left;
border-radius: 25px; border-radius: 25px;
background: var(--c-2); background: var(--c-2);
border: 1px solid var(--c-3); /*border: 1px solid var(--c-3);*/
} }
input[type="text"].fnd:focus { input[type="text"].fnd:focus {
background-color: var(--c-4); background-color: var(--c-4);
} }
.selected button.btn:hover,
input[type="text"].fnd:not(:placeholder-shown), input[type="text"].fnd:not(:placeholder-shown),
input[type="text"].fnd:hover { input[type="text"].fnd:hover {
background-color: var(--c-3); background-color: var(--c-3);
} }
.segin { .segin {
padding: 0 8px 8px; padding: 8px;
display: none; display: none;
} }
.segin .btn { .segin .btn {
border: 1px solid var(--c-2); border: 1px solid var(--c-3);
background-color: var(--c-3); background-color: var(--c-3);
} }
.segin .btn:hover { .segin .btn:hover {
border: 1px solid var(--c-4); border: 1px solid var(--c-5);
background-color: var(--c-5); background-color: var(--c-5);
} }
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after, .check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after,
.expanded { .expanded, .expanded .segin {
display: block; display: block;
} }

6
wled00/data/index.htm
View File

@ -155,7 +155,7 @@
<button id="csl1" class="btn xxs" onclick="selectSlot(1);">2</button> <button id="csl1" class="btn xxs" onclick="selectSlot(1);">2</button>
<button id="csl2" class="btn xxs" onclick="selectSlot(2);">3</button> <button id="csl2" class="btn xxs" onclick="selectSlot(2);">3</button>
</div> </div>
<p class="labels h" id="cslLabel"></p> <p class="labels hd h" id="cslLabel"></p>
<div id="hexw"> <div id="hexw">
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" /> <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">&#xe390;</i></button> <button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
@ -239,7 +239,7 @@
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<div class="il"> <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"> <div class="staytop fnd" id="fxFind">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist')" /> <input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist')" />
<i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i> <i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
@ -269,7 +269,7 @@
<div id="pql"> <div id="pql">
</div> </div>
<div id="pcont"> <div id="pcont">
Loading... <span onclick="loadPresets()">Loading...</span>
</div> </div>
</div> </div>
</div> </div>

18
wled00/data/index.js
View File

@ -52,7 +52,7 @@ function applyCfg()
gId('hexw').style.display = ccfg.hex ? "block":"none"; gId('hexw').style.display = ccfg.hex ? "block":"none";
gId('picker').style.display = ccfg.picker ? "block":"none"; gId('picker').style.display = ccfg.picker ? "block":"none";
gId('vwrap').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('rgbwrap').style.display = ccfg.rgb ? "block":"none";
gId('qcs-w').style.display = ccfg.quick ? "block":"none"; gId('qcs-w').style.display = ccfg.quick ? "block":"none";
var l = cfg.comp.labels; var l = cfg.comp.labels;
@ -514,7 +514,7 @@ function populateQL()
var cn = ""; var cn = "";
if (pQL.length > 0) { if (pQL.length > 0) {
pQL.sort((a,b) => (a[0]>b[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||[])) { 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>`; 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 (fromls) pJson = JSON.parse(localStorage.getItem("wledP"));
if (!pJson) {setTimeout(loadPresets,250); return;} if (!pJson) {setTimeout(loadPresets,250); return;}
delete pJson["0"]; 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); var arr = Object.entries(pJson);
arr.sort(cmpP); arr.sort(cmpP);
pQL = []; pQL = [];
@ -633,7 +633,7 @@ function populateSegments(s)
if (i == lowestUnused) lowestUnused = i+1; if (i == lowestUnused) lowestUnused = i+1;
if (i > lSeg) lSeg = i; 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"> <label class="check schkl">
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}> <input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
@ -649,7 +649,7 @@ function populateSegments(s)
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </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..."/> <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"> <table class="infot segt">
<tr> <tr>
@ -1248,7 +1248,7 @@ function setSliderAndColorControl(idx, applyDef=false)
// set top position of the effect list // set top position of the effect list
gId("fxFind").style.top = topPosition + "px"; gId("fxFind").style.top = topPosition + "px";
topPosition += 42; topPosition += 40;
var fxList = gId("fxlist"); var fxList = gId("fxlist");
for (let f of fxList.children) f.style.top = null; // remove top for (let f of fxList.children) f.style.top = null; // remove top
var selected = fxList.querySelector('.selected'); var selected = fxList.querySelector('.selected');
@ -1379,6 +1379,7 @@ function requestJson(command=null)
var s = json.state ? json.state : json; var s = json.state ? json.state : json;
readState(s); readState(s);
if (!(ws && ws.readyState === WebSocket.OPEN)) makeWS(); if (!(ws && ws.readyState === WebSocket.OPEN)) makeWS();
if (!pJson) loadPresets();
reqsLegal = true; reqsLegal = true;
}) })
.catch((e)=>{ .catch((e)=>{
@ -1483,7 +1484,6 @@ function makeSeg()
function resetUtil() function resetUtil()
{ {
gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button>'; gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button>';
//for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i); // collapse all expanded elements
} }
var plJson = {"0":{ var plJson = {"0":{
@ -1660,7 +1660,6 @@ function makePUtil()
block: 'start', block: 'start',
}); });
gId('putil').innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`; 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) { function makePlEntry(p,i) {
@ -2262,9 +2261,10 @@ function expand(i, c=false)
gId('sege' +i).classList.toggle("exp"); gId('sege' +i).classList.toggle("exp");
gId(util).classList.toggle(stay); gId(util).classList.toggle(stay);
// presets
if (i >= 100) { if (i >= 100) {
var p = i-100; var p = i-100;
gId(`p${p}o`).classList.toggle('expand'); gId(`p${p}o`).classList.toggle('expanded');
if (expanded[i]) { if (expanded[i]) {
if (isPlaylist(p)) { if (isPlaylist(p)) {
plJson[p] = pJson[p].playlist; plJson[p] = pJson[p].playlist;

3260
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

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