mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-03 00:43:56 +08:00
💋 Sync 2026-10-16 23:55:30
This commit is contained in:
github-actions[bot] committed
1 parent
76f10c2a74
commit
1849cc6156
254 files changed
+25484
-8840
No files matched your search
+35
-2593
File diff suppressed because it is too large.
Load diff
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -8,8 +8,7 @@
|
||||
font-family: 'Google Sans';
|
||||
src: local('Google Sans'),
|
||||
local('GoogleSans-Regular'),
|
||||
url('../fonts/GoogleSans-Regular.woff2') format('woff2'),
|
||||
url('../fonts/GoogleSans-Regular.woff') format('woff');
|
||||
url('../fonts/GoogleSans-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
@@ -19,18 +18,7 @@
|
||||
@font-face {
|
||||
font-family: 'TypoGraphica';
|
||||
src: local('TypoGraphica'),
|
||||
url('../fonts/TypoGraphica.woff2') format('woff2'),
|
||||
url('../fonts/TypoGraphica.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Icon Font */
|
||||
@font-face {
|
||||
font-family: 'argon';
|
||||
src: url('../fonts/argon.woff2') format('woff2'),
|
||||
url('../fonts/argon.woff') format('woff');
|
||||
url('../fonts/TypoGraphica.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
|
||||
+174
-243
@@ -4,7 +4,6 @@
|
||||
// Main layout components for LuCI admin interface
|
||||
// ==========================================================================
|
||||
|
||||
|
||||
// 1. Main Container Layout
|
||||
// ==========================================================================
|
||||
|
||||
@@ -21,15 +20,20 @@
|
||||
// ==========================================================================
|
||||
|
||||
.main-left {
|
||||
width: 15rem;
|
||||
// Category colours are independent of success/warning status colours.
|
||||
--menu-icon-system: @orange-500;
|
||||
--menu-icon-services: @cyan-500;
|
||||
--menu-icon-network: #8965e0;
|
||||
--menu-icon-muted: @neutral-400;
|
||||
--sidebar-width: 15rem;
|
||||
width: var(--sidebar-width);
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
z-index: 100;
|
||||
overflow-x: auto;
|
||||
word-break: break-word;
|
||||
background-color: var(--menu-bg-color);
|
||||
box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px -5px;
|
||||
transition: all 0.2s;
|
||||
background-color: var(--surface-raised);
|
||||
box-shadow: var(--sidebar-shadow);
|
||||
|
||||
// Sidebar Header
|
||||
.sidenav-header {
|
||||
@@ -41,7 +45,7 @@
|
||||
margin: 0 2rem;
|
||||
font-size: 1.8rem;
|
||||
font-family: "TypoGraphica";
|
||||
color: var(--primary);
|
||||
color: var(--sidebar-brand-color);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
@@ -65,61 +69,64 @@
|
||||
padding: 0.675rem 0 0.675rem 2.5rem;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: var(--radius-menu);
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
color: #fff;
|
||||
color: var(--accent-text);
|
||||
background: var(--primary);
|
||||
|
||||
&::before {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(90deg);
|
||||
color: #fff !important;
|
||||
transform: rotate(0deg);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: var(--primary);
|
||||
@media (hover: hover) {
|
||||
transition: background-color .15s ease, color .15s ease;
|
||||
|
||||
&::before {
|
||||
color: #fff !important;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--accent-text);
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon before text
|
||||
&::before {
|
||||
.menu-icon {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0.8rem;
|
||||
padding-top: 3px;
|
||||
font-family: 'argon' !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\e915";
|
||||
color: var(--primary);
|
||||
transition: all 0.3s;
|
||||
left: .8rem;
|
||||
top: 50%;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -.5rem;
|
||||
color: var(--link-color);
|
||||
background-color: currentColor;
|
||||
-webkit-mask: var(--menu-icon) center / contain no-repeat;
|
||||
mask: var(--menu-icon) center / contain no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
&>.slide>.menu::before {
|
||||
transition: transform .1s ease-in-out;
|
||||
}
|
||||
.menu-icon[data-icon="system"] { color: var(--menu-icon-system); }
|
||||
.menu-icon[data-icon="services"] { color: var(--menu-icon-services); }
|
||||
.menu-icon[data-icon="network"],
|
||||
.menu-icon[data-icon="vpn"] { color: var(--menu-icon-network); }
|
||||
.menu-icon[data-icon="logout"] { color: var(--menu-icon-muted); }
|
||||
|
||||
&>.slide>.menu.active::before {
|
||||
transition: transform .2s ease-in-out;
|
||||
&.active .menu-icon {
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.menu-icon {
|
||||
transition: color .15s ease;
|
||||
}
|
||||
|
||||
&:hover .menu-icon {
|
||||
color: var(--accent-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation list items
|
||||
@@ -158,7 +165,7 @@
|
||||
li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: var(--radius-control);
|
||||
background: none;
|
||||
list-style: none;
|
||||
|
||||
@@ -178,15 +185,16 @@
|
||||
width: 0;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background-color: var(--primary);
|
||||
transition: all 0.2s;
|
||||
background-color: var(--link-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background: none;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -207,168 +215,32 @@
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background-color: var(--primary);
|
||||
transition: all 0.2s;
|
||||
background-color: var(--link-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main menu items
|
||||
.menu {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0.1rem 0.5rem;
|
||||
padding: 0.675rem 0 0.675rem 2.5rem;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
border-radius: 0.25rem;
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: var(--primary);
|
||||
|
||||
&::before {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(90deg);
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: var(--primary);
|
||||
|
||||
&::before {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon before text
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0.8rem;
|
||||
padding-top: 3px;
|
||||
font-family: 'argon' !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\e915";
|
||||
color: var(--primary);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
// Dropdown arrow
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 0.8rem;
|
||||
font-family: 'argon' !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: '\e90f';
|
||||
color: #ced4da;
|
||||
text-rendering: auto;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
// SVG disclosure arrow; its colour follows the link.
|
||||
.menu::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-end: .75rem;
|
||||
top: 50%;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -.5rem;
|
||||
background-color: currentColor;
|
||||
-webkit-mask: var(--chevron-down-icon) center / contain no-repeat;
|
||||
mask: var(--chevron-down-icon) center / contain no-repeat;
|
||||
transform: rotate(-90deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Menu-specific icons and colors
|
||||
.menu[data-title="Status"]:before {
|
||||
content: "\e906";
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.menu[data-title="System"]:before {
|
||||
content: "\e90a";
|
||||
color: #fb6340;
|
||||
}
|
||||
|
||||
.menu[data-title="Services"]:before {
|
||||
content: "\e909";
|
||||
color: #11cdef;
|
||||
}
|
||||
|
||||
.menu[data-title="NAS"]:before {
|
||||
content: "\e90c";
|
||||
color: #f3a4b5;
|
||||
}
|
||||
|
||||
.menu[data-title="VPN"]:before {
|
||||
content: "\e90b";
|
||||
color: #8965e0;
|
||||
}
|
||||
|
||||
.menu[data-title="Network"]:before {
|
||||
content: "\e908";
|
||||
color: #8965e0;
|
||||
}
|
||||
|
||||
.menu[data-title="Bandwidth_Monitor"]:before {
|
||||
content: "\e90d";
|
||||
color: #2dce89;
|
||||
}
|
||||
|
||||
.menu[data-title="Docker"]:before {
|
||||
content: "\e911";
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
.menu[data-title="Statistics"]:before {
|
||||
content: "\e913";
|
||||
color: #8965e0;
|
||||
}
|
||||
|
||||
.menu[data-title="Control"]:before {
|
||||
content: "\e912";
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.menu[data-title="Asterisk"]:before {
|
||||
content: "\e914";
|
||||
color: #fb6340;
|
||||
}
|
||||
|
||||
// Logout link styling
|
||||
a[data-title="Log_out"],
|
||||
.food[data-title="Log_out"] {
|
||||
&::before {
|
||||
content: "\e907";
|
||||
color: #adb5bd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[style*="overflow: hidden"]>.nav>.slide>.menu::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Scrollbar Styling
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
@@ -376,11 +248,11 @@
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #f6f9fc;
|
||||
background-color: var(--sidebar-scrollbar);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #fff;
|
||||
background-color: var(--surface-raised);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -388,16 +260,18 @@
|
||||
// ==========================================================================
|
||||
|
||||
.main-right {
|
||||
background-color: var(--main-bg);
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.2s;
|
||||
|
||||
// Main Content Container
|
||||
&>#maincontent {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
flex: 1;
|
||||
@@ -405,19 +279,23 @@
|
||||
flex-direction: column;
|
||||
|
||||
&>.container {
|
||||
margin: 0 1.25rem 1rem 1.25rem;
|
||||
min-width: 0;
|
||||
margin: 0 var(--page-gutter) var(--section-gap);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: var(--section-gap);
|
||||
}
|
||||
|
||||
// Dashboard Specific Styles
|
||||
.Dashboard {
|
||||
color: var(--gray-dark) !important;
|
||||
img.svgmonochrome {
|
||||
filter: var(--image-filter);
|
||||
}
|
||||
color: var(--text-strong) !important;
|
||||
|
||||
h3 {
|
||||
color: var(--gray-dark);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -430,7 +308,7 @@
|
||||
}
|
||||
|
||||
.dashboard-bg {
|
||||
background-color: #fff;
|
||||
background-color: var(--surface-color);
|
||||
}
|
||||
|
||||
.table {
|
||||
@@ -463,11 +341,11 @@ header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
color: var(--header-color);
|
||||
color: var(--text-on-accent);
|
||||
|
||||
// Primary background modifier
|
||||
&.bg-primary {
|
||||
background-color: var(--primary) !important;
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
// Header extension background
|
||||
@@ -476,31 +354,39 @@ header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
background-color: var(--primary) !important;
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
// Header Content Container
|
||||
.fill {
|
||||
padding: 0.8rem 0;
|
||||
display: flex;
|
||||
border-bottom: 0px solid rgba(255, 255, 255, 0.08) !important;
|
||||
border: 0;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 1.25rem;
|
||||
min-width: 0;
|
||||
min-height: 2rem;
|
||||
padding: 0 var(--page-gutter);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
flex-wrap: wrap;
|
||||
gap: var(--control-gap) var(--action-gap);
|
||||
|
||||
// Left section (brand and menu toggle)
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex: 1 1 10rem;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
gap: var(--action-gap);
|
||||
|
||||
.showSide {
|
||||
display: none;
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.4rem;
|
||||
color: #fff;
|
||||
border: 0 !important; // Override the dark theme's global button border.
|
||||
color: var(--text-on-accent);
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -516,10 +402,15 @@ header {
|
||||
|
||||
.brand {
|
||||
display: none;
|
||||
padding-left: 1rem;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 1.5rem;
|
||||
font-family: "TypoGraphica";
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
vertical-align: text-bottom;
|
||||
@@ -528,50 +419,66 @@ header {
|
||||
|
||||
// Right section (status indicators)
|
||||
.pull-right {
|
||||
margin-top: 0rem;
|
||||
float: right;
|
||||
margin-inline-start: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Status Indicators
|
||||
.status {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-inline-start: auto;
|
||||
gap: var(--control-gap);
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 0.25rem;
|
||||
max-width: 100%;
|
||||
padding: 0.3rem 0.8rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-control);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span[data-indicator="poll-status"] {
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
span[data-style="active"] {
|
||||
background-color: var(--green);
|
||||
background-color: var(--success-bg);
|
||||
}
|
||||
|
||||
span[data-style="inactive"] {
|
||||
color: #ffffff !important;
|
||||
background-color: #32325d;
|
||||
color: var(--text-on-accent);
|
||||
background-color: var(--status-neutral-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#xhr_poll_status {
|
||||
display: flex;
|
||||
|
||||
* {
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
}
|
||||
|
||||
header .showSide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 5. Footer Layout
|
||||
// ==========================================================================
|
||||
|
||||
@@ -589,30 +496,54 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 6. View
|
||||
// ==========================================================================
|
||||
#view {
|
||||
border-radius: 0.25rem;
|
||||
border-radius: var(--radius-card);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
gap: var(--section-gap);
|
||||
|
||||
&>.spinning {
|
||||
--spinner-inset: 1rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 1rem 0 rgba(136, 152, 170, .15);
|
||||
border-radius: var(--radius-panel);
|
||||
background: var(--surface-color);
|
||||
box-shadow: var(--section-shadow);
|
||||
}
|
||||
|
||||
&>div:first-child {
|
||||
&>div:first-child:not(.cbi-map) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.875rem;
|
||||
min-width: 0;
|
||||
gap: var(--field-gap);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Rotate one SVG so opening, closing and reversing remain continuous.
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.main-left {
|
||||
transition: width .2s ease;
|
||||
}
|
||||
|
||||
.main-left .nav .menu::after {
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.main-left .nav .slide-menu li::after {
|
||||
transition: width .2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right-facing disclosures follow reading direction; down-facing ones do not.
|
||||
[dir="rtl"] .main-left .nav .menu:not(.active)::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
Vendored
+35
-30
@@ -31,7 +31,7 @@ body {
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--gray-dark);
|
||||
color: var(--text-strong);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@@ -60,7 +60,7 @@ h5,
|
||||
h6 {
|
||||
font-family: inherit;
|
||||
font-weight: normal;
|
||||
line-height: 1.1 !important;
|
||||
line-height: 1.4;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -68,28 +68,28 @@ h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0.67em 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: thin solid var(--lighter);
|
||||
border-bottom: thin solid var(--border-muted);
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 1rem 1.25rem;
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
color: var(--gray-dark);
|
||||
border-radius: 0.25rem;
|
||||
background: var(--white);
|
||||
color: var(--text-strong);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 0.8755rem 1.25rem;
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: var(--gray-dark);
|
||||
border-radius: 0.25rem;
|
||||
background: var(--white);
|
||||
line-height: 1.4;
|
||||
color: var(--text-strong);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-raised);
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -122,7 +122,7 @@ a {
|
||||
abbr {
|
||||
cursor: help;
|
||||
text-decoration: underline;
|
||||
color: var(--primary);
|
||||
color: var(--help-text);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
@@ -143,9 +143,9 @@ samp {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 1px 3px;
|
||||
color: var(--dark);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--lighter);
|
||||
color: var(--code-text);
|
||||
border-radius: var(--radius-small);
|
||||
background: var(--surface-contrast);
|
||||
}
|
||||
|
||||
small {
|
||||
@@ -179,7 +179,7 @@ hr {
|
||||
margin: 1rem 0;
|
||||
overflow: visible;
|
||||
opacity: 0.1;
|
||||
border-color: var(--lighter);
|
||||
border-color: var(--border-muted);
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -277,30 +277,34 @@ button:-moz-focusring {
|
||||
input[type="checkbox"] {
|
||||
appearance: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
border: 1px solid var(--primary);
|
||||
border: 1px solid var(--accent-border);
|
||||
border-radius: var(--radius-small);
|
||||
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border: 1px solid var(--primary);
|
||||
background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important;
|
||||
border: 1px solid var(--accent-border);
|
||||
background-image: var(--checkmark-icon) !important;
|
||||
background-color: var(--primary);
|
||||
background-size: 70%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
// Radio Styles
|
||||
input[type="radio"] {
|
||||
border-radius: var(--radius-circle);
|
||||
}
|
||||
|
||||
// Select Styles
|
||||
select {
|
||||
padding: 0.36rem 0.8rem;
|
||||
color: var(--gray-dark);
|
||||
border: thin solid var(--lighter);
|
||||
background-color: var(--white);
|
||||
color: var(--text-strong);
|
||||
border: thin solid var(--border-muted);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -308,10 +312,11 @@ select {
|
||||
textarea {
|
||||
padding: 0.25rem;
|
||||
overflow: auto;
|
||||
border-radius: var(--radius-control);
|
||||
outline: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: 1px solid var(--primary);
|
||||
border: 1px solid var(--control-focus);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -369,17 +374,17 @@ li {
|
||||
|
||||
::selection {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--lighter);
|
||||
color: var(--placeholder-color);
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited,
|
||||
a:active {
|
||||
color: var(--primary);
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -404,4 +409,4 @@ a:hover {
|
||||
|
||||
div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
+68
-1609
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,127 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-system-argon-config"] {
|
||||
.argon-color-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--control-gap);
|
||||
width: var(--form-control-min-width);
|
||||
max-width: 100%;
|
||||
|
||||
> input[type="text"] {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .argon-color-swatch {
|
||||
flex: 0 0 2.5rem;
|
||||
width: 2.5rem;
|
||||
min-width: 0;
|
||||
height: 2.5rem;
|
||||
padding: .25rem;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: 0;
|
||||
border-radius: calc(var(--radius-control) - .25rem - 1px);
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: 0;
|
||||
border-radius: calc(var(--radius-control) - .25rem - 1px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This file list contains plain actions, so rounding the final table is safe.
|
||||
#cbi-filelist > .table:last-child {
|
||||
border-collapse: separate;
|
||||
border-end-start-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.argon-login-preview {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-block-start: var(--field-gap);
|
||||
border-radius: var(--radius-panel);
|
||||
}
|
||||
|
||||
.argon-branding-content {
|
||||
padding: var(--field-gap) var(--section-inset) var(--section-inset);
|
||||
|
||||
> p {
|
||||
margin: 0 0 var(--field-gap);
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
> .cbi-button + p {
|
||||
margin: var(--field-gap) 0 0;
|
||||
}
|
||||
|
||||
.cbi-button {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.argon-branding-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--section-gap);
|
||||
margin-block-end: var(--field-gap);
|
||||
}
|
||||
|
||||
.argon-branding-card {
|
||||
flex: 1 1 18rem;
|
||||
min-width: 0;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 var(--control-gap);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.argon-branding-row,
|
||||
.argon-branding-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--control-gap);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.argon-branding-row {
|
||||
gap: var(--field-gap);
|
||||
|
||||
> img {
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
// out: false
|
||||
|
||||
// System - Attended Sysupgrade
|
||||
[data-page="admin-system-attendedsysupgrade"],
|
||||
[data-page="admin-system-attendedsysupgrade-overview"] {
|
||||
#view > p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--field-gap);
|
||||
margin: 0;
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
padding-inline: var(--section-inset);
|
||||
line-height: 1.5;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
> .cbi-button {
|
||||
align-self: flex-start;
|
||||
margin-inline: var(--section-inset);
|
||||
max-width: calc(100% - 2 * var(--section-inset));
|
||||
min-height: 2.5rem;
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-page="admin-system-attendedsysupgrade-configuration"] {
|
||||
.cbi-map {
|
||||
.cbi-map-descr {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
> .cbi-section > .cbi-section-node {
|
||||
padding-block: var(--field-gap);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// out: false
|
||||
|
||||
// System - Auto Reboot
|
||||
[data-page="admin-system-autoreboot"] {
|
||||
#cbi-autoreboot {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// out: false
|
||||
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// out: false
|
||||
|
||||
// Custom command views and their standalone output.
|
||||
[data-page^="admin-system-commands"] .panel-title,
|
||||
[data-page^="command-cfg"] .mobile-hide,
|
||||
[data-page^="command-cfg"] .showSide {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// out: false
|
||||
|
||||
// System - Crontab
|
||||
[data-page="admin-system-crontab"] {
|
||||
#view p {
|
||||
textarea {
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
line-height: 1.5;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
min-height: 15rem;
|
||||
padding: 1rem;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
background: var(--input-bg);
|
||||
color: var(--muted-text);
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid var(--control-border);
|
||||
transition: box-shadow .15s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// out: false
|
||||
|
||||
// System - Crontab Helper
|
||||
[data-page="admin-system-crontabhelper"] {
|
||||
.crontab-row {
|
||||
.dropdown-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// out: false
|
||||
|
||||
// Services - Dynamic DNS
|
||||
[data-page="admin-services-ddns"] {
|
||||
#syslog {
|
||||
overflow: auto;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// out: false
|
||||
|
||||
// Network - DHCP and DNS
|
||||
[data-page="admin-network-dhcp"] {
|
||||
.cbi-value {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// The final lease table reaches the card edge through two form wrappers.
|
||||
[data-tab="__leases__"] > .cbi-section-node > .cbi-value:last-child {
|
||||
border-end-start-radius: var(--radius-card);
|
||||
border-end-end-radius: var(--radius-card);
|
||||
|
||||
> .table:last-child {
|
||||
border-collapse: separate;
|
||||
border-end-start-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-section-node-tabbed > [data-tab-title] {
|
||||
padding-inline: var(--section-inset);
|
||||
}
|
||||
|
||||
// These panes contain whole sections which already own their text inset.
|
||||
.cbi-section-node-tabbed > [data-tab="tagsparent"],
|
||||
.cbi-section-node-tabbed > [data-tab="matchtags"],
|
||||
.cbi-section-node-tabbed > [data-tab="settags"],
|
||||
.cbi-section-node-tabbed > [data-tab="vc"],
|
||||
.cbi-section-node-tabbed > [data-tab="uc"] {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.cbi-section-descr code,
|
||||
.cbi-value-description code {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// out: false
|
||||
|
||||
// Network - Diagnostics
|
||||
[data-page="admin-network-diagnostics"] {
|
||||
.table {
|
||||
// The toolbar must not become the dropdown's scroll/size boundary.
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cbi-section {
|
||||
padding: 1rem;
|
||||
font-family: monospace;
|
||||
background: var(--surface-color) !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
line-height: 1.5;
|
||||
background: transparent;
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--muted-text);
|
||||
border: 1px solid var(--control-border);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.td {
|
||||
background-color: var(--surface-color) !important;
|
||||
border-bottom: 1px solid var(--border-color) !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1 1 18rem;
|
||||
min-width: 0;
|
||||
|
||||
input {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
flex: 1 1 0;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
margin: 0 !important;
|
||||
border-left-width: 1px !important;
|
||||
border-right-width: 0 !important;
|
||||
border-radius: var(--radius-control) 0 0 var(--radius-control) !important;
|
||||
|
||||
[dir="rtl"] & {
|
||||
border-left-width: 0 !important;
|
||||
border-right-width: 1px !important;
|
||||
border-radius: 0 var(--radius-control) var(--radius-control) 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.diag-action {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
min-width: 6rem;
|
||||
|
||||
> .cbi-button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-dropdown,
|
||||
.cbi-button {
|
||||
height: 2.5rem;
|
||||
border-inline-start: none !important;
|
||||
border-end-start-radius: 0 !important;
|
||||
border-start-start-radius: 0 !important;
|
||||
|
||||
.more {
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-indent: 5000px;
|
||||
background-color: var(--surface-color)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table,
|
||||
.table > tbody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.diag-action .cbi-dropdown:not([multiple]) > .more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.cbi-dropdown {
|
||||
.open {
|
||||
color: var(--accent-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
// out: false
|
||||
|
||||
[data-page^="admin-system-diskman"] {
|
||||
.dkm-card {
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--section-shadow);
|
||||
}
|
||||
|
||||
.dkm-card-header {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--control-gap);
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dkm-card-title,
|
||||
.dkm-item-value {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.dkm-card-actions {
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
gap: var(--control-gap);
|
||||
margin-inline-start: auto;
|
||||
|
||||
select {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dkm-card-body {
|
||||
grid-template-columns: ~"repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr))";
|
||||
}
|
||||
|
||||
.dkm-item-label,
|
||||
.dm-part-free {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
.dm-part-bar {
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-network-dns"] {
|
||||
input[type="text"],
|
||||
.cbi-section-descr code,
|
||||
.cbi-value-description code {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// out: false
|
||||
|
||||
// Legacy Docker container configuration.
|
||||
#cbi-docker {
|
||||
.cbi-section {
|
||||
.cbi-section-node {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// out: false
|
||||
|
||||
// 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;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.cbi-section.cbi-tblsection {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
// out: false
|
||||
|
||||
// Bridge the app's custom cards to the active Argon appearance, including
|
||||
// manual theme changes that differ from the system's media preference.
|
||||
[data-page^="admin-vpn-easytier"] #maincontent {
|
||||
--card-bg: var(--surface-color);
|
||||
--card-shadow: transparent;
|
||||
--text-primary: var(--text-strong);
|
||||
--text-secondary: var(--muted-text);
|
||||
--tab-active: var(--link-color);
|
||||
--tab-hover: var(--surface-active);
|
||||
--gradient-bg: var(--surface-color);
|
||||
--hover-bg: var(--surface-active);
|
||||
--upload-bg: var(--surface-color);
|
||||
--upload-border: var(--border-color);
|
||||
--upload-hover: var(--surface-active);
|
||||
--log-bg: var(--surface-color);
|
||||
--log-text: var(--text-color);
|
||||
--log-border: var(--border-color);
|
||||
--log-header-bg: var(--surface-muted);
|
||||
--log-hover: var(--surface-active);
|
||||
--log-info: var(--link-color);
|
||||
--log-warn: var(--warning);
|
||||
--log-error: var(--danger);
|
||||
--info: var(--primary);
|
||||
--error: var(--danger);
|
||||
|
||||
.et-quick-actions,
|
||||
.et-status-card,
|
||||
.et-conninfo-container,
|
||||
.web-card,
|
||||
.upload-card,
|
||||
.log-container {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--section-shadow);
|
||||
}
|
||||
|
||||
.et-tabs-container {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overscroll-behavior-inline: contain;
|
||||
}
|
||||
|
||||
.et-tab {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.et-refresh-btn {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
.et-error {
|
||||
color: var(--danger);
|
||||
background: color-mix(in srgb, var(--danger) 10%, var(--surface-color));
|
||||
border-color: color-mix(in srgb, var(--danger) 35%, var(--border-color));
|
||||
}
|
||||
|
||||
// This app uses .modal for its full-screen backdrop; LuCI uses it for
|
||||
// the dialog itself. Keep the two structures independent.
|
||||
.modal:not(.cbi-modal) {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: var(--page-gutter);
|
||||
border: 0;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none;
|
||||
container-type: normal;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
border-radius: var(--radius-dialog);
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-page^="admin-vpn-easytier"] #maincontent {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
// out: false
|
||||
|
||||
// System - File Assistant
|
||||
[data-page="admin-system-fileassistant"] {
|
||||
.fb-container td[class$="-icon"]::before {
|
||||
filter: var(--file-icon-filter);
|
||||
}
|
||||
#upload-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fb-container .panel-title {
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
}
|
||||
|
||||
.cbi-section.fb-container {
|
||||
padding: 0.5rem;
|
||||
|
||||
label.cbi-value-title {
|
||||
line-height: 1.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
width: 60px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.cbi-value-field {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
div#list-content {
|
||||
table.cbi-section-table {
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
td.cbi-section-table-cell {
|
||||
width: 232px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:nth-child(1) {
|
||||
td.parent-icon {
|
||||
strong {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.cbi-value-field.file-icon,
|
||||
td.cbi-value-field.folder-icon {
|
||||
strong {
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fb-container .panel-container {
|
||||
border-bottom-color: var(--border-color);
|
||||
display: flex;
|
||||
|
||||
.panel-title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fb-container .upload-container {
|
||||
display: flex !important;
|
||||
|
||||
.upload-file {
|
||||
flex: 1;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-system-filemanager"] {
|
||||
#view > #file-manager-container {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.file-manager-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--control-gap);
|
||||
margin-block-end: var(--section-gap);
|
||||
|
||||
h2 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
input {
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
margin: 0 !important;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 !important;
|
||||
font-size: .875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// The plugin puts its tab bar and panes in separate sibling wrappers.
|
||||
#tab-group {
|
||||
padding: var(--control-gap) var(--section-inset) 0;
|
||||
border-start-start-radius: var(--radius-card);
|
||||
border-start-end-radius: var(--radius-card);
|
||||
background: var(--surface-color);
|
||||
|
||||
.cbi-tabmenu > li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// All plugin tabs carry cbi-tab; cbi-tab-active is its selected state.
|
||||
.cbi-tabmenu > li:not(.cbi-tab-active) {
|
||||
border-bottom-color: transparent;
|
||||
background: var(--tab-item-bg);
|
||||
|
||||
> a {
|
||||
color: var(--tab-inactive-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.cbi-tabmenu > li:not(.cbi-tab-active):hover {
|
||||
border-bottom-color: var(--tab-color);
|
||||
background: var(--surface-active);
|
||||
|
||||
> a {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-tabcontainer-content {
|
||||
min-width: 0;
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
border-end-start-radius: var(--radius-card);
|
||||
border-end-end-radius: var(--radius-card);
|
||||
background: var(--surface-color);
|
||||
box-shadow: var(--section-shadow);
|
||||
}
|
||||
|
||||
#file-list-container,
|
||||
#content-editor {
|
||||
// These plugin margins otherwise separate each pane from its tab bar.
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
// Keep the app's adjustable columns inside its own horizontal scroll area.
|
||||
#file-list-container {
|
||||
width: 100% !important;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
border-color: var(--border-color);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-color);
|
||||
overscroll-behavior: contain;
|
||||
|
||||
&.resizeable {
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-strong);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
#file-table {
|
||||
display: table;
|
||||
min-width: 45rem;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-size: .875rem;
|
||||
line-height: 1.5;
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
// The app declares a physical left alignment with !important.
|
||||
text-align: start !important;
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
// Override the app's forced white hover surface in dark mode.
|
||||
background-color: var(--surface-active) !important;
|
||||
}
|
||||
|
||||
th[data-field="actions"],
|
||||
td:has(> .select-checkbox) {
|
||||
// The app's initial 100px column clips its final download action.
|
||||
min-width: 12rem !important;
|
||||
padding-inline: .75rem;
|
||||
}
|
||||
|
||||
th[data-field="actions"] {
|
||||
// A fixed table layout takes column widths from the header.
|
||||
width: 12rem !important;
|
||||
}
|
||||
|
||||
.select-checkbox {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.download-button,
|
||||
.edit-button,
|
||||
.duplicate-button,
|
||||
.delete-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin: 0;
|
||||
margin-inline-start: .25rem;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: currentColor;
|
||||
-webkit-mask: var(--file-action-icon) center / contain no-repeat;
|
||||
mask: var(--file-action-icon) center / contain no-repeat;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-active);
|
||||
}
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
--file-action-icon: url('../icon/edit.svg');
|
||||
}
|
||||
|
||||
.duplicate-button {
|
||||
--file-action-icon: url('../icon/copy.svg');
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
--file-action-icon: url('../icon/delete.svg');
|
||||
}
|
||||
|
||||
.download-button {
|
||||
--file-action-icon: url('../icon/download.svg');
|
||||
}
|
||||
|
||||
.sort-button {
|
||||
height: 2rem;
|
||||
border-color: var(--border-color);
|
||||
background: var(--surface-color);
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-active);
|
||||
color: var(--link-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.directory-link,
|
||||
.download-button,
|
||||
.edit-button,
|
||||
.duplicate-button,
|
||||
.status-link {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
#content-editor,
|
||||
.editor-container,
|
||||
#content-help {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.editor-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.editor-container,
|
||||
#content-help {
|
||||
width: 100% !important;
|
||||
resize: vertical !important;
|
||||
}
|
||||
|
||||
#content-settings > div:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#settings-form label {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
#status-bar,
|
||||
.line-numbers {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
#status-bar {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--control-gap);
|
||||
}
|
||||
|
||||
#status-info {
|
||||
flex: 1 1 16rem;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
gap: var(--control-gap);
|
||||
|
||||
> span,
|
||||
> input {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
> input {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#status-progress {
|
||||
display: flex;
|
||||
flex: 1 1 12rem;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#editor-textarea {
|
||||
background: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// out: false
|
||||
|
||||
// System - File Transfer
|
||||
[data-page="admin-system-filetransfer"] {
|
||||
#cbi-upload {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cbi-section-table {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// out: false
|
||||
|
||||
// Legacy firewall and switch tables share this compatibility contract.
|
||||
/* firewall */
|
||||
#iptables {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Firewall form {
|
||||
margin: 2rem 2rem 0 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#cbi-firewall-redirect,
|
||||
#cbi-network-switch_vlan,
|
||||
#cbi-firewall-zone {
|
||||
table {
|
||||
* {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
select {
|
||||
min-width: 3.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cbi-network-switch_vlan {
|
||||
|
||||
.th,
|
||||
.td {
|
||||
flex-basis: 12%;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.td {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#cbi-firewall-zone {
|
||||
.table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.td {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-network-firewall-zones"] {
|
||||
#cbi-firewall-defaults > .cbi-section-node:last-child {
|
||||
padding-block-end: var(--field-gap);
|
||||
}
|
||||
|
||||
#cbi-firewall-zone .cbi-input-select {
|
||||
min-width: 6.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] & .zone-forwards > span {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
#cbi-firewall-zone {
|
||||
.td[data-name="_info"] {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-page="admin-network-firewall-ipsets"] {
|
||||
[data-name="entry"] input[type="text"],
|
||||
.cbi-value-description code {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
[data-name="entry"] input[type="text"] {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
[data-page="admin-network-firewall-forwards"],
|
||||
[data-page="admin-network-firewall-rules"],
|
||||
[data-page="admin-network-firewall-snats"] {
|
||||
[data-name$="_ip"],
|
||||
[data-name="src_dip"],
|
||||
[data-name$="_port"],
|
||||
[data-name="src_dport"] {
|
||||
input[type="text"],
|
||||
.cbi-dropdown > ul {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
.td[data-name="_match"],
|
||||
.td[data-name="_target"] {
|
||||
small {
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
var:not(.cbi-tooltip-container) {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1153px) {
|
||||
.tr[data-title]::before,
|
||||
.tr.cbi-section-table-titles.named::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.td.cbi-section-table-titles {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.td[data-name="_match"] {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.tr[data-title]::before {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
// out: false
|
||||
|
||||
// System - Flash Firmware
|
||||
[data-page="admin-system-flash"] {
|
||||
[data-tab="config"] {
|
||||
textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .cbi-section-node {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
> .cbi-page-actions {
|
||||
padding: var(--field-gap) 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal.cbi-modal > ul {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
textarea {
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.cbi-section {
|
||||
.cbi-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-map-tabbed {
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.cbi-section-node {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0;
|
||||
letter-spacing: 0.1rem;
|
||||
color: var(--text-strong);
|
||||
font-weight: bold;
|
||||
padding: 1rem 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.cbi-section-descr {
|
||||
font-weight: 600;
|
||||
padding: 1rem 0 1rem 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal label>input[type="checkbox"] {
|
||||
vertical-align: text-top;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// out: false
|
||||
|
||||
// Network - Interfaces
|
||||
[data-page="admin-network-network"] {
|
||||
.cbi-value-field {
|
||||
.cbi-dynlist {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.td>.ifacebadge>.cbi-tooltip-container {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
div[data-name="_gen_server_keypair"],
|
||||
div[data-name="_gen_peer_keypair"],
|
||||
div[data-name="_gen_psk"] {
|
||||
.cbi-value-title {
|
||||
height: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#modal_overlay>.modal.cbi-modal>div>p>textarea {
|
||||
height: 20em !important;
|
||||
border: 1px solid var(--control-border) !important;
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// out: false
|
||||
|
||||
// Status - IPTables
|
||||
[data-page="admin-status-iptables"] {
|
||||
.right {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-status-logs"],
|
||||
[data-page="admin-status-logs-syslog"],
|
||||
[data-page="admin-status-logs-dmesg"] {
|
||||
#syslog {
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
[data-page="admin-status-logs"],
|
||||
[data-page="admin-status-logs-syslog"],
|
||||
[data-page="admin-status-logs-dmesg"] {
|
||||
#content_syslog > div:has(> input, > select) {
|
||||
line-height: 2.5rem;
|
||||
margin-block-end: var(--control-gap) !important;
|
||||
|
||||
> label,
|
||||
> input,
|
||||
> select {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Native log filters carry per-input bottom margins; rows own the spacing.
|
||||
> input,
|
||||
> select {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Native log filters have several ungrouped inline controls. Keep each label
|
||||
// with its field on narrow screens without changing filtering or log wrapping.
|
||||
@media screen and (max-width: 600px) {
|
||||
#content_syslog {
|
||||
> div:has(> #logFacilitySelect),
|
||||
> div:has(> #logTextFilter),
|
||||
> div:has(> #logFromTime) {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1rem max-content minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: var(--control-gap);
|
||||
|
||||
> label,
|
||||
> input,
|
||||
> select {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
> label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> input:not([type="checkbox"]),
|
||||
> select {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> label[for="logMaxRows"] {
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
|
||||
> #logMaxRows,
|
||||
> #logToTime {
|
||||
grid-column: 4;
|
||||
}
|
||||
}
|
||||
|
||||
> div:has(> #logFromTime) > label[for="logSeveritySelect"] {
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
|
||||
> div:has(> #invertSeverity) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
|
||||
> label {
|
||||
margin: 0 !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// out: false
|
||||
|
||||
// MultiWAN cards in the system overview and the mwan3 overview.
|
||||
#mwan3-service-status {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-status-nftables"] {
|
||||
.nft-table,
|
||||
.nft-chains {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
gap: var(--section-gap);
|
||||
}
|
||||
|
||||
.nft-chain {
|
||||
min-width: 0;
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-color);
|
||||
box-shadow: var(--section-shadow);
|
||||
|
||||
> h4 {
|
||||
margin: 0;
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
font-size: .9375rem;
|
||||
line-height: 1.4;
|
||||
color: var(--text-strong);
|
||||
background: var(--surface-raised);
|
||||
border-start-start-radius: inherit;
|
||||
border-start-end-radius: inherit;
|
||||
overflow-wrap: anywhere;
|
||||
scroll-margin-block-start: 1rem;
|
||||
|
||||
&:target {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nft-chain-hook {
|
||||
padding: var(--control-gap) var(--section-inset) var(--field-gap);
|
||||
font-size: .8125rem;
|
||||
line-height: 1.5;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep native table semantics and the match/action pairing at every viewport.
|
||||
.nft-rules {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-size: .8125rem;
|
||||
overflow: visible;
|
||||
|
||||
.tr,
|
||||
.tr.table-titles {
|
||||
display: table-row;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.th,
|
||||
.td {
|
||||
display: table-cell;
|
||||
min-width: 0;
|
||||
// The native view injects a .25em !important cell padding after the theme.
|
||||
padding: var(--control-gap) var(--section-inset) !important;
|
||||
text-align: start !important;
|
||||
vertical-align: top;
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.th {
|
||||
font-weight: 600;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.td {
|
||||
background: var(--surface-color);
|
||||
}
|
||||
|
||||
> .tr:nth-child(2n of :has(> .td)) > .td {
|
||||
background: var(--row-alt);
|
||||
}
|
||||
|
||||
.tr:last-child > .td:first-child {
|
||||
border-end-start-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.tr:last-child > .td:last-child {
|
||||
border-end-end-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.ifacebadge {
|
||||
// Expressions contain text nodes, var and strong; flex splits the sentence.
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-block: .125rem;
|
||||
margin-inline: 0 .125rem;
|
||||
padding: .25rem .5rem;
|
||||
vertical-align: top;
|
||||
font-size: inherit;
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--text-strong);
|
||||
background: var(--badge-bg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-strong);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: .15em;
|
||||
}
|
||||
|
||||
.nft-set,
|
||||
.nft-list {
|
||||
max-width: 100%;
|
||||
vertical-align: baseline;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.nft-set-items,
|
||||
.nft-list-items {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.nft-counter {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
// Hidden native tooltips are placed outside the logical start edge.
|
||||
// Keep that positioning direction tied to the page, not a data token.
|
||||
[dir="rtl"] & .cbi-tooltip {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// Keep addresses, identifiers and byte units in their data order even
|
||||
// when translated descriptions and the two columns follow RTL.
|
||||
strong,
|
||||
.nft-counter > var {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
// Verdict maps have one native div per key/action pair. Give every key
|
||||
// the same column so short labels do not pull their action to the side.
|
||||
.td > div:has(> span:first-child + span.ifacebadge) {
|
||||
display: grid;
|
||||
grid-template-columns: 8em minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 0 var(--control-gap);
|
||||
|
||||
> span {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> span:first-child {
|
||||
padding-block: .25rem;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: match-parent;
|
||||
}
|
||||
|
||||
> .ifacebadge {
|
||||
justify-self: start;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
+ div {
|
||||
margin-block-start: var(--control-gap);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.nft-rules .th,
|
||||
.nft-rules .td {
|
||||
padding: var(--control-gap) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.alert-message.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// out: false
|
||||
|
||||
// Status - Network Bandwidth Monitor
|
||||
[data-page="admin-services-nlbw-display"] {
|
||||
.cbi-section[data-tab="export"] {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
.cbi-section > .right {
|
||||
margin: 15px 15px 0px 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
// out: false
|
||||
|
||||
// Services - NPC
|
||||
[data-page="admin-services-npc"] {
|
||||
div[id="cbid.npc.config.vkey"] {
|
||||
white-space: normal;
|
||||
|
||||
input[id="widget.cbid.npc.config.vkey"][type="password"] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cbi-button {
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
div[id^="cbid.npc."][id$=".server_addr"]:not([id="cbid.npc.config.server_addr"]),
|
||||
div[id^="cbid.npc."][id$=".vkey"]:not([id="cbid.npc.config.vkey"]),
|
||||
div[id^="cbid.npc."][id$=".protocol"]:not([id="cbid.npc.config.protocol"]),
|
||||
div[id^="cbid.npc."][id$=".dns"]:not([id="cbid.npc.config.dns"]) {
|
||||
+br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.cbi-value.nowrap {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,574 @@
|
||||
// out: false
|
||||
|
||||
// Services - OpenClash
|
||||
[data-page^="admin-services-openclash"] {
|
||||
img[src$="arrow-clockwise-light.svg"],
|
||||
img[src$="wrench-light.svg"],
|
||||
img[src$="eye-light.svg"] {
|
||||
filter: var(--image-filter);
|
||||
}
|
||||
// One adapter contract for OpenClash's current component set.
|
||||
// Semantic colours remain owned by OpenClash; primary interactions and
|
||||
// neutral surfaces follow Argon's runtime-configurable palette.
|
||||
--oc-accent: var(--primary);
|
||||
--oc-accent-hover: var(--primary);
|
||||
--oc-accent-strong: var(--primary);
|
||||
--oc-accent-a5: transparent;
|
||||
--oc-accent-a10: transparent;
|
||||
--oc-accent-a20: transparent;
|
||||
--oc-accent-a30: transparent;
|
||||
--oc-accent-a40: transparent;
|
||||
--oc-accent-a50: transparent;
|
||||
--oc-accent-a60: transparent;
|
||||
--oc-surface: var(--surface-color);
|
||||
--oc-surface-muted: var(--surface-muted);
|
||||
--oc-control-bg: var(--input-bg);
|
||||
--oc-border: var(--border-color);
|
||||
--oc-text: var(--text-color);
|
||||
--oc-text-muted: var(--plugin-text-muted);
|
||||
--oc-neutral: var(--plugin-neutral);
|
||||
--oc-scrollbar: var(--plugin-scrollbar);
|
||||
|
||||
@supports (color: color-mix(in srgb, red, blue)) {
|
||||
--oc-accent-hover: color-mix(in srgb, var(--oc-accent) 88%, black);
|
||||
--oc-accent-strong: color-mix(in srgb, var(--oc-accent) 78%, black);
|
||||
--oc-accent-a5: color-mix(in srgb, var(--oc-accent) 5%, transparent);
|
||||
--oc-accent-a10: color-mix(in srgb, var(--oc-accent) 10%, transparent);
|
||||
--oc-accent-a20: color-mix(in srgb, var(--oc-accent) 20%, transparent);
|
||||
--oc-accent-a30: color-mix(in srgb, var(--oc-accent) 30%, transparent);
|
||||
--oc-accent-a40: color-mix(in srgb, var(--oc-accent) 40%, transparent);
|
||||
--oc-accent-a50: color-mix(in srgb, var(--oc-accent) 50%, transparent);
|
||||
--oc-accent-a60: color-mix(in srgb, var(--oc-accent) 60%, transparent);
|
||||
}
|
||||
|
||||
.oc {
|
||||
--bg-white: var(--oc-surface) !important;
|
||||
--bg-light: var(--oc-surface) !important;
|
||||
--bg-gray: var(--oc-surface) !important;
|
||||
--bg-dark: var(--oc-surface) !important;
|
||||
--hover-bg: var(--oc-surface-muted) !important;
|
||||
--editor-bg: var(--oc-control-bg) !important;
|
||||
--card-bg-start: var(--oc-surface) !important;
|
||||
--border-color: var(--oc-border) !important;
|
||||
--border-light: var(--oc-border) !important;
|
||||
--border-dark: var(--oc-border) !important;
|
||||
--tab-border: var(--oc-border) !important;
|
||||
--divider: var(--oc-border) !important;
|
||||
--text-primary: var(--oc-text) !important;
|
||||
--text-secondary: var(--oc-text-muted) !important;
|
||||
--text-title: var(--oc-text) !important;
|
||||
--primary-color: var(--oc-accent) !important;
|
||||
--primary-bright: var(--oc-accent) !important;
|
||||
--btn-primary-hover: var(--oc-accent-hover) !important;
|
||||
--announcement-end: var(--oc-accent-strong) !important;
|
||||
--card-btn-bg: var(--oc-accent) !important;
|
||||
--card-accent: var(--oc-accent) !important;
|
||||
--primary-a5: var(--oc-accent-a5) !important;
|
||||
--primary-a10: var(--oc-accent-a10) !important;
|
||||
--primary-a20: var(--oc-accent-a20) !important;
|
||||
--primary-a30: var(--oc-accent-a30) !important;
|
||||
--primary-a40: var(--oc-accent-a40) !important;
|
||||
--primary-a50: var(--oc-accent-a50) !important;
|
||||
--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;
|
||||
border-radius: var(--radius-card);
|
||||
|
||||
.developer-container,
|
||||
.subscription-info-container {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.announcement-card {
|
||||
width: auto !important;
|
||||
margin: 10px !important;
|
||||
}
|
||||
|
||||
.config-upload-content {
|
||||
background: var(--oc-surface) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Standard LuCI controls
|
||||
.cbi-button.cbi-button-add,
|
||||
.cbi-button.cbi-button-apply,
|
||||
.cbi-button.cbi-button-edit,
|
||||
.cbi-button.cbi-button-link,
|
||||
.cbi-button.cbi-button-positive,
|
||||
.cbi-button.cbi-button-reload,
|
||||
.cbi-button.cbi-button-save,
|
||||
.cbi-button.cbi-button-action,
|
||||
input.cbi-input-apply,
|
||||
input.cbi-input-reload,
|
||||
input.cbi-input-save,
|
||||
.btn.primary {
|
||||
color: var(--accent-text) !important;
|
||||
border-color: var(--oc-accent) !important;
|
||||
background: var(--oc-accent) !important;
|
||||
}
|
||||
|
||||
.cbi-button.cbi-button-remove,
|
||||
.cbi-button.cbi-button-negative,
|
||||
input.cbi-input-remove {
|
||||
color: var(--text-on-accent) !important;
|
||||
border-color: var(--danger-bg) !important;
|
||||
background: var(--danger-bg) !important;
|
||||
}
|
||||
|
||||
.cbi-button.cbi-button-reset {
|
||||
color: var(--text-on-accent) !important;
|
||||
border-color: var(--warning-action-bg) !important;
|
||||
background: var(--warning-action-bg) !important;
|
||||
}
|
||||
|
||||
.cbi-button.cbi-button-find,
|
||||
input.cbi-input-find {
|
||||
color: var(--text-on-accent) !important;
|
||||
border-color: var(--oc-neutral) !important;
|
||||
background-color: var(--oc-neutral) !important;
|
||||
}
|
||||
|
||||
// Sorting controls are compact icon buttons. A neutral outline keeps the
|
||||
// shared SVG legible on light surfaces without implying disabled.
|
||||
#cbi-openclash .cbi-button-up,
|
||||
#cbi-openclash .cbi-button-down {
|
||||
border-color: var(--oc-neutral) !important;
|
||||
background-color: var(--oc-control-bg) !important;
|
||||
}
|
||||
|
||||
#cbi-openclash .cbi-button-up:not(:disabled):hover,
|
||||
#cbi-openclash .cbi-button-up:not(:disabled):focus,
|
||||
#cbi-openclash .cbi-button-down:not(:disabled):hover,
|
||||
#cbi-openclash .cbi-button-down:not(:disabled):focus {
|
||||
border-color: var(--oc-accent) !important;
|
||||
background-color: var(--oc-accent-a10) !important;
|
||||
box-shadow: 0 0 0 2px var(--oc-accent-a10) !important;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
border-color: var(--oc-accent) !important;
|
||||
|
||||
&:checked {
|
||||
border-color: var(--oc-accent) !important;
|
||||
background-color: var(--oc-accent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
select,
|
||||
textarea,
|
||||
.cbi-dropdown,
|
||||
.oc .oc-input-textarea,
|
||||
.oc .sub-info-url-form-textarea,
|
||||
.oc .select-class,
|
||||
.oc .custom-option-input {
|
||||
color: var(--oc-text) !important;
|
||||
border-color: var(--control-border) !important;
|
||||
background-color: var(--oc-control-bg) !important;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="url"]:focus,
|
||||
select:focus,
|
||||
textarea:focus,
|
||||
.cbi-dropdown:focus,
|
||||
.cbi-dropdown[open],
|
||||
.oc .oc-input-textarea:focus,
|
||||
.oc .sub-info-url-form-textarea:focus,
|
||||
.oc .select-class:focus,
|
||||
.oc .custom-option-input:focus {
|
||||
border-color: var(--control-focus) !important;
|
||||
box-shadow: 0 0 0 2px var(--oc-accent-a10) !important;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.CodeMirror,
|
||||
.oc .cm-editor {
|
||||
color: var(--oc-text) !important;
|
||||
border: 1px solid var(--oc-border) !important;
|
||||
background: var(--oc-control-bg) !important;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters,
|
||||
.oc .cm-gutters {
|
||||
border-color: var(--oc-border) !important;
|
||||
background: var(--oc-surface-muted) !important;
|
||||
}
|
||||
|
||||
.CodeMirror.CodeMirror-focused,
|
||||
.oc .cm-editor.cm-focused {
|
||||
border-color: var(--oc-accent) !important;
|
||||
box-shadow: 0 0 0 2px var(--oc-accent-a10) !important;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
// Both tab classes are current component variants, not version branches.
|
||||
.oc .radio-button input[type="radio"]:checked+label,
|
||||
.oc #tab-header>ul.cbi-tabmenu>li.cbi-tab,
|
||||
.oc #tab-header>ul.oc-tabmenu>li.oc-tab {
|
||||
color: var(--accent-text) !important;
|
||||
border-color: var(--oc-accent) !important;
|
||||
background: var(--oc-accent) !important;
|
||||
}
|
||||
|
||||
.oc .radio-button input[type="radio"]:checked+label {
|
||||
box-shadow: 0 1px 2px var(--oc-accent-a10) !important;
|
||||
}
|
||||
|
||||
.oc .radio-button label:hover,
|
||||
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):hover,
|
||||
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):focus,
|
||||
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):hover,
|
||||
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):focus {
|
||||
color: var(--oc-accent) !important;
|
||||
border-color: var(--oc-accent) !important;
|
||||
background: var(--oc-accent-a10) !important;
|
||||
}
|
||||
|
||||
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):hover>a,
|
||||
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):focus>a,
|
||||
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):hover>a,
|
||||
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):focus>a {
|
||||
color: var(--oc-accent) !important;
|
||||
}
|
||||
|
||||
.oc .card .general .btn:hover,
|
||||
.oc #addCustomOption:hover {
|
||||
background: var(--oc-accent-hover) !important;
|
||||
}
|
||||
|
||||
.oc .help-link:hover {
|
||||
background: var(--oc-accent-a10) !important;
|
||||
}
|
||||
|
||||
.oc .select-option[data-value="custom"] {
|
||||
border-color: var(--oc-accent-a20) !important;
|
||||
background: var(--oc-accent-a10) !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--oc-accent-a20) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.oc .announcement-banner,
|
||||
.oc .oix-announcement {
|
||||
background: linear-gradient(275deg, var(--oc-accent), var(--oc-accent-strong)) !important;
|
||||
}
|
||||
|
||||
.oc .announcement-banner::before,
|
||||
.oc .oix-announcement::before {
|
||||
background: var(--oc-accent-strong) !important;
|
||||
}
|
||||
|
||||
// The literal fill is a JavaScript state marker; change presentation only.
|
||||
.oc #mode-icon rect[fill="#2F88FF"] {
|
||||
fill: var(--oc-accent) !important;
|
||||
}
|
||||
|
||||
// Argon cards use colour and shadow for hover feedback, not layout motion.
|
||||
.oc .sub-card:hover,
|
||||
.oc .myip-ip-item:hover,
|
||||
.oc .myip-check-item:hover,
|
||||
.oc .myip-card-item:hover,
|
||||
.oc .card:hover,
|
||||
.oc .oix-header:hover,
|
||||
.oc .oix-card:hover,
|
||||
.oc .config-upload-btn-large:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
// Legacy help text is primary emphasis; success and error remain semantic.
|
||||
b[style*="color:green"],
|
||||
b[style*="color: green"],
|
||||
b[color="green"] {
|
||||
color: var(--oc-accent) !important;
|
||||
}
|
||||
|
||||
font[style*="color:green"],
|
||||
font[style*="color: green"],
|
||||
font[color="green"] {
|
||||
color: var(--success) !important;
|
||||
}
|
||||
|
||||
b[style*="color:red"],
|
||||
b[style*="color: red"],
|
||||
b[color="red"],
|
||||
font[style*="color:red"],
|
||||
font[style*="color: red"],
|
||||
font[color="red"] {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
// Normalize the config switcher and top-level navigation height.
|
||||
.tabs>#tool_label {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
.tool_label_span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-section-node-tabbed>.cbi-tabcontainer {
|
||||
gap: 0;
|
||||
|
||||
>.cbi-value {
|
||||
padding-top: 0.4375rem;
|
||||
padding-bottom: 0.4375rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-page="admin-services-openclash-config"],
|
||||
&[data-page="admin-services-openclash-config-subscribe"],
|
||||
&[data-page^="admin-services-openclash-custom-dns-edit"],
|
||||
&[data-page^="admin-services-openclash-config-subscribe-edit"],
|
||||
&[data-page^="admin-services-openclash-groups-config"],
|
||||
&[data-page^="admin-services-openclash-proxy-provider-config"],
|
||||
&[data-page^="admin-services-openclash-servers-config"],
|
||||
&[data-page^="admin-services-openclash-other-file-edit"] {
|
||||
.cbi-map>.cbi-section>.cbi-section-node:not(.cbi-section-node-tabbed) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-page^="admin-services-openclash-config-subscribe-edit"] {
|
||||
[id^="cbi-openclash-"][id$="-de_ex_keyword"] {
|
||||
>.cbi-value-field {
|
||||
>div:not([class])>span.cbi-checkbox {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
>.cbi-dropdown[multiple] {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cbi-openclash>fieldset {
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
||||
>table>tbody>tr>td {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0 10px 10px 10px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.myip-main-card {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
.myip-section-title {
|
||||
margin: 0;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-card .card-title {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.oc .main-cards-container {
|
||||
margin: 0 !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.oc .config-file-bottom {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.card-actions {
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.oc .card-content {
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.oc .card-controls {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.oc .plugin-toggle-container {
|
||||
margin-left: inherit !important;
|
||||
}
|
||||
|
||||
.oc .core-status-toggle {
|
||||
flex: 0 !important;
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
.cbi-tabmenu>li {
|
||||
border-right: none !important;
|
||||
margin: 0 0.4rem 0 0 !important;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// The custom table renderer carries release-owned inline colours. Keep its
|
||||
// layout, but make colour and row rhythm match ordinary Argon pages.
|
||||
#cbi-openclash .cbi-section-table-row,
|
||||
#cbi-openclash .cbi-rowstyle-1,
|
||||
#cbi-openclash .cbi-rowstyle-2,
|
||||
#cbi-openclash .cbi-tabcontainer>.cbi-value:nth-of-type(2n),
|
||||
#cbi-openclash table>tbody>tr:nth-of-type(2n) {
|
||||
background: var(--oc-surface) !important;
|
||||
}
|
||||
|
||||
#cbi-openclash [id^="tab-header-openclash-"] {
|
||||
border-bottom-color: var(--oc-border) !important;
|
||||
background: var(--oc-surface) !important;
|
||||
|
||||
>ul.cbi-tabmenu {
|
||||
background: var(--oc-surface) !important;
|
||||
|
||||
>li {
|
||||
color: var(--oc-text-muted) !important;
|
||||
border-color: var(--oc-border) !important;
|
||||
background: var(--oc-surface) !important;
|
||||
|
||||
&.cbi-tab {
|
||||
color: var(--accent-text) !important;
|
||||
border-color: var(--oc-accent) !important;
|
||||
background: var(--oc-accent) !important;
|
||||
|
||||
>a {
|
||||
color: var(--accent-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.cbi-tab):hover,
|
||||
&:not(.cbi-tab):focus {
|
||||
color: var(--oc-accent) !important;
|
||||
border-color: var(--oc-accent) !important;
|
||||
background: var(--oc-accent-a10) !important;
|
||||
|
||||
>a {
|
||||
color: var(--oc-accent) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[id^="tab-header-openclash-"]>ul.cbi-tabmenu>li {
|
||||
margin: 0 !important;
|
||||
border-right: 1px solid var(--oc-border) !important;
|
||||
}
|
||||
|
||||
[id^="tab-header-openclash-"]+[id="tab-content"] {
|
||||
.td.cbi-section-table-cell>p {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#tab-content .dom {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
#cbi-openclash-dns_servers .cbi-section-table-row>
|
||||
.cbi-section-table-cell:last-child {
|
||||
min-width: 7.25rem;
|
||||
white-space: nowrap;
|
||||
|
||||
>.cbi-button {
|
||||
margin: 0 0.125rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-input-file {
|
||||
padding: 0.2813rem;
|
||||
width: 15rem !important;
|
||||
}
|
||||
|
||||
[id="container.openclash.config.debug"] fieldset {
|
||||
border: none !important;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
#diag-rc-output>pre,
|
||||
#dns-rc-output>pre {
|
||||
font-size: 0.875rem;
|
||||
color: var(--oc-text-muted);
|
||||
border: 1px solid var(--oc-border);
|
||||
background-color: var(--oc-control-bg);
|
||||
border-radius: var(--radius-panel);
|
||||
font-family: 'Google Sans' !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#debug-rc-output>textarea {
|
||||
font-family: 'Google Sans' !important;
|
||||
}
|
||||
|
||||
.CodeMirror,
|
||||
.cm-editor {
|
||||
font-size: inherit;
|
||||
font-family: 'Google Sans' !important;
|
||||
}
|
||||
|
||||
.cbi-button-up,
|
||||
.cbi-button-down {
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
select#CORE_VERSION,
|
||||
select#RELEASE_BRANCH {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
&[data-page^="admin-services-openclash-config-subscribe-edit"] {
|
||||
[id^="cbi-openclash-"][id$="-de_ex_keyword"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>label.cbi-value-title {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
>.cbi-value-field {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
>.cbi-dropdown[multiple] {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// out: false
|
||||
|
||||
/* openvpn bug fix */
|
||||
.OpenVPN a {
|
||||
line-height: initial !important;
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
// out: false
|
||||
|
||||
.cbi-section.fade-in .cbi-title {
|
||||
position: relative;
|
||||
|
||||
> h3 {
|
||||
align-items: center;
|
||||
gap: var(--control-gap);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
// Older LuCI places the indicator in a separate header wrapper.
|
||||
> div:last-child {
|
||||
position: absolute;
|
||||
inset-inline-end: var(--section-inset);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:has(> div:last-child .label[data-indicator="poll-status"]) > h3 {
|
||||
padding-inline-end: calc(var(--section-inset) + 2.5rem);
|
||||
}
|
||||
|
||||
// Current LuCI puts the same indicator directly inside the h3.
|
||||
.label[data-indicator="poll-status"] {
|
||||
position: relative;
|
||||
flex: 0 0 2.5rem;
|
||||
width: 2.5rem;
|
||||
min-width: 2.5rem !important;
|
||||
min-height: 2rem;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
background: none !important;
|
||||
color: var(--soft-text) !important;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: currentColor;
|
||||
-webkit-mask: var(--chevron-right-icon) center / contain no-repeat;
|
||||
mask: var(--chevron-right-icon) center / contain no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Native inactive means Hide (expanded); active means Show (collapsed).
|
||||
&[data-style=inactive]::after {
|
||||
-webkit-mask-image: var(--chevron-down-icon);
|
||||
mask-image: var(--chevron-down-icon);
|
||||
}
|
||||
|
||||
[dir="rtl"] &[data-style=active]::after {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Empty overview bodies share the title inset; populated tables keep their full width.
|
||||
.cbi-section.fade-in > .cbi-title + div:has(> em:only-child) {
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
}
|
||||
|
||||
// Round the progress table itself so striped last rows follow the card corners.
|
||||
.cbi-section.fade-in > .cbi-title + div > .table:last-child:has(.cbi-progressbar) {
|
||||
border-collapse: separate;
|
||||
border-end-start-radius: var(--radius-card);
|
||||
border-end-end-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-page="admin-status"],
|
||||
[data-page="admin-status-overview"] {
|
||||
#view > div:first-child {
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
// Native port status uses a 70px grid. Keep the counters readable and wrap
|
||||
// whole cards when multiple physical ports are present.
|
||||
div[style*="display:grid;grid-template-columns:repeat"] {
|
||||
display: flex !important;
|
||||
justify-content: space-evenly !important;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.ifacebox {
|
||||
flex: 0 1 8.5rem;
|
||||
min-width: 8rem !important;
|
||||
max-width: 100% !important;
|
||||
text-align: center;
|
||||
|
||||
.ifacebox-body {
|
||||
font-size: .75rem;
|
||||
padding: .75rem .5rem;
|
||||
|
||||
.cbi-tooltip-container {
|
||||
font-size: inherit !important;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
|
||||
[dir="rtl"] & .cbi-tooltip {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .ifacebox-body:last-child {
|
||||
padding: .5rem .625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.argon-port-traffic {
|
||||
display: grid;
|
||||
gap: .375rem;
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: .5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
dt {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
color: var(--muted-text);
|
||||
font-size: .6875rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
background-color: currentColor;
|
||||
mask: var(--chevron-down-icon) center / contain no-repeat;
|
||||
-webkit-mask: var(--chevron-down-icon) center / contain no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
[data-direction="tx"] dt::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
color: var(--text-strong);
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// out: false
|
||||
|
||||
// Legacy opkg presentation; keep after the modern package-manager adapters.
|
||||
// System - Package Manager (Software)
|
||||
[data-page="admin-system-opkg"] {
|
||||
h2 {
|
||||
margin-left: 0;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
input[name="filter_i18n"] {
|
||||
top: 2px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
div.btn {
|
||||
line-height: 3;
|
||||
display: inline;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
|
||||
#maincontent>.container {
|
||||
margin: 0 1.25rem 1rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
// out: false
|
||||
|
||||
// Native package-manager controls inject their own flex rules after the theme.
|
||||
[data-page="admin-system-package-manager"],
|
||||
[data-page="admin-system-opkg"] {
|
||||
.controls {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
gap: var(--field-gap);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-color);
|
||||
|
||||
> div {
|
||||
flex: 1 1 18rem;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
gap: var(--control-gap);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
flex-basis: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> div > label {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.control-group > input {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.pager {
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label:has(> input[type="radio"]) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
flex: 0 0 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.td.version,
|
||||
.td.size,
|
||||
.td:first-child {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
[dir="rtl"] &::before {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
.modal h5,
|
||||
.modal textarea {
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.modal textarea {
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// out: false
|
||||
|
||||
// System - Partexp (legacy and current routes).
|
||||
[data-page="admin-system-partexp"],
|
||||
[data-page="admin-system-partexp-global"] {
|
||||
.cbi-section {
|
||||
padding: var(--field-gap) 0;
|
||||
}
|
||||
|
||||
.info-note {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// The plugin renders its log as a sibling of the form's section.
|
||||
#state-container {
|
||||
padding-block: var(--field-gap);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-color);
|
||||
box-shadow: var(--section-shadow);
|
||||
|
||||
> .cbi-section {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
#partexp-form {
|
||||
--form-control-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--field-gap);
|
||||
|
||||
// updateFormVisibility() writes block/none inline. Keep hidden fields
|
||||
// hidden, and restore the theme's row layout only for visible ones.
|
||||
> .cbi-value[style*="display: block"] {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
#log-section {
|
||||
margin-top: 0 !important;
|
||||
padding-block-start: var(--section-gap);
|
||||
}
|
||||
|
||||
#log-view {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
height: 18rem;
|
||||
padding: .8rem;
|
||||
resize: vertical;
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: .875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--log-text);
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// out: false
|
||||
|
||||
// VPN - Passwall
|
||||
[data-page="admin-vpn-passwall"] h4 {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
// out: false
|
||||
|
||||
// VPN - Passwall2
|
||||
[data-page^="admin-vpn-passwall2"],
|
||||
[data-page^="admin-services-passwall2"] {
|
||||
.tr,
|
||||
.td,
|
||||
.th,
|
||||
.cbi-section-table-row,
|
||||
#cbi-passwall2-socks,
|
||||
#cbi-passwall2-socks * {
|
||||
overflow: visible !important;
|
||||
max-height: none !important;
|
||||
transform: none !important;
|
||||
filter: none !important;
|
||||
contain: none !important;
|
||||
clip-path: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// out: false
|
||||
|
||||
// System - Admin Password
|
||||
[data-page="admin-system-admin"] .cbi-map h2,
|
||||
[data-page="admin-system-admin-password"] .cbi-map h2,
|
||||
[data-page="admin-system-admin"] .cbi-map .cbi-map-descr,
|
||||
[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr {
|
||||
margin-left: 0;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
[data-page="admin-system-admin"],
|
||||
[data-page="admin-system-admin-password"] {
|
||||
.cbi-section-node {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
// LuCI supplies strength colours inline; map those states to readable text.
|
||||
[data-name="pw2"] .cbi-value-description {
|
||||
span[style="color:red"] {
|
||||
color: var(--strength-weak-text) !important;
|
||||
}
|
||||
|
||||
span[style="color:orange"] {
|
||||
color: var(--strength-medium-text) !important;
|
||||
}
|
||||
|
||||
span[style="color:green"] {
|
||||
color: var(--strength-strong-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// out: false
|
||||
|
||||
// System - Power Management
|
||||
[data-page="admin-system-reboot"] {
|
||||
p {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
p>span {
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.cbi-button {
|
||||
background: var(--warning-action-bg) !important;
|
||||
border-color: var(--warning-action-bg) !important;
|
||||
color: var(--text-on-accent) !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.cbi-button.cbi-button-action.important {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* applyreboot fix */
|
||||
#applyreboot-container {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
#applyreboot-section {
|
||||
line-height: 300%;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
[data-page="admin-system-poweroff"] {
|
||||
.container {
|
||||
h2+br+p {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-page="admin-system-poweroffdevice"] {
|
||||
.container {
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2+p {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
button+div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn.cbi-button.cbi-button-negative {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-status-processes"] {
|
||||
.th:nth-child(3),
|
||||
.td:nth-child(3) {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.td:nth-child(3) > span {
|
||||
display: block;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.td:nth-child(1),
|
||||
.td:nth-child(2) {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.td:nth-child(3) {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-status-realtime"],
|
||||
[data-page="admin-status-realtime-load"],
|
||||
[data-page="admin-status-realtime-bandwidth"],
|
||||
[data-page="admin-status-realtime-connections"] {
|
||||
// SVG text coordinates and the time axis are technical data, independent
|
||||
// of the interface reading direction.
|
||||
.cbi-section > div:has(> svg) {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
#scale {
|
||||
display: inline-block;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
svg line,
|
||||
svg polyline,
|
||||
svg polygon,
|
||||
svg path {
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.td[id^="lb_"],
|
||||
.td[id*="_bw_"] {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.td[id*="_bw_"] {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.table:has(.td[id^="lb_"]),
|
||||
.table:has(.td[id*="_bw_"]) {
|
||||
.tr {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
padding-block: var(--control-gap);
|
||||
}
|
||||
|
||||
.td {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
padding: .25rem var(--section-inset);
|
||||
border: 0;
|
||||
text-align: start !important;
|
||||
}
|
||||
|
||||
.td:nth-child(even) {
|
||||
text-align: end !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-page="admin-status-realtime-connections"] {
|
||||
#settings-row {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--control-gap);
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
|
||||
> span {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> .filter {
|
||||
flex: 1 1 16rem !important;
|
||||
}
|
||||
|
||||
> .right {
|
||||
flex: 0 1 auto !important;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 2.5rem;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
#filter-connections {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#connections {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-end-start-radius: var(--radius-card);
|
||||
border-end-end-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
|
||||
.th {
|
||||
text-align: start !important;
|
||||
}
|
||||
|
||||
.td {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start !important;
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: end !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] &::before {
|
||||
direction: rtl;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
overflow-x: auto;
|
||||
|
||||
.tr:not(.table-titles):not(.placeholder) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.td:nth-child(n + 3) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-page^="admin-status-realtime"] {
|
||||
// Native inline series colors also appear on the legend's underline.
|
||||
svg :is(#rx, #udp) { --chart-series: var(--chart-series-1); }
|
||||
svg :is(#tx, #tcp) { --chart-series: var(--chart-series-2); }
|
||||
svg :is(#load01, #other) { --chart-series: var(--chart-series-3); }
|
||||
svg #load05 { --chart-series: var(--chart-series-4); }
|
||||
svg #load15 { --chart-series: var(--chart-series-5); }
|
||||
|
||||
svg :is(#rx, #udp, #tx, #tcp, #load01, #other, #load05, #load15) {
|
||||
stroke: var(--chart-series) !important;
|
||||
fill: var(--chart-series) !important;
|
||||
fill-opacity: var(--chart-area-opacity) !important;
|
||||
}
|
||||
|
||||
strong:is([style*="solid blue"], [style*="solid #0000ff"], [style*="solid #00f"]) {
|
||||
border-bottom-color: var(--chart-series-1) !important;
|
||||
}
|
||||
|
||||
strong:is([style*="solid green"], [style*="solid #008000"]) {
|
||||
border-bottom-color: var(--chart-series-2) !important;
|
||||
}
|
||||
|
||||
strong:is([style*="solid red"], [style*="solid #ff0000"], [style*="solid #f00"]) {
|
||||
border-bottom-color: var(--chart-series-3) !important;
|
||||
}
|
||||
|
||||
strong:is([style*="solid #ff6600"], [style*="solid #f60"]) {
|
||||
border-bottom-color: var(--chart-series-4) !important;
|
||||
}
|
||||
|
||||
strong:is([style*="solid #ffaa00"], [style*="solid #fa0"]) {
|
||||
border-bottom-color: var(--chart-series-5) !important;
|
||||
}
|
||||
|
||||
.cbi-section > div:has(> svg) {
|
||||
// Native realtime views paint the plot background with inline styles.
|
||||
background: var(--surface-color) !important;
|
||||
border: 0 !important;
|
||||
border-start-start-radius: var(--radius-card);
|
||||
border-start-end-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
#view svg text {
|
||||
fill: var(--text-strong) !important;
|
||||
font-family: inherit !important;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
#view svg line {
|
||||
stroke: var(--border-strong) !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-system-admin-repokeys"] {
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
resize: vertical;
|
||||
padding: .5rem .75rem;
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--input-bg);
|
||||
color: var(--control-text);
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
textarea,
|
||||
[data-name="filename"] output {
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
[data-name="filename"] output {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
[data-name="key"] textarea {
|
||||
min-height: 6.5rem;
|
||||
}
|
||||
|
||||
[data-name="_newkey"] {
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
line-height: 1.5;
|
||||
|
||||
> output {
|
||||
display: block;
|
||||
flex: 1 1 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cbi-section-descr {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Native view uses a blank 20px div; the node's gap already separates fields.
|
||||
.cbi-section-node > div[style="height: 20px"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1153px) {
|
||||
// The native header has only Name/Key, while data rows also have Delete.
|
||||
// A shared track definition aligns both without inventing a header cell.
|
||||
.cbi-section-table,
|
||||
.cbi-section-table > .thead,
|
||||
.cbi-section-table > .tbody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cbi-section-table .tr {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem minmax(0, 1fr) 6rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cbi-section-table :is(.th, .td) {
|
||||
min-width: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.cbi-section-table .td {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cbi-section-table .cbi-section-actions > div {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.cbi-section-table > .tbody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.td[data-name="filename"],
|
||||
.td[data-name="key"] {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-network-routes"] {
|
||||
[data-name="target"] input,
|
||||
[data-name="gateway"] input,
|
||||
[data-name="source"] input,
|
||||
[data-name="src"] input,
|
||||
[data-name="dest"] input {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// out: false
|
||||
|
||||
// Shared routing status and custom firewall editor adapters.
|
||||
// Network - Firewall
|
||||
[data-page="admin-network-firewall-custom"],
|
||||
[data-page="admin-status-routes"] {
|
||||
#view {
|
||||
p {
|
||||
padding: 0 1.25rem;
|
||||
|
||||
textarea {
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
}
|
||||
|
||||
&>h3 {
|
||||
border-radius: var(--radius-card) var(--radius-card) 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
// out: false
|
||||
|
||||
/* samba */
|
||||
#cbi-samba [data-tab="template"] {
|
||||
.cbi-value-field {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cbi-value-title {
|
||||
width: auto;
|
||||
padding-bottom: .6rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// out: false
|
||||
|
||||
// Services - SmartDNS
|
||||
#cbi-smartdns {
|
||||
#service_status {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.cbi-section-node {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-system-admin-sshkeys"] {
|
||||
.cbi-dynlist {
|
||||
width: 100%;
|
||||
margin-inline: var(--section-inset);
|
||||
max-width: ~"min(48rem, calc(100% - 2 * var(--section-inset)))";
|
||||
gap: var(--field-gap);
|
||||
|
||||
> .item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-inline-end: 2.5rem;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
small,
|
||||
code {
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .item.argon-key-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: .25rem var(--control-gap);
|
||||
direction: inherit;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: var(--field-gap);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--surface-panel);
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
> strong,
|
||||
> small {
|
||||
grid-column: 1;
|
||||
min-width: 0;
|
||||
line-height: 1.5;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
> strong {
|
||||
color: var(--text-strong);
|
||||
font-size: .875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> small {
|
||||
font-size: .75rem;
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
> br,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .argon-key-delete {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
min-height: 2.5rem;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .add-item {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.argon-key-details {
|
||||
grid-column: 1 / -1;
|
||||
min-width: 0;
|
||||
margin-block-start: var(--control-gap);
|
||||
pointer-events: auto;
|
||||
|
||||
> summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--control-gap);
|
||||
width: fit-content;
|
||||
min-height: 2.5rem;
|
||||
color: var(--link-color);
|
||||
font-size: .8125rem;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex: 0 0 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: currentColor;
|
||||
mask: var(--chevron-right-icon) center / contain no-repeat;
|
||||
-webkit-mask: var(--chevron-right-icon) center / contain no-repeat;
|
||||
transform: rotate(0deg);
|
||||
|
||||
[dir="rtl"] & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-small);
|
||||
}
|
||||
}
|
||||
|
||||
&[open] > summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
> pre {
|
||||
margin: 0;
|
||||
padding: .75rem;
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
color: var(--code-text);
|
||||
background: var(--surface-inset);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-control);
|
||||
font: .75rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// out: false
|
||||
|
||||
// System - Startup Scripts
|
||||
[data-page="admin-system-startup"] {
|
||||
#view {
|
||||
&>div:first-child {
|
||||
div[data-initialized="true"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-tab-title] p {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-tab="rc"] {
|
||||
> p {
|
||||
margin: 0;
|
||||
padding-inline: var(--section-inset);
|
||||
}
|
||||
|
||||
> .cbi-page-actions {
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
line-height: 1.5;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
min-height: 15rem;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
resize: none;
|
||||
color: var(--muted-text);
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid var(--control-border);
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.td[data-title] {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// out: false
|
||||
|
||||
// Legacy LuCI overview and process table compatibility.
|
||||
/* fix status */
|
||||
.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2),
|
||||
.node-status-processes>.main .table .tr .td:nth-child(3) {
|
||||
white-space: normal;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
// out: false
|
||||
|
||||
// Network - Switch / VLAN (LuCI's page stylesheet loads after the theme)
|
||||
[data-page="admin-network-switch-vlan"] #switch-vlan-view {
|
||||
--background-color-medium: var(--surface-inset);
|
||||
--background-color-high: var(--surface-raised);
|
||||
--text-color-high: var(--text-strong);
|
||||
--text-color-low: var(--vlan-text-muted);
|
||||
--border-color-low: var(--border-color);
|
||||
--border-color-medium: var(--border-strong);
|
||||
--border-color-high: var(--border-emphasis);
|
||||
--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: var(--vlan-selected-bg);
|
||||
--svc-port-selected-hover-bg: var(--vlan-selected-hover-bg);
|
||||
--svc-port-selected-border: var(--vlan-selected-border);
|
||||
--svc-port-selected-ring: var(--vlan-selected-ring);
|
||||
--svc-vlan-tagged: rgb(var(--vlan-tagged-rgb));
|
||||
--svc-vlan-untagged: rgb(var(--vlan-untagged-rgb));
|
||||
--svc-vlan-checked-text: var(--vlan-checked-text);
|
||||
--svc-vlan-untagged-bg: rgba(var(--vlan-untagged-rgb), .08);
|
||||
--svc-vlan-tagged-bg: rgba(var(--vlan-tagged-rgb), .1);
|
||||
--svc-vlan-untagged-stripe: rgba(var(--vlan-untagged-rgb), .16);
|
||||
--svc-vlan-tagged-stripe: rgba(var(--vlan-tagged-rgb), .18);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-system-syscontrol-log"] {
|
||||
.cbi-section > pre:only-child {
|
||||
margin: 0;
|
||||
padding: var(--field-gap) var(--section-inset);
|
||||
max-height: ~"min(32rem, 65vh)";
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
border-radius: inherit;
|
||||
color: var(--log-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: .875rem;
|
||||
line-height: 1.5;
|
||||
direction: ltr;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
[data-page="admin-system-syscontrol-shutdown"] {
|
||||
.cbi-section > .cbi-section-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--control-gap);
|
||||
padding: 0 var(--section-inset) var(--field-gap);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// out: false
|
||||
|
||||
[data-page="admin-system-system"] {
|
||||
.control-group,
|
||||
.cbi-dynlist {
|
||||
margin: .25rem 0;
|
||||
}
|
||||
|
||||
#localtime,
|
||||
[data-name="hostname"] input,
|
||||
[data-name="log_size"] input,
|
||||
[data-name="log_ip"] input,
|
||||
[data-name="log_port"] input,
|
||||
[data-name="log_file"] input,
|
||||
[data-name="server"] input,
|
||||
[data-name="server"] .item > span {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
// out: false
|
||||
|
||||
// Services - TTY Daemon
|
||||
[data-page="admin-services-ttyd"],
|
||||
[data-page="admin-services-ttyd-ttyd"] {
|
||||
#maincontent > .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#view {
|
||||
flex: 1;
|
||||
|
||||
iframe {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// out: false
|
||||
|
||||
// Older VSSR pages carry their own surface colours. Use the same palette
|
||||
// contract as the rest of the theme rather than a separate dark override.
|
||||
.node-services-vssr {
|
||||
.block,
|
||||
.cbi-section-table-row {
|
||||
color: var(--text-strong);
|
||||
background-color: var(--plugin-card-bg) !important;
|
||||
box-shadow: var(--section-shadow);
|
||||
}
|
||||
|
||||
.block h4,
|
||||
.ssr-button {
|
||||
color: var(--text-strong) !important;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
color: var(--text-strong);
|
||||
background-color: var(--surface-color);
|
||||
box-shadow: var(--section-shadow);
|
||||
}
|
||||
|
||||
.cbi-section-table-row.fast {
|
||||
color: var(--accent-text);
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
|
||||
.incon:nth-child(2) {
|
||||
border-right: 1px solid var(--separator-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// out: false
|
||||
|
||||
// wireless
|
||||
/* wireless overview */
|
||||
#cbi-wireless {
|
||||
>#wifi_assoclist_table {
|
||||
>.tr {
|
||||
box-shadow: inset 1px -1px 0 var(--border-subtle), inset -1px -1px 0 var(--border-subtle);
|
||||
|
||||
&.placeholder {
|
||||
>.td {
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
border-top: thin solid var(--border-subtle) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-titles {
|
||||
box-shadow: inset 1px 0 0 var(--border-subtle), inset -1px 0 0 var(--border-subtle);
|
||||
|
||||
>.th {
|
||||
border-bottom: thin solid var(--border-subtle);
|
||||
box-shadow: 0 -1px 0 0 var(--border-subtle);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#wifi_assoclist_table {
|
||||
>.tr {
|
||||
>.td[data-title="RX Rate / TX Rate"] {
|
||||
width: 23rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cbi-wireless,
|
||||
#cbi-wireless *,
|
||||
#wifi_assoclist_table,
|
||||
#wifi_assoclist_table * {
|
||||
overflow: visible !important;
|
||||
max-height: none !important;
|
||||
transform: none !important;
|
||||
filter: none !important;
|
||||
contain: none !important;
|
||||
clip-path: none !important;
|
||||
}
|
||||
|
||||
#cbi-wireless,
|
||||
#wifi_assoclist_table {
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
// ==========================================================================
|
||||
// Responsive Styles
|
||||
// Mobile-first responsive design for LuCI admin interface
|
||||
// Desktop defaults, followed by progressively narrower viewport adaptations.
|
||||
// ==========================================================================
|
||||
|
||||
// 1. Browser-Specific Fixes
|
||||
@@ -28,6 +28,11 @@
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
|
||||
:root {
|
||||
--form-label-width: 15rem;
|
||||
--form-label-padding: .6rem;
|
||||
}
|
||||
|
||||
// Header adjustments
|
||||
header>.fill>.container>#logo {
|
||||
margin: 0 2.5rem 0 0.5rem;
|
||||
@@ -35,7 +40,7 @@
|
||||
|
||||
// Sidebar width
|
||||
.main-left {
|
||||
width: calc(0% + 13rem);
|
||||
--sidebar-width: 13rem;
|
||||
}
|
||||
|
||||
// Button and label sizing
|
||||
@@ -44,20 +49,6 @@
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
// Form field sizing
|
||||
.cbi-value-title {
|
||||
width: 15rem;
|
||||
padding-right: 0.6rem;
|
||||
}
|
||||
|
||||
.cbi-value-field .cbi-dropdown,
|
||||
.cbi-value-field .cbi-input-select,
|
||||
.cbi-value input[type="text"],
|
||||
.cbi-value input[type="password"],
|
||||
.cbi-value textarea {
|
||||
min-width: 18rem;
|
||||
}
|
||||
|
||||
// Specific component adjustments
|
||||
#cbi-firewall-zone .cbi-input-select {
|
||||
min-width: 9rem;
|
||||
@@ -77,16 +68,15 @@
|
||||
|
||||
@media screen and (max-width: 1366px) {
|
||||
|
||||
:root {
|
||||
--form-control-min-width: 16rem;
|
||||
}
|
||||
|
||||
// Header adjustments
|
||||
header>.fill>.container {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Sidebar width
|
||||
.main-left {
|
||||
width: calc(0% + 13rem);
|
||||
}
|
||||
|
||||
// Tab styling
|
||||
.tabs>li>a,
|
||||
.cbi-tabmenu>li>a {
|
||||
@@ -107,14 +97,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Form field sizing
|
||||
.cbi-value-field .cbi-dropdown,
|
||||
.cbi-value-field .cbi-input-select,
|
||||
.cbi-value input[type="text"],
|
||||
.cbi-value input[type="password"] {
|
||||
min-width: 16rem;
|
||||
}
|
||||
|
||||
#cbi-firewall-zone .cbi-input-select {
|
||||
min-width: 5.5rem;
|
||||
}
|
||||
@@ -132,11 +114,6 @@
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
// Modal adjustments
|
||||
#modal_overlay {
|
||||
top: 0rem;
|
||||
}
|
||||
|
||||
// Page-specific table fixes
|
||||
[data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) {
|
||||
display: block;
|
||||
@@ -161,6 +138,12 @@
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
|
||||
:root {
|
||||
--form-label-width: 12rem;
|
||||
--form-label-padding: 1rem;
|
||||
--form-control-width: 16rem;
|
||||
}
|
||||
|
||||
// Header adjustments
|
||||
header>.fill>.container>#logo {
|
||||
display: none;
|
||||
@@ -180,10 +163,6 @@
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
.main-left {
|
||||
width: calc(0% + 13rem);
|
||||
}
|
||||
|
||||
// Login page specific
|
||||
body:not(.logged-in) .showSide {
|
||||
visibility: hidden;
|
||||
@@ -195,24 +174,11 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Form field adjustments
|
||||
.cbi-value-title {
|
||||
width: 12rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.cbi-value-field .cbi-dropdown,
|
||||
.cbi-value-field .cbi-input-select,
|
||||
.cbi-value input[type="text"] {
|
||||
width: 16rem;
|
||||
min-width: 16rem;
|
||||
}
|
||||
|
||||
// Password field specific sizing
|
||||
.cbi-value input[name^="pw"],
|
||||
.cbi-value input[data-update="change"]:nth-child(2) {
|
||||
width: 13rem !important;
|
||||
min-width: 13rem;
|
||||
--form-control-width: 13rem;
|
||||
--form-control-min-width: 13rem;
|
||||
}
|
||||
|
||||
// Code output adjustments
|
||||
@@ -225,6 +191,12 @@
|
||||
// Table responsive behavior
|
||||
.table {
|
||||
display: block;
|
||||
// Grid-based lists also need a shrinkable track for their row content.
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.table > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Interfaces .table {
|
||||
@@ -238,6 +210,8 @@
|
||||
// Table row adjustments
|
||||
.tr {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -247,7 +221,7 @@
|
||||
}
|
||||
|
||||
.tr.placeholder {
|
||||
border-bottom: thin solid #ddd;
|
||||
border-bottom: thin solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.tr.placeholder>.td,
|
||||
@@ -261,12 +235,30 @@
|
||||
.th,
|
||||
.td {
|
||||
display: inline-block;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
align-self: flex-start;
|
||||
flex: 2 2 10%;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.td[data-title] {
|
||||
flex-basis: 50%;
|
||||
|
||||
&::before {
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
.td .ifacebadge {
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.td select,
|
||||
.td input[type="text"] {
|
||||
width: 100%;
|
||||
@@ -309,8 +301,39 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.td.cbi-section-actions {
|
||||
.td.cbi-section-actions,
|
||||
.td:has(> :is(.btn, .cbi-button):only-child) {
|
||||
// Use the row's available width before wrapping individual actions.
|
||||
flex: 1 1 100%;
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 100%;
|
||||
vertical-align: bottom;
|
||||
|
||||
> :not(.btn, .cbi-button) {
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.cbi-button {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
// In stacked rows the final action group (or an odd final data cell)
|
||||
// spans the last line and owns both bottom corners.
|
||||
.table .tr:last-child > .td:first-child {
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
.table .tr:last-child > .td[data-title]:nth-child(odd):nth-last-child(2),
|
||||
.table .tr:last-child > .td[data-title]:nth-child(odd):last-child,
|
||||
.table .tr:last-child > .td.cbi-section-actions:last-child,
|
||||
.table .tr:last-child > .td:has(> :is(.btn, .cbi-button):only-child):last-child {
|
||||
border-end-start-radius: inherit;
|
||||
}
|
||||
|
||||
// Hide table headers on mobile
|
||||
@@ -326,7 +349,7 @@
|
||||
display: block;
|
||||
flex: 1 1 100%;
|
||||
border-bottom: thin solid rgba(0, 0, 0, 0.26);
|
||||
background: #e9ecef;
|
||||
background: var(--surface-contrast);
|
||||
}
|
||||
|
||||
.td[data-title],
|
||||
@@ -338,16 +361,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Button spacing
|
||||
.cbi-button+.cbi-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.td.cbi-section-actions>*>*,
|
||||
.td.cbi-section-actions>*>form>* {
|
||||
margin: 2.1px 3px;
|
||||
}
|
||||
|
||||
// Firewall form adjustments
|
||||
.Firewall form {
|
||||
position: static !important;
|
||||
@@ -367,11 +380,6 @@
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
// Button sizing
|
||||
.btn:not(button),
|
||||
.cbi-button {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Tablet Portrait (768px and below)
|
||||
@@ -379,24 +387,32 @@
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
// Base font size
|
||||
body {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
// Progress bar adjustments
|
||||
.cbi-progressbar::after {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
// Mobile sidebar behavior
|
||||
.main-left {
|
||||
position: fixed;
|
||||
inset-inline-start: 0;
|
||||
z-index: 100;
|
||||
width: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.active {
|
||||
width: 13rem;
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
|
||||
// Keep the original reveal animation without reflowing its contents.
|
||||
> .sidenav-header,
|
||||
> .nav {
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.main-left {
|
||||
transition: width .2s cubic-bezier(.2, 0, 0, 1);
|
||||
|
||||
&.active {
|
||||
transition-duration: .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -413,23 +429,21 @@
|
||||
}
|
||||
|
||||
// Mobile menu toggle
|
||||
.showSide {
|
||||
header .showSide {
|
||||
padding: 0.1rem;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
display: inline-block !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
font-family: 'argon' !important;
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal !important;
|
||||
text-transform: none !important;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\e20e";
|
||||
font-size: 1.7rem;
|
||||
content: "";
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
background-color: currentColor;
|
||||
-webkit-mask: url('../icon/menu.svg') center / contain no-repeat;
|
||||
mask: url('../icon/menu.svg') center / contain no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -449,19 +463,67 @@
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
header .fill .container {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.header-actions {
|
||||
max-width: calc(100% - 2.5rem - var(--action-gap));
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1 1 0;
|
||||
gap: var(--control-gap);
|
||||
|
||||
.brand {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
flex: 0 1 auto;
|
||||
|
||||
span {
|
||||
font-size: .6875rem;
|
||||
padding: .25rem .5rem;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#argon-appearance .argon-appearance-trigger {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&::before {
|
||||
width: .875rem;
|
||||
height: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--page-gutter: 1rem;
|
||||
--section-inset: 1rem;
|
||||
}
|
||||
|
||||
// Hide mobile elements
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Content margins
|
||||
#maincontent>.container {
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
}
|
||||
// Fallback for legacy forms outside a size-query container.
|
||||
.cbi-value {
|
||||
flex-direction: column;
|
||||
|
||||
// Form adjustments
|
||||
.cbi-value-title {
|
||||
text-align: left;
|
||||
> .cbi-value-title,
|
||||
> .cbi-value-field {
|
||||
flex: 0 1 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .cbi-value-title {
|
||||
padding-inline-end: 0;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-dynlist p {
|
||||
@@ -481,104 +543,6 @@
|
||||
.node-main-login footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Tab scrollbar hiding
|
||||
.tabs,
|
||||
.cbi-tabmenu {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form field layout
|
||||
.cbi-value-field,
|
||||
.cbi-value-description {
|
||||
display: block !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
[data-page="admin-system-admin-password"] .cbi-value-field {
|
||||
display: table-cell !important;
|
||||
}
|
||||
|
||||
// Modal adjustments
|
||||
.modal.cbi-modal {
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-width: 270px;
|
||||
max-width: 600px;
|
||||
min-height: 32px;
|
||||
margin: 5em auto;
|
||||
padding: 1em;
|
||||
border-radius: 3px !important;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
// Dropdown adjustments
|
||||
.cbi-dropdown[open]>ul.dropdown {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Login page footer
|
||||
.login-page .login-container footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 7. Small Mobile (480px and below)
|
||||
// ==========================================================================
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
// Hide mobile elements
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Interface box adjustments for overview page
|
||||
div[style*="display:grid;grid-template-columns:repeat"] {
|
||||
.ifacebox {
|
||||
flex-basis: 80px;
|
||||
|
||||
.ifacebox-body {
|
||||
padding: 0.875rem 0.5rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Login page mobile adjustments
|
||||
.login-page .login-container {
|
||||
margin-left: 0rem !important;
|
||||
width: 100%;
|
||||
|
||||
.login-form {
|
||||
.form-login {
|
||||
.input-group {
|
||||
&::before {
|
||||
color: #525461;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #525461;
|
||||
border-bottom: white 1px solid;
|
||||
border-bottom: var(--white) 1px solid;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 8. Desktop Scrollbar Styling (600px and above)
|
||||
@@ -597,14 +561,7 @@
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// out: false
|
||||
// Shared corner shapes. Both color modes and all viewports use this scale.
|
||||
:root {
|
||||
--radius-small: .25rem;
|
||||
--radius-control: .375rem;
|
||||
--radius-menu: .5rem;
|
||||
--radius-panel: .5rem;
|
||||
--radius-card: .75rem;
|
||||
--radius-dialog: 1rem;
|
||||
--radius-pill: 999px;
|
||||
--radius-circle: 50%;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// out: false
|
||||
// Shared layout spacing. Viewport changes live in responsive.less.
|
||||
:root {
|
||||
--page-gutter: 1.25rem;
|
||||
--section-inset: 1.25rem;
|
||||
--section-gap: 1rem;
|
||||
--field-gap: 1rem;
|
||||
--control-gap: .5rem;
|
||||
--action-gap: .75rem;
|
||||
}
|
||||
+249
-317
@@ -1,82 +1,24 @@
|
||||
// out: false
|
||||
|
||||
// ==========================================================================
|
||||
// Login Page Styles
|
||||
// Optimized with LESS best practices
|
||||
// ==========================================================================
|
||||
|
||||
// Mixins for common patterns
|
||||
.flex-center() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.absolute-full() {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.icon-base() {
|
||||
font-family: 'argon' !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
// out: false
|
||||
// Both login layouts share their fields, actions and footer.
|
||||
|
||||
.login-page {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
|
||||
// Background video container
|
||||
// Wallpaper stays behind the whole page when a short viewport needs scrolling.
|
||||
.main-bg,
|
||||
.video {
|
||||
.absolute-full();
|
||||
.flex-center();
|
||||
background-color: var(--darker);
|
||||
overflow: hidden;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Volume control button
|
||||
.volume-control {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
z-index: 5000;
|
||||
cursor: pointer;
|
||||
border: 0 !important; // Override the dark theme's global button border.
|
||||
background: url(../img/volume_high.svg) no-repeat center/contain;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
&.mute {
|
||||
background-image: url(../img/volume_off.svg);
|
||||
}
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Main background image
|
||||
.main-bg {
|
||||
.absolute-full();
|
||||
background: url(../img/blank.png) no-repeat center/cover;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@@ -86,301 +28,297 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Login container
|
||||
.login-container {
|
||||
z-index: 10;
|
||||
margin-left: 5%;
|
||||
.video {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 26rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--media-bg);
|
||||
overflow: hidden;
|
||||
|
||||
background-color: var(--white);
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
background-color: rgba(244, 245, 247, var(--blur-opacity));
|
||||
box-shadow: rgba(0, 0, 0, 0.75) 0 0 35px -5px;
|
||||
|
||||
// Login form
|
||||
.login-form {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 100vh;
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
z-index: 5000;
|
||||
cursor: pointer;
|
||||
border: 0 !important;
|
||||
background: url(../img/volume_high.svg) no-repeat center/contain;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
&.mute {
|
||||
background-image: url(../img/volume_off.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
--login-inset: 3.125rem;
|
||||
--login-logo-size: 3.125rem;
|
||||
--login-logo-gap: 1.5625rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 26rem;
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
margin-inline-start: 5%;
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius));
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
background-color: rgba(var(--login-panel-rgb), var(--blur-opacity));
|
||||
box-shadow: rgba(0, 0, 0, .75) 0 0 35px -5px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding-block: 0;
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: var(--login-logo-gap);
|
||||
width: 100%;
|
||||
padding: 3.125rem var(--login-inset) 0;
|
||||
color: var(--login-text);
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
flex: 0 0 auto;
|
||||
width: var(--login-logo-size);
|
||||
height: var(--login-logo-size);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
font-family: "TypoGraphica";
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.form-login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 26rem;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-block: auto;
|
||||
padding-block: 2rem;
|
||||
padding-inline: var(--login-inset);
|
||||
|
||||
.errorbox {
|
||||
padding: .75rem 1rem;
|
||||
overflow-wrap: anywhere;
|
||||
border-inline-start: 3px solid var(--warning);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-color);
|
||||
color: var(--text-strong);
|
||||
line-height: 1.5;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
// Brand/Logo section
|
||||
.brand {
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 50px auto 100px 50px;
|
||||
color: var(--default);
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
margin-right: 45px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
font-family: "TypoGraphica";
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// Form container
|
||||
.form-login {
|
||||
width: 100%;
|
||||
padding: 20px 50px;
|
||||
box-sizing: border-box;
|
||||
.input-group {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
|
||||
.errorbox {
|
||||
padding-bottom: 2rem;
|
||||
text-align: center;
|
||||
color: var(--warning);
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: .625rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
translate: 0 -50%;
|
||||
background-color: var(--overlay-text);
|
||||
-webkit-mask: var(--login-field-icon) center / contain no-repeat;
|
||||
mask: var(--login-field-icon) center / contain no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Input group styling
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.25rem;
|
||||
&.user-icon::before {
|
||||
content: "";
|
||||
--login-field-icon: url('../icon/user.svg');
|
||||
}
|
||||
|
||||
// Icon styling
|
||||
&::before {
|
||||
.icon-base();
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 100;
|
||||
font-size: 1.5rem;
|
||||
color: var(--default);
|
||||
&.pass-icon::before {
|
||||
content: "";
|
||||
--login-field-icon: url('../icon/password.svg');
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: .5rem .75rem;
|
||||
padding-inline-start: 3rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--overlay-text);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--login-input-border);
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
box-shadow: 0 3px 2px rgba(233, 236, 239, .05);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Animated border
|
||||
.border {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid var(--primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
&:focus + .border {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Input field
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0.825rem 0;
|
||||
padding: 0.5rem 0.75rem 0.5rem 3rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5em;
|
||||
color: var(--default);
|
||||
background-color: transparent;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--white);
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 2px rgba(233, 236, 239, 0.05);
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
.border {
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: var(--control-focus);
|
||||
transform: scaleX(0);
|
||||
pointer-events: none;
|
||||
|
||||
&:focus+.border {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-input-password {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
// Icon content
|
||||
&.user-icon::before {
|
||||
content: "\e971";
|
||||
}
|
||||
|
||||
&.pass-icon::before {
|
||||
content: "\e910";
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Submit button
|
||||
.auth-plugin {
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.cbi-button-apply {
|
||||
width: 100% !important;
|
||||
min-height: 50px;
|
||||
margin: 30px 0 100px;
|
||||
padding: 10px 0;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: .75rem 1rem;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
letter-spacing: 0.8rem;
|
||||
letter-spacing: .1rem;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--accent-text);
|
||||
background-color: var(--primary) !important;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 0 50px 0;
|
||||
transition: all 0.3s ease !important;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.9;
|
||||
}
|
||||
border: 0;
|
||||
border-radius: var(--radius-control);
|
||||
transition: box-shadow .15s ease-out, scale .15s ease-out;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--default);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
footer {
|
||||
position: static;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-block-start: auto;
|
||||
padding: 1.5rem var(--login-inset);
|
||||
color: var(--login-text);
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
.login-footer-links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
padding: 0 0 30px;
|
||||
color: var(--gray);
|
||||
text-align: center;
|
||||
line-height: 1.6rem;
|
||||
font-size: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: .25rem 1rem;
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
|
||||
.luci-link {
|
||||
display: block;
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.login-container {
|
||||
width: 100%;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keep all authentication markup shared; only the centered layout differs.
|
||||
// Only the outer presentation differs from the classic sidebar.
|
||||
.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%;
|
||||
}
|
||||
padding: 2rem 1rem;
|
||||
|
||||
.login-container {
|
||||
flex: 0 0 auto;
|
||||
--login-inset: 2rem;
|
||||
--login-logo-size: 2.5rem;
|
||||
--login-logo-gap: 1rem;
|
||||
width: 26rem;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
margin: auto 0;
|
||||
border-radius: .75rem;
|
||||
border-radius: var(--radius-dialog);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
min-height: 0;
|
||||
.login-form {
|
||||
flex: 0 0 auto;
|
||||
padding-block: 0;
|
||||
|
||||
.brand {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 2rem 1.5rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
gap: 1rem;
|
||||
|
||||
.icon {
|
||||
width: 2.5rem;
|
||||
height: 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;
|
||||
}
|
||||
.brand {
|
||||
justify-content: center;
|
||||
padding: 2rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
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: " · ";
|
||||
}
|
||||
.form-login {
|
||||
margin-block: 0;
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -388,13 +326,7 @@
|
||||
padding: 1rem;
|
||||
|
||||
.login-container {
|
||||
.login-form .form-login {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
--login-inset: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
// out: false
|
||||
// Private LESS primitives: only semantic token declarations consume these values.
|
||||
// Components consume semantic roles rather than the private sRGB primitives.
|
||||
@neutral-0: #fff;
|
||||
@neutral-50: #f9f9f9;
|
||||
@neutral-100: #f6f9fc;
|
||||
@neutral-150: #f4f5f7;
|
||||
@neutral-200: #eee;
|
||||
@neutral-250: #e9ecef;
|
||||
@neutral-275: #e6e6e6;
|
||||
@neutral-300: #ddd;
|
||||
@neutral-350: #ccc;
|
||||
@neutral-400: #adb5bd;
|
||||
@neutral-500: #8898aa;
|
||||
@neutral-550: #808080;
|
||||
@neutral-600: #666;
|
||||
@neutral-650: #5b5b5b;
|
||||
@neutral-700: #515151;
|
||||
@neutral-750: #3c3c3c;
|
||||
@neutral-800: #333;
|
||||
@neutral-825: #2d2d2d;
|
||||
@neutral-850: #252526;
|
||||
@neutral-900: #1e1e1e;
|
||||
@neutral-950: #181819;
|
||||
@neutral-1000: #000;
|
||||
@red-500: #f5365c;
|
||||
@red-300: #ffa9ae;
|
||||
@red-600: #c73850;
|
||||
@orange-500: #fb6340;
|
||||
@amber-300: #f6c177;
|
||||
@amber-700: #906521;
|
||||
@green-500: #2dce89;
|
||||
@green-700: #028453;
|
||||
@cyan-500: #11cdef;
|
||||
@blue-300: #85adff;
|
||||
@green-300: #64d9a3;
|
||||
@orange-300: #ffb789;
|
||||
|
||||
// Each role is declared once: light, dark. A single value applies to both.
|
||||
// Keep different roles separate even when they currently share a primitive.
|
||||
@theme-palette: {
|
||||
// Accent and status
|
||||
primary: var(--light-primary), var(--dark-primary);
|
||||
success: @green-500;
|
||||
info: @cyan-500;
|
||||
warning: @orange-500, @amber-300;
|
||||
danger: @red-500, @red-300;
|
||||
error-text: #ffd600, var(--danger);
|
||||
strength-weak-text: #b42318, #ffb4ab;
|
||||
strength-medium-text: #805600, #f5c24b;
|
||||
strength-strong-text: #166534, #86efac;
|
||||
|
||||
// Text roles
|
||||
text-strong: #32325d, @neutral-275;
|
||||
text-color: #525f7f, @neutral-350;
|
||||
muted-text: #626f80, @neutral-400;
|
||||
control-text: var(--text-color);
|
||||
soft-text: #ced4da, @neutral-350;
|
||||
text-on-accent: @neutral-0;
|
||||
accent-text: var(--text-on-accent), var(--dark-on-primary);
|
||||
accent-border: var(--primary), var(--dark-link-color);
|
||||
accent-shadow-color: rgba(94, 114, 228, .1), var(--dark-accent-shadow);
|
||||
neutral-action-text: var(--text-on-accent), var(--accent-text);
|
||||
notice-text: var(--text-on-accent), var(--accent-text);
|
||||
text-inverse: @neutral-0;
|
||||
placeholder-color: #626f80, @neutral-400;
|
||||
focus-ring: #3446ab, var(--dark-focus-ring);
|
||||
control-focus: var(--primary), var(--dark-control-focus);
|
||||
link-color: var(--primary), var(--dark-link-color);
|
||||
help-text: var(--primary), var(--dark-link-color);
|
||||
code-text: #212529, @neutral-350;
|
||||
data-token-text: #0069d6, var(--link-color);
|
||||
log-text: #242424, @neutral-350;
|
||||
overlay-text: #172b4d, @neutral-400;
|
||||
|
||||
// Surfaces
|
||||
background-color: @neutral-150, @neutral-950;
|
||||
main-bg: transparent, var(--background-color);
|
||||
surface-color: @neutral-0, @neutral-850;
|
||||
surface-raised: @neutral-0, @neutral-800;
|
||||
surface-panel: @neutral-0, @neutral-825;
|
||||
surface-muted: @neutral-100, @neutral-825;
|
||||
surface-inset: @neutral-150, @neutral-900;
|
||||
surface-active: #e4e9ee, @neutral-750;
|
||||
surface-contrast: @neutral-250, @neutral-750;
|
||||
row-color: #f4f4f4, var(--surface-color);
|
||||
row-alt: @neutral-50, @neutral-825;
|
||||
media-bg: @neutral-1000;
|
||||
|
||||
// Borders and separators
|
||||
border-color: #dee2e6, @neutral-750;
|
||||
control-border: var(--border-color), @neutral-550;
|
||||
control-subtle-border: var(--border-muted), var(--control-border);
|
||||
border-subtle: @neutral-300, @neutral-850;
|
||||
border-muted: @neutral-250, @neutral-750;
|
||||
border-strong: #cbd5e1, @neutral-700;
|
||||
border-emphasis: @neutral-500, @neutral-400;
|
||||
border-inverse: @neutral-0;
|
||||
separator-color: @neutral-150, @neutral-900;
|
||||
table-border: thin solid var(--border-subtle), 0;
|
||||
overlay-focus: #172b4d, @neutral-400;
|
||||
|
||||
// Intentional component variants
|
||||
header-bg: var(--primary), @neutral-900;
|
||||
menu-color: #5f6368, @neutral-350;
|
||||
main-menu-color: #202124, @neutral-350;
|
||||
sidebar-brand-color: var(--primary), @neutral-350;
|
||||
invalid-bg: #fce6e6, @neutral-900;
|
||||
command-bg: @neutral-200, @neutral-850;
|
||||
input-bg: @neutral-0, @neutral-900;
|
||||
select-bg: var(--surface-color), var(--input-bg);
|
||||
dropdown-control-bg: transparent, var(--input-bg);
|
||||
neutral-button-bg: #f0f0f0, var(--primary);
|
||||
neutral-action-bg: @neutral-500, var(--primary);
|
||||
action-muted-solid: @neutral-500, @neutral-650;
|
||||
status-neutral-bg: #32325d;
|
||||
plain-button-bg: #f0f0f0, #707070;
|
||||
plain-button-text: @neutral-500, @neutral-0;
|
||||
tab-color: var(--primary), var(--link-color);
|
||||
tab-item-bg: #dce3e9, @neutral-825;
|
||||
tab-inactive-color: #404040, @neutral-350;
|
||||
progress-bg: @neutral-250, var(--surface-inset);
|
||||
progress-fill: var(--primary), var(--dark-progress-fill);
|
||||
chart-series-1: #0000ff, @blue-300;
|
||||
chart-series-2: #008000, @green-300;
|
||||
chart-series-3: #ff0000, @red-300;
|
||||
chart-series-4: #ff6600, @orange-300;
|
||||
chart-series-5: #ffaa00, @amber-300;
|
||||
chart-area-opacity: .4, .18;
|
||||
iface-bg: @neutral-50, transparent;
|
||||
iface-head-bg: @neutral-200, @neutral-600;
|
||||
iface-head-text: var(--text-strong), @neutral-0;
|
||||
iface-body-bg: transparent, @neutral-800;
|
||||
iface-border: 0, 1px solid var(--separator-color);
|
||||
badge-bg: @neutral-200, @neutral-800;
|
||||
label-bg: #bfbfbf, @neutral-650;
|
||||
dropdown-text: var(--text-strong);
|
||||
dropdown-selected-text: var(--text-strong);
|
||||
dropdown-selected-bg: #e8ecff, var(--dark-selected-bg);
|
||||
dropdown-hover-bg: var(--surface-active);
|
||||
sidebar-scrollbar: @neutral-100, @neutral-850;
|
||||
login-panel-rgb: ~"244, 245, 247", ~"0, 0, 0";
|
||||
login-text: #101828, @neutral-400;
|
||||
login-input-border: @neutral-0, @neutral-400;
|
||||
|
||||
// Feedback and pending changes
|
||||
positive-bg: var(--primary);
|
||||
danger-bg: var(--danger), @red-600;
|
||||
success-bg: var(--success), @green-700;
|
||||
feedback-text: inherit, var(--text-on-accent);
|
||||
negative-bg: var(--danger), var(--danger-bg);
|
||||
reset-bg: #f0ad4e, var(--warning-bg);
|
||||
reset-border: #eea236, var(--warning-bg);
|
||||
reset-action-bg: var(--danger), var(--reset-bg);
|
||||
success-action-bg: #5cb85c, var(--success-bg);
|
||||
success-action-border: #4cae4c, var(--success-bg);
|
||||
warning-action-bg: var(--warning), var(--warning-bg);
|
||||
warning-badge-bg: #f0ad4e, var(--warning-bg);
|
||||
notice-bg: var(--info), var(--primary);
|
||||
warning-bg: var(--warning), @amber-700;
|
||||
error-bg: @orange-500, #49252d;
|
||||
warning-heading-bg: transparent, #784f00;
|
||||
warning-heading-color: #8c6900, var(--warning);
|
||||
feedback-heading-bg: var(--warning-heading-bg), transparent;
|
||||
feedback-heading-text: var(--warning-heading-color), inherit;
|
||||
change-added-bg: #cfc, #1f3e30;
|
||||
change-added-border: #0f0, var(--success);
|
||||
change-removed-bg: #fcc, #49252d;
|
||||
change-removed-border: #f00, var(--danger);
|
||||
change-modified-bg: @neutral-200, @neutral-800;
|
||||
change-modified-border: @neutral-350, @neutral-600;
|
||||
|
||||
// Plugin contracts: VLAN roles, zone RGB values and legacy adapters
|
||||
plugin-card-bg: @neutral-0, @neutral-750;
|
||||
vlan-text-muted: #626b7a, @neutral-400;
|
||||
vlan-selected-bg: #e8ecff, var(--dark-selected-bg);
|
||||
vlan-selected-hover-bg: #dfe4ff, var(--dark-selected-hover-bg);
|
||||
vlan-selected-border: var(--primary), var(--link-color);
|
||||
vlan-selected-ring: rgba(94, 114, 228, .28), var(--dark-accent-ring);
|
||||
checkmark-icon: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e'), var(--dark-checkmark-icon);
|
||||
vlan-tagged-rgb: ~"140, 72, 0", ~"251, 191, 36";
|
||||
vlan-untagged-rgb: ~"6, 104, 95", ~"45, 212, 191";
|
||||
vlan-checked-text: @neutral-0, @neutral-900;
|
||||
zone-positive-rgb: ~"144, 240, 144", ~"73, 126, 73";
|
||||
zone-negative-rgb: ~"240, 144, 144", ~"156, 79, 79";
|
||||
zone-neutral-rgb: ~"238, 238, 238", ~"112, 112, 112";
|
||||
zone-label-color: @neutral-800, @neutral-0;
|
||||
plugin-text-muted: @neutral-500, #a1a1aa;
|
||||
plugin-neutral: @neutral-500, @neutral-650;
|
||||
plugin-scrollbar: @neutral-100, @neutral-650;
|
||||
|
||||
// Appearance effects
|
||||
command-shadow: ~"inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05)", ~"inset 0 1px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(255, 255, 255, .05)";
|
||||
section-shadow: 0 0 1rem rgba(136, 152, 170, .15), 0 0 .5rem rgba(0, 0, 0, .35);
|
||||
sidebar-shadow: rgba(0, 0, 0, .75) 0 0 15px -5px, 0 0 .5rem rgba(0, 0, 0, .15);
|
||||
dropdown-shadow: ~"0 4px 8px rgba(0, 0, 0, .06), 0 12px 24px rgba(0, 0, 0, .12)", ~"0 4px 8px rgba(0, 0, 0, .2), 0 12px 24px rgba(0, 0, 0, .32)";
|
||||
button-hover-shadow: ~"0 2px 4px rgba(0, 0, 0, .16), 0 4px 12px var(--accent-shadow-color)", ~"0 2px 4px rgba(0, 0, 0, .5), 0 4px 12px var(--accent-shadow-color)";
|
||||
control-focus-shadow: ~"0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px var(--accent-shadow-color)", ~"0 0 0 2px var(--dark-control-ring)";
|
||||
file-icon-filter: none, invert(.7);
|
||||
image-filter: none, invert(.9);
|
||||
};
|
||||
|
||||
// Emit only changed values in dark mode. Both mode selectors use this map.
|
||||
.theme-palette(@mode) {
|
||||
each(@theme-palette, {
|
||||
@light: extract(@value, 1);
|
||||
@dark: if(length(@value) > 1, extract(@value, 2), @light);
|
||||
// Compare CSS text: LESS otherwise treats different var() calls as equal.
|
||||
@light-css: ~"@{light}";
|
||||
@dark-css: ~"@{dark}";
|
||||
.emit() when (@mode = light) { --@{key}: @light; }
|
||||
.emit() when (@mode = dark) and not (@light-css = @dark-css) { --@{key}: @dark; }
|
||||
.emit();
|
||||
});
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
// Runtime settings injected by LuCI; names are part of the configuration API.
|
||||
--light-primary: #5e72e4;
|
||||
// Fallbacks generated by luci.argon-palette from the default light seed.
|
||||
--dark-primary: #5a6cc5;
|
||||
--dark-on-primary: #ffffff;
|
||||
--dark-link-color: #b0c1ff;
|
||||
--dark-focus-ring: #d3ddff;
|
||||
--dark-control-focus: #7a91ff;
|
||||
--dark-progress-fill: #8fa4ff;
|
||||
--dark-control-ring: rgba(122, 145, 255, .18);
|
||||
--dark-selected-bg: #262e4f;
|
||||
--dark-selected-hover-bg: #333d64;
|
||||
--dark-accent-ring: rgba(176, 193, 255, .28);
|
||||
--dark-accent-shadow: rgba(176, 193, 255, .1);
|
||||
--dark-checkmark-icon: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e');
|
||||
--blur-radius-light: 10px;
|
||||
--blur-opacity-light: .5;
|
||||
--blur-radius-dark: 10px;
|
||||
--blur-opacity-dark: .5;
|
||||
--blur-radius: var(--blur-radius-light);
|
||||
--blur-opacity: var(--blur-opacity-light);
|
||||
.theme-palette(light);
|
||||
|
||||
// Legacy LuCI colour API. New component rules use semantic tokens only.
|
||||
--header-color: var(--text-on-accent);
|
||||
--menu-bg-color: var(--surface-raised);
|
||||
--red: var(--danger);
|
||||
--orange: @orange-500;
|
||||
--yellow: var(--error-text);
|
||||
--green: var(--success);
|
||||
--teal: var(--info);
|
||||
--white: @neutral-0;
|
||||
--gray: var(--muted-text);
|
||||
--gray-dark: var(--text-strong);
|
||||
--lighter: var(--surface-contrast);
|
||||
--light: @neutral-400;
|
||||
--dark: var(--code-text);
|
||||
--default: var(--overlay-text);
|
||||
--darker: var(--media-bg);
|
||||
|
||||
// Non-colour resources are shared between appearances.
|
||||
--font-family-sans-serif: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
|
||||
--chevron-down-icon: url("../icon/chevron-down.svg");
|
||||
--chevron-right-icon: url("../icon/chevron-right.svg");
|
||||
--dropdown-arrow-icon: var(--chevron-down-icon);
|
||||
}
|
||||
|
||||
.dark-palette() {
|
||||
color-scheme: dark;
|
||||
.theme-palette(dark);
|
||||
--blur-radius: var(--blur-radius-dark);
|
||||
--blur-opacity: var(--blur-opacity-dark);
|
||||
}
|
||||
|
||||
:root[data-argon-mode="dark"] {
|
||||
.dark-palette();
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-argon-mode="light"]):not([data-argon-mode="dark"]) {
|
||||
.dark-palette();
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user