🗽 Sync 2026-10-26 14:45:36

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

@@ -1,5 +1,13 @@
 // out: false
 
+// Opt-in surface for native views that do not render a cbi-section.
+.native-page-card() {
+  min-width: 0;
+  border-radius: var(--radius-card);
+  background-color: var(--surface-color);
+  box-shadow: var(--section-shadow);
+}
+
 .cbi-section,
 .cbi-section-error,
 #iptables,
@@ -8,7 +16,6 @@
 #cbi-wireless>.cbi-section-node,
 #cbi-wireless>#wifi_assoclist_table,
 [data-tab-title],
-[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
 [data-page="admin-system-opkg"] #maincontent>.container {
   font-family: inherit;
   font-weight: normal;

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

@@ -1,5 +1,40 @@
 // out: false
 
+// Standalone native tables have no section to supply their surface or corners.
+// Round painted cells instead of clipping interactive descendants.
+.native-table-card() {
+  .native-page-card();
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: visible;
+
+  > :is(thead, tbody, .thead, .tbody):first-child,
+  > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child,
+  > :is(tr, .tr):first-child {
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th),
+  > :is(tr, .tr):first-child > :is(td, th, .td, .th) {
+    &:first-child {
+      border-start-start-radius: inherit;
+    }
+
+    &:last-child {
+      border-start-end-radius: inherit;
+    }
+  }
+
+  @media screen and (max-width: 1152px) {
+    // Responsive tables hide their title row; the first data row owns the top.
+    :is(.table-titles, .cbi-section-table-titles) + .tr {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+  }
+}
+
 // table
 
 .table {

luci-theme-argon/less/page-fix.less

@@ -6,6 +6,7 @@
 @import "pages/autoreboot.less";
 @import "pages/system.less";
 @import "pages/syscontrol.less";
+@import "pages/administration.less";
 @import "pages/password.less";
 @import "pages/sshkeys.less";
 @import "pages/repokeys.less";
@@ -46,6 +47,7 @@
 @import "pages/nlbwmon.less";
 
 // Services
+@import "pages/wol.less";
 @import "pages/ddns.less";
 @import "pages/ttyd.less";
 @import "pages/dockerman.less";

luci-theme-argon/less/pages/administration.less

@@ -0,0 +1,31 @@
+// out: false
+
+// Match native LuCI maps: a heading, an unpainted page description, then
+// section cards. Untabbed forms need the inset already supplied by tabs.
+[data-page="admin-system-admin"],
+[data-page="admin-system-admin-password"],
+[data-page="admin-system-admin-pwpolicy"],
+[data-page="admin-system-admin-uhttpd"] {
+  .legacy-cbi-section-spacing();
+}
+
+// Password policy has no page description: join its heading and sole form
+// into one surface instead of separating two adjacent cards.
+[data-page="admin-system-admin-pwpolicy"] {
+  #view > .cbi-map {
+    .native-page-card();
+    gap: 0;
+
+    > h2 {
+      margin: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+      box-shadow: none;
+    }
+
+    > .cbi-section {
+      background: none;
+      box-shadow: none;
+    }
+  }
+}

luci-theme-argon/less/pages/crontab.less

@@ -2,8 +2,16 @@
 
 // System - Crontab
 [data-page="admin-system-crontab"] {
+    #view > p:has(> textarea) {
+        .native-page-card();
+        margin: 0;
+        padding: var(--field-gap) var(--section-inset);
+        line-height: 0;
+    }
+
     #view p {
         textarea {
+            display: block;
             direction: ltr;
             unicode-bidi: plaintext;
             text-align: start;

luci-theme-argon/less/pages/diagnostics.less

@@ -2,6 +2,12 @@
 
 // Network - Diagnostics
 [data-page="admin-network-diagnostics"] {
+    #view > .cbi-map > .table {
+        .native-page-card();
+        padding: var(--control-gap);
+        border-collapse: separate;
+    }
+
     .table {
         // The toolbar must not become the dropdown's scroll/size boundary.
         overflow: visible;
@@ -32,7 +38,7 @@
 
         .td {
             background-color: var(--surface-color) !important;
-            border-bottom: 1px solid var(--border-color) !important;
+            border-bottom: 0 !important;
             display: flex;
             flex-direction: row;
             align-items: center;

luci-theme-argon/less/pages/logs.less

@@ -3,7 +3,28 @@
 [data-page="admin-status-logs"],
 [data-page="admin-status-logs-syslog"],
 [data-page="admin-status-logs-dmesg"] {
+  #content_syslog {
+    .native-page-card();
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+    padding: var(--field-gap) var(--section-inset);
+
+    > div {
+      margin-block: 0 !important;
+    }
+
+    // LuCI uses padded wrappers for the two scroll buttons.
+    > div:has(> .cbi-button) {
+      padding-block: 0 !important;
+    }
+  }
+
   #syslog {
+    display: block;
+    margin: 0;
+    border: 1px solid var(--control-border);
+    background-color: var(--input-bg);
     direction: ltr;
     unicode-bidi: plaintext;
     text-align: start;
@@ -18,7 +39,7 @@
 [data-page="admin-status-logs-dmesg"] {
   #content_syslog > div:has(> input, > select) {
     line-height: 2.5rem;
-    margin-block-end: var(--control-gap) !important;
+    margin-block-end: 0 !important;
 
     > label,
     > input,

luci-theme-argon/less/pages/openclash.less

@@ -27,7 +27,7 @@
     --oc-text: var(--text-color);
     --oc-text-muted: var(--plugin-text-muted);
     --oc-neutral: var(--plugin-neutral);
-    --oc-scrollbar: var(--plugin-scrollbar);
+    --oc-scrollbar: var(--oc-accent);
 
     @supports (color: color-mix(in srgb, red, blue)) {
         --oc-accent-hover: color-mix(in srgb, var(--oc-accent) 88%, black);
@@ -72,8 +72,8 @@
         --primary-a60: var(--oc-accent-a60) !important;
         --radio-hover-bg: var(--oc-accent-a10) !important;
         --tab-hover-dark-bg: var(--oc-accent-a10) !important;
-        --scrollbar-thumb: var(--oc-neutral) !important;
-        --scrollbar-thumb-hover: var(--oc-text-muted) !important;
+        --scrollbar-thumb: var(--oc-scrollbar) !important;
+        --scrollbar-thumb-hover: var(--oc-accent-hover) !important;
         border-radius: var(--radius-card);
 
         .developer-container,
@@ -91,6 +91,23 @@
         }
     }
 
+    // Editors inject important scrollbar colours. Override only control thumbs,
+    // retaining their existing widths, tracks and clipping.
+    textarea,
+    .oc,
+    .oc *,
+    .oc .cm-editor .cm-scroller,
+    .oc #debug-rendered,
+    .oc #debug-rendered pre {
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--oc-scrollbar) !important;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: var(--oc-accent-hover) !important;
+        }
+    }
+
     // Standard LuCI controls
     .cbi-button.cbi-button-add,
     .cbi-button.cbi-button-apply,
@@ -287,6 +304,7 @@
     }
 
     // Legacy help text is primary emphasis; success and error remain semantic.
+    b.oc-txt-good,
     b[style*="color:green"],
     b[style*="color: green"],
     b[color="green"] {
@@ -329,6 +347,26 @@
         }
     }
 
+    // The version tab reuses the update popup inside an existing Argon card.
+    // Align its content with the tabs without changing standalone popups.
+    &[data-page="admin-services-openclash-settings"] {
+        [id="container.openclash.config.version_update"] {
+            padding-inline: var(--section-inset);
+
+            >.oc {
+                border-radius: 0;
+                overflow: visible;
+            }
+
+            #selectPopup.select-popup-tab {
+                border: 0;
+                border-radius: 0;
+                padding: 0;
+                background: transparent;
+            }
+        }
+    }
+
     &[data-page="admin-services-openclash-config"],
     &[data-page="admin-services-openclash-config-subscribe"],
     &[data-page^="admin-services-openclash-custom-dns-edit"],
@@ -492,6 +530,45 @@
         padding: 0 1rem 1rem 1rem;
     }
 
+    // The surrounding form already provides the log card and horizontal inset.
+    // Retain the editor frame and clipping used to hide inactive log panes.
+    &[data-page="admin-services-openclash-log"] {
+        #tab.oc {
+            height: auto;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+            box-shadow: none;
+
+            >#tab-header {
+                padding: var(--field-gap) 0;
+                border: 0;
+                background: transparent;
+
+                >ul.oc-tabmenu {
+                    background: transparent;
+                }
+            }
+
+            +.oc {
+                border-radius: 0;
+            }
+        }
+
+        #tab-content>.dom {
+            padding: 0;
+        }
+
+        .oc .select-popup-footer.log-footer {
+            margin: 0;
+            padding: var(--field-gap) 0;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
     #cbi-openclash-dns_servers .cbi-section-table-row>
     .cbi-section-table-cell:last-child {
         min-width: 7.25rem;

luci-theme-argon/less/pages/package-manager.less

@@ -3,6 +3,10 @@
 // Native package-manager controls inject their own flex rules after the theme.
 [data-page="admin-system-package-manager"],
 [data-page="admin-system-opkg"] {
+    #view > #packages {
+        .native-table-card();
+    }
+
     .controls {
         min-width: 0;
         width: 100%;

luci-theme-argon/less/pages/power.less

@@ -12,6 +12,11 @@
         left: 1rem;
     }
 
+    // The view's section gap already separates the standalone page action.
+    #view > hr {
+        display: none;
+    }
+
     .cbi-button {
         background: var(--warning-action-bg) !important;
         border-color: var(--warning-action-bg) !important;

luci-theme-argon/less/pages/processes.less

@@ -1,6 +1,10 @@
 // out: false
 
 [data-page="admin-status-processes"] {
+  #view > .table {
+    .native-table-card();
+  }
+
   .th:nth-child(3),
   .td:nth-child(3) {
     text-align: start;

luci-theme-argon/less/pages/repokeys.less

@@ -1,6 +1,29 @@
 // out: false
 
 [data-page="admin-system-admin-repokeys"] {
+  .cbi-section-table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: inherit;
+
+    // The native heading has two cells but data rows also have an action
+    // column. Paint the row itself so the whole card has one continuous top.
+    > .thead,
+    > .thead > .tr {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+      background: var(--surface-muted);
+    }
+
+    > .thead > .tr > .th:first-child {
+      border-start-start-radius: inherit;
+    }
+
+    .cbi-section-table-row {
+      margin-block: 0;
+    }
+  }
+
   textarea {
     width: 100%;
     min-width: 0;

luci-theme-argon/less/pages/sshkeys.less

@@ -1,10 +1,19 @@
 // out: false
 
 [data-page="admin-system-admin-sshkeys"] {
+  #view > div:has(> .cbi-section-node > .cbi-dynlist) {
+    // This view omits cbi-map/cbi-section. Only the key list is a section;
+    // leave its page description between the heading and that card.
+    > .cbi-section-node {
+      .native-page-card();
+      padding: var(--field-gap) var(--section-inset);
+    }
+  }
+
   .cbi-dynlist {
     width: 100%;
-    margin-inline: var(--section-inset);
-    max-width: ~"min(48rem, calc(100% - 2 * var(--section-inset)))";
+    margin: 0;
+    max-width: ~"min(48rem, 100%)";
     gap: var(--field-gap);
 
     > .item {

luci-theme-argon/less/pages/wol.less

@@ -0,0 +1,34 @@
+// out: false
+
+// Wake on LAN uses custom content outside the standard form field layout.
+[data-page="admin-services-wol"] {
+    #cbi-luci-wol-defaults-_info {
+        padding-bottom: var(--field-gap);
+        line-height: 1.5;
+
+        > output {
+            width: 100%;
+            min-width: 0;
+        }
+
+        output p {
+            padding: 0;
+        }
+
+        .control-group {
+            margin-block-start: var(--control-gap);
+        }
+    }
+
+    .cbi-section:has(> #wol-output-text) {
+        padding-bottom: var(--field-gap);
+    }
+
+    #wol-output-text {
+        display: block;
+        // Override the application's inline width while preserving card insets.
+        width: calc(100% - var(--section-inset) - var(--section-inset)) !important;
+        margin-inline: var(--section-inset);
+        resize: vertical;
+    }
+}