Optimizing simple UI
- no longer hiding brightness - cleaner look
This commit is contained in:
Blaz Kristan
parent
7939904ee3
commit
e1deb48121
@ -102,7 +102,7 @@ button:hover {
|
||||
|
||||
.label {
|
||||
margin: 0;
|
||||
padding: 8px 0 2px 0;
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
#namelabel {
|
||||
@ -135,6 +135,7 @@ button:hover {
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
margin: -2px 0 4px 0;
|
||||
text-shadow: -1px -1px 0 var(--c-3), 1px -1px 0 var(--c-3), -1px 1px 0 var(--c-3), 1px 1px 0 var(--c-3);
|
||||
}
|
||||
|
||||
.huge {
|
||||
@ -378,8 +379,9 @@ img {
|
||||
|
||||
.sliderwrap {
|
||||
height: 30px;
|
||||
width: 225px;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
margin: 4px 0;
|
||||
}
|
||||
#Colors .sliderwrap {
|
||||
width: 260px;
|
||||
@ -389,8 +391,8 @@ img {
|
||||
.sliderdisplay {
|
||||
content:'';
|
||||
position: absolute;
|
||||
top: 13px; left: 8px; right: 8px;
|
||||
height: 4px;
|
||||
top: 10px; left: 8px; right: 8px;
|
||||
height: 8px;
|
||||
background: var(--c-4);
|
||||
border-radius: 16px;
|
||||
pointer-events: none;
|
||||
@ -452,37 +454,53 @@ input[type=range]::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 2px solid #000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-f);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: 7px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: var(--c-0);
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 2px solid var(--c-3);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-f);
|
||||
transform: translateY(5px);
|
||||
}
|
||||
#Colors input[type=range]::-webkit-slider-thumb {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
border: 2px solid #000;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#Colors input[type=range]::-moz-range-thumb {
|
||||
border: 2px solid var(--c-1);
|
||||
}
|
||||
|
||||
#Presets .list {
|
||||
max-height: 215px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 280px;
|
||||
margin: 0 0 0 20px;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
#Presets .list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#Segments .sliderwrap{
|
||||
width: 225px;
|
||||
}
|
||||
|
||||
#picker, #rgbwrap, #kwrap, #vwrap, #wwrap, #wbal {
|
||||
display: none;
|
||||
}
|
||||
@ -530,6 +548,7 @@ input[type=range]::-moz-range-thumb {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#fxBtn, #palBtn {
|
||||
@ -609,6 +628,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.xxs-w {
|
||||
@ -616,6 +636,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
margin: 2px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.qcs, .xxs {
|
||||
@ -629,7 +650,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
.pwr {
|
||||
color: var(--c-6);
|
||||
/*transform: translate(2px, 3px);*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -645,8 +665,8 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.schkl {
|
||||
padding: 2px 2px 2px 16px;
|
||||
margin: 0;
|
||||
width: 24px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.check input, .radio input {
|
||||
@ -785,20 +805,17 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
position: absolute;
|
||||
width: 284px;
|
||||
z-index: 1;
|
||||
height: 266px;
|
||||
height: 260px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding: 0 18px;
|
||||
margin-top: 10px;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.fndIcn { /* needed for magnifier SVG, can be removed when magnifier is in Wicons font */
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: var(--c-e);
|
||||
stroke-width: 3px;
|
||||
fill-opacity: 0;
|
||||
margin-top: 1px;
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.dd-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fnd {
|
||||
@ -809,39 +826,44 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.fnd div {
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 13px;
|
||||
pointer-events: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: -1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
div.fnd span {
|
||||
.clear-icon {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 10px;
|
||||
right: 13px;
|
||||
cursor: pointer;
|
||||
margin-top: -1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
input[type="text"].fnd {
|
||||
input[type=text].fnd {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 44px 8px 44px;
|
||||
padding: 8px 48px 8px 48px;
|
||||
margin: 5px auto 0;
|
||||
text-align: left;
|
||||
border-radius: 20px;
|
||||
border-radius: 25px;
|
||||
background-color: var(--c-2);
|
||||
border: 1px solid var(--c-4);
|
||||
}
|
||||
|
||||
input[type="text"].fnd:focus {
|
||||
input[type=text].fnd:focus {
|
||||
background-color: var(--c-4);
|
||||
}
|
||||
|
||||
input[type="text"].fnd:not(:placeholder-shown), input[type="text"].fnd:hover {
|
||||
input[type=text].fnd:not(:placeholder-shown), input[type=text].fnd:hover {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
<button id="buttonNodes" onclick="toggleNodes()"><i class="icons"></i><p class="tab-label">Nodes</p></button></div>
|
||||
<button onclick="window.location.href='/settings';"><i class="icons"></i><p class="tab-label">Config</p></button>
|
||||
<button id="buttonCP" onclick="tglCP()"><i class="icons"></i><p class="tab-label">Expand</p></button>
|
||||
<button id="buttonBri" onclick="tglBri()"><i class="icons"></i><p class="tab-label">Brightness</p></button>
|
||||
<!--button id="buttonBri" onclick="tglBri()"><i class="icons"></i><p class="tab-label">Brightness</p></button-->
|
||||
</div>
|
||||
<div id="briwrap">
|
||||
<p class="label hd">Global brightness</p>
|
||||
@ -79,43 +79,47 @@
|
||||
|
||||
<div class ="container">
|
||||
<div class="tabcontent">
|
||||
<div id="qcs-w" class="center">
|
||||
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
|
||||
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
|
||||
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
|
||||
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
|
||||
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
|
||||
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
|
||||
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
|
||||
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
|
||||
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
|
||||
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
|
||||
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
|
||||
</div>
|
||||
<div id="csl" class="center" style="display: none;">
|
||||
<button class="xxs btn" onclick="selectSlot(0);">1</button>
|
||||
<button class="xxs btn" onclick="selectSlot(1);">2</button>
|
||||
<button class="xxs btn" onclick="selectSlot(2);">3</button>
|
||||
<div id="QuickLoad" class="center">
|
||||
<p class="label h">Quick Load</p>
|
||||
<div id="pql"></div>
|
||||
</div>
|
||||
|
||||
<div id="picker" class="center"></div>
|
||||
<div id="Colors">
|
||||
<div id="QCS" class="center">
|
||||
<p class="label h">Solid color</p>
|
||||
<div id="qcs-w" class="center">
|
||||
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
|
||||
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
|
||||
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
|
||||
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
|
||||
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
|
||||
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
|
||||
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
|
||||
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
|
||||
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
|
||||
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
|
||||
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="picker" class="center"></div>
|
||||
|
||||
<div id="Colors" class="center">
|
||||
<div id="vwrap">
|
||||
<!--p class="labels hd">Value</p-->
|
||||
<!--p class="label h">Value</p-->
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div><br>
|
||||
</div>
|
||||
<div id="kwrap">
|
||||
<!--p class="labels hd">Temperature</p-->
|
||||
<!--p class="label h">Temperature</p-->
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rgbwrap" class="center">
|
||||
<p class="label hd">RGB channels</p>
|
||||
<p class="label h">RGB channels</p>
|
||||
<div id="rwrap" class="il">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderR" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
|
||||
@ -136,14 +140,14 @@
|
||||
</div><br>
|
||||
</div>
|
||||
<div id="wwrap" class="center">
|
||||
<p class="label hd">White channel</p>
|
||||
<p class="label h">White channel</p>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderW" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wbal">
|
||||
<p class="labels hd">White balance</p>
|
||||
<p class="label h">White balance</p>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderA" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
@ -151,21 +155,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Slots" class="center">
|
||||
<p class="label h">Color slots</p>
|
||||
<div id="csl" class="center" style="display: none;">
|
||||
<button class="xxs btn" onclick="selectSlot(0);">1</button>
|
||||
<button class="xxs btn" onclick="selectSlot(1);">2</button>
|
||||
<button class="xxs btn" onclick="selectSlot(2);">3</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Segments" class="center">
|
||||
<div id="segcont"></div>
|
||||
</div>
|
||||
|
||||
<div id="QuickLoad" class="center">
|
||||
<p class="label h">Quick Load</p>
|
||||
<div id="pql"></div>
|
||||
</div>
|
||||
|
||||
<div id="Presets" class="center" style="display:none;">
|
||||
<div id="Presets" class="center">
|
||||
<p class="label h">Presets</p>
|
||||
<div class="fnd">
|
||||
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this)" />
|
||||
<span onclick="clean(this)" class="icons"></span>
|
||||
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div>
|
||||
<i class="icons clear-icon" onclick="clean(this);"></i>
|
||||
<i class="icons search-icon"></i>
|
||||
</div>
|
||||
<div id="pcont" class="list"></div>
|
||||
</div>
|
||||
@ -194,8 +202,8 @@
|
||||
<div id="fxDropdown" class="dd-content">
|
||||
<div class="fnd">
|
||||
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this)" />
|
||||
<span onclick="clean(this)" class="icons"></span>
|
||||
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div>
|
||||
<i class="icons clear-icon" onclick="clean(this);"></i>
|
||||
<i class="icons search-icon"></i>
|
||||
</div>
|
||||
<div id="fxlist" class="list">
|
||||
<div class="lstI" data-id="0" onClick="setX(0)"><a href="#0" onClick="setX(0)">Solid</a></div>
|
||||
@ -204,8 +212,8 @@
|
||||
<div id="palDropdown" class="dd-content">
|
||||
<div class="fnd">
|
||||
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this)" />
|
||||
<span onclick="clean(this)" class="icons"></span>
|
||||
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div>
|
||||
<i class="icons clear-icon" onclick="clean(this);"></i>
|
||||
<i class="icons search-icon"></i>
|
||||
</div>
|
||||
<div id="pallist" class="list">
|
||||
<div class="lstI" data-id="0" onClick="setPalette(0)"><a href="#0" onClick="setPalette(0)">Default</a><div class="lstIprev"></div></div>
|
||||
|
||||
@ -555,11 +555,11 @@ function populateSegments(s)
|
||||
<output class="sliderbubble"></output>
|
||||
</div>`;
|
||||
}
|
||||
if (gId('buttonBri').className !== 'active') tglBri(true);
|
||||
//if (gId('buttonBri').className !== 'active') tglBri(true);
|
||||
} else {
|
||||
tglBri(false);
|
||||
//tglBri(false);
|
||||
}
|
||||
gId('buttonBri').style.display = (segCount > 1) ? "block" : "none";
|
||||
//gId('buttonBri').style.display = (segCount > 1) ? "block" : "none";
|
||||
gId('segcont').innerHTML = cn;
|
||||
for (var i = 0; i < segCount && i<4; i++) updateTrail(gId(`seg${i}bri`));
|
||||
}
|
||||
@ -1044,12 +1044,12 @@ function toggleNodes()
|
||||
}
|
||||
|
||||
function tglBri(b=null)
|
||||
{
|
||||
{/*
|
||||
if (b===null) b = gId(`briwrap`).style.display === "block";
|
||||
gId('briwrap').style.display = !b ? "block":"none";
|
||||
gId('buttonBri').className = !b ? "active":"";
|
||||
size();
|
||||
}
|
||||
*/}
|
||||
|
||||
function tglCP()
|
||||
{
|
||||
@ -1060,8 +1060,8 @@ function tglCP()
|
||||
gId('rgbwrap').style.display = !p ? "block":"none";
|
||||
var csl = gId(`csl`).style.display === "block";
|
||||
gId('csl').style.display = !csl ? "block":"none";
|
||||
var ps = gId(`Presets`).style.display === "block";
|
||||
gId('Presets').style.display = !ps ? "block":"none";
|
||||
//var ps = gId(`Presets`).style.display === "block";
|
||||
//gId('Presets').style.display = !ps ? "block":"none";
|
||||
}
|
||||
|
||||
function tglCs(i)
|
||||
|
||||
2237
wled00/html_simple.h
2237
wled00/html_simple.h
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user