diff --git a/wled00/data/index.css b/wled00/data/index.css index d42807069..c07819c0f 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -1334,12 +1334,42 @@ TD .checkmark, TD .radiomark { top: calc(var(--sti) + 42px); } +.dialog:not(.hideD)::before { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--c-tb); + content: " "; +} +.dialog { + position: fixed; + z-index: 5; + top: 50px; + left: 0; + right: 0; + width: 100%; + max-width: 280px; + max-height: 70%; + margin: auto; + padding: 24px; + border-radius: 10px; + background-color: var(--c-5); + overflow: none; + box-shadow: 4px 4px 10px 4px var(--c-1); +} + +.hideD { + top: -9999999999px; +} + #pallist.simplified { - height: 300px; overflow: scroll; + height: 500px; /* Fix shadow */ margin: 0px -16px; - padding: 0px 0px 0px 16px; + padding: 0px 16px 0px 16px; } #pallist.simplified .lstI.selected { diff --git a/wled00/data/index.js b/wled00/data/index.js index 8136239b5..08fc123f7 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -2274,6 +2274,10 @@ function setPalette(paletteId = null) d.querySelector(`#pallist input[name="palette"][value="${paletteId}"]`).checked = true; } + if (simplifiedUI) { + gId("palw").lastChild.classList.toggle("hideD"); + } + var obj = {"seg": {"pal": paletteId}}; requestJson(obj); } @@ -3025,6 +3029,7 @@ function tooltip() function simplifyUI() { // Disable PC Mode as it does not exist in simple UI if (pcMode) togglePcMode(true); + _C.style.setProperty('--n', 1); // Put effects below palett list gId("Colors").append(gId("fx")); @@ -3044,18 +3049,16 @@ function simplifyUI() { while (gId("palw").firstChild) { div.appendChild(gId("palw").firstChild); } - div.classList.add("hide"); + div.classList.add("hideD", "dialog"); let btn = document.createElement("button"); btn.classList.add("btn"); btn.innerText = "Change palette"; - btn.addEventListener("click", () => { - div.classList.toggle("hide"); - if (div.classList.contains("hide")) { - btn.innerText = "Change palette"; - } else { - btn.innerText = "Hide palettes"; - } - }); + let togglePal = (e) => { + if (e.target != btn && e.target != div) return + gId("palw").lastChild.classList.toggle("hideD"); + }; + btn.addEventListener("click", togglePal); + div.addEventListener("click", togglePal); gId("palw").prepend(div); gId("palw").prepend(btn);