mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-05 18:44:03 +08:00
647 lines
20 KiB
Plaintext
647 lines
20 KiB
Plaintext
// out: false
|
|
|
|
// Services - OpenClash
|
|
[data-page^="admin-services-openclash"] {
|
|
img[src$="arrow-clockwise-light.svg"],
|
|
img[src$="wrench-light.svg"],
|
|
img[src$="eye-light.svg"] {
|
|
filter: var(--image-filter);
|
|
}
|
|
// One adapter contract for OpenClash's current component set.
|
|
// Semantic colours remain owned by OpenClash; primary interactions and
|
|
// neutral surfaces follow Argon's runtime-configurable palette.
|
|
--oc-accent: var(--primary);
|
|
--oc-accent-hover: var(--primary);
|
|
--oc-accent-strong: var(--primary);
|
|
--oc-accent-a5: transparent;
|
|
--oc-accent-a10: transparent;
|
|
--oc-accent-a20: transparent;
|
|
--oc-accent-a30: transparent;
|
|
--oc-accent-a40: transparent;
|
|
--oc-accent-a50: transparent;
|
|
--oc-accent-a60: transparent;
|
|
--oc-surface: var(--surface-color);
|
|
--oc-surface-muted: var(--surface-muted);
|
|
--oc-control-bg: var(--input-bg);
|
|
--oc-border: var(--border-color);
|
|
--oc-text: var(--text-color);
|
|
--oc-text-muted: var(--plugin-text-muted);
|
|
--oc-neutral: var(--plugin-neutral);
|
|
--oc-scrollbar: var(--oc-accent);
|
|
|
|
@supports (color: color-mix(in srgb, red, blue)) {
|
|
--oc-accent-hover: color-mix(in srgb, var(--oc-accent) 88%, black);
|
|
--oc-accent-strong: color-mix(in srgb, var(--oc-accent) 78%, black);
|
|
--oc-accent-a5: color-mix(in srgb, var(--oc-accent) 5%, transparent);
|
|
--oc-accent-a10: color-mix(in srgb, var(--oc-accent) 10%, transparent);
|
|
--oc-accent-a20: color-mix(in srgb, var(--oc-accent) 20%, transparent);
|
|
--oc-accent-a30: color-mix(in srgb, var(--oc-accent) 30%, transparent);
|
|
--oc-accent-a40: color-mix(in srgb, var(--oc-accent) 40%, transparent);
|
|
--oc-accent-a50: color-mix(in srgb, var(--oc-accent) 50%, transparent);
|
|
--oc-accent-a60: color-mix(in srgb, var(--oc-accent) 60%, transparent);
|
|
}
|
|
|
|
.oc {
|
|
--bg-white: var(--oc-surface) !important;
|
|
--bg-light: var(--oc-surface) !important;
|
|
--bg-gray: var(--oc-surface) !important;
|
|
--bg-dark: var(--oc-surface) !important;
|
|
--hover-bg: var(--oc-surface-muted) !important;
|
|
--editor-bg: var(--oc-control-bg) !important;
|
|
--card-bg-start: var(--oc-surface) !important;
|
|
--border-color: var(--oc-border) !important;
|
|
--border-light: var(--oc-border) !important;
|
|
--border-dark: var(--oc-border) !important;
|
|
--tab-border: var(--oc-border) !important;
|
|
--divider: var(--oc-border) !important;
|
|
--text-primary: var(--oc-text) !important;
|
|
--text-secondary: var(--oc-text-muted) !important;
|
|
--text-title: var(--oc-text) !important;
|
|
--primary-color: var(--oc-accent) !important;
|
|
--primary-bright: var(--oc-accent) !important;
|
|
--btn-primary-hover: var(--oc-accent-hover) !important;
|
|
--announcement-end: var(--oc-accent-strong) !important;
|
|
--card-btn-bg: var(--oc-accent) !important;
|
|
--card-accent: var(--oc-accent) !important;
|
|
--primary-a5: var(--oc-accent-a5) !important;
|
|
--primary-a10: var(--oc-accent-a10) !important;
|
|
--primary-a20: var(--oc-accent-a20) !important;
|
|
--primary-a30: var(--oc-accent-a30) !important;
|
|
--primary-a40: var(--oc-accent-a40) !important;
|
|
--primary-a50: var(--oc-accent-a50) !important;
|
|
--primary-a60: var(--oc-accent-a60) !important;
|
|
--radio-hover-bg: var(--oc-accent-a10) !important;
|
|
--tab-hover-dark-bg: var(--oc-accent-a10) !important;
|
|
--scrollbar-thumb: var(--oc-scrollbar) !important;
|
|
--scrollbar-thumb-hover: var(--oc-accent-hover) !important;
|
|
border-radius: var(--radius-card);
|
|
|
|
.developer-container,
|
|
.subscription-info-container {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.announcement-card {
|
|
width: auto !important;
|
|
margin: 10px !important;
|
|
}
|
|
|
|
.config-upload-content {
|
|
background: var(--oc-surface) !important;
|
|
}
|
|
}
|
|
|
|
// Editors inject important scrollbar colours. Override only control thumbs,
|
|
// retaining their existing widths, tracks and clipping.
|
|
textarea,
|
|
.oc,
|
|
.oc *,
|
|
.oc .cm-editor .cm-scroller,
|
|
.oc #debug-rendered,
|
|
.oc #debug-rendered pre {
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: var(--oc-scrollbar) !important;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--oc-accent-hover) !important;
|
|
}
|
|
}
|
|
|
|
// Standard LuCI controls
|
|
.cbi-button.cbi-button-add,
|
|
.cbi-button.cbi-button-apply,
|
|
.cbi-button.cbi-button-edit,
|
|
.cbi-button.cbi-button-link,
|
|
.cbi-button.cbi-button-positive,
|
|
.cbi-button.cbi-button-reload,
|
|
.cbi-button.cbi-button-save,
|
|
.cbi-button.cbi-button-action,
|
|
input.cbi-input-apply,
|
|
input.cbi-input-reload,
|
|
input.cbi-input-save,
|
|
.btn.primary {
|
|
color: var(--accent-text) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent) !important;
|
|
}
|
|
|
|
.cbi-button.cbi-button-remove,
|
|
.cbi-button.cbi-button-negative,
|
|
input.cbi-input-remove {
|
|
color: var(--text-on-accent) !important;
|
|
border-color: var(--danger-bg) !important;
|
|
background: var(--danger-bg) !important;
|
|
}
|
|
|
|
.cbi-button.cbi-button-reset {
|
|
color: var(--text-on-accent) !important;
|
|
border-color: var(--warning-action-bg) !important;
|
|
background: var(--warning-action-bg) !important;
|
|
}
|
|
|
|
.cbi-button.cbi-button-find,
|
|
input.cbi-input-find {
|
|
color: var(--text-on-accent) !important;
|
|
border-color: var(--oc-neutral) !important;
|
|
background-color: var(--oc-neutral) !important;
|
|
}
|
|
|
|
// Sorting controls are compact icon buttons. A neutral outline keeps the
|
|
// shared SVG legible on light surfaces without implying disabled.
|
|
#cbi-openclash .cbi-button-up,
|
|
#cbi-openclash .cbi-button-down {
|
|
border-color: var(--oc-neutral) !important;
|
|
background-color: var(--oc-control-bg) !important;
|
|
}
|
|
|
|
#cbi-openclash .cbi-button-up:not(:disabled):hover,
|
|
#cbi-openclash .cbi-button-up:not(:disabled):focus,
|
|
#cbi-openclash .cbi-button-down:not(:disabled):hover,
|
|
#cbi-openclash .cbi-button-down:not(:disabled):focus {
|
|
border-color: var(--oc-accent) !important;
|
|
background-color: var(--oc-accent-a10) !important;
|
|
box-shadow: 0 0 0 2px var(--oc-accent-a10) !important;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
border-color: var(--oc-accent) !important;
|
|
|
|
&:checked {
|
|
border-color: var(--oc-accent) !important;
|
|
background-color: var(--oc-accent) !important;
|
|
}
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="search"],
|
|
input[type="url"],
|
|
select,
|
|
textarea,
|
|
.cbi-dropdown,
|
|
.oc .oc-input-textarea,
|
|
.oc .sub-info-url-form-textarea,
|
|
.oc .select-class,
|
|
.oc .custom-option-input {
|
|
color: var(--oc-text) !important;
|
|
border-color: var(--control-border) !important;
|
|
background-color: var(--oc-control-bg) !important;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="url"]:focus,
|
|
select:focus,
|
|
textarea:focus,
|
|
.cbi-dropdown:focus,
|
|
.cbi-dropdown[open],
|
|
.oc .oc-input-textarea:focus,
|
|
.oc .sub-info-url-form-textarea:focus,
|
|
.oc .select-class:focus,
|
|
.oc .custom-option-input:focus {
|
|
border-color: var(--control-focus) !important;
|
|
box-shadow: 0 0 0 2px var(--oc-accent-a10) !important;
|
|
outline: 0 !important;
|
|
}
|
|
|
|
.CodeMirror,
|
|
.oc .cm-editor {
|
|
color: var(--oc-text) !important;
|
|
border: 1px solid var(--oc-border) !important;
|
|
background: var(--oc-control-bg) !important;
|
|
}
|
|
|
|
.CodeMirror-gutters,
|
|
.oc .cm-gutters {
|
|
border-color: var(--oc-border) !important;
|
|
background: var(--oc-surface-muted) !important;
|
|
}
|
|
|
|
.CodeMirror.CodeMirror-focused,
|
|
.oc .cm-editor.cm-focused {
|
|
border-color: var(--oc-accent) !important;
|
|
box-shadow: 0 0 0 2px var(--oc-accent-a10) !important;
|
|
outline: 0 !important;
|
|
}
|
|
|
|
// Both tab classes are current component variants, not version branches.
|
|
.oc .radio-button input[type="radio"]:checked+label,
|
|
.oc #tab-header>ul.cbi-tabmenu>li.cbi-tab,
|
|
.oc #tab-header>ul.oc-tabmenu>li.oc-tab {
|
|
color: var(--accent-text) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent) !important;
|
|
}
|
|
|
|
.oc .radio-button input[type="radio"]:checked+label {
|
|
box-shadow: 0 1px 2px var(--oc-accent-a10) !important;
|
|
}
|
|
|
|
.oc .radio-button label:hover,
|
|
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):hover,
|
|
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):focus,
|
|
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):hover,
|
|
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):focus {
|
|
color: var(--oc-accent) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent-a10) !important;
|
|
}
|
|
|
|
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):hover>a,
|
|
.oc #tab-header>ul.cbi-tabmenu>li:not(.cbi-tab):focus>a,
|
|
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):hover>a,
|
|
.oc #tab-header>ul.oc-tabmenu>li:not(.oc-tab):focus>a {
|
|
color: var(--oc-accent) !important;
|
|
}
|
|
|
|
.oc .card .general .btn:hover,
|
|
.oc #addCustomOption:hover {
|
|
background: var(--oc-accent-hover) !important;
|
|
}
|
|
|
|
.oc .help-link:hover {
|
|
background: var(--oc-accent-a10) !important;
|
|
}
|
|
|
|
.oc .select-option[data-value="custom"] {
|
|
border-color: var(--oc-accent-a20) !important;
|
|
background: var(--oc-accent-a10) !important;
|
|
|
|
&:hover {
|
|
background: var(--oc-accent-a20) !important;
|
|
}
|
|
}
|
|
|
|
.oc .announcement-banner,
|
|
.oc .oix-announcement {
|
|
background: linear-gradient(275deg, var(--oc-accent), var(--oc-accent-strong)) !important;
|
|
}
|
|
|
|
.oc .announcement-banner::before,
|
|
.oc .oix-announcement::before {
|
|
background: var(--oc-accent-strong) !important;
|
|
}
|
|
|
|
// The literal fill is a JavaScript state marker; change presentation only.
|
|
.oc #mode-icon rect[fill="#2F88FF"] {
|
|
fill: var(--oc-accent) !important;
|
|
}
|
|
|
|
// Argon cards use colour and shadow for hover feedback, not layout motion.
|
|
.oc .sub-card:hover,
|
|
.oc .myip-ip-item:hover,
|
|
.oc .myip-check-item:hover,
|
|
.oc .myip-card-item:hover,
|
|
.oc .card:hover,
|
|
.oc .oix-header:hover,
|
|
.oc .oix-card:hover,
|
|
.oc .config-upload-btn-large:hover {
|
|
transform: none !important;
|
|
}
|
|
|
|
// Legacy help text is primary emphasis; success and error remain semantic.
|
|
b.oc-txt-good,
|
|
b[style*="color:green"],
|
|
b[style*="color: green"],
|
|
b[color="green"] {
|
|
color: var(--oc-accent) !important;
|
|
}
|
|
|
|
font[style*="color:green"],
|
|
font[style*="color: green"],
|
|
font[color="green"] {
|
|
color: var(--success) !important;
|
|
}
|
|
|
|
b[style*="color:red"],
|
|
b[style*="color: red"],
|
|
b[color="red"],
|
|
font[style*="color:red"],
|
|
font[style*="color: red"],
|
|
font[color="red"] {
|
|
color: var(--danger) !important;
|
|
}
|
|
|
|
// Normalize the config switcher and top-level navigation height.
|
|
.tabs>#tool_label {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
vertical-align: middle;
|
|
|
|
.tool_label_span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.cbi-section-node-tabbed>.cbi-tabcontainer {
|
|
gap: 0;
|
|
|
|
>.cbi-value {
|
|
padding-top: 0.4375rem;
|
|
padding-bottom: 0.4375rem;
|
|
}
|
|
}
|
|
|
|
// The version tab reuses the update popup inside an existing Argon card.
|
|
// Align its content with the tabs without changing standalone popups.
|
|
&[data-page="admin-services-openclash-settings"] {
|
|
[id="container.openclash.config.version_update"] {
|
|
padding-inline: var(--section-inset);
|
|
|
|
>.oc {
|
|
border-radius: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
#selectPopup.select-popup-tab {
|
|
border: 0;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-page="admin-services-openclash-config"],
|
|
&[data-page="admin-services-openclash-config-subscribe"],
|
|
&[data-page^="admin-services-openclash-custom-dns-edit"],
|
|
&[data-page^="admin-services-openclash-config-subscribe-edit"],
|
|
&[data-page^="admin-services-openclash-groups-config"],
|
|
&[data-page^="admin-services-openclash-proxy-provider-config"],
|
|
&[data-page^="admin-services-openclash-servers-config"],
|
|
&[data-page^="admin-services-openclash-other-file-edit"] {
|
|
.cbi-map>.cbi-section>.cbi-section-node:not(.cbi-section-node-tabbed) {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
&[data-page^="admin-services-openclash-config-subscribe-edit"] {
|
|
[id^="cbi-openclash-"][id$="-de_ex_keyword"] {
|
|
>.cbi-value-field {
|
|
>div:not([class])>span.cbi-checkbox {
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
>.cbi-dropdown[multiple] {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#cbi-openclash>fieldset {
|
|
background: none;
|
|
padding: 0;
|
|
|
|
>table>tbody>tr>td {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.main-card {
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0 10px 10px 10px;
|
|
background: transparent;
|
|
}
|
|
|
|
.myip-main-card {
|
|
margin: 0;
|
|
padding: 10px;
|
|
border: none;
|
|
background: transparent;
|
|
|
|
.myip-section-title {
|
|
margin: 0;
|
|
border-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub-card .card-title {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.oc .main-cards-container {
|
|
margin: 0 !important;
|
|
gap: 0 !important;
|
|
}
|
|
|
|
.oc .config-file-bottom {
|
|
margin-bottom: 5px;
|
|
|
|
.card-actions {
|
|
margin-bottom: 2px !important;
|
|
}
|
|
}
|
|
|
|
.oc .card-content {
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.oc .card-controls {
|
|
align-self: center;
|
|
}
|
|
|
|
.oc .plugin-toggle-container {
|
|
margin-left: inherit !important;
|
|
}
|
|
|
|
.cbi-tabmenu>li {
|
|
border-right: none !important;
|
|
margin: 0 0.4rem 0 0 !important;
|
|
|
|
&:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
// The custom table renderer carries release-owned inline colours. Keep its
|
|
// layout, but make colour and row rhythm match ordinary Argon pages.
|
|
#cbi-openclash .cbi-section-table-row,
|
|
#cbi-openclash .cbi-rowstyle-1,
|
|
#cbi-openclash .cbi-rowstyle-2,
|
|
#cbi-openclash .cbi-tabcontainer>.cbi-value:nth-of-type(2n),
|
|
#cbi-openclash table>tbody>tr:nth-of-type(2n) {
|
|
background: var(--oc-surface) !important;
|
|
}
|
|
|
|
#cbi-openclash [id^="tab-header-openclash-"] {
|
|
border-bottom-color: var(--oc-border) !important;
|
|
background: var(--oc-surface) !important;
|
|
|
|
>ul.cbi-tabmenu {
|
|
background: var(--oc-surface) !important;
|
|
|
|
>li {
|
|
color: var(--oc-text-muted) !important;
|
|
border-color: var(--oc-border) !important;
|
|
background: var(--oc-surface) !important;
|
|
|
|
&.cbi-tab {
|
|
color: var(--accent-text) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent) !important;
|
|
|
|
>a {
|
|
color: var(--accent-text) !important;
|
|
}
|
|
}
|
|
|
|
&:not(.cbi-tab):hover,
|
|
&:not(.cbi-tab):focus {
|
|
color: var(--oc-accent) !important;
|
|
border-color: var(--oc-accent) !important;
|
|
background: var(--oc-accent-a10) !important;
|
|
|
|
>a {
|
|
color: var(--oc-accent) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[id^="tab-header-openclash-"]>ul.cbi-tabmenu>li {
|
|
margin: 0 !important;
|
|
border-right: 1px solid var(--oc-border) !important;
|
|
}
|
|
|
|
[id^="tab-header-openclash-"]+[id="tab-content"] {
|
|
.td.cbi-section-table-cell>p {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
#tab-content .dom {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
|
|
// The surrounding form already provides the log card and horizontal inset.
|
|
// Retain the editor frame and clipping used to hide inactive log panes.
|
|
&[data-page="admin-services-openclash-log"] {
|
|
#tab.oc {
|
|
height: auto;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
|
|
>#tab-header {
|
|
padding: var(--field-gap) 0;
|
|
border: 0;
|
|
background: transparent;
|
|
|
|
>ul.oc-tabmenu {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
+.oc {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
#tab-content>.dom {
|
|
padding: 0;
|
|
}
|
|
|
|
.oc .select-popup-footer.log-footer {
|
|
margin: 0;
|
|
padding: var(--field-gap) 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
#cbi-openclash-dns_servers .cbi-section-table-row>
|
|
.cbi-section-table-cell:last-child {
|
|
min-width: 7.25rem;
|
|
white-space: nowrap;
|
|
|
|
>.cbi-button {
|
|
margin: 0 0.125rem !important;
|
|
}
|
|
}
|
|
|
|
.cbi-input-file {
|
|
padding: 0.2813rem;
|
|
width: 15rem !important;
|
|
}
|
|
|
|
[id="container.openclash.config.debug"] fieldset {
|
|
border: none !important;
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
#diag-rc-output>pre,
|
|
#dns-rc-output>pre {
|
|
font-size: 0.875rem;
|
|
color: var(--oc-text-muted);
|
|
border: 1px solid var(--oc-border);
|
|
background-color: var(--oc-control-bg);
|
|
border-radius: var(--radius-panel);
|
|
font-family: 'Google Sans' !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#debug-rc-output>textarea {
|
|
font-family: 'Google Sans' !important;
|
|
}
|
|
|
|
.CodeMirror,
|
|
.cm-editor {
|
|
font-size: inherit;
|
|
font-family: 'Google Sans' !important;
|
|
}
|
|
|
|
.cbi-button-up,
|
|
.cbi-button-down {
|
|
padding: 0.8rem 1.5rem;
|
|
font-size: 0;
|
|
}
|
|
|
|
select#CORE_VERSION,
|
|
select#RELEASE_BRANCH {
|
|
width: auto;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
&[data-page^="admin-services-openclash-config-subscribe-edit"] {
|
|
[id^="cbi-openclash-"][id$="-de_ex_keyword"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
>label.cbi-value-title {
|
|
display: block;
|
|
float: none;
|
|
width: 100%;
|
|
padding-right: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
>.cbi-value-field {
|
|
width: 100%;
|
|
min-width: 0;
|
|
|
|
>.cbi-dropdown[multiple] {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|