diff --git a/static/hub.css b/static/hub.css index fc0f6aa..488a3ac 100644 --- a/static/hub.css +++ b/static/hub.css @@ -1,2076 +1,2090 @@ -@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Orbitron:wght@500;600&display=swap"); - -:root { - --bg: #070b14; - --bg-2: #0c1424; - --panel: rgba(16, 24, 40, 0.82); - --panel-solid: #101828; - --line: rgba(56, 189, 248, 0.22); - --line-strong: rgba(56, 189, 248, 0.45); - --text: #e8f1ff; - --muted: #8aa0b8; - --accent: #22d3ee; - --accent-2: #38bdf8; - --accent-deep: #0ea5e9; - --ok: #34d399; - --bad: #fb7185; - --shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 18px 50px rgba(0, 0, 0, 0.45); - --radius: 14px; - --font: "IBM Plex Sans", "Segoe UI", sans-serif; - --font-display: "Orbitron", "IBM Plex Sans", sans-serif; - --hub-title-size: 1.75rem; - --hub-title-lh: 1.25; - --hub-title-h: calc(var(--hub-title-size) * var(--hub-title-lh)); - --hub-title-pad-top: calc(var(--hub-title-h) * 1.5); - --hub-title-nav-gap: calc(var(--hub-title-h) * 0.8); - --hub-title-gap: calc(var(--hub-title-h) * 1.1); -} -* { box-sizing: border-box; } -html, body { min-height: 100%; } -body { - margin: 0; - font-family: var(--font); - color: var(--text); - background: - radial-gradient(1200px 600px at 12% -10%, rgba(14, 165, 233, 0.18), transparent 55%), - radial-gradient(900px 500px at 90% 10%, rgba(34, 211, 238, 0.1), transparent 50%), - linear-gradient(180deg, var(--bg-2), var(--bg) 40%, #05080f); - background-attachment: fixed; -} -body::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.35; - background-image: - linear-gradient(rgba(56, 189, 248, 0.06) 1px, transparent 1px), - linear-gradient(90deg, rgba(56, 189, 248, 0.06) 1px, transparent 1px); - background-size: 48px 48px; - mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%); -} -body > * { position: relative; z-index: 1; } -a { color: var(--accent-2); text-decoration: none; } -a:hover { color: #7dd3fc; } - -.topbar-brand { - display: block; - margin: 0 auto var(--hub-title-nav-gap); - padding-top: var(--hub-title-pad-top); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - font-size: var(--hub-title-size); - font-weight: 700; - letter-spacing: 0; - text-indent: 0; - color: #dbe4ff; - line-height: var(--hub-title-lh); - text-align: center; -} -.topbar-brand:hover { - color: #ffffff; -} -.topbar-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); - align-items: center; - gap: 10px 12px; - margin: 0 0 var(--hub-title-gap); -} -.topbar-nav { - grid-column: 2; - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 8px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -} -.topbar-nav a { - color: #8fc8ff; - font-size: 1rem; - font-weight: 400; - letter-spacing: 0; - padding: 6px 10px; - border: 1px solid #304164; - border-radius: 8px; - background: #151a2a; -} -.topbar-nav a:hover { - color: #dbe4ff; - border-color: #3d5278; -} -.topbar-nav a.active { - color: #dbe4ff; - background: #2a3f6c; - text-shadow: none; -} -.top-nav-spot-tickers { - grid-column: 3; - justify-self: end; - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; - font-variant-numeric: tabular-nums; -} -.nav-spot-row { - display: grid; - grid-template-columns: 3px 18px minmax(4.6em, auto) minmax(5em, auto) minmax(3.6em, auto) minmax(3.8em, auto); - align-items: center; - column-gap: 7px; - padding: 3px 9px 3px 5px; - border: 1px solid transparent; - border-radius: 6px; - background: rgba(16, 22, 36, 0.72); - line-height: 1.2; - white-space: nowrap; - font-size: 0.88rem; -} -.nav-spot-row:hover { - border-color: #3a4568; -} -.nav-spot-ribbon { - width: 3px; - height: 16px; - border-radius: 1px 2px 2px 1px; - background: #e24b6a; - justify-self: center; -} -.nav-spot-icon { - width: 18px; - height: 18px; - border-radius: 50%; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 0.72rem; - font-weight: 700; - color: #fff; -} -.nav-spot-icon--eth { background: #627eea; } -.nav-spot-icon--btc { background: #f2a900; color: #1a1200; } -.nav-spot-sym { - color: #e8ecff; - font-weight: 600; - letter-spacing: 0.01em; -} -.nav-spot-last, -.nav-spot-chg, -.nav-spot-pct { - text-align: right; - font-weight: 600; -} -.nav-spot--up .nav-spot-last, -.nav-spot--up .nav-spot-chg, -.nav-spot--up .nav-spot-pct { color: #2dd4a8; } -.nav-spot--down .nav-spot-last, -.nav-spot--down .nav-spot-chg, -.nav-spot--down .nav-spot-pct { color: #ff6b7a; } -.nav-spot--flat .nav-spot-last, -.nav-spot--flat .nav-spot-chg, -.nav-spot--flat .nav-spot-pct { color: #9aa3bf; } -.topbar-logout { - position: fixed; - top: 16px; - right: 22px; - z-index: 20; - color: var(--muted); - font-size: 0.82rem; - letter-spacing: 0.04em; -} -.topbar-logout:hover { - color: #e8f1ff; -} -@media (max-width: 1100px) { - .topbar-row { - grid-template-columns: 1fr; - justify-items: center; - } - .topbar-nav, - .top-nav-spot-tickers { - grid-column: 1; - justify-self: center; - } -} -@media (max-width: 720px) { - :root { --hub-title-size: 1rem; } - .topbar-nav a { - padding: 8px 12px; - font-size: 0.78rem; - } - .topbar-logout { - top: 10px; - right: 14px; - } -} - -.main { - width: 100%; - max-width: 1800px; - margin: 0 auto; - padding: 0 clamp(24px, 4vw, 64px) 16px; -} -body.page-dashboard .main, -body.page-instances .main, -body.page-stats .main, -body.page-settings .main, -body.page-cond-orders .main { - max-width: 1800px; - width: 100%; - margin: 0 auto; - padding: 0 clamp(24px, 4vw, 64px) 16px; -} -body.page-settings .settings-shell { - max-width: none; - width: 100%; -} -body.page-settings .settings-grid { - max-width: none; -} -body.page-desk { - height: 100vh; - overflow: hidden; -} -body.page-desk .topbar-brand, -body.page-desk .topbar-row { - display: none; -} -body.page-desk .main { - max-width: none; - width: 100%; - height: 100vh; - max-height: 100vh; - margin: 0; - padding: 10px 12px 10px; - display: flex; - flex-direction: column; - overflow: hidden; -} -body.page-login { - min-height: 100vh; -} -body.page-login .main { - max-width: none; - min-height: 100vh; - margin: 0; - padding: 24px; - display: flex; - align-items: center; - justify-content: center; -} - -.page-head { display: flex; align-items: center; gap: 12px; } -.page-head h1 { - margin: 0; - font-family: var(--font-display); - font-size: 1.35rem; - font-weight: 600; - letter-spacing: 0.04em; -} -.overview-bj-clock { - margin-left: auto; - display: inline-flex; - align-items: center; - flex-wrap: wrap; - gap: 10px; - padding: 0; - border: 0; - background: transparent; - box-shadow: none; -} -.overview-bj-label { - font-size: 0.82rem; - letter-spacing: 0.02em; - text-transform: none; - color: var(--muted); - font-weight: 500; - white-space: nowrap; -} -.overview-bj-label::after { - content: ""; - display: inline-block; - width: 1px; - height: 12px; - margin-left: 10px; - vertical-align: -1px; - background: rgba(56, 189, 248, 0.35); -} -.overview-bj-time { - font-family: var(--font); - font-size: 1.05rem; - font-weight: 600; - letter-spacing: 0.02em; - color: var(--text); - font-variant-numeric: tabular-nums; - white-space: nowrap; -} -.overview-bj-meta { - display: inline-flex; - align-items: center; - gap: 8px; - font-size: 0.88rem; - font-weight: 550; - letter-spacing: 0.02em; - color: var(--text); - white-space: nowrap; -} -.overview-bj-meta::before { - content: ""; - display: inline-block; - width: 1px; - height: 12px; - background: rgba(56, 189, 248, 0.35); -} -.overview-bj-weekday, -.overview-bj-lunar { - color: var(--text); -} -.overview-bj-clock.is-weekend .overview-bj-time, -.overview-bj-clock.is-weekend .overview-bj-weekday, -.overview-bj-clock.is-weekend .overview-bj-lunar { - color: var(--bad); -} -.overview-bj-clock.is-weekend .overview-bj-meta::before { - background: rgba(251, 113, 133, 0.5); -} -@media (max-width: 720px) { - .page-head { flex-wrap: wrap; } - .overview-bj-clock { - margin-left: 0; - order: 3; - width: 100%; - justify-content: flex-start; - padding-top: 2px; - } -} -.muted { color: var(--muted); font-size: 0.9rem; } -.flash { - background: rgba(14, 165, 233, 0.12); - border: 1px solid var(--line-strong); - padding: 8px 12px; - border-radius: 10px; - margin-bottom: 12px; - box-shadow: var(--shadow); -} - -/* —— 登录 —— */ -.login-wrap { - width: 100%; - max-width: 420px; -} -.login-card { - width: 100%; - margin: 0; - padding: 32px 28px 28px; - border-radius: 18px; - background: linear-gradient(160deg, rgba(18, 32, 54, 0.92), rgba(10, 16, 28, 0.95)); - border: 1px solid var(--line-strong); - box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); - backdrop-filter: blur(16px); -} -.login-card h1 { - margin: 0 0 8px; - font-family: var(--font-display); - font-size: 1.45rem; - font-weight: 600; - letter-spacing: 0.06em; - background: linear-gradient(90deg, #e0f2fe, var(--accent)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} -.login-card .login-sub { - margin: 0 0 22px; - color: var(--muted); - font-size: 0.88rem; - line-height: 1.45; -} -.login-card .stack label { - display: block; - margin: 0 0 14px; - font-size: 0.82rem; - color: #b6c7da; - font-weight: 500; -} -.login-card input { - margin-top: 6px; - padding: 11px 12px; - border-radius: 10px; - border: 1px solid var(--line); - background: rgba(5, 10, 18, 0.85); - transition: border-color 0.15s ease, box-shadow 0.15s ease; -} -.login-card input:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); -} -.login-card button[type="submit"] { - width: 100%; - margin-top: 8px; - padding: 12px 14px; - font-weight: 600; - letter-spacing: 0.08em; - background: linear-gradient(90deg, var(--accent-deep), var(--accent)); - color: #041018; - box-shadow: 0 8px 24px rgba(14, 165, 233, 0.28); -} -.login-card button[type="submit"]:hover { - filter: brightness(1.05); -} - -.login-card .login-honeypot { - position: absolute !important; - left: -10000px !important; - top: auto !important; - width: 1px !important; - height: 1px !important; - opacity: 0 !important; - pointer-events: none !important; - overflow: hidden !important; -} -.login-card .login-form { position: relative; } - -.stack label, .form-grid label { display: block; margin: 8px 0; } -input[type="text"], input[type="password"], input[type="number"], input[type="url"], input:not([type]), select { - width: 100%; - padding: 8px 10px; - border-radius: 8px; - border: 1px solid var(--line); - background: #0a1220; - color: var(--text); -} -button, .btn { - display: inline-block; - margin-top: 8px; - padding: 8px 12px; - border-radius: 8px; - border: 0; - background: linear-gradient(90deg, var(--accent-deep), #06b6d4); - color: #041018; - font-weight: 600; - cursor: pointer; -} -.btn:hover, button:hover { filter: brightness(1.06); } -.btn-danger { background: #9f1239; color: #fff; } -.btn-close-disabled, -.btn-close-disabled:hover, -.btn.btn-close-disabled:disabled { - background: #3a3f4b; - color: #8b93a7; - border: 1px solid #4a5160; - cursor: not-allowed; - filter: none; - opacity: 1; -} -.btn-sm { - padding: 3px 8px; - font-size: 0.75rem; - border-radius: 6px; - font-weight: 600; -} -.inst-pick { - display: flex; - flex-wrap: wrap; - gap: 10px 16px; -} -.inst-pick .check { margin: 0; } -.btn-sm { - padding: 3px 8px; - font-size: 0.75rem; - border-radius: 6px; - font-weight: 600; -} -.btn[disabled] { - opacity: 0.45; - cursor: not-allowed; - filter: none; -} -.panel { - background: var(--panel); - border: 1px solid var(--line); - border-radius: var(--radius); - padding: 14px; - margin: 14px 0; - box-shadow: var(--shadow); - backdrop-filter: blur(10px); -} -.form-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 10px; - align-items: end; -} -.check { display: flex !important; align-items: center; gap: 8px; } -.update-version { - font-size: 0.82rem; - font-variant-numeric: tabular-nums; -} -.update-version.online { color: var(--ok); } -.update-version.offline { color: var(--bad); } -.update-status { - font-size: 0.8rem; - min-height: 1.2em; - margin-left: 6px; -} -.update-status.pending { color: var(--accent-2); } -.update-status.ok { color: var(--ok); } -.update-status.err { color: var(--bad); } -.update-table td { vertical-align: middle; } - -/* 实例页 */ -.inst-page-head { - display: flex; - align-items: flex-end; - justify-content: space-between; - gap: 16px; - flex-wrap: wrap; -} -.inst-page-head-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} -.inst-page-head-actions .inst-head-btn { - box-sizing: border-box; - min-width: 7.5rem; - height: 40px; - padding: 0 16px; - margin: 0; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 0.88rem; - font-weight: 600; - letter-spacing: 0.02em; - border-radius: 10px; - line-height: 1; -} -.inst-add-trigger { - cursor: pointer; -} -.inst-add-check { - position: absolute; - opacity: 0; - pointer-events: none; - width: 0; - height: 0; -} -/* 盖过 .settings-shell 的 920 限制;带鱼屏卡片铺满 1800 */ -.settings-shell.inst-shell, -.inst-shell { - max-width: none !important; - width: 100%; -} -@media (min-aspect-ratio: 21/9) { - .settings-shell.inst-shell, - .inst-shell { - max-width: 1800px !important; - width: 100%; - } -} -.inst-add-panel { - display: none; - border-bottom: 1px solid rgba(56, 189, 248, 0.12); -} -#inst-add-toggle:checked ~ .inst-shell .inst-add-panel { - display: block; -} -.inst-list-head { - border-bottom: 1px solid rgba(56, 189, 248, 0.12); -} -.inst-table-wrap { - padding: 14px 16px 18px; - overflow-x: auto; -} -.inst-empty { - margin: 8px 4px 12px; - line-height: 1.5; - font-size: 0.88rem; -} -.inst-table { - width: 100%; - border-collapse: collapse; - font-size: 0.88rem; -} -.inst-table th, -.inst-table td { - padding: 12px 10px; - border-bottom: 1px solid rgba(56, 189, 248, 0.12); - text-align: left; - vertical-align: middle; -} -.inst-table th { - color: var(--accent-2); - font-weight: 600; - white-space: nowrap; - background: rgba(8, 16, 30, 0.7); -} -.inst-table tr.inst-row:hover td { - background: rgba(34, 211, 238, 0.04); -} -.inst-td-name { min-width: 6rem; } -.inst-td-url { - max-width: 18rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 0.8rem; -} -.inst-td-token { - white-space: nowrap; - font-variant-numeric: tabular-nums; -} -.inst-token-mask { - color: var(--muted); - letter-spacing: 0.08em; - font-size: 0.82rem; -} -.inst-td-path code { - font-size: 0.8rem; - color: #b6c7da; -} -.inst-td-tags { - max-width: 8rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.inst-td-ops { - white-space: nowrap; -} -.inst-td-ops .btn, -.inst-td-ops .btn-danger, -.inst-td-ops label.btn { - margin-top: 0; - display: inline-flex; - align-items: center; - cursor: pointer; -} -.inst-inline-del { - display: inline; - margin: 0; -} -.inst-edit-check { - position: absolute; - opacity: 0; - pointer-events: none; - width: 0; - height: 0; -} -.inst-edit-row > td { - padding: 0; - border-bottom: 1px solid rgba(56, 189, 248, 0.16); - background: rgba(5, 12, 22, 0.35); -} -.inst-edit-panel { - display: none; - padding: 4px 8px 12px; -} -.inst-edit-check:checked + .inst-edit-panel { - display: block; -} -.inst-pill { - display: inline; - padding: 0; - border: 0; - border-radius: 0; - background: none; - font-size: 0.86rem; - font-weight: 600; - letter-spacing: 0.02em; -} -.inst-pill--on { - color: #86efac; -} -.inst-pill--off { - color: #fda4af; -} -.inst-card-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - margin-top: 4px; -} -.inst-card-actions .btn, -.inst-card-actions .settings-primary { - margin-top: 0; -} -.inst-token-wrap { - display: flex; - gap: 8px; - align-items: stretch; - margin-top: 6px; -} -.inst-token-wrap .inst-token-input { - margin-top: 0 !important; - flex: 1; - min-width: 0; -} -.inst-token-wrap .inst-token-toggle { - flex: 0 0 auto; - align-self: center; - margin-top: 0; -} -@media (max-width: 720px) { - .inst-page-head { align-items: flex-start; } - .settings-row-2 { grid-template-columns: 1fr; } - .inst-td-ops { white-space: normal; } -} -.overview-table-wrap { - overflow-x: auto; - margin-top: 12px; - border: 1px solid var(--line); - border-radius: var(--radius); - background: var(--panel); - box-shadow: var(--shadow); - backdrop-filter: blur(10px); -} -.overview-table { - width: 100%; - border-collapse: collapse; - font-size: 0.88rem; -} -.overview-table th, -.overview-table td { - padding: 10px 12px; - border-bottom: 1px solid rgba(56, 189, 248, 0.12); - text-align: center; - vertical-align: middle; -} -.overview-table th { - color: var(--accent-2); - font-weight: 600; - background: rgba(8, 16, 30, 0.9); - white-space: nowrap; - letter-spacing: 0.03em; -} -.overview-table tr:last-child td { border-bottom: 0; } -.overview-table .status-on { color: var(--ok); } -.overview-table .status-off { color: var(--bad); } -.overview-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } -.overview-actions .btn { margin-top: 0; } - -.overview-summary { - display: grid; - gap: 10px; - margin: 0 0 14px; -} -.overview-mode-wrap { - overflow-x: auto; - border-radius: var(--radius); - border: 1px solid var(--line); - background: var(--panel); - box-shadow: var(--shadow); -} -.overview-mode-head { - display: flex; - align-items: baseline; - justify-content: space-between; - gap: 8px; - padding: 12px 14px 0; -} -.overview-mode-head strong { - font-size: 0.92rem; - letter-spacing: 0.02em; -} -.overview-mode-table { - width: 100%; - border-collapse: collapse; - font-size: 0.88rem; -} -.overview-mode-table th, -.overview-mode-table td { - padding: 10px 12px; - text-align: center; - border-bottom: 1px solid rgba(56, 189, 248, 0.1); - font-variant-numeric: tabular-nums; -} -.overview-mode-table tr:last-child td { border-bottom: 0; } -.overview-mode-table th { - color: var(--muted); - font-weight: 600; - font-size: 0.78rem; - background: rgba(5, 12, 22, 0.45); -} -.overview-mode-table td:first-child, -.overview-mode-table th:first-child { - text-align: left; - white-space: nowrap; -} -.overview-mode-table .status-on { color: var(--ok); font-weight: 700; } -.overview-mode-table .status-off { color: var(--bad); font-weight: 700; } -.overview-mode-tag { - display: inline-block; - padding: 2px 8px; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.03em; -} -.overview-mode-tag--sim { - color: #7dd3fc; - background: rgba(56, 189, 248, 0.14); -} -.overview-mode-tag--live { - color: #6ee7b7; - background: rgba(52, 211, 153, 0.14); -} -.overview-table td strong { - display: inline-block; - margin-right: 8px; - vertical-align: middle; -} -.overview-cond-tag { - display: inline-block; - margin-top: 4px; - padding: 2px 8px; - border-radius: 999px; - font-size: 0.72rem; - font-weight: 700; - white-space: nowrap; - vertical-align: middle; -} -.overview-cond-tag.is-armed { - color: #7dd3fc; - background: rgba(56, 189, 248, 0.16); -} -.overview-cond-tag.is-trig { - color: #fbbf24; - background: rgba(251, 191, 36, 0.16); -} -.overview-cond-tag.is-open { - color: #6ee7b7; - background: rgba(52, 211, 153, 0.16); -} -.overview-cond-wait-line { - font-size: 0.8rem; - font-weight: 600; -} -.overview-cond-src { - display: inline-block; - margin-left: 6px; - padding: 0 6px; - border-radius: 999px; - font-size: 0.68rem; - font-weight: 700; - color: #7dd3fc; - background: rgba(56, 189, 248, 0.14); - vertical-align: middle; -} -.pos-brief { - margin: 0; - padding-left: 0; - list-style-position: inside; - color: var(--muted); - font-size: 0.8rem; -} -.pos-brief li { - margin: 2px 0; -} -.exit-brief .exit-set { - color: var(--ok); - font-weight: 600; -} -.exit-brief .exit-unset { - color: var(--bad); - font-weight: 600; -} -.pos-exit { - margin-top: 2px; - font-size: 0.76rem; - color: var(--text); - opacity: 0.9; -} -.pos-exit.muted { - color: var(--muted); - opacity: 1; -} -.card-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 12px; - margin-top: 12px; -} -.card { - background: var(--panel); - border: 1px solid var(--line); - border-radius: var(--radius); - padding: 12px; - box-shadow: var(--shadow); -} -.card .status-on { color: var(--ok); } -.card .status-off { color: var(--bad); } -.card table { width: 100%; font-size: 0.8rem; border-collapse: collapse; } -.card td, .card th { border-bottom: 1px solid var(--line); padding: 4px 2px; text-align: left; } - -.desk { - display: grid; - grid-template-columns: 220px minmax(0, 1fr); - gap: 12px; - flex: 1; - min-height: 0; - max-width: none; - transition: grid-template-columns 0.18s ease; -} -.desk.is-side-collapsed { - grid-template-columns: 48px minmax(0, 1fr); -} -.desk-side { - background: var(--panel); - border: 1px solid var(--line); - border-radius: var(--radius); - padding: 10px; - min-width: 0; - min-height: 0; - overflow: auto; - box-shadow: var(--shadow); - backdrop-filter: blur(10px); -} -.desk-side-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - margin-bottom: 8px; -} -.desk-side-title { - margin: 0; - font-size: 0.95rem; - font-family: var(--font-display); - letter-spacing: 0.04em; - white-space: nowrap; - color: var(--accent-2); -} -.desk-side-toggle { - flex: 0 0 auto; - margin-top: 0; - width: 28px; - height: 28px; - padding: 0; - border-radius: 8px; - border: 1px solid var(--line); - background: rgba(8, 16, 30, 0.9); - color: var(--text); - font-size: 1.1rem; - line-height: 1; - cursor: pointer; -} -.desk-side-toggle:hover { border-color: var(--accent); color: var(--accent); } -.desk-side-toggle--bar { display: none; } -.desk.is-side-collapsed .desk-side-title, -.desk.is-side-collapsed .desk-list-name, -.desk.is-side-collapsed .desk-list-empty { display: none; } -.desk.is-side-collapsed .desk-side { padding: 8px 6px; } -.desk.is-side-collapsed .desk-side-head { - justify-content: center; - margin-bottom: 0; -} -.desk.is-side-collapsed .desk-side-toggle { transform: rotate(180deg); } -.desk.is-side-collapsed .desk-list { display: none; } -.desk.is-side-collapsed .desk-side-toggle--bar { - display: inline-flex; - align-items: center; - justify-content: center; -} -.desk-list { list-style: none; padding: 0; margin: 0; } -.desk-list li { margin: 6px 0; } -.desk-list .desk-group-label { - margin: 10px 0 4px; - padding: 0 2px; - list-style: none; -} -.desk-list .desk-group-label:first-child { margin-top: 0; } -.desk.is-side-collapsed .desk-group-label { display: none; } -.desk-list li a { - display: block; - padding: 7px 9px; - border-radius: 8px; - color: var(--muted); - border: 1px solid transparent; -} -.desk-list li a:hover { - background: rgba(34, 211, 238, 0.08); - color: #fff; - border-color: rgba(34, 211, 238, 0.2); -} -.desk-list li.active a { - color: #fff; - font-weight: 600; - background: rgba(34, 211, 238, 0.16); - border-color: rgba(34, 211, 238, 0.35); -} -.desk-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; } -.desk-toolbar { - display: flex; gap: 10px; align-items: center; flex-wrap: wrap; - margin-bottom: 8px; - flex-shrink: 0; -} -.desk-frame { - flex: 1; - width: 100%; - min-height: 0; - border: 1px solid var(--line); - border-radius: var(--radius); - background: #000; - box-shadow: var(--shadow); -} -.empty { padding: 40px; color: var(--muted); } - -/* —— 系统设置 —— */ -.settings-head { - margin-bottom: 8px; - align-items: flex-start; -} -.settings-eyebrow { - margin: 0 0 4px; - font-size: 0.72rem; - letter-spacing: 0.16em; - text-transform: uppercase; - color: var(--accent); - font-weight: 600; -} -.settings-lead { margin: 6px 0 0; max-width: 520px; line-height: 1.45; } -.settings-shell { - max-width: 920px; - margin: 0; - padding: 0; - overflow: hidden; - background: - linear-gradient(165deg, rgba(20, 36, 58, 0.92), rgba(10, 16, 28, 0.96)); - border: 1px solid var(--line-strong); - box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); -} -.settings-tab-radio { - position: absolute; - opacity: 0; - pointer-events: none; - width: 0; - height: 0; -} -.settings-tabs { - display: flex; - flex-wrap: wrap; - gap: 6px; - padding: 14px 16px 0; - border-bottom: 1px solid rgba(56, 189, 248, 0.14); - background: rgba(5, 12, 22, 0.35); -} -.settings-tab-btn { - display: inline-flex; - align-items: center; - padding: 9px 14px; - border-radius: 10px 10px 0 0; - border: 1px solid transparent; - border-bottom: 0; - color: var(--muted); - font-size: 0.88rem; - font-weight: 550; - cursor: pointer; - user-select: none; - transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; -} -.settings-tab-btn:hover { - color: var(--text); - background: rgba(56, 189, 248, 0.08); -} -#hub-set-account:checked ~ .settings-tabs label[for="hub-set-account"], -#hub-set-wechat:checked ~ .settings-tabs label[for="hub-set-wechat"], -#hub-set-backup:checked ~ .settings-tabs label[for="hub-set-backup"], -#hub-set-update:checked ~ .settings-tabs label[for="hub-set-update"] { - color: var(--text); - background: rgba(34, 211, 238, 0.12); - border-color: rgba(56, 189, 248, 0.35); - box-shadow: inset 0 -2px 0 var(--accent); -} -.settings-panels { - padding: 0; -} -.settings-panel { - display: none; -} -#hub-set-account:checked ~ .settings-panels .settings-panel--account, -#hub-set-wechat:checked ~ .settings-panels .settings-panel--wechat, -#hub-set-backup:checked ~ .settings-panels .settings-panel--backup, -#hub-set-update:checked ~ .settings-panels .settings-panel--update { - display: block; -} -.settings-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); - gap: 18px; - align-items: stretch; - max-width: 980px; -} -.settings-card { - max-width: none; - margin: 0; - padding: 0; - overflow: hidden; - background: - linear-gradient(165deg, rgba(20, 36, 58, 0.92), rgba(10, 16, 28, 0.96)); - border: 1px solid var(--line-strong); - box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); -} -.settings-card-head { - padding: 20px 22px 16px; - border-bottom: 1px solid rgba(56, 189, 248, 0.12); - background: linear-gradient(180deg, rgba(34, 211, 238, 0.06), transparent); -} -.settings-backup-body { - padding: 18px 22px 22px; - display: flex; - flex-direction: column; - gap: 20px; -} -.backup-block { - padding: 16px 16px 12px; - border: 1px solid rgba(56, 189, 248, 0.14); - border-radius: 12px; - background: rgba(5, 12, 22, 0.4); -} -.backup-block-head h3 { - margin: 0 0 6px; - font-size: 1rem; - font-weight: 600; -} -.settings-panel--account .settings-form, -.settings-panel--wechat .settings-form { - max-width: 560px; -} -.backup-block-head .field-hint { - margin: 0 0 12px; -} -.settings-field--inline { - margin: 0; - min-width: 12rem; -} -.settings-field--inline select { - margin-top: 6px; - min-width: 12rem; - padding: 9px 10px; - border-radius: 10px; - border: 1px solid var(--line); - background: rgba(5, 10, 18, 0.85); - color: var(--text); -} -.settings-card-head h2 { - margin: 8px 0 6px; - font-family: var(--font-display); - font-size: 1.05rem; - font-weight: 600; - letter-spacing: 0.04em; -} -.settings-card-head .muted { - margin: 0; - line-height: 1.45; - font-size: 0.86rem; -} -.settings-badge { - display: inline-flex; - align-items: center; - padding: 3px 8px; - border-radius: 999px; - font-size: 0.68rem; - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - color: #041018; - background: linear-gradient(90deg, var(--accent-deep), var(--accent)); -} -.settings-badge--alert { - background: linear-gradient(90deg, #0d9488, #34d399); -} -.settings-form { - max-width: none; - padding: 16px 20px 20px; -} -.settings-field { - display: flex; - flex-direction: column; - align-items: stretch; - margin: 0 0 14px; - font-size: 0.82rem; - color: #b6c7da; - font-weight: 500; -} -.settings-label { - display: block; - margin-bottom: 6px; - font-size: 0.82rem; - color: #b6c7da; - font-weight: 500; -} -.settings-form input[type="text"], -.settings-form input[type="password"], -.settings-form input[type="number"], -.settings-form input[type="url"] { - display: block; - width: 100%; - margin-top: 6px; - padding: 11px 12px; - border-radius: 10px; - border: 1px solid var(--line); - background: rgba(5, 10, 18, 0.85); - color: #f0f7ff; - caret-color: var(--accent); - transition: border-color 0.15s ease, box-shadow 0.15s ease; -} -.settings-form input::placeholder { - color: rgba(138, 160, 184, 0.75); -} -.settings-form input:-webkit-autofill, -.settings-form input:-webkit-autofill:hover, -.settings-form input:-webkit-autofill:focus { - -webkit-text-fill-color: #f0f7ff; - box-shadow: 0 0 0 1000px #0a1220 inset; - transition: background-color 99999s ease-out; -} -.settings-form input:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); -} -.settings-readonly { - margin-top: 6px; - padding: 11px 12px; - border-radius: 10px; - border: 1px solid rgba(56, 189, 248, 0.14); - background: rgba(8, 14, 24, 0.55); - color: var(--text); - font-weight: 600; - letter-spacing: 0.02em; -} -.settings-divider { - height: 1px; - margin: 4px 0 16px; - background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.28), transparent); -} -.settings-row-2 { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} -.settings-hint { - margin: -4px 0 14px; - line-height: 1.4; -} -.settings-switch { - display: flex !important; - align-items: flex-start; - gap: 12px; - margin: 0 0 16px !important; - padding: 12px 14px; - border-radius: 12px; - border: 1px solid rgba(56, 189, 248, 0.16); - background: rgba(5, 12, 22, 0.55); - cursor: pointer; -} -.settings-switch input { - position: absolute; - opacity: 0; - width: 0; - height: 0; -} -.settings-switch-ui { - flex: 0 0 auto; - width: 42px; - height: 24px; - margin-top: 2px; - border-radius: 999px; - background: #1a2738; - border: 1px solid var(--line); - position: relative; - transition: background 0.18s ease, border-color 0.18s ease; -} -.settings-switch-ui::after { - content: ""; - position: absolute; - top: 2px; - left: 2px; - width: 18px; - height: 18px; - border-radius: 50%; - background: #8aa0b8; - transition: transform 0.18s ease, background 0.18s ease; -} -.settings-switch input:checked + .settings-switch-ui { - background: rgba(34, 211, 238, 0.25); - border-color: var(--accent); -} -.settings-switch input:checked + .settings-switch-ui::after { - transform: translateX(18px); - background: var(--accent); -} -.settings-switch-text { - display: flex; - flex-direction: column; - gap: 2px; - min-width: 0; -} -.settings-switch-text strong { - color: var(--text); - font-size: 0.9rem; -} -.settings-switch-text small { - color: var(--muted); - font-size: 0.78rem; - line-height: 1.35; -} -.settings-actions { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-top: 2px; -} -.backup-table { - width: 100%; - border-collapse: collapse; - font-size: 0.82rem; -} -.backup-table th, -.backup-table td { - padding: 8px 10px; - border-bottom: 1px solid rgba(56, 189, 248, 0.12); - text-align: left; - vertical-align: middle; -} -.backup-table th { - color: var(--muted); - font-weight: 550; -} -.backup-table code { - font-size: 0.74rem; - word-break: break-all; -} -.btn-sm { - display: inline-block; - padding: 3px 8px; - font-size: 0.74rem; - border-radius: 8px; - line-height: 1.3; -} -.settings-primary, -.settings-form button.settings-primary { - margin-top: 0; - padding: 11px 16px; - border-radius: 10px; - letter-spacing: 0.04em; - background: linear-gradient(90deg, var(--accent-deep), var(--accent)); - color: #041018; - box-shadow: 0 8px 22px rgba(14, 165, 233, 0.22); -} -.settings-actions .btn-secondary, -button.btn-secondary { - margin-top: 0; - padding: 10px 14px; - border-radius: 10px; - background: transparent; - color: var(--text); - border: 1px solid var(--line); - box-shadow: none; -} -.settings-actions .btn-secondary:hover, -button.btn-secondary:hover { - border-color: var(--accent); - filter: none; -} -.field-hint { - display: block; - margin-top: 4px; - font-size: 12px; - color: var(--muted); - font-weight: 400; -} -@media (max-width: 720px) { - .settings-row-2 { grid-template-columns: 1fr; } - .settings-grid { grid-template-columns: 1fr; } -} -input.readonly { - opacity: 0.75; - cursor: default; -} -.pnl-up { color: var(--ok); font-weight: 600; } -.pnl-down { color: var(--bad); font-weight: 600; } -.pnl-flat { color: var(--muted); } -.liq-ok { color: var(--text); } -.liq-warn { - color: #fbbf24; - font-weight: 600; -} -.liq-brief--warn { - border-left: 2px solid rgba(251, 191, 36, 0.7); - padding-left: 8px; -} - -@media (max-width: 800px) { - .desk, - .desk.is-side-collapsed { grid-template-columns: 1fr; } - .desk-side-toggle--bar { display: none !important; } -} -@media (min-width: 2000px) { - body.page-desk .main { - max-width: none; - padding-left: 12px; - padding-right: 12px; - } -} - -.cond-head { justify-content: space-between; align-items: flex-start; } -.cond-head-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} -.cond-lead { margin: 6px 0 0; max-width: 720px; line-height: 1.5; } -.cond-add-check { - position: absolute; - opacity: 0; - pointer-events: none; - width: 0; - height: 0; -} -.cond-layout { display: grid; gap: 16px; } -.cond-add-panel { display: none; } -#cond-add-toggle:checked ~ .cond-layout .cond-add-panel { - display: block; -} -.cond-card { padding: 18px 18px 16px; } -.cond-card-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - margin-bottom: 14px; -} -.cond-card-head h2 { - margin: 0; - font-size: 1.02rem; - letter-spacing: 0.03em; -} -.cond-chip { - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.06em; - color: #041018; - background: linear-gradient(90deg, var(--accent-deep), var(--accent)); - border-radius: 999px; - padding: 3px 10px; -} -.cond-section { - border-top: 1px solid rgba(56, 189, 248, 0.12); - padding: 14px 0 4px; -} -.cond-section:first-of-type { border-top: 0; padding-top: 0; } -.cond-section-title { - font-size: 0.78rem; - color: var(--accent-2); - letter-spacing: 0.08em; - margin-bottom: 10px; - font-weight: 600; -} -.cond-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 12px 14px; - align-items: end; -} -.cond-grid label { - margin: 0; - font-size: 0.8rem; - color: #b6c7da; -} -.cond-grid input, -.cond-grid select { - margin-top: 6px; -} -.cond-trigger-hint { - grid-column: 1 / -1; - padding: 9px 12px; - border-radius: 10px; - font-size: 0.82rem; - line-height: 1.45; - border: 1px solid var(--line); - background: rgba(8, 16, 30, 0.7); - color: var(--text); -} -.cond-trigger-hint.is-put { border-color: rgba(251, 113, 133, 0.35); } -.cond-trigger-hint.is-call { border-color: rgba(52, 211, 153, 0.35); } -.cond-switch { - display: flex !important; - align-items: center; - gap: 8px; - min-height: 62px; -} -.cond-switch input { width: auto; margin: 0; } -.cond-inst-group + .cond-inst-group { margin-top: 14px; } -.cond-inst-group-label { margin-bottom: 8px; } -.cond-inst-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 10px; -} -.cond-inst { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - padding: 10px 12px; - border-radius: 10px; - border: 1px solid var(--line); - background: rgba(8, 16, 30, 0.72); - cursor: pointer; -} -.cond-inst input { width: auto; margin: 0; } -.cond-inst-name { flex: 1; font-weight: 600; } -.cond-inst-tag { color: var(--muted); font-size: 0.75rem; } -.cond-inst.is-off { opacity: 0.5; cursor: not-allowed; } -.cond-actions { - display: flex; - align-items: center; - gap: 12px; - margin-top: 14px; -} -.cond-empty { padding: 28px 8px; text-align: center; } -.cond-st { - display: inline-block; - min-width: 64px; - padding: 2px 8px; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 600; -} -.cond-st.st-armed { color: var(--accent-2); background: rgba(56, 189, 248, 0.12); } -.cond-st.st-trig { color: #fbbf24; background: rgba(251, 191, 36, 0.12); } -.cond-st.st-open { color: var(--ok); background: rgba(52, 211, 153, 0.12); } -.cond-st.st-done { color: var(--muted); background: rgba(138, 160, 184, 0.12); } -.cond-table-wrap { margin-top: 0; } - -/* —— 数据统计 —— */ -.stats-head { - justify-content: space-between; - align-items: flex-start; - flex-wrap: wrap; - gap: 12px; - margin-bottom: 4px; -} -.stats-window-tabs { - display: flex; - flex-wrap: wrap; - gap: 8px; -} -.stats-win-btn { - margin: 0; - padding: 7px 12px; - border-radius: 999px; - border: 1px solid var(--line); - background: rgba(8, 14, 24, 0.7); - color: var(--muted); - font-weight: 600; - box-shadow: none; -} -.stats-win-btn.is-active { - color: #041018; - border-color: transparent; - background: linear-gradient(90deg, var(--accent-deep), var(--accent)); -} -#stats-status.err { color: var(--bad); } -.stats-kpi-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 12px; -} -.stats-kpi-card { - padding: 12px 14px; - border-radius: 12px; - border: 1px solid rgba(56, 189, 248, 0.14); - background: rgba(5, 12, 22, 0.55); -} -.stats-kpi-label { - font-size: 0.75rem; - color: var(--muted); - margin-bottom: 6px; -} -.stats-kpi-value { - font-size: 1.15rem; - font-weight: 700; - letter-spacing: 0.02em; -} -.stats-card-head-inline { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 12px; - margin-bottom: 12px; -} -.stats-card-head-inline h2 { - margin: 0 0 4px; - font-family: var(--font-display); - font-size: 1.05rem; - letter-spacing: 0.04em; -} -.stats-card-head-inline .muted { - margin: 0; - max-width: 640px; - line-height: 1.45; -} -.stats-curve-toggle { - display: flex; - align-items: center; - gap: 8px; - white-space: nowrap; - color: var(--muted); - font-size: 0.86rem; -} -.stats-curve-toggle input { width: auto; margin: 0; } -.stats-chart-wrap { - position: relative; - width: 100%; - min-height: 320px; - border-radius: 12px; - border: 1px solid rgba(56, 189, 248, 0.12); - background: rgba(4, 10, 18, 0.65); - overflow: hidden; -} -#stats-curve-canvas { - display: block; - width: 100%; - height: 320px; -} -.stats-chart-empty { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; -} -.stats-legend { - display: flex; - flex-wrap: wrap; - gap: 10px 14px; - margin-top: 10px; -} -.stats-legend-item { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.8rem; - color: var(--muted); -} -.stats-legend-item i { - width: 10px; - height: 10px; - border-radius: 50%; - display: inline-block; -} -.stats-table th, -.stats-table td { - text-align: center; - vertical-align: middle; -} -.stats-table td:first-child, -.stats-table th:first-child { - text-align: left; -} -.stats-err-tip { - margin-top: 4px; - font-size: 0.75rem; -} -body.page-stats .main { - max-width: 1800px; -} - -/* —— 手机单独壳:电脑样式不动,仅 html.hub-phone-html 启用 —— */ -.hub-phone-chrome { - display: none; -} -html.hub-phone-html .hub-desk-chrome { - display: none !important; -} -html.hub-phone-html .hub-phone-bar { - display: flex; -} -html.hub-phone-html .hub-phone-tabbar { - display: flex; -} -html.hub-phone-html .hub-phone-more { - display: block; -} -html.hub-phone-html body { - padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); -} -html.hub-phone-html body.page-desk { - height: auto; - overflow: auto; -} -html.hub-phone-html body.page-desk .main { - height: auto; - max-height: none; - display: block; - padding: 10px 14px 20px; -} -html.hub-phone-html .main { - max-width: none; - padding: 10px 14px 20px; -} -html.hub-phone-html .topbar-logout { - display: none; -} -.hub-phone-bar { - display: none; - align-items: center; - justify-content: space-between; - gap: 10px; - margin: 8px 0 12px; - padding: 8px 4px 10px; - border-bottom: 1px solid rgba(56, 189, 248, 0.16); -} -.hub-phone-bar-title { - font-size: 1.05rem; - font-weight: 700; - color: #dbe4ff; - white-space: nowrap; -} -.hub-phone-quotes { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; - font-variant-numeric: tabular-nums; -} -.hub-phone-quotes .nav-spot-row { - grid-template-columns: 16px minmax(4.2em, auto) minmax(3.4em, auto); - padding: 1px 6px 1px 4px; - font-size: 0.72rem; - background: transparent; - border: none; -} -.hub-phone-tabbar { - display: none; - position: fixed; - left: 0; - right: 0; - bottom: 0; - z-index: 40; - justify-content: space-around; - align-items: stretch; - gap: 4px; - padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); - background: rgba(10, 16, 28, 0.96); - border-top: 1px solid rgba(56, 189, 248, 0.22); - backdrop-filter: blur(10px); -} -.hub-phone-tab { - flex: 1; - appearance: none; - border: 0; - background: transparent; - color: #8aa0b8; - font: inherit; - font-size: 0.86rem; - font-weight: 600; - padding: 10px 4px; - text-align: center; - cursor: pointer; -} -.hub-phone-tab.is-active, -.hub-phone-tab[aria-expanded="true"] { - color: #e8f1ff; -} -.hub-phone-more { - display: none; -} -html.hub-phone-html .hub-phone-more { - pointer-events: none; -} -html.hub-phone-html.hub-phone-more-open .hub-phone-more, -html.hub-phone-html body.hub-phone-more-open .hub-phone-more { - pointer-events: auto; -} -.hub-phone-more-backdrop { - position: fixed; - inset: 0; - z-index: 45; - background: rgba(0, 0, 0, 0.45); - opacity: 0; - visibility: hidden; - transition: opacity 0.18s ease; -} -body.hub-phone-more-open .hub-phone-more-backdrop { - opacity: 1; - visibility: visible; -} -.hub-phone-more-sheet { - position: fixed; - left: 0; - right: 0; - bottom: 0; - z-index: 46; - max-height: min(78vh, 560px); - overflow: auto; - padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); - border-radius: 16px 16px 0 0; - background: #101828; - border: 1px solid rgba(56, 189, 248, 0.28); - transform: translateY(110%); - transition: transform 0.2s ease; -} -body.hub-phone-more-open .hub-phone-more-sheet { - transform: translateY(0); -} -.hub-phone-more-handle { - width: 42px; - height: 4px; - margin: 4px auto 10px; - border-radius: 99px; - background: #3a4568; -} -.hub-phone-more-title { - margin: 0 0 4px; - font-size: 1rem; -} -.hub-phone-more-hint { - margin: 0 0 12px; - font-size: 0.78rem; - color: var(--muted); -} -.hub-phone-more-nav { - display: flex; - flex-direction: column; - gap: 6px; -} -.hub-phone-more-nav a { - display: block; - padding: 12px 12px; - border-radius: 10px; - background: #151a2a; - border: 1px solid #304164; - color: #dbe4ff; -} -.hub-phone-more-nav a.is-active { - background: #2a3f6c; -} -.hub-phone-more-close { - display: block; - width: 100%; - margin-top: 14px; - padding: 10px; - border-radius: 10px; - border: 1px solid #304164; - background: transparent; - color: #8aa0b8; - font: inherit; -} -html.hub-phone-html .page-head { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px; - margin-bottom: 8px; -} -html.hub-phone-html .page-head h1 { - font-size: 1.15rem; - margin: 0; - flex: 1; -} -html.hub-phone-html .overview-bj-clock { - display: none; -} -html.hub-phone-html .overview-summary { - display: none !important; -} -html.hub-phone-html #overview-status { - font-size: 0.78rem; - margin: 0 0 10px; -} -.hub-phone-cards { - display: flex; - flex-direction: column; - gap: 14px; -} -.hub-phone-card { - background: rgba(16, 24, 40, 0.92); - border: 1px solid rgba(56, 189, 248, 0.2); - border-radius: 14px; - padding: 16px 16px 14px; -} -.hub-phone-card-head { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 6px; - margin-bottom: 12px; -} -.hub-phone-card-head strong { - font-size: 1.02rem; - line-height: 1.3; -} -.hub-phone-card-tags { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; -} -.hub-phone-card-pnl { - margin-bottom: 10px; -} -.hub-phone-card-pnl .muted { - display: block; - font-size: 0.72rem; - margin-bottom: 2px; -} -.hub-phone-card-pnl span:not(.muted) { - font-size: 1.35rem; - font-weight: 700; - font-variant-numeric: tabular-nums; - letter-spacing: -0.02em; -} -.hub-phone-card-kpis { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px 12px; - margin-bottom: 12px; -} -.hub-phone-card-kpis .muted { - display: block; - font-size: 0.72rem; - margin-bottom: 2px; -} -.hub-phone-card-pos { - font-size: 0.92rem; - line-height: 1.45; -} -.hub-phone-pos-line + .hub-phone-pos-line { - margin-top: 4px; -} -.hub-phone-card-foot { - margin-top: 8px; - font-size: 0.8rem; - line-height: 1.4; -} -.hub-phone-card-err { - margin: 0 0 8px; - font-size: 0.78rem; -} -.hub-phone-card-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 14px; -} -html.hub-phone-html .desk { - display: none !important; -} -.hub-phone-desk { - display: none; -} -html.hub-phone-html .hub-phone-desk { - display: block; -} -.hub-phone-desk-list { - list-style: none; - margin: 12px 0 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 8px; -} -.hub-phone-desk-open { - width: 100%; - text-align: left; -} -html.hub-phone-html .settings-row-2, -html.hub-phone-html .settings-grid { - display: block; -} -html.hub-phone-html .inst-table, -html.hub-phone-html .backup-table, -html.hub-phone-html .stats-table { - font-size: 0.78rem; -} -html.hub-phone-html .table-wrap { - overflow-x: auto; - -webkit-overflow-scrolling: touch; -} -html.hub-phone-html body.page-cond-orders .cond-lead { - display: none; -} -html.hub-phone-html body.page-cond-orders .cond-layout { - display: flex; - flex-direction: column; - gap: 14px; -} -html.hub-phone-html body.page-cond-orders .cond-card { - padding: 14px; - border-radius: 14px; -} -html.hub-phone-html body.page-cond-orders .cond-card-head { - margin-bottom: 10px; -} -html.hub-phone-html body.page-cond-orders .cond-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px 12px; -} -html.hub-phone-html body.page-cond-orders .cond-switch { - min-height: 0; - grid-column: 1 / -1; -} -html.hub-phone-html body.page-cond-orders .cond-inst-grid { - grid-template-columns: 1fr; -} -html.hub-phone-html body.page-cond-orders .cond-actions { - flex-direction: column; - align-items: stretch; -} -html.hub-phone-html body.page-cond-orders .cond-actions .btn { - width: 100%; -} -.hub-phone-cond-list { - display: flex; - flex-direction: column; - gap: 10px; -} -.hub-phone-cond { - padding: 12px 12px 10px; - border-radius: 12px; - border: 1px solid rgba(56, 189, 248, 0.18); - background: rgba(8, 16, 30, 0.72); -} -.hub-phone-cond-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - margin-bottom: 6px; -} -.hub-phone-cond-head strong { - font-size: 0.95rem; -} -.hub-phone-cond-main { - font-size: 0.98rem; - font-weight: 600; - line-height: 1.4; -} -.hub-phone-cond-meta, -.hub-phone-cond-msg { - margin-top: 4px; - font-size: 0.78rem; - line-height: 1.4; -} -.hub-phone-cond-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 10px; -} -html.hub-phone-html .login-wrap { - padding: 48px 16px 24px; -} -html.hub-phone-html .login-card { - width: 100%; - max-width: none; -} +@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Orbitron:wght@500;600&display=swap"); + +:root { + --bg: #070b14; + --bg-2: #0c1424; + --panel: rgba(16, 24, 40, 0.82); + --panel-solid: #101828; + --line: rgba(56, 189, 248, 0.22); + --line-strong: rgba(56, 189, 248, 0.45); + --text: #e8f1ff; + --muted: #8aa0b8; + --accent: #22d3ee; + --accent-2: #38bdf8; + --accent-deep: #0ea5e9; + --ok: #34d399; + --bad: #fb7185; + --shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 18px 50px rgba(0, 0, 0, 0.45); + --radius: 14px; + --font: "IBM Plex Sans", "Segoe UI", sans-serif; + --font-display: "Orbitron", "IBM Plex Sans", sans-serif; + --hub-title-size: 1.75rem; + --hub-title-lh: 1.25; + --hub-title-h: calc(var(--hub-title-size) * var(--hub-title-lh)); + --hub-title-pad-top: calc(var(--hub-title-h) * 1.5); + --hub-title-nav-gap: calc(var(--hub-title-h) * 0.8); + --hub-title-gap: calc(var(--hub-title-h) * 1.1); +} +* { box-sizing: border-box; } +html, body { min-height: 100%; } +body { + margin: 0; + font-family: var(--font); + color: var(--text); + background: + radial-gradient(1200px 600px at 12% -10%, rgba(14, 165, 233, 0.18), transparent 55%), + radial-gradient(900px 500px at 90% 10%, rgba(34, 211, 238, 0.1), transparent 50%), + linear-gradient(180deg, var(--bg-2), var(--bg) 40%, #05080f); + background-attachment: fixed; +} +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + opacity: 0.35; + background-image: + linear-gradient(rgba(56, 189, 248, 0.06) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.06) 1px, transparent 1px); + background-size: 48px 48px; + mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%); +} +body > * { position: relative; z-index: 1; } +a { color: var(--accent-2); text-decoration: none; } +a:hover { color: #7dd3fc; } + +.topbar-brand { + display: block; + margin: 0 auto var(--hub-title-nav-gap); + padding-top: var(--hub-title-pad-top); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: var(--hub-title-size); + font-weight: 700; + letter-spacing: 0; + text-indent: 0; + color: #dbe4ff; + line-height: var(--hub-title-lh); + text-align: center; +} +.topbar-brand:hover { + color: #ffffff; +} +.topbar-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; + gap: 10px 12px; + margin: 0 0 var(--hub-title-gap); +} +.topbar-nav { + grid-column: 2; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 8px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} +.topbar-nav a { + color: #8fc8ff; + font-size: 1rem; + font-weight: 400; + letter-spacing: 0; + padding: 6px 10px; + border: 1px solid #304164; + border-radius: 8px; + background: #151a2a; +} +.topbar-nav a:hover { + color: #dbe4ff; + border-color: #3d5278; +} +.topbar-nav a.active { + color: #dbe4ff; + background: #2a3f6c; + text-shadow: none; +} +.top-nav-spot-tickers { + grid-column: 3; + justify-self: end; + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + font-variant-numeric: tabular-nums; +} +.nav-spot-row { + display: grid; + grid-template-columns: 3px 18px minmax(4.6em, auto) minmax(5em, auto) minmax(3.6em, auto) minmax(3.8em, auto); + align-items: center; + column-gap: 7px; + padding: 3px 9px 3px 5px; + border: 1px solid transparent; + border-radius: 6px; + background: rgba(16, 22, 36, 0.72); + line-height: 1.2; + white-space: nowrap; + font-size: 0.88rem; +} +.nav-spot-row:hover { + border-color: #3a4568; +} +.nav-spot-ribbon { + width: 3px; + height: 16px; + border-radius: 1px 2px 2px 1px; + background: #e24b6a; + justify-self: center; +} +.nav-spot-icon { + width: 18px; + height: 18px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 0.72rem; + font-weight: 700; + color: #fff; +} +.nav-spot-icon--eth { background: #627eea; } +.nav-spot-icon--btc { background: #f2a900; color: #1a1200; } +.nav-spot-sym { + color: #e8ecff; + font-weight: 600; + letter-spacing: 0.01em; +} +.nav-spot-last, +.nav-spot-chg, +.nav-spot-pct { + text-align: right; + font-weight: 600; +} +.nav-spot--up .nav-spot-last, +.nav-spot--up .nav-spot-chg, +.nav-spot--up .nav-spot-pct { color: #2dd4a8; } +.nav-spot--down .nav-spot-last, +.nav-spot--down .nav-spot-chg, +.nav-spot--down .nav-spot-pct { color: #ff6b7a; } +.nav-spot--flat .nav-spot-last, +.nav-spot--flat .nav-spot-chg, +.nav-spot--flat .nav-spot-pct { color: #9aa3bf; } +.topbar-logout { + position: fixed; + top: 16px; + right: 22px; + z-index: 20; + color: var(--muted); + font-size: 0.82rem; + letter-spacing: 0.04em; +} +.topbar-logout:hover { + color: #e8f1ff; +} +@media (max-width: 1100px) { + .topbar-row { + grid-template-columns: 1fr; + justify-items: center; + } + .topbar-nav, + .top-nav-spot-tickers { + grid-column: 1; + justify-self: center; + } +} +@media (max-width: 720px) { + :root { --hub-title-size: 1rem; } + .topbar-nav a { + padding: 8px 12px; + font-size: 0.78rem; + } + .topbar-logout { + top: 10px; + right: 14px; + } +} + +.main { + width: 100%; + max-width: 1800px; + margin: 0 auto; + padding: 0 clamp(24px, 4vw, 64px) 16px; +} +body.page-dashboard .main, +body.page-instances .main, +body.page-stats .main, +body.page-settings .main, +body.page-cond-orders .main { + max-width: 1800px; + width: 100%; + margin: 0 auto; + padding: 0 clamp(24px, 4vw, 64px) 16px; +} +body.page-settings .settings-shell { + max-width: none; + width: 100%; +} +body.page-settings .settings-grid { + max-width: none; +} +body.page-desk { + height: 100vh; + overflow: hidden; +} +body.page-desk .topbar-brand, +body.page-desk .topbar-row { + display: none; +} +body.page-desk .main { + max-width: none; + width: 100%; + height: 100vh; + max-height: 100vh; + margin: 0; + padding: 10px 12px 10px; + display: flex; + flex-direction: column; + overflow: hidden; +} +body.page-login { + min-height: 100vh; +} +body.page-login .main { + max-width: none; + min-height: 100vh; + margin: 0; + padding: 24px; + display: flex; + align-items: center; + justify-content: center; +} + +.page-head { display: flex; align-items: center; gap: 12px; } +.page-head h1 { + margin: 0; + font-family: var(--font-display); + font-size: 1.35rem; + font-weight: 600; + letter-spacing: 0.04em; +} +.overview-bj-clock { + margin-left: auto; + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + padding: 0; + border: 0; + background: transparent; + box-shadow: none; +} +.overview-bj-label { + font-size: 0.82rem; + letter-spacing: 0.02em; + text-transform: none; + color: var(--muted); + font-weight: 500; + white-space: nowrap; +} +.overview-bj-label::after { + content: ""; + display: inline-block; + width: 1px; + height: 12px; + margin-left: 10px; + vertical-align: -1px; + background: rgba(56, 189, 248, 0.35); +} +.overview-bj-time { + font-family: var(--font); + font-size: 1.05rem; + font-weight: 600; + letter-spacing: 0.02em; + color: var(--text); + font-variant-numeric: tabular-nums; + white-space: nowrap; +} +.overview-bj-meta { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 0.88rem; + font-weight: 550; + letter-spacing: 0.02em; + color: var(--text); + white-space: nowrap; +} +.overview-bj-meta::before { + content: ""; + display: inline-block; + width: 1px; + height: 12px; + background: rgba(56, 189, 248, 0.35); +} +.overview-bj-weekday, +.overview-bj-lunar { + color: var(--text); +} +.overview-bj-clock.is-weekend .overview-bj-time, +.overview-bj-clock.is-weekend .overview-bj-weekday, +.overview-bj-clock.is-weekend .overview-bj-lunar { + color: var(--bad); +} +.overview-bj-clock.is-weekend .overview-bj-meta::before { + background: rgba(251, 113, 133, 0.5); +} +@media (max-width: 720px) { + .page-head { flex-wrap: wrap; } + .overview-bj-clock { + margin-left: 0; + order: 3; + width: 100%; + justify-content: flex-start; + padding-top: 2px; + } +} +.muted { color: var(--muted); font-size: 0.9rem; } +.flash { + background: rgba(14, 165, 233, 0.12); + border: 1px solid var(--line-strong); + padding: 8px 12px; + border-radius: 10px; + margin-bottom: 12px; + box-shadow: var(--shadow); +} + +/* —— 登录 —— */ +.login-wrap { + width: 100%; + max-width: 420px; +} +.login-card { + width: 100%; + margin: 0; + padding: 32px 28px 28px; + border-radius: 18px; + background: linear-gradient(160deg, rgba(18, 32, 54, 0.92), rgba(10, 16, 28, 0.95)); + border: 1px solid var(--line-strong); + box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); + backdrop-filter: blur(16px); +} +.login-card h1 { + margin: 0 0 8px; + font-family: var(--font-display); + font-size: 1.45rem; + font-weight: 600; + letter-spacing: 0.06em; + background: linear-gradient(90deg, #e0f2fe, var(--accent)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.login-card .login-sub { + margin: 0 0 22px; + color: var(--muted); + font-size: 0.88rem; + line-height: 1.45; +} +.login-card .stack label { + display: block; + margin: 0 0 14px; + font-size: 0.82rem; + color: #b6c7da; + font-weight: 500; +} +.login-card input { + margin-top: 6px; + padding: 11px 12px; + border-radius: 10px; + border: 1px solid var(--line); + background: rgba(5, 10, 18, 0.85); + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +.login-card input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); +} +.login-card button[type="submit"] { + width: 100%; + margin-top: 8px; + padding: 12px 14px; + font-weight: 600; + letter-spacing: 0.08em; + background: linear-gradient(90deg, var(--accent-deep), var(--accent)); + color: #041018; + box-shadow: 0 8px 24px rgba(14, 165, 233, 0.28); +} +.login-card button[type="submit"]:hover { + filter: brightness(1.05); +} + +.login-card .login-honeypot { + position: absolute !important; + left: -10000px !important; + top: auto !important; + width: 1px !important; + height: 1px !important; + opacity: 0 !important; + pointer-events: none !important; + overflow: hidden !important; +} +.login-card .login-form { position: relative; } + +.stack label, .form-grid label { display: block; margin: 8px 0; } +input[type="text"], input[type="password"], input[type="number"], input[type="url"], input:not([type]), select { + width: 100%; + padding: 8px 10px; + border-radius: 8px; + border: 1px solid var(--line); + background: #0a1220; + color: var(--text); +} +button, .btn { + display: inline-block; + margin-top: 8px; + padding: 8px 12px; + border-radius: 8px; + border: 0; + background: linear-gradient(90deg, var(--accent-deep), #06b6d4); + color: #041018; + font-weight: 600; + cursor: pointer; +} +.btn:hover, button:hover { filter: brightness(1.06); } +.btn-danger { background: #9f1239; color: #fff; } +.btn-close-disabled, +.btn-close-disabled:hover, +.btn.btn-close-disabled:disabled { + background: #3a3f4b; + color: #8b93a7; + border: 1px solid #4a5160; + cursor: not-allowed; + filter: none; + opacity: 1; +} +.btn-sm { + padding: 3px 8px; + font-size: 0.75rem; + border-radius: 6px; + font-weight: 600; +} +.inst-pick { + display: flex; + flex-wrap: wrap; + gap: 10px 16px; +} +.inst-pick .check { margin: 0; } +.btn-sm { + padding: 3px 8px; + font-size: 0.75rem; + border-radius: 6px; + font-weight: 600; +} +.btn[disabled] { + opacity: 0.45; + cursor: not-allowed; + filter: none; +} +.panel { + background: var(--panel); + border: 1px solid var(--line); + border-radius: var(--radius); + padding: 14px; + margin: 14px 0; + box-shadow: var(--shadow); + backdrop-filter: blur(10px); +} +.form-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 10px; + align-items: end; +} +.check { display: flex !important; align-items: center; gap: 8px; } +.update-version { + font-size: 0.82rem; + font-variant-numeric: tabular-nums; +} +.update-version.online { color: var(--ok); } +.update-version.offline { color: var(--bad); } +.update-status { + font-size: 0.8rem; + min-height: 1.2em; + margin-left: 6px; +} +.update-status.pending { color: var(--accent-2); } +.update-status.ok { color: var(--ok); } +.update-status.err { color: var(--bad); } +.update-table td { vertical-align: middle; } + +/* 实例页 */ +.inst-page-head { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} +.inst-page-head-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} +.inst-page-head-actions .inst-head-btn { + box-sizing: border-box; + min-width: 7.5rem; + height: 40px; + padding: 0 16px; + margin: 0; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 0.88rem; + font-weight: 600; + letter-spacing: 0.02em; + border-radius: 10px; + line-height: 1; +} +.inst-add-trigger { + cursor: pointer; +} +.inst-add-check { + position: absolute; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; +} +/* 盖过 .settings-shell 的 920 限制;带鱼屏卡片铺满 1800 */ +.settings-shell.inst-shell, +.inst-shell { + max-width: none !important; + width: 100%; +} +@media (min-aspect-ratio: 21/9) { + .settings-shell.inst-shell, + .inst-shell { + max-width: 1800px !important; + width: 100%; + } +} +.inst-add-panel { + display: none; + border-bottom: 1px solid rgba(56, 189, 248, 0.12); +} +#inst-add-toggle:checked ~ .inst-shell .inst-add-panel { + display: block; +} +.inst-list-head { + border-bottom: 1px solid rgba(56, 189, 248, 0.12); +} +.inst-table-wrap { + padding: 14px 16px 18px; + overflow-x: auto; +} +.inst-empty { + margin: 8px 4px 12px; + line-height: 1.5; + font-size: 0.88rem; +} +.inst-table { + width: 100%; + border-collapse: collapse; + font-size: 0.88rem; +} +.inst-table th, +.inst-table td { + padding: 12px 10px; + border-bottom: 1px solid rgba(56, 189, 248, 0.12); + text-align: left; + vertical-align: middle; +} +.inst-table th { + color: var(--accent-2); + font-weight: 600; + white-space: nowrap; + background: rgba(8, 16, 30, 0.7); +} +.inst-table tr.inst-row:hover td { + background: rgba(34, 211, 238, 0.04); +} +.inst-td-name { min-width: 6rem; } +.inst-td-url { + max-width: 18rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.8rem; +} +.inst-td-token { + white-space: nowrap; + font-variant-numeric: tabular-nums; +} +.inst-token-mask { + color: var(--muted); + letter-spacing: 0.08em; + font-size: 0.82rem; +} +.inst-td-path code { + font-size: 0.8rem; + color: #b6c7da; +} +.inst-td-tags { + max-width: 8rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.inst-td-ops { + white-space: nowrap; +} +.inst-td-ops .btn, +.inst-td-ops .btn-danger, +.inst-td-ops label.btn { + margin-top: 0; + display: inline-flex; + align-items: center; + cursor: pointer; +} +.inst-inline-del { + display: inline; + margin: 0; +} +.inst-edit-check { + position: absolute; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; +} +.inst-edit-row > td { + padding: 0; + border-bottom: 1px solid rgba(56, 189, 248, 0.16); + background: rgba(5, 12, 22, 0.35); +} +.inst-edit-panel { + display: none; + padding: 4px 8px 12px; +} +.inst-edit-check:checked + .inst-edit-panel { + display: block; +} +.inst-pill { + display: inline; + padding: 0; + border: 0; + border-radius: 0; + background: none; + font-size: 0.86rem; + font-weight: 600; + letter-spacing: 0.02em; +} +.inst-pill--on { + color: #86efac; +} +.inst-pill--off { + color: #fda4af; +} +.inst-card-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + margin-top: 4px; +} +.inst-card-actions .btn, +.inst-card-actions .settings-primary { + margin-top: 0; +} +.inst-token-wrap { + display: flex; + gap: 8px; + align-items: stretch; + margin-top: 6px; +} +.inst-token-wrap .inst-token-input { + margin-top: 0 !important; + flex: 1; + min-width: 0; +} +.inst-token-wrap .inst-token-toggle { + flex: 0 0 auto; + align-self: center; + margin-top: 0; +} +@media (max-width: 720px) { + .inst-page-head { align-items: flex-start; } + .settings-row-2 { grid-template-columns: 1fr; } + .inst-td-ops { white-space: normal; } +} +.overview-table-wrap { + overflow-x: auto; + margin-top: 12px; + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--panel); + box-shadow: var(--shadow); + backdrop-filter: blur(10px); +} +.overview-table { + width: 100%; + border-collapse: collapse; + font-size: 0.88rem; +} +.overview-table th, +.overview-table td { + padding: 10px 12px; + border-bottom: 1px solid rgba(56, 189, 248, 0.12); + text-align: center; + vertical-align: middle; +} +.overview-table th { + color: var(--accent-2); + font-weight: 600; + background: rgba(8, 16, 30, 0.9); + white-space: nowrap; + letter-spacing: 0.03em; +} +.overview-table tr:last-child td { border-bottom: 0; } +.overview-table .status-on { color: var(--ok); } +.overview-table .status-off { color: var(--bad); } +.overview-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } +.overview-actions .btn { margin-top: 0; } + +.overview-summary { + display: grid; + gap: 10px; + margin: 0 0 14px; +} +.overview-mode-wrap { + overflow-x: auto; + border-radius: var(--radius); + border: 1px solid var(--line); + background: var(--panel); + box-shadow: var(--shadow); +} +.overview-mode-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 8px; + padding: 12px 14px 0; +} +.overview-mode-head strong { + font-size: 0.92rem; + letter-spacing: 0.02em; +} +.overview-mode-table { + width: 100%; + border-collapse: collapse; + font-size: 0.88rem; +} +.overview-mode-table th, +.overview-mode-table td { + padding: 10px 12px; + text-align: center; + border-bottom: 1px solid rgba(56, 189, 248, 0.1); + font-variant-numeric: tabular-nums; +} +.overview-mode-table tr:last-child td { border-bottom: 0; } +.overview-mode-table th { + color: var(--muted); + font-weight: 600; + font-size: 0.78rem; + background: rgba(5, 12, 22, 0.45); +} +.overview-mode-table td:first-child, +.overview-mode-table th:first-child { + text-align: left; + white-space: nowrap; +} +.overview-mode-table .status-on { color: var(--ok); font-weight: 700; } +.overview-mode-table .status-off { color: var(--bad); font-weight: 700; } +.overview-mode-tag { + display: inline-block; + padding: 2px 8px; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.03em; +} +.overview-mode-tag--sim { + color: #7dd3fc; + background: rgba(56, 189, 248, 0.14); +} +.overview-mode-tag--live { + color: #6ee7b7; + background: rgba(52, 211, 153, 0.14); +} +.overview-table td strong { + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} +.overview-cond-tag { + display: inline-block; + margin-top: 4px; + padding: 2px 8px; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 700; + white-space: nowrap; + vertical-align: middle; +} +.overview-cond-tag.is-armed { + color: #7dd3fc; + background: rgba(56, 189, 248, 0.16); +} +.overview-cond-tag.is-trig { + color: #fbbf24; + background: rgba(251, 191, 36, 0.16); +} +.overview-cond-tag.is-open { + color: #6ee7b7; + background: rgba(52, 211, 153, 0.16); +} +.overview-cond-wait-line { + font-size: 0.8rem; + font-weight: 600; +} +.overview-cond-src { + display: inline-block; + margin-left: 6px; + padding: 0 6px; + border-radius: 999px; + font-size: 0.68rem; + font-weight: 700; + color: #7dd3fc; + background: rgba(56, 189, 248, 0.14); + vertical-align: middle; +} +.pos-brief { + margin: 0; + padding-left: 0; + list-style-position: inside; + color: var(--muted); + font-size: 0.8rem; +} +.pos-brief li { + margin: 2px 0; +} +.exit-brief .exit-set { + color: var(--ok); + font-weight: 600; +} +.exit-brief .exit-unset { + color: var(--bad); + font-weight: 600; +} +.pos-exit { + margin-top: 2px; + font-size: 0.76rem; + color: var(--text); + opacity: 0.9; +} +.pos-exit.muted { + color: var(--muted); + opacity: 1; +} +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 12px; + margin-top: 12px; +} +.card { + background: var(--panel); + border: 1px solid var(--line); + border-radius: var(--radius); + padding: 12px; + box-shadow: var(--shadow); +} +.card .status-on { color: var(--ok); } +.card .status-off { color: var(--bad); } +.card table { width: 100%; font-size: 0.8rem; border-collapse: collapse; } +.card td, .card th { border-bottom: 1px solid var(--line); padding: 4px 2px; text-align: left; } + +.desk { + display: grid; + grid-template-columns: 220px minmax(0, 1fr); + gap: 12px; + flex: 1; + min-height: 0; + max-width: none; + transition: grid-template-columns 0.18s ease; +} +.desk.is-side-collapsed { + grid-template-columns: 48px minmax(0, 1fr); +} +.desk-side { + background: var(--panel); + border: 1px solid var(--line); + border-radius: var(--radius); + padding: 10px; + min-width: 0; + min-height: 0; + overflow: auto; + box-shadow: var(--shadow); + backdrop-filter: blur(10px); +} +.desk-side-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + margin-bottom: 8px; +} +.desk-side-title { + margin: 0; + font-size: 0.95rem; + font-family: var(--font-display); + letter-spacing: 0.04em; + white-space: nowrap; + color: var(--accent-2); +} +.desk-side-toggle { + flex: 0 0 auto; + margin-top: 0; + width: 28px; + height: 28px; + padding: 0; + border-radius: 8px; + border: 1px solid var(--line); + background: rgba(8, 16, 30, 0.9); + color: var(--text); + font-size: 1.1rem; + line-height: 1; + cursor: pointer; +} +.desk-side-toggle:hover { border-color: var(--accent); color: var(--accent); } +.desk-side-toggle--bar { display: none; } +.desk.is-side-collapsed .desk-side-title, +.desk.is-side-collapsed .desk-list-name, +.desk.is-side-collapsed .desk-list-empty { display: none; } +.desk.is-side-collapsed .desk-side { padding: 8px 6px; } +.desk.is-side-collapsed .desk-side-head { + justify-content: center; + margin-bottom: 0; +} +.desk.is-side-collapsed .desk-side-toggle { transform: rotate(180deg); } +.desk.is-side-collapsed .desk-list { display: none; } +.desk.is-side-collapsed .desk-side-toggle--bar { + display: inline-flex; + align-items: center; + justify-content: center; +} +.desk-list { list-style: none; padding: 0; margin: 0; } +.desk-list li { margin: 6px 0; } +.desk-list .desk-group-label { + margin: 10px 0 4px; + padding: 0 2px; + list-style: none; +} +.desk-list .desk-group-label:first-child { margin-top: 0; } +.desk.is-side-collapsed .desk-group-label { display: none; } +.desk-list li a { + display: block; + padding: 7px 9px; + border-radius: 8px; + color: var(--muted); + border: 1px solid transparent; +} +.desk-list li a:hover { + background: rgba(34, 211, 238, 0.08); + color: #fff; + border-color: rgba(34, 211, 238, 0.2); +} +.desk-list li.active a { + color: #fff; + font-weight: 600; + background: rgba(34, 211, 238, 0.16); + border-color: rgba(34, 211, 238, 0.35); +} +.desk-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; } +.desk-toolbar { + display: flex; gap: 10px; align-items: center; flex-wrap: wrap; + margin-bottom: 8px; + flex-shrink: 0; +} +.desk-frame { + flex: 1; + width: 100%; + min-height: 0; + border: 1px solid var(--line); + border-radius: var(--radius); + background: #000; + box-shadow: var(--shadow); +} +.empty { padding: 40px; color: var(--muted); } + +/* —— 系统设置 —— */ +.settings-head { + margin-bottom: 8px; + align-items: flex-start; +} +.settings-eyebrow { + margin: 0 0 4px; + font-size: 0.72rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--accent); + font-weight: 600; +} +.settings-lead { margin: 6px 0 0; max-width: 520px; line-height: 1.45; } +.settings-shell { + max-width: 920px; + margin: 0; + padding: 0; + overflow: hidden; + background: + linear-gradient(165deg, rgba(20, 36, 58, 0.92), rgba(10, 16, 28, 0.96)); + border: 1px solid var(--line-strong); + box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); +} +.settings-tab-radio { + position: absolute; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; +} +.settings-tabs { + display: flex; + flex-wrap: wrap; + gap: 6px; + padding: 14px 16px 0; + border-bottom: 1px solid rgba(56, 189, 248, 0.14); + background: rgba(5, 12, 22, 0.35); +} +.settings-tab-btn { + display: inline-flex; + align-items: center; + padding: 9px 14px; + border-radius: 10px 10px 0 0; + border: 1px solid transparent; + border-bottom: 0; + color: var(--muted); + font-size: 0.88rem; + font-weight: 550; + cursor: pointer; + user-select: none; + transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; +} +.settings-tab-btn:hover { + color: var(--text); + background: rgba(56, 189, 248, 0.08); +} +#hub-set-account:checked ~ .settings-tabs label[for="hub-set-account"], +#hub-set-wechat:checked ~ .settings-tabs label[for="hub-set-wechat"], +#hub-set-backup:checked ~ .settings-tabs label[for="hub-set-backup"], +#hub-set-update:checked ~ .settings-tabs label[for="hub-set-update"] { + color: var(--text); + background: rgba(34, 211, 238, 0.12); + border-color: rgba(56, 189, 248, 0.35); + box-shadow: inset 0 -2px 0 var(--accent); +} +.settings-panels { + padding: 0; +} +.settings-panel { + display: none; +} +#hub-set-account:checked ~ .settings-panels .settings-panel--account, +#hub-set-wechat:checked ~ .settings-panels .settings-panel--wechat, +#hub-set-backup:checked ~ .settings-panels .settings-panel--backup, +#hub-set-update:checked ~ .settings-panels .settings-panel--update { + display: block; +} +.settings-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + gap: 18px; + align-items: stretch; + max-width: 980px; +} +.settings-card { + max-width: none; + margin: 0; + padding: 0; + overflow: hidden; + background: + linear-gradient(165deg, rgba(20, 36, 58, 0.92), rgba(10, 16, 28, 0.96)); + border: 1px solid var(--line-strong); + box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); +} +.settings-card-head { + padding: 20px 22px 16px; + border-bottom: 1px solid rgba(56, 189, 248, 0.12); + background: linear-gradient(180deg, rgba(34, 211, 238, 0.06), transparent); +} +.settings-backup-body { + padding: 18px 22px 22px; + display: flex; + flex-direction: column; + gap: 20px; +} +.backup-block { + padding: 16px 16px 12px; + border: 1px solid rgba(56, 189, 248, 0.14); + border-radius: 12px; + background: rgba(5, 12, 22, 0.4); +} +.backup-block-head h3 { + margin: 0 0 6px; + font-size: 1rem; + font-weight: 600; +} +.settings-panel--account .settings-form, +.settings-panel--wechat .settings-form { + max-width: 560px; +} +.backup-block-head .field-hint { + margin: 0 0 12px; +} +.settings-field--inline { + margin: 0; + min-width: 12rem; +} +.settings-field--inline select { + margin-top: 6px; + min-width: 12rem; + padding: 9px 10px; + border-radius: 10px; + border: 1px solid var(--line); + background: rgba(5, 10, 18, 0.85); + color: var(--text); +} +.settings-card-head h2 { + margin: 8px 0 6px; + font-family: var(--font-display); + font-size: 1.05rem; + font-weight: 600; + letter-spacing: 0.04em; +} +.settings-card-head .muted { + margin: 0; + line-height: 1.45; + font-size: 0.86rem; +} +.settings-badge { + display: inline-flex; + align-items: center; + padding: 3px 8px; + border-radius: 999px; + font-size: 0.68rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #041018; + background: linear-gradient(90deg, var(--accent-deep), var(--accent)); +} +.settings-badge--alert { + background: linear-gradient(90deg, #0d9488, #34d399); +} +.settings-form { + max-width: none; + padding: 16px 20px 20px; +} +.settings-field { + display: flex; + flex-direction: column; + align-items: stretch; + margin: 0 0 14px; + font-size: 0.82rem; + color: #b6c7da; + font-weight: 500; +} +.settings-label { + display: block; + margin-bottom: 6px; + font-size: 0.82rem; + color: #b6c7da; + font-weight: 500; +} +.settings-form input[type="text"], +.settings-form input[type="password"], +.settings-form input[type="number"], +.settings-form input[type="url"] { + display: block; + width: 100%; + margin-top: 6px; + padding: 11px 12px; + border-radius: 10px; + border: 1px solid var(--line); + background: rgba(5, 10, 18, 0.85); + color: #f0f7ff; + caret-color: var(--accent); + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +.settings-form input::placeholder { + color: rgba(138, 160, 184, 0.75); +} +.settings-form input:-webkit-autofill, +.settings-form input:-webkit-autofill:hover, +.settings-form input:-webkit-autofill:focus { + -webkit-text-fill-color: #f0f7ff; + box-shadow: 0 0 0 1000px #0a1220 inset; + transition: background-color 99999s ease-out; +} +.settings-form input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); +} +.settings-readonly { + margin-top: 6px; + padding: 11px 12px; + border-radius: 10px; + border: 1px solid rgba(56, 189, 248, 0.14); + background: rgba(8, 14, 24, 0.55); + color: var(--text); + font-weight: 600; + letter-spacing: 0.02em; +} +.settings-divider { + height: 1px; + margin: 4px 0 16px; + background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.28), transparent); +} +.settings-row-2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} +.settings-hint { + margin: -4px 0 14px; + line-height: 1.4; +} +.settings-switch { + display: flex !important; + align-items: flex-start; + gap: 12px; + margin: 0 0 16px !important; + padding: 12px 14px; + border-radius: 12px; + border: 1px solid rgba(56, 189, 248, 0.16); + background: rgba(5, 12, 22, 0.55); + cursor: pointer; +} +.settings-switch input { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} +.settings-switch-ui { + flex: 0 0 auto; + width: 42px; + height: 24px; + margin-top: 2px; + border-radius: 999px; + background: #1a2738; + border: 1px solid var(--line); + position: relative; + transition: background 0.18s ease, border-color 0.18s ease; +} +.settings-switch-ui::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 18px; + height: 18px; + border-radius: 50%; + background: #8aa0b8; + transition: transform 0.18s ease, background 0.18s ease; +} +.settings-switch input:checked + .settings-switch-ui { + background: rgba(34, 211, 238, 0.25); + border-color: var(--accent); +} +.settings-switch input:checked + .settings-switch-ui::after { + transform: translateX(18px); + background: var(--accent); +} +.settings-switch-text { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; +} +.settings-switch-text strong { + color: var(--text); + font-size: 0.9rem; +} +.settings-switch-text small { + color: var(--muted); + font-size: 0.78rem; + line-height: 1.35; +} +.settings-actions { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 2px; +} +.backup-table { + width: 100%; + border-collapse: collapse; + font-size: 0.82rem; +} +.backup-table th, +.backup-table td { + padding: 8px 10px; + border-bottom: 1px solid rgba(56, 189, 248, 0.12); + text-align: left; + vertical-align: middle; +} +.backup-table th { + color: var(--muted); + font-weight: 550; +} +.backup-table code { + font-size: 0.74rem; + word-break: break-all; +} +.btn-sm { + display: inline-block; + padding: 3px 8px; + font-size: 0.74rem; + border-radius: 8px; + line-height: 1.3; +} +.settings-primary, +.settings-form button.settings-primary { + margin-top: 0; + padding: 11px 16px; + border-radius: 10px; + letter-spacing: 0.04em; + background: linear-gradient(90deg, var(--accent-deep), var(--accent)); + color: #041018; + box-shadow: 0 8px 22px rgba(14, 165, 233, 0.22); +} +.settings-actions .btn-secondary, +button.btn-secondary { + margin-top: 0; + padding: 10px 14px; + border-radius: 10px; + background: transparent; + color: var(--text); + border: 1px solid var(--line); + box-shadow: none; +} +.settings-actions .btn-secondary:hover, +button.btn-secondary:hover { + border-color: var(--accent); + filter: none; +} +.field-hint { + display: block; + margin-top: 4px; + font-size: 12px; + color: var(--muted); + font-weight: 400; +} +@media (max-width: 720px) { + .settings-row-2 { grid-template-columns: 1fr; } + .settings-grid { grid-template-columns: 1fr; } +} +input.readonly { + opacity: 0.75; + cursor: default; +} +.pnl-up { color: var(--ok); font-weight: 600; } +.pnl-down { color: var(--bad); font-weight: 600; } +.pnl-flat { color: var(--muted); } +.liq-ok { color: var(--text); } +.liq-warn { + color: #fbbf24; + font-weight: 600; +} +.liq-brief--warn { + border-left: 2px solid rgba(251, 191, 36, 0.7); + padding-left: 8px; +} + +@media (max-width: 800px) { + .desk, + .desk.is-side-collapsed { grid-template-columns: 1fr; } + .desk-side-toggle--bar { display: none !important; } +} +@media (min-width: 2000px) { + body.page-desk .main { + max-width: none; + padding-left: 12px; + padding-right: 12px; + } +} + +.cond-head { justify-content: space-between; align-items: flex-start; } +.cond-head-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} +.cond-head-actions .btn, +.cond-head-actions .settings-primary { + margin-top: 0; + box-sizing: border-box; + height: 36px; + padding: 0 14px; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + border-radius: 8px; + font-size: inherit; + font-weight: 600; +} +.cond-lead { margin: 6px 0 0; max-width: 720px; line-height: 1.5; } +.cond-add-check { + position: absolute; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; +} +.cond-layout { display: grid; gap: 16px; } +.cond-add-panel { display: none; } +#cond-add-toggle:checked ~ .cond-layout .cond-add-panel { + display: block; +} +.cond-card { padding: 18px 18px 16px; } +.cond-card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-bottom: 14px; +} +.cond-card-head h2 { + margin: 0; + font-size: 1.02rem; + letter-spacing: 0.03em; +} +.cond-chip { + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.06em; + color: #041018; + background: linear-gradient(90deg, var(--accent-deep), var(--accent)); + border-radius: 999px; + padding: 3px 10px; +} +.cond-section { + border-top: 1px solid rgba(56, 189, 248, 0.12); + padding: 14px 0 4px; +} +.cond-section:first-of-type { border-top: 0; padding-top: 0; } +.cond-section-title { + font-size: 0.78rem; + color: var(--accent-2); + letter-spacing: 0.08em; + margin-bottom: 10px; + font-weight: 600; +} +.cond-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 12px 14px; + align-items: end; +} +.cond-grid label { + margin: 0; + font-size: 0.8rem; + color: #b6c7da; +} +.cond-grid input, +.cond-grid select { + margin-top: 6px; +} +.cond-trigger-hint { + grid-column: 1 / -1; + padding: 9px 12px; + border-radius: 10px; + font-size: 0.82rem; + line-height: 1.45; + border: 1px solid var(--line); + background: rgba(8, 16, 30, 0.7); + color: var(--text); +} +.cond-trigger-hint.is-put { border-color: rgba(251, 113, 133, 0.35); } +.cond-trigger-hint.is-call { border-color: rgba(52, 211, 153, 0.35); } +.cond-switch { + display: flex !important; + align-items: center; + gap: 8px; + min-height: 62px; +} +.cond-switch input { width: auto; margin: 0; } +.cond-inst-group + .cond-inst-group { margin-top: 14px; } +.cond-inst-group-label { margin-bottom: 8px; } +.cond-inst-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 10px; +} +.cond-inst { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 10px 12px; + border-radius: 10px; + border: 1px solid var(--line); + background: rgba(8, 16, 30, 0.72); + cursor: pointer; +} +.cond-inst input { width: auto; margin: 0; } +.cond-inst-name { flex: 1; font-weight: 600; } +.cond-inst-tag { color: var(--muted); font-size: 0.75rem; } +.cond-inst.is-off { opacity: 0.5; cursor: not-allowed; } +.cond-actions { + display: flex; + align-items: center; + gap: 12px; + margin-top: 14px; +} +.cond-empty { padding: 28px 8px; text-align: center; } +.cond-st { + display: inline-block; + min-width: 64px; + padding: 2px 8px; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 600; +} +.cond-st.st-armed { color: var(--accent-2); background: rgba(56, 189, 248, 0.12); } +.cond-st.st-trig { color: #fbbf24; background: rgba(251, 191, 36, 0.12); } +.cond-st.st-open { color: var(--ok); background: rgba(52, 211, 153, 0.12); } +.cond-st.st-done { color: var(--muted); background: rgba(138, 160, 184, 0.12); } +.cond-table-wrap { margin-top: 0; } + +/* —— 数据统计 —— */ +.stats-head { + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + gap: 12px; + margin-bottom: 4px; +} +.stats-window-tabs { + display: flex; + flex-wrap: wrap; + gap: 8px; +} +.stats-win-btn { + margin: 0; + padding: 7px 12px; + border-radius: 999px; + border: 1px solid var(--line); + background: rgba(8, 14, 24, 0.7); + color: var(--muted); + font-weight: 600; + box-shadow: none; +} +.stats-win-btn.is-active { + color: #041018; + border-color: transparent; + background: linear-gradient(90deg, var(--accent-deep), var(--accent)); +} +#stats-status.err { color: var(--bad); } +.stats-kpi-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 12px; +} +.stats-kpi-card { + padding: 12px 14px; + border-radius: 12px; + border: 1px solid rgba(56, 189, 248, 0.14); + background: rgba(5, 12, 22, 0.55); +} +.stats-kpi-label { + font-size: 0.75rem; + color: var(--muted); + margin-bottom: 6px; +} +.stats-kpi-value { + font-size: 1.15rem; + font-weight: 700; + letter-spacing: 0.02em; +} +.stats-card-head-inline { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 12px; + margin-bottom: 12px; +} +.stats-card-head-inline h2 { + margin: 0 0 4px; + font-family: var(--font-display); + font-size: 1.05rem; + letter-spacing: 0.04em; +} +.stats-card-head-inline .muted { + margin: 0; + max-width: 640px; + line-height: 1.45; +} +.stats-curve-toggle { + display: flex; + align-items: center; + gap: 8px; + white-space: nowrap; + color: var(--muted); + font-size: 0.86rem; +} +.stats-curve-toggle input { width: auto; margin: 0; } +.stats-chart-wrap { + position: relative; + width: 100%; + min-height: 320px; + border-radius: 12px; + border: 1px solid rgba(56, 189, 248, 0.12); + background: rgba(4, 10, 18, 0.65); + overflow: hidden; +} +#stats-curve-canvas { + display: block; + width: 100%; + height: 320px; +} +.stats-chart-empty { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; +} +.stats-legend { + display: flex; + flex-wrap: wrap; + gap: 10px 14px; + margin-top: 10px; +} +.stats-legend-item { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 0.8rem; + color: var(--muted); +} +.stats-legend-item i { + width: 10px; + height: 10px; + border-radius: 50%; + display: inline-block; +} +.stats-table th, +.stats-table td { + text-align: center; + vertical-align: middle; +} +.stats-table td:first-child, +.stats-table th:first-child { + text-align: left; +} +.stats-err-tip { + margin-top: 4px; + font-size: 0.75rem; +} +body.page-stats .main { + max-width: 1800px; +} + +/* —— 手机单独壳:电脑样式不动,仅 html.hub-phone-html 启用 —— */ +.hub-phone-chrome { + display: none; +} +html.hub-phone-html .hub-desk-chrome { + display: none !important; +} +html.hub-phone-html .hub-phone-bar { + display: flex; +} +html.hub-phone-html .hub-phone-tabbar { + display: flex; +} +html.hub-phone-html .hub-phone-more { + display: block; +} +html.hub-phone-html body { + padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); +} +html.hub-phone-html body.page-desk { + height: auto; + overflow: auto; +} +html.hub-phone-html body.page-desk .main { + height: auto; + max-height: none; + display: block; + padding: 10px 14px 20px; +} +html.hub-phone-html .main { + max-width: none; + padding: 10px 14px 20px; +} +html.hub-phone-html .topbar-logout { + display: none; +} +.hub-phone-bar { + display: none; + align-items: center; + justify-content: space-between; + gap: 10px; + margin: 8px 0 12px; + padding: 8px 4px 10px; + border-bottom: 1px solid rgba(56, 189, 248, 0.16); +} +.hub-phone-bar-title { + font-size: 1.05rem; + font-weight: 700; + color: #dbe4ff; + white-space: nowrap; +} +.hub-phone-quotes { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + font-variant-numeric: tabular-nums; +} +.hub-phone-quotes .nav-spot-row { + grid-template-columns: 16px minmax(4.2em, auto) minmax(3.4em, auto); + padding: 1px 6px 1px 4px; + font-size: 0.72rem; + background: transparent; + border: none; +} +.hub-phone-tabbar { + display: none; + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 40; + justify-content: space-around; + align-items: stretch; + gap: 4px; + padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); + background: rgba(10, 16, 28, 0.96); + border-top: 1px solid rgba(56, 189, 248, 0.22); + backdrop-filter: blur(10px); +} +.hub-phone-tab { + flex: 1; + appearance: none; + border: 0; + background: transparent; + color: #8aa0b8; + font: inherit; + font-size: 0.86rem; + font-weight: 600; + padding: 10px 4px; + text-align: center; + cursor: pointer; +} +.hub-phone-tab.is-active, +.hub-phone-tab[aria-expanded="true"] { + color: #e8f1ff; +} +.hub-phone-more { + display: none; +} +html.hub-phone-html .hub-phone-more { + pointer-events: none; +} +html.hub-phone-html.hub-phone-more-open .hub-phone-more, +html.hub-phone-html body.hub-phone-more-open .hub-phone-more { + pointer-events: auto; +} +.hub-phone-more-backdrop { + position: fixed; + inset: 0; + z-index: 45; + background: rgba(0, 0, 0, 0.45); + opacity: 0; + visibility: hidden; + transition: opacity 0.18s ease; +} +body.hub-phone-more-open .hub-phone-more-backdrop { + opacity: 1; + visibility: visible; +} +.hub-phone-more-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 46; + max-height: min(78vh, 560px); + overflow: auto; + padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); + border-radius: 16px 16px 0 0; + background: #101828; + border: 1px solid rgba(56, 189, 248, 0.28); + transform: translateY(110%); + transition: transform 0.2s ease; +} +body.hub-phone-more-open .hub-phone-more-sheet { + transform: translateY(0); +} +.hub-phone-more-handle { + width: 42px; + height: 4px; + margin: 4px auto 10px; + border-radius: 99px; + background: #3a4568; +} +.hub-phone-more-title { + margin: 0 0 4px; + font-size: 1rem; +} +.hub-phone-more-hint { + margin: 0 0 12px; + font-size: 0.78rem; + color: var(--muted); +} +.hub-phone-more-nav { + display: flex; + flex-direction: column; + gap: 6px; +} +.hub-phone-more-nav a { + display: block; + padding: 12px 12px; + border-radius: 10px; + background: #151a2a; + border: 1px solid #304164; + color: #dbe4ff; +} +.hub-phone-more-nav a.is-active { + background: #2a3f6c; +} +.hub-phone-more-close { + display: block; + width: 100%; + margin-top: 14px; + padding: 10px; + border-radius: 10px; + border: 1px solid #304164; + background: transparent; + color: #8aa0b8; + font: inherit; +} +html.hub-phone-html .page-head { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + margin-bottom: 8px; +} +html.hub-phone-html .page-head h1 { + font-size: 1.15rem; + margin: 0; + flex: 1; +} +html.hub-phone-html .overview-bj-clock { + display: none; +} +html.hub-phone-html .overview-summary { + display: none !important; +} +html.hub-phone-html #overview-status { + font-size: 0.78rem; + margin: 0 0 10px; +} +.hub-phone-cards { + display: flex; + flex-direction: column; + gap: 14px; +} +.hub-phone-card { + background: rgba(16, 24, 40, 0.92); + border: 1px solid rgba(56, 189, 248, 0.2); + border-radius: 14px; + padding: 16px 16px 14px; +} +.hub-phone-card-head { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + margin-bottom: 12px; +} +.hub-phone-card-head strong { + font-size: 1.02rem; + line-height: 1.3; +} +.hub-phone-card-tags { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; +} +.hub-phone-card-pnl { + margin-bottom: 10px; +} +.hub-phone-card-pnl .muted { + display: block; + font-size: 0.72rem; + margin-bottom: 2px; +} +.hub-phone-card-pnl span:not(.muted) { + font-size: 1.35rem; + font-weight: 700; + font-variant-numeric: tabular-nums; + letter-spacing: -0.02em; +} +.hub-phone-card-kpis { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 12px; + margin-bottom: 12px; +} +.hub-phone-card-kpis .muted { + display: block; + font-size: 0.72rem; + margin-bottom: 2px; +} +.hub-phone-card-pos { + font-size: 0.92rem; + line-height: 1.45; +} +.hub-phone-pos-line + .hub-phone-pos-line { + margin-top: 4px; +} +.hub-phone-card-foot { + margin-top: 8px; + font-size: 0.8rem; + line-height: 1.4; +} +.hub-phone-card-err { + margin: 0 0 8px; + font-size: 0.78rem; +} +.hub-phone-card-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 14px; +} +html.hub-phone-html .desk { + display: none !important; +} +.hub-phone-desk { + display: none; +} +html.hub-phone-html .hub-phone-desk { + display: block; +} +.hub-phone-desk-list { + list-style: none; + margin: 12px 0 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 8px; +} +.hub-phone-desk-open { + width: 100%; + text-align: left; +} +html.hub-phone-html .settings-row-2, +html.hub-phone-html .settings-grid { + display: block; +} +html.hub-phone-html .inst-table, +html.hub-phone-html .backup-table, +html.hub-phone-html .stats-table { + font-size: 0.78rem; +} +html.hub-phone-html .table-wrap { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} +html.hub-phone-html body.page-cond-orders .cond-lead { + display: none; +} +html.hub-phone-html body.page-cond-orders .cond-layout { + display: flex; + flex-direction: column; + gap: 14px; +} +html.hub-phone-html body.page-cond-orders .cond-card { + padding: 14px; + border-radius: 14px; +} +html.hub-phone-html body.page-cond-orders .cond-card-head { + margin-bottom: 10px; +} +html.hub-phone-html body.page-cond-orders .cond-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px 12px; +} +html.hub-phone-html body.page-cond-orders .cond-switch { + min-height: 0; + grid-column: 1 / -1; +} +html.hub-phone-html body.page-cond-orders .cond-inst-grid { + grid-template-columns: 1fr; +} +html.hub-phone-html body.page-cond-orders .cond-actions { + flex-direction: column; + align-items: stretch; +} +html.hub-phone-html body.page-cond-orders .cond-actions .btn { + width: 100%; +} +.hub-phone-cond-list { + display: flex; + flex-direction: column; + gap: 10px; +} +.hub-phone-cond { + padding: 12px 12px 10px; + border-radius: 12px; + border: 1px solid rgba(56, 189, 248, 0.18); + background: rgba(8, 16, 30, 0.72); +} +.hub-phone-cond-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-bottom: 6px; +} +.hub-phone-cond-head strong { + font-size: 0.95rem; +} +.hub-phone-cond-main { + font-size: 0.98rem; + font-weight: 600; + line-height: 1.4; +} +.hub-phone-cond-meta, +.hub-phone-cond-msg { + margin-top: 4px; + font-size: 0.78rem; + line-height: 1.4; +} +.hub-phone-cond-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 10px; +} +html.hub-phone-html .login-wrap { + padding: 48px 16px 24px; +} +html.hub-phone-html .login-card { + width: 100%; + max-width: none; +} diff --git a/templates/base.html b/templates/base.html index e0dc29b..80c1d66 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,115 +1,115 @@ - - -
- - -