diff --git a/src/ui/ui.css b/src/ui/ui.css index d21e7f5..baf1811 100644 --- a/src/ui/ui.css +++ b/src/ui/ui.css @@ -328,17 +328,17 @@ span.preset { width: 5000px; height: 500px; top: -5000px; + } #presets-sizer span.preset { display: block; - } .presets input.preset:checked, #presets input.preset, #presets-sizer input.preset { opacity: 1; transform: none; - min-width: calc(var(--preset-label-width) + var(--line-size) + var(--extra-preset-width)); + min-width: calc(var(--preset-label-width) + var(--line-size) * 1.5 + var(--extra-preset-width)); } .presets input.preset:focus { @@ -362,7 +362,7 @@ span.preset { padding: .05em 0.4em .05em 0; --line-scaled: var(--line-size); line-height: var(--line-scaled); - padding-left: calc(var(--line-scaled) * 1.5); + padding-left: calc(var(--line-scaled) * 1.4); } .presets input.preset[value^="T"] + label { @@ -372,7 +372,7 @@ span.preset { .presets input.preset:checked + label, #presets .presets label { opacity: 1; display: inline-flex; - width: 75%; + width: var(--preset-label-width); background-color: var(--form-color2); border-radius: 1em 1em 0 0; } @@ -391,10 +391,11 @@ span.preset { } #presets-sizer .presets label { - position: static; - display: block; + position: absolute; + display: inline; width: auto; overflow: visible; + padding: 0; } input.preset[value="T_TRUSTED"] { diff --git a/src/ui/ui.js b/src/ui/ui.js index cbdd850..e3dc828 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -418,7 +418,7 @@ var UI = (() => { presets.appendChild(clone); } - UI.Sites.correctSize(presets); + this.correctSize(presets); } // URL @@ -450,21 +450,26 @@ var UI = (() => { return row; } - static correctSize(presets) { + correctSize(presets) { + if (this.sizeCorrected) return; + this.sizeCorrected = true; // adapt button to label if needed let sizer = document.createElement("div"); sizer.id = "presets-sizer"; + sizer.classList.add("sites"); sizer.appendChild(presets.cloneNode(true)); document.body.appendChild(sizer); - let presetWidth = sizer.querySelector("input.preset").offsetWidth; let labelWidth = 0; + let biggest = ""; for (let l of sizer.querySelectorAll("label.preset")) { let lw = l.offsetWidth; - if (lw > labelWidth) labelWidth = lw; + if (lw > labelWidth) { + labelWidth = lw; + biggest = l.textContent; + } } - document.documentElement.style.setProperty("--preset-label-width", (labelWidth) + "px"); + this.parentNode.style.setProperty("--preset-label-width", (labelWidth) + "px"); sizer.remove(); - UI.Sites.correctSize = () => {}; // just once, please! } allSiteRows() {