Improved layout.
This commit is contained in:
parent
4f2f23207e
commit
0d452d6c84
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
18
src/ui/ui.js
18
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!
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue