mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-02 12:13:56 +08:00
9167 lines
285 KiB
CSS
9167 lines
285 KiB
CSS
/**
|
|
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
|
|
*
|
|
* luci-theme-argon
|
|
* Copyright 2025 Jerrykuku <jerrykuku@qq.com>
|
|
*
|
|
* Have a bug? Please create an issue here on GitHub!
|
|
* https://github.com/jerrykuku/luci-theme-argon/issues
|
|
*
|
|
* luci-theme-material:
|
|
* Copyright 2015 Lutty Yang <lutty@wcan.in>
|
|
* https://github.com/LuttyYang/luci-theme-material/
|
|
*
|
|
* Agron Theme
|
|
* https://demos.creative-tim.com/argon-dashboard/index.html
|
|
*
|
|
* Login background
|
|
* https://unsplash.com/
|
|
* Font generate by Icomoon<icomoon.io>
|
|
*
|
|
* Licensed to the public under the Apache License 2.0
|
|
*/
|
|
:root {
|
|
color-scheme: light;
|
|
--light-primary: #5e72e4;
|
|
--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, 0.18);
|
|
--dark-selected-bg: #262e4f;
|
|
--dark-selected-hover-bg: #333d64;
|
|
--dark-accent-ring: rgba(176, 193, 255, 0.28);
|
|
--dark-accent-shadow: rgba(176, 193, 255, 0.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: 0.5;
|
|
--blur-radius-dark: 10px;
|
|
--blur-opacity-dark: 0.5;
|
|
--blur-radius: var(--blur-radius-light);
|
|
--blur-opacity: var(--blur-opacity-light);
|
|
--primary: var(--light-primary);
|
|
--success: #2dce89;
|
|
--info: #11cdef;
|
|
--warning: #fb6340;
|
|
--danger: #f5365c;
|
|
--error-text: #ffd600;
|
|
--strength-weak-text: #b42318;
|
|
--strength-medium-text: #805600;
|
|
--strength-strong-text: #166534;
|
|
--text-strong: #32325d;
|
|
--text-color: #525f7f;
|
|
--muted-text: #626f80;
|
|
--control-text: var(--text-color);
|
|
--soft-text: #ced4da;
|
|
--text-on-accent: #fff;
|
|
--accent-text: var(--text-on-accent);
|
|
--accent-border: var(--primary);
|
|
--accent-shadow-color: rgba(94, 114, 228, 0.1);
|
|
--neutral-action-text: var(--text-on-accent);
|
|
--notice-text: var(--text-on-accent);
|
|
--text-inverse: #fff;
|
|
--placeholder-color: #626f80;
|
|
--focus-ring: #3446ab;
|
|
--control-focus: var(--primary);
|
|
--link-color: var(--primary);
|
|
--help-text: var(--primary);
|
|
--code-text: #212529;
|
|
--data-token-text: #0069d6;
|
|
--log-text: #242424;
|
|
--overlay-text: #172b4d;
|
|
--background-color: #f4f5f7;
|
|
--main-bg: transparent;
|
|
--surface-color: #fff;
|
|
--surface-raised: #fff;
|
|
--surface-panel: #fff;
|
|
--surface-muted: #f6f9fc;
|
|
--surface-inset: #f4f5f7;
|
|
--surface-active: #e4e9ee;
|
|
--surface-contrast: #e9ecef;
|
|
--row-color: #f4f4f4;
|
|
--row-alt: #f9f9f9;
|
|
--media-bg: #000;
|
|
--border-color: #dee2e6;
|
|
--control-border: var(--border-color);
|
|
--control-subtle-border: var(--border-muted);
|
|
--border-subtle: #ddd;
|
|
--border-muted: #e9ecef;
|
|
--border-strong: #cbd5e1;
|
|
--border-emphasis: #8898aa;
|
|
--border-inverse: #fff;
|
|
--separator-color: #f4f5f7;
|
|
--table-border: thin solid var(--border-subtle);
|
|
--overlay-focus: #172b4d;
|
|
--header-bg: var(--primary);
|
|
--menu-color: #5f6368;
|
|
--main-menu-color: #202124;
|
|
--sidebar-brand-color: var(--primary);
|
|
--invalid-bg: #fce6e6;
|
|
--command-bg: #eee;
|
|
--input-bg: #fff;
|
|
--select-bg: var(--surface-color);
|
|
--dropdown-control-bg: transparent;
|
|
--neutral-button-bg: #f0f0f0;
|
|
--neutral-action-bg: #8898aa;
|
|
--action-muted-solid: #8898aa;
|
|
--status-neutral-bg: #32325d;
|
|
--plain-button-bg: #f0f0f0;
|
|
--plain-button-text: #8898aa;
|
|
--tab-color: var(--primary);
|
|
--tab-item-bg: #dce3e9;
|
|
--tab-inactive-color: #404040;
|
|
--progress-bg: #e9ecef;
|
|
--progress-fill: var(--primary);
|
|
--chart-series-1: #0000ff;
|
|
--chart-series-2: #008000;
|
|
--chart-series-3: #ff0000;
|
|
--chart-series-4: #ff6600;
|
|
--chart-series-5: #ffaa00;
|
|
--chart-area-opacity: 0.4;
|
|
--iface-bg: #f9f9f9;
|
|
--iface-head-bg: #eee;
|
|
--iface-head-text: var(--text-strong);
|
|
--iface-body-bg: transparent;
|
|
--iface-border: 0;
|
|
--badge-bg: #eee;
|
|
--label-bg: #bfbfbf;
|
|
--dropdown-text: var(--text-strong);
|
|
--dropdown-selected-text: var(--text-strong);
|
|
--dropdown-selected-bg: #e8ecff;
|
|
--dropdown-hover-bg: var(--surface-active);
|
|
--sidebar-scrollbar: #f6f9fc;
|
|
--login-panel-rgb: 244, 245, 247;
|
|
--login-text: #101828;
|
|
--login-input-border: #fff;
|
|
--positive-bg: var(--primary);
|
|
--danger-bg: var(--danger);
|
|
--success-bg: var(--success);
|
|
--feedback-text: inherit;
|
|
--negative-bg: var(--danger);
|
|
--reset-bg: #f0ad4e;
|
|
--reset-border: #eea236;
|
|
--reset-action-bg: var(--danger);
|
|
--success-action-bg: #5cb85c;
|
|
--success-action-border: #4cae4c;
|
|
--warning-action-bg: var(--warning);
|
|
--warning-badge-bg: #f0ad4e;
|
|
--notice-bg: var(--info);
|
|
--warning-bg: var(--warning);
|
|
--error-bg: #fb6340;
|
|
--warning-heading-bg: transparent;
|
|
--warning-heading-color: #8c6900;
|
|
--feedback-heading-bg: var(--warning-heading-bg);
|
|
--feedback-heading-text: var(--warning-heading-color);
|
|
--change-added-bg: #cfc;
|
|
--change-added-border: #0f0;
|
|
--change-removed-bg: #fcc;
|
|
--change-removed-border: #f00;
|
|
--change-modified-bg: #eee;
|
|
--change-modified-border: #ccc;
|
|
--plugin-card-bg: #fff;
|
|
--vlan-text-muted: #626b7a;
|
|
--vlan-selected-bg: #e8ecff;
|
|
--vlan-selected-hover-bg: #dfe4ff;
|
|
--vlan-selected-border: var(--primary);
|
|
--vlan-selected-ring: rgba(94, 114, 228, 0.28);
|
|
--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');
|
|
--vlan-tagged-rgb: 140, 72, 0;
|
|
--vlan-untagged-rgb: 6, 104, 95;
|
|
--vlan-checked-text: #fff;
|
|
--zone-positive-rgb: 144, 240, 144;
|
|
--zone-negative-rgb: 240, 144, 144;
|
|
--zone-neutral-rgb: 238, 238, 238;
|
|
--zone-label-color: #333;
|
|
--plugin-text-muted: #8898aa;
|
|
--plugin-neutral: #8898aa;
|
|
--plugin-scrollbar: #f6f9fc;
|
|
--command-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
|
--section-shadow: 0 0 1rem rgba(136, 152, 170, 0.15);
|
|
--sidebar-shadow: rgba(0, 0, 0, 0.75) 0 0 15px -5px;
|
|
--dropdown-shadow: 0 4px 8px rgba(0, 0, 0, .06), 0 12px 24px rgba(0, 0, 0, .12);
|
|
--button-hover-shadow: 0 2px 4px rgba(0, 0, 0, .16), 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);
|
|
--file-icon-filter: none;
|
|
--image-filter: none;
|
|
--header-color: var(--text-on-accent);
|
|
--menu-bg-color: var(--surface-raised);
|
|
--red: var(--danger);
|
|
--orange: #fb6340;
|
|
--yellow: var(--error-text);
|
|
--green: var(--success);
|
|
--teal: var(--info);
|
|
--white: #fff;
|
|
--gray: var(--muted-text);
|
|
--gray-dark: var(--text-strong);
|
|
--lighter: var(--surface-contrast);
|
|
--light: #adb5bd;
|
|
--dark: var(--code-text);
|
|
--default: var(--overlay-text);
|
|
--darker: var(--media-bg);
|
|
--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);
|
|
}
|
|
:root[data-argon-mode="dark"] {
|
|
color-scheme: dark;
|
|
--primary: var(--dark-primary);
|
|
--warning: #f6c177;
|
|
--danger: #ffa9ae;
|
|
--error-text: var(--danger);
|
|
--strength-weak-text: #ffb4ab;
|
|
--strength-medium-text: #f5c24b;
|
|
--strength-strong-text: #86efac;
|
|
--text-strong: #e6e6e6;
|
|
--text-color: #ccc;
|
|
--muted-text: #adb5bd;
|
|
--soft-text: #ccc;
|
|
--accent-text: var(--dark-on-primary);
|
|
--accent-border: var(--dark-link-color);
|
|
--accent-shadow-color: var(--dark-accent-shadow);
|
|
--neutral-action-text: var(--accent-text);
|
|
--notice-text: var(--accent-text);
|
|
--placeholder-color: #adb5bd;
|
|
--focus-ring: var(--dark-focus-ring);
|
|
--control-focus: var(--dark-control-focus);
|
|
--link-color: var(--dark-link-color);
|
|
--help-text: var(--dark-link-color);
|
|
--code-text: #ccc;
|
|
--data-token-text: var(--link-color);
|
|
--log-text: #ccc;
|
|
--overlay-text: #adb5bd;
|
|
--background-color: #181819;
|
|
--main-bg: var(--background-color);
|
|
--surface-color: #252526;
|
|
--surface-raised: #333;
|
|
--surface-panel: #2d2d2d;
|
|
--surface-muted: #2d2d2d;
|
|
--surface-inset: #1e1e1e;
|
|
--surface-active: #3c3c3c;
|
|
--surface-contrast: #3c3c3c;
|
|
--row-color: var(--surface-color);
|
|
--row-alt: #2d2d2d;
|
|
--border-color: #3c3c3c;
|
|
--control-border: #808080;
|
|
--control-subtle-border: var(--control-border);
|
|
--border-subtle: #252526;
|
|
--border-muted: #3c3c3c;
|
|
--border-strong: #515151;
|
|
--border-emphasis: #adb5bd;
|
|
--separator-color: #1e1e1e;
|
|
--table-border: 0;
|
|
--overlay-focus: #adb5bd;
|
|
--header-bg: #1e1e1e;
|
|
--menu-color: #ccc;
|
|
--main-menu-color: #ccc;
|
|
--sidebar-brand-color: #ccc;
|
|
--invalid-bg: #1e1e1e;
|
|
--command-bg: #252526;
|
|
--input-bg: #1e1e1e;
|
|
--select-bg: var(--input-bg);
|
|
--dropdown-control-bg: var(--input-bg);
|
|
--neutral-button-bg: var(--primary);
|
|
--neutral-action-bg: var(--primary);
|
|
--action-muted-solid: #5b5b5b;
|
|
--plain-button-bg: #707070;
|
|
--plain-button-text: #fff;
|
|
--tab-color: var(--link-color);
|
|
--tab-item-bg: #2d2d2d;
|
|
--tab-inactive-color: #ccc;
|
|
--progress-bg: var(--surface-inset);
|
|
--progress-fill: var(--dark-progress-fill);
|
|
--chart-series-1: #85adff;
|
|
--chart-series-2: #64d9a3;
|
|
--chart-series-3: #ffa9ae;
|
|
--chart-series-4: #ffb789;
|
|
--chart-series-5: #f6c177;
|
|
--chart-area-opacity: 0.18;
|
|
--iface-bg: transparent;
|
|
--iface-head-bg: #666;
|
|
--iface-head-text: #fff;
|
|
--iface-body-bg: #333;
|
|
--iface-border: 1px solid var(--separator-color);
|
|
--badge-bg: #333;
|
|
--label-bg: #5b5b5b;
|
|
--dropdown-selected-bg: var(--dark-selected-bg);
|
|
--sidebar-scrollbar: #252526;
|
|
--login-panel-rgb: 0, 0, 0;
|
|
--login-text: #adb5bd;
|
|
--login-input-border: #adb5bd;
|
|
--danger-bg: #c73850;
|
|
--success-bg: #028453;
|
|
--feedback-text: var(--text-on-accent);
|
|
--negative-bg: var(--danger-bg);
|
|
--reset-bg: var(--warning-bg);
|
|
--reset-border: var(--warning-bg);
|
|
--reset-action-bg: var(--reset-bg);
|
|
--success-action-bg: var(--success-bg);
|
|
--success-action-border: var(--success-bg);
|
|
--warning-action-bg: var(--warning-bg);
|
|
--warning-badge-bg: var(--warning-bg);
|
|
--notice-bg: var(--primary);
|
|
--warning-bg: #906521;
|
|
--error-bg: #49252d;
|
|
--warning-heading-bg: #784f00;
|
|
--warning-heading-color: var(--warning);
|
|
--feedback-heading-bg: transparent;
|
|
--feedback-heading-text: inherit;
|
|
--change-added-bg: #1f3e30;
|
|
--change-added-border: var(--success);
|
|
--change-removed-bg: #49252d;
|
|
--change-removed-border: var(--danger);
|
|
--change-modified-bg: #333;
|
|
--change-modified-border: #666;
|
|
--plugin-card-bg: #3c3c3c;
|
|
--vlan-text-muted: #adb5bd;
|
|
--vlan-selected-bg: var(--dark-selected-bg);
|
|
--vlan-selected-hover-bg: var(--dark-selected-hover-bg);
|
|
--vlan-selected-border: var(--link-color);
|
|
--vlan-selected-ring: var(--dark-accent-ring);
|
|
--checkmark-icon: var(--dark-checkmark-icon);
|
|
--vlan-tagged-rgb: 251, 191, 36;
|
|
--vlan-untagged-rgb: 45, 212, 191;
|
|
--vlan-checked-text: #1e1e1e;
|
|
--zone-positive-rgb: 73, 126, 73;
|
|
--zone-negative-rgb: 156, 79, 79;
|
|
--zone-neutral-rgb: 112, 112, 112;
|
|
--zone-label-color: #fff;
|
|
--plugin-text-muted: #a1a1aa;
|
|
--plugin-neutral: #5b5b5b;
|
|
--plugin-scrollbar: #5b5b5b;
|
|
--command-shadow: inset 0 1px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(255, 255, 255, .05);
|
|
--section-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.35);
|
|
--sidebar-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
|
|
--dropdown-shadow: 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, .5), 0 4px 12px var(--accent-shadow-color);
|
|
--control-focus-shadow: 0 0 0 2px var(--dark-control-ring);
|
|
--file-icon-filter: invert(0.7);
|
|
--image-filter: invert(0.9);
|
|
--blur-radius: var(--blur-radius-dark);
|
|
--blur-opacity: var(--blur-opacity-dark);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-argon-mode="light"]):not([data-argon-mode="dark"]) {
|
|
color-scheme: dark;
|
|
--primary: var(--dark-primary);
|
|
--warning: #f6c177;
|
|
--danger: #ffa9ae;
|
|
--error-text: var(--danger);
|
|
--strength-weak-text: #ffb4ab;
|
|
--strength-medium-text: #f5c24b;
|
|
--strength-strong-text: #86efac;
|
|
--text-strong: #e6e6e6;
|
|
--text-color: #ccc;
|
|
--muted-text: #adb5bd;
|
|
--soft-text: #ccc;
|
|
--accent-text: var(--dark-on-primary);
|
|
--accent-border: var(--dark-link-color);
|
|
--accent-shadow-color: var(--dark-accent-shadow);
|
|
--neutral-action-text: var(--accent-text);
|
|
--notice-text: var(--accent-text);
|
|
--placeholder-color: #adb5bd;
|
|
--focus-ring: var(--dark-focus-ring);
|
|
--control-focus: var(--dark-control-focus);
|
|
--link-color: var(--dark-link-color);
|
|
--help-text: var(--dark-link-color);
|
|
--code-text: #ccc;
|
|
--data-token-text: var(--link-color);
|
|
--log-text: #ccc;
|
|
--overlay-text: #adb5bd;
|
|
--background-color: #181819;
|
|
--main-bg: var(--background-color);
|
|
--surface-color: #252526;
|
|
--surface-raised: #333;
|
|
--surface-panel: #2d2d2d;
|
|
--surface-muted: #2d2d2d;
|
|
--surface-inset: #1e1e1e;
|
|
--surface-active: #3c3c3c;
|
|
--surface-contrast: #3c3c3c;
|
|
--row-color: var(--surface-color);
|
|
--row-alt: #2d2d2d;
|
|
--border-color: #3c3c3c;
|
|
--control-border: #808080;
|
|
--control-subtle-border: var(--control-border);
|
|
--border-subtle: #252526;
|
|
--border-muted: #3c3c3c;
|
|
--border-strong: #515151;
|
|
--border-emphasis: #adb5bd;
|
|
--separator-color: #1e1e1e;
|
|
--table-border: 0;
|
|
--overlay-focus: #adb5bd;
|
|
--header-bg: #1e1e1e;
|
|
--menu-color: #ccc;
|
|
--main-menu-color: #ccc;
|
|
--sidebar-brand-color: #ccc;
|
|
--invalid-bg: #1e1e1e;
|
|
--command-bg: #252526;
|
|
--input-bg: #1e1e1e;
|
|
--select-bg: var(--input-bg);
|
|
--dropdown-control-bg: var(--input-bg);
|
|
--neutral-button-bg: var(--primary);
|
|
--neutral-action-bg: var(--primary);
|
|
--action-muted-solid: #5b5b5b;
|
|
--plain-button-bg: #707070;
|
|
--plain-button-text: #fff;
|
|
--tab-color: var(--link-color);
|
|
--tab-item-bg: #2d2d2d;
|
|
--tab-inactive-color: #ccc;
|
|
--progress-bg: var(--surface-inset);
|
|
--progress-fill: var(--dark-progress-fill);
|
|
--chart-series-1: #85adff;
|
|
--chart-series-2: #64d9a3;
|
|
--chart-series-3: #ffa9ae;
|
|
--chart-series-4: #ffb789;
|
|
--chart-series-5: #f6c177;
|
|
--chart-area-opacity: 0.18;
|
|
--iface-bg: transparent;
|
|
--iface-head-bg: #666;
|
|
--iface-head-text: #fff;
|
|
--iface-body-bg: #333;
|
|
--iface-border: 1px solid var(--separator-color);
|
|
--badge-bg: #333;
|
|
--label-bg: #5b5b5b;
|
|
--dropdown-selected-bg: var(--dark-selected-bg);
|
|
--sidebar-scrollbar: #252526;
|
|
--login-panel-rgb: 0, 0, 0;
|
|
--login-text: #adb5bd;
|
|
--login-input-border: #adb5bd;
|
|
--danger-bg: #c73850;
|
|
--success-bg: #028453;
|
|
--feedback-text: var(--text-on-accent);
|
|
--negative-bg: var(--danger-bg);
|
|
--reset-bg: var(--warning-bg);
|
|
--reset-border: var(--warning-bg);
|
|
--reset-action-bg: var(--reset-bg);
|
|
--success-action-bg: var(--success-bg);
|
|
--success-action-border: var(--success-bg);
|
|
--warning-action-bg: var(--warning-bg);
|
|
--warning-badge-bg: var(--warning-bg);
|
|
--notice-bg: var(--primary);
|
|
--warning-bg: #906521;
|
|
--error-bg: #49252d;
|
|
--warning-heading-bg: #784f00;
|
|
--warning-heading-color: var(--warning);
|
|
--feedback-heading-bg: transparent;
|
|
--feedback-heading-text: inherit;
|
|
--change-added-bg: #1f3e30;
|
|
--change-added-border: var(--success);
|
|
--change-removed-bg: #49252d;
|
|
--change-removed-border: var(--danger);
|
|
--change-modified-bg: #333;
|
|
--change-modified-border: #666;
|
|
--plugin-card-bg: #3c3c3c;
|
|
--vlan-text-muted: #adb5bd;
|
|
--vlan-selected-bg: var(--dark-selected-bg);
|
|
--vlan-selected-hover-bg: var(--dark-selected-hover-bg);
|
|
--vlan-selected-border: var(--link-color);
|
|
--vlan-selected-ring: var(--dark-accent-ring);
|
|
--checkmark-icon: var(--dark-checkmark-icon);
|
|
--vlan-tagged-rgb: 251, 191, 36;
|
|
--vlan-untagged-rgb: 45, 212, 191;
|
|
--vlan-checked-text: #1e1e1e;
|
|
--zone-positive-rgb: 73, 126, 73;
|
|
--zone-negative-rgb: 156, 79, 79;
|
|
--zone-neutral-rgb: 112, 112, 112;
|
|
--zone-label-color: #fff;
|
|
--plugin-text-muted: #a1a1aa;
|
|
--plugin-neutral: #5b5b5b;
|
|
--plugin-scrollbar: #5b5b5b;
|
|
--command-shadow: inset 0 1px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(255, 255, 255, .05);
|
|
--section-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.35);
|
|
--sidebar-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
|
|
--dropdown-shadow: 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, .5), 0 4px 12px var(--accent-shadow-color);
|
|
--control-focus-shadow: 0 0 0 2px var(--dark-control-ring);
|
|
--file-icon-filter: invert(0.7);
|
|
--image-filter: invert(0.9);
|
|
--blur-radius: var(--blur-radius-dark);
|
|
--blur-opacity: var(--blur-opacity-dark);
|
|
}
|
|
}
|
|
:root {
|
|
--page-gutter: 1.25rem;
|
|
--section-inset: 1.25rem;
|
|
--section-gap: 1rem;
|
|
--field-gap: 1rem;
|
|
--control-gap: 0.5rem;
|
|
--action-gap: 0.75rem;
|
|
}
|
|
:root {
|
|
--radius-small: 0.25rem;
|
|
--radius-control: 0.375rem;
|
|
--radius-menu: 0.5rem;
|
|
--radius-panel: 0.5rem;
|
|
--radius-card: 0.75rem;
|
|
--radius-dialog: 1rem;
|
|
--radius-pill: 999px;
|
|
--radius-circle: 50%;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
@font-face {
|
|
font-family: 'Google Sans';
|
|
src: local('Google Sans'), local('GoogleSans-Regular'), url('../fonts/GoogleSans-Regular.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
/* Logo Font */
|
|
@font-face {
|
|
font-family: 'TypoGraphica';
|
|
src: local('TypoGraphica'), url('../fonts/TypoGraphica.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: var(--font-family-sans-serif);
|
|
}
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-strong);
|
|
-webkit-tap-highlight-color: transparent;
|
|
font-size: 0.875rem;
|
|
}
|
|
main {
|
|
display: block;
|
|
}
|
|
.h1,
|
|
.h2,
|
|
.h3,
|
|
.h4,
|
|
.h5,
|
|
.h6,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
line-height: 1.4;
|
|
color: inherit;
|
|
}
|
|
h1 {
|
|
font-size: 2rem;
|
|
margin: 0.67em 0;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: thin solid var(--border-muted);
|
|
}
|
|
h2 {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
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: var(--field-gap) var(--section-inset);
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
line-height: 1.4;
|
|
color: var(--text-strong);
|
|
border-radius: var(--radius-card);
|
|
background: var(--surface-raised);
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
h4 {
|
|
margin: 0;
|
|
padding: 0.75rem 1.25rem;
|
|
font-size: 0.875rem;
|
|
font-weight: bold;
|
|
color: var(--gray-dark-400);
|
|
}
|
|
h4 em {
|
|
padding: 0 0.5rem;
|
|
}
|
|
h5 {
|
|
margin: 2rem 0 0 0;
|
|
padding-bottom: 0.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
a {
|
|
background-color: transparent;
|
|
}
|
|
abbr {
|
|
cursor: help;
|
|
text-decoration: underline;
|
|
color: var(--help-text);
|
|
}
|
|
abbr[title] {
|
|
border-bottom: none;
|
|
text-decoration: underline;
|
|
-webkit-text-decoration: underline dotted;
|
|
text-decoration: underline dotted;
|
|
}
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
padding: 1px 3px;
|
|
color: var(--code-text);
|
|
border-radius: var(--radius-small);
|
|
background: var(--surface-contrast);
|
|
}
|
|
small {
|
|
font-size: 90%;
|
|
line-height: 1.42857143;
|
|
white-space: normal;
|
|
}
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
margin: 1rem 0;
|
|
overflow: visible;
|
|
opacity: 0.1;
|
|
border-color: var(--border-muted);
|
|
}
|
|
pre {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
overflow: auto;
|
|
}
|
|
img {
|
|
border-style: none;
|
|
}
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
line-height: 1.15;
|
|
margin: 0;
|
|
}
|
|
button,
|
|
input {
|
|
overflow: visible;
|
|
}
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
[type=button],
|
|
[type=reset],
|
|
[type=submit],
|
|
button {
|
|
-webkit-appearance: button;
|
|
appearance: button;
|
|
}
|
|
[type=button]::-moz-focus-inner,
|
|
[type=reset]::-moz-focus-inner,
|
|
[type=submit]::-moz-focus-inner,
|
|
button::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
[type=button]:-moz-focusring,
|
|
[type=reset]:-moz-focusring,
|
|
[type=submit]:-moz-focusring,
|
|
button:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
[type=checkbox],
|
|
[type=radio] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
[type=number]::-webkit-inner-spin-button,
|
|
[type=number]::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
[type=search] {
|
|
-webkit-appearance: textfield;
|
|
appearance: textfield;
|
|
outline-offset: -2px;
|
|
}
|
|
[type=search]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button;
|
|
appearance: button;
|
|
font: inherit;
|
|
}
|
|
input[type="checkbox"] {
|
|
appearance: none !important;
|
|
-webkit-appearance: none !important;
|
|
border: 1px solid var(--accent-border);
|
|
border-radius: var(--radius-small);
|
|
width: 1rem !important;
|
|
height: 1rem !important;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
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;
|
|
}
|
|
input[type="radio"] {
|
|
border-radius: var(--radius-circle);
|
|
}
|
|
select {
|
|
padding: 0.36rem 0.8rem;
|
|
color: var(--text-strong);
|
|
border: thin solid var(--border-muted);
|
|
background-image: none;
|
|
}
|
|
textarea {
|
|
padding: 0.25rem;
|
|
overflow: auto;
|
|
border-radius: var(--radius-control);
|
|
outline: none;
|
|
}
|
|
textarea:focus-visible {
|
|
border: 1px solid var(--control-focus);
|
|
}
|
|
fieldset {
|
|
padding: 0.35em 0.75em 0.625em;
|
|
}
|
|
legend {
|
|
box-sizing: border-box;
|
|
color: inherit;
|
|
display: table;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
white-space: normal;
|
|
}
|
|
details {
|
|
display: block;
|
|
}
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
template {
|
|
display: none;
|
|
}
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
ul {
|
|
line-height: normal;
|
|
}
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
[disabled="disabled"] {
|
|
pointer-events: none;
|
|
}
|
|
::selection {
|
|
background-color: var(--primary);
|
|
color: var(--accent-text);
|
|
}
|
|
::placeholder {
|
|
color: var(--placeholder-color);
|
|
}
|
|
a:link,
|
|
a:visited,
|
|
a:active {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.pull-right {
|
|
float: right;
|
|
}
|
|
.pull-left {
|
|
float: left;
|
|
}
|
|
.nowrap:not(.td) {
|
|
white-space: nowrap;
|
|
}
|
|
div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
|
|
border: 0 !important;
|
|
}
|
|
/**
|
|
Pure v3.0.0
|
|
Copyright 2013 Yahoo!
|
|
Licensed under the BSD License.
|
|
https://github.com/pure-css/pure/blob/master/LICENSE
|
|
*/
|
|
/**
|
|
normalize.css v | MIT License | https://necolas.github.io/normalize.css/
|
|
Copyright (c) Nicolas Gallagher and Jonathan Neal
|
|
*/
|
|
/** normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
.pure-g {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-content: flex-start;
|
|
}
|
|
.pure-u {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.pure-u-1,
|
|
.pure-u-1-1,
|
|
.pure-u-1-12,
|
|
.pure-u-1-2,
|
|
.pure-u-1-24,
|
|
.pure-u-1-3,
|
|
.pure-u-1-4,
|
|
.pure-u-1-5,
|
|
.pure-u-1-6,
|
|
.pure-u-1-8,
|
|
.pure-u-10-24,
|
|
.pure-u-11-12,
|
|
.pure-u-11-24,
|
|
.pure-u-12-24,
|
|
.pure-u-13-24,
|
|
.pure-u-14-24,
|
|
.pure-u-15-24,
|
|
.pure-u-16-24,
|
|
.pure-u-17-24,
|
|
.pure-u-18-24,
|
|
.pure-u-19-24,
|
|
.pure-u-2-24,
|
|
.pure-u-2-3,
|
|
.pure-u-2-5,
|
|
.pure-u-20-24,
|
|
.pure-u-21-24,
|
|
.pure-u-22-24,
|
|
.pure-u-23-24,
|
|
.pure-u-24-24,
|
|
.pure-u-3-24,
|
|
.pure-u-3-4,
|
|
.pure-u-3-5,
|
|
.pure-u-3-8,
|
|
.pure-u-4-24,
|
|
.pure-u-4-5,
|
|
.pure-u-5-12,
|
|
.pure-u-5-24,
|
|
.pure-u-5-5,
|
|
.pure-u-5-6,
|
|
.pure-u-5-8,
|
|
.pure-u-6-24,
|
|
.pure-u-7-12,
|
|
.pure-u-7-24,
|
|
.pure-u-7-8,
|
|
.pure-u-8-24,
|
|
.pure-u-9-24 {
|
|
display: inline-block;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
vertical-align: top;
|
|
text-rendering: auto;
|
|
}
|
|
.pure-u-1-24 {
|
|
width: 4.1667%;
|
|
}
|
|
.pure-u-1-12,
|
|
.pure-u-2-24 {
|
|
width: 8.3333%;
|
|
}
|
|
.pure-u-1-8,
|
|
.pure-u-3-24 {
|
|
width: 12.5%;
|
|
}
|
|
.pure-u-1-6,
|
|
.pure-u-4-24 {
|
|
width: 16.6667%;
|
|
}
|
|
.pure-u-1-5 {
|
|
width: 20%;
|
|
}
|
|
.pure-u-5-24 {
|
|
width: 20.8333%;
|
|
}
|
|
.pure-u-1-4,
|
|
.pure-u-6-24 {
|
|
width: 25%;
|
|
}
|
|
.pure-u-7-24 {
|
|
width: 29.1667%;
|
|
}
|
|
.pure-u-1-3,
|
|
.pure-u-8-24 {
|
|
width: 33.3333%;
|
|
}
|
|
.pure-u-3-8,
|
|
.pure-u-9-24 {
|
|
width: 37.5%;
|
|
}
|
|
.pure-u-2-5 {
|
|
width: 40%;
|
|
}
|
|
.pure-u-10-24,
|
|
.pure-u-5-12 {
|
|
width: 41.6667%;
|
|
}
|
|
.pure-u-11-24 {
|
|
width: 45.8333%;
|
|
}
|
|
.pure-u-1-2,
|
|
.pure-u-12-24 {
|
|
width: 50%;
|
|
}
|
|
.pure-u-13-24 {
|
|
width: 54.1667%;
|
|
}
|
|
.pure-u-14-24,
|
|
.pure-u-7-12 {
|
|
width: 58.3333%;
|
|
}
|
|
.pure-u-3-5 {
|
|
width: 60%;
|
|
}
|
|
.pure-u-15-24,
|
|
.pure-u-5-8 {
|
|
width: 62.5%;
|
|
}
|
|
.pure-u-16-24,
|
|
.pure-u-2-3 {
|
|
width: 66.6667%;
|
|
}
|
|
.pure-u-17-24 {
|
|
width: 70.8333%;
|
|
}
|
|
.pure-u-18-24,
|
|
.pure-u-3-4 {
|
|
width: 75%;
|
|
}
|
|
.pure-u-19-24 {
|
|
width: 79.1667%;
|
|
}
|
|
.pure-u-4-5 {
|
|
width: 80%;
|
|
}
|
|
.pure-u-20-24,
|
|
.pure-u-5-6 {
|
|
width: 83.3333%;
|
|
}
|
|
.pure-u-21-24,
|
|
.pure-u-7-8 {
|
|
width: 87.5%;
|
|
}
|
|
.pure-u-11-12,
|
|
.pure-u-22-24 {
|
|
width: 91.6667%;
|
|
}
|
|
.pure-u-23-24 {
|
|
width: 95.8333%;
|
|
}
|
|
.pure-u-1,
|
|
.pure-u-1-1,
|
|
.pure-u-24-24,
|
|
.pure-u-5-5 {
|
|
width: 100%;
|
|
}
|
|
.col-1 {
|
|
flex: 1 1 30px !important;
|
|
}
|
|
.col-2 {
|
|
flex: 2 2 60px !important;
|
|
}
|
|
.col-3 {
|
|
flex: 3 3 90px !important;
|
|
}
|
|
.col-4 {
|
|
flex: 4 4 120px !important;
|
|
}
|
|
.col-5 {
|
|
flex: 5 5 150px !important;
|
|
}
|
|
.col-6 {
|
|
flex: 6 6 180px !important;
|
|
}
|
|
.col-7 {
|
|
flex: 7 7 210px !important;
|
|
}
|
|
.col-8 {
|
|
flex: 8 8 240px !important;
|
|
}
|
|
.col-9 {
|
|
flex: 9 9 270px !important;
|
|
}
|
|
.col-10 {
|
|
flex: 10 10 300px !important;
|
|
}
|
|
.btn,
|
|
button,
|
|
select,
|
|
input,
|
|
.cbi-dropdown {
|
|
line-height: 1.5rem;
|
|
height: 2.5rem;
|
|
padding: 0.5rem 0.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 0.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 {
|
|
--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: 0.75rem;
|
|
background-image: none;
|
|
}
|
|
[dir="rtl"] select:not([multiple]) {
|
|
background-position: left 0.5rem center;
|
|
}
|
|
.login-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
}
|
|
.login-page .main-bg,
|
|
.login-page .video {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.login-page .main-bg {
|
|
background: url(../img/blank.png) no-repeat center / cover;
|
|
}
|
|
.login-page .main-bg img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.login-page .video {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--media-bg);
|
|
overflow: hidden;
|
|
}
|
|
.login-page .video video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.login-page .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;
|
|
}
|
|
.login-page .volume-control:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 4px;
|
|
}
|
|
.login-page .volume-control.mute {
|
|
background-image: url(../img/volume_off.svg);
|
|
}
|
|
.login-page .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, 0.75) 0 0 35px -5px;
|
|
}
|
|
.login-page .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;
|
|
}
|
|
.login-page .login-form .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;
|
|
}
|
|
.login-page .login-form .brand .icon {
|
|
flex: 0 0 auto;
|
|
width: var(--login-logo-size);
|
|
height: var(--login-logo-size);
|
|
object-fit: contain;
|
|
}
|
|
.login-page .login-form .brand .brand-text {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
font-family: "TypoGraphica";
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
.login-page .login-form .form-login {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin-block: auto;
|
|
padding-block: 2rem;
|
|
padding-inline: var(--login-inset);
|
|
}
|
|
.login-page .login-form .form-login .errorbox {
|
|
padding: 0.75rem 1rem;
|
|
overflow-wrap: anywhere;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-control);
|
|
background: color-mix(in srgb, var(--warning) 6%, var(--surface-color));
|
|
color: var(--text-strong);
|
|
line-height: 1.5;
|
|
text-align: start;
|
|
}
|
|
.login-page .login-form .form-login .input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
min-width: 0;
|
|
}
|
|
.login-page .login-form .form-login .input-group {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
.login-page .login-form .form-login .input-group::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
inset-inline-start: 0.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;
|
|
}
|
|
.login-page .login-form .form-login .input-group.user-icon::before {
|
|
content: "";
|
|
--login-field-icon: url('../icon/user.svg');
|
|
}
|
|
.login-page .login-form .form-login .input-group.pass-icon::before {
|
|
content: "";
|
|
--login-field-icon: url('../icon/password.svg');
|
|
}
|
|
.login-page .login-form .form-login .input-group input {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0.5rem 0.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, 0.05);
|
|
}
|
|
.login-page .login-form .form-login .input-group input::placeholder {
|
|
color: var(--placeholder-color);
|
|
opacity: 1;
|
|
}
|
|
.login-page .login-form .form-login .input-group input:focus + .border {
|
|
transform: scaleX(1);
|
|
}
|
|
.login-page .login-form .form-login .input-group .border {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
bottom: 0;
|
|
height: 2px;
|
|
background-color: var(--control-focus);
|
|
transform: scaleX(0);
|
|
pointer-events: none;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.login-page .login-form .form-login .input-group .border {
|
|
transition: transform 0.15s ease;
|
|
}
|
|
}
|
|
.login-page .login-form .form-login .auth-plugin {
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
overflow-x: auto;
|
|
}
|
|
.login-page .login-form .form-login .cbi-button-apply {
|
|
width: 100% !important;
|
|
min-height: 50px;
|
|
height: auto;
|
|
margin: 0;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1rem;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
color: var(--accent-text);
|
|
background-color: var(--primary) !important;
|
|
border: 0;
|
|
border-radius: var(--radius-control);
|
|
transition: box-shadow 0.15s ease-out, scale 0.15s ease-out;
|
|
}
|
|
.login-page .login-form .form-login .cbi-button-apply:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 3px;
|
|
}
|
|
.login-page footer {
|
|
position: static;
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin-block-start: auto;
|
|
padding: 1.5rem var(--login-inset);
|
|
color: var(--login-text);
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.login-page footer .login-footer-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.25rem 1rem;
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
.login-page footer a {
|
|
color: inherit;
|
|
}
|
|
.login-page footer a:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 3px;
|
|
}
|
|
@media (hover: hover) {
|
|
.login-page footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
@media screen and (max-width: 480px) {
|
|
.login-page .login-container {
|
|
width: 100%;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
.login-page[data-login-style="centered"] {
|
|
align-items: center;
|
|
padding: 2rem 1rem;
|
|
}
|
|
.login-page[data-login-style="centered"] .login-container {
|
|
--login-inset: 2rem;
|
|
--login-logo-size: 2.5rem;
|
|
--login-logo-gap: 1rem;
|
|
width: 26rem;
|
|
min-height: 0;
|
|
margin: auto 0;
|
|
border-radius: var(--radius-dialog);
|
|
}
|
|
.login-page[data-login-style="centered"] .login-form {
|
|
flex: 0 0 auto;
|
|
padding-block: 0;
|
|
}
|
|
.login-page[data-login-style="centered"] .login-form .brand {
|
|
justify-content: center;
|
|
padding: 2rem 1.5rem 1.5rem;
|
|
}
|
|
.login-page[data-login-style="centered"] .login-form .form-login {
|
|
margin-block: 0;
|
|
padding-block: 0;
|
|
}
|
|
@media screen and (max-width: 480px) {
|
|
.login-page[data-login-style="centered"] {
|
|
padding: 1rem;
|
|
}
|
|
.login-page[data-login-style="centered"] .login-container {
|
|
--login-inset: 1.25rem;
|
|
}
|
|
}
|
|
.main {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.main-left {
|
|
--menu-icon-system: #fb6340;
|
|
--menu-icon-services: #11cdef;
|
|
--menu-icon-network: #8965e0;
|
|
--menu-icon-muted: #adb5bd;
|
|
--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(--surface-raised);
|
|
box-shadow: var(--sidebar-shadow);
|
|
}
|
|
.main-left .sidenav-header {
|
|
padding: 1.5rem 0.5rem;
|
|
text-align: center;
|
|
}
|
|
.main-left .sidenav-header .brand {
|
|
display: block;
|
|
margin: 0 2rem;
|
|
font-size: 1.8rem;
|
|
font-family: "TypoGraphica";
|
|
color: var(--sidebar-brand-color);
|
|
text-decoration: none;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.main-left .sidenav-header .brand .logo {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.main-left .nav {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.main-left .nav > li > a:first-child {
|
|
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: var(--radius-menu);
|
|
cursor: default;
|
|
}
|
|
.main-left .nav > li > a:first-child.active {
|
|
color: var(--accent-text);
|
|
background: var(--primary);
|
|
}
|
|
.main-left .nav > li > a:first-child.active::after {
|
|
transform: rotate(0deg);
|
|
color: var(--accent-text);
|
|
}
|
|
@media (hover: hover) {
|
|
.main-left .nav > li > a:first-child {
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
.main-left .nav > li > a:first-child:hover {
|
|
cursor: pointer;
|
|
color: var(--accent-text);
|
|
background: var(--primary);
|
|
}
|
|
}
|
|
.main-left .nav > li > a:first-child .menu-icon {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0.8rem;
|
|
top: 50%;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-top: -0.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;
|
|
}
|
|
.main-left .nav > li > a:first-child .menu-icon[data-icon="system"] {
|
|
color: var(--menu-icon-system);
|
|
}
|
|
.main-left .nav > li > a:first-child .menu-icon[data-icon="services"] {
|
|
color: var(--menu-icon-services);
|
|
}
|
|
.main-left .nav > li > a:first-child .menu-icon[data-icon="network"],
|
|
.main-left .nav > li > a:first-child .menu-icon[data-icon="vpn"] {
|
|
color: var(--menu-icon-network);
|
|
}
|
|
.main-left .nav > li > a:first-child .menu-icon[data-icon="logout"] {
|
|
color: var(--menu-icon-muted);
|
|
}
|
|
.main-left .nav > li > a:first-child.active .menu-icon {
|
|
color: var(--accent-text);
|
|
}
|
|
@media (hover: hover) {
|
|
.main-left .nav > li > a:first-child .menu-icon {
|
|
transition: color 0.15s ease;
|
|
}
|
|
.main-left .nav > li > a:first-child:hover .menu-icon {
|
|
color: var(--accent-text);
|
|
}
|
|
}
|
|
.main-left .nav li {
|
|
padding: 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.main-left .nav li a {
|
|
display: block;
|
|
color: var(--menu-color);
|
|
}
|
|
.main-left .nav li.slide {
|
|
padding: 0;
|
|
}
|
|
.main-left .nav li.slide ul {
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
.main-left .nav li.slide:hover {
|
|
background: none;
|
|
}
|
|
.main-left .nav li.slide .slide-menu {
|
|
margin: 0 0.5rem 0 2.5rem;
|
|
padding: 0rem 0.5rem;
|
|
}
|
|
.main-left .nav li.slide .slide-menu.active {
|
|
display: block;
|
|
}
|
|
.main-left .nav li.slide .slide-menu li {
|
|
position: relative;
|
|
margin: 0;
|
|
border-radius: var(--radius-control);
|
|
background: none;
|
|
list-style: none;
|
|
}
|
|
.main-left .nav li.slide .slide-menu li a {
|
|
padding: 0.5rem 0rem;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.main-left .nav li.slide .slide-menu li::after {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
content: "";
|
|
background-color: var(--link-color);
|
|
}
|
|
@media (hover: hover) {
|
|
.main-left .nav li.slide .slide-menu li:hover {
|
|
background: none;
|
|
}
|
|
.main-left .nav li.slide .slide-menu li:hover::after {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.main-left .nav li.slide .slide-menu .active {
|
|
background: none;
|
|
color: var(--menu-color);
|
|
}
|
|
.main-left .nav li.slide .slide-menu .active a {
|
|
color: var(--menu-color);
|
|
}
|
|
.main-left .nav li.slide .slide-menu .active::after {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
content: "";
|
|
background-color: var(--link-color);
|
|
}
|
|
.main-left .nav li .menu::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline-end: 0.75rem;
|
|
top: 50%;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-top: -0.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;
|
|
}
|
|
.main-left::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 1px;
|
|
}
|
|
.main-left::-webkit-scrollbar-thumb {
|
|
background-color: var(--sidebar-scrollbar);
|
|
}
|
|
.main-left::-webkit-scrollbar-track {
|
|
background-color: var(--surface-raised);
|
|
}
|
|
.main-right {
|
|
background-color: var(--main-bg);
|
|
height: 100%;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.main-right > #maincontent {
|
|
min-width: 0;
|
|
position: relative;
|
|
z-index: 50;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.main-right > #maincontent > .container {
|
|
min-width: 0;
|
|
margin: 0 var(--page-gutter) var(--section-gap);
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--section-gap);
|
|
}
|
|
.main-right > #maincontent .Dashboard {
|
|
color: var(--text-strong) !important;
|
|
}
|
|
.main-right > #maincontent .Dashboard img.svgmonochrome {
|
|
filter: var(--image-filter);
|
|
}
|
|
.main-right > #maincontent .Dashboard h3 {
|
|
color: var(--text-strong);
|
|
}
|
|
.main-right > #maincontent .Dashboard p {
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.main-right > #maincontent .Dashboard hr {
|
|
border-top: 1px solid #000000;
|
|
}
|
|
.main-right > #maincontent .Dashboard .dashboard-bg {
|
|
background-color: var(--surface-color);
|
|
}
|
|
.main-right > #maincontent .Dashboard .table {
|
|
width: 100%;
|
|
}
|
|
.main-right > #maincontent .Dashboard .settings-info {
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
.main-right > #maincontent .Dashboard .settings-info p span:nth-child(2) {
|
|
max-height: 18.5px;
|
|
max-width: inherit;
|
|
top: 4px;
|
|
}
|
|
.main-right > #maincontent .Dashboard .settings-info .label {
|
|
font-size: 0.7rem;
|
|
padding: 0.2rem 0.6rem;
|
|
}
|
|
header {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0;
|
|
color: var(--text-on-accent);
|
|
}
|
|
header.bg-primary {
|
|
background-color: var(--header-bg);
|
|
}
|
|
header::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2rem;
|
|
background-color: var(--header-bg);
|
|
}
|
|
header .fill {
|
|
padding: 0.8rem 0;
|
|
display: flex;
|
|
border: 0;
|
|
}
|
|
header .fill .container {
|
|
width: 100%;
|
|
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);
|
|
}
|
|
header .fill .container .flex1 {
|
|
display: flex;
|
|
flex: 1 1 10rem;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: var(--action-gap);
|
|
}
|
|
header .fill .container .flex1 .showSide {
|
|
flex: 0 0 auto;
|
|
font-size: 1.4rem;
|
|
color: var(--text-on-accent);
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
header .fill .container .flex1 .showSide:focus-visible {
|
|
outline: 2px solid currentColor;
|
|
outline-offset: 3px;
|
|
}
|
|
header .fill .container .flex1 .showSide:hover {
|
|
text-decoration: none;
|
|
}
|
|
header .fill .container .flex1 .brand {
|
|
display: none;
|
|
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: var(--text-on-accent);
|
|
text-decoration: none;
|
|
cursor: default;
|
|
vertical-align: text-bottom;
|
|
}
|
|
header .fill .container .pull-right {
|
|
margin-inline-start: auto;
|
|
display: flex;
|
|
}
|
|
header .fill .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);
|
|
}
|
|
header .fill .status span {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
padding: 0.3rem 0.8rem;
|
|
font-size: 0.875rem;
|
|
font-weight: bold;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
border-radius: var(--radius-control);
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
header .fill .status span[data-indicator="poll-status"] {
|
|
color: var(--text-on-accent);
|
|
}
|
|
header .fill .status span[data-style="active"] {
|
|
background-color: var(--success-bg);
|
|
}
|
|
header .fill .status span[data-style="inactive"] {
|
|
color: var(--text-on-accent);
|
|
background-color: var(--status-neutral-bg);
|
|
}
|
|
#xhr_poll_status {
|
|
display: flex;
|
|
}
|
|
#xhr_poll_status * {
|
|
color: var(--text-on-accent);
|
|
}
|
|
header .showSide {
|
|
display: none;
|
|
}
|
|
footer {
|
|
padding: 1rem;
|
|
font-size: 0.875rem;
|
|
color: #aaa;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
footer > a {
|
|
color: #aaa;
|
|
text-decoration: none;
|
|
}
|
|
#view {
|
|
border-radius: var(--radius-card);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
gap: var(--section-gap);
|
|
}
|
|
#view > .spinning {
|
|
--spinner-inset: 1rem;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
padding: 1rem;
|
|
border-radius: var(--radius-panel);
|
|
background: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
}
|
|
#view > div:first-child:not(.cbi-map) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
gap: var(--field-gap);
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.main-left {
|
|
transition: width 0.2s ease;
|
|
}
|
|
.main-left .nav .menu::after {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
|
|
.main-left .nav .slide-menu li::after {
|
|
transition: width 0.2s ease;
|
|
}
|
|
}
|
|
[dir="rtl"] .main-left .nav .menu:not(.active)::after {
|
|
transform: rotate(90deg);
|
|
}
|
|
.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;
|
|
}
|
|
.spinning::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) {
|
|
.spinning::before {
|
|
animation: argon-loading-spin 0.9s linear infinite;
|
|
}
|
|
}
|
|
em.spinning,
|
|
span.spinning {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
:is(button, .btn, .cbi-button).spinning {
|
|
--spinner-inset: 0.75rem;
|
|
--spinner-accent: currentColor;
|
|
--spinner-track: color-mix(in srgb, currentColor 25%, transparent);
|
|
}
|
|
@keyframes argon-loading-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.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, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
|
text-shadow: none;
|
|
}
|
|
.alert.error,
|
|
.alert-message.error {
|
|
background-color: var(--error-bg);
|
|
color: var(--error-text);
|
|
}
|
|
.alert h4,
|
|
.alert-message h4 {
|
|
background-color: var(--feedback-heading-bg);
|
|
color: var(--feedback-heading-text);
|
|
padding: 0.25rem 0rem;
|
|
border-radius: var(--radius-small);
|
|
}
|
|
.alert .btn,
|
|
.alert-message .btn {
|
|
height: auto;
|
|
}
|
|
.modal.alert-message {
|
|
--status-accent: var(--link-color);
|
|
--spinner-accent: var(--status-accent);
|
|
position: static;
|
|
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 var(--border-color);
|
|
border-radius: var(--radius-dialog) !important;
|
|
background-color: color-mix(in srgb, var(--status-accent) 4%, var(--surface-raised)) !important;
|
|
color: var(--text-strong);
|
|
box-shadow: var(--section-shadow);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.6;
|
|
}
|
|
.modal.alert-message.warning {
|
|
--status-accent: var(--warning-heading-color);
|
|
}
|
|
.modal.alert-message.error,
|
|
.modal.alert-message.danger {
|
|
--status-accent: var(--danger);
|
|
}
|
|
.modal.alert-message.success {
|
|
--status-accent: var(--success);
|
|
}
|
|
.modal.alert-message > * {
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
.modal.alert-message > h4 {
|
|
padding: 0;
|
|
background: none;
|
|
color: inherit;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
.modal.alert-message > h4:empty {
|
|
display: none;
|
|
}
|
|
.modal.alert-message.spinning {
|
|
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;
|
|
}
|
|
.modal.alert-message.spinning > * {
|
|
grid-column: 2;
|
|
}
|
|
.modal.alert-message.spinning::before {
|
|
position: static;
|
|
inset: auto;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
.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 0.4s ease;
|
|
}
|
|
.alert-message.fade-out {
|
|
opacity: 0;
|
|
}
|
|
.alert-message.fade-in {
|
|
animation: alert-message-fade-in 0.4s ease;
|
|
}
|
|
.alert-message > h4 {
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
}
|
|
.alert-message > * {
|
|
margin: 0.5rem 0;
|
|
}
|
|
.alert-message .btn {
|
|
padding: 0.3rem 0.6rem;
|
|
}
|
|
@keyframes alert-message-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
#maincontent > .alert-message {
|
|
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;
|
|
}
|
|
#maincontent > .alert-message.spinning {
|
|
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;
|
|
}
|
|
#maincontent > .alert-message.spinning::before {
|
|
position: static;
|
|
inset: auto;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
#maincontent > .alert-message.spinning > div:first-child {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
#maincontent > .alert-message.spinning > div:last-child {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
#maincontent > .alert-message.spinning {
|
|
grid-template-columns: var(--spinner-size) minmax(0, 1fr);
|
|
}
|
|
#maincontent > .alert-message.spinning > div:last-child {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
justify-self: end;
|
|
}
|
|
}
|
|
#maincontent > .alert-message > div {
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
#maincontent > .alert-message > div:first-child > * {
|
|
margin: 0;
|
|
}
|
|
#maincontent > .alert-message > div:first-child > * + * {
|
|
margin-top: 0.75rem;
|
|
}
|
|
#maincontent > .alert-message h4 {
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
#maincontent > .alert-message .btn {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
#maincontent > .alert-message {
|
|
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;
|
|
}
|
|
.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-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);
|
|
}
|
|
.cbi-section:last-child,
|
|
.cbi-section-error:last-child,
|
|
#iptables:last-child,
|
|
.Firewall form:last-child,
|
|
#cbi-network > .cbi-section-node:last-child,
|
|
#cbi-wireless > .cbi-section-node:last-child,
|
|
#cbi-wireless > #wifi_assoclist_table:last-child,
|
|
[data-tab-title]:last-child,
|
|
[data-page="admin-system-opkg"] #maincontent > .container: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);
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
.cbi-section:has(> h3:first-child + .cbi-section-remove + .cbi-section-node) {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
}
|
|
.cbi-section:has(> h3:first-child + .cbi-section-remove + .cbi-section-node) > :not(h3, .cbi-section-remove) {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.cbi-section:has(> h3:first-child + .cbi-section-remove + .cbi-section-node) > h3 {
|
|
grid-column: 1;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-section:has(> h3:first-child + .cbi-section-remove + .cbi-section-node) > .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-section:has(> h3:first-child + .cbi-section-remove + .cbi-section-node) > .cbi-section-remove > .cbi-button {
|
|
min-height: 2.5rem;
|
|
}
|
|
.cbi-section:has(> h3:first-child + .cbi-section-remove + .cbi-section-node) > .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);
|
|
}
|
|
.cbi-section > em {
|
|
display: block;
|
|
margin: 0;
|
|
padding: var(--field-gap) var(--section-inset);
|
|
color: var(--muted-text);
|
|
font-size: 0.875rem;
|
|
font-style: normal;
|
|
line-height: 1.5;
|
|
text-align: start;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.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: 0.5em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.td:not(.cbi-section-actions) .nowrap {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.td .ifacebadge {
|
|
max-width: 100%;
|
|
}
|
|
.td .ifacebadge > 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;
|
|
}
|
|
: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(.cbi-section, [data-tab-title]) > .table:last-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child) > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child,
|
|
#view > .table > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:last-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child) > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child,
|
|
#view > .table > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:last-child > :is(tr, .tr):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child) > :is(tr, .tr):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child > :is(tr, .tr):last-child,
|
|
#view > .table > :is(tr, .tr):last-child {
|
|
border-end-start-radius: inherit;
|
|
border-end-end-radius: inherit;
|
|
}
|
|
:is(.cbi-section, [data-tab-title]) > .table:last-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child) > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
|
|
#view > .table > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child) > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child,
|
|
#view > .table > :is(tr, .tr):last-child > :is(td, th, .td, .th):first-child {
|
|
border-end-start-radius: inherit;
|
|
}
|
|
:is(.cbi-section, [data-tab-title]) > .table:last-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child) > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
|
|
#view > .table > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot):last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:last-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > .table:has(+ .cbi-section-create:empty:last-child) > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):last-child > .table:only-child > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child,
|
|
#view > .table > :is(tr, .tr):last-child > :is(td, th, .td, .th):last-child {
|
|
border-end-end-radius: inherit;
|
|
}
|
|
: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(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(thead, tbody, .thead, .tbody):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(tr, .tr):first-child {
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
}
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th),
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(tr, .tr):first-child > :is(td, th, .td, .th) {
|
|
border-top: 0;
|
|
}
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child {
|
|
border-start-start-radius: inherit;
|
|
}
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):last-child,
|
|
:is(.cbi-section, [data-tab-title]) > :not(.table):only-child > .table:only-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):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: 0.5rem;
|
|
}
|
|
.container > .cbi-section:first-of-type > .table[width="100%"] > .tr > .td {
|
|
padding: 0.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,
|
|
body:not([data-page="admin-dashboard"]) tr > th,
|
|
body:not([data-page="admin-dashboard"]) .tr > .td,
|
|
body:not([data-page="admin-dashboard"]) .tr > .th,
|
|
body:not([data-page="admin-dashboard"]) .cbi-section-table-row::before,
|
|
body:not([data-page="admin-dashboard"]) #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-dynlist,
|
|
.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-section-table-row .td .cbi-checkbox input[type="checkbox"] {
|
|
margin: 0;
|
|
}
|
|
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;
|
|
}
|
|
.btn,
|
|
.cbi-button,
|
|
.item::after {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
display: inline-block;
|
|
width: auto !important;
|
|
padding: 0.5rem 0.75rem;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
transition: box-shadow 0.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: 0.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 0.15s ease-out, box-shadow 0.15s ease-out;
|
|
}
|
|
button.btn:not(:disabled):not([aria-disabled="true"]):not([data-static]):active,
|
|
button.cbi-button:not(:disabled):not([aria-disabled="true"]):not([data-static]):active,
|
|
input.cbi-button:not(:disabled):not([aria-disabled="true"]):not([data-static]):active {
|
|
scale: 0.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;
|
|
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);
|
|
}
|
|
.cbi-button-up,
|
|
.cbi-button-down {
|
|
display: inline-block;
|
|
min-width: 0;
|
|
padding: 0.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);
|
|
}
|
|
.cbi-page-actions .btn,
|
|
.button-row .btn,
|
|
.cbi-page-actions .cbi-button,
|
|
.button-row .cbi-button {
|
|
max-width: 100%;
|
|
min-height: 2.5rem;
|
|
height: auto;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-page-actions {
|
|
padding: 0;
|
|
gap: var(--control-gap);
|
|
}
|
|
.cbi-page-actions .cbi-button-link:first-child {
|
|
margin-inline-end: auto;
|
|
}
|
|
.cbi-page-actions > form[method="post"] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
gap: inherit;
|
|
}
|
|
.cbi-page-actions .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;
|
|
}
|
|
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;
|
|
}
|
|
#argon-appearance[hidden],
|
|
#argon-appearance [hidden] {
|
|
display: none;
|
|
}
|
|
#argon-appearance .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 0.15s ease-out;
|
|
}
|
|
#argon-appearance .argon-appearance-trigger::before {
|
|
content: '';
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background-color: currentColor;
|
|
mask: url('../icon/monitor.svg') center / contain no-repeat;
|
|
}
|
|
#argon-appearance .argon-appearance-trigger::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: inherit;
|
|
}
|
|
#argon-appearance .argon-appearance-trigger:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: -2px;
|
|
}
|
|
#argon-appearance .argon-appearance-trigger[aria-expanded="true"] {
|
|
background-color: var(--surface-active);
|
|
}
|
|
#argon-appearance[data-mode="light"] .argon-appearance-trigger::before {
|
|
mask-image: url('../icon/sun.svg');
|
|
}
|
|
#argon-appearance[data-mode="dark"] .argon-appearance-trigger::before {
|
|
mask-image: url('../icon/moon.svg');
|
|
}
|
|
#argon-appearance .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;
|
|
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: 0.8125rem;
|
|
text-align: start;
|
|
opacity: 1;
|
|
transition: opacity 0.15s ease-out;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
#argon-appearance .argon-appearance-panel {
|
|
transform: translateY(0);
|
|
transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
min-height: 2.125rem;
|
|
margin: 0;
|
|
padding: 0.375rem 0.5rem;
|
|
border-radius: var(--radius-small);
|
|
line-height: 1.5;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease-out;
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option + .argon-appearance-option {
|
|
margin-block-start: 0.25rem;
|
|
}
|
|
@media (pointer: coarse) {
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option {
|
|
min-height: 2.5rem;
|
|
}
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option::before,
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option::after {
|
|
content: '';
|
|
flex-shrink: 0;
|
|
background-color: currentColor;
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option::before {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
mask: url('../icon/monitor.svg') center / contain no-repeat;
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option[data-mode="light"]::before {
|
|
mask-image: url('../icon/sun.svg');
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option[data-mode="dark"]::before {
|
|
mask-image: url('../icon/moon.svg');
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option::after {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
mask: url('../icon/check.svg') center / contain no-repeat;
|
|
visibility: hidden;
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option > span {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option:has(input:checked) {
|
|
color: var(--dropdown-selected-text);
|
|
background: var(--dropdown-selected-bg);
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option:has(input:checked)::after {
|
|
visibility: visible;
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option:has(input:focus-visible) {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: -2px;
|
|
}
|
|
#argon-appearance .argon-appearance-panel .argon-appearance-option:has(input:disabled) {
|
|
cursor: default;
|
|
opacity: 0.6;
|
|
}
|
|
#argon-appearance .argon-appearance-panel input[type="radio"] {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
#argon-appearance .argon-appearance-panel p {
|
|
margin: var(--control-gap) 0.75rem;
|
|
color: var(--muted-text);
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
}
|
|
@media (hover: hover) {
|
|
#argon-appearance .argon-appearance-trigger:hover {
|
|
background-color: var(--surface-active);
|
|
}
|
|
#argon-appearance .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 .argon-appearance-trigger {
|
|
transition: scale 0.15s ease-out, background-color 0.15s ease-out;
|
|
}
|
|
#argon-appearance .argon-appearance-trigger:active {
|
|
scale: 0.96;
|
|
}
|
|
}
|
|
@media (forced-colors: active) {
|
|
#argon-appearance .argon-appearance-trigger::before,
|
|
#argon-appearance .argon-appearance-option::before,
|
|
#argon-appearance .argon-appearance-option::after {
|
|
forced-color-adjust: none;
|
|
background-color: CanvasText;
|
|
}
|
|
}
|
|
@starting-style {
|
|
#argon-appearance .argon-appearance-panel {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
@starting-style {
|
|
#argon-appearance .argon-appearance-panel {
|
|
transform: translateY(-0.375rem);
|
|
}
|
|
}
|
|
}
|
|
.tabs,
|
|
.cbi-tabmenu {
|
|
display: flex;
|
|
align-items: stretch;
|
|
min-width: 0;
|
|
gap: var(--control-gap);
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
.tabs::-webkit-scrollbar,
|
|
.cbi-tabmenu::-webkit-scrollbar {
|
|
width: 1px;
|
|
height: 5px;
|
|
}
|
|
.tabs::-webkit-scrollbar-thumb,
|
|
.cbi-tabmenu::-webkit-scrollbar-thumb {
|
|
background-color: var(--surface-muted);
|
|
}
|
|
.tabs::-webkit-scrollbar-track,
|
|
.cbi-tabmenu::-webkit-scrollbar-track {
|
|
background-color: var(--surface-color);
|
|
}
|
|
.tabs > li,
|
|
.cbi-tabmenu > 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, 0.03);
|
|
}
|
|
.tabs 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;
|
|
}
|
|
.tabs li[class~="active"] a {
|
|
color: var(--text-strong);
|
|
}
|
|
.tabs li {
|
|
font-size: 0.875rem;
|
|
border-radius: 0;
|
|
padding: 0.875rem 0rem;
|
|
border-bottom: 0.18751rem solid rgba(0, 0, 0, 0);
|
|
margin: 0;
|
|
}
|
|
.tabs li 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;
|
|
}
|
|
.cbi-tabmenu 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;
|
|
}
|
|
.cbi-tabmenu li a {
|
|
text-decoration: none;
|
|
color: var(--tab-inactive-color);
|
|
padding: 0.5rem 0.8rem;
|
|
}
|
|
.cbi-tabmenu li[class~="cbi-tab"] {
|
|
border-bottom: 0.18751rem solid var(--tab-color);
|
|
color: var(--text-strong);
|
|
background-color: var(--surface-active);
|
|
margin-bottom: 0;
|
|
}
|
|
.cbi-tabmenu li[class~="cbi-tab"] a {
|
|
color: var(--text-strong);
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.tabs > li,
|
|
.cbi-tabmenu > li {
|
|
transition: background-color 0.15s ease-out, border-bottom-color 0.15s ease-out;
|
|
}
|
|
.tabs > li > a,
|
|
.cbi-tabmenu > li > a {
|
|
transition: color 0.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);
|
|
}
|
|
.tabs > li:hover > a,
|
|
.cbi-tabmenu > li:hover > a {
|
|
color: var(--text-strong);
|
|
}
|
|
}
|
|
.cbi-tab-descr {
|
|
padding: 0 var(--section-inset);
|
|
}
|
|
.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;
|
|
}
|
|
.cbi-map:has(> .cbi-tabmenu + div) > :where(:not(style, script, [hidden], .hidden, [style*="display:none"], [style*="display: none"])) ~ :where(:not(style, script, [hidden], .hidden, [style*="display:none"], [style*="display: none"])),
|
|
#view:has(> .cbi-tabmenu + div) > :where(:not(style, script, [hidden], .hidden, [style*="display:none"], [style*="display: none"])) ~ :where(:not(style, script, [hidden], .hidden, [style*="display:none"], [style*="display: none"])),
|
|
#view > div:first-child:not(.cbi-map):has(> .cbi-tabmenu + div) > :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-map:has(> .cbi-tabmenu + div) > .cbi-tabmenu + div,
|
|
#view:has(> .cbi-tabmenu + div) > .cbi-tabmenu + div,
|
|
#view > div:first-child:not(.cbi-map):has(> .cbi-tabmenu + div) > .cbi-tabmenu + div {
|
|
margin-block-start: 0;
|
|
}
|
|
#view > div:first-child:not(.cbi-map):has(> .cbi-tabmenu + div) {
|
|
--tab-flow-gap: var(--field-gap);
|
|
}
|
|
: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);
|
|
}
|
|
.cbi-section-node > [id^="cbi-config-"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--field-gap);
|
|
}
|
|
.cbi-section-node > [id^="cbi-config-"]:first-child {
|
|
padding-top: 1rem;
|
|
}
|
|
.cbi-section-node > [id^="cbi-config-"]:last-child {
|
|
padding-bottom: 1rem;
|
|
}
|
|
.cbi-section-node > [id^="cbi-argon-"]:first-child {
|
|
padding-top: 1rem;
|
|
}
|
|
.cbi-section-node > [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;
|
|
}
|
|
[data-tab-title] 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 0.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);
|
|
}
|
|
.cbi-section-node-tabbed > [data-tab-title] {
|
|
padding-block: var(--field-gap);
|
|
border-radius: inherit;
|
|
box-shadow: none;
|
|
}
|
|
.cbi-section-node-tabbed > 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;
|
|
}
|
|
.cbi-value-field div + br {
|
|
display: none;
|
|
}
|
|
.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: 0.5rem 0;
|
|
color: var(--muted-text);
|
|
font-size: 0.75rem;
|
|
}
|
|
.cbi-value-description abbr {
|
|
color: var(--text-strong);
|
|
}
|
|
.cbi-value-description:empty {
|
|
display: none;
|
|
}
|
|
.cbi-value-title {
|
|
width: var(--form-label-width);
|
|
max-width: 100%;
|
|
padding-block: 0.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 > .cbi-value-title {
|
|
flex: 0 0 var(--form-label-width);
|
|
}
|
|
.cbi-value > .cbi-value-field {
|
|
flex: 1 1 0;
|
|
}
|
|
.cbi-value 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%;
|
|
min-width: min(100%, var(--form-control-min-width));
|
|
}
|
|
.cbi-value-field .cbi-dynlist {
|
|
width: var(--form-control-min-width);
|
|
}
|
|
@container (max-width: 40rem) {
|
|
.cbi-value {
|
|
flex-direction: column;
|
|
}
|
|
.cbi-value > .cbi-value-title,
|
|
.cbi-value > .cbi-value-field {
|
|
flex: 0 1 auto;
|
|
width: 100%;
|
|
}
|
|
.cbi-value > .cbi-value-title {
|
|
padding-inline-end: 0;
|
|
text-align: start;
|
|
}
|
|
}
|
|
.control-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: var(--control-gap);
|
|
}
|
|
.control-group > * {
|
|
max-width: 100%;
|
|
}
|
|
.control-group:has(> input:first-child + .cbi-button) {
|
|
flex-wrap: nowrap;
|
|
gap: 0;
|
|
}
|
|
.control-group:has(> input:first-child + .cbi-button) > 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;
|
|
}
|
|
.control-group:has(> input:first-child + .cbi-button) > 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;
|
|
}
|
|
.control-group:has(> input:first-child + .cbi-button) > .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;
|
|
}
|
|
.cbi-input-file[type="file"] {
|
|
padding: 0;
|
|
padding-inline-end: 0.75rem;
|
|
line-height: calc(2.5rem - 2px);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
.cbi-input-file[type="file"]::file-selector-button {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
margin: 0;
|
|
margin-inline-end: var(--action-gap);
|
|
padding: 0 0.75rem;
|
|
border: 0;
|
|
border-inline-end: 1px solid var(--control-border);
|
|
border-radius: 0;
|
|
font: inherit;
|
|
color: var(--control-text);
|
|
background-color: var(--surface-active);
|
|
vertical-align: top;
|
|
cursor: inherit;
|
|
appearance: none;
|
|
}
|
|
.cbi-input-file::-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: 0.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: 0.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) {
|
|
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;
|
|
}
|
|
.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);
|
|
}
|
|
.cbi-dynlist > .item {
|
|
display: inline-flex;
|
|
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;
|
|
}
|
|
.cbi-dynlist > .item::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;
|
|
}
|
|
.cbi-dynlist > .item > span {
|
|
display: block;
|
|
padding: 0.5rem 0.75rem;
|
|
flex: 0 1 15.5rem;
|
|
min-width: 0;
|
|
width: 15.5rem;
|
|
height: 2.5rem;
|
|
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 0.15s ease;
|
|
}
|
|
.cbi-dynlist > .add-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.cbi-dynlist > .add-item > 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: 0.875rem;
|
|
line-height: 1.5rem;
|
|
color: var(--muted-text);
|
|
border: 1px solid var(--control-border);
|
|
border-radius: var(--radius-control) 0 0 var(--radius-control);
|
|
border-right-width: 0;
|
|
outline: 0;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
[dir="rtl"] .cbi-dynlist > .add-item > input:first-child {
|
|
border-radius: 0 var(--radius-control) var(--radius-control) 0;
|
|
border-left-width: 0;
|
|
border-right-width: 1px;
|
|
}
|
|
.cbi-dynlist > .add-item .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-dynlist > .add-item .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);
|
|
}
|
|
.cbi-dynlist > .add-item: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;
|
|
min-height: 2.1875rem;
|
|
}
|
|
.cbi-dropdown {
|
|
display: inline-flex;
|
|
padding-inline-end: 0.25rem;
|
|
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;
|
|
}
|
|
.cbi-button-apply > ul.preview 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;
|
|
}
|
|
.cbi-dropdown > .open::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;
|
|
}
|
|
.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;
|
|
}
|
|
.cbi-dropdown:is(.btn, .cbi-button):not([multiple]) > ul:not(.dropdown) {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
width: auto;
|
|
min-height: calc(2.5rem - 2px);
|
|
margin: 0;
|
|
padding: 0.5rem 0.75rem;
|
|
overflow: visible;
|
|
}
|
|
.cbi-dropdown:is(.btn, .cbi-button):not([multiple]) > ul:not(.dropdown) > li {
|
|
padding: 0;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-dropdown:is(.btn, .cbi-button):not([multiple]) > .more {
|
|
display: none;
|
|
}
|
|
.cbi-dropdown:is(.btn, .cbi-button):not([multiple]) > .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 0.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;
|
|
}
|
|
.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: 0.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 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: 0.6;
|
|
}
|
|
.cbi-dropdown .zonebadge {
|
|
width: 100%;
|
|
}
|
|
.cbi-dropdown[open] .zonebadge {
|
|
width: auto;
|
|
}
|
|
.cbi-dropdown > ul .zonebadge {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
padding: 0.125rem 0.5rem;
|
|
line-height: 1.5;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-dropdown > ul .ifacebadge {
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0 0.25rem;
|
|
line-height: 1.5;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-dropdown > ul > li img {
|
|
flex: 0 0 1.25rem;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin: 0;
|
|
object-fit: contain;
|
|
}
|
|
.cbi-dropdown > ul > li:has(> img),
|
|
.cbi-dropdown > ul > li > label:has(> img) {
|
|
column-gap: 0.5rem;
|
|
min-width: 0;
|
|
line-height: 1.5;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-dropdown > ul > li:has(> img) > span,
|
|
.cbi-dropdown > ul > li > label:has(> img) > 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: 0.25rem;
|
|
}
|
|
.cbi-dropdown:not(.btn):not(.cbi-button):has(> ul .zonebadge, > ul .ifacebadge, > ul img) > ul:not(.dropdown) > li {
|
|
min-height: 1.5rem;
|
|
padding-block: 0;
|
|
}
|
|
.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: 0.25rem 0;
|
|
left: 0;
|
|
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: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: start;
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li {
|
|
display: block;
|
|
min-width: 0;
|
|
min-height: 2.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 0;
|
|
border-radius: var(--radius-small);
|
|
background: transparent;
|
|
color: inherit;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
cursor: pointer;
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li > label {
|
|
display: block;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
margin-inline-start: 0.5rem;
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li:has(> img),
|
|
.cbi-dropdown[open] > ul.dropdown > li > label:has(> img) {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li:has(> img) > img,
|
|
.cbi-dropdown[open] > ul.dropdown > li > label:has(> img) > img {
|
|
margin-block-start: max(0px, calc((1.5em - 1.25rem) / 2));
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li input.create-item-input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li[selected] {
|
|
background: var(--dropdown-selected-bg);
|
|
color: var(--dropdown-selected-text);
|
|
font-weight: 500;
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li.focus:not([selected]):not([unselectable]) {
|
|
background: var(--dropdown-hover-bg);
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li:focus-visible {
|
|
outline: 2px solid var(--link-color);
|
|
outline-offset: -2px;
|
|
}
|
|
.cbi-dropdown[open] > ul.dropdown > li[unselectable]:not(:has(input.create-item-input)) {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.cbi-progressbar {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
font-size: 0.75rem;
|
|
background: none;
|
|
border-radius: var(--radius-pill);
|
|
min-height: 0.5rem;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
.cbi-progressbar::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
height: 0.5rem;
|
|
border-radius: inherit;
|
|
background-color: var(--progress-bg);
|
|
}
|
|
.cbi-progressbar > div {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 0.5rem;
|
|
background-color: var(--progress-fill);
|
|
border-radius: inherit;
|
|
}
|
|
.cbi-progressbar::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: 0.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 0.125s ease-in;
|
|
opacity: 0;
|
|
background: rgba(0, 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);
|
|
}
|
|
.modal > * {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
line-height: inherit;
|
|
}
|
|
.modal > pre,
|
|
.modal > textarea {
|
|
font-size: 1rem;
|
|
font-size-adjust: 0.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 0.15s ease;
|
|
}
|
|
.modal > pre:focus,
|
|
.modal > textarea:focus {
|
|
border: 1px solid var(--control-focus);
|
|
box-shadow: var(--control-focus-shadow);
|
|
}
|
|
.modal > pre {
|
|
direction: ltr;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
.modal > textarea {
|
|
border-color: var(--control-subtle-border);
|
|
}
|
|
.modal > h4 {
|
|
display: block;
|
|
padding: 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-strong);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.modal h5 {
|
|
margin-top: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
.modal label > input[type="checkbox"] {
|
|
top: 0;
|
|
}
|
|
.modal > ul:not(.cbi-tabmenu):not(.tabs) > li {
|
|
list-style-type: square;
|
|
color: var(--text-color);
|
|
}
|
|
.modal p {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.modal :is(div, section, article) > p + p {
|
|
margin-block-start: var(--field-gap);
|
|
}
|
|
.modal .label {
|
|
font-size: 0.6rem;
|
|
font-weight: normal;
|
|
padding: 0.1rem 0.3rem;
|
|
padding-bottom: 0;
|
|
cursor: default;
|
|
border-radius: var(--radius-small);
|
|
}
|
|
.modal .label.warning {
|
|
background-color: var(--warning-badge-bg) !important;
|
|
}
|
|
.modal .btn {
|
|
padding: 0.45rem 0.8rem;
|
|
}
|
|
.modal .right:has( > :is(.btn, .cbi-button)),
|
|
.modal .button-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
gap: var(--action-gap);
|
|
}
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > .btn,
|
|
.modal .button-row > .btn,
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > .cbi-button,
|
|
.modal .button-row > .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;
|
|
}
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > .btn:focus-visible,
|
|
.modal .button-row > .btn:focus-visible,
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > .cbi-button:focus-visible,
|
|
.modal .button-row > .cbi-button:focus-visible {
|
|
outline: 2px solid var(--control-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > [class="btn"],
|
|
.modal .button-row > [class="btn"] {
|
|
color: var(--text-strong);
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--surface-muted);
|
|
}
|
|
@media (hover: hover) {
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > [class="btn"]:hover,
|
|
.modal .button-row > [class="btn"]:hover {
|
|
background-color: var(--surface-active);
|
|
}
|
|
}
|
|
.modal > .right:has( > :is(.btn, .cbi-button)),
|
|
.modal > .button-row {
|
|
padding-block-start: var(--control-gap);
|
|
}
|
|
.modal.cbi-modal {
|
|
max-width: 90%;
|
|
max-height: none;
|
|
}
|
|
.modal:has(> .alert-message + .right:last-child):not(:has(.cbi-map, .table, table, pre, textarea)) {
|
|
max-width: 32rem;
|
|
}
|
|
.modal > .alert-message {
|
|
--dialog-feedback-accent: var(--link-color);
|
|
position: static;
|
|
inset: auto;
|
|
transform: none;
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0.75rem 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-panel) !important;
|
|
background-color: color-mix(in srgb, var(--dialog-feedback-accent) 10%, var(--surface-color)) !important;
|
|
color: var(--text-strong);
|
|
box-shadow: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.modal > .alert-message.warning {
|
|
--dialog-feedback-accent: var(--warning-heading-color);
|
|
}
|
|
.modal > .alert-message.error,
|
|
.modal > .alert-message.danger {
|
|
--dialog-feedback-accent: var(--danger);
|
|
}
|
|
.modal > .alert-message.success {
|
|
--dialog-feedback-accent: var(--success);
|
|
}
|
|
.modal > .alert-message > :first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
.modal > .alert-message > :last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
.modal .cbi-map {
|
|
margin-bottom: 0;
|
|
}
|
|
@container argon-modal (max-width: 28rem) {
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > .btn,
|
|
.modal .button-row > .btn,
|
|
.modal .right:has( > :is(.btn, .cbi-button)) > .cbi-button,
|
|
.modal .button-row > .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;
|
|
}
|
|
.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;
|
|
}
|
|
.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: 0.2rem;
|
|
padding: 0.25rem 0.8rem;
|
|
background: var(--badge-bg);
|
|
border-radius: var(--radius-small);
|
|
}
|
|
td > .ifacebadge,
|
|
.td > .ifacebadge {
|
|
font-size: 0.875rem;
|
|
}
|
|
.ifacebadge > em,
|
|
.ifacebadge > img {
|
|
display: inline-block;
|
|
margin: 0 0.75rem;
|
|
}
|
|
.ifacebadge > img + img {
|
|
margin: 0 0.2rem 0 0;
|
|
}
|
|
.ifacebadge[data-signal] {
|
|
min-width: min-content;
|
|
padding-inline: 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
.ifacebadge[data-signal] > img {
|
|
flex: none;
|
|
margin: 0;
|
|
}
|
|
.ifacebadge[data-signal] > span {
|
|
flex-shrink: 0;
|
|
max-width: none;
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
white-space: nowrap;
|
|
overflow-wrap: normal;
|
|
}
|
|
.network-status-table {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.network-status-table .ifacebox {
|
|
flex-grow: 1;
|
|
border-radius: var(--radius-panel);
|
|
overflow: hidden;
|
|
margin: 1rem;
|
|
}
|
|
.network-status-table .ifacebox-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
gap: 0.5em;
|
|
}
|
|
.network-status-table .ifacebox-body > span {
|
|
flex: 10 10 auto;
|
|
}
|
|
.network-status-table .ifacebox-body > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
height: 100%;
|
|
}
|
|
.network-status-table .ifacebox-body .ifacebadge {
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
min-width: 220px;
|
|
padding: 0.5em;
|
|
background-color: var(--surface-color);
|
|
}
|
|
.network-status-table .ifacebox-body .ifacebadge > span {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
code {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-input-textarea {
|
|
font-family: inherit;
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
min-height: 14rem;
|
|
padding: 0.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;
|
|
}
|
|
.uci-change-list {
|
|
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
|
|
font-size: 0.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: 0.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: 0.4;
|
|
border: 0;
|
|
}
|
|
.uci-change-list > :is(var, del, ins) {
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--radius-panel);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
direction: ltr;
|
|
text-align: left;
|
|
unicode-bidi: isolate;
|
|
}
|
|
.uci-dialog > .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;
|
|
}
|
|
.uci-dialog > .cbi-section > br {
|
|
display: none;
|
|
}
|
|
.uci-dialog > .cbi-section > .button-row {
|
|
padding-block-start: var(--control-gap);
|
|
}
|
|
.uci-dialog .uci-change-legend {
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
}
|
|
.uci-dialog .uci-change-legend-label {
|
|
flex: 0 1 auto;
|
|
gap: var(--control-gap);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.uci-dialog .uci-change-legend-label > ins,
|
|
.uci-dialog .uci-change-legend-label > del,
|
|
.uci-dialog .uci-change-legend-label > var {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.uci-dialog .uci-change-legend-label > var {
|
|
position: relative;
|
|
}
|
|
.uci-dialog .uci-change-legend-label > var ins,
|
|
.uci-dialog .uci-change-legend-label > var del {
|
|
position: absolute;
|
|
inset: 2px;
|
|
}
|
|
.uci-dialog .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;
|
|
}
|
|
.uci-dialog .uci-change-list > h5:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
.uci-dialog .uci-change-list > br {
|
|
display: none;
|
|
}
|
|
.uci-dialog .button-row > .btn.cbi-button:not([class*="cbi-button-"]) {
|
|
color: var(--text-strong);
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--surface-muted);
|
|
}
|
|
#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);
|
|
}
|
|
.ifacebox-head {
|
|
padding: 0.25em;
|
|
background: var(--iface-head-bg);
|
|
color: var(--iface-head-text);
|
|
}
|
|
.ifacebox-head.active {
|
|
background: var(--primary);
|
|
}
|
|
.ifacebox-head.active * {
|
|
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: 0.5rem;
|
|
}
|
|
.zonebadge {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: var(--radius-small);
|
|
}
|
|
.zonebadge[style*="--zone-color-rgb"][style*="144, 240, 144"],
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="144, 240, 144"] {
|
|
--zone-color-rgb: var(--zone-positive-rgb) !important;
|
|
}
|
|
.zonebadge[style*="--zone-color-rgb"][style*="240, 144, 144"],
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="240, 144, 144"] {
|
|
--zone-color-rgb: var(--zone-negative-rgb) !important;
|
|
}
|
|
.zonebadge[style*="--zone-color-rgb"][style*="238, 238, 238"],
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="238, 238, 238"] {
|
|
--zone-color-rgb: var(--zone-neutral-rgb) !important;
|
|
}
|
|
.zonebadge[style*="--zone-color-rgb"][style*="144, 240, 144"],
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="144, 240, 144"],
|
|
.zonebadge[style*="--zone-color-rgb"][style*="240, 144, 144"],
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="240, 144, 144"],
|
|
.zonebadge[style*="--zone-color-rgb"][style*="238, 238, 238"],
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="238, 238, 238"] {
|
|
background-color: rgb(var(--zone-color-rgb)) !important;
|
|
color: var(--zone-label-color);
|
|
}
|
|
.zonebadge[style*="--zone-color-rgb"][style*="144, 240, 144"] strong,
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="144, 240, 144"] strong,
|
|
.zonebadge[style*="--zone-color-rgb"][style*="240, 144, 144"] strong,
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="240, 144, 144"] strong,
|
|
.zonebadge[style*="--zone-color-rgb"][style*="238, 238, 238"] strong,
|
|
.ifacebox-head[style*="--zone-color-rgb"][style*="238, 238, 238"] strong {
|
|
color: inherit;
|
|
}
|
|
.zonebadge .ifacebadge {
|
|
margin: 0.1rem 0.2rem;
|
|
padding: 0.2rem 0.3rem;
|
|
border: thin solid #6c6c6c;
|
|
}
|
|
.zonebadge > input[type="text"] {
|
|
min-width: 10rem;
|
|
margin-top: 0.3rem;
|
|
padding: 0.16rem 1rem;
|
|
}
|
|
.zonebadge > em,
|
|
.zonebadge > strong {
|
|
display: inline-block;
|
|
margin: 0 0.2rem;
|
|
}
|
|
.cbi-value-field .cbi-input-checkbox,
|
|
.cbi-value-field .cbi-input-radio {
|
|
margin-top: 0.1rem;
|
|
}
|
|
.cbi-value-field > ul > li {
|
|
display: flex;
|
|
}
|
|
.cbi-value-field > ul > li > label {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.cbi-value-field > ul > li .ifacebadge {
|
|
margin-top: -0.5rem;
|
|
margin-left: 0.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: 0.875rem 1rem;
|
|
}
|
|
.cbi-section-create:has(> button:first-child) {
|
|
column-gap: var(--control-gap);
|
|
}
|
|
.cbi-section-create > .btn,
|
|
.cbi-section-create > .cbi-button {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-section-create:empty {
|
|
display: none;
|
|
}
|
|
.cbi-section-create > div:first-child {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
.cbi-section-create > div:first-child > input {
|
|
width: 100%;
|
|
border-inline-end: none;
|
|
border-end-end-radius: 0;
|
|
border-start-end-radius: 0;
|
|
}
|
|
.cbi-section-create > div:first-child + button {
|
|
border-start-start-radius: 0;
|
|
border-end-start-radius: 0;
|
|
}
|
|
.cbi-section-remove {
|
|
padding: 0.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 0.15s ease-in;
|
|
}
|
|
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 0.15s ease-in;
|
|
opacity: 1;
|
|
}
|
|
.zonebadge .cbi-tooltip {
|
|
margin: -1.5rem 0 0 -0.5rem;
|
|
padding: 0.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 0.25rem;
|
|
text-align: center;
|
|
}
|
|
.zone-forwards .zone-src,
|
|
.zone-forwards .zone-dest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.label {
|
|
font-size: 0.875rem;
|
|
font-weight: bold;
|
|
padding: 0.3rem 0.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: 0.4rem;
|
|
right: 0.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, 0.56);
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
.darkMask.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: 0.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, 0.16), 0 0 2px 0 rgba(0, 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: 0.25rem;
|
|
}
|
|
.controls > #pager > .btn[aria-label$="page"] {
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
}
|
|
.controls > * > label {
|
|
margin-bottom: 0.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: 0.75em;
|
|
}
|
|
/* custom commands */
|
|
.commands {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
.commandbox {
|
|
padding: 0.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);
|
|
}
|
|
.commandbox h3 {
|
|
line-height: normal !important;
|
|
overflow: hidden;
|
|
margin: 6px 0 !important;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.commandbox div {
|
|
left: auto !important;
|
|
}
|
|
.commandbox code {
|
|
overflow: hidden;
|
|
max-width: fit-content;
|
|
padding: 2px 3px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.commandbox code:hover {
|
|
overflow-y: auto;
|
|
max-height: 50px;
|
|
white-space: normal;
|
|
}
|
|
.commandbox p:first-of-type {
|
|
margin-top: -6px;
|
|
}
|
|
.commandbox 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;
|
|
}
|
|
[data-page="admin-system-autoreboot"] #cbi-autoreboot {
|
|
margin-top: 0;
|
|
}
|
|
[data-page="admin-system-system"] .control-group,
|
|
[data-page="admin-system-system"] .cbi-dynlist {
|
|
margin: 0.25rem 0;
|
|
}
|
|
[data-page="admin-system-system"] [data-name="notes"] .cbi-value-field > div:has(> .cbi-input-textarea) {
|
|
width: var(--form-control-min-width) !important;
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-system-system"] #localtime,
|
|
[data-page="admin-system-system"] [data-name="hostname"] input,
|
|
[data-page="admin-system-system"] [data-name="log_size"] input,
|
|
[data-page="admin-system-system"] [data-name="log_ip"] input,
|
|
[data-page="admin-system-system"] [data-name="log_port"] input,
|
|
[data-page="admin-system-system"] [data-name="log_file"] input,
|
|
[data-page="admin-system-system"] [data-name="server"] input,
|
|
[data-page="admin-system-system"] [data-name="server"] .item > span {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: start;
|
|
}
|
|
[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: 0.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);
|
|
}
|
|
[data-page="admin-system-admin"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)),
|
|
[data-page="admin-system-admin-password"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)),
|
|
[data-page="admin-system-admin-pwpolicy"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)),
|
|
[data-page="admin-system-admin-uhttpd"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)) {
|
|
padding-block: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-admin"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page="admin-system-admin-password"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page="admin-system-admin-pwpolicy"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page="admin-system-admin-uhttpd"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed) {
|
|
padding-block-start: 0;
|
|
}
|
|
[data-page="admin-system-admin"] .cbi-section > .cbi-value,
|
|
[data-page="admin-system-admin-password"] .cbi-section > .cbi-value,
|
|
[data-page="admin-system-admin-pwpolicy"] .cbi-section > .cbi-value,
|
|
[data-page="admin-system-admin-uhttpd"] .cbi-section > .cbi-value {
|
|
padding-block: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-admin"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-system-admin-password"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-system-admin-pwpolicy"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-system-admin-uhttpd"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-system-admin"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value,
|
|
[data-page="admin-system-admin-password"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value,
|
|
[data-page="admin-system-admin-pwpolicy"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value,
|
|
[data-page="admin-system-admin-uhttpd"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value {
|
|
padding-block-start: 0;
|
|
}
|
|
[data-page="admin-system-admin"] .cbi-section > .cbi-section-create,
|
|
[data-page="admin-system-admin-password"] .cbi-section > .cbi-section-create,
|
|
[data-page="admin-system-admin-pwpolicy"] .cbi-section > .cbi-section-create,
|
|
[data-page="admin-system-admin-uhttpd"] .cbi-section > .cbi-section-create {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-system-admin-pwpolicy"] #view > .cbi-map {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
gap: 0;
|
|
}
|
|
[data-page="admin-system-admin-pwpolicy"] #view > .cbi-map > h2 {
|
|
margin: 0;
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
[data-page="admin-system-admin-pwpolicy"] #view > .cbi-map > .cbi-section {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
[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"] .cbi-section-node,
|
|
[data-page="admin-system-admin-password"] .cbi-section-node {
|
|
padding: 1rem 0;
|
|
}
|
|
[data-page="admin-system-admin"] [data-name="pw2"] .cbi-value-description span[style="color:red"],
|
|
[data-page="admin-system-admin-password"] [data-name="pw2"] .cbi-value-description span[style="color:red"] {
|
|
color: var(--strength-weak-text) !important;
|
|
}
|
|
[data-page="admin-system-admin"] [data-name="pw2"] .cbi-value-description span[style="color:orange"],
|
|
[data-page="admin-system-admin-password"] [data-name="pw2"] .cbi-value-description span[style="color:orange"] {
|
|
color: var(--strength-medium-text) !important;
|
|
}
|
|
[data-page="admin-system-admin"] [data-name="pw2"] .cbi-value-description span[style="color:green"],
|
|
[data-page="admin-system-admin-password"] [data-name="pw2"] .cbi-value-description span[style="color:green"] {
|
|
color: var(--strength-strong-text) !important;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] #view > div:has(> .cbi-section-node > .cbi-dynlist) > .cbi-section-node {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist {
|
|
width: 100%;
|
|
margin: 0;
|
|
max-width: min(48rem, 100%);
|
|
gap: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-inline-end: 2.5rem;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item small,
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item code {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item::after {
|
|
position: absolute;
|
|
inset-inline-end: 0;
|
|
top: 0;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 0.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;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item > strong,
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item > small {
|
|
grid-column: 1;
|
|
min-width: 0;
|
|
line-height: 1.5;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item > strong {
|
|
color: var(--text-strong);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item > small {
|
|
font-size: 0.75rem;
|
|
color: var(--muted-text);
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item > br,
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item::after {
|
|
display: none;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item.argon-key-item > .argon-key-delete {
|
|
grid-column: 2;
|
|
grid-row: 1 / span 2;
|
|
min-height: 2.5rem;
|
|
pointer-events: auto;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .add-item {
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details {
|
|
grid-column: 1 / -1;
|
|
min-width: 0;
|
|
margin-block-start: var(--control-gap);
|
|
pointer-events: auto;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--control-gap);
|
|
width: fit-content;
|
|
min-height: 2.5rem;
|
|
color: var(--link-color);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details > summary::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"] [data-page="admin-system-admin-sshkeys"] .argon-key-details > summary::before {
|
|
transform: rotate(180deg);
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details > summary::before {
|
|
transition: transform 0.15s ease;
|
|
}
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details > summary:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-small);
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details[open] > summary::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
[data-page="admin-system-admin-sshkeys"] .argon-key-details > pre {
|
|
margin: 0;
|
|
padding: 0.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: 0.75rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
user-select: text;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: inherit;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table > .thead,
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table > .thead > .tr {
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
background: var(--surface-muted);
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table > .thead > .tr > .th:first-child {
|
|
border-start-start-radius: inherit;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table .cbi-section-table-row {
|
|
margin-block: 0;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] textarea {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
resize: vertical;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--control-border);
|
|
border-radius: var(--radius-control);
|
|
background: var(--input-bg);
|
|
color: var(--control-text);
|
|
font-size: 0.8125rem;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] textarea,
|
|
[data-page="admin-system-admin-repokeys"] [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-page="admin-system-admin-repokeys"] [data-name="filename"] output {
|
|
display: block;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] [data-name="key"] textarea {
|
|
min-height: 6.5rem;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] [data-name="_newkey"] {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] [data-name="_newkey"] > output {
|
|
display: block;
|
|
flex: 1 1 100%;
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] [data-name="_newkey"] .cbi-section-descr {
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] [data-name="_newkey"] .cbi-section-node > div[style="height: 20px"] {
|
|
display: none;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] [data-name="_newkey"] .right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
@media screen and (min-width: 1153px) {
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table,
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table > .thead,
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table > .tbody {
|
|
display: block;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table .tr {
|
|
display: grid;
|
|
grid-template-columns: 12rem minmax(0, 1fr) 6rem;
|
|
align-items: stretch;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table :is(.th, .td) {
|
|
min-width: 0;
|
|
width: auto !important;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table .td {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table .cbi-section-actions > div {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-system-admin-repokeys"] .cbi-section-table > .tbody {
|
|
display: block;
|
|
}
|
|
[data-page="admin-system-admin-repokeys"] .td[data-name="filename"],
|
|
[data-page="admin-system-admin-repokeys"] .td[data-name="key"] {
|
|
flex-basis: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
[data-page="admin-system-argon-config"] #argon-update [hidden] {
|
|
display: none !important;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--field-gap);
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-content > p {
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-versions {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
|
|
gap: var(--field-gap);
|
|
margin: 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-versions dt {
|
|
margin-bottom: var(--control-gap);
|
|
color: var(--muted-text);
|
|
font-size: 0.8125rem;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-versions dd {
|
|
margin: 0;
|
|
color: var(--text-strong);
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--control-gap);
|
|
color: var(--text-strong);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-status[data-state="current"],
|
|
[data-page="admin-system-argon-config"] .argon-update-status[data-state="complete"] {
|
|
font-weight: 600;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-status-icon {
|
|
display: inline-flex;
|
|
flex: 0 0 1.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: 1px solid var(--success);
|
|
border-radius: 50%;
|
|
color: var(--success);
|
|
font-size: 0.8125rem;
|
|
line-height: 1;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--control-gap);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-actions > .cbi-button {
|
|
min-height: 2.5rem;
|
|
max-width: 100%;
|
|
height: auto;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-argon-config"] #argon-update .argon-update-actions > .cbi-button-neutral {
|
|
color: var(--text-strong);
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--surface-muted);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-checked {
|
|
color: var(--muted-text);
|
|
font-size: 0.8125rem;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-details {
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-details > summary {
|
|
cursor: pointer;
|
|
color: var(--text-strong);
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-update-notes {
|
|
max-height: 22rem;
|
|
margin: var(--control-gap) 0 0;
|
|
padding: var(--field-gap);
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-panel);
|
|
background-color: var(--surface-muted);
|
|
color: var(--text-strong);
|
|
font: inherit;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[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%;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-color-picker > input[type="text"] {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
width: 0;
|
|
margin: 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-color-picker > .argon-color-swatch {
|
|
flex: 0 0 2.5rem;
|
|
width: 2.5rem;
|
|
min-width: 0;
|
|
height: 2.5rem;
|
|
padding: 0.25rem;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-color-picker > .argon-color-swatch::-webkit-color-swatch-wrapper {
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-color-picker > .argon-color-swatch::-webkit-color-swatch {
|
|
border: 0;
|
|
border-radius: calc(var(--radius-control) - 0.25rem - 1px);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-color-picker > .argon-color-swatch::-moz-color-swatch {
|
|
border: 0;
|
|
border-radius: calc(var(--radius-control) - 0.25rem - 1px);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-color-picker > .argon-color-swatch:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-color-picker > .argon-color-swatch:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
[data-page="admin-system-argon-config"] #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) {
|
|
[data-page="admin-system-argon-config"] #cbi-filelist > .table:last-child {
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-login-preview {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin-block-start: var(--field-gap);
|
|
border-radius: var(--radius-panel);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-content {
|
|
padding: var(--field-gap) var(--section-inset) var(--section-inset);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-content > p {
|
|
margin: 0 0 var(--field-gap);
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-content > .cbi-button + p {
|
|
margin: var(--field-gap) 0 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-content .cbi-button {
|
|
max-width: 100%;
|
|
height: auto;
|
|
white-space: normal;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--section-gap);
|
|
margin-block-end: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-card {
|
|
flex: 1 1 18rem;
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-card h4 {
|
|
margin: 0 0 var(--control-gap);
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-row,
|
|
[data-page="admin-system-argon-config"] .argon-branding-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--control-gap);
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-row {
|
|
gap: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-argon-config"] .argon-branding-row > img {
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
}
|
|
[data-page="admin-system-package-manager"] #view > #packages,
|
|
[data-page="admin-system-opkg"] #view > #packages {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
overflow: visible;
|
|
}
|
|
[data-page="admin-system-package-manager"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child,
|
|
[data-page="admin-system-opkg"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child,
|
|
[data-page="admin-system-package-manager"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child,
|
|
[data-page="admin-system-opkg"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child,
|
|
[data-page="admin-system-package-manager"] #view > #packages > :is(tr, .tr):first-child,
|
|
[data-page="admin-system-opkg"] #view > #packages > :is(tr, .tr):first-child {
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
}
|
|
[data-page="admin-system-package-manager"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child,
|
|
[data-page="admin-system-opkg"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child,
|
|
[data-page="admin-system-package-manager"] #view > #packages > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child,
|
|
[data-page="admin-system-opkg"] #view > #packages > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child {
|
|
border-start-start-radius: inherit;
|
|
}
|
|
[data-page="admin-system-package-manager"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):last-child,
|
|
[data-page="admin-system-opkg"] #view > #packages > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):last-child,
|
|
[data-page="admin-system-package-manager"] #view > #packages > :is(tr, .tr):first-child > :is(td, th, .td, .th):last-child,
|
|
[data-page="admin-system-opkg"] #view > #packages > :is(tr, .tr):first-child > :is(td, th, .td, .th):last-child {
|
|
border-start-end-radius: inherit;
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-system-package-manager"] #view > #packages :is(.table-titles, .cbi-section-table-titles) + .tr,
|
|
[data-page="admin-system-opkg"] #view > #packages :is(.table-titles, .cbi-section-table-titles) + .tr {
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
}
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls,
|
|
[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);
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls > div,
|
|
[data-page="admin-system-opkg"] .controls > div {
|
|
flex: 1 1 18rem;
|
|
min-width: 0;
|
|
padding: 0;
|
|
gap: var(--control-gap);
|
|
white-space: normal;
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls > div:first-child,
|
|
[data-page="admin-system-opkg"] .controls > div:first-child {
|
|
flex-basis: 100%;
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls > div > label,
|
|
[data-page="admin-system-opkg"] .controls > div > label {
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls .control-group > input,
|
|
[data-page="admin-system-opkg"] .controls .control-group > input {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
width: 0;
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls .pager,
|
|
[data-page="admin-system-opkg"] .controls .pager {
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls label:has(> input[type="radio"]),
|
|
[data-page="admin-system-opkg"] .controls label:has(> input[type="radio"]) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
vertical-align: middle;
|
|
}
|
|
[data-page="admin-system-package-manager"] .controls input[type="radio"],
|
|
[data-page="admin-system-opkg"] .controls input[type="radio"] {
|
|
flex: 0 0 1rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
[data-page="admin-system-package-manager"] .td.version,
|
|
[data-page="admin-system-opkg"] .td.version,
|
|
[data-page="admin-system-package-manager"] .td.size,
|
|
[data-page="admin-system-opkg"] .td.size,
|
|
[data-page="admin-system-package-manager"] .td:first-child,
|
|
[data-page="admin-system-opkg"] .td:first-child {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
[dir="rtl"] [data-page="admin-system-package-manager"] .td.version::before,
|
|
[dir="rtl"] [data-page="admin-system-opkg"] .td.version::before,
|
|
[dir="rtl"] [data-page="admin-system-package-manager"] .td.size::before,
|
|
[dir="rtl"] [data-page="admin-system-opkg"] .td.size::before,
|
|
[dir="rtl"] [data-page="admin-system-package-manager"] .td:first-child::before,
|
|
[dir="rtl"] [data-page="admin-system-opkg"] .td:first-child::before {
|
|
direction: rtl;
|
|
}
|
|
[data-page="admin-system-package-manager"] .modal h5,
|
|
[data-page="admin-system-opkg"] .modal h5,
|
|
[data-page="admin-system-package-manager"] .modal textarea,
|
|
[data-page="admin-system-opkg"] .modal textarea {
|
|
direction: ltr;
|
|
unicode-bidi: plaintext;
|
|
text-align: start;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-package-manager"] .modal textarea,
|
|
[data-page="admin-system-opkg"] .modal textarea {
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-system-startup"] #view > div:first-child div[data-initialized="true"] {
|
|
margin-top: 0;
|
|
}
|
|
[data-page="admin-system-startup"] [data-tab-title] p {
|
|
margin-left: 0;
|
|
margin-bottom: 0;
|
|
display: block;
|
|
}
|
|
[data-page="admin-system-startup"] [data-tab="rc"] > p {
|
|
margin: 0;
|
|
padding-inline: var(--section-inset);
|
|
}
|
|
[data-page="admin-system-startup"] [data-tab="rc"] > .cbi-page-actions {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-system-startup"] 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) {
|
|
[data-page="admin-system-startup"] .td[data-title] {
|
|
flex-basis: 50%;
|
|
}
|
|
}
|
|
[data-page="admin-system-crontab"] #view > p:has(> textarea) {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
margin: 0;
|
|
padding: var(--field-gap) var(--section-inset);
|
|
line-height: 0;
|
|
}
|
|
[data-page="admin-system-crontab"] #view p 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;
|
|
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 0.15s ease;
|
|
}
|
|
[data-page="admin-system-crontabhelper"] .crontab-row .dropdown-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
[data-page="admin-system-crontabhelper"] .crontab-row .dropdown-container div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
[data-page="admin-system-partexp"] .cbi-section,
|
|
[data-page="admin-system-partexp-global"] .cbi-section {
|
|
padding: var(--field-gap) 0;
|
|
}
|
|
[data-page="admin-system-partexp"] .info-note,
|
|
[data-page="admin-system-partexp-global"] .info-note {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-system-partexp"] #state-container,
|
|
[data-page="admin-system-partexp-global"] #state-container {
|
|
padding-block: var(--field-gap);
|
|
border-radius: var(--radius-card);
|
|
background: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
}
|
|
[data-page="admin-system-partexp"] #state-container > .cbi-section,
|
|
[data-page="admin-system-partexp-global"] #state-container > .cbi-section {
|
|
padding: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
[data-page="admin-system-partexp"] #partexp-form,
|
|
[data-page="admin-system-partexp-global"] #partexp-form {
|
|
--form-control-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-partexp"] #partexp-form > .cbi-value[style*="display: block"],
|
|
[data-page="admin-system-partexp-global"] #partexp-form > .cbi-value[style*="display: block"] {
|
|
display: flex !important;
|
|
}
|
|
[data-page="admin-system-partexp"] #log-section,
|
|
[data-page="admin-system-partexp-global"] #log-section {
|
|
margin-top: 0 !important;
|
|
padding-block-start: var(--section-gap);
|
|
}
|
|
[data-page="admin-system-partexp"] #log-view,
|
|
[data-page="admin-system-partexp-global"] #log-view {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
height: 18rem;
|
|
padding: 0.8rem;
|
|
resize: vertical;
|
|
direction: ltr;
|
|
unicode-bidi: plaintext;
|
|
text-align: start;
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: var(--log-text);
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--control-border);
|
|
border-radius: var(--radius-control);
|
|
}
|
|
[data-page^="admin-system-diskman"] .dkm-card {
|
|
background: var(--surface-color);
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--section-shadow);
|
|
}
|
|
[data-page^="admin-system-diskman"] .dkm-card-header {
|
|
flex-wrap: wrap;
|
|
gap: var(--control-gap);
|
|
border-bottom-color: var(--border-color);
|
|
}
|
|
[data-page^="admin-system-diskman"] .dkm-card-title,
|
|
[data-page^="admin-system-diskman"] .dkm-item-value {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page^="admin-system-diskman"] .dkm-card-actions {
|
|
flex-wrap: wrap;
|
|
max-width: 100%;
|
|
gap: var(--control-gap);
|
|
margin-inline-start: auto;
|
|
}
|
|
[data-page^="admin-system-diskman"] .dkm-card-actions select {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-page^="admin-system-diskman"] .dkm-card-body {
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
|
|
}
|
|
[data-page^="admin-system-diskman"] .dkm-item-label,
|
|
[data-page^="admin-system-diskman"] .dm-part-free {
|
|
color: var(--muted-text);
|
|
}
|
|
[data-page^="admin-system-diskman"] .dm-part-bar {
|
|
background: var(--surface-muted);
|
|
}
|
|
[data-page="admin-system-filemanager"] #view > #file-manager-container {
|
|
gap: 0;
|
|
}
|
|
[data-page="admin-system-filemanager"] .file-manager-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--control-gap);
|
|
margin-block-end: var(--section-gap);
|
|
}
|
|
[data-page="admin-system-filemanager"] .file-manager-header h2 {
|
|
grid-column: 1 / -1;
|
|
}
|
|
[data-page="admin-system-filemanager"] .file-manager-header input {
|
|
min-width: 0;
|
|
max-width: none;
|
|
margin: 0 !important;
|
|
font-size: 1rem;
|
|
}
|
|
[data-page="admin-system-filemanager"] .file-manager-header button {
|
|
margin: 0 !important;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
[data-page="admin-system-filemanager"] #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);
|
|
}
|
|
[data-page="admin-system-filemanager"] #tab-group .cbi-tabmenu > li {
|
|
margin: 0;
|
|
}
|
|
[data-page="admin-system-filemanager"] #tab-group .cbi-tabmenu > li:not(.cbi-tab-active) {
|
|
border-bottom-color: transparent;
|
|
background: var(--tab-item-bg);
|
|
}
|
|
[data-page="admin-system-filemanager"] #tab-group .cbi-tabmenu > li:not(.cbi-tab-active) > a {
|
|
color: var(--tab-inactive-color);
|
|
}
|
|
@media (hover: hover) {
|
|
[data-page="admin-system-filemanager"] #tab-group .cbi-tabmenu > li:not(.cbi-tab-active):hover {
|
|
border-bottom-color: var(--tab-color);
|
|
background: var(--surface-active);
|
|
}
|
|
[data-page="admin-system-filemanager"] #tab-group .cbi-tabmenu > li:not(.cbi-tab-active):hover > a {
|
|
color: var(--text-strong);
|
|
}
|
|
}
|
|
[data-page="admin-system-filemanager"] .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);
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-list-container,
|
|
[data-page="admin-system-filemanager"] #content-editor {
|
|
margin-top: 0 !important;
|
|
}
|
|
[data-page="admin-system-filemanager"] #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;
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-list-container.resizeable {
|
|
resize: vertical;
|
|
}
|
|
[data-page="admin-system-filemanager"] th {
|
|
background: var(--surface-muted);
|
|
color: var(--text-strong);
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table {
|
|
display: table;
|
|
min-width: 45rem;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table thead {
|
|
display: table-header-group;
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table tbody {
|
|
display: table-row-group;
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table th,
|
|
[data-page="admin-system-filemanager"] #file-table td {
|
|
text-align: start !important;
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table th {
|
|
background: var(--surface-muted);
|
|
color: var(--text-strong);
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table tr:hover {
|
|
background-color: var(--surface-active) !important;
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table th[data-field="actions"],
|
|
[data-page="admin-system-filemanager"] #file-table td:has(> .select-checkbox) {
|
|
min-width: 12rem !important;
|
|
padding-inline: 0.75rem;
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table th[data-field="actions"] {
|
|
width: 12rem !important;
|
|
}
|
|
[data-page="admin-system-filemanager"] #file-table .select-checkbox {
|
|
vertical-align: middle;
|
|
}
|
|
[data-page="admin-system-filemanager"] .download-button,
|
|
[data-page="admin-system-filemanager"] .edit-button,
|
|
[data-page="admin-system-filemanager"] .duplicate-button,
|
|
[data-page="admin-system-filemanager"] .delete-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
margin: 0;
|
|
margin-inline-start: 0.25rem;
|
|
border-radius: var(--radius-control);
|
|
font-size: 0;
|
|
vertical-align: middle;
|
|
}
|
|
[data-page="admin-system-filemanager"] .download-button::before,
|
|
[data-page="admin-system-filemanager"] .edit-button::before,
|
|
[data-page="admin-system-filemanager"] .duplicate-button::before,
|
|
[data-page="admin-system-filemanager"] .delete-button::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;
|
|
}
|
|
[data-page="admin-system-filemanager"] .download-button:hover,
|
|
[data-page="admin-system-filemanager"] .edit-button:hover,
|
|
[data-page="admin-system-filemanager"] .duplicate-button:hover,
|
|
[data-page="admin-system-filemanager"] .delete-button:hover {
|
|
background: var(--surface-active);
|
|
}
|
|
[data-page="admin-system-filemanager"] .edit-button {
|
|
--file-action-icon: url('../icon/edit.svg');
|
|
}
|
|
[data-page="admin-system-filemanager"] .duplicate-button {
|
|
--file-action-icon: url('../icon/copy.svg');
|
|
}
|
|
[data-page="admin-system-filemanager"] .delete-button {
|
|
--file-action-icon: url('../icon/delete.svg');
|
|
}
|
|
[data-page="admin-system-filemanager"] .download-button {
|
|
--file-action-icon: url('../icon/download.svg');
|
|
}
|
|
[data-page="admin-system-filemanager"] .sort-button {
|
|
height: 2rem;
|
|
border-color: var(--border-color);
|
|
background: var(--surface-color);
|
|
color: var(--link-color);
|
|
}
|
|
[data-page="admin-system-filemanager"] .sort-button:hover {
|
|
background: var(--surface-active);
|
|
color: var(--link-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-page="admin-system-filemanager"] .sort-button:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
[data-page="admin-system-filemanager"] .directory-link,
|
|
[data-page="admin-system-filemanager"] .download-button,
|
|
[data-page="admin-system-filemanager"] .edit-button,
|
|
[data-page="admin-system-filemanager"] .duplicate-button,
|
|
[data-page="admin-system-filemanager"] .status-link {
|
|
color: var(--link-color);
|
|
}
|
|
[data-page="admin-system-filemanager"] .delete-button {
|
|
color: var(--danger);
|
|
}
|
|
[data-page="admin-system-filemanager"] #content-editor,
|
|
[data-page="admin-system-filemanager"] .editor-container,
|
|
[data-page="admin-system-filemanager"] #content-help {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-system-filemanager"] .editor-content {
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-system-filemanager"] .editor-container,
|
|
[data-page="admin-system-filemanager"] #content-help {
|
|
width: 100% !important;
|
|
resize: vertical !important;
|
|
}
|
|
[data-page="admin-system-filemanager"] #content-settings > div:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
[data-page="admin-system-filemanager"] #settings-form label {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-filemanager"] #status-bar,
|
|
[data-page="admin-system-filemanager"] .line-numbers {
|
|
background: var(--surface-muted);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-page="admin-system-filemanager"] #status-bar {
|
|
flex-wrap: wrap;
|
|
gap: var(--control-gap);
|
|
}
|
|
[data-page="admin-system-filemanager"] #status-info {
|
|
flex: 1 1 16rem;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
gap: var(--control-gap);
|
|
}
|
|
[data-page="admin-system-filemanager"] #status-info > span,
|
|
[data-page="admin-system-filemanager"] #status-info > input {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-filemanager"] #status-info > input {
|
|
margin: 0 !important;
|
|
}
|
|
[data-page="admin-system-filemanager"] #status-progress {
|
|
display: flex;
|
|
flex: 1 1 12rem;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
width: auto;
|
|
}
|
|
[data-page="admin-system-filemanager"] #status-progress:empty {
|
|
display: none;
|
|
}
|
|
[data-page="admin-system-filemanager"] #editor-textarea {
|
|
background: var(--input-bg);
|
|
color: var(--text-color);
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) {
|
|
display: grid !important;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: start;
|
|
gap: var(--action-gap) var(--field-gap);
|
|
padding: var(--field-gap) var(--section-inset);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-card) !important;
|
|
background-color: var(--surface-raised) !important;
|
|
color: var(--text-color);
|
|
box-shadow: var(--section-shadow);
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) > div:first-child {
|
|
display: contents;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) > div:first-child > * {
|
|
grid-column: 1 / -1;
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) > div:first-child > * + * {
|
|
margin-top: 0;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) > div:first-child > h4 {
|
|
grid-column: 1;
|
|
align-self: center;
|
|
padding: 0;
|
|
background: none;
|
|
color: var(--text-strong);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) > div:first-child > .btn {
|
|
justify-self: start;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) > div:last-child {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
align-self: center;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) > div:last-child > .btn {
|
|
margin: 0 !important;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .btn {
|
|
min-height: 2.25rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--surface-muted);
|
|
color: var(--text-strong);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) a {
|
|
color: color-mix(in srgb, var(--link-color) 75%, var(--text-strong));
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.2em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table {
|
|
display: table;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-panel);
|
|
background-color: var(--surface-color);
|
|
overflow: hidden;
|
|
font-size: 0.8125rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table > :is(thead, tbody, tfoot) {
|
|
display: table-row-group;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table .tr {
|
|
display: table-row;
|
|
background: none;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table .th,
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table .td {
|
|
display: table-cell;
|
|
width: 33.333%;
|
|
padding: 0.625rem 0.75rem;
|
|
border-top: 1px solid var(--border-color);
|
|
color: var(--text-strong);
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
text-align: start;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table .th {
|
|
border-top: 0;
|
|
background-color: var(--surface-muted);
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table .td:first-child {
|
|
color: var(--muted-text);
|
|
font-weight: 400;
|
|
}
|
|
#maincontent > .alert-message.notice:has(a[href$="/admin/system/attendedsysupgrade"]) .table .td:last-child {
|
|
font-weight: 600;
|
|
}
|
|
[data-page="admin-system-attendedsysupgrade"] #view > p,
|
|
[data-page="admin-system-attendedsysupgrade-overview"] #view > p {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--field-gap);
|
|
margin: 0;
|
|
}
|
|
[data-page="admin-system-attendedsysupgrade"] #view > p > p,
|
|
[data-page="admin-system-attendedsysupgrade-overview"] #view > p > p {
|
|
margin: 0;
|
|
padding-inline: var(--section-inset);
|
|
line-height: 1.5;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
[data-page="admin-system-attendedsysupgrade"] #view > p > .cbi-button,
|
|
[data-page="admin-system-attendedsysupgrade-overview"] #view > p > .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;
|
|
}
|
|
[data-page="admin-system-attendedsysupgrade-configuration"] .cbi-map > .cbi-section > .cbi-section-node {
|
|
padding-block: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-flash"] [data-tab="config"] textarea {
|
|
display: block;
|
|
}
|
|
[data-page="admin-system-flash"] [data-tab="config"] > .cbi-section-node {
|
|
padding-bottom: 0;
|
|
}
|
|
[data-page="admin-system-flash"] [data-tab="config"] > .cbi-page-actions {
|
|
padding: var(--field-gap) 1rem;
|
|
}
|
|
[data-page="admin-system-flash"] .modal.cbi-modal > ul {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: start;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-flash"] textarea {
|
|
direction: ltr;
|
|
unicode-bidi: plaintext;
|
|
text-align: start;
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-system-flash"] .modal .btn {
|
|
height: auto;
|
|
min-height: 2.5rem;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
}
|
|
[data-page="admin-system-flash"] .cbi-value {
|
|
padding: 0 1rem;
|
|
}
|
|
[data-page="admin-system-flash"] .cbi-section .cbi-section {
|
|
margin-top: 0;
|
|
}
|
|
[data-page="admin-system-flash"] .cbi-map-tabbed {
|
|
border-radius: var(--radius-card);
|
|
}
|
|
[data-page="admin-system-flash"] .cbi-section-node {
|
|
padding-top: 0;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
[data-page="admin-system-flash"] 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;
|
|
}
|
|
[data-page="admin-system-flash"] .cbi-section-descr {
|
|
font-weight: 600;
|
|
padding: 1rem 0 1rem 1rem;
|
|
color: var(--text-color);
|
|
}
|
|
[data-page="admin-system-flash"] .modal label > input[type="checkbox"] {
|
|
vertical-align: text-top;
|
|
top: auto;
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)),
|
|
[data-page="admin-system-fileassistant"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)) {
|
|
padding-block: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page="admin-system-fileassistant"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed) {
|
|
padding-block-start: 0;
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-section > .cbi-value,
|
|
[data-page="admin-system-fileassistant"] .cbi-section > .cbi-value {
|
|
padding-block: var(--field-gap);
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-system-fileassistant"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-system-filetransfer"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value,
|
|
[data-page="admin-system-fileassistant"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value {
|
|
padding-block-start: 0;
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-section > .cbi-section-create,
|
|
[data-page="admin-system-fileassistant"] .cbi-section > .cbi-section-create {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-system-filetransfer"] #cbi-upload,
|
|
[data-page="admin-system-fileassistant"] #cbi-upload {
|
|
margin-top: 0;
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-section-table,
|
|
[data-page="admin-system-fileassistant"] .cbi-section-table {
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-value:has( > :is(#ulfile, #dlfile)),
|
|
[data-page="admin-system-fileassistant"] .cbi-value:has( > :is(#ulfile, #dlfile)) {
|
|
display: grid;
|
|
grid-template-columns: fit-content(var(--form-label-width)) minmax(0, 25rem) auto;
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: var(--control-gap) var(--action-gap);
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-value:has( > :is(#ulfile, #dlfile)) > label.cbi-value,
|
|
[data-page="admin-system-fileassistant"] .cbi-value:has( > :is(#ulfile, #dlfile)) > label.cbi-value {
|
|
display: block !important;
|
|
width: auto !important;
|
|
min-width: 0;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-value:has( > :is(#ulfile, #dlfile)) > .cbi-input-file,
|
|
[data-page="admin-system-fileassistant"] .cbi-value:has( > :is(#ulfile, #dlfile)) > .cbi-input-file {
|
|
width: 100% !important;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-value:has( > :is(#ulfile, #dlfile)) > .cbi-button,
|
|
[data-page="admin-system-fileassistant"] .cbi-value:has( > :is(#ulfile, #dlfile)) > .cbi-button {
|
|
justify-self: start;
|
|
max-width: 100%;
|
|
}
|
|
@container (max-width: 40rem) {
|
|
[data-page="admin-system-filetransfer"] .cbi-value:has( > :is(#ulfile, #dlfile)),
|
|
[data-page="admin-system-fileassistant"] .cbi-value:has( > :is(#ulfile, #dlfile)) {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
[data-page="admin-system-filetransfer"] .cbi-value:has( > :is(#ulfile, #dlfile)) > label.cbi-value,
|
|
[data-page="admin-system-fileassistant"] .cbi-value:has( > :is(#ulfile, #dlfile)) > label.cbi-value {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
[data-page="admin-system-fileassistant"] .fb-container td[class$="-icon"]::before {
|
|
filter: var(--file-icon-filter);
|
|
}
|
|
[data-page="admin-system-fileassistant"] #upload-toggle {
|
|
display: none !important;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .fb-container .panel-title {
|
|
padding: 0.5rem 0.75rem !important;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container {
|
|
padding: 0.5rem;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container label.cbi-value-title {
|
|
line-height: 1.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
width: 60px;
|
|
text-align: left;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container div.cbi-value-field {
|
|
width: 100%;
|
|
display: block;
|
|
padding-left: 60px;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container div#list-content table.cbi-section-table thead td.cbi-section-table-cell,
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container div#list-content table.cbi-section-table tbody td.cbi-section-table-cell {
|
|
width: 232px;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container div#list-content tbody tr:nth-child(1) td.parent-icon strong {
|
|
margin-left: 0 !important;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container div#list-content tbody td.cbi-value-field.file-icon strong,
|
|
[data-page="admin-system-fileassistant"] .cbi-section.fb-container div#list-content tbody td.cbi-value-field.folder-icon strong {
|
|
vertical-align: middle;
|
|
margin-left: 5px;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .fb-container .panel-container {
|
|
border-bottom-color: var(--border-color);
|
|
display: flex;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .fb-container .panel-container .panel-title {
|
|
flex: 1;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .fb-container .upload-container {
|
|
display: flex !important;
|
|
}
|
|
[data-page="admin-system-fileassistant"] .fb-container .upload-container .upload-file {
|
|
flex: 1;
|
|
margin-right: 0 !important;
|
|
}
|
|
[data-page="admin-system-opkg"] h2 {
|
|
margin-left: 0;
|
|
color: var(--text-strong);
|
|
}
|
|
[data-page="admin-system-opkg"] input[name="filter_i18n"] {
|
|
top: 2px;
|
|
vertical-align: text-top;
|
|
}
|
|
[data-page="admin-system-opkg"] div.btn {
|
|
line-height: 3;
|
|
display: inline;
|
|
padding: 0.3rem 0.6rem;
|
|
}
|
|
[data-page="admin-system-opkg"] #maincontent > .container {
|
|
margin: 0 1.25rem 1rem 1.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
[data-page="admin-system-reboot"] p {
|
|
padding-left: 1.5rem;
|
|
}
|
|
[data-page="admin-system-reboot"] p > span {
|
|
position: relative;
|
|
top: 0.1rem;
|
|
left: 1rem;
|
|
}
|
|
[data-page="admin-system-reboot"] #view > hr {
|
|
display: none;
|
|
}
|
|
[data-page="admin-system-reboot"] .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;
|
|
}
|
|
[data-page="admin-system-reboot"] .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;
|
|
}
|
|
[data-page="admin-system-poweroffdevice"] .container h2 + p {
|
|
margin-bottom: 1rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
[data-page="admin-system-poweroffdevice"] .container button + div {
|
|
display: none;
|
|
}
|
|
[data-page="admin-system-poweroffdevice"] .btn.cbi-button.cbi-button-negative {
|
|
align-self: flex-end;
|
|
}
|
|
[data-page="admin-network-routes"] [data-name="target"] input,
|
|
[data-page="admin-network-routes"] [data-name="gateway"] input,
|
|
[data-page="admin-network-routes"] [data-name="source"] input,
|
|
[data-page="admin-network-routes"] [data-name="src"] input,
|
|
[data-page="admin-network-routes"] [data-name="dest"] input {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: start;
|
|
}
|
|
[data-page="admin-network-dns"] input[type="text"],
|
|
[data-page="admin-network-dns"] .cbi-section-descr code,
|
|
[data-page="admin-network-dns"] .cbi-value-description code {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
[data-page="admin-network-dns"] input[type="text"] {
|
|
text-align: start;
|
|
}
|
|
[data-page="admin-network-firewall-zones"] #cbi-firewall-defaults > .cbi-section-node:last-child {
|
|
padding-block-end: var(--field-gap);
|
|
}
|
|
[data-page="admin-network-firewall-zones"] #cbi-firewall-zone .cbi-input-select {
|
|
min-width: 6.5rem;
|
|
}
|
|
[dir="rtl"] [data-page="admin-network-firewall-zones"] .zone-forwards > span {
|
|
transform: scaleX(-1);
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-network-firewall-zones"] #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"],
|
|
[data-page="admin-network-firewall-ipsets"] .cbi-value-description code {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
[data-page="admin-network-firewall-ipsets"] [data-name="entry"] input[type="text"] {
|
|
text-align: start;
|
|
}
|
|
[data-page="admin-network-firewall-forwards"] [data-name$="_ip"] input[type="text"],
|
|
[data-page="admin-network-firewall-rules"] [data-name$="_ip"] input[type="text"],
|
|
[data-page="admin-network-firewall-snats"] [data-name$="_ip"] input[type="text"],
|
|
[data-page="admin-network-firewall-forwards"] [data-name="src_dip"] input[type="text"],
|
|
[data-page="admin-network-firewall-rules"] [data-name="src_dip"] input[type="text"],
|
|
[data-page="admin-network-firewall-snats"] [data-name="src_dip"] input[type="text"],
|
|
[data-page="admin-network-firewall-forwards"] [data-name$="_port"] input[type="text"],
|
|
[data-page="admin-network-firewall-rules"] [data-name$="_port"] input[type="text"],
|
|
[data-page="admin-network-firewall-snats"] [data-name$="_port"] input[type="text"],
|
|
[data-page="admin-network-firewall-forwards"] [data-name="src_dport"] input[type="text"],
|
|
[data-page="admin-network-firewall-rules"] [data-name="src_dport"] input[type="text"],
|
|
[data-page="admin-network-firewall-snats"] [data-name="src_dport"] input[type="text"],
|
|
[data-page="admin-network-firewall-forwards"] [data-name$="_ip"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-rules"] [data-name$="_ip"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-snats"] [data-name$="_ip"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-forwards"] [data-name="src_dip"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-rules"] [data-name="src_dip"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-snats"] [data-name="src_dip"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-forwards"] [data-name$="_port"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-rules"] [data-name$="_port"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-snats"] [data-name$="_port"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-forwards"] [data-name="src_dport"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-rules"] [data-name="src_dport"] .cbi-dropdown > ul,
|
|
[data-page="admin-network-firewall-snats"] [data-name="src_dport"] .cbi-dropdown > ul {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: start;
|
|
}
|
|
[data-page="admin-network-firewall-forwards"] .td[data-name="_match"] small,
|
|
[data-page="admin-network-firewall-rules"] .td[data-name="_match"] small,
|
|
[data-page="admin-network-firewall-snats"] .td[data-name="_match"] small,
|
|
[data-page="admin-network-firewall-forwards"] .td[data-name="_target"] small,
|
|
[data-page="admin-network-firewall-rules"] .td[data-name="_target"] small,
|
|
[data-page="admin-network-firewall-snats"] .td[data-name="_target"] small {
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-network-firewall-forwards"] .td[data-name="_match"] var:not(.cbi-tooltip-container),
|
|
[data-page="admin-network-firewall-rules"] .td[data-name="_match"] var:not(.cbi-tooltip-container),
|
|
[data-page="admin-network-firewall-snats"] .td[data-name="_match"] var:not(.cbi-tooltip-container),
|
|
[data-page="admin-network-firewall-forwards"] .td[data-name="_target"] var:not(.cbi-tooltip-container),
|
|
[data-page="admin-network-firewall-rules"] .td[data-name="_target"] var:not(.cbi-tooltip-container),
|
|
[data-page="admin-network-firewall-snats"] .td[data-name="_target"] var:not(.cbi-tooltip-container) {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
@media screen and (min-width: 1153px) {
|
|
[data-page="admin-network-firewall-forwards"] .tr[data-title]::before,
|
|
[data-page="admin-network-firewall-rules"] .tr[data-title]::before,
|
|
[data-page="admin-network-firewall-snats"] .tr[data-title]::before,
|
|
[data-page="admin-network-firewall-forwards"] .tr.cbi-section-table-titles.named::before,
|
|
[data-page="admin-network-firewall-rules"] .tr.cbi-section-table-titles.named::before,
|
|
[data-page="admin-network-firewall-snats"] .tr.cbi-section-table-titles.named::before {
|
|
display: none;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-network-firewall-forwards"] .td.cbi-section-table-titles,
|
|
[data-page="admin-network-firewall-rules"] .td.cbi-section-table-titles,
|
|
[data-page="admin-network-firewall-snats"] .td.cbi-section-table-titles {
|
|
display: none;
|
|
}
|
|
[data-page="admin-network-firewall-forwards"] .td[data-name="_match"],
|
|
[data-page="admin-network-firewall-rules"] .td[data-name="_match"],
|
|
[data-page="admin-network-firewall-snats"] .td[data-name="_match"] {
|
|
flex-basis: 100%;
|
|
}
|
|
[data-page="admin-network-firewall-forwards"] .tr[data-title]::before,
|
|
[data-page="admin-network-firewall-rules"] .tr[data-title]::before,
|
|
[data-page="admin-network-firewall-snats"] .tr[data-title]::before {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
}
|
|
[data-page="admin-network-network"] .cbi-value-field .cbi-dynlist {
|
|
padding: 0 !important;
|
|
}
|
|
[data-page="admin-network-network"] .td > .ifacebadge > .cbi-tooltip-container {
|
|
display: flex;
|
|
}
|
|
[data-page="admin-network-network"] .td > .ifacebadge > .cbi-tooltip-container img {
|
|
vertical-align: middle;
|
|
}
|
|
[data-page="admin-network-network"] div[data-name="_gen_server_keypair"] .cbi-value-title,
|
|
[data-page="admin-network-network"] div[data-name="_gen_peer_keypair"] .cbi-value-title,
|
|
[data-page="admin-network-network"] div[data-name="_gen_psk"] .cbi-value-title {
|
|
height: 2.4rem;
|
|
}
|
|
[data-page="admin-network-network"] #modal_overlay > .modal.cbi-modal > div > p > textarea {
|
|
height: 20em !important;
|
|
border: 1px solid var(--control-border) !important;
|
|
border-radius: var(--radius-control);
|
|
}
|
|
[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), 0.08);
|
|
--svc-vlan-tagged-bg: rgba(var(--vlan-tagged-rgb), 0.1);
|
|
--svc-vlan-untagged-stripe: rgba(var(--vlan-untagged-rgb), 0.16);
|
|
--svc-vlan-tagged-stripe: rgba(var(--vlan-tagged-rgb), 0.18);
|
|
color: var(--text-color-high);
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view input[type="text"],
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view input[type="number"] {
|
|
background-color: var(--background-color-high) !important;
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view input[type="text"]::placeholder,
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view input[type="number"]::placeholder {
|
|
color: var(--text-color-low);
|
|
opacity: 1;
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view input[type="text"]:focus,
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view input[type="number"]:focus {
|
|
border-color: var(--primary-color-high) !important;
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-port-tile.selected:hover {
|
|
background: var(--svc-port-selected-hover-bg);
|
|
border-color: var(--svc-port-selected-border);
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-vlan-btn-tagged,
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .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);
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-vlan-btn-untagged,
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .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);
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-vlan-btn-tagged:not(:disabled),
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-vlan-btn-untagged:not(:disabled),
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-vlan-assign-btn:not(.svc-vlan-assign-disabled) {
|
|
color: var(--svc-role-color) !important;
|
|
border-color: var(--svc-role-color) !important;
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-vlan-assign-btn.svc-vlan-assign-checked {
|
|
background: var(--svc-role-color);
|
|
color: var(--svc-vlan-checked-text) !important;
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .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);
|
|
}
|
|
[data-page="admin-network-switch-vlan"] #switch-vlan-view .svc-vlan-assign-btn.svc-vlan-assign-checked .svc-vlan-btn-prefix {
|
|
color: inherit;
|
|
}
|
|
[data-page="admin-network-dhcp"] .cbi-value {
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-network-dhcp"] [data-tab="__leases__"] > .cbi-section-node > .cbi-value:last-child {
|
|
border-end-start-radius: var(--radius-card);
|
|
border-end-end-radius: var(--radius-card);
|
|
}
|
|
[data-page="admin-network-dhcp"] [data-tab="__leases__"] > .cbi-section-node > .cbi-value:last-child > .table:last-child {
|
|
border-collapse: separate;
|
|
border-end-start-radius: inherit;
|
|
border-end-end-radius: inherit;
|
|
overflow: hidden;
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-network-dhcp"] [data-tab="__leases__"] > .cbi-section-node > .cbi-value:last-child > .table:last-child {
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
[data-page="admin-network-dhcp"] .cbi-section-node-tabbed > [data-tab-title] {
|
|
padding-inline: var(--section-inset);
|
|
}
|
|
[data-page="admin-network-dhcp"] .cbi-section-node-tabbed > [data-tab="tagsparent"],
|
|
[data-page="admin-network-dhcp"] .cbi-section-node-tabbed > [data-tab="matchtags"],
|
|
[data-page="admin-network-dhcp"] .cbi-section-node-tabbed > [data-tab="settags"],
|
|
[data-page="admin-network-dhcp"] .cbi-section-node-tabbed > [data-tab="vc"],
|
|
[data-page="admin-network-dhcp"] .cbi-section-node-tabbed > [data-tab="uc"] {
|
|
padding-inline: 0;
|
|
}
|
|
[data-page="admin-network-dhcp"] .cbi-section-descr code,
|
|
[data-page="admin-network-dhcp"] .cbi-value-description code {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
[data-page="admin-network-diagnostics"] #view > .cbi-map > .table {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
padding: var(--control-gap);
|
|
border-collapse: separate;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .table {
|
|
overflow: visible;
|
|
box-shadow: none;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .cbi-section {
|
|
padding: 1rem;
|
|
font-family: monospace;
|
|
background: var(--surface-color) !important;
|
|
}
|
|
[data-page="admin-network-diagnostics"] 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;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .tr {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .tr .td {
|
|
background-color: var(--surface-color) !important;
|
|
border-bottom: 0 !important;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex: 1 1 18rem;
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .tr .td 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"] [data-page="admin-network-diagnostics"] .tr .td input {
|
|
border-left-width: 0 !important;
|
|
border-right-width: 1px !important;
|
|
border-radius: 0 var(--radius-control) var(--radius-control) 0 !important;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .tr .td .diag-action {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
min-width: 6rem;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .tr .td .diag-action > .cbi-button {
|
|
flex: 1 1 auto;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .tr .td .cbi-dropdown,
|
|
[data-page="admin-network-diagnostics"] .tr .td .cbi-button {
|
|
height: 2.5rem;
|
|
border-inline-start: none !important;
|
|
border-end-start-radius: 0 !important;
|
|
border-start-start-radius: 0 !important;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .tr .td .cbi-dropdown .more,
|
|
[data-page="admin-network-diagnostics"] .tr .td .cbi-button .more {
|
|
display: block;
|
|
width: 1px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
text-indent: 5000px;
|
|
background-color: var(--surface-color);
|
|
}
|
|
[data-page="admin-network-diagnostics"] .table,
|
|
[data-page="admin-network-diagnostics"] .table > tbody {
|
|
display: block;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .diag-action .cbi-dropdown:not([multiple]) > .more {
|
|
display: none;
|
|
}
|
|
[data-page="admin-network-diagnostics"] .cbi-dropdown .open {
|
|
color: var(--accent-text);
|
|
}
|
|
[data-page="admin-network-firewall-custom"] #view p,
|
|
[data-page="admin-status-routes"] #view p {
|
|
padding: 0 1.25rem;
|
|
}
|
|
[data-page="admin-network-firewall-custom"] #view p textarea,
|
|
[data-page="admin-status-routes"] #view p textarea {
|
|
padding: 1rem;
|
|
border-radius: var(--radius-control);
|
|
}
|
|
[data-page="admin-network-firewall-custom"] #view > h3,
|
|
[data-page="admin-status-routes"] #view > h3 {
|
|
border-radius: var(--radius-card) var(--radius-card) 0 0;
|
|
}
|
|
#view > .Dashboard {
|
|
--dashboard-surface-alt: var(--surface-muted);
|
|
--dashboard-text: var(--text-strong);
|
|
--dashboard-text-muted: var(--muted-text);
|
|
--dashboard-border: var(--border-color);
|
|
--dashboard-primary: var(--primary);
|
|
--dashboard-success: var(--success);
|
|
--dashboard-warn: var(--warning);
|
|
}
|
|
#view > .Dashboard .dashboard-kpi-row > .cbi-section {
|
|
min-width: min(100%, 16rem);
|
|
padding: var(--field-gap) var(--section-inset);
|
|
gap: var(--field-gap);
|
|
}
|
|
#view > .Dashboard .dashboard-kpi-text {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#view > .Dashboard .dashboard-charts > .cbi-section {
|
|
min-width: min(100%, 18rem);
|
|
padding-block-end: var(--field-gap);
|
|
}
|
|
#view > .Dashboard .dashboard-charts > .cbi-section > :not(h3:first-child) {
|
|
margin-inline: var(--section-inset);
|
|
}
|
|
#view > .Dashboard .dashboard-charts > .cbi-section > .cbi-section-descr {
|
|
padding: 0;
|
|
margin-block-end: var(--field-gap);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#view > .Dashboard .dashboard-charts > .cbi-section > em {
|
|
padding: 0;
|
|
}
|
|
#view > .Dashboard .dashboard-charts > .cbi-section > .dashboard-legend-inline {
|
|
margin-block-start: var(--field-gap);
|
|
}
|
|
#view > .Dashboard .dashboard-bars {
|
|
direction: ltr;
|
|
}
|
|
#view > .Dashboard .dashboard-net-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.25rem), 1fr));
|
|
}
|
|
#view > .Dashboard .dashboard-net-fields {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
#view > .Dashboard .ifacebox {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
#view > .Dashboard .ifacebox-body {
|
|
text-align: start;
|
|
}
|
|
#view > .Dashboard [data-tab="internet"] > div > div > em {
|
|
display: block;
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
#view > .Dashboard [data-tab="layout"] .cbi-page-actions {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-status-processes"] #view > .table {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
overflow: visible;
|
|
}
|
|
[data-page="admin-status-processes"] #view > .table > :is(thead, tbody, .thead, .tbody):first-child,
|
|
[data-page="admin-status-processes"] #view > .table > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child,
|
|
[data-page="admin-status-processes"] #view > .table > :is(tr, .tr):first-child {
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
}
|
|
[data-page="admin-status-processes"] #view > .table > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child,
|
|
[data-page="admin-status-processes"] #view > .table > :is(tr, .tr):first-child > :is(td, th, .td, .th):first-child {
|
|
border-start-start-radius: inherit;
|
|
}
|
|
[data-page="admin-status-processes"] #view > .table > :is(thead, tbody, .thead, .tbody):first-child > :is(tr, .tr):first-child > :is(td, th, .td, .th):last-child,
|
|
[data-page="admin-status-processes"] #view > .table > :is(tr, .tr):first-child > :is(td, th, .td, .th):last-child {
|
|
border-start-end-radius: inherit;
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-status-processes"] #view > .table :is(.table-titles, .cbi-section-table-titles) + .tr {
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
}
|
|
}
|
|
[data-page="admin-status-processes"] .th:nth-child(3),
|
|
[data-page="admin-status-processes"] .td:nth-child(3) {
|
|
text-align: start;
|
|
}
|
|
[data-page="admin-status-processes"] .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) {
|
|
[data-page="admin-status-processes"] .td:nth-child(1),
|
|
[data-page="admin-status-processes"] .td:nth-child(2) {
|
|
flex-basis: 50%;
|
|
}
|
|
[data-page="admin-status-processes"] .td:nth-child(3) {
|
|
flex-basis: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
.cbi-section.fade-in .cbi-title {
|
|
position: relative;
|
|
}
|
|
.cbi-section.fade-in .cbi-title > h3 {
|
|
align-items: center;
|
|
gap: var(--control-gap);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.cbi-section.fade-in .cbi-title > div:last-child {
|
|
position: absolute;
|
|
inset-inline-end: var(--section-inset);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.cbi-section.fade-in .cbi-title:has(> div:last-child .label[data-indicator="poll-status"]) > h3 {
|
|
padding-inline-end: calc(var(--section-inset) + 2.5rem);
|
|
}
|
|
.cbi-section.fade-in .cbi-title .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;
|
|
}
|
|
.cbi-section.fade-in .cbi-title .label[data-indicator="poll-status"]::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;
|
|
}
|
|
.cbi-section.fade-in .cbi-title .label[data-indicator="poll-status"][data-style=inactive]::after {
|
|
-webkit-mask-image: var(--chevron-down-icon);
|
|
mask-image: var(--chevron-down-icon);
|
|
}
|
|
[dir="rtl"] .cbi-section.fade-in .cbi-title .label[data-indicator="poll-status"][data-style=active]::after {
|
|
transform: scaleX(-1);
|
|
}
|
|
.cbi-section.fade-in > .cbi-title + div:has(> em:only-child) {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
.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"] #view > div:first-child,
|
|
[data-page="admin-status-overview"] #view > div:first-child {
|
|
gap: 0 !important;
|
|
}
|
|
[data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]),
|
|
[data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)) !important;
|
|
gap: var(--field-gap);
|
|
margin: 0 !important;
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox,
|
|
[data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox {
|
|
min-width: 0 !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
text-align: center;
|
|
}
|
|
[data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox > .ifacebox-head:first-child,
|
|
[data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox > .ifacebox-head:first-child {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox .ifacebox-body,
|
|
[data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox .ifacebox-body {
|
|
font-size: 0.75rem;
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
[data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox .ifacebox-body .cbi-tooltip-container,
|
|
[data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox .ifacebox-body .cbi-tooltip-container {
|
|
font-size: inherit !important;
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
[dir="rtl"] [data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox .ifacebox-body .cbi-tooltip-container .cbi-tooltip,
|
|
[dir="rtl"] [data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox .ifacebox-body .cbi-tooltip-container .cbi-tooltip {
|
|
direction: rtl;
|
|
}
|
|
[data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox > .ifacebox-body:nth-child(2),
|
|
[data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox > .ifacebox-body:nth-child(2) {
|
|
flex-grow: 1;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-status"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox > .ifacebox-body:last-child,
|
|
[data-page="admin-status-overview"] #view div:has(> .ifacebox > .ifacebox-body > img[src*="/icons/port_"]) > .ifacebox > .ifacebox-body:last-child {
|
|
padding: 0.5rem 0.625rem;
|
|
}
|
|
[data-page="admin-status"] .argon-port-traffic,
|
|
[data-page="admin-status-overview"] .argon-port-traffic {
|
|
display: grid;
|
|
gap: 0.375rem;
|
|
margin: 0;
|
|
direction: ltr;
|
|
}
|
|
[data-page="admin-status"] .argon-port-traffic > div,
|
|
[data-page="admin-status-overview"] .argon-port-traffic > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-status"] .argon-port-traffic dt,
|
|
[data-page="admin-status-overview"] .argon-port-traffic dt {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
color: var(--muted-text);
|
|
font-size: 0.6875rem;
|
|
}
|
|
[data-page="admin-status"] .argon-port-traffic dt::before,
|
|
[data-page="admin-status-overview"] .argon-port-traffic dt::before {
|
|
content: "";
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
background-color: currentColor;
|
|
mask: var(--chevron-down-icon) center / contain no-repeat;
|
|
-webkit-mask: var(--chevron-down-icon) center / contain no-repeat;
|
|
}
|
|
[data-page="admin-status"] .argon-port-traffic [data-direction="tx"] dt::before,
|
|
[data-page="admin-status-overview"] .argon-port-traffic [data-direction="tx"] dt::before {
|
|
transform: rotate(180deg);
|
|
}
|
|
[data-page="admin-status"] .argon-port-traffic dd,
|
|
[data-page="admin-status-overview"] .argon-port-traffic dd {
|
|
margin: 0;
|
|
margin-inline-start: auto;
|
|
max-width: 100%;
|
|
color: var(--text-strong);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-status-realtime"] .cbi-section > div:has(> svg),
|
|
[data-page="admin-status-realtime-load"] .cbi-section > div:has(> svg),
|
|
[data-page="admin-status-realtime-bandwidth"] .cbi-section > div:has(> svg),
|
|
[data-page="admin-status-realtime-connections"] .cbi-section > div:has(> svg) {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
[data-page="admin-status-realtime"] #scale,
|
|
[data-page="admin-status-realtime-load"] #scale,
|
|
[data-page="admin-status-realtime-bandwidth"] #scale,
|
|
[data-page="admin-status-realtime-connections"] #scale {
|
|
display: inline-block;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
[data-page="admin-status-realtime"] svg line,
|
|
[data-page="admin-status-realtime-load"] svg line,
|
|
[data-page="admin-status-realtime-bandwidth"] svg line,
|
|
[data-page="admin-status-realtime-connections"] svg line,
|
|
[data-page="admin-status-realtime"] svg polyline,
|
|
[data-page="admin-status-realtime-load"] svg polyline,
|
|
[data-page="admin-status-realtime-bandwidth"] svg polyline,
|
|
[data-page="admin-status-realtime-connections"] svg polyline,
|
|
[data-page="admin-status-realtime"] svg polygon,
|
|
[data-page="admin-status-realtime-load"] svg polygon,
|
|
[data-page="admin-status-realtime-bandwidth"] svg polygon,
|
|
[data-page="admin-status-realtime-connections"] svg polygon,
|
|
[data-page="admin-status-realtime"] svg path,
|
|
[data-page="admin-status-realtime-load"] svg path,
|
|
[data-page="admin-status-realtime-bandwidth"] svg path,
|
|
[data-page="admin-status-realtime-connections"] svg path {
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
[data-page="admin-status-realtime"] .td[id^="lb_"],
|
|
[data-page="admin-status-realtime-load"] .td[id^="lb_"],
|
|
[data-page="admin-status-realtime-bandwidth"] .td[id^="lb_"],
|
|
[data-page="admin-status-realtime-connections"] .td[id^="lb_"],
|
|
[data-page="admin-status-realtime"] .td[id*="_bw_"],
|
|
[data-page="admin-status-realtime-load"] .td[id*="_bw_"],
|
|
[data-page="admin-status-realtime-bandwidth"] .td[id*="_bw_"],
|
|
[data-page="admin-status-realtime-connections"] .td[id*="_bw_"] {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
[data-page="admin-status-realtime"] .td[id*="_bw_"],
|
|
[data-page="admin-status-realtime-load"] .td[id*="_bw_"],
|
|
[data-page="admin-status-realtime-bandwidth"] .td[id*="_bw_"],
|
|
[data-page="admin-status-realtime-connections"] .td[id*="_bw_"] {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-status-realtime"] .table:has(.td[id^="lb_"]) .tr,
|
|
[data-page="admin-status-realtime-load"] .table:has(.td[id^="lb_"]) .tr,
|
|
[data-page="admin-status-realtime-bandwidth"] .table:has(.td[id^="lb_"]) .tr,
|
|
[data-page="admin-status-realtime-connections"] .table:has(.td[id^="lb_"]) .tr,
|
|
[data-page="admin-status-realtime"] .table:has(.td[id*="_bw_"]) .tr,
|
|
[data-page="admin-status-realtime-load"] .table:has(.td[id*="_bw_"]) .tr,
|
|
[data-page="admin-status-realtime-bandwidth"] .table:has(.td[id*="_bw_"]) .tr,
|
|
[data-page="admin-status-realtime-connections"] .table:has(.td[id*="_bw_"]) .tr {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
padding-block: var(--control-gap);
|
|
}
|
|
[data-page="admin-status-realtime"] .table:has(.td[id^="lb_"]) .td,
|
|
[data-page="admin-status-realtime-load"] .table:has(.td[id^="lb_"]) .td,
|
|
[data-page="admin-status-realtime-bandwidth"] .table:has(.td[id^="lb_"]) .td,
|
|
[data-page="admin-status-realtime-connections"] .table:has(.td[id^="lb_"]) .td,
|
|
[data-page="admin-status-realtime"] .table:has(.td[id*="_bw_"]) .td,
|
|
[data-page="admin-status-realtime-load"] .table:has(.td[id*="_bw_"]) .td,
|
|
[data-page="admin-status-realtime-bandwidth"] .table:has(.td[id*="_bw_"]) .td,
|
|
[data-page="admin-status-realtime-connections"] .table:has(.td[id*="_bw_"]) .td {
|
|
display: block;
|
|
min-width: 0;
|
|
padding: 0.25rem var(--section-inset);
|
|
border: 0;
|
|
text-align: start !important;
|
|
}
|
|
[data-page="admin-status-realtime"] .table:has(.td[id^="lb_"]) .td:nth-child(even),
|
|
[data-page="admin-status-realtime-load"] .table:has(.td[id^="lb_"]) .td:nth-child(even),
|
|
[data-page="admin-status-realtime-bandwidth"] .table:has(.td[id^="lb_"]) .td:nth-child(even),
|
|
[data-page="admin-status-realtime-connections"] .table:has(.td[id^="lb_"]) .td:nth-child(even),
|
|
[data-page="admin-status-realtime"] .table:has(.td[id*="_bw_"]) .td:nth-child(even),
|
|
[data-page="admin-status-realtime-load"] .table:has(.td[id*="_bw_"]) .td:nth-child(even),
|
|
[data-page="admin-status-realtime-bandwidth"] .table:has(.td[id*="_bw_"]) .td:nth-child(even),
|
|
[data-page="admin-status-realtime-connections"] .table:has(.td[id*="_bw_"]) .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);
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #settings-row > span {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #settings-row > .filter {
|
|
flex: 1 1 16rem !important;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #settings-row > .right {
|
|
flex: 0 1 auto !important;
|
|
margin-inline-start: auto;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #settings-row button {
|
|
min-height: 2.5rem;
|
|
height: auto;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #filter-connections {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: start;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #connections {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-end-start-radius: var(--radius-card);
|
|
border-end-end-radius: var(--radius-card);
|
|
overflow: hidden;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #connections .th {
|
|
text-align: start !important;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #connections .td {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: start !important;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
[dir="rtl"] [data-page="admin-status-realtime-connections"] #connections .td {
|
|
text-align: end !important;
|
|
}
|
|
[dir="rtl"] [data-page="admin-status-realtime-connections"] #connections .td::before {
|
|
direction: rtl;
|
|
text-align: start;
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-status-realtime-connections"] #connections {
|
|
overflow-x: auto;
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #connections .tr:not(.table-titles):not(.placeholder) {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
}
|
|
[data-page="admin-status-realtime-connections"] #connections .td:nth-child(n + 3) {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
[data-page^="admin-status-realtime"] svg :is(#rx, #udp) {
|
|
--chart-series: var(--chart-series-1);
|
|
}
|
|
[data-page^="admin-status-realtime"] svg :is(#tx, #tcp) {
|
|
--chart-series: var(--chart-series-2);
|
|
}
|
|
[data-page^="admin-status-realtime"] svg :is(#load01, #other) {
|
|
--chart-series: var(--chart-series-3);
|
|
}
|
|
[data-page^="admin-status-realtime"] svg #load05 {
|
|
--chart-series: var(--chart-series-4);
|
|
}
|
|
[data-page^="admin-status-realtime"] svg #load15 {
|
|
--chart-series: var(--chart-series-5);
|
|
}
|
|
[data-page^="admin-status-realtime"] 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;
|
|
}
|
|
[data-page^="admin-status-realtime"] strong:is([style*="solid blue"], [style*="solid #0000ff"], [style*="solid #00f"]) {
|
|
border-bottom-color: var(--chart-series-1) !important;
|
|
}
|
|
[data-page^="admin-status-realtime"] strong:is([style*="solid green"], [style*="solid #008000"]) {
|
|
border-bottom-color: var(--chart-series-2) !important;
|
|
}
|
|
[data-page^="admin-status-realtime"] strong:is([style*="solid red"], [style*="solid #ff0000"], [style*="solid #f00"]) {
|
|
border-bottom-color: var(--chart-series-3) !important;
|
|
}
|
|
[data-page^="admin-status-realtime"] strong:is([style*="solid #ff6600"], [style*="solid #f60"]) {
|
|
border-bottom-color: var(--chart-series-4) !important;
|
|
}
|
|
[data-page^="admin-status-realtime"] strong:is([style*="solid #ffaa00"], [style*="solid #fa0"]) {
|
|
border-bottom-color: var(--chart-series-5) !important;
|
|
}
|
|
[data-page^="admin-status-realtime"] .cbi-section > div:has(> svg) {
|
|
background: var(--surface-color) !important;
|
|
border: 0 !important;
|
|
border-start-start-radius: var(--radius-card);
|
|
border-start-end-radius: var(--radius-card);
|
|
}
|
|
[data-page^="admin-status-realtime"] #view svg text {
|
|
fill: var(--text-strong) !important;
|
|
font-family: inherit !important;
|
|
font-variant-numeric: tabular-nums;
|
|
text-shadow: none !important;
|
|
}
|
|
[data-page^="admin-status-realtime"] #view svg line {
|
|
stroke: var(--border-strong) !important;
|
|
stroke-width: 1px !important;
|
|
}
|
|
[data-page="admin-status-channel_analysis"] [data-tab-title]:not([data-tab-active="true"]) {
|
|
display: block !important;
|
|
visibility: hidden;
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-status-iptables"] .right {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-table,
|
|
[data-page="admin-status-nftables"] .nft-chains {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
gap: var(--section-gap);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-chain {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-chain > h4 {
|
|
margin: 0;
|
|
padding: var(--field-gap) var(--section-inset);
|
|
font-size: 0.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;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-chain > h4:target {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-chain-hook {
|
|
padding: var(--control-gap) var(--section-inset) var(--field-gap);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-chain-hook ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules {
|
|
display: table;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 0.8125rem;
|
|
overflow: visible;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .tr,
|
|
[data-page="admin-status-nftables"] .nft-rules .tr.table-titles {
|
|
display: table-row;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .th,
|
|
[data-page="admin-status-nftables"] .nft-rules .td {
|
|
display: table-cell;
|
|
min-width: 0;
|
|
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);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .th {
|
|
font-weight: 600;
|
|
background: var(--surface-muted);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .td {
|
|
background: var(--surface-color);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules > .tr:nth-child(2n of :has(> .td)) > .td {
|
|
background: var(--row-alt);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .tr:last-child > .td:first-child {
|
|
border-end-start-radius: var(--radius-card);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .tr:last-child > .td:last-child {
|
|
border-end-end-radius: var(--radius-card);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .ifacebadge {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
margin-block: 0.125rem;
|
|
margin-inline: 0 0.125rem;
|
|
padding: 0.25rem 0.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);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules a {
|
|
color: var(--text-strong);
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.15em;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .nft-set,
|
|
[data-page="admin-status-nftables"] .nft-rules .nft-list {
|
|
max-width: 100%;
|
|
vertical-align: baseline;
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: start;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .nft-set-items,
|
|
[data-page="admin-status-nftables"] .nft-rules .nft-list-items {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .nft-counter {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
[dir="rtl"] [data-page="admin-status-nftables"] .nft-rules .cbi-tooltip {
|
|
direction: rtl;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules strong,
|
|
[data-page="admin-status-nftables"] .nft-rules .nft-counter > var {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .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);
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .td > div:has(> span:first-child + span.ifacebadge) > span {
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .td > div:has(> span:first-child + span.ifacebadge) > span:first-child {
|
|
padding-block: 0.25rem;
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
text-align: match-parent;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .td > div:has(> span:first-child + span.ifacebadge) > .ifacebadge {
|
|
justify-self: start;
|
|
margin: 0;
|
|
}
|
|
[data-page="admin-status-nftables"] .nft-rules .td > div:has(> span:first-child + span.ifacebadge) + div {
|
|
margin-block-start: var(--control-gap);
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
[data-page="admin-status-nftables"] .nft-rules .td > div:has(> span:first-child + span.ifacebadge) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
[data-page="admin-status-nftables"] .nft-rules .th,
|
|
[data-page="admin-status-nftables"] .nft-rules .td {
|
|
padding: var(--control-gap) !important;
|
|
}
|
|
}
|
|
[data-page="admin-status-nftables"] .alert-message {
|
|
opacity: 1;
|
|
}
|
|
[data-page="admin-status-nftables"] .alert-message.fade-out {
|
|
opacity: 0;
|
|
}
|
|
[data-page="admin-status-logs"] #content_syslog,
|
|
[data-page="admin-status-logs-syslog"] #content_syslog,
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog {
|
|
min-width: 0;
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--field-gap);
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-status-logs"] #content_syslog > div,
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div,
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div {
|
|
margin-block: 0 !important;
|
|
}
|
|
[data-page="admin-status-logs"] #content_syslog > div:has(> .cbi-button),
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div:has(> .cbi-button),
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div:has(> .cbi-button) {
|
|
padding-block: 0 !important;
|
|
}
|
|
[data-page="admin-status-logs"] #syslog,
|
|
[data-page="admin-status-logs-syslog"] #syslog,
|
|
[data-page="admin-status-logs-dmesg"] #syslog {
|
|
display: block;
|
|
margin: 0;
|
|
border: 1px solid var(--control-border);
|
|
background-color: var(--input-bg);
|
|
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"] #content_syslog > div:has(> input, > select),
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div:has(> input, > select),
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div:has(> input, > select) {
|
|
line-height: 2.5rem;
|
|
margin-block-end: 0 !important;
|
|
}
|
|
[data-page="admin-status-logs"] #content_syslog > div:has(> input, > select) > label,
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div:has(> input, > select) > label,
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div:has(> input, > select) > label,
|
|
[data-page="admin-status-logs"] #content_syslog > div:has(> input, > select) > input,
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div:has(> input, > select) > input,
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div:has(> input, > select) > input,
|
|
[data-page="admin-status-logs"] #content_syslog > div:has(> input, > select) > select,
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div:has(> input, > select) > select,
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div:has(> input, > select) > select {
|
|
vertical-align: middle;
|
|
}
|
|
[data-page="admin-status-logs"] #content_syslog > div:has(> input, > select) > input,
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div:has(> input, > select) > input,
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div:has(> input, > select) > input,
|
|
[data-page="admin-status-logs"] #content_syslog > div:has(> input, > select) > select,
|
|
[data-page="admin-status-logs-syslog"] #content_syslog > div:has(> input, > select) > select,
|
|
[data-page="admin-status-logs-dmesg"] #content_syslog > div:has(> input, > select) > select {
|
|
margin-block: 0 !important;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
#content_syslog > div:has(> #logFacilitySelect),
|
|
#content_syslog > div:has(> #logTextFilter),
|
|
#content_syslog > div:has(> #logFromTime) {
|
|
display: grid;
|
|
grid-template-columns: max-content 1rem max-content minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: var(--control-gap);
|
|
}
|
|
#content_syslog > div:has(> #logFacilitySelect) > label,
|
|
#content_syslog > div:has(> #logTextFilter) > label,
|
|
#content_syslog > div:has(> #logFromTime) > label,
|
|
#content_syslog > div:has(> #logFacilitySelect) > input,
|
|
#content_syslog > div:has(> #logTextFilter) > input,
|
|
#content_syslog > div:has(> #logFromTime) > input,
|
|
#content_syslog > div:has(> #logFacilitySelect) > select,
|
|
#content_syslog > div:has(> #logTextFilter) > select,
|
|
#content_syslog > div:has(> #logFromTime) > select {
|
|
margin: 0 !important;
|
|
}
|
|
#content_syslog > div:has(> #logFacilitySelect) > label,
|
|
#content_syslog > div:has(> #logTextFilter) > label,
|
|
#content_syslog > div:has(> #logFromTime) > label {
|
|
white-space: nowrap;
|
|
}
|
|
#content_syslog > div:has(> #logFacilitySelect) > input:not([type="checkbox"]),
|
|
#content_syslog > div:has(> #logTextFilter) > input:not([type="checkbox"]),
|
|
#content_syslog > div:has(> #logFromTime) > input:not([type="checkbox"]),
|
|
#content_syslog > div:has(> #logFacilitySelect) > select,
|
|
#content_syslog > div:has(> #logTextFilter) > select,
|
|
#content_syslog > div:has(> #logFromTime) > select {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
#content_syslog > div:has(> #logFacilitySelect) > label[for="logMaxRows"],
|
|
#content_syslog > div:has(> #logTextFilter) > label[for="logMaxRows"],
|
|
#content_syslog > div:has(> #logFromTime) > label[for="logMaxRows"] {
|
|
grid-column: 1 / 4;
|
|
}
|
|
#content_syslog > div:has(> #logFacilitySelect) > #logMaxRows,
|
|
#content_syslog > div:has(> #logTextFilter) > #logMaxRows,
|
|
#content_syslog > div:has(> #logFromTime) > #logMaxRows,
|
|
#content_syslog > div:has(> #logFacilitySelect) > #logToTime,
|
|
#content_syslog > div:has(> #logTextFilter) > #logToTime,
|
|
#content_syslog > div:has(> #logFromTime) > #logToTime {
|
|
grid-column: 4;
|
|
}
|
|
#content_syslog > div:has(> #logFromTime) > label[for="logSeveritySelect"] {
|
|
grid-column: 1 / 4;
|
|
}
|
|
#content_syslog > div:has(> #invertSeverity) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
#content_syslog > div:has(> #invertSeverity) > label {
|
|
margin: 0 !important;
|
|
white-space: nowrap;
|
|
}
|
|
#content_syslog > div:has(> #invertSeverity) > select {
|
|
flex: 1;
|
|
min-width: 0;
|
|
width: 0;
|
|
}
|
|
}
|
|
[data-page="admin-services-nlbw-display"] .cbi-section[data-tab="export"] {
|
|
padding: 1.5rem !important;
|
|
}
|
|
[data-page="admin-services-nlbw-display"] .cbi-section > .right {
|
|
margin: 15px 15px 0px 0px;
|
|
}
|
|
[data-page="admin-services-wol"] #cbi-luci-wol-defaults-_info {
|
|
padding-bottom: var(--field-gap);
|
|
line-height: 1.5;
|
|
}
|
|
[data-page="admin-services-wol"] #cbi-luci-wol-defaults-_info > output {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-services-wol"] #cbi-luci-wol-defaults-_info output p {
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-services-wol"] #cbi-luci-wol-defaults-_info .control-group {
|
|
margin-block-start: var(--control-gap);
|
|
}
|
|
[data-page="admin-services-wol"] .cbi-section:has(> #wol-output-text) {
|
|
padding-bottom: var(--field-gap);
|
|
}
|
|
[data-page="admin-services-wol"] #wol-output-text {
|
|
display: block;
|
|
width: calc(100% - var(--section-inset) - var(--section-inset)) !important;
|
|
margin-inline: var(--section-inset);
|
|
resize: vertical;
|
|
}
|
|
[data-page="admin-services-ddns"] #syslog {
|
|
overflow: auto;
|
|
font-size: 12px !important;
|
|
}
|
|
[data-page="admin-services-ttyd"] #maincontent > .container,
|
|
[data-page="admin-services-ttyd-ttyd"] #maincontent > .container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
[data-page="admin-services-ttyd"] #view,
|
|
[data-page="admin-services-ttyd-ttyd"] #view {
|
|
flex: 1;
|
|
}
|
|
[data-page="admin-services-ttyd"] #view iframe,
|
|
[data-page="admin-services-ttyd-ttyd"] #view iframe {
|
|
height: 100%;
|
|
}
|
|
[data-page="admin-docker-overview"] .cbi-section-table,
|
|
[data-page="admin-services-dockerman-overview"] .cbi-section-table {
|
|
table-layout: fixed;
|
|
}
|
|
[data-page="admin-docker-overview"] .cbi-section-table .th,
|
|
[data-page="admin-services-dockerman-overview"] .cbi-section-table .th,
|
|
[data-page="admin-docker-overview"] .cbi-section-table .td,
|
|
[data-page="admin-services-dockerman-overview"] .cbi-section-table .td {
|
|
min-width: 0;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
text-align: start !important;
|
|
vertical-align: top;
|
|
}
|
|
[data-page="admin-docker-overview"] .cbi-section-table .th:first-child,
|
|
[data-page="admin-services-dockerman-overview"] .cbi-section-table .th:first-child {
|
|
width: 30% !important;
|
|
}
|
|
[data-page="admin-services-dockerman-containers"] .td:last-child:has(> div > .cbi-button + .cbi-button) {
|
|
width: 16rem;
|
|
min-width: 16rem;
|
|
white-space: normal;
|
|
text-align: end;
|
|
}
|
|
[data-page="admin-services-dockerman-containers"] .td:last-child:has(> div > .cbi-button + .cbi-button) > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
max-width: 16rem;
|
|
margin-inline-start: auto;
|
|
gap: var(--control-gap);
|
|
}
|
|
[data-page="admin-services-dockerman-containers"] .td:last-child:has(> div > .cbi-button + .cbi-button) > div > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
[data-page="admin-services-dockerman-containers"] .td:last-child:has(> div > .cbi-button + .cbi-button) {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-services-dockerman-containers"] .td:last-child:has(> div > .cbi-button + .cbi-button) > div {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
#cbi-dockerd .cbi-section {
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
}
|
|
#cbi-dockerd .cbi-section.cbi-tblsection {
|
|
padding: 0;
|
|
}
|
|
[data-page="admin-docker"] #docker_apply_overlay,
|
|
[data-page^="admin-docker-"] #docker_apply_overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
padding: var(--page-gutter);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
[data-page="admin-docker"] #docker_apply_overlay > .alert-message,
|
|
[data-page^="admin-docker-"] #docker_apply_overlay > .alert-message {
|
|
position: static;
|
|
inset: auto;
|
|
transform: none;
|
|
width: 100%;
|
|
max-width: 60rem;
|
|
max-height: calc(100vh - 2 * var(--page-gutter));
|
|
max-height: calc(100dvh - 2 * var(--page-gutter));
|
|
min-width: 0;
|
|
margin: auto;
|
|
overflow: auto;
|
|
}
|
|
[data-page="admin-docker"] #docker_apply_overlay > .alert-message > span,
|
|
[data-page^="admin-docker-"] #docker_apply_overlay > .alert-message > span {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-docker"].apply-overlay-active #docker_apply_overlay,
|
|
[data-page^="admin-docker-"].apply-overlay-active #docker_apply_overlay {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#cbi-smartdns #service_status {
|
|
padding: 16px;
|
|
}
|
|
#cbi-smartdns .cbi-section-node {
|
|
padding: 16px;
|
|
}
|
|
#cbi-docker .cbi-section .cbi-section-node {
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
}
|
|
[data-page="admin-services-npc"] div[id="cbid.npc.config.vkey"] {
|
|
white-space: normal;
|
|
}
|
|
[data-page="admin-services-npc"] div[id="cbid.npc.config.vkey"] input[id="widget.cbid.npc.config.vkey"][type="password"] {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
[data-page="admin-services-npc"] div[id="cbid.npc.config.vkey"] .cbi-button {
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
[data-page="admin-services-npc"] div[id^="cbid.npc."][id$=".server_addr"]:not([id="cbid.npc.config.server_addr"]) + br,
|
|
[data-page="admin-services-npc"] div[id^="cbid.npc."][id$=".vkey"]:not([id="cbid.npc.config.vkey"]) + br,
|
|
[data-page="admin-services-npc"] div[id^="cbid.npc."][id$=".protocol"]:not([id="cbid.npc.config.protocol"]) + br,
|
|
[data-page="admin-services-npc"] div[id^="cbid.npc."][id$=".dns"]:not([id="cbid.npc.config.dns"]) + br {
|
|
display: none;
|
|
}
|
|
[data-page="admin-services-npc"] div.cbi-value.nowrap {
|
|
white-space: normal;
|
|
}
|
|
[data-page^="admin-services-openclash"] {
|
|
--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(--oc-accent);
|
|
}
|
|
[data-page^="admin-services-openclash"] img[src$="arrow-clockwise-light.svg"],
|
|
[data-page^="admin-services-openclash"] img[src$="wrench-light.svg"],
|
|
[data-page^="admin-services-openclash"] img[src$="eye-light.svg"] {
|
|
filter: var(--image-filter);
|
|
}
|
|
@supports (color: color-mix(in srgb, red, blue)) {
|
|
[data-page^="admin-services-openclash"] {
|
|
--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);
|
|
}
|
|
}
|
|
[data-page^="admin-services-openclash"] .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-scrollbar) !important;
|
|
--scrollbar-thumb-hover: var(--oc-accent-hover) !important;
|
|
border-radius: var(--radius-card);
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .developer-container,
|
|
[data-page^="admin-services-openclash"] .oc .subscription-info-container {
|
|
background: transparent !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .announcement-card {
|
|
width: auto !important;
|
|
margin: 10px !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .config-upload-content {
|
|
background: var(--oc-surface) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] textarea::-webkit-scrollbar-thumb,
|
|
[data-page^="admin-services-openclash"] .oc::-webkit-scrollbar-thumb,
|
|
[data-page^="admin-services-openclash"] .oc *::-webkit-scrollbar-thumb,
|
|
[data-page^="admin-services-openclash"] .oc .cm-editor .cm-scroller::-webkit-scrollbar-thumb,
|
|
[data-page^="admin-services-openclash"] .oc #debug-rendered::-webkit-scrollbar-thumb,
|
|
[data-page^="admin-services-openclash"] .oc #debug-rendered pre::-webkit-scrollbar-thumb {
|
|
background-color: var(--oc-scrollbar) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] textarea::-webkit-scrollbar-thumb:hover,
|
|
[data-page^="admin-services-openclash"] .oc::-webkit-scrollbar-thumb:hover,
|
|
[data-page^="admin-services-openclash"] .oc *::-webkit-scrollbar-thumb:hover,
|
|
[data-page^="admin-services-openclash"] .oc .cm-editor .cm-scroller::-webkit-scrollbar-thumb:hover,
|
|
[data-page^="admin-services-openclash"] .oc #debug-rendered::-webkit-scrollbar-thumb:hover,
|
|
[data-page^="admin-services-openclash"] .oc #debug-rendered pre::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--oc-accent-hover) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-add,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-apply,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-edit,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-link,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-positive,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-reload,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-save,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-action,
|
|
[data-page^="admin-services-openclash"] input.cbi-input-apply,
|
|
[data-page^="admin-services-openclash"] input.cbi-input-reload,
|
|
[data-page^="admin-services-openclash"] input.cbi-input-save,
|
|
[data-page^="admin-services-openclash"] .btn.primary {
|
|
color: var(--accent-text) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-remove,
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-negative,
|
|
[data-page^="admin-services-openclash"] input.cbi-input-remove {
|
|
color: var(--text-on-accent) !important;
|
|
border-color: var(--danger-bg) !important;
|
|
background: var(--danger-bg) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-reset {
|
|
color: var(--text-on-accent) !important;
|
|
border-color: var(--warning-action-bg) !important;
|
|
background: var(--warning-action-bg) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-button.cbi-button-find,
|
|
[data-page^="admin-services-openclash"] input.cbi-input-find {
|
|
color: var(--text-on-accent) !important;
|
|
border-color: var(--oc-neutral) !important;
|
|
background-color: var(--oc-neutral) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-button-up,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-button-down {
|
|
border-color: var(--oc-neutral) !important;
|
|
background-color: var(--oc-control-bg) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-button-up:not(:disabled):hover,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-button-up:not(:disabled):focus,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-button-down:not(:disabled):hover,
|
|
[data-page^="admin-services-openclash"] #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;
|
|
}
|
|
[data-page^="admin-services-openclash"] input[type="checkbox"] {
|
|
border-color: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] input[type="checkbox"]:checked {
|
|
border-color: var(--oc-accent) !important;
|
|
background-color: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] input[type="text"],
|
|
[data-page^="admin-services-openclash"] input[type="password"],
|
|
[data-page^="admin-services-openclash"] input[type="number"],
|
|
[data-page^="admin-services-openclash"] input[type="search"],
|
|
[data-page^="admin-services-openclash"] input[type="url"],
|
|
[data-page^="admin-services-openclash"] select,
|
|
[data-page^="admin-services-openclash"] textarea,
|
|
[data-page^="admin-services-openclash"] .cbi-dropdown,
|
|
[data-page^="admin-services-openclash"] .oc .oc-input-textarea,
|
|
[data-page^="admin-services-openclash"] .oc .sub-info-url-form-textarea,
|
|
[data-page^="admin-services-openclash"] .oc .select-class,
|
|
[data-page^="admin-services-openclash"] .oc .custom-option-input {
|
|
color: var(--oc-text) !important;
|
|
border-color: var(--control-border) !important;
|
|
background-color: var(--oc-control-bg) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] input[type="text"]:focus,
|
|
[data-page^="admin-services-openclash"] input[type="password"]:focus,
|
|
[data-page^="admin-services-openclash"] input[type="number"]:focus,
|
|
[data-page^="admin-services-openclash"] input[type="search"]:focus,
|
|
[data-page^="admin-services-openclash"] input[type="url"]:focus,
|
|
[data-page^="admin-services-openclash"] select:focus,
|
|
[data-page^="admin-services-openclash"] textarea:focus,
|
|
[data-page^="admin-services-openclash"] .cbi-dropdown:focus,
|
|
[data-page^="admin-services-openclash"] .cbi-dropdown[open],
|
|
[data-page^="admin-services-openclash"] .oc .oc-input-textarea:focus,
|
|
[data-page^="admin-services-openclash"] .oc .sub-info-url-form-textarea:focus,
|
|
[data-page^="admin-services-openclash"] .oc .select-class:focus,
|
|
[data-page^="admin-services-openclash"] .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;
|
|
}
|
|
[data-page^="admin-services-openclash"] .CodeMirror,
|
|
[data-page^="admin-services-openclash"] .oc .cm-editor {
|
|
color: var(--oc-text) !important;
|
|
border: 1px solid var(--oc-border) !important;
|
|
background: var(--oc-control-bg) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .CodeMirror-gutters,
|
|
[data-page^="admin-services-openclash"] .oc .cm-gutters {
|
|
border-color: var(--oc-border) !important;
|
|
background: var(--oc-surface-muted) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .CodeMirror.CodeMirror-focused,
|
|
[data-page^="admin-services-openclash"] .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;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .radio-button input[type="radio"]:checked + label,
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.cbi-tabmenu > li.cbi-tab,
|
|
[data-page^="admin-services-openclash"] .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;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .radio-button input[type="radio"]:checked + label {
|
|
box-shadow: 0 1px 2px var(--oc-accent-a10) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .radio-button label:hover,
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.cbi-tabmenu > li:not(.cbi-tab):hover,
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.cbi-tabmenu > li:not(.cbi-tab):focus,
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.oc-tabmenu > li:not(.oc-tab):hover,
|
|
[data-page^="admin-services-openclash"] .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;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.cbi-tabmenu > li:not(.cbi-tab):hover > a,
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.cbi-tabmenu > li:not(.cbi-tab):focus > a,
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.oc-tabmenu > li:not(.oc-tab):hover > a,
|
|
[data-page^="admin-services-openclash"] .oc #tab-header > ul.oc-tabmenu > li:not(.oc-tab):focus > a {
|
|
color: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .card .general .btn:hover,
|
|
[data-page^="admin-services-openclash"] .oc #addCustomOption:hover {
|
|
background: var(--oc-accent-hover) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .help-link:hover {
|
|
background: var(--oc-accent-a10) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .select-option[data-value="custom"] {
|
|
border-color: var(--oc-accent-a20) !important;
|
|
background: var(--oc-accent-a10) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .select-option[data-value="custom"]:hover {
|
|
background: var(--oc-accent-a20) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .announcement-banner,
|
|
[data-page^="admin-services-openclash"] .oc .oix-announcement {
|
|
background: linear-gradient(275deg, var(--oc-accent), var(--oc-accent-strong)) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .announcement-banner::before,
|
|
[data-page^="admin-services-openclash"] .oc .oix-announcement::before {
|
|
background: var(--oc-accent-strong) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc #mode-icon rect[fill="#2F88FF"] {
|
|
fill: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .sub-card:hover,
|
|
[data-page^="admin-services-openclash"] .oc .myip-ip-item:hover,
|
|
[data-page^="admin-services-openclash"] .oc .myip-check-item:hover,
|
|
[data-page^="admin-services-openclash"] .oc .myip-card-item:hover,
|
|
[data-page^="admin-services-openclash"] .oc .card:hover,
|
|
[data-page^="admin-services-openclash"] .oc .oix-header:hover,
|
|
[data-page^="admin-services-openclash"] .oc .oix-card:hover,
|
|
[data-page^="admin-services-openclash"] .oc .config-upload-btn-large:hover {
|
|
transform: none !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] b.oc-txt-good,
|
|
[data-page^="admin-services-openclash"] b[style*="color:green"],
|
|
[data-page^="admin-services-openclash"] b[style*="color: green"],
|
|
[data-page^="admin-services-openclash"] b[color="green"] {
|
|
color: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] font[style*="color:green"],
|
|
[data-page^="admin-services-openclash"] font[style*="color: green"],
|
|
[data-page^="admin-services-openclash"] font[color="green"] {
|
|
color: var(--success) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] b[style*="color:red"],
|
|
[data-page^="admin-services-openclash"] b[style*="color: red"],
|
|
[data-page^="admin-services-openclash"] b[color="red"],
|
|
[data-page^="admin-services-openclash"] font[style*="color:red"],
|
|
[data-page^="admin-services-openclash"] font[style*="color: red"],
|
|
[data-page^="admin-services-openclash"] font[color="red"] {
|
|
color: var(--danger) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .tabs > #tool_label {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
vertical-align: middle;
|
|
}
|
|
[data-page^="admin-services-openclash"] .tabs > #tool_label .tool_label_span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-section-node-tabbed > .cbi-tabcontainer {
|
|
gap: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-section-node-tabbed > .cbi-tabcontainer > .cbi-value {
|
|
padding-top: 0.4375rem;
|
|
padding-bottom: 0.4375rem;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-settings"] [id="container.openclash.config.version_update"] {
|
|
padding-inline: var(--section-inset);
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-settings"] [id="container.openclash.config.version_update"] > .oc {
|
|
border-radius: 0;
|
|
overflow: visible;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-settings"] [id="container.openclash.config.version_update"] #selectPopup.select-popup-tab {
|
|
border: 0;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-config"] .cbi-map > .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-config-subscribe"] .cbi-map > .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-custom-dns-edit"] .cbi-map > .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-config-subscribe-edit"] .cbi-map > .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-groups-config"] .cbi-map > .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-proxy-provider-config"] .cbi-map > .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-servers-config"] .cbi-map > .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-openclash"][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"][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;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-config-subscribe-edit"] [id^="cbi-openclash-"][id$="-de_ex_keyword"] > .cbi-value-field > .cbi-dropdown[multiple] {
|
|
max-width: 100%;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash > fieldset {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash > fieldset > table > tbody > tr > td {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash > fieldset .main-card {
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0 10px 10px 10px;
|
|
background: transparent;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash > fieldset .myip-main-card {
|
|
margin: 0;
|
|
padding: 10px;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash > fieldset .myip-main-card .myip-section-title {
|
|
margin: 0;
|
|
border-width: 1px;
|
|
}
|
|
[data-page^="admin-services-openclash"] .sub-card .card-title {
|
|
margin-top: 5px;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .main-cards-container {
|
|
margin: 0 !important;
|
|
gap: 0 !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .config-file-bottom {
|
|
margin-bottom: 5px;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .config-file-bottom .card-actions {
|
|
margin-bottom: 2px !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .card-content {
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .card-controls {
|
|
align-self: center;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .plugin-toggle-container {
|
|
margin-left: inherit !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .oc .core-status-toggle {
|
|
flex: 0 !important;
|
|
min-width: auto !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-tabmenu > li {
|
|
border-right: none !important;
|
|
margin: 0 0.4rem 0 0 !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-tabmenu > li:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-section-table-row,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-rowstyle-1,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-rowstyle-2,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash .cbi-tabcontainer > .cbi-value:nth-of-type(2n),
|
|
[data-page^="admin-services-openclash"] #cbi-openclash table > tbody > tr:nth-of-type(2n) {
|
|
background: var(--oc-surface) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] {
|
|
border-bottom-color: var(--oc-border) !important;
|
|
background: var(--oc-surface) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu {
|
|
background: var(--oc-surface) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li {
|
|
color: var(--oc-text-muted) !important;
|
|
border-color: var(--oc-border) !important;
|
|
background: var(--oc-surface) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li.cbi-tab {
|
|
color: var(--accent-text) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li.cbi-tab > a {
|
|
color: var(--accent-text) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li:not(.cbi-tab):hover,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li:not(.cbi-tab):focus {
|
|
color: var(--oc-accent) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent-a10) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li:not(.cbi-tab):hover > a,
|
|
[data-page^="admin-services-openclash"] #cbi-openclash [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li:not(.cbi-tab):focus > a {
|
|
color: var(--oc-accent) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] [id^="tab-header-openclash-"] > ul.cbi-tabmenu > li {
|
|
margin: 0 !important;
|
|
border-right: 1px solid var(--oc-border) !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] [id^="tab-header-openclash-"] + [id="tab-content"] .td.cbi-section-table-cell > p {
|
|
padding: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"] #tab-content .dom {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-log"] #tab.oc {
|
|
height: auto;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-log"] #tab.oc > #tab-header {
|
|
padding: var(--field-gap) 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-log"] #tab.oc > #tab-header > ul.oc-tabmenu {
|
|
background: transparent;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-log"] #tab.oc + .oc {
|
|
border-radius: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-log"] #tab-content > .dom {
|
|
padding: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page="admin-services-openclash-log"] .oc .select-popup-footer.log-footer {
|
|
margin: 0;
|
|
padding: var(--field-gap) 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash-dns_servers .cbi-section-table-row > .cbi-section-table-cell:last-child {
|
|
min-width: 7.25rem;
|
|
white-space: nowrap;
|
|
}
|
|
[data-page^="admin-services-openclash"] #cbi-openclash-dns_servers .cbi-section-table-row > .cbi-section-table-cell:last-child > .cbi-button {
|
|
margin: 0 0.125rem !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-input-file {
|
|
padding: 0.2813rem;
|
|
width: 15rem !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] [id="container.openclash.config.debug"] fieldset {
|
|
border: none !important;
|
|
padding: 1rem !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] #diag-rc-output > pre,
|
|
[data-page^="admin-services-openclash"] #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;
|
|
}
|
|
[data-page^="admin-services-openclash"] #debug-rc-output > textarea {
|
|
font-family: 'Google Sans' !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .CodeMirror,
|
|
[data-page^="admin-services-openclash"] .cm-editor {
|
|
font-size: inherit;
|
|
font-family: 'Google Sans' !important;
|
|
}
|
|
[data-page^="admin-services-openclash"] .cbi-button-up,
|
|
[data-page^="admin-services-openclash"] .cbi-button-down {
|
|
padding: 0.8rem 1.5rem;
|
|
font-size: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"] select#CORE_VERSION,
|
|
[data-page^="admin-services-openclash"] select#RELEASE_BRANCH {
|
|
width: auto;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-config-subscribe-edit"] [id^="cbi-openclash-"][id$="-de_ex_keyword"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-config-subscribe-edit"] [id^="cbi-openclash-"][id$="-de_ex_keyword"] > label.cbi-value-title {
|
|
display: block;
|
|
float: none;
|
|
width: 100%;
|
|
padding-right: 0;
|
|
text-align: left;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-config-subscribe-edit"] [id^="cbi-openclash-"][id$="-de_ex_keyword"] > .cbi-value-field {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
[data-page^="admin-services-openclash"][data-page^="admin-services-openclash-config-subscribe-edit"] [id^="cbi-openclash-"][id$="-de_ex_keyword"] > .cbi-value-field > .cbi-dropdown[multiple] {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display {
|
|
display: block;
|
|
padding: var(--field-gap) var(--section-inset);
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
overflow-x: auto;
|
|
}
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display {
|
|
display: block;
|
|
}
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display:has(> table),
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display:has(> table) {
|
|
overflow-x: auto;
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display table,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display table,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display table,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display table {
|
|
display: table;
|
|
line-height: normal;
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display table > thead,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display table > thead,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display table > thead,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display table > thead {
|
|
display: table-header-group;
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display table > tbody,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display table > tbody,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display table > tbody,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display table > tbody {
|
|
display: table-row-group;
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display table tr,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display table tr,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display table tr,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display table tr {
|
|
display: table-row;
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display table th,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display table th,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display table th,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display table th,
|
|
[data-page="admin-services-tailscale"] #service_status_display table td,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display table td,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display table td,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display table td {
|
|
display: table-cell;
|
|
padding: 1.1em 1.25rem;
|
|
border-top: var(--table-border);
|
|
line-height: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display table th,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display table th,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display table th,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display table th {
|
|
text-align: center !important;
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display tr + tr,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display tr + tr,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display tr:has(> td),
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display tr:has(> td) {
|
|
background-color: var(--row-color);
|
|
}
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display tr:nth-child(2n of :has(> td)),
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display tr:nth-child(2n of :has(> td)) {
|
|
background-color: var(--row-alt);
|
|
}
|
|
[data-page="admin-services-tailscale"] #service_status_display tr:first-child > td,
|
|
[data-page="admin-vpn-tailscale"] #service_status_display tr:first-child > td,
|
|
[data-page="admin-services-tailscale"] #tailscale_devices_display :is(.cbi-table-header, .cbi-section-table-titles) > th,
|
|
[data-page="admin-vpn-tailscale"] #tailscale_devices_display :is(.cbi-table-header, .cbi-section-table-titles) > th {
|
|
border-top: 0;
|
|
background-color: var(--surface-muted);
|
|
line-height: 1.3rem;
|
|
}
|
|
[data-page="admin-vpn-passwall"] h4 {
|
|
background: transparent;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)),
|
|
[data-page^="admin-vpn-passwall-"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)),
|
|
[data-page="admin-services-passwall"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)),
|
|
[data-page^="admin-services-passwall-"] .cbi-section > .cbi-section-node:not(.cbi-section-node-tabbed):where(:has(> .cbi-value, > [id] > .cbi-value)) {
|
|
padding-block: var(--field-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-vpn-passwall-"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page="admin-services-passwall"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed),
|
|
[data-page^="admin-services-passwall-"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-section-node:not(.cbi-section-node-tabbed) {
|
|
padding-block-start: 0;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-section > .cbi-value,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-section > .cbi-value,
|
|
[data-page="admin-services-passwall"] .cbi-section > .cbi-value,
|
|
[data-page^="admin-services-passwall-"] .cbi-section > .cbi-value {
|
|
padding-block: var(--field-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-services-passwall"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page^="admin-services-passwall-"] .cbi-section > .cbi-value ~ .cbi-value,
|
|
[data-page="admin-vpn-passwall"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value,
|
|
[data-page="admin-services-passwall"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value,
|
|
[data-page^="admin-services-passwall-"] .cbi-section > .cbi-section-descr:not(:empty) ~ .cbi-value {
|
|
padding-block-start: 0;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-section > .cbi-section-create,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-section > .cbi-section-create,
|
|
[data-page="admin-services-passwall"] .cbi-section > .cbi-section-create,
|
|
[data-page^="admin-services-passwall-"] .cbi-section > .cbi-section-create {
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-container,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-container,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-container,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-container {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--control-gap);
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
white-space: normal;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-container > .node-actions,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-container > .node-actions,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-container > .node-actions,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-container > .node-actions {
|
|
margin: 0 !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-display,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-display,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-display,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-display {
|
|
display: inline-flex;
|
|
flex: 0 1 var(--form-control-min-width);
|
|
align-items: center;
|
|
gap: var(--control-gap);
|
|
width: var(--form-control-min-width) !important;
|
|
min-width: 0 !important;
|
|
max-width: 100%;
|
|
height: 2.5rem !important;
|
|
min-height: 2.5rem !important;
|
|
margin: 0 !important;
|
|
padding: 0.5rem 0.75rem !important;
|
|
line-height: 1.5rem !important;
|
|
border: 1px solid var(--control-border) !important;
|
|
border-radius: var(--radius-control) !important;
|
|
background-color: var(--select-bg) !important;
|
|
color: var(--control-text) !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-display:focus,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-display:focus,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-display:focus,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-display:focus {
|
|
--control-border: var(--control-focus);
|
|
outline: 0;
|
|
box-shadow: var(--control-focus-shadow);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-label,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-label,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-label,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-label {
|
|
flex: 1 1 auto;
|
|
width: auto;
|
|
min-width: 0;
|
|
text-align: start;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-arrow-down,
|
|
[data-page^="admin-vpn-passwall-"] .lv-arrow-down,
|
|
[data-page="admin-services-passwall"] .lv-arrow-down,
|
|
[data-page^="admin-services-passwall-"] .lv-arrow-down,
|
|
[data-page="admin-vpn-passwall"] .lv-arrow-down-small,
|
|
[data-page^="admin-vpn-passwall-"] .lv-arrow-down-small,
|
|
[data-page="admin-services-passwall"] .lv-arrow-down-small,
|
|
[data-page^="admin-services-passwall-"] .lv-arrow-down-small,
|
|
[data-page="admin-vpn-passwall"] .lv-arrow-right,
|
|
[data-page^="admin-vpn-passwall-"] .lv-arrow-right,
|
|
[data-page="admin-services-passwall"] .lv-arrow-right,
|
|
[data-page^="admin-services-passwall-"] .lv-arrow-right {
|
|
flex: 0 0 1rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0;
|
|
border: 0;
|
|
background-color: currentColor;
|
|
-webkit-mask: var(--dropdown-arrow-icon) center / contain no-repeat;
|
|
mask: var(--dropdown-arrow-icon) center / contain no-repeat;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-arrow-right,
|
|
[data-page^="admin-vpn-passwall-"] .lv-arrow-right,
|
|
[data-page="admin-services-passwall"] .lv-arrow-right,
|
|
[data-page^="admin-services-passwall-"] .lv-arrow-right {
|
|
rotate: -90deg;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel {
|
|
max-height: min(50vh, 18rem) !important;
|
|
line-height: 1.5 !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
border-radius: var(--radius-panel) !important;
|
|
background-color: var(--surface-panel) !important;
|
|
color: var(--dropdown-text) !important;
|
|
box-shadow: var(--dropdown-shadow);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel > div:first-child,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel > div:first-child,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel > div:first-child,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel > div:first-child {
|
|
border-color: var(--border-color) !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel .lv-dropdown-search,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel .lv-dropdown-search,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel .lv-dropdown-search,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel .lv-dropdown-search {
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--control-border);
|
|
border-radius: var(--radius-control);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key],
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key],
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key],
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key] {
|
|
min-height: 2.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--radius-small);
|
|
background-color: transparent;
|
|
color: inherit;
|
|
text-align: start !important;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
transition: none;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected,
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected:hover,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected:hover,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected:hover,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key].is-selected:hover {
|
|
background-color: var(--dropdown-selected-bg) !important;
|
|
color: var(--dropdown-selected-text) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
@media (hover: hover) {
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key]:not(.is-selected):hover,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key]:not(.is-selected):hover,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key]:not(.is-selected):hover,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel.cbi-listvalue-panel li[data-key]:not(.is-selected):hover {
|
|
background-color: var(--dropdown-hover-bg);
|
|
}
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel .lv-item-label,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel .lv-item-label,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel .lv-item-label,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel .lv-item-label {
|
|
margin: 0 !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel .lv-group-title,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel .lv-group-title,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel .lv-group-title,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel .lv-group-title {
|
|
gap: var(--control-gap);
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--radius-small);
|
|
line-height: 1.5;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel .lv-group-title > b,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel .lv-group-title > b,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel .lv-group-title > b,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel .lv-group-title > b,
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel .lv-group-title > span,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel .lv-group-title > span,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel .lv-group-title > span,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel .lv-group-title > span {
|
|
margin: 0 !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel .lv-group-title > span[id^="group-count-"],
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel .lv-group-title > span[id^="group-count-"],
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel .lv-group-title > span[id^="group-count-"],
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel .lv-group-title > span[id^="group-count-"] {
|
|
margin-inline-start: auto !important;
|
|
color: var(--muted-text) !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .lv-dropdown-panel .lv-group-list,
|
|
[data-page^="admin-vpn-passwall-"] .lv-dropdown-panel .lv-group-list,
|
|
[data-page="admin-services-passwall"] .lv-dropdown-panel .lv-group-list,
|
|
[data-page^="admin-services-passwall-"] .lv-dropdown-panel .lv-group-list {
|
|
margin: var(--control-gap) 0 0;
|
|
padding-inline-start: var(--control-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"]:has(#maincontent) .lv-dropdown-panel .lv-group-title,
|
|
[data-page^="admin-vpn-passwall-"]:has(#maincontent) .lv-dropdown-panel .lv-group-title,
|
|
[data-page="admin-services-passwall"]:has(#maincontent) .lv-dropdown-panel .lv-group-title,
|
|
[data-page^="admin-services-passwall-"]:has(#maincontent) .lv-dropdown-panel .lv-group-title {
|
|
background-color: var(--surface-active) !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field > .share-toolbar,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field > .share-toolbar,
|
|
[data-page="admin-services-passwall"] .cbi-value-field > .share-toolbar,
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field > .share-toolbar {
|
|
padding-block: 0;
|
|
}
|
|
[data-page="admin-vpn-passwall"] #_passwall_status_fieldset,
|
|
[data-page^="admin-vpn-passwall-"] #_passwall_status_fieldset,
|
|
[data-page="admin-services-passwall"] #_passwall_status_fieldset,
|
|
[data-page^="admin-services-passwall-"] #_passwall_status_fieldset {
|
|
padding-block: var(--control-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"] #_passwall_status_fieldset .status .block,
|
|
[data-page^="admin-vpn-passwall-"] #_passwall_status_fieldset .status .block,
|
|
[data-page="admin-services-passwall"] #_passwall_status_fieldset .status .block,
|
|
[data-page^="admin-services-passwall-"] #_passwall_status_fieldset .status .block {
|
|
margin-block: var(--control-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"] #_log_fieldset,
|
|
[data-page^="admin-vpn-passwall-"] #_log_fieldset,
|
|
[data-page="admin-services-passwall"] #_log_fieldset,
|
|
[data-page^="admin-services-passwall-"] #_log_fieldset {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--field-gap);
|
|
padding: var(--field-gap) var(--section-inset);
|
|
}
|
|
[data-page="admin-vpn-passwall"] #_log_fieldset > .cbi-button,
|
|
[data-page^="admin-vpn-passwall-"] #_log_fieldset > .cbi-button,
|
|
[data-page="admin-services-passwall"] #_log_fieldset > .cbi-button,
|
|
[data-page^="admin-services-passwall-"] #_log_fieldset > .cbi-button {
|
|
align-self: flex-start;
|
|
}
|
|
[data-page="admin-vpn-passwall"] #_log_fieldset > textarea,
|
|
[data-page^="admin-vpn-passwall-"] #_log_fieldset > textarea,
|
|
[data-page="admin-services-passwall"] #_log_fieldset > textarea,
|
|
[data-page^="admin-services-passwall-"] #_log_fieldset > textarea {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin: 0 !important;
|
|
}
|
|
[data-page="admin-vpn-passwall"] #app_version,
|
|
[data-page^="admin-vpn-passwall-"] #app_version,
|
|
[data-page="admin-services-passwall"] #app_version,
|
|
[data-page^="admin-services-passwall-"] #app_version {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--field-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]),
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]),
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]),
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 10rem) max-content max-content minmax(0, 1fr);
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: var(--control-gap) var(--action-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > span:first-child,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span:first-child,
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > span:first-child,
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span:first-child {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
min-width: 0;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app],
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app],
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app],
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app] {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
justify-self: start;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"],
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"],
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"],
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"] {
|
|
grid-column: 3;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"],
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"],
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"],
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"] {
|
|
grid-column: 4;
|
|
grid-row: 1;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
@container (max-width: 40rem) {
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]),
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]),
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]),
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: var(--control-gap) var(--action-gap);
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > span:first-child,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span:first-child,
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > span:first-child,
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span:first-child {
|
|
flex: 0 0 100%;
|
|
min-width: 0;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app],
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app],
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app],
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app] {
|
|
flex: 0 0 auto;
|
|
min-width: max-content;
|
|
max-width: 100%;
|
|
grid-column: auto;
|
|
grid-row: auto;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"],
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"],
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"],
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > input[data-update-app][id$="-force_btn"] {
|
|
grid-column: auto;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"],
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"],
|
|
[data-page="admin-services-passwall"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"],
|
|
[data-page^="admin-services-passwall-"] .cbi-value-field:has(> input[data-update-app]) > span[id$="-detail"] {
|
|
flex: 1 1 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
grid-column: auto;
|
|
grid-row: auto;
|
|
}
|
|
[data-page="admin-vpn-passwall"] .cbi-value:has(> .cbi-value-field > .share-toolbar) > .cbi-value-title,
|
|
[data-page^="admin-vpn-passwall-"] .cbi-value:has(> .cbi-value-field > .share-toolbar) > .cbi-value-title,
|
|
[data-page="admin-services-passwall"] .cbi-value:has(> .cbi-value-field > .share-toolbar) > .cbi-value-title,
|
|
[data-page^="admin-services-passwall-"] .cbi-value:has(> .cbi-value-field > .share-toolbar) > .cbi-value-title {
|
|
display: none;
|
|
}
|
|
}
|
|
[data-page^="admin-vpn-passwall2"] .tr,
|
|
[data-page^="admin-services-passwall2"] .tr,
|
|
[data-page^="admin-vpn-passwall2"] .td,
|
|
[data-page^="admin-services-passwall2"] .td,
|
|
[data-page^="admin-vpn-passwall2"] .th,
|
|
[data-page^="admin-services-passwall2"] .th,
|
|
[data-page^="admin-vpn-passwall2"] .cbi-section-table-row,
|
|
[data-page^="admin-services-passwall2"] .cbi-section-table-row,
|
|
[data-page^="admin-vpn-passwall2"] #cbi-passwall2-socks,
|
|
[data-page^="admin-services-passwall2"] #cbi-passwall2-socks,
|
|
[data-page^="admin-vpn-passwall2"] #cbi-passwall2-socks *,
|
|
[data-page^="admin-services-passwall2"] #cbi-passwall2-socks * {
|
|
overflow: visible !important;
|
|
max-height: none !important;
|
|
transform: none !important;
|
|
filter: none !important;
|
|
contain: none !important;
|
|
clip-path: none !important;
|
|
}
|
|
/* openvpn bug fix */
|
|
.OpenVPN a {
|
|
line-height: initial !important;
|
|
}
|
|
[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);
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .et-quick-actions,
|
|
[data-page^="admin-vpn-easytier"] #maincontent .et-status-card,
|
|
[data-page^="admin-vpn-easytier"] #maincontent .et-conninfo-container,
|
|
[data-page^="admin-vpn-easytier"] #maincontent .web-card,
|
|
[data-page^="admin-vpn-easytier"] #maincontent .upload-card,
|
|
[data-page^="admin-vpn-easytier"] #maincontent .log-container {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--section-shadow);
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .et-tabs-container {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overscroll-behavior-inline: contain;
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .et-tab {
|
|
flex: 0 0 auto;
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .et-refresh-btn {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: var(--accent-text);
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .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));
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .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;
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .modal-content {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
border-radius: var(--radius-dialog);
|
|
}
|
|
[data-page^="admin-vpn-easytier"] #maincontent .modal-buttons {
|
|
flex-wrap: wrap;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-page^="admin-vpn-easytier"] #maincontent *,
|
|
[data-page^="admin-vpn-easytier"] #maincontent *::before,
|
|
[data-page^="admin-vpn-easytier"] #maincontent *::after {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
.node-services-vssr .block,
|
|
.node-services-vssr .cbi-section-table-row {
|
|
color: var(--text-strong);
|
|
background-color: var(--plugin-card-bg) !important;
|
|
box-shadow: var(--section-shadow);
|
|
}
|
|
.node-services-vssr .block h4,
|
|
.node-services-vssr .ssr-button {
|
|
color: var(--text-strong) !important;
|
|
}
|
|
.node-services-vssr .status-bar {
|
|
color: var(--text-strong);
|
|
background-color: var(--surface-color);
|
|
box-shadow: var(--section-shadow);
|
|
}
|
|
.node-services-vssr .cbi-section-table-row.fast {
|
|
color: var(--accent-text);
|
|
background: var(--primary) !important;
|
|
}
|
|
.node-services-vssr .incon:nth-child(2) {
|
|
border-right: 1px solid var(--separator-color);
|
|
}
|
|
/* wireless overview */
|
|
#cbi-wireless > #wifi_assoclist_table > .tr {
|
|
box-shadow: inset 1px -1px 0 var(--border-subtle), inset -1px -1px 0 var(--border-subtle);
|
|
}
|
|
#cbi-wireless > #wifi_assoclist_table > .tr.placeholder > .td {
|
|
right: 2rem;
|
|
bottom: 2rem;
|
|
left: 2rem;
|
|
border-top: thin solid var(--border-subtle) !important;
|
|
}
|
|
#cbi-wireless > #wifi_assoclist_table > .tr.table-titles {
|
|
box-shadow: inset 1px 0 0 var(--border-subtle), inset -1px 0 0 var(--border-subtle);
|
|
}
|
|
#cbi-wireless > #wifi_assoclist_table > .tr.table-titles > .th {
|
|
border-bottom: thin solid var(--border-subtle);
|
|
box-shadow: 0 -1px 0 0 var(--border-subtle);
|
|
}
|
|
#wifi_assoclist_table .ifacebadge[data-ssid] {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: var(--control-gap);
|
|
padding: var(--control-gap);
|
|
}
|
|
#wifi_assoclist_table .ifacebadge[data-ssid] > img {
|
|
flex: none;
|
|
margin: 0;
|
|
}
|
|
#wifi_assoclist_table .ifacebadge[data-ssid] > span {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
text-align: start;
|
|
}
|
|
#wifi_assoclist_table .ifacebadge[data-ssid] small {
|
|
display: block;
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
@media screen and (min-width: 1153px) {
|
|
#wifi_assoclist_table .td > .cbi-dropdown:is(.btn, .cbi-button):not([multiple]) {
|
|
min-width: max-content;
|
|
}
|
|
#wifi_assoclist_table .td > .cbi-dropdown:is(.btn, .cbi-button):not([multiple]) > ul:not(.dropdown) > li {
|
|
white-space: nowrap;
|
|
overflow-wrap: normal;
|
|
}
|
|
#wifi_assoclist_table > .tr > :is(.th, .td) {
|
|
padding-inline: var(--action-gap);
|
|
overflow-wrap: break-word;
|
|
}
|
|
#wifi_assoclist_table > .tr > :is(.th, .td):first-child {
|
|
width: 22%;
|
|
min-width: 10rem;
|
|
}
|
|
}
|
|
#wifi_assoclist_table > .tr > .td > span.hide-xs {
|
|
display: block;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
#wifi_assoclist_table .td:has(> .ifacebadge[data-ssid]) {
|
|
flex-basis: 100%;
|
|
padding-inline: var(--control-gap);
|
|
}
|
|
}
|
|
#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;
|
|
}
|
|
/* samba */
|
|
#cbi-samba [data-tab="template"] .cbi-value-field {
|
|
display: block;
|
|
}
|
|
#cbi-samba [data-tab="template"] .cbi-value-title {
|
|
width: auto;
|
|
padding-bottom: 0.6rem;
|
|
}
|
|
/* 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;
|
|
}
|
|
/* firewall */
|
|
#iptables {
|
|
margin: 0;
|
|
}
|
|
.Firewall form {
|
|
margin: 2rem 2rem 0 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
#cbi-firewall-redirect table *,
|
|
#cbi-network-switch_vlan table *,
|
|
#cbi-firewall-zone table * {
|
|
font-size: small;
|
|
}
|
|
#cbi-firewall-redirect table input[type="text"],
|
|
#cbi-network-switch_vlan table input[type="text"],
|
|
#cbi-firewall-zone table input[type="text"] {
|
|
width: 5rem;
|
|
}
|
|
#cbi-firewall-redirect table select,
|
|
#cbi-network-switch_vlan table select,
|
|
#cbi-firewall-zone table select {
|
|
min-width: 3.5rem;
|
|
}
|
|
#cbi-network-switch_vlan .th,
|
|
#cbi-network-switch_vlan .td {
|
|
flex-basis: 12%;
|
|
}
|
|
#cbi-network-switch_vlan .table {
|
|
display: block;
|
|
}
|
|
#cbi-network-switch_vlan .td {
|
|
width: 100%;
|
|
}
|
|
#cbi-firewall-zone .table {
|
|
display: block;
|
|
}
|
|
#cbi-firewall-zone .td {
|
|
width: 100%;
|
|
}
|
|
[data-page^="admin-system-commands"] .panel-title,
|
|
[data-page^="command-cfg"] .mobile-hide,
|
|
[data-page^="command-cfg"] .showSide {
|
|
display: none;
|
|
}
|
|
#mwan3-service-status {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
}
|
|
#mwan3-service-status > div.alert-message {
|
|
position: static;
|
|
transform: none;
|
|
z-index: auto;
|
|
height: auto;
|
|
min-height: 6rem;
|
|
max-width: calc(100% - 2rem);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
@media all and (-ms-high-contrast: none) {
|
|
.main > .main-left > .nav > .slide > .menu::before {
|
|
top: 30.25%;
|
|
}
|
|
.main > .main-left > .nav > li:last-child::before {
|
|
top: 20%;
|
|
}
|
|
.showSide::before {
|
|
top: -12px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1600px) {
|
|
:root {
|
|
--form-label-width: 15rem;
|
|
--form-label-padding: 0.6rem;
|
|
}
|
|
header > .fill > .container > #logo {
|
|
margin: 0 2.5rem 0 0.5rem;
|
|
}
|
|
.main-left {
|
|
--sidebar-width: 13rem;
|
|
}
|
|
.btn:not(button),
|
|
.label {
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
#cbi-firewall-zone .cbi-input-select {
|
|
min-width: 9rem;
|
|
}
|
|
.cbi-input-textarea {
|
|
font-size: small;
|
|
}
|
|
.node-admin-status > .main fieldset li > a {
|
|
padding: 0.3rem 0.6rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1366px) {
|
|
:root {
|
|
--form-control-min-width: 16rem;
|
|
}
|
|
header > .fill > .container {
|
|
cursor: default;
|
|
}
|
|
.tabs > li > a,
|
|
.cbi-tabmenu > li > a {
|
|
padding: 0.2rem 0.8rem;
|
|
}
|
|
.panel-title {
|
|
font-size: 1.1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
table {
|
|
width: 100% !important;
|
|
}
|
|
.table .cbi-input-text {
|
|
width: 100%;
|
|
}
|
|
#cbi-firewall-zone .cbi-input-select {
|
|
min-width: 5.5rem;
|
|
}
|
|
.main > .main-left > .nav > li,
|
|
.main > .main-left > .nav > li > a,
|
|
.main .main-left .nav > li > a:first-child,
|
|
.main > .main-left > .nav > .slide > .menu,
|
|
.main > .main-left > .nav > li > [data-title="Log_out"] {
|
|
font-size: 0.9rem;
|
|
}
|
|
.main > .main-left > .nav > .slide > .slide-menu > li > a {
|
|
font-size: 0.875rem;
|
|
}
|
|
[data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) {
|
|
display: block;
|
|
}
|
|
[data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
|
|
[data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
|
|
[data-page="admin-network-hosts"] .table,
|
|
[data-page="admin-network-routes"] .table {
|
|
overflow-y: visible;
|
|
}
|
|
.btn:not(button),
|
|
.cbi-button {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1152px) {
|
|
:root {
|
|
--form-label-width: 12rem;
|
|
--form-label-padding: 1rem;
|
|
--form-control-width: 16rem;
|
|
}
|
|
header > .fill > .container > #logo {
|
|
display: none;
|
|
}
|
|
header > .fill > .container > .brand {
|
|
position: relative;
|
|
}
|
|
html,
|
|
.main {
|
|
overflow-y: visible;
|
|
}
|
|
.main > .loading > span {
|
|
top: 25%;
|
|
}
|
|
body:not(.logged-in) .showSide {
|
|
visibility: hidden;
|
|
width: 0;
|
|
margin: 0;
|
|
}
|
|
.node-main-login > .main .cbi-value-title {
|
|
text-align: left;
|
|
}
|
|
.cbi-value input[name^="pw"],
|
|
.cbi-value input[data-update="change"]:nth-child(2) {
|
|
--form-control-width: 13rem;
|
|
--form-control-min-width: 13rem;
|
|
}
|
|
#diag-rc-output > pre,
|
|
#command-rc-output > pre,
|
|
[data-page="admin-services-wol"] .notice code {
|
|
font-size: 1rem;
|
|
}
|
|
.table {
|
|
display: block;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.table > :is(thead, tbody, tfoot, .thead, .tbody, .tfoot) {
|
|
display: block;
|
|
}
|
|
.Interfaces .table {
|
|
overflow-x: hidden;
|
|
}
|
|
#packages.table {
|
|
display: grid;
|
|
}
|
|
.tr {
|
|
display: flex;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.Overview .table[width="100%"] > .tr {
|
|
flex-wrap: nowrap;
|
|
}
|
|
.tr.placeholder {
|
|
border-bottom: thin solid var(--border-subtle);
|
|
}
|
|
.tr.placeholder > .td,
|
|
#cbi-firewall .tr > .td,
|
|
#cbi-network .tr:nth-child(2) > .td,
|
|
.cbi-section #wifi_assoclist_table .tr > .td {
|
|
border-top: 0;
|
|
}
|
|
.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%;
|
|
}
|
|
.td[data-title]::before {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.td .ifacebadge {
|
|
max-width: 100%;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.table .td:has(.ifacebadge[data-signal]),
|
|
#cbi-wireless .td:has(.ifacebadge[data-signal]) {
|
|
min-width: min-content;
|
|
padding-inline: var(--control-gap);
|
|
}
|
|
.td select,
|
|
.td input[type="text"] {
|
|
width: 100%;
|
|
word-wrap: normal;
|
|
}
|
|
.td [data-dynlist] > input,
|
|
.td input.cbi-input-password {
|
|
width: calc(100% - 1.5rem);
|
|
}
|
|
.td[data-type="button"],
|
|
.td[data-type="fvalue"] {
|
|
flex: 1 1 12.5%;
|
|
text-align: left;
|
|
}
|
|
.th.cbi-value-field,
|
|
.td.cbi-value-field,
|
|
.th.cbi-section-table-cell,
|
|
.td.cbi-section-table-cell {
|
|
flex-basis: auto;
|
|
padding-top: 1rem;
|
|
}
|
|
.cbi-section-table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.td.cbi-value-field,
|
|
.cbi-section-table-cell {
|
|
display: inline-block;
|
|
flex: 10 10 auto;
|
|
flex-basis: 50%;
|
|
text-align: center;
|
|
}
|
|
.td.cbi-section-actions,
|
|
.td:has( > :is(.btn, .cbi-button):only-child) {
|
|
flex: 1 1 100%;
|
|
width: auto !important;
|
|
min-width: 0 !important;
|
|
max-width: 100%;
|
|
vertical-align: bottom;
|
|
}
|
|
.td.cbi-section-actions > :not(.btn, .cbi-button),
|
|
.td:has( > :is(.btn, .cbi-button):only-child) > :not(.btn, .cbi-button) {
|
|
flex-wrap: wrap;
|
|
max-width: 100%;
|
|
}
|
|
.td.cbi-section-actions .btn,
|
|
.td:has( > :is(.btn, .cbi-button):only-child) .btn,
|
|
.td.cbi-section-actions .cbi-button,
|
|
.td:has( > :is(.btn, .cbi-button):only-child) .cbi-button {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.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;
|
|
}
|
|
.tr.table-titles,
|
|
.tr.cbi-section-table-titles,
|
|
.tr.cbi-section-table-descr {
|
|
display: none;
|
|
}
|
|
.tr[data-title]::before,
|
|
.tr.cbi-section-table-titles.named::before {
|
|
font-size: 0.9rem;
|
|
display: block;
|
|
flex: 1 1 100%;
|
|
border-bottom: thin solid rgba(0, 0, 0, 0.26);
|
|
background: var(--surface-contrast);
|
|
}
|
|
.td[data-title],
|
|
[data-page^="admin-status-realtime"] .td[id] {
|
|
text-align: left;
|
|
}
|
|
.td[data-title]::before {
|
|
display: block;
|
|
}
|
|
.Firewall form {
|
|
position: static !important;
|
|
margin: 0 0 2rem 0;
|
|
padding: 2rem;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.Firewall form input {
|
|
width: 100% !important;
|
|
margin: 0;
|
|
margin-top: 1rem;
|
|
}
|
|
.Firewall .center,
|
|
.Firewall .center::before {
|
|
text-align: left !important;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.main-left {
|
|
position: fixed;
|
|
inset-inline-start: 0;
|
|
z-index: 100;
|
|
width: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
.main-left.active {
|
|
width: var(--sidebar-width);
|
|
}
|
|
.main-left > .sidenav-header,
|
|
.main-left > .nav {
|
|
width: var(--sidebar-width);
|
|
}
|
|
.main-right {
|
|
width: 100%;
|
|
}
|
|
.main-right.active {
|
|
overflow-y: hidden;
|
|
}
|
|
.darkMask.active {
|
|
display: block;
|
|
}
|
|
header .showSide {
|
|
padding: 0.1rem;
|
|
position: relative;
|
|
z-index: 99;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
header .showSide::before {
|
|
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;
|
|
}
|
|
header > .fill > .container > .flex1 > .brand {
|
|
display: inline-block;
|
|
}
|
|
.main > .main-left > .nav > .slide > .slide-menu > li > a {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) and (prefers-reduced-motion: no-preference) {
|
|
.main-left {
|
|
transition: width 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
.main-left.active {
|
|
transition-duration: 0.3s;
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
header .fill .container {
|
|
flex-wrap: nowrap;
|
|
}
|
|
header .fill .container .header-actions {
|
|
max-width: calc(100% - 2.5rem - var(--action-gap));
|
|
}
|
|
header .fill .container .flex1 {
|
|
flex: 1 1 0;
|
|
gap: var(--control-gap);
|
|
}
|
|
header .fill .container .flex1 .brand {
|
|
font-size: 1.25rem;
|
|
}
|
|
header .fill .container .status {
|
|
flex: 0 1 auto;
|
|
}
|
|
header .fill .container .status span {
|
|
font-size: 0.6875rem;
|
|
padding: 0.25rem 0.5rem;
|
|
white-space: normal;
|
|
}
|
|
#argon-appearance .argon-appearance-trigger {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
#argon-appearance .argon-appearance-trigger::before {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
}
|
|
:root {
|
|
--page-gutter: 1rem;
|
|
--section-inset: 1rem;
|
|
}
|
|
.mobile-hide {
|
|
display: none;
|
|
}
|
|
.cbi-value {
|
|
flex-direction: column;
|
|
}
|
|
.cbi-value > .cbi-value-title,
|
|
.cbi-value > .cbi-value-field {
|
|
flex: 0 1 auto;
|
|
width: 100%;
|
|
}
|
|
.cbi-value > .cbi-value-title {
|
|
padding-inline-end: 0;
|
|
text-align: start;
|
|
}
|
|
.cbi-dynlist p {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
.node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field {
|
|
width: 16rem;
|
|
}
|
|
.node-main-login footer {
|
|
display: none;
|
|
}
|
|
}
|
|
@media screen and (min-width: 600px) {
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar,
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--primary);
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
}
|