🐶 Sync 2026-10-20 22:40:23

luci-theme-argon/less/components/feedback.less

@@ -75,10 +75,9 @@
   margin: clamp(1rem, 4vh, 2rem) auto;
   padding: var(--field-gap) var(--section-inset);
   gap: var(--field-gap);
-  border: 1px solid transparent;
-  border-inline-start: 3px solid var(--status-accent);
+  border: 1px solid var(--border-color);
   border-radius: var(--radius-dialog) !important;
-  background-color: var(--surface-raised) !important;
+  background-color: color-mix(in srgb, var(--status-accent) 4%, var(--surface-raised)) !important;
   color: var(--text-strong);
   box-shadow: var(--section-shadow);
   font-size: .875rem;

luci-theme-argon/less/components/forms.less

@@ -245,6 +245,33 @@
 .cbi-input-file {
   appearance: auto !important;
 
+  // File pickers include their own button. A text field's vertical padding
+  // leaves too little space for that button and clips its lower edge.
+  &[type="file"] {
+    padding: 0;
+    padding-inline-end: .75rem;
+    line-height: calc(2.5rem - 2px);
+    overflow: hidden;
+    cursor: pointer;
+
+    &::file-selector-button {
+      box-sizing: border-box;
+      height: 100%;
+      margin: 0;
+      margin-inline-end: var(--action-gap);
+      padding: 0 .75rem;
+      border: 0;
+      border-inline-end: 1px solid var(--control-border);
+      border-radius: 0;
+      font: inherit;
+      color: var(--control-text);
+      background-color: var(--surface-active);
+      vertical-align: top;
+      cursor: inherit;
+      appearance: none;
+    }
+  }
+
   &::-webkit-file-upload-button {
     display: inline-block !important;
   }

luci-theme-argon/less/components/overlays.less

@@ -234,8 +234,7 @@
     width: auto;
     margin: 0;
     padding: .75rem 1rem;
-    border: 1px solid transparent;
-    border-inline-start: 3px solid var(--dialog-feedback-accent);
+    border: 1px solid var(--border-color);
     border-radius: var(--radius-panel) !important;
     background-color: color-mix(in srgb, var(--dialog-feedback-accent) 10%, var(--surface-color)) !important;
     color: var(--text-strong);

luci-theme-argon/less/components/sections.less

@@ -68,6 +68,35 @@
   display: none !important;
 }
 
+// Older Lua CBI forms omit the body inset supplied by modern tab containers.
+// Page adapters opt in so headings, descriptions and fields share one rhythm.
+.legacy-cbi-section-spacing() {
+  .cbi-section {
+    > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)) {
+      padding-block: var(--field-gap);
+    }
+
+    // Descriptions already inset the body, but a painted heading is a separate
+    // surface: its bottom padding cannot supply space below that surface.
+    > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed) {
+      padding-block-start: 0;
+    }
+
+    > .cbi-value {
+      padding-block: var(--field-gap);
+    }
+
+    > .cbi-value ~ .cbi-value,
+    > .cbi-section-descr:not(:empty) ~ .cbi-value {
+      padding-block-start: 0;
+    }
+
+    > .cbi-section-create {
+      padding: var(--field-gap) var(--section-inset);
+    }
+  }
+}
+
 .cbi-map-descr+fieldset {
   margin-top: 0;
 }