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

2
wled00/data/index.htm
View File

@ -106,7 +106,7 @@
</div>
<div id="hexw">
<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>
<p class="labels">
<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>

14
wled00/data/index.js
View File

@ -601,7 +601,7 @@ function populateSegments(s)
<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}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>
</table>
<div class="h" id="seg${i}len"></div>
@ -616,8 +616,8 @@ function populateSegments(s)
<span class="checkmark schk"></span>
</label>
<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="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="segr${i}" title="Repeat until end" onclick="rptSeg(${i})"><i class="icons no-margin">&#xe22d;</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><br>`;
@ -806,7 +806,7 @@ function populateNodes(i,n)
for (var x=0;x<n.nodes.length;x++) {
var o = n.nodes[x];
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>`);
nnodes++;
}
@ -1291,7 +1291,7 @@ function makeSeg() {
<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}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>
</table>
<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}>
${makePlSel()}
</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>
<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
<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>`;
}

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)
#define VERSION 2203011
#define VERSION 2203012
//uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG