Skip to content

Commit

Permalink
Small CSS alignment adjustments
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@Aircoookie
Aircoookie committed Mar 1, 2022
1 parent 4ce557a commit f333df1
Show file tree
Hide file tree
Showing 4 changed files with 2,253 additions and 2,256 deletions.
72 changes: 32 additions & 40 deletions wled00/data/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -128,11 +126,6 @@ button {
width: 100%;
}

.segt {
table-layout: fixed;
width: 76%;
}

.segtd {
text-align: center;
text-transform: uppercase;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -899,7 +882,6 @@ input[type=number]::-webkit-outer-spin-button {

.checkmark, .radiomark {
position: absolute;
top: 6px;
left: 0;
height: 24px;
width: 24px;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -950,7 +937,7 @@ input[type=number]::-webkit-outer-spin-button {
}

.check .checkmark:after {
left: 9px;
left: 8px;
top: 4px;
width: 5px;
height: 10px;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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 {
Expand All @@ -1023,7 +1015,7 @@ input[type=number]::-webkit-outer-spin-button {
}

.lstI:hover {
background: var(--c-4);
background: var(--c-4);
}

.lstI:last-child {
Expand Down Expand Up @@ -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 {
Expand Down
18 changes: 12 additions & 6 deletions wled00/data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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})">&#xe08f;</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>
Expand Down Expand Up @@ -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();">&#xe390;</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();">&#xe390;</i>
</div>
</div>`;
d.getElementById('segutil').innerHTML = cn;
Expand Down Expand Up @@ -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);
}

Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down
Loading

0 comments on commit f333df1

Please sign in to comment.