💋 Sync 2026-10-16 23:55:30

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

@@ -0,0 +1,25 @@
+// out: false
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .main-left,
+  .main-right,
+  .main-bg,
+  .darkMask,
+  .login-page .input-group input,
+  .login-page .input-group .border {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}

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

@@ -0,0 +1,243 @@
+// out: false
+
+html.argon-theme-changing,
+html.argon-theme-changing *,
+html.argon-theme-changing *::before,
+html.argon-theme-changing *::after {
+  transition: none !important;
+}
+
+header .header-actions {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  margin-inline-start: auto;
+  gap: var(--action-gap);
+}
+
+#argon-appearance {
+  position: relative;
+  flex: 0 0 auto;
+  z-index: 60;
+
+  &[hidden],
+  [hidden] {
+    display: none;
+  }
+
+  .argon-appearance-trigger {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--radius-circle);
+    background: var(--surface-raised);
+    color: var(--text-strong);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color .15s ease-out;
+
+    &::before {
+      content: '';
+      width: 1rem;
+      height: 1rem;
+      background-color: currentColor;
+      mask: url('../icon/monitor.svg') center / contain no-repeat;
+    }
+
+    // Keep a 40px hit area around the smaller visible toolbar control.
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 2.5rem;
+      height: 2.5rem;
+      transform: translate(-50%, -50%);
+      border-radius: inherit;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus-ring);
+      outline-offset: -2px;
+    }
+
+    &[aria-expanded="true"] {
+      background-color: var(--surface-active);
+    }
+  }
+
+  &[data-mode="light"] .argon-appearance-trigger::before {
+    mask-image: url('../icon/sun.svg');
+  }
+
+  &[data-mode="dark"] .argon-appearance-trigger::before {
+    mask-image: url('../icon/moon.svg');
+  }
+
+  .argon-appearance-panel {
+    position: absolute;
+    inset-block-start: calc(100% + var(--control-gap));
+    inset-inline-end: 0;
+    width: 11rem;
+    max-width: calc(100vw - 2 * var(--page-gutter));
+    min-width: 0;
+    max-height: calc(100dvh - 5rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    // Inset the compact options evenly, including around the rounded corners.
+    padding: calc(var(--radius-card) - var(--radius-small) - 1px);
+    margin: 0;
+    color: var(--dropdown-text);
+    background: var(--surface-panel);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-card);
+    box-shadow: var(--dropdown-shadow);
+    font-size: .8125rem;
+    text-align: start;
+    opacity: 1;
+    transition: opacity .15s ease-out;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transform: translateY(0);
+      transition: opacity .2s cubic-bezier(.2, 0, 0, 1), transform .2s cubic-bezier(.2, 0, 0, 1);
+    }
+
+    .argon-appearance-option {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+      min-height: 2.125rem;
+      margin: 0;
+      padding: .375rem .5rem;
+      border-radius: var(--radius-small);
+      line-height: 1.5;
+      cursor: pointer;
+      transition: background-color .15s ease-out;
+
+      & + .argon-appearance-option {
+        margin-block-start: .25rem;
+      }
+
+      @media (pointer: coarse) {
+        min-height: 2.5rem;
+      }
+
+      &::before,
+      &::after {
+        content: '';
+        flex-shrink: 0;
+        background-color: currentColor;
+      }
+
+      &::before {
+        width: 1rem;
+        height: 1rem;
+        mask: url('../icon/monitor.svg') center / contain no-repeat;
+      }
+
+      &[data-mode="light"]::before {
+        mask-image: url('../icon/sun.svg');
+      }
+
+      &[data-mode="dark"]::before {
+        mask-image: url('../icon/moon.svg');
+      }
+
+      &::after {
+        width: .75rem;
+        height: .75rem;
+        mask: url('../icon/check.svg') center / contain no-repeat;
+        visibility: hidden;
+      }
+
+      > span {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+
+      &:has(input:checked) {
+        color: var(--dropdown-selected-text);
+        background: var(--dropdown-selected-bg);
+
+        &::after {
+          visibility: visible;
+        }
+      }
+
+      &:has(input:focus-visible) {
+        outline: 2px solid var(--focus-ring);
+        outline-offset: -2px;
+      }
+
+      &:has(input:disabled) {
+        cursor: default;
+        opacity: .6;
+      }
+    }
+
+    input[type="radio"] {
+      // Keep native radio semantics and arrow keys; the row draws its focus.
+      outline: none;
+      box-shadow: none;
+    }
+
+    p {
+      margin: var(--control-gap) .75rem;
+      color: var(--muted-text);
+      font-size: .875rem;
+      line-height: 1.5;
+    }
+  }
+
+  @media (hover: hover) {
+    .argon-appearance-trigger:hover {
+      background-color: var(--surface-active);
+    }
+
+    .argon-appearance-option:has(input:not(:disabled)):not(:has(input:checked)):hover {
+      background: var(--dropdown-hover-bg);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .argon-appearance-trigger {
+      transition: scale .15s ease-out, background-color .15s ease-out;
+
+      &:active {
+        scale: .96;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    .argon-appearance-trigger::before,
+    .argon-appearance-option::before,
+    .argon-appearance-option::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+}
+
+// Explicit selectors keep these rules scoped when compiled with Less 4.
+// Native hidden semantics still remove the closed menu from focus and hit testing.
+@starting-style {
+  #argon-appearance .argon-appearance-panel {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @starting-style {
+    #argon-appearance .argon-appearance-panel {
+      transform: translateY(-.375rem);
+    }
+  }
+}

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

@@ -0,0 +1,253 @@
+// out: false
+
+.btn,
+.cbi-button,
+.item::after {
+  font-size: .875rem;
+  line-height: 1.25rem;
+  display: inline-block;
+  width: auto !important;
+  padding: 0.5rem .75rem;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition: box-shadow .15s ease-out;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-decoration: none;
+  border: 0;
+  border-radius: var(--radius-control);
+  background-color: var(--neutral-button-bg);
+  background-image: none;
+  appearance: none;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+
+.btn {
+  color: var(--plain-button-text);
+  background-color: var(--plain-button-bg);
+}
+
+.btn:not(button) ul:not(.dropdown) li {
+  padding: 0;
+}
+
+.cbi-button:not(select) {
+  appearance: none !important;
+}
+
+@media (hover: hover) {
+  :is(.btn, .cbi-button):not(:disabled):not([disabled]):not([aria-disabled="true"]):not([disabled] *, [aria-disabled="true"] *):hover,
+  .cbi-dynlist:not([disabled]):not([aria-disabled="true"]) > .item:hover::after {
+    box-shadow: var(--button-hover-shadow);
+  }
+}
+
+.btn:disabled,
+.cbi-button:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: .5;
+  box-shadow: none;
+}
+
+.btn:focus-visible,
+.cbi-button:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  button.btn,
+  button.cbi-button,
+  input.cbi-button {
+    transition: scale .15s ease-out, box-shadow .15s ease-out;
+
+    &:not(:disabled):not([aria-disabled="true"]):not([data-static]):active {
+      scale: .96;
+    }
+  }
+}
+
+/* gray */
+.alert-message [class="btn"],
+.modal div[class="btn"],
+.cbi-button-find,
+.cbi-button-link,
+.cbi-button-up,
+.cbi-button-down,
+.cbi-button-neutral,
+.cbi-button[name="zero"],
+.cbi-button[name="restart"],
+.cbi-button[onclick="hide_empty(this)"] {
+  color: var(--neutral-action-text);
+  border: thin solid var(--neutral-action-bg);
+  background-color: var(--neutral-action-bg);
+}
+
+/* dark blue */
+.btn.primary,
+.cbi-page-actions .cbi-button-save,
+.cbi-page-actions .cbi-button-apply+.cbi-button-save,
+.cbi-button-add,
+.cbi-button-save,
+.cbi-button-positive,
+.cbi-button-link,
+.cbi-button[value="Enable"],
+.cbi-button[value="Scan"],
+.cbi-button[value^="Back"],
+.cbi-button-neutral[onclick="handleConfig(event)"] {
+  font-weight: normal;
+  color: var(--accent-text) !important;
+  // Button edges follow their fill; the brighter accent border is for controls.
+  border: thin solid var(--button-bg, var(--primary));
+  background-color: var(--button-bg, var(--primary));
+}
+
+.cbi-page-actions .cbi-button-save,
+.cbi-page-actions .cbi-button-apply+.cbi-button-save,
+.cbi-button-add,
+.cbi-button-save,
+.cbi-button-positive {
+  --button-bg: var(--positive-bg);
+}
+
+/* light blue */
+.cbi-page-actions .cbi-button-apply,
+.cbi-section-actions .cbi-button-edit,
+.cbi-button-edit,
+.cbi-button-apply,
+.cbi-button-reload,
+.cbi-button-action,
+.cbi-button[value="Submit"],
+.cbi-button[value="Upload"],
+.cbi-button[value$="Apply"],
+.cbi-button[onclick="addKey(event)"] {
+  font-weight: normal;
+  color: var(--accent-text) !important;
+  border: thin solid var(--primary);
+
+  background-color: var(--primary);
+}
+
+/* red */
+.btn.danger,
+.btn.btn-danger,
+.cbi-section-remove>.cbi-button,
+.cbi-button-remove,
+.cbi-button-reset,
+.cbi-button-negative,
+.cbi-button[value="Stop"],
+.cbi-button[value="Kill"],
+.cbi-button[onclick="reboot(this)"],
+.cbi-button-neutral[value="Restart"] {
+  font-weight: normal;
+  color: var(--text-on-accent);
+  border: thin solid var(--negative-bg);
+  background-color: var(--negative-bg);
+}
+
+/* yellow */
+.cbi-button-reset {
+  border-color: var(--reset-action-bg);
+  background-color: var(--reset-action-bg);
+}
+
+.btn[value="Dismiss"],
+.cbi-button[value="Terminate"],
+.cbi-button[value="Reset"],
+.cbi-button[value="Disabled"],
+.cbi-button[onclick^="iface_reconnect"],
+.cbi-button[onclick="handleReset(event)"],
+.cbi-button-neutral[value="Disable"] {
+  font-weight: normal;
+  color: var(--text-on-accent);
+  border: thin solid var(--reset-border);
+  background-color: var(--reset-bg);
+}
+
+/* green */
+.cbi-button-success,
+.cbi-button-download {
+  font-weight: normal;
+  color: var(--text-on-accent);
+  border: thin solid var(--success-action-border);
+  background-color: var(--success-action-bg);
+}
+
+// Inputs cannot host pseudo-elements, so sorting controls use the SVG background.
+.cbi-button-up,
+.cbi-button-down {
+  display: inline-block;
+  min-width: 0;
+  padding: .2rem 1rem;
+  font-size: 0;
+  background-image: var(--chevron-down-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1rem;
+  background-color: var(--surface-color);
+  border-color: var(--border-color);
+}
+
+.cbi-button-up {
+  transform: rotate(180deg);
+}
+
+.cbi-page-actions,
+.button-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  gap: var(--action-gap);
+
+  .btn,
+  .cbi-button {
+    max-width: 100%;
+    min-height: 2.5rem;
+    height: auto;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+}
+
+.cbi-page-actions {
+  // The containing view already owns the page gutter and section spacing.
+  padding: 0;
+  gap: var(--control-gap);
+
+  .cbi-button-link:first-child {
+    margin-inline-end: auto;
+  }
+
+  > form[method="post"] {
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+    max-width: 100%;
+    gap: inherit;
+  }
+
+  .cbi-dropdown {
+    .open {
+      color: var(--accent-text);
+    }
+  }
+}
+
+.a-to-btn {
+  text-decoration: none;
+}
+
+.cbi-value-field .cbi-button-add {
+  font-weight: bold;
+  padding: 1px 6px;
+  display: inline-block;
+  align-items: center;
+}

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

@@ -0,0 +1,170 @@
+// out: false
+
+.uci-change-list {
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: .8125rem;
+  line-height: 1.6;
+  min-width: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--control-gap);
+}
+
+.uci-change-list ins,
+.uci-change-legend-label ins {
+  display: block;
+  padding: 2px;
+  text-decoration: none;
+  border: thin solid var(--change-added-border);
+  background-color: var(--change-added-bg);
+}
+
+.uci-change-list del,
+.uci-change-legend-label del {
+  font-style: normal;
+  display: block;
+  padding: 2px;
+  text-decoration: none;
+  border: thin solid var(--change-removed-border);
+  background-color: var(--change-removed-bg);
+}
+
+.uci-change-list var,
+.uci-change-legend-label var {
+  font-style: normal;
+  display: block;
+  padding: 2px;
+  text-decoration: none;
+  border: thin solid var(--change-modified-border);
+  background-color: var(--change-modified-bg);
+}
+
+.uci-change-list var ins,
+.uci-change-list var del {
+  font-style: normal;
+  padding: 0;
+  white-space: pre-wrap;
+  border: 0;
+}
+
+.uci-change-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--control-gap) var(--field-gap);
+  padding: var(--control-gap);
+}
+
+.uci-change-legend-label {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 1 150px;
+  min-width: 0;
+  gap: .25rem;
+  overflow-wrap: anywhere;
+}
+
+.uci-change-legend-label>ins,
+.uci-change-legend-label>del,
+.uci-change-legend-label>var {
+  display: block;
+  flex: 0 0 auto;
+  width: 10px;
+  height: 10px;
+}
+
+.uci-change-legend-label var ins,
+.uci-change-legend-label var del {
+  line-height: .4;
+  border: 0;
+}
+
+.uci-change-list > :is(var, del, ins) {
+  padding: .5rem .75rem;
+  border-radius: var(--radius-panel);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  direction: ltr;
+  text-align: left;
+  unicode-bidi: isolate;
+}
+
+.uci-dialog {
+  // This is the dialog body, not a second elevated card.
+  > .cbi-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+    min-width: 0;
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    line-height: inherit;
+
+    > br {
+      display: none;
+    }
+
+    > .button-row {
+      padding-block-start: var(--control-gap);
+    }
+  }
+
+  .uci-change-legend {
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .uci-change-legend-label {
+    flex: 0 1 auto;
+    gap: var(--control-gap);
+    padding: 0;
+    margin: 0;
+
+    > ins,
+    > del,
+    > var {
+      width: 14px;
+      height: 14px;
+    }
+
+    > var {
+      position: relative;
+
+      ins,
+      del {
+        position: absolute;
+        inset: 2px;
+      }
+    }
+  }
+
+  .uci-change-list {
+    > h5 {
+      margin: var(--field-gap) 0 0;
+      padding: 0;
+      font-size: inherit;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+      direction: ltr;
+      text-align: left;
+      unicode-bidi: isolate;
+
+      &:first-child {
+        margin-block-start: 0;
+      }
+    }
+
+    > br {
+      display: none;
+    }
+  }
+
+  .button-row > .btn.cbi-button:not([class*="cbi-button-"]) {
+    color: var(--text-strong);
+    border: 1px solid var(--border-color);
+    background-color: var(--surface-muted);
+  }
+}

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

@@ -0,0 +1,145 @@
+// out: false
+
+// Network and zone choices share the same compact badges in every view.
+.cbi-dropdown > ul {
+  .zonebadge {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .25rem;
+    min-width: 0;
+    max-width: 100%;
+    padding: .125rem .5rem;
+    line-height: 1.5;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .ifacebadge {
+    flex-wrap: wrap;
+    gap: .375rem;
+    min-width: 0;
+    max-width: 100%;
+    margin: 0;
+    padding: 0 .25rem;
+    line-height: 1.5;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  > li img {
+    flex: 0 0 1.25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: 0;
+    object-fit: contain;
+  }
+
+  // Native device choices are either direct children or inside a multiselect label.
+  > li:has(> img),
+  > li > label:has(> img) {
+    column-gap: .5rem;
+    min-width: 0;
+    line-height: 1.5;
+    white-space: normal;
+    overflow-wrap: anywhere;
+
+    > span {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
+}
+
+.cbi-dropdown:not(.btn):not(.cbi-button):has(> ul .zonebadge, > ul .ifacebadge, > ul img) {
+  min-height: 2.5rem;
+  padding-block: .25rem;
+
+  > ul:not(.dropdown) > li {
+    min-height: 1.5rem;
+    padding-block: 0;
+  }
+}
+
+// One expanded-menu surface for Dropdown, Combobox and ComboButton.
+.cbi-dropdown[open] > ul.dropdown {
+  position: absolute;
+  z-index: 1100;
+  display: block;
+  width: auto;
+  min-width: 100%;
+  max-width: 100vw;
+  max-height: 18rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  margin: .25rem 0;
+  left: 0;
+  // 8px panel = 4px option + 3px inset + 1px border at the default scale.
+  padding: calc(var(--radius-panel) - var(--radius-small) - 1px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-panel);
+  background: var(--surface-panel);
+  box-shadow: var(--dropdown-shadow);
+  color: var(--dropdown-text);
+  font-size: .875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: start;
+
+  > li {
+    min-width: 0;
+    min-height: 2.5rem;
+    padding: .5rem .75rem;
+    border: 0;
+    border-radius: var(--radius-small);
+    background: transparent;
+    color: inherit;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+
+    > label {
+      flex: 1 1 auto;
+      min-width: 0;
+      margin-inline-start: .5rem;
+    }
+
+    // Keep wrapped descriptions in one text column, with the icon on its first line.
+    &:has(> img),
+    > label:has(> img) {
+      align-items: flex-start;
+
+      > img {
+        margin-block-start: ~"max(0px, calc((1.5em - 1.25rem) / 2))";
+      }
+    }
+
+    input.create-item-input {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    &[selected] {
+      background: var(--dropdown-selected-bg);
+      color: var(--dropdown-selected-text);
+      font-weight: 500;
+    }
+
+    // LuCI's focus class tracks hover and keyboard movement independently of selection.
+    &.focus:not([selected]):not([unselectable]) {
+      background: var(--dropdown-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--link-color);
+      outline-offset: -2px;
+    }
+
+    &[unselectable]:not(:has(input.create-item-input)) {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -0,0 +1,282 @@
+// out: false
+
+// alert
+
+.danger {
+  background-color: var(--danger-bg) !important;
+  color: var(--feedback-text);
+}
+
+.warning {
+  background-color: var(--warning-bg) !important;
+  color: var(--feedback-text);
+}
+
+.success {
+  background-color: var(--success-bg) !important;
+  color: var(--feedback-text);
+}
+
+.notice {
+  background-color: var(--notice-bg) !important;
+  color: var(--notice-text);
+}
+
+.error {
+  color: var(--danger);
+}
+
+.alert,
+.alert-message {
+  position: fixed;
+  width: 20rem;
+  z-index: 9000;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: bold;
+  padding: var(--field-gap) var(--section-inset);
+  border: 0;
+  border-radius: var(--radius-panel) !important;
+  background-color: var(--surface-raised);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
+  text-shadow: none;
+
+  &.error {
+    background-color: var(--error-bg);
+    color: var(--error-text);
+  }
+
+  h4 {
+    background-color: var(--feedback-heading-bg);
+    color: var(--feedback-heading-text);
+    padding: 0.25rem 0rem;
+    border-radius: var(--radius-small);
+  }
+
+  .btn {
+    height: auto;
+  }
+}
+
+.modal.alert-message {
+  // LuCI uses this dialog for apply/confirm/rollback status updates.
+  --status-accent: var(--link-color);
+  --spinner-accent: var(--status-accent);
+  position: static;
+  // An explicit width also preserves the modal's container-query layout.
+  width: calc(100% - 2 * var(--page-gutter));
+  min-width: 0;
+  max-width: 32rem;
+  min-height: 3.5rem;
+  left: auto;
+  top: auto;
+  transform: none;
+  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-radius: var(--radius-dialog) !important;
+  background-color: var(--surface-raised) !important;
+  color: var(--text-strong);
+  box-shadow: var(--section-shadow);
+  font-size: .875rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.6;
+
+  &.warning {
+    --status-accent: var(--warning-heading-color);
+  }
+
+  &.error,
+  &.danger {
+    --status-accent: var(--danger);
+  }
+
+  &.success {
+    --status-accent: var(--success);
+  }
+
+  > * {
+    min-width: 0;
+    margin: 0;
+  }
+
+  > h4 {
+    padding: 0;
+    background: none;
+    color: inherit;
+    font-size: 1rem;
+    font-weight: 600;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &.spinning {
+    // Reserve an actual column for the icon instead of overlapping the prose.
+    display: grid;
+    grid-template-columns: var(--spinner-size) minmax(0, 1fr);
+    align-items: center;
+    column-gap: var(--action-gap);
+    padding: var(--field-gap) var(--section-inset) !important;
+
+    > * {
+      grid-column: 2;
+    }
+
+    &::before {
+      position: static;
+      inset: auto;
+      grid-column: 1;
+      grid-row: 1;
+    }
+  }
+}
+
+// Notification surfaces keep their inset around the shared loading icon.
+.alert-message.spinning:not(.modal) {
+  --spinner-inset: var(--section-inset);
+  --spinner-accent: currentColor;
+  --spinner-track: color-mix(in srgb, currentColor 25%, transparent);
+  position: relative;
+  inset: auto;
+}
+
+/* LuCI's ui.js dismisses notification banners by adding the .fade-out
+   class and removing the banner node once a transitionend event fires
+   on it. Without a transitioned opacity on .alert-message the Dismiss
+   button has no visible effect and the banner stays open forever. */
+.alert-message {
+  transform: none;
+  position: static;
+  transition: opacity .4s ease;
+
+  &.fade-out {
+    opacity: 0;
+  }
+
+  &.fade-in {
+    animation: alert-message-fade-in .4s ease;
+  }
+}
+
+.alert-message>h4 {
+  font-size: 110%;
+  font-weight: bold;
+}
+
+.alert-message>* {
+  margin: .5rem 0;
+}
+
+.alert-message .btn {
+  padding: .3rem .6rem;
+}
+
+@keyframes alert-message-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+#maincontent > .alert-message {
+  // LuCI inserts notification banners before the view container.
+  position: static;
+  width: auto;
+  left: auto;
+  top: auto;
+  transform: none;
+  z-index: auto;
+  margin: 0 var(--page-gutter) var(--section-gap);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--field-gap);
+  line-height: 1.5;
+
+  &.spinning {
+    // The icon follows the message when actions wrap below it on narrow screens.
+    display: grid !important;
+    grid-template-columns: var(--spinner-size) minmax(0, 1fr) auto;
+    align-items: center;
+    column-gap: var(--action-gap);
+    padding: var(--field-gap) var(--section-inset) !important;
+    position: relative;
+
+    &::before {
+      position: static;
+      inset: auto;
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    > div:first-child {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    > div:last-child {
+      grid-column: 3;
+      grid-row: 1;
+    }
+
+    @media screen and (max-width: 600px) {
+      grid-template-columns: var(--spinner-size) minmax(0, 1fr);
+
+      > div:last-child {
+        grid-column: 2;
+        grid-row: 2;
+        justify-self: end;
+      }
+    }
+  }
+
+  > 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;
+    align-items: stretch;
+  }
+}
+
+.container .alert,
+.container .alert-message {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0rem;
+  position: relative;
+  top: 0;
+  transform:translate(-50%, 0);
+  width: 100%;
+}
+
+.lg {
+  margin: 0;
+  padding: 0 !important;
+}

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

@@ -0,0 +1,364 @@
+// out: false
+
+:root {
+  --form-label-width: 23rem;
+  --form-label-padding: 2rem;
+  --form-control-min-width: 18rem;
+  --form-control-width: auto;
+}
+
+.cbi-section-node {
+  display: flex;
+  flex-direction: column;
+  gap: var(--field-gap);
+
+  >[id^="cbi-config-"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+
+    &:first-child {
+      padding-top: 1rem;
+    }
+
+    &:last-child {
+      padding-bottom: 1rem;
+    }
+  }
+
+  >[id^="cbi-argon-"]:first-child {
+    padding-top: 1rem;
+  }
+
+  >[id^="cbi-argon-"]:last-child {
+    padding-bottom: 1rem;
+  }
+}
+
+.cbi-section .cbi-section-remove:nth-of-type(2n),
+.container>.cbi-section .cbi-section-node:nth-of-type(2n) {
+  background-color: var(--row-alt);
+}
+
+[data-tab-title] {
+  overflow: hidden;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  display: none !important;
+
+  p {
+    margin-inline-start: var(--section-inset);
+    margin-bottom: var(--field-gap);
+  }
+}
+
+[data-tab-active="true"] {
+  overflow: visible;
+  height: auto;
+  opacity: 1;
+  display: inherit !important;
+  transition: opacity .15s ease-in;
+  margin: inherit !important;
+}
+
+.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
+.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) {
+  background-color: var(--row-alt);
+}
+
+.cbi-section-node-tabbed {
+  margin-top: 0;
+  border: 0 solid #d4d4d4;
+  border-radius: 0 0 var(--radius-card) var(--radius-card);
+
+  // Tab content shares the outer card instead of drawing another rounded card.
+  > [data-tab-title] {
+    // Form fields need an inset; section headings and tables manage their own.
+    padding-block: var(--field-gap);
+    border-radius: inherit;
+    box-shadow: none;
+  }
+
+  &>div {
+    display: flex;
+
+    flex-direction: column;
+    gap: var(--field-gap);
+  }
+}
+
+.cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
+  background-color: var(--row-alt);
+}
+
+.cbi-value-field {
+  min-width: 0;
+
+  & div+br {
+    display: none;
+  }
+}
+
+// SectionValue renders its section directly, without a field wrapper.
+// Give it the available cross-axis width when the form stacks its rows.
+.cbi-value[data-widget="CBI.ContainerValue"] > .cbi-section {
+  width: 100%;
+}
+
+.cbi-value-description {
+  line-height: 1.5;
+  display: block;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  padding: .5rem 0;
+  color: var(--muted-text);
+  font-size: 0.75rem;
+
+  abbr {
+    color: var(--text-strong);
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+.cbi-value-title {
+  width: var(--form-label-width);
+  max-width: 100%;
+  padding-block: .5rem;
+  padding-inline-end: var(--form-label-padding);
+  line-height: 1.5;
+  text-align: end;
+  overflow-wrap: anywhere;
+}
+
+.cbi-value {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 0;
+  padding: 0 var(--section-inset);
+  line-height: 2.4rem;
+
+  > .cbi-value-title {
+    flex: 0 0 var(--form-label-width);
+  }
+
+  > .cbi-value-field {
+    flex: 1 1 0;
+  }
+
+  ul {
+    line-height: 1.25;
+  }
+}
+
+.cbi-value-field.cbi-dropdown-open {
+  .cbi-dropdown {
+    border-color: var(--control-focus);
+    box-shadow: var(--control-focus-shadow);
+  }
+}
+
+.cbi-value-field .cbi-dropdown,
+.cbi-value-field .cbi-input-select,
+.cbi-value input[type="text"],
+.cbi-value input[type="password"],
+.cbi-value textarea {
+  width: var(--form-control-width);
+  max-width: 100%;
+  // Preserve the CSS function: LESS otherwise reduces this to 100%.
+  min-width: ~"min(100%, var(--form-control-min-width))";
+}
+
+// The map has a definite width, so size containment cannot collapse a flex item.
+@container (max-width: 40rem) {
+  .cbi-value {
+    flex-direction: column;
+
+    > .cbi-value-title,
+    > .cbi-value-field {
+      flex: 0 1 auto;
+      width: 100%;
+    }
+
+    > .cbi-value-title {
+      padding-inline-end: 0;
+      text-align: start;
+    }
+  }
+}
+
+// Joined inputs shrink before their reveal/action button; other groups wrap.
+.control-group {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  min-width: 0;
+  gap: var(--control-gap);
+
+  > * {
+    max-width: 100%;
+  }
+}
+
+.control-group:has(> input:first-child + .cbi-button) {
+  flex-wrap: nowrap;
+  gap: 0;
+
+  > input {
+    flex: 0 1 15.5rem;
+    min-width: 0;
+    border-inline-end-width: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    margin-inline-end: 0;
+  }
+
+  > input + .cbi-button {
+    flex: 0 0 auto;
+    border-inline-start-width: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    margin-inline-start: 0;
+  }
+
+  > .cbi-input-password + .cbi-button {
+    flex-basis: 2.5rem;
+    padding-inline: 0;
+  }
+}
+
+#cbi-firewall-zone .cbi-input-select,
+#cbi-network-switch_vlan .cbi-input-select {
+  min-width: 11rem;
+}
+
+#cbi-network-switch_vlan .cbi-input-text {
+  max-width: 3rem;
+}
+
+.cbi-input-file {
+  appearance: auto !important;
+
+  &::-webkit-file-upload-button {
+    display: inline-block !important;
+  }
+}
+
+.cbi-input-invalid {
+  color: var(--danger) !important;
+  border-color: var(--danger) !important;
+}
+
+.cbi-section-error {
+  font-weight: bold;
+  line-height: 1.42857143;
+  margin: 18px;
+  padding: 6px;
+  border: thin solid var(--danger);
+  border-radius: var(--radius-panel);
+  background-color: var(--invalid-bg);
+}
+
+.cbi-section-error ul {
+  margin: 0 0 0 20px;
+}
+
+.cbi-section-error ul li {
+  font-weight: bold;
+  color: var(--danger);
+}
+
+.td[data-title]::before {
+  font-weight: bold;
+  display: none;
+  padding: .25rem 0;
+  content: attr(data-title) ":\20";
+  text-align: left;
+  white-space: nowrap;
+}
+
+.tr.placeholder .td[data-title]::before {
+  display: none;
+}
+
+.tr[data-title]::before,
+.tr.cbi-section-table-titles.named::before {
+  font-weight: bold;
+  display: table-cell;
+  align-self: center;
+  flex: 1 1 5%;
+  padding: .25rem;
+  content: attr(data-title) "\20";
+  text-align: center;
+  vertical-align: middle;
+  white-space: normal;
+  word-wrap: break-word;
+  background-color: var(--surface-muted);
+}
+
+.cbi-rowstyle-1 {
+  background-color: var(--row-color);
+}
+
+.cbi-rowstyle-2 {
+  background-color: var(--row-alt);
+}
+
+.cbi-rowstyle-2 .cbi-button-up,
+.cbi-rowstyle-2 .cbi-button-down,
+body:not(.Interfaces) .cbi-rowstyle-2:first-child {
+  background-color: var(--surface-color) !important;
+}
+
+.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
+  width: auto !important;
+}
+
+.td.cbi-section-actions,
+.td:has(> :is(.btn, .cbi-button):only-child) {
+  // Let the controls determine the minimum column width, including their gaps.
+  // LuCI also writes a measured width inline, which can preserve a wrapped size.
+  width: 1% !important;
+  white-space: nowrap;
+  text-align: end !important;
+  vertical-align: middle;
+}
+
+.td.cbi-section-actions > :not(.btn, .cbi-button) {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  width: max-content;
+  margin-inline-start: auto;
+  gap: var(--control-gap);
+}
+
+.td.cbi-section-actions > :not(.btn, .cbi-button) > *,
+.td.cbi-section-actions > :not(.btn, .cbi-button) > form > * {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.td.cbi-section-actions > :not(.btn, .cbi-button) > form {
+  display: inline-flex;
+  gap: inherit;
+  margin: 0;
+}
+
+.td .cbi-checkbox {
+  justify-content: center;
+}
+
+.cbi-checkbox {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+}

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

@@ -0,0 +1,61 @@
+// out: false
+
+// Generic controls precede login, header and component variants.
+.btn,
+button,
+select,
+input,
+.cbi-dropdown {
+  line-height: 1.5rem;
+  height: 2.5rem;
+  padding: .5rem .75rem;
+  color: var(--control-text);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-control);
+  outline: 0;
+  background-image: none;
+  box-shadow: none;
+  transition: box-shadow .15s ease;
+}
+
+select {
+  background-color: var(--select-bg);
+  padding-inline-end: 2.5rem;
+  background-image: var(--chevron-down-icon);
+  background-size: 1rem;
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  appearance: none;
+}
+
+input:not(.cbi-button) {
+  background-color: var(--input-bg);
+}
+
+.cbi-dropdown:not(.btn):not(.cbi-button) {
+  background-color: var(--dropdown-control-bg);
+}
+
+select:not([multiple="multiple"]):focus,
+input:not(.cbi-button):focus,
+textarea:focus,
+.cbi-dropdown:focus {
+  // Page-specific field borders also consume this locally focused role.
+  --control-border: var(--control-focus);
+  border-color: var(--control-focus);
+  box-shadow: var(--control-focus-shadow);
+}
+
+.cbi-dropdown,
+select[multiple="multiple"] {
+  height: auto;
+}
+
+select[multiple] {
+  padding-inline-end: .75rem;
+  background-image: none;
+}
+
+[dir="rtl"] select:not([multiple]) {
+  background-position: left .5rem center;
+}

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

@@ -0,0 +1,412 @@
+// out: false
+
+.cbi-dynlist {
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  line-height: 1.3;
+  flex-direction: column;
+  min-height: 30px;
+  cursor: text;
+  gap: var(--control-gap);
+
+  &>.item {
+    display: inline-flex;
+    // Native DynamicList removes an item only in its physical right hit area.
+    direction: ltr;
+    unicode-bidi: isolate;
+    flex-wrap: nowrap;
+    position: relative;
+    min-width: 0;
+    max-width: min(25rem, 100%);
+    pointer-events: none;
+    color: var(--muted-text);
+    outline: 0;
+
+    &::after {
+      flex: 0 0 2.5rem;
+      content: "\00D7";
+      pointer-events: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem !important;
+      height: 2.5rem;
+      margin: 0;
+      font-weight: normal;
+      font-size: 1rem;
+      line-height: 1.5rem;
+
+      color: var(--text-on-accent);
+      border: 1px solid var(--danger-bg);
+      border-radius: 0;
+      border-start-end-radius: var(--radius-control);
+      border-end-end-radius: var(--radius-control);
+      outline: 0;
+
+      background-color: var(--danger-bg);
+      background-image: none;
+      box-shadow: none;
+      box-sizing: border-box;
+    }
+
+    &>span {
+      display: block;
+      padding: 0.5rem 0.75rem;
+      box-sizing: border-box;
+      flex: 0 1 15.5rem;
+      min-width: 0;
+      width: 15.5rem;
+      height: 2.5rem;
+      transition: box-shadow 0.15s ease;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: text;
+
+      white-space: nowrap;
+      word-break: break-word;
+      line-height: 1.5em;
+
+      color: var(--muted-text);
+      border: 1px solid var(--border-color);
+      border-start-start-radius: var(--radius-control);
+      border-end-start-radius: var(--radius-control);
+      outline: 0;
+      background-image: none;
+      box-shadow: none;
+      box-sizing: border-box;
+      transition: box-shadow .15s ease;
+
+    }
+  }
+
+  &>.add-item {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    max-width: min(18rem, 100%);
+    flex-wrap: nowrap;
+
+    input {
+      flex: 1 1 15.5rem;
+      display: block;
+      padding: 0.5rem 0.75rem;
+      box-sizing: border-box;
+      min-width: 0;
+      width: 15.5rem;
+      transition: box-shadow 0.15s ease;
+
+      white-space: nowrap;
+      word-break: break-word;
+      font-size: .875rem;
+      line-height: 1.5rem;
+
+      color: var(--muted-text);
+      border: 1px solid var(--control-border);
+      // The join follows the list's UI direction, even for LTR data inputs.
+      border-radius: var(--radius-control) 0 0 var(--radius-control);
+      border-right-width: 0;
+
+      [dir="rtl"] &:first-child {
+        border-radius: 0 var(--radius-control) var(--radius-control) 0;
+        border-left-width: 0;
+        border-right-width: 1px;
+      }
+      outline: 0;
+      background-image: none;
+      box-shadow: none;
+    }
+
+    .cbi-button {
+      flex: 0 0 auto;
+      display: flex;
+      width: auto !important;
+      padding-left: 0.8rem;
+      padding-right: 0.8rem;
+      margin-left: 0;
+      align-items: center;
+      justify-content: center;
+
+      font-size: 0.875rem;
+      line-height: 1.5rem;
+
+      outline: 0;
+      background-image: none;
+      background-color: var(--action-muted-solid);
+      box-shadow: none;
+      color: var(--text-on-accent);
+      border-color: var(--action-muted-solid);
+      border-radius: 0;
+      border-start-end-radius: var(--radius-control);
+      border-end-end-radius: var(--radius-control);
+    }
+
+    .cbi-button-add {
+      width: 2.5rem !important;
+      padding: 0.5rem 0 !important;
+
+      font-weight: normal;
+      font-size: 1.2rem;
+
+      color: var(--accent-text);
+      background-color: var(--primary);
+      border: 1px solid var(--primary);
+    }
+
+    &:not([ondrop]) {
+      &>input {
+        overflow: hidden;
+        min-width: 0;
+        width: 15.5rem;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.cbi-dynlist>.item.drag-over,
+.cbi-dynlist>.add-item:has(.drag-over) {
+  border-top: 1px solid var(--danger);
+  margin-top: -1px;
+}
+
+.cbi-dynlist > .item:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-control);
+}
+
+.cbi-dynlist[name="sshkeys"]>.item {
+  max-width: none;
+}
+
+.cbi-dynlist>.cbi-dynlist>.add-item[ondrop]>input {
+  min-width: 13rem;
+}
+
+.cbi-dynlist,
+.cbi-dropdown {
+  position: relative;
+  display: inline-flex;
+  padding-right: 0.25rem;
+  min-height: 2.1875rem;
+}
+
+.cbi-dropdown {
+  align-items: center;
+}
+
+.cbi-dropdown.btn>ul:not(.dropdown),
+.cbi-dropdown.cbi-button>ul:not(.dropdown) {
+  margin: 0 0.75rem;
+}
+
+.cbi-dropdown[placeholder*="select"] {
+  max-width: 25rem;
+  height: auto;
+  margin-top: -3px;
+}
+
+.cbi-dropdown>ul {
+  display: flex;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  padding: 0;
+  list-style: none;
+  outline: 0;
+}
+
+.cbi-dropdown>ul.preview {
+  display: none;
+
+}
+
+.cbi-dropdown.cbi-button-apply,
+.cbi-dropdown.cbi-button-action {
+  padding: 0;
+}
+
+.cbi-button-apply>ul.preview {
+  display: none;
+
+  li {
+    color: var(--accent-text);
+  }
+
+}
+
+.cbi-button-apply>ul:first-child {
+  li {
+    color: var(--accent-text);
+  }
+
+}
+
+.cbi-dropdown>.open {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex: 0 0 2rem;
+  width: 2rem;
+  height: auto;
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+  font-size: 0;
+
+  // Mask the decorative glyph, keeping the entire span as the native hit area.
+  &::after {
+    content: "";
+    width: 1rem;
+    height: 1rem;
+    background-color: currentColor;
+    -webkit-mask: var(--dropdown-arrow-icon) center / contain no-repeat;
+    mask: var(--dropdown-arrow-icon) center / contain no-repeat;
+    pointer-events: none;
+  }
+}
+
+// Native LuCI ComboButton: the label applies, span.open opens the choices.
+.cbi-dropdown:is(.btn, .cbi-button):not([multiple]) {
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 2.5rem;
+  height: auto;
+  padding: 0;
+  line-height: 1.25rem;
+
+  > ul:not(.dropdown) {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+    min-height: calc(2.5rem - 2px);
+    margin: 0;
+    padding: .5rem .75rem;
+    overflow: visible;
+
+    > li {
+      padding: 0;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  // ComboButton has one selected action, so its overflow summary is unused.
+  > .more {
+    display: none;
+  }
+
+  > .open {
+    flex-basis: 2.5rem;
+    width: 2.5rem;
+    border-inline-start: 1px solid currentColor;
+  }
+}
+
+.cbi-dropdown>.more,
+.cbi-dropdown>ul>li[placeholder] {
+  display: none;
+}
+
+.cbi-dropdown>ul>li {
+  display: none;
+  overflow: hidden;
+  align-items: center;
+  align-self: center;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-height: 20px;
+  padding: 0.125rem .25em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+}
+
+.cbi-dropdown>ul>li .hide-open {
+  display: initial;
+}
+
+.cbi-dropdown>ul>li .hide-close {
+  display: none;
+}
+
+.cbi-dropdown>ul>li[display]:not([display="0"]) {
+  border-left: thin solid #ccc;
+}
+
+// Empty selections use .more; list items stay hidden until the menu opens.
+.cbi-dropdown[empty]>ul {
+  max-width: 1px;
+}
+
+.cbi-dropdown>ul>li>form {
+  display: none;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+
+.cbi-dropdown>ul>li img {
+  margin-right: .25em;
+  vertical-align: middle;
+}
+
+.cbi-dropdown>ul>li>form>input[type="checkbox"] {
+  height: auto;
+  margin: 0;
+}
+
+.cbi-dropdown>ul>li input[type="text"] {
+  height: 2rem;
+  min-width: 16rem;
+  padding: 0 .5rem;
+}
+
+.cbi-dropdown>ul>li[display],
+.cbi-dropdown[open]>ul.preview,
+.cbi-dropdown[open]>ul.dropdown>li,
+.cbi-dropdown[multiple]>ul>li>label,
+.cbi-dropdown[multiple][open]>ul.dropdown>li,
+.cbi-dropdown[multiple][more]>.more,
+.cbi-dropdown[multiple][empty]>.more {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+}
+
+.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
+.cbi-dropdown[multiple][open]>ul.dropdown>li>form {
+  display: block;
+}
+
+.cbi-dropdown[open]>ul.dropdown>li .hide-open {
+  display: none;
+}
+
+.cbi-dropdown[open]>ul.dropdown>li .hide-close {
+  display: initial;
+}
+
+.cbi-dropdown.cbi-button-positive>ul:not(.dropdown)>li[display="0"] {
+  color: var(--accent-text);
+}
+
+.cbi-dropdown[disabled] {
+  pointer-events: none;
+  opacity: .6;
+}
+
+.cbi-dropdown .zonebadge {
+  width: 100%;
+}
+
+.cbi-dropdown[open] .zonebadge {
+  width: auto;
+}

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

@@ -0,0 +1,51 @@
+// out: false
+
+// Shared by view loading, asynchronous actions, scans and status dialogs.
+.spinning {
+  --spinner-size: 1.125rem;
+  --spinner-inset: 0px;
+  --spinner-accent: var(--link-color);
+  --spinner-track: var(--border-color);
+  position: relative;
+  min-height: var(--spinner-size);
+  padding-inline-start: calc(var(--spinner-inset) + var(--spinner-size) + var(--action-gap)) !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block-start: calc(50% - var(--spinner-size) / 2);
+    inset-inline-start: var(--spinner-inset);
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    box-sizing: border-box;
+    border: 2px solid var(--spinner-track);
+    border-block-start-color: var(--spinner-accent);
+    border-radius: var(--radius-circle);
+    background: none;
+    filter: none;
+    pointer-events: none;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: argon-loading-spin .9s linear infinite;
+    }
+  }
+}
+
+em.spinning,
+span.spinning {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+:is(button, .btn, .cbi-button).spinning {
+  --spinner-inset: .75rem;
+  --spinner-accent: currentColor;
+  --spinner-track: color-mix(in srgb, currentColor 25%, transparent);
+}
+
+@keyframes argon-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,78 @@
+// out: false
+
+.th[data-type="button"],
+.td[data-type="button"],
+.th[data-type="fvalue"],
+.td[data-type="fvalue"] {
+  flex: 1 1 2em;
+  text-align: center;
+}
+
+.ifacebadge {
+  display: inline-flex;
+  align-items: center;
+  gap: .2rem;
+  padding: .25rem .8rem;
+
+  background: var(--badge-bg);
+  border-radius: var(--radius-small);
+}
+
+td>.ifacebadge,
+.td>.ifacebadge {
+  font-size: .875rem;
+}
+
+.ifacebadge>em,
+.ifacebadge>img {
+  display: inline-block;
+  margin: 0 0.75rem;
+}
+
+.ifacebadge>img+img {
+  margin: 0 .2rem 0 0;
+}
+
+.network-status-table {
+  display: flex;
+  flex-wrap: wrap;
+
+  .ifacebox {
+    flex-grow: 1;
+    border-radius: var(--radius-panel);
+    overflow: hidden;
+    margin: 1rem;
+  }
+
+  .ifacebox-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 0.5em;
+
+    >span {
+      flex: 10 10 auto;
+    }
+
+    >div {
+      display: flex;
+      flex-wrap: wrap;
+      gap: .5rem;
+      height: 100%;
+    }
+
+    .ifacebadge {
+      align-items: center;
+      flex: 1 1 auto;
+      min-width: 220px;
+      padding: .5em;
+      background-color: var(--surface-color);
+
+      >span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+// out: false
+
+// Inline keys, hashes and addresses must fit narrow cards and dialogs.
+code {
+  overflow-wrap: anywhere;
+}
+
+.cbi-input-textarea {
+  font-family: inherit;
+  width: 100%;
+  font-size: 0.875rem;
+  min-height: 14rem;
+  padding: .8rem;
+  color: var(--control-text);
+  background-color: var(--input-bg);
+  border-radius: var(--radius-control);
+  border: 1px solid var(--control-border);
+  min-width: 0;
+  max-width: 100%;
+}
+
+#content_syslog {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
+}
+
+#syslog {
+  font-size: small;
+  font-family: 'Google Sans';
+  line-height: 1.25;
+  overflow-y: hidden;
+  width: 100%;
+  min-height: 15rem;
+  padding: 1rem;
+  resize: none;
+  color: var(--log-text);
+  border: 0;
+  border-radius: var(--radius-panel);
+  background-color: var(--surface-color);
+
+}
+
+#syslog:focus {
+  outline: 0;
+}
+
+#cbi-ddns #syslog {
+  overflow: auto;
+}

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

@@ -0,0 +1,295 @@
+// out: false
+
+.cbi-progressbar {
+  position: relative;
+  display: flex;
+  width: 100%;
+  font-size: 0.75rem;
+  background: none;
+  border-radius: var(--radius-pill);
+  min-height: .5rem;
+  height: auto;
+  overflow: visible;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto;
+    height: .5rem;
+    border-radius: inherit;
+    background-color: var(--progress-bg);
+  }
+
+  &>div {
+    display: block;
+    position: absolute;
+    top: 0;
+    height: .5rem;
+    background-color: var(--progress-fill);
+    border-radius: inherit;
+  }
+
+  &::after {
+    content: attr(title);
+    direction: ltr;
+    unicode-bidi: isolate;
+    position: relative;
+    display: block;
+    font-size: 0.75rem;
+    color: var(--text-strong);
+    width: 100%;
+    padding-top: .75rem;
+    text-align: center;
+    line-height: 1.4;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    z-index: 2;
+  }
+}
+
+#modal_overlay {
+  position: fixed;
+  z-index: 900;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  transition: opacity .125s ease-in;
+  opacity: 0;
+  background: rgba(0, 0, 0, .7);
+  -webkit-overflow-scrolling: touch;
+}
+
+.modal {
+  --modal-inset: clamp(1rem, 3vw, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--field-gap);
+  width: calc(100% - 2 * var(--page-gutter));
+  min-width: 0;
+  max-width: 40rem;
+  min-height: 32px;
+  margin: clamp(1rem, 4vh, 2rem) auto;
+  padding: var(--modal-inset);
+  line-height: 1.6;
+  container-name: argon-modal;
+  container-type: inline-size;
+  border-radius: var(--radius-dialog) !important;
+  background: var(--surface-color);
+  box-shadow: var(--section-shadow);
+
+  &>* {
+    min-width: 0;
+    max-width: 100%;
+    margin: 0;
+    line-height: inherit;
+  }
+
+  &>pre,
+  &>textarea {
+    font-size: 1rem;
+    font-size-adjust: .35;
+    overflow: auto;
+    padding: 0.5rem;
+    cursor: auto;
+    white-space: pre-wrap;
+    color: var(--code-text);
+    outline: 0;
+    border-radius: var(--radius-control);
+    border: 1px solid var(--border-muted);
+    transition: box-shadow .15s ease;
+
+    &:focus {
+      border: 1px solid var(--control-focus);
+      box-shadow: var(--control-focus-shadow);
+    }
+  }
+
+  &>pre {
+    direction: ltr;
+    unicode-bidi: plaintext;
+  }
+
+  &>textarea {
+    border-color: var(--control-subtle-border);
+  }
+
+  &>h4 {
+    display: block;
+    padding: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+
+  h5 {
+    margin-top: 1rem;
+    font-weight: 600;
+  }
+
+  label>input[type="checkbox"] {
+    top: 0;
+  }
+
+  // Only prose lists get markers; tab bars and dropdowns are controls.
+  > ul:not(.cbi-tabmenu):not(.tabs) > li {
+    list-style-type: square;
+    color: var(--text-color);
+  }
+
+  p {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :is(div, section, article)>p+p {
+    margin-block-start: var(--field-gap);
+  }
+
+  .label {
+    font-size: .6rem;
+    font-weight: normal;
+    padding: .1rem .3rem;
+    padding-bottom: 0;
+    cursor: default;
+    border-radius: var(--radius-small);
+  }
+
+  .label.warning {
+    background-color: var(--warning-badge-bg) !important;
+  }
+
+  .btn {
+    padding: 0.45rem 0.8rem;
+  }
+
+  // LuCI uses both .button-row and .right for dialog actions.
+  .right:has(> :is(.btn, .cbi-button)),
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 0;
+    gap: var(--action-gap);
+
+    > .btn,
+    > .cbi-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+      max-width: 100%;
+      min-height: 2.5rem;
+      height: auto;
+      margin: 0;
+      white-space: normal;
+      overflow-wrap: anywhere;
+
+      &:focus-visible {
+        outline: 2px solid var(--control-focus);
+        outline-offset: 2px;
+      }
+    }
+
+    // Unclassified actions stay neutral; semantic action classes keep their colors.
+    > [class="btn"] {
+      color: var(--text-strong);
+      border: 1px solid var(--border-color);
+      background-color: var(--surface-muted);
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--surface-active);
+        }
+      }
+    }
+  }
+
+  > .right:has(> :is(.btn, .cbi-button)),
+  > .button-row {
+    padding-block-start: var(--control-gap);
+  }
+
+  &.cbi-modal {
+    max-width: 90%;
+    max-height: none;
+  }
+
+  // Brief notices, including LuCI's session-expiry prompt, need less space
+  // than forms and data tables. Match the native message/action structure.
+  &:has(> .alert-message + .right:last-child):not(:has(.cbi-map, .table, table, pre, textarea)) {
+    max-width: 32rem;
+  }
+
+  > .alert-message {
+    // Inline feedback is part of the dialog, rather than an elevated toast.
+    --dialog-feedback-accent: var(--link-color);
+    position: static;
+    inset: auto;
+    transform: none;
+    width: auto;
+    margin: 0;
+    padding: .75rem 1rem;
+    border: 1px solid transparent;
+    border-inline-start: 3px solid var(--dialog-feedback-accent);
+    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);
+    box-shadow: none;
+    font-size: .875rem;
+    font-weight: 400;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+
+    &.warning {
+      --dialog-feedback-accent: var(--warning-heading-color);
+    }
+
+    &.error,
+    &.danger {
+      --dialog-feedback-accent: var(--danger);
+    }
+
+    &.success {
+      --dialog-feedback-accent: var(--success);
+    }
+
+    > :first-child {
+      margin-block-start: 0;
+    }
+
+    > :last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .cbi-map {
+    margin-bottom: 0;
+  }
+}
+
+@container argon-modal (max-width: 28rem) {
+  .modal .right:has(> :is(.btn, .cbi-button)),
+  .modal .button-row {
+    > .btn,
+    > .cbi-button {
+      flex: 1 1 100%;
+    }
+  }
+}
+
+body.modal-overlay-active {
+  overflow: hidden;
+  height: 100vh;
+  height: 100dvh;
+}
+
+body.modal-overlay-active #modal_overlay {
+  visibility: visible;
+  pointer-events: auto;
+  opacity: 1;
+}

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

@@ -0,0 +1,172 @@
+// out: false
+
+.cbi-section,
+.cbi-section-error,
+#iptables,
+.Firewall form,
+#cbi-network>.cbi-section-node,
+#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;
+  font-style: normal;
+  line-height: normal;
+  min-width: inherit;
+  padding: 0;
+  border: 0;
+
+  border-radius: var(--radius-card);
+  background-color: var(--surface-color);
+  box-shadow: var(--section-shadow);
+
+  &:last-child {
+    margin: 0;
+    border: 0;
+  }
+
+}
+
+.cbi-modal .cbi-section,
+.cbi-section .cbi-section {
+  padding: 0;
+  box-shadow: none;
+}
+
+.cbi-modal .cbi-tabmenu {
+  margin-left: 0;
+}
+
+.cbi-map {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  gap: var(--section-gap);
+  container-type: inline-size;
+}
+
+.cbi-map-descr {
+  font-size: small;
+  line-height: 1.5;
+  padding: 0 var(--section-inset);
+}
+
+.cbi-section > .cbi-section-descr:not(:empty) {
+  padding-block: var(--field-gap);
+}
+
+.cbi-section-descr:not(:empty) {
+  font-size: small;
+  line-height: 1.5;
+  padding: 0 var(--section-inset);
+}
+
+.cbi-section-descr:empty {
+  display: none !important;
+}
+
+.cbi-map-descr+fieldset {
+  margin-top: 0;
+}
+
+.cbi-map-descr>abbr {
+  cursor: help;
+  text-decoration: underline;
+}
+
+.cbi-section>legend {
+  display: none !important;
+}
+
+fieldset>fieldset,
+.cbi-section>.cbi-section {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+}
+
+.cbi-section>h3:first-child,
+.panel-title {
+  font-size: 1.1rem;
+  line-height: 1.4;
+  display: block;
+  width: 100%;
+  margin: 0;
+  margin-bottom: 0;
+  padding: var(--field-gap) var(--section-inset);
+  color: var(--text-strong);
+
+}
+
+.cbi-section>h3:first-child,
+.cbi-section>h4:first-child,
+.cbi-section>p:first-child,
+[data-tab-title]>h3:first-child,
+[data-tab-title]>h4:first-child,
+[data-tab-title]>p:first-child {
+  padding: var(--field-gap) var(--section-inset);
+  // These backgrounds meet the card edge, so only the outer corners curve.
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+// Anonymous removable sections share one heading before their first instance.
+// Keep its first Delete beside that heading, in normal source order.
+.cbi-section:has(> h3:first-child + .cbi-section-remove + .cbi-section-node) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+
+  > :not(h3, .cbi-section-remove) {
+    grid-column: 1 / -1;
+  }
+
+  > h3 {
+    grid-column: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  > .cbi-section-remove {
+    grid-column: 2;
+    display: flex;
+    justify-content: flex-end;
+    min-width: 0;
+    margin: 0;
+    padding: var(--control-gap) var(--section-inset);
+    padding-inline-start: 0;
+
+    > .cbi-button {
+      min-height: 2.5rem;
+    }
+  }
+
+  // Further actions stay above the fields belonging to their own instance.
+  > .cbi-section-remove ~ .cbi-section-remove {
+    grid-column: 1 / -1;
+    border-block-start: 1px solid var(--border-color);
+  }
+}
+
+.cbi-section p {
+  padding: var(--field-gap) var(--section-inset);
+}
+
+// TypedSection renders its empty-state hint directly as an em element.
+.cbi-section > em {
+  display: block;
+  margin: 0;
+  padding: var(--field-gap) var(--section-inset);
+  color: var(--muted-text);
+  font-size: .875rem;
+  font-style: normal;
+  line-height: 1.5;
+  text-align: start;
+  overflow-wrap: anywhere;
+}

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

@@ -0,0 +1,279 @@
+// out: false
+
+// table
+
+.table {
+  position: relative;
+  display: table;
+}
+
+.tr {
+  display: table-row;
+}
+
+.thead {
+  display: table-header-group;
+}
+
+.tbody {
+  display: table-row-group;
+}
+
+.tfoot {
+  display: table-footer-group;
+}
+
+.td,
+.th {
+  line-height: normal;
+  display: table-cell;
+  padding: .5em;
+  text-align: center;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+}
+
+// Let descriptive data yield space to the action column before controls wrap.
+.td:not(.cbi-section-actions) .nowrap {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.td .ifacebadge {
+  max-width: 100%;
+
+  > span {
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+}
+
+.th {
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.tr.placeholder {
+  height: 4em;
+}
+
+.tr.placeholder>.td {
+  line-height: 3;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0.4rem 0 !important;
+  text-align: center !important;
+  background: inherit;
+}
+
+.td[width="33%"] {
+  padding: 1.1em 1.5rem;
+}
+
+.table[width="33%"],
+.th[width="33%"],
+.td[width="33%"] {
+  width: 33%;
+}
+
+.table[width="100%"],
+.th[width="100%"],
+.td[width="100%"] {
+  width: 100%;
+}
+
+.cbi-tblsection {
+  overflow-x: auto;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table,
+.table {
+  overflow-y: hidden;
+  width: 100%;
+  font-size: 0.75rem;
+}
+
+// A flush table, its final row group, row and edge cells share the card's
+// bottom corners. Rounding the painted layers keeps dropdowns/tooltips free
+// to extend beyond the card without clipping them with overflow: hidden.
+:is(.cbi-section, [data-tab-title]) > .table:last-child,
+:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child),
+:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child,
+#view > .table {
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: visible;
+  border-end-start-radius: var(--radius-card);
+  border-end-end-radius: var(--radius-card);
+
+  > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child,
+  > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child,
+  > :is(tr, .tr):last-child {
+    border-end-start-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+
+  > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
+  > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child {
+    border-end-start-radius: inherit;
+  }
+
+  > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
+  > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child {
+    border-end-end-radius: inherit;
+  }
+}
+
+// Status widgets often replace a table inside a single dynamic wrapper.
+// When that wrapper fills its card, the first painted row shares its top edge.
+:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child {
+  border-start-start-radius: var(--radius-card);
+  border-start-end-radius: var(--radius-card);
+
+  > :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) {
+    border-top: 0;
+
+    &:first-child {
+      border-start-start-radius: inherit;
+    }
+
+    &:last-child {
+      border-start-end-radius: inherit;
+    }
+  }
+}
+
+.table .table-titles th {
+  background-color: var(--surface-contrast);
+}
+
+table>tbody>tr>td,
+table>tbody>tr>th,
+table>tfoot>tr>td,
+table>tfoot>tr>th,
+table>thead>tr>td,
+table>thead>tr>th,
+.table>.tbody>.tr>.td,
+.table>.tbody>.tr>.th,
+.table>.tfoot>.tr>.td,
+.table>.tfoot>.tr>.th,
+.table>.thead>.tr>.td,
+.table>.thead>.tr>.th,
+.table>.tr>.td.cbi-value-field,
+.table>.tr>.th.cbi-section-table-cell {
+  padding: .5rem;
+}
+
+.container>.cbi-section:first-of-type>.table[width="100%"]>.tr>.td {
+  padding: .6rem;
+}
+
+.cbi-section-table-cell {
+  line-height: 1.1;
+  align-self: flex-end;
+  flex: 1 1 auto;
+}
+
+body:not([data-page="admin-dashboard"]) {
+  tr>td,
+  tr>th,
+  .tr>.td,
+  .tr>.th,
+  .cbi-section-table-row::before,
+  #cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2) {
+    border-top: var(--table-border);
+    padding: 1.1em 1.25rem;
+  }
+}
+
+#cbi-wireless .td,
+.table[width="100%"]>.tr:first-child>.td,
+[data-page="admin-network-diagnostics"] .tr>.td,
+.tr.table-titles>.th,
+.tr.cbi-section-table-titles>.th {
+  border-top: 0 !important;
+  background-color: var(--surface-muted);
+  padding: 1.1em 1.25rem;
+  line-height: 1.3rem;
+}
+
+#cbi-network .tr:first-child>.td {
+  border-top: 0;
+}
+
+.table[width="100%"]>.tr:first-child>.td {
+  margin: auto 0;
+}
+
+.cbi-section-table-row {
+  margin-bottom: 1rem;
+  text-align: center !important;
+  background: var(--row-color);
+}
+
+.cbi-section-table-row:last-child {
+  margin-bottom: 0;
+}
+
+.cbi-section-table-row>.cbi-value-field .cbi-dropdown,
+.cbi-section-table-row>.cbi-value-field .cbi-input-select,
+.cbi-section-table-row>.cbi-value-field .cbi-input-text,
+.cbi-section-table-row>.cbi-value-field .cbi-input-password {
+  width: 100%;
+}
+
+.cbi-section-table-row>.cbi-value-field .cbi-input-text,
+.cbi-section-table-row>.cbi-value-field .cbi-input-password {
+  min-width: 80px;
+}
+
+.cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
+.cbi-section-table-row>.cbi-value-field input.cbi-input-password {
+  width: calc(100% - 1.5rem);
+}
+
+.cbi-section-table-row .td {
+  text-align: center !important;
+
+  .cbi-checkbox {
+    input[type="checkbox"] {
+      margin: 0;
+    }
+  }
+}
+
+// Count data rows only: inline headings and separate thead groups must start
+// with the same stripe, distinct from the muted table heading.
+div>table>tbody>tr:nth-child(2n of :has(> td):not(.table-titles, .cbi-section-table-titles, .cbi-section-table-descr)),
+div>.table>.tbody>.tr:nth-child(2n of :has(> .td):not(.table-titles, .cbi-section-table-titles, .cbi-section-table-descr)),
+div>.table>.tr:nth-child(2n of :has(> .td):not(.table-titles, .cbi-section-table-titles, .cbi-section-table-descr)) {
+  background-color: var(--row-alt);
+}
+
+/* fix multiple table */
+table table,
+.table .table,
+.cbi-value-field table,
+.cbi-value-field .table,
+td>table>tbody>tr>td,
+.td>.table>.tbody>.tr>.td,
+.cbi-value-field>table>tbody>tr>td,
+.cbi-value-field>.table>.tbody>.tr>.td {
+  border: 0;
+}

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

@@ -0,0 +1,145 @@
+// out: false
+
+.tabs,
+.cbi-tabmenu {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  gap: var(--control-gap);
+  white-space: nowrap;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    width: 1px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--surface-muted);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--surface-color);
+  }
+
+  > li {
+    flex: 0 0 auto;
+  }
+}
+
+.tabs {
+  padding: 0 var(--section-inset);
+  background-color: var(--surface-panel);
+  border-radius: var(--radius-card);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, .03);
+
+  li[class~="active"] {
+    cursor: pointer;
+    border-bottom: 0.18751rem solid var(--tab-color);
+    color: var(--text-strong);
+    background-color: var(--surface-active);
+    margin-bottom: 0;
+
+    a {
+      color: var(--text-strong);
+    }
+  }
+
+  li {
+    font-size: 0.875rem;
+    border-radius: 0;
+    padding: 0.875rem 0rem;
+    border-bottom: 0.18751rem solid rgba(0, 0, 0, 0);
+    margin: 0;
+
+    a {
+      text-decoration: none;
+      color: var(--tab-inactive-color);
+      padding: 0.5rem 0.8rem;
+    }
+  }
+}
+
+.cbi-tabmenu {
+  color: white;
+  padding: var(--control-gap) var(--section-inset) 0;
+
+  li {
+    background: var(--tab-item-bg);
+    font-size: 0.875rem;
+    border-radius: var(--radius-control) var(--radius-control) 0 0;
+    padding: 0.5rem 0rem;
+    border-bottom: 0.18751rem solid rgba(0, 0, 0, 0);
+    margin: 0;
+    position: relative;
+
+    a {
+      text-decoration: none;
+      color: var(--tab-inactive-color);
+      padding: 0.5rem 0.8rem;
+    }
+
+  }
+
+  li[class~="cbi-tab"] {
+    border-bottom: 0.18751rem solid var(--tab-color);
+    color: var(--text-strong);
+    background-color: var(--surface-active);
+    margin-bottom: 0;
+
+    a {
+      color: var(--text-strong);
+    }
+  }
+}
+
+// Keep hover and selection feedback smooth in both native tab styles.
+@media (prefers-reduced-motion: no-preference) {
+  .tabs > li,
+  .cbi-tabmenu > li {
+    transition: background-color .15s ease-out, border-bottom-color .15s ease-out;
+
+    > a {
+      transition: color .15s ease-out;
+    }
+  }
+}
+
+@media (hover: hover) {
+  .tabs > li:hover,
+  .cbi-tabmenu > li:hover {
+    cursor: pointer;
+    border-bottom-color: var(--tab-color);
+    background-color: var(--surface-active);
+
+    > a {
+      color: var(--text-strong);
+    }
+  }
+}
+
+.cbi-tab-descr {
+  padding: 0 var(--section-inset);
+}
+
+// Native tab groups can follow a title/description and need not have a map class.
+// Keep normal spacing between visible siblings, and join each tab bar to its pane.
+.cbi-map:has(> .cbi-tabmenu + div),
+#view:has(> .cbi-tabmenu + div),
+#view > div:first-child:not(.cbi-map):has(> .cbi-tabmenu + div) {
+  --tab-flow-gap: var(--section-gap);
+  row-gap: 0;
+
+  > :where(:not(style, script, [hidden], .hidden, [style*="display:none"], [style*="display: none"]))
+    ~ :where(:not(style, script, [hidden], .hidden, [style*="display:none"], [style*="display: none"])) {
+    margin-block-start: var(--tab-flow-gap);
+  }
+
+  > .cbi-tabmenu + div {
+    margin-block-start: 0;
+  }
+}
+
+#view > div:first-child:not(.cbi-map):has(> .cbi-tabmenu + div) {
+  --tab-flow-gap: var(--field-gap);
+}

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

@@ -0,0 +1,34 @@
+// out: false
+
+.hidden {
+  display: none;
+}
+
+.left,
+.left::before {
+  text-align: left !important;
+}
+
+.right,
+.right::before {
+  text-align: right !important;
+}
+
+.center,
+.center::before {
+  text-align: center !important;
+}
+
+.top {
+  align-self: flex-start !important;
+  vertical-align: top !important;
+}
+
+.bottom {
+  align-self: flex-end !important;
+  vertical-align: bottom !important;
+}
+
+.inline {
+  display: inline;
+}

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

@@ -0,0 +1,463 @@
+// out: false
+
+#iwsvg,
+#iwsvg2,
+#bwsvg {
+  background-color: var(--surface-color);
+  border: thin solid #d4d4d4 !important;
+}
+
+#iwsvg {
+  border-top: 0 !important;
+}
+
+.ifacebox {
+  border: var(--iface-border);
+  line-height: 1.25;
+  display: inline-flex;
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--radius-panel);
+  min-width: 100px;
+  background-color: var(--iface-bg);
+  // border-bottom: thin solid #ccc;
+  // box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2);
+}
+
+.ifacebox-head {
+  padding: .25em;
+  background: var(--iface-head-bg);
+  color: var(--iface-head-text);
+}
+
+.ifacebox-head.active {
+  background: var(--primary);
+
+  * {
+    color: var(--accent-text);
+  }
+
+}
+
+.ifacebox-body {
+  background-color: var(--iface-body-bg);
+  padding: 0.875rem 1rem;
+  line-height: 1.6em;
+}
+
+.cbi-image-button {
+  margin-left: .5rem;
+}
+
+.zonebadge {
+  display: inline-block;
+  padding: .2rem .5rem;
+  border-radius: var(--radius-small);
+}
+
+// LuCI supplies zone colors inline. Map its standard zones in both badge
+// and interface-card markup, including older literal background colors.
+.zonebadge,
+.ifacebox-head {
+  &[style*="--zone-color-rgb"][style*="144, 240, 144"] {
+    --zone-color-rgb: var(--zone-positive-rgb) !important;
+  }
+
+  &[style*="--zone-color-rgb"][style*="240, 144, 144"] {
+    --zone-color-rgb: var(--zone-negative-rgb) !important;
+  }
+
+  &[style*="--zone-color-rgb"][style*="238, 238, 238"] {
+    --zone-color-rgb: var(--zone-neutral-rgb) !important;
+  }
+
+  &[style*="--zone-color-rgb"][style*="144, 240, 144"],
+  &[style*="--zone-color-rgb"][style*="240, 144, 144"],
+  &[style*="--zone-color-rgb"][style*="238, 238, 238"] {
+    background-color: ~"rgb(var(--zone-color-rgb))" !important;
+    color: var(--zone-label-color);
+
+    strong {
+      color: inherit;
+    }
+  }
+}
+
+.zonebadge .ifacebadge {
+  margin: .1rem .2rem;
+  padding: .2rem .3rem;
+  border: thin solid #6c6c6c;
+}
+
+.zonebadge>input[type="text"] {
+  min-width: 10rem;
+  margin-top: .3rem;
+  padding: .16rem 1rem;
+}
+
+.zonebadge>em,
+.zonebadge>strong {
+  display: inline-block;
+  margin: 0 .2rem;
+}
+
+.cbi-value-field .cbi-input-checkbox,
+.cbi-value-field .cbi-input-radio {
+  margin-top: .1rem;
+}
+
+.cbi-value-field>ul>li {
+  display: flex;
+}
+
+.cbi-value-field>ul>li>label {
+  margin-top: .5rem;
+}
+
+.cbi-value-field>ul>li .ifacebadge {
+  margin-top: -.5rem;
+  margin-left: .4rem;
+  background-color: var(--badge-bg);
+}
+
+.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
+  min-width: 3rem;
+}
+
+.cbi-section-create {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
+  row-gap: var(--control-gap);
+  padding: .875rem 1rem;
+
+  &:has(> button:first-child) {
+    column-gap: var(--control-gap);
+  }
+
+  > .btn,
+  > .cbi-button {
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  &>div:first-child {
+    min-width: 0;
+    max-width: 100%;
+
+    &>input {
+      width: 100%;
+      border-inline-end: none;
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
+    }
+  }
+
+  &>div:first-child+button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+}
+
+.cbi-section-remove {
+  padding: .5rem 1rem;
+}
+
+div.cbi-value var,
+td.cbi-value-field var,
+.td.cbi-value-field var {
+  font-style: italic;
+  color: var(--data-token-text);
+}
+
+.cbi-optionals {
+  padding: 1rem 1rem 0 1rem;
+  border-top: thin solid #ccc;
+}
+
+.cbi-dropdown-container {
+  position: relative;
+}
+
+.cbi-filebrowser > p > a {
+  display: inline-block;
+  max-width: 100%;
+  direction: ltr;
+  unicode-bidi: isolate;
+  overflow-wrap: anywhere;
+}
+
+.cbi-tooltip-container,
+span[data-tooltip],
+span[data-tooltip] .label {
+  cursor: help !important;
+}
+
+.cbi-tooltip {
+  position: absolute;
+  z-index: 1000;
+  inset-inline-start: -10000px;
+  box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px var(--accent-shadow-color);
+  border-radius: var(--radius-panel);
+  background: var(--surface-color);
+  white-space: pre;
+  padding: 0.5rem;
+  opacity: 0;
+  transition: opacity .15s ease-in;
+}
+
+// ui.js supplies physical left/top coordinates on the shared body tooltip.
+// hideTooltip() also writes opacity alone before a tooltip has ever opened.
+// Release the off-screen inset only when both positioning coordinates exist.
+body > .cbi-tooltip[style*="left:"][style*="top:"] {
+  inset-inline-start: auto;
+}
+
+.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
+  inset-inline-start: auto;
+  transition: opacity .15s ease-in;
+  opacity: 1;
+}
+
+.zonebadge .cbi-tooltip {
+  margin: -1.5rem 0 0 -.5rem;
+  padding: .25rem;
+  background: inherit;
+}
+
+.zonebadge-empty {
+  color: var(--text-strong);
+  background: repeating-linear-gradient(45deg, var(--surface-inset), var(--surface-inset) 5px, var(--surface-contrast) 5px, var(--surface-contrast) 10px);
+}
+
+.zone-forwards {
+  display: flex;
+  min-width: 10rem;
+}
+
+.zone-forwards>* {
+  flex: 1 1 45%;
+}
+
+.zone-forwards>span {
+  flex-basis: 10%;
+  padding: 0 .25rem;
+  text-align: center;
+}
+
+.zone-forwards .zone-src,
+.zone-forwards .zone-dest {
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  font-size: .875rem;
+  font-weight: bold;
+  padding: .3rem .8rem;
+  white-space: nowrap;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: var(--text-inverse) !important;
+  border-radius: var(--radius-small);
+  background-color: var(--label-bg);
+  text-shadow: none;
+}
+
+label>input[type="checkbox"],
+label>input[type="radio"] {
+  position: relative;
+  top: .4rem;
+  right: .2rem;
+  margin: 0;
+  vertical-align: bottom;
+}
+
+label[data-index][data-depends] {
+  padding-right: 2em;
+}
+
+.showSide {
+  display: none;
+}
+
+.darkMask {
+  position: fixed;
+  z-index: 99;
+  display: none;
+  width: 100%;
+  height: 100%;
+  content: "";
+  top: 0;
+  background-color: rgba(0, 0, 0, .56);
+  transition: opacity .15s ease;
+
+  &.active {
+    display: block;
+  }
+}
+
+/* diagnostics */
+#diag-rc-output>pre,
+#command-rc-output>pre,
+[data-page="admin-services-wol"] .notice code {
+  font-size: 1.2rem;
+  font-size-adjust: .35;
+  line-height: normal;
+  display: block;
+  overflow-y: hidden;
+  width: 100%;
+  padding: 8.5px;
+  white-space: pre;
+  color: #eee;
+  background-color: #101010;
+  border-radius: var(--radius-panel);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
+}
+
+input[name="ping"],
+input[name="traceroute"],
+input[name="nslookup"] {
+  width: 80%;
+}
+
+.controls {
+  gap: 0.5rem;
+  margin: 0 var(--section-inset);
+}
+
+.controls>div {
+  gap: 0.5rem;
+}
+
+.controls>*>.btn:not([aria-label$="page"]) {
+  flex-grow: initial !important;
+  margin-top: .25rem;
+}
+
+.controls>#pager>.btn[aria-label$="page"] {
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+.controls>*>label {
+  margin-bottom: .2rem;
+}
+
+.td.version,
+.td.size {
+  white-space: normal !important;
+  word-break: break-word;
+}
+
+.cbi-tabmenu+.cbi-section {
+  margin-top: 0;
+}
+
+.cbi-tab-disabled[data-errors]::after {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
+  content: attr(data-errors);
+  background-color: var(--danger-bg);
+  color: var(--text-on-accent);
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: var(--radius-circle);
+  text-align: center;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: .75em;
+}
+
+/* custom commands */
+.commands {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 0.75rem;
+}
+
+.commandbox {
+  padding: .5rem 1rem;
+  gap: 0.5rem;
+  border-bottom: thin solid var(--border-color);
+  border-radius: var(--radius-panel);
+  background: var(--command-bg);
+  box-shadow: var(--command-shadow);
+
+  h3 {
+    line-height: normal !important;
+    overflow: hidden;
+    margin: 6px 0 !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  div {
+    left: auto !important;
+  }
+
+  code {
+    overflow: hidden;
+    max-width: fit-content;
+    padding: 2px 3px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:hover {
+      overflow-y: auto;
+      max-height: 50px;
+      white-space: normal;
+    }
+  }
+
+  p:first-of-type {
+    margin-top: -6px;
+  }
+
+  p:nth-of-type(2) {
+    margin-top: 2px;
+  }
+}
+
+#command-rc-output .alert-message {
+  line-height: 1.42857143;
+  position: absolute;
+  top: 40px;
+  right: 32px;
+  max-width: 40%;
+  margin: 0;
+  animation: anim-fade-in 1.5s forwards;
+  word-break: break-word;
+  opacity: 0;
+}
+
+@keyframes anim-fade-in {
+  100% {
+    opacity: 1;
+  }
+}
+
+/* other fix */
+
+.fb-container .cbi-button {
+  height: auto !important;
+}
+
+#cbi-usb_printer-printer em {
+  display: block;
+  padding: 1rem;
+  text-align: center;
+}
+
+pre.command-output {
+  padding: 1.5rem;
+}