mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-12 02:37:51 +08:00
166 lines
17 KiB
JavaScript
166 lines
17 KiB
JavaScript
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
'use strict';
|
|
'require baseclass';
|
|
|
|
const CSS = [
|
|
'.dd-wrap{padding:4px 0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}',
|
|
'.dd-card{border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:9px 14px;margin-bottom:7px;box-shadow:0 2px 8px rgba(0,0,0,.03);background:rgba(255,255,255,.02)}',
|
|
'.dd-card-title{font-size:11px;font-weight:600;opacity:.55;margin:0 0 8px;letter-spacing:.3px;text-transform:uppercase}',
|
|
'.dd-status-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:0}',
|
|
'.dd-status-row .dd-grow{flex:1 1 auto}',
|
|
'.dd-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.3px;border:1px solid transparent;line-height:1.3}',
|
|
'.dd-badge-run{color:#3da66a;border-color:rgba(61,166,106,.5)}',
|
|
'.dd-badge-stop{color:#d96d6d;border-color:rgba(217,109,109,.55)}',
|
|
'.dd-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}',
|
|
'.dd-meta{font-size:11.5px;opacity:.7;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}',
|
|
'.dd-meta-label{opacity:.55;margin-right:4px}',
|
|
'.dd-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}',
|
|
'.dd-actions .cbi-button{font-size:11.5px;padding:4px 12px;border-radius:5px}',
|
|
'.dd-actions a.cbi-button{display:inline-flex;align-items:center;gap:4px}',
|
|
'.dd-wrap .cbi-button{font-size:11px !important;line-height:1.4 !important;min-height:0 !important;height:auto !important;padding:4px 12px !important;border-radius:5px !important;border:1px solid rgba(128,128,128,.35) !important;background:transparent !important;color:inherit !important;box-shadow:none !important;cursor:pointer;white-space:nowrap}',
|
|
'.dd-wrap .cbi-button:hover{background:rgba(128,128,128,.12) !important}',
|
|
'.dd-wrap .cbi-button:disabled{opacity:.45;cursor:not-allowed}',
|
|
'.dd-wrap .cbi-button-action,.dd-wrap .cbi-button-positive,.dd-wrap .cbi-button-add,.dd-wrap .cbi-button-edit{border-color:#4aa065 !important;color:#4aa065 !important}',
|
|
'.dd-wrap .cbi-button-remove{border-color:#d96d6d !important;color:#d96d6d !important}',
|
|
'.dd-wrap .cbi-button-remove:hover{background:rgba(217,109,109,.12) !important}',
|
|
'.dd-switch{position:relative;width:42px;height:22px;border:0;border-radius:999px;background:rgba(128,128,128,.28);padding:0;cursor:pointer;transition:background .18s ease,opacity .18s ease;flex-shrink:0}',
|
|
'.dd-switch .dd-switch-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .18s ease}',
|
|
'.dd-switch.is-on{background:rgba(74,160,101,.65)}',
|
|
'.dd-switch.is-on .dd-switch-knob{transform:translateX(20px)}',
|
|
'.dd-switch:disabled{opacity:.45;cursor:not-allowed}',
|
|
'.dd-switch-label{font-size:10.5px;font-weight:600;opacity:.62;letter-spacing:.3px}',
|
|
'.dd-switch-wrap{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}',
|
|
'.dd-backend-card{padding:10px 14px}',
|
|
'.dd-backend-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}',
|
|
'.dd-backend-label{min-width:100px;font-size:12px;font-weight:600;opacity:.72}',
|
|
'.dd-backend-segment{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:7px;background:rgba(128,128,128,.10)}',
|
|
'.dd-backend-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:78px;height:24px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:inherit;font-size:11px;font-weight:500;opacity:.65;cursor:pointer;transition:background .18s ease,color .18s ease,opacity .18s ease}',
|
|
'.dd-backend-btn:hover{background:rgba(128,128,128,.10)}',
|
|
'.dd-backend-btn.is-active{background:linear-gradient(#3886a1,#2f7288);color:#fff;opacity:1;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}',
|
|
'.dd-backend-btn:disabled{opacity:.55;cursor:not-allowed}',
|
|
'.dd-backend-state{font-size:10.5px;font-weight:500;opacity:.70;margin-left:2px}',
|
|
'.dd-backend-btn.is-active .dd-backend-state{opacity:.85}',
|
|
'.dd-backend-help{margin:6px 0 0 110px;font-size:11.5px;line-height:1.45;opacity:.66}',
|
|
'@media (max-width:640px){.dd-backend-label{min-width:0;width:100%}.dd-backend-segment{width:100%}.dd-backend-btn{flex:1;min-width:0}.dd-backend-help{margin-left:0}}',
|
|
/* daed/dae settings card —— LuCI form.Map 字体/边框对齐 dd 卡片体系 */
|
|
'.dd-settings-card{padding:10px 14px}',
|
|
'.dd-settings-card>h2,.dd-settings-card .cbi-map>h2,.dd-settings-card .cbi-section>h3{display:none}',
|
|
'.dd-settings-card .cbi-map>.cbi-map-descr,.dd-settings-card .cbi-section-descr{font-size:11.5px;opacity:.62;margin:0 0 8px;line-height:1.45}',
|
|
'.dd-settings-descr{font-size:11.5px;opacity:.62;margin:0 0 8px;line-height:1.45}',
|
|
'.dd-settings-card .cbi-section{margin:0;padding:0;background:transparent;border:0;box-shadow:none}',
|
|
'.dd-settings-card .cbi-value{padding:6px 0;border:0;min-height:0}',
|
|
'.dd-settings-card .cbi-value-title{font-size:12.5px !important;font-weight:500;opacity:.85;padding:6px 12px 6px 0;min-width:140px}',
|
|
'.dd-settings-card .cbi-value-field input,.dd-settings-card .cbi-value-field select,.dd-settings-card .cbi-value-field textarea{font-size:12.5px !important;padding:5px 8px;border-radius:5px;border:1px solid rgba(128,128,128,.28);background:transparent;color:inherit}',
|
|
'.dd-settings-card .cbi-value-field input:focus,.dd-settings-card .cbi-value-field select:focus,.dd-settings-card .cbi-value-field textarea:focus{border-color:rgba(56,134,161,.7);outline:0;box-shadow:0 0 0 2px rgba(56,134,161,.15)}',
|
|
'.dd-settings-card .cbi-value-description,.dd-settings-card .cbi-value-helptext{font-size:11.5px !important;opacity:.6;line-height:1.45;padding-top:3px}',
|
|
'.dd-settings-card .cbi-section-remove{background:transparent !important;border:0 !important;box-shadow:none !important}',
|
|
'.dd-settings-card .cbi-section-remove .cbi-button{border-color:#d96d6d !important;color:#d96d6d !important}',
|
|
/* themes (esp. Argon) restyle checkboxes into faint, near-invisible boxes;
|
|
force native rendering + brand accent so the checkmark is always clear */
|
|
'.dd-settings-card input[type="checkbox"]{-webkit-appearance:checkbox !important;appearance:checkbox !important;accent-color:#4aa065;width:16px;height:16px;background:none !important;border:0 !important;box-shadow:none !important;background-image:none !important}',
|
|
'.dd-settings-card input[type="checkbox"]:before,.dd-settings-card input[type="checkbox"]:after{content:none !important;display:none !important}',
|
|
/* line the Subscriptions and Nodes grid tables up column-for-column. fixed
|
|
layout + explicit per-column percentages make the widths authoritative
|
|
across themes (Argon's auto layout otherwise sizes the empty Nodes table
|
|
by content, and even ignores px cell widths, so they drift apart) */
|
|
'.dd-settings-card .cbi-section-table{table-layout:fixed !important;width:100%}',
|
|
/* flatten the table header: Argon tints header cells (#f6f9fc), which reads
|
|
as an off-colour band on the white card — keep it transparent */
|
|
'.dd-settings-card .cbi-section-table-titles,.dd-settings-card .cbi-section-table-titles .cbi-section-table-cell{background:transparent !important;background-image:none !important}',
|
|
'.dd-settings-card .cbi-section-table-cell:nth-child(1){width:14% !important}',
|
|
'.dd-settings-card .cbi-section-table-cell:nth-child(2){width:50% !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
|
|
'.dd-settings-card .cbi-section-table-cell:nth-child(3){width:12% !important}',
|
|
'.dd-settings-card .cbi-section-table-cell:nth-child(4){width:24% !important;min-width:210px}',
|
|
/* proxy-test result coloring */
|
|
'.dd-meta.dd-ok{color:#3da66a;font-weight:600}',
|
|
'.dd-meta.dd-err{color:#d96d6d;font-weight:600}',
|
|
/* 手风琴折叠组 —— 视觉与 clashoo cl-component-adv 一致 */
|
|
'.dd-adv{margin-top:10px}',
|
|
'.dd-adv-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer;user-select:none;font-size:12px;font-weight:600;background:rgba(128,128,128,.06);border:1px solid rgba(128,128,128,.16);border-radius:7px;color:inherit;opacity:.55}',
|
|
'.dd-adv-bar:hover{background:rgba(56,134,161,.08);opacity:1}',
|
|
'.dd-adv-chevron{font-size:14px;font-weight:700;opacity:.55;transition:transform .2s}',
|
|
'.dd-adv:not(.dd-closed) .dd-adv-chevron{transform:rotate(90deg)}',
|
|
'.dd-adv-body{margin-top:8px;padding:2px 4px 4px}',
|
|
'.dd-adv.dd-closed .dd-adv-body{display:none}',
|
|
'.dd-editor{width:100%;min-height:460px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;line-height:1.5;box-sizing:border-box;resize:vertical;border-radius:6px 6px 0 0}',
|
|
/* syntax-highlight overlay: a <pre> sits behind a transparent <textarea>.
|
|
both share identical box metrics so glyphs line up; the textarea stays the
|
|
real editor (caret, selection, insert-at-cursor, jump-to-line all native) */
|
|
'.dd-edit-wrap{position:relative}',
|
|
'.dd-edit-wrap .dd-editor,.dd-edit-wrap .dd-hl{margin:0;padding:10px 12px;border-width:1px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;line-height:1.5;letter-spacing:0;tab-size:4;white-space:pre-wrap;word-break:break-word;box-sizing:border-box}',
|
|
'.dd-edit-wrap .dd-hl{position:absolute;inset:0;margin:0;overflow:hidden;border:1px solid transparent;border-radius:6px 6px 0 0;pointer-events:none;background:transparent;color:#3b4252;z-index:1}',
|
|
'.dd-edit-wrap .dd-hl code{font:inherit;white-space:inherit;word-break:inherit;display:block}',
|
|
'.dd-edit-wrap .dd-editor-hl{position:relative;z-index:2;color:transparent;background:transparent;caret-color:#2f7288;border:1px solid rgba(128,128,128,.28)}',
|
|
'.dd-edit-wrap .dd-editor-hl::placeholder{color:rgba(128,128,128,.55)}',
|
|
'.dd-edit-wrap .dd-editor-hl::selection{background:rgba(56,134,161,.25)}',
|
|
'.dh-c{color:#8a919a;font-style:italic}',
|
|
'.dh-s{color:#2a8a4a}',
|
|
'.dh-k{color:#9a3fb5;font-weight:600}',
|
|
'.dh-f{color:#2f7288}',
|
|
'.dh-o{color:#c2772a}',
|
|
'.dh-g{color:#b0226a}',
|
|
'html[data-darkmode="true"] .dd-edit-wrap .dd-hl,body.dark .dd-edit-wrap .dd-hl,html[data-bs-theme="dark"] .dd-edit-wrap .dd-hl{color:#c8cdd6}',
|
|
'html[data-darkmode="true"] .dd-edit-wrap .dd-editor-hl,body.dark .dd-edit-wrap .dd-editor-hl,html[data-bs-theme="dark"] .dd-edit-wrap .dd-editor-hl{caret-color:#7fd0e8}',
|
|
'html[data-darkmode="true"] .dh-c,body.dark .dh-c{color:#6b7280}',
|
|
'html[data-darkmode="true"] .dh-s,body.dark .dh-s{color:#7ec699}',
|
|
'html[data-darkmode="true"] .dh-k,body.dark .dh-k{color:#c792ea}',
|
|
'html[data-darkmode="true"] .dh-f,body.dark .dh-f{color:#82c4dd}',
|
|
'html[data-darkmode="true"] .dh-o,body.dark .dh-o{color:#e0a35a}',
|
|
'html[data-darkmode="true"] .dh-g,body.dark .dh-g{color:#ec6fa8}',
|
|
'.dd-editor-footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:5px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10.5px;background:rgba(128,128,128,.06);border:1px solid rgba(0,0,0,.06);border-top:0;border-radius:0 0 6px 6px;color:inherit;opacity:.78}',
|
|
'.dd-editor-footer .dd-fb-item{display:inline-flex;align-items:center;gap:5px}',
|
|
'.dd-editor-footer .dd-fb-key{opacity:.55}',
|
|
'.dd-editor-footer .dd-fb-warn{color:#b07d00;font-weight:600}',
|
|
'.dd-editor-footer .dd-fb-ok{color:#3da66a;font-weight:600}',
|
|
'body.dark .dd-editor-footer,html[data-theme="dark"] .dd-editor-footer,html[data-bs-theme="dark"] .dd-editor-footer,html[data-darkmode="true"] .dd-editor-footer{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}',
|
|
'body.dark .dd-editor-footer .dd-fb-warn,html[data-theme="dark"] .dd-editor-footer .dd-fb-warn,html[data-bs-theme="dark"] .dd-editor-footer .dd-fb-warn,html[data-darkmode="true"] .dd-editor-footer .dd-fb-warn{color:#e0b34a}',
|
|
'.dd-insert-select{font-size:11.5px;padding:4px 8px;border-radius:5px;border:1px solid rgba(128,128,128,.35);background:transparent;color:inherit;cursor:pointer}',
|
|
'.dd-insert-select:hover{border-color:rgba(56,134,161,.55)}',
|
|
'.dd-editor-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}',
|
|
'.dd-editor-status{margin-left:auto;font-size:11.5px;opacity:0;transition:opacity .25s ease;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}',
|
|
'.dd-editor-status.show{opacity:1}',
|
|
'.dd-editor-status.ok{color:#3da66a}',
|
|
'.dd-editor-status.err{color:#d96d6d}',
|
|
'.dd-editor-hint{font-size:11.5px;opacity:.62;line-height:1.5;margin:0 0 8px;padding:7px 10px;border-radius:6px;background:rgba(56,134,161,.06)}',
|
|
'.dd-editor-hint b{font-weight:600;opacity:.85}',
|
|
'.dd-sub-card{margin:0 0 10px;padding:10px 14px;border:0;border-radius:8px;background:transparent}',
|
|
'.dd-sub-card-title{font-size:11px;font-weight:600;opacity:.55;margin:0 0 8px;letter-spacing:.3px;text-transform:uppercase}',
|
|
'.dd-sub-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}',
|
|
'.dd-sub-row input{flex:1;min-width:200px;font-size:12px;padding:6px 10px;border-radius:5px;border:1px solid rgba(128,128,128,.28);background:transparent;color:var(--text-color,inherit)}',
|
|
'.dd-sub-row input:focus{border-color:rgba(74,160,101,.55);outline:0;box-shadow:0 0 0 2px rgba(74,160,101,.12)}.dd-sub-row input::placeholder{opacity:.45;color:rgba(92,102,120,.8)}',
|
|
'.dd-sub-apply{font-size:11px;padding:5px 14px;border-radius:5px;border:1px solid #4aa065;color:#4aa065;background:transparent;cursor:pointer;white-space:nowrap;font-weight:600}',
|
|
'.dd-sub-apply:hover{background:rgba(74,160,101,.12)}',
|
|
'.dd-sub-apply:disabled{opacity:.45;cursor:not-allowed}',
|
|
'.dd-sub-status{font-size:11px;margin-left:8px;opacity:0;transition:opacity .2s;white-space:nowrap}',
|
|
'.dd-sub-status.show{opacity:1}',
|
|
'.dd-ph-warn{display:none;font-size:12px;line-height:1.6;margin:0 0 8px;padding:10px 12px;border-radius:6px;background:rgba(217,158,0,.08);color:inherit}',
|
|
'.dd-ph-warn.show{display:block}',
|
|
'.dd-ph-warn-title{font-weight:600;margin-bottom:6px;color:#b07d00;font-size:12.5px}',
|
|
'body.dark .dd-ph-warn-title,html[data-theme="dark"] .dd-ph-warn-title,html[data-bs-theme="dark"] .dd-ph-warn-title,html[data-darkmode="true"] .dd-ph-warn-title{color:#e0b34a}',
|
|
'.dd-ph-howto{margin:4px 0 8px;opacity:.85}',
|
|
'.dd-ph-howto code{padding:1px 5px;border-radius:3px;background:rgba(128,128,128,.18);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}',
|
|
'.dd-ph-list{margin:6px 0 0;padding:6px 0 0;list-style:none;border-top:1px dashed rgba(217,158,0,.3)}',
|
|
'.dd-ph-list-label{font-size:11px;opacity:.6;margin:0 0 4px}',
|
|
'.dd-ph-list li{padding:2px 0;display:flex;gap:8px;align-items:baseline;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px}',
|
|
'.dd-ph-list .dd-ph-ln{display:inline-block;min-width:38px;text-align:center;padding:1px 4px;border-radius:3px;background:rgba(217,158,0,.18);color:#8a6300;opacity:.95;cursor:pointer;font-weight:600;text-decoration:none}',
|
|
'.dd-ph-list .dd-ph-ln:hover{background:rgba(217,158,0,.32)}',
|
|
'body.dark .dd-ph-list .dd-ph-ln,html[data-theme="dark"] .dd-ph-list .dd-ph-ln,html[data-bs-theme="dark"] .dd-ph-list .dd-ph-ln,html[data-darkmode="true"] .dd-ph-list .dd-ph-ln{color:#f0c763;background:rgba(217,158,0,.22)}',
|
|
'.dd-ph-list .dd-ph-txt{opacity:.7;word-break:break-all}',
|
|
'body.dark .dd-card,html[data-theme="dark"] .dd-card,html[data-bs-theme="dark"] .dd-card,html[data-darkmode="true"] .dd-card{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}',
|
|
'body.dark .dd-adv-bar,html[data-theme="dark"] .dd-adv-bar,html[data-bs-theme="dark"] .dd-adv-bar,html[data-darkmode="true"] .dd-adv-bar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}',
|
|
'body.dark .dd-settings-card .cbi-value-field input,body.dark .dd-settings-card .cbi-value-field select,body.dark .dd-settings-card .cbi-value-field textarea,html[data-theme="dark"] .dd-settings-card .cbi-value-field input,html[data-theme="dark"] .dd-settings-card .cbi-value-field select,html[data-theme="dark"] .dd-settings-card .cbi-value-field textarea,html[data-bs-theme="dark"] .dd-settings-card .cbi-value-field input,html[data-bs-theme="dark"] .dd-settings-card .cbi-value-field select,html[data-bs-theme="dark"] .dd-settings-card .cbi-value-field textarea,html[data-darkmode="true"] .dd-settings-card .cbi-value-field input,html[data-darkmode="true"] .dd-settings-card .cbi-value-field select,html[data-darkmode="true"] .dd-settings-card .cbi-value-field textarea{border-color:rgba(255,255,255,.18)}',
|
|
/* phone: render each subscription/node row as a self-contained card instead
|
|
of a cramped table (LuCI already block-stacks the cells; we add the card
|
|
frame, drop the desktop column widths, and shrink the action buttons) */
|
|
'@media (max-width:600px){',
|
|
'.dd-settings-card .cbi-section-table-cell:nth-child(1),.dd-settings-card .cbi-section-table-cell:nth-child(2),.dd-settings-card .cbi-section-table-cell:nth-child(3),.dd-settings-card .cbi-section-table-cell:nth-child(4){width:auto !important;min-width:0 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important}',
|
|
'.dd-settings-card .cbi-section-table-row{display:block;border:1px solid rgba(128,128,128,.2);border-radius:8px;padding:6px 10px;margin:0 0 8px;background:rgba(128,128,128,.03)}',
|
|
'.dd-settings-card .cbi-section-table-cell{display:block;padding:3px 0 !important}',
|
|
'.dd-settings-card .cbi-section-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px !important}',
|
|
'.dd-settings-card .cbi-section-actions .cbi-button{width:auto;margin:0;flex:0 0 auto}',
|
|
'}'
|
|
].join('');
|
|
|
|
return baseclass.extend({ CSS: CSS });
|