Small CSS alignment adjustments
mainseg is not highlighted by default, but can be enabled by CSS only Simplify some CSS (new segment box, segment brightness slider) Started labeling CSS classes
This commit is contained in:
cschwinne
parent
4ce557a829
commit
f333df181f
@ -45,8 +45,6 @@ body {
|
||||
text-align: center;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
scrollbar-width: 6px;
|
||||
@ -128,11 +126,6 @@ button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.segt {
|
||||
table-layout: fixed;
|
||||
width: 76%;
|
||||
}
|
||||
|
||||
.segtd {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
@ -554,12 +547,9 @@ input[type=range]:active + .sliderbubble {
|
||||
margin: 0px -20px 5px -6px;
|
||||
}
|
||||
|
||||
/* Segment brightness slider wrapper div */
|
||||
.sws {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.sis {
|
||||
width: 214px !important;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.hd {
|
||||
@ -763,9 +753,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
.pname, .plname, .segname {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
@ -778,15 +765,18 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.segname {
|
||||
top: 2px;
|
||||
top: 0px;
|
||||
padding: 9px 0;
|
||||
}
|
||||
.pname, .plname {
|
||||
width: 208px;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
}
|
||||
.pname {
|
||||
top: 2px;
|
||||
top: 1px;
|
||||
}
|
||||
.plname {
|
||||
top:0;
|
||||
@ -831,15 +821,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Segment apply button (checkmark) */
|
||||
.cnf-s {
|
||||
/*position: absolute;
|
||||
bottom: 100px;
|
||||
right: 23px;*/
|
||||
padding: 9px 22px 7px;
|
||||
margin: 0;
|
||||
padding: 8.5px 21px 5px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Segment power button icon */
|
||||
.pwr {
|
||||
color: var(--c-6);
|
||||
transform: translate(2px, 3px);
|
||||
@ -850,11 +838,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
color: var(--c-f);
|
||||
}
|
||||
|
||||
.half {
|
||||
padding: 7.5px;
|
||||
bottom: 35px;
|
||||
}
|
||||
|
||||
.del {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
@ -899,7 +882,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
.checkmark, .radiomark {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
@ -908,9 +890,14 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
/*border: 1px solid var(--c-2);*/
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.radiomark {
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.schk {
|
||||
@ -932,13 +919,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
|
||||
.check:hover input ~ .checkmark {
|
||||
background-color: var(--c-4);
|
||||
background-color: var(--c-5);
|
||||
}
|
||||
/*
|
||||
|
||||
.check input:checked ~ .checkmark {
|
||||
background-color: var(--c-6);
|
||||
}
|
||||
*/
|
||||
|
||||
.checkmark:after, .radiomark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -950,7 +937,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.check .checkmark:after {
|
||||
left: 9px;
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
@ -962,11 +949,11 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.radio .radiomark:after {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -7px;
|
||||
margin: -6px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-f);
|
||||
}
|
||||
@ -1000,8 +987,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
.selected {
|
||||
background-color: var(--c-4);
|
||||
}
|
||||
/* "selected" CSS class is applied to the segment when it is the main segment.
|
||||
By default, do not highlight. Can be overridden by skin.css */
|
||||
.selected .seg {
|
||||
background-color: var(--c-2); /* var(--c-4); */
|
||||
}
|
||||
.selected .checkmark, .selected .radiokmark {
|
||||
background-color: var(--c-6);
|
||||
background-color: var(--c-4); /* var(--c-6); */
|
||||
}
|
||||
|
||||
.list {
|
||||
@ -1023,7 +1015,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.lstI:hover {
|
||||
background: var(--c-4);
|
||||
background: var(--c-4);
|
||||
}
|
||||
|
||||
.lstI:last-child {
|
||||
@ -1073,10 +1065,10 @@ input[type="text"].search {
|
||||
display: block;
|
||||
width: 230px;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 8px 9px 38px;
|
||||
margin: 6px auto 0 auto;
|
||||
padding: 8px 8px 9px 38px;
|
||||
margin: 6px auto 0 auto;
|
||||
text-align: left;
|
||||
background-color: var(--c-3);
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
input[type="text"].search:focus {
|
||||
|
||||
@ -576,7 +576,7 @@ function populateSegments(s)
|
||||
<div class="sbs">
|
||||
<i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})"></i>
|
||||
<div class="sliderwrap il sws">
|
||||
<input id="seg${i}bri" class="noslide sis" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
|
||||
<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1283,18 +1283,19 @@ function makeSeg() {
|
||||
<br>
|
||||
<div class="segin expanded">
|
||||
<input type="text" class="ptxt stxt noslide" id="seg${lowestUnused}t" autocomplete="off" maxlength=32 value="" placeholder="Enter name..."/>
|
||||
<table class="segt">
|
||||
<table class="infot">
|
||||
<tr>
|
||||
<td class="segtd">Start LED</td>
|
||||
<td class="segtd">${cfg.comp.seglen?"Length":"Stop LED"}</td>
|
||||
<td class="segtd">Apply</td>
|
||||
</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}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();"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LED${ledCount - ns >1 ? "s":""}</div>
|
||||
<i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();"></i>
|
||||
</div>
|
||||
</div>`;
|
||||
d.getElementById('segutil').innerHTML = cn;
|
||||
@ -1511,11 +1512,14 @@ function tglSegn(s)
|
||||
(window.getComputedStyle(d.getElementById(`seg${s}t`)).display === "none") ? "inline":"none";
|
||||
}
|
||||
|
||||
// Select only the clicked segment and unselect all others
|
||||
function selSegEx(s)
|
||||
{
|
||||
var obj = {"seg":[]};
|
||||
for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":(i==s)});
|
||||
obj.mainseg = s;
|
||||
// optionally, force mainseg to be first selected
|
||||
// WLED internally regards the first selected as mainseg regardless of this as long as any segment is selected
|
||||
//obj.mainseg = s;
|
||||
requestJson(obj);
|
||||
}
|
||||
|
||||
@ -1530,7 +1534,7 @@ function rptSeg(s)
|
||||
var name = d.getElementById(`seg${s}t`).value;
|
||||
var start = parseInt(d.getElementById(`seg${s}s`).value);
|
||||
var stop = parseInt(d.getElementById(`seg${s}e`).value);
|
||||
if (stop == 0) {return;}
|
||||
if (stop == 0) return;
|
||||
var rev = d.getElementById(`seg${s}rev`).checked;
|
||||
var mi = d.getElementById(`seg${s}mi`).checked;
|
||||
var sel = d.getElementById(`seg${s}sel`).checked;
|
||||
@ -1819,15 +1823,17 @@ function updatePSliders() {
|
||||
v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs);
|
||||
updateTrail(v);
|
||||
|
||||
//update Kelvin slider
|
||||
// update Kelvin slider
|
||||
d.getElementById('sliderK').value = cpick.color.kelvin;
|
||||
}
|
||||
|
||||
// Fired when a key is pressed while in the HEX color input
|
||||
function hexEnter() {
|
||||
d.getElementById('hexcnf').style.backgroundColor = "var(--c-6)";
|
||||
if(event.keyCode == 13) fromHex();
|
||||
}
|
||||
|
||||
// Fired when a key is pressed while in a segment input
|
||||
function segEnter(s) {
|
||||
if(event.keyCode == 13) setSeg(s);
|
||||
}
|
||||
|
||||
4417
wled00/html_ui.h
4417
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 2202222
|
||||
#define VERSION 2203010
|
||||
|
||||
//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