🎨 Sync 2026-10-09 01:04:17

luci-theme-argon/less/cascade.less

@@ -39,6 +39,7 @@
   --gray: #8898aa;
   --gray-dark: #32325d;
   --lighter: #e9ecef;
+  --table-border: thin solid #ddd;
   --success: #2dce89;
   --info: #11cdef;
   --warning: #fb6340;
@@ -323,8 +324,43 @@ select[multiple="multiple"] {
 }
 
 #maincontent > .alert-message {
-  position: fixed;
-  transform: translate(-50%, -50%);
+  // LuCI inserts notification banners before the view container.
+  position: static;
+  width: auto;
+  left: auto;
+  top: auto;
+  transform: none;
+  z-index: auto;
+  margin: 0 1.25rem 1rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+  line-height: 1.5;
+
+  > div {
+    min-width: 0;
+    margin: 0;
+  }
+
+  > div:first-child > * {
+    margin: 0;
+
+    + * {
+      margin-top: .75rem;
+    }
+  }
+
+  h4 {
+    padding: .5rem .75rem;
+  }
+
+  .btn {
+    max-width: 100%;
+    white-space: normal;
+  }
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+  }
 }
 
 .container .alert,
@@ -338,11 +374,6 @@ select[multiple="multiple"] {
   width: 100%;
 }
 
-#mwan3-service-status > .alert-message {
-  left: 0.5rem;
-  transform: none;
-}
-
 .lg {
   margin: 0;
   padding: 0 !important;
@@ -528,22 +559,11 @@ body:not([data-page="admin-dashboard"]) {
   .tr>.th,
   .cbi-section-table-row::before,
   #cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2) {
-    border-top: thin solid #ddd;
+    border-top: var(--table-border);
     padding: 1.1em 1.25rem;
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  body:not([data-page="admin-dashboard"]) {
-    tr>td,
-    tr>th,
-    .tr>.td,
-    .tr>.th {
-      border-top: thin solid #444 !important;
-    }
-  }
-}
-
 #cbi-wireless .td,
 .table[width="100%"]>.tr:first-child>.td,
 [data-page="admin-network-diagnostics"] .tr>.td,
@@ -1549,6 +1569,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
   border-left: thin solid #ccc;
 }
 
+// Empty selections use .more; list items stay hidden until the menu opens.
 .cbi-dropdown[empty]>ul {
   max-width: 1px;
 }
@@ -1612,7 +1633,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 
 }
 
-.cbi-dropdown[empty]>ul>li,
 .cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
 .cbi-dropdown[multiple][open]>ul.dropdown>li>form {
   display: block;

luci-theme-argon/less/dark.less

@@ -29,6 +29,11 @@
  */
 
 
+// Follow the active theme stylesheet, including forced dark mode.
+:root {
+    --table-border: 0;
+}
+
 body {
     background: #1e1e1e;
     color: #cccccc;
@@ -833,18 +838,14 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
             border-color: #fff !important;
         }
 
-        .btn {
-            white-space: normal !important;
-            background-color: darkseagreen;
-        }
-
         .alert-message {
             background-color: transparent !important;
         }
 
         .danger {
             border: thin solid darkorange !important;
-            background-color: darkorange !important;
+            background-color: #784f00 !important;
+            color: #fff;
         }
     }
 }
@@ -1081,6 +1082,30 @@ input,
     }
 }
 
+// The switch-vlan page uses Bootstrap variables and its own dark-mode marker.
+// Map its palette here so forced and system-following Argon modes both work.
+[data-page="admin-network-switch-vlan"] #switch-vlan-view {
+    --background-color-medium: #252526;
+    --background-color-high: #333;
+    --text-color-high: #ccc;
+    --text-color-low: #adb5bd;
+    --border-color-low: #3c3c3c;
+    --border-color-medium: #515151;
+    --border-color-high: #8898aa;
+    --primary-color-high: var(--dark-primary);
+    --svc-port-selected-bg: #34314b;
+    --svc-port-selected-hover-bg: #413c60;
+    --svc-port-selected-border: #a5b2ff;
+    --svc-port-selected-ring: rgba(165, 178, 255, 0.28);
+    --svc-vlan-untagged: #2dd4bf;
+    --svc-vlan-tagged: #fbbf24;
+    --svc-vlan-untagged-bg: rgba(45, 212, 191, 0.08);
+    --svc-vlan-tagged-bg: rgba(251, 191, 36, 0.1);
+    --svc-vlan-untagged-stripe: rgba(45, 212, 191, 0.16);
+    --svc-vlan-tagged-stripe: rgba(251, 191, 36, 0.18);
+    --svc-vlan-checked-text: #1e1e1e;
+}
+
 [data-page="admin-network-diagnostics"] {
     .cbi-section {
         background: #252526 !important;

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

@@ -156,6 +156,14 @@
 
 // System - Flash Firmware
 [data-page="admin-system-flash"] {
+    // Upgrade options use button-styled labels with multiline text.
+    .modal .btn {
+        height: auto;
+        min-height: 2.5rem;
+        max-width: 100%;
+        white-space: normal;
+    }
+
     .cbi-value {
         padding: 0 1rem;
     }
@@ -445,6 +453,86 @@
     }
 }
 
+// Network - Switch / VLAN (LuCI's page stylesheet loads after the theme)
+[data-page="admin-network-switch-vlan"] #switch-vlan-view {
+    --background-color-medium: #f4f5f7;
+    --background-color-high: #fff;
+    --text-color-high: var(--gray-dark);
+    --text-color-low: #626b7a;
+    --border-color-low: #dee2e6;
+    --border-color-medium: #cbd5e1;
+    --border-color-high: #8898aa;
+    --primary-color-high: var(--primary);
+    --svc-row-bg: var(--background-color-medium);
+    --svc-row-hover-bg: var(--background-color-high);
+    --svc-row-add-bg: var(--background-color-medium);
+    --svc-port-selected-bg: #e8ecff;
+    --svc-port-selected-hover-bg: #dfe4ff;
+    --svc-port-selected-border: var(--primary);
+    --svc-port-selected-ring: rgba(94, 114, 228, 0.28);
+    --svc-vlan-tagged: #8c4800;
+    --svc-vlan-untagged: #06685f;
+    --svc-vlan-checked-text: #fff;
+
+    color: var(--text-color-high);
+
+    input[type="text"],
+    input[type="number"] {
+        background-color: var(--background-color-high) !important;
+
+        &::placeholder {
+            color: var(--text-color-low);
+            opacity: 1;
+        }
+
+        &:focus {
+            border-color: var(--primary-color-high) !important;
+        }
+    }
+
+    .svc-port-tile.selected:hover {
+        background: var(--svc-port-selected-hover-bg);
+        border-color: var(--svc-port-selected-border);
+    }
+
+    .svc-vlan-btn-tagged,
+    .svc-vlan-btn-assign-tagged {
+        --svc-role-color: var(--svc-vlan-tagged);
+        --svc-role-bg: var(--svc-vlan-tagged-bg);
+        --svc-role-stripe: var(--svc-vlan-tagged-stripe);
+    }
+
+    .svc-vlan-btn-untagged,
+    .svc-vlan-btn-assign-untagged {
+        --svc-role-color: var(--svc-vlan-untagged);
+        --svc-role-bg: var(--svc-vlan-untagged-bg);
+        --svc-role-stripe: var(--svc-vlan-untagged-stripe);
+    }
+
+    // Preserve T/U colors against Argon's generic button color and border rules.
+    .svc-vlan-btn-tagged:not(:disabled),
+    .svc-vlan-btn-untagged:not(:disabled),
+    .svc-vlan-assign-btn:not(.svc-vlan-assign-disabled) {
+        color: var(--svc-role-color) !important;
+        border-color: var(--svc-role-color) !important;
+    }
+
+    .svc-vlan-assign-btn.svc-vlan-assign-checked {
+        background: var(--svc-role-color);
+        color: var(--svc-vlan-checked-text) !important;
+    }
+
+    .svc-vlan-assign-btn.svc-vlan-assign-mixed {
+        background: repeating-linear-gradient(135deg,
+            var(--svc-role-stripe) 0 0.5rem,
+            var(--svc-role-bg) 0.5rem 1rem);
+    }
+
+    .svc-vlan-assign-btn.svc-vlan-assign-checked .svc-vlan-btn-prefix {
+        color: inherit;
+    }
+}
+
 // Network - DHCP and DNS
 [data-page="admin-network-dhcp"] {
     .cbi-value {
@@ -592,6 +680,15 @@
     }
 }
 
+// Status - Channel Analysis
+[data-page="admin-status-channel_analysis"] [data-tab-title]:not([data-tab-active="true"]) {
+    // LuCI measures every band's graph before its tab is activated. Preserve
+    // the width of inactive panes while the shared tab rules collapse height.
+    display: block !important;
+    visibility: hidden;
+    padding: 0;
+}
+
 // Status - IPTables
 [data-page="admin-status-iptables"] {
     .right {
@@ -652,6 +749,24 @@
 }
 
 // Services - Dockerman
+[data-page="admin-docker-overview"] .cbi-section-table {
+    // Keep long JSON values inside the Version and Environment tables.
+    table-layout: fixed;
+
+    .th,
+    .td {
+        min-width: 0;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        text-align: left !important;
+        vertical-align: top;
+    }
+
+    .th:first-child {
+        width: 30% !important;
+    }
+}
+
 #cbi-dockerd {
     .cbi-section {
         box-sizing: border-box;
@@ -1475,15 +1590,21 @@ div[style*="display:grid;grid-template-columns:repeat"] {
     display: none;
 }
 
-// overview & mwan3
+// MultiWAN cards in the system overview and the mwan3 overview.
 #mwan3-service-status {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: flex-start;
+    align-items: stretch;
     flex-wrap: wrap;
-}
 
-#mwan3-service-status > .alert-message { 
-    position: static;
-    transform: none;
+    // Override mwan3.css even when the view loads it after the theme.
+    >div.alert-message {
+        position: static;
+        transform: none;
+        z-index: auto;
+        height: auto;
+        min-height: 6rem;
+        max-width: calc(100% - 2rem);
+        overflow-wrap: anywhere;
+    }
 }

luci-theme-argon/less/sysauth.less

@@ -278,3 +278,120 @@
         }
     }
 }
+
+// Keep all authentication markup shared; only the centered layout differs.
+.login-page[data-login-style="centered"] {
+    height: auto;
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding: 2rem 1rem;
+    box-sizing: border-box;
+    align-items: center;
+
+    .main-bg,
+    .video {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+    }
+
+    .login-container {
+        flex: 0 0 auto;
+        width: 26rem;
+        max-width: 100%;
+        height: auto;
+        margin: auto 0;
+        border-radius: .75rem;
+
+        .login-form {
+            min-height: 0;
+
+            .brand {
+                max-width: 100%;
+                margin: 0;
+                padding: 2rem 1.5rem 1.5rem;
+                box-sizing: border-box;
+                gap: 1rem;
+
+                .icon {
+                    width: 2.5rem;
+                    margin: 0;
+                    flex-shrink: 0;
+                }
+
+                .brand-text {
+                    min-width: 0;
+                    margin: 0;
+                    overflow-wrap: anywhere;
+                }
+            }
+
+            .form-login {
+                padding: 0 2rem;
+
+                .input-group input {
+                    margin: 0;
+                }
+
+                .errorbox {
+                    padding-bottom: 1.25rem;
+                    overflow-wrap: anywhere;
+                }
+
+                .auth-plugin {
+                    max-width: 100%;
+                    overflow-wrap: anywhere;
+                    overflow-x: auto;
+                }
+            }
+
+            .cbi-button-apply {
+                margin: .5rem 0 0;
+                padding: .75rem 1rem;
+                height: auto;
+                letter-spacing: .1rem;
+                white-space: normal;
+            }
+        }
+
+        footer {
+            position: static;
+            display: block;
+            width: auto;
+            margin: 0;
+            padding: 1.5rem 2rem;
+
+            > div {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .luci-link {
+                display: inline;
+            }
+
+            .login-footer-detail {
+                display: none;
+            }
+
+            a + a::before {
+                content: " · ";
+            }
+        }
+    }
+
+    @media screen and (max-width: 480px) {
+        padding: 1rem;
+
+        .login-container {
+            .login-form .form-login {
+                padding: 0 1.25rem;
+            }
+
+            footer {
+                padding: 1.25rem;
+            }
+        }
+    }
+}