diff --git a/src/common/themes.css b/src/common/themes.css index 8ef3114..76e75ba 100644 --- a/src/common/themes.css +++ b/src/common/themes.css @@ -31,8 +31,8 @@ --img-ui-clock: url(/img/ui-clock64.png); --icon-size: 2.2em; - --line-size: 1.7em; - --popup-size: 640px; + --line-size: 1.5em; + --popup-size: 600px; --bg-preset-color: var(--form-color2); --bg-focused-row: linear-gradient(to bottom, var(--form-color1) 0, var(--form-color2) 70%, var(--bg-color1) 100%) no-repeat; diff --git a/src/ui/ui.css b/src/ui/ui.css index 3b43eb7..f3cf056 100644 --- a/src/ui/ui.css +++ b/src/ui/ui.css @@ -181,7 +181,9 @@ input[type="checkbox"] { border-spacing: 0; width: 100%; image-rendering: -webkit-optimize-contrast; + --extra-preset-width: 0px; } + .vintage .sites { image-rendering: auto; } @@ -310,8 +312,9 @@ span.preset { -moz-appearance: none; background: var(--img-ui-no) no-repeat center; outline: 0; - opacity: .8; - margin: 0 .5em 0.13em .5em; + opacity: .7; + margin: 0 .5em; + background-position: 0; background-size: var(--line-size); width: var(--line-size); height: var(--line-size); @@ -334,8 +337,7 @@ span.preset { .presets input.preset:checked, #presets input.preset, #presets-sizer input.preset { opacity: 1; transform: none; - min-width: 9.38em; - background-position-x: calc(var(--line-size) / 10); + min-width: calc(var(--preset-label-width) + var(--line-size) + var(--extra-preset-width)); } .presets input.preset:focus { @@ -455,13 +457,22 @@ input.preset:checked ~ input.temp { position: relative; } -.customizing input.preset:checked, #presets input.preset, #presets input.preset:checked { - margin: 0 0 -0.2em 1em; +.customizing input.preset:checked { + margin: 0 0 -0.2em 0; border-radius: 1em 1em 0 0; + background-position: 0.5em 0; + --extra-preset-width: 1em; } -.customizing input.preset:checked + label.preset { - padding-left: 3.2em; +#presets :is(input.preset, input.preset:checked) { + margin: 0 .5em -0.2em 0; + border-radius: 1em 1em 0 0; + background-position: 0.5em 0; + --extra-preset-width: 0px; +} + +#presets .customizing input.preset:not(:checked) { + margin-bottom: 0; } .sites .customizing, .customizer { diff --git a/src/ui/ui.js b/src/ui/ui.js index a2a0290..60fc09a 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -463,25 +463,9 @@ var UI = (() => { let labelWidth = 0; for (let l of sizer.querySelectorAll("label.preset")) { let lw = l.offsetWidth; - debug("lw", l.textContent, lw); if (lw > labelWidth) labelWidth = lw; } - - debug(`Preset: %s Label: %s`, presetWidth, labelWidth); - labelWidth += 16; - if (presetWidth < labelWidth) { - for (let ss of document.styleSheets) { - if (ss.href.endsWith("/ui.css")) { - for (let r of ss.cssRules) { - if (/input\.preset:checked.*min-width:/.test(r.cssText)) { - r.style.minWidth = (labelWidth) + "px"; - break; - } - } - } - } - } - + document.documentElement.style.setProperty("--preset-label-width", (labelWidth) + "px"); sizer.remove(); UI.Sites.correctSize = () => {}; // just once, please! }