Slight tweaks.

This commit is contained in:
Blaz Kristan 2023-10-21 19:18:45 +02:00
parent a933fcf7e2
commit 6570062e61
3 changed files with 2047 additions and 2048 deletions

View File

@ -88,58 +88,58 @@
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="hwrap" tooltip="Hue" class="slider">
<div class="sliderwrap il">
<div id="hwrap" class="slider">
<div tooltip="Hue" class="sliderwrap il">
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
</div>
</div>
<div id="swrap" tooltip="Saturation" class="slider">
<div class="sliderwrap il">
<div id="swrap" class="slider">
<div tooltip="Saturation" class="sliderwrap il">
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
</div>
</div>
<div id="vwrap" tooltip="Value/Brightness" class="slider">
<div class="sliderwrap il">
<div id="vwrap" class="slider">
<div tooltip="Value/Brightness" 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>
</div>
<div id="kwrap" tooltip="Kelvin/Temperature" class="slider">
<div class="sliderwrap il">
<div id="kwrap" class="slider">
<div tooltip="Kelvin/Temperature" 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">
<div id="rwrap" tooltip="Red channel" class="slider">
<div class="sliderwrap il">
<div id="rwrap" class="slider">
<div tooltip="Red channel" class="sliderwrap il">
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="gwrap" tooltip="Green channel" class="slider">
<div class="sliderwrap il">
<div id="gwrap" class="slider">
<div tooltip="Green channel" class="sliderwrap il">
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="bwrap" tooltip="Blue channel" class="slider">
<div class="sliderwrap il">
<div id="bwrap" class="slider">
<div tooltip="Blue channel" class="sliderwrap il">
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
</div>
<div id="wwrap" tooltip="White channel" class="slider">
<div id="whibri" class="sliderwrap il">
<div id="wwrap" class="slider">
<div id="whibri" tooltip="White channel" class="sliderwrap il">
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="wbal" tooltip="White balance" class="slider">
<div class="sliderwrap il">
<div id="wbal" class="slider">
<div tooltip="White balance" class="sliderwrap il">
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>

View File

@ -1091,7 +1091,7 @@ function updateTrail(e)
{
if (e==null) return;
let sd = e.parentNode.getElementsByClassName('sliderdisplay')[0];
if (sd && getComputedStyle(sd).getPropertyValue("--bg") !== "none") {
if (sd && getComputedStyle(sd).getPropertyValue("--bg").trim() !== "none") { // trim() for Safari
var max = e.hasAttribute('max') ? e.attributes.max.value : 255;
var perc = Math.round(e.value * 100 / max);
if (perc < 50) perc += 2;
@ -2953,9 +2953,9 @@ function tooltip()
const { offsetHeight, offsetWidth } = tooltip;
const multiplier = element.classList.contains("sliderwrap") ? .2 : .4;
top -= (offsetHeight + (offsetHeight * multiplier));
left += (width / 2) - (offsetWidth / 2);
const offset = element.classList.contains("sliderwrap") ? 6 : 12;
top -= offsetHeight + offset;
left += (width - offsetWidth) / 2;
tooltip.style.top = top + "px";
tooltip.style.left = left + "px";

File diff suppressed because it is too large Load Diff