lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor CSS simplifications

Browse Source
This commit is contained in:
cschwinne 2022-03-01 18:22:54 +01:00
parent adcdaba199
commit be90bf0188
5 changed files with 2197 additions and 2186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
wled00/data/index.css
View File

@ -585,6 +585,13 @@ input[type=range]:active + .sliderbubble {
-webkit-transform:translate3d(0,0,0);*/ -webkit-transform:translate3d(0,0,0);*/
} }
/* Small round button (color selectors, icon-only round buttons) */
.xxs {
width: 40px;
margin: 6px;
}
/* Segments/presets auxiliary buttons (Add segment, Create preset, ...) */
.btn-s { .btn-s {
width: 276px; width: 276px;
background-color: var(--c-2); background-color: var(--c-2);
@ -596,53 +603,65 @@ input[type=range]:active + .sliderbubble {
margin: 0px 8px 4px 0; margin: 0px 8px 4px 0;
vertical-align: middle; vertical-align: middle;
} }
.btna-icon {
margin: 0px; /* Wide button used in presets (Save, playlist test, delete) */
}
.btn-p { .btn-p {
width: 216px; width: 216px;
} }
.btn-xs {
width: 42px; /* Delete preset from playlist button */
height: 42px; .btn-pl-del {
margin: 2px 0 0 0; margin: 0 0 0 3px;
} }
/* Add preset to playlist "+" button */
.btn-pl-add { .btn-pl-add {
margin-left: 5px; margin: 3px 0 0 8px;
} }
/* Quick color select buttons wrapper div */
#qcs-w { #qcs-w {
margin-top: 10px; margin-top: 10px;
} }
/* Quick color select buttons */
.qcs { .qcs {
padding: 14px; padding: 14px;
margin: 2px; margin: 2px;
border-radius: 14px; border-radius: 14px;
display: inline-block; display: inline-block;
} }
/* Quick color select Black button (has white border) */
.qcsb { .qcsb {
padding: 13px; padding: 13px;
border: 1px solid var(--c-f); border: 1px solid var(--c-f);
} }
/* Hex color input wrapper div */
#hexw { #hexw {
margin-top: 5px; margin-top: 5px;
display: none; display: none;
} }
/* Transition time input */
#tt { #tt {
text-align: center; text-align: center;
} }
/* Color slot select buttons (1,2,3) */
.cl { .cl {
width: 42px; width: 42px;
} }
/* Playlist preset select */
.sel-pl { .sel-pl {
width: 192px; width: 192px;
background-position: 168px 16px; background-position: 168px 16px;
margin: 8px 3px 0 0; margin: 8px 3px 0 0;
} }
/* Playlist end preset select */
.sel-ple { .sel-ple {
width: 216px; width: 216px;
background-position: 192px 16px; background-position: 192px 16px;
@ -650,7 +669,6 @@ input[type=range]:active + .sliderbubble {
select { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none;
appearance: none; appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 12px; background-size: 12px;
@ -681,7 +699,6 @@ input[type=number], input[type=text] {
outline: none; outline: none;
width: 50px; width: 50px;
-webkit-appearance: textfield; -webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield; appearance: textfield;
} }
@ -706,18 +723,18 @@ input[type=text] {
text-align: center; text-align: center;
} }
.ptxt { input[type=text].ptxt {
width: 200px !important; width: 200px;
margin: 26px 0 6px 12px !important; margin: 26px 0 6px 12px;
} }
.stxt { input[type=text].stxt {
display: none; display: none;
margin-top: 6px !important; margin-top: 6px;
} }
.qltxt { input[type=text].qltxt {
width: 50px !important; width: 50px;
} }
input[type=number]:focus, input[type=text]:focus { input[type=number]:focus, input[type=text]:focus {
@ -801,11 +818,7 @@ input[type=number]::-webkit-outer-spin-button {
padding: 6px 0 0 0; padding: 6px 0 0 0;
} }
.xxs { /* Quick preset select buttons */
width: 40px;
margin: 6px;
}
.psts { .psts {
background-color: var(--c-3); background-color: var(--c-3);
color: var(--c-f); color: var(--c-f);
@ -814,15 +827,12 @@ input[type=number]::-webkit-outer-spin-button {
height: 40px; height: 40px;
} }
/* Segment apply button (checkmark) */
.cnf { .cnf {
color: var(--c-f); color: var(--c-f);
cursor: pointer; cursor: pointer;
background: var(--c-3); background: var(--c-3);
border-radius: 5px; border-radius: 5px;
}
/* Segment apply button (checkmark) */
.cnf-s {
padding: 8.5px 21px 5px; padding: 8.5px 21px 5px;
display: inline; display: inline;
} }
@ -842,8 +852,6 @@ input[type=number]::-webkit-outer-spin-button {
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 8px; right: 8px;
color: var(--c-f);
cursor: pointer;
} }
.check, .radio { .check, .radio {
@ -1111,6 +1119,10 @@ input[type="text"].search:not(:placeholder-shown) {
background-color: var(--c-b); background-color: var(--c-b);
} }
.no-margin {
margin: 0;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
} }

2
wled00/data/index.htm
View File

@ -106,7 +106,7 @@
</div> </div>
<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="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button> <button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons no-margin">&#xe390;</i></button>
</div> </div>
<p class="labels"> <p class="labels">
<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> <i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>

14
wled00/data/index.js
View File

@ -601,7 +601,7 @@ function populateSegments(s)
<tr> <tr>
<td class="segtd"><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td> <td class="segtd"><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
<td class="segtd"><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td> <td class="segtd"><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
<td class="segtd"><i class="icons e-icon cnf cnf-s" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i></td> <td class="segtd"><i class="icons e-icon cnf" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i></td>
</tr> </tr>
</table> </table>
<div class="h" id="seg${i}len"></div> <div class="h" id="seg${i}len"></div>
@ -616,8 +616,8 @@ function populateSegments(s)
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
<div class="del"> <div class="del">
<button class="btn btn-i btn-xs" id="segr${i}" title="Repeat until end" onclick="rptSeg(${i})"><i class="icons btn-icon">&#xe22d;</i></button> <button class="xxs btn no-margin" id="segr${i}" title="Repeat until end" onclick="rptSeg(${i})"><i class="icons no-margin">&#xe22d;</i></button>
<button class="btn btn-i btn-xs" id="segd${i}" title="Delete" onclick="delSeg(${i})"><i class="icons btn-icon">&#xe037;</i></button> <button class="xxs btn no-margin" id="segd${i}" title="Delete" onclick="delSeg(${i})"><i class="icons no-margin">&#xe037;</i></button>
</div> </div>
</div> </div>
</div><br>`; </div><br>`;
@ -806,7 +806,7 @@ function populateNodes(i,n)
for (var x=0;x<n.nodes.length;x++) { for (var x=0;x<n.nodes.length;x++) {
var o = n.nodes[x]; var o = n.nodes[x];
if (o.name) { if (o.name) {
var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`; var url = `<button class="btn no-margin tab" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`); urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`);
nnodes++; nnodes++;
} }
@ -1291,7 +1291,7 @@ function makeSeg() {
<tr> <tr>
<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})" onkeydown="segEnter(${lowestUnused})"></td> <td class="segtd"><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})" onkeydown="segEnter(${lowestUnused})"></td>
<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount-(cfg.comp.seglen?ns:0)}" value="${ledCount-(cfg.comp.seglen?ns:0)}" oninput="updateLen(${lowestUnused})" onkeydown="segEnter(${lowestUnused})"></td> <td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount-(cfg.comp.seglen?ns:0)}" value="${ledCount-(cfg.comp.seglen?ns:0)}" oninput="updateLen(${lowestUnused})" onkeydown="segEnter(${lowestUnused})"></td>
<td class="segtd"><i class="icons e-icon cnf cnf-s" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i></td> <td class="segtd"><i class="icons e-icon cnf" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i></td>
</tr> </tr>
</table> </table>
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LED${ledCount - ns >1 ? "s":""}</div> <div class="h" id="seg${lowestUnused}len">${ledCount - ns} LED${ledCount - ns >1 ? "s":""}</div>
@ -1470,11 +1470,11 @@ function makePlEntry(p,i) {
<select class="btn sel sel-pl" onchange="plePs(${p},${i},this)" data-val=${plJson[p].ps[i]} data-index=${i}> <select class="btn sel sel-pl" onchange="plePs(${p},${i},this)" data-val=${plJson[p].ps[i]} data-index=${i}>
${makePlSel()} ${makePlSel()}
</select> </select>
<button class="btn btn-i btn-xs btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button> <button class="xxs btn btn-pl-del" onclick="delPl(${p},${i})"><i class="icons no-margin">&#xe037;</i></button>
<div class="h plnl">Duration</div><div class="h plnl">Transition</div><div class="h pli">#${i+1}</div><br> <div class="h plnl">Duration</div><div class="h plnl">Transition</div><div class="h pli">#${i+1}</div><br>
<input class="noslide pln" type="number" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value=${plJson[p].dur[i]/10.0}> <input class="noslide pln" type="number" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value=${plJson[p].dur[i]/10.0}>
<input class="noslide pln" type="number" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value=${plJson[p].transition[i]/10.0}> s <input class="noslide pln" type="number" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value=${plJson[p].transition[i]/10.0}> s
<button class="btn btn-i btn-xs btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button> <button class="xxs btn btn-pl-add" onclick="addPl(${p},${i})"><i class="icons no-margin">&#xe18a;</i></button>
<div class="hrz"></div> <div class="hrz"></div>
</div>`; </div>`;
} }

4295
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 2203011 #define VERSION 2203012
//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