diff --git a/wled00/data/index.css b/wled00/data/index.css index 3c43e2519..f06dced24 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -1345,30 +1345,16 @@ TD .checkmark, TD .radiomark { top: calc(var(--sti) + 42px); } -.dialog:not(.hide)::after { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--c-o); - content: ""; - z-index: -1; +dialog::backdrop { + backdrop-filter: blur(5px); } -.dialog { - position: fixed; - z-index: 5; - top: 10%; - left: 0; - right: 0; - max-width: 280px; +dialog { max-height: 70%; - margin: auto; - padding: 12px 24px; + border: 0; border-radius: 10px; - background-color: var(--c-5); - overflow: scroll; + background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)), var(--c-3); box-shadow: 4px 4px 10px 4px var(--c-1); + color: var(--c-f); } #fxlist .lstI.sticky, diff --git a/wled00/data/index.js b/wled00/data/index.js index 90289b746..3fed6d20e 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -1616,9 +1616,9 @@ function setEffectParameters(idx) // disable palette list text += ' not used'; palw.style.display = "none"; - // hide palette dialog if not available - if (gId("palw").lastElementChild.classList.contains("dialog")) { - gId("palw").lastElementChild.classList.add("hide"); + // Close palette dialog if not available + if (gId("palw").lastElementChild.tagName == "DIALOG") { + gId("palw").lastElementChild.close(); } } pall.innerHTML = icon + text; @@ -2285,9 +2285,9 @@ function setFX(ind = null) d.querySelector(`#fxlist input[name="fx"][value="${ind}"]`).checked = true; } - // Hide effect dialog in simplified UI + // Close effect dialog in simplified UI if (simplifiedUI) { - gId("fx").lastElementChild.classList.add("hide"); + gId("fx").lastElementChild.close(); } var obj = {"seg": {"fx": parseInt(ind), "fxdef": cfg.comp.fxdef}}; // fxdef sets effect parameters to default values @@ -2302,9 +2302,9 @@ function setPalette(paletteId = null) d.querySelector(`#pallist input[name="palette"][value="${paletteId}"]`).checked = true; } - // Hide palette dialog in simplified UI + // Close palette dialog in simplified UI if (simplifiedUI) { - gId("palw").lastElementChild.classList.add("hide"); + gId("palw").lastElementChild.close(); } var obj = {"seg": {"pal": paletteId}}; @@ -3059,7 +3059,7 @@ function simplifyUI() { // Create dropdown dialog function createDropdown(id, buttonText, dialogElements = null) { // Create dropdown dialog - const dialog = document.createElement("div"); + const dialog = document.createElement("dialog"); // Move every dialogElement to the dropdown dialog or if none are given, move all children of the element with the given id if (dialogElements) { dialogElements.forEach((e) => { @@ -3070,7 +3070,6 @@ function simplifyUI() { dialog.appendChild(gId(id).firstChild); } } - dialog.classList.add("hide", "dialog"); // Create button for the dropdown const btn = document.createElement("button"); @@ -3079,7 +3078,14 @@ function simplifyUI() { btn.innerText = buttonText; function toggleDialog(e) { if (e.target != btn && e.target != dialog) return; - dialog.classList.toggle("hide"); + if (dialog.open) { + dialog.close(); + return; + } + // Prevent autofocus on dialog open + dialog.inert = true; + dialog.showModal(); + dialog.inert = false; clean(dialog.firstElementChild.children[1]); dialog.scrollTop = 0; };