Mirrors
/
noscript
mirror of https://github.com/hackademix/noscript.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved layout.

This commit is contained in:
hackademix 2022-03-26 01:13:05 +01:00
parent 4f2f23207e
commit 0d452d6c84
3 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/themes.css
View File

@ -31,8 +31,8 @@
--img-ui-clock: url(/img/ui-clock64.png); --img-ui-clock: url(/img/ui-clock64.png);
--icon-size: 2.2em; --icon-size: 2.2em;
--line-size: 1.7em; --line-size: 1.5em;
--popup-size: 640px; --popup-size: 600px;
--bg-preset-color: var(--form-color2); --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; --bg-focused-row: linear-gradient(to bottom, var(--form-color1) 0, var(--form-color2) 70%, var(--bg-color1) 100%) no-repeat;

27
src/ui/ui.css
View File

@ -181,7 +181,9 @@ input[type="checkbox"] {
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
--extra-preset-width: 0px;
} }
.vintage .sites { .vintage .sites {
image-rendering: auto; image-rendering: auto;
} }
@ -310,8 +312,9 @@ span.preset {
-moz-appearance: none; -moz-appearance: none;
background: var(--img-ui-no) no-repeat center; background: var(--img-ui-no) no-repeat center;
outline: 0; outline: 0;
opacity: .8; opacity: .7;
margin: 0 .5em 0.13em .5em; margin: 0 .5em;
background-position: 0;
background-size: var(--line-size); background-size: var(--line-size);
width: var(--line-size); width: var(--line-size);
height: var(--line-size); height: var(--line-size);
@ -334,8 +337,7 @@ span.preset {
.presets input.preset:checked, #presets input.preset, #presets-sizer input.preset { .presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
opacity: 1; opacity: 1;
transform: none; transform: none;
min-width: 9.38em; min-width: calc(var(--preset-label-width) + var(--line-size) + var(--extra-preset-width));
background-position-x: calc(var(--line-size) / 10);
} }
.presets input.preset:focus { .presets input.preset:focus {
@ -455,13 +457,22 @@ input.preset:checked ~ input.temp {
position: relative; position: relative;
} }
.customizing input.preset:checked, #presets input.preset, #presets input.preset:checked { .customizing input.preset:checked {
margin: 0 0 -0.2em 1em; margin: 0 0 -0.2em 0;
border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0;
background-position: 0.5em 0;
--extra-preset-width: 1em;
} }
.customizing input.preset:checked + label.preset { #presets :is(input.preset, input.preset:checked) {
padding-left: 3.2em; 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 { .sites .customizing, .customizer {

18
src/ui/ui.js
View File

@ -463,25 +463,9 @@ var UI = (() => {
let labelWidth = 0; let labelWidth = 0;
for (let l of sizer.querySelectorAll("label.preset")) { for (let l of sizer.querySelectorAll("label.preset")) {
let lw = l.offsetWidth; let lw = l.offsetWidth;
debug("lw", l.textContent, lw);
if (lw > labelWidth) labelWidth = lw; if (lw > labelWidth) labelWidth = lw;
} }
document.documentElement.style.setProperty("--preset-label-width", (labelWidth) + "px");
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;
}
}
}
}
}
sizer.remove(); sizer.remove();
UI.Sites.correctSize = () => {}; // just once, please! UI.Sites.correctSize = () => {}; // just once, please!
} }