Slider BG fix.

This commit is contained in:
Blaz Kristan 2023-02-28 23:04:12 +01:00
parent 7a2f556682
commit b8489724ef
3 changed files with 1953 additions and 1946 deletions

View File

@ -392,15 +392,18 @@ button {
} }
.slider { .slider {
background-color: var(--c-2);
max-width: 300px; max-width: 300px;
min-width: 280px; min-width: 260px;
margin: 0 auto; /* add 5px; if you want some vertical space but looks ugly */ margin: 0 auto; /* add 5px; if you want some vertical space but looks ugly */
border-radius: 24px; border-radius: 24px;
position: relative; position: relative;
padding-bottom: 2px; padding-bottom: 2px;
} }
#sliders .slider, #info .slider {
background-color: var(--c-2);
}
.filter, .option { .filter, .option {
background-color: var(--c-4); background-color: var(--c-4);
border-radius: 26px; border-radius: 26px;
@ -648,7 +651,7 @@ img {
#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); } #wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
/* wrapper divs hidden by default */ /* wrapper divs hidden by default */
#rgbwrap, #kwrap, #wwrap, #wbal, #qcs-w, #hexw { #rgbwrap, #swrap, #hwrap, #kwrap, #wwrap, #wbal, #qcs-w, #hexw {
display: none; display: none;
} }
@ -749,10 +752,10 @@ input[type=range]::-moz-range-thumb {
margin-top: var(--bmt); margin-top: var(--bmt);
} }
#picker, #rgbwrap, #kwrap, #wwrap, #wbal, #vwrap, #qcs-w, #hexw, #pall, #ledmap { #picker, #qcs-w, #hexw, #pall, #ledmap {
margin: 0 auto; margin: 0 auto;
width: 260px; width: 260px;
background-color: unset; /*background-color: unset;*/
} }
#picker { #picker {

View File

@ -117,24 +117,27 @@
<span class="tooltiptext">Kelvin/Temperature</span> <span class="tooltiptext">Kelvin/Temperature</span>
</div> </div>
<div id="rgbwrap"> <div id="rgbwrap">
<p class="labels hd">RGB color</p> <!--p class="labels hd">RGB color</p-->
<div id="rwrap" class="il"> <div id="rwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Red channel</span>
</div> </div>
<div id="gwrap" class="il"> <div id="gwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Green channel</span>
</div> </div>
<div id="bwrap" class="il"> <div id="bwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Blue channel</span>
</div> </div>
</div> </div>
<div id="wwrap" class="slider"> <div id="wwrap" class="slider">

File diff suppressed because it is too large Load Diff