Improved layout.

Author: hackademix

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;

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;
+}
+
+#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;
 }
 
-.customizing input.preset:checked + label.preset {
-  padding-left: 3.2em;
+#presets .customizing input.preset:not(:checked) {
+  margin-bottom: 0;
 }
 
 .sites .customizing, .customizer {

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!
     }