From e99c6cef08dc69df8e7a670d85074c67165a6fc7 Mon Sep 17 00:00:00 2001 From: dekun Date: Thu, 4 Jun 2026 12:08:35 +0800 Subject: [PATCH] style(hub): refine light theme contrast and theme-aware fullscreen UI Co-authored-by: Cursor --- manual_trading_hub/static/app.css | 272 +++++++++++++++++---------- manual_trading_hub/static/chart.js | 6 +- manual_trading_hub/static/index.html | 8 +- manual_trading_hub/static/login.html | 4 +- manual_trading_hub/static/theme.js | 2 +- 5 files changed, 187 insertions(+), 105 deletions(-) diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index d2fc344..c9d23a0 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -9,6 +9,13 @@ html[data-theme="dark"] { --nav-bg: rgba(0, 0, 0, 0.35); --overlay: rgba(0, 0, 0, 0.45); --chart-surface: #0a1018; + --chart-bar-bg: rgba(8, 14, 24, 0.96); + --inset-surface: rgba(0, 0, 0, 0.32); + --inset-surface-strong: rgba(0, 0, 0, 0.42); + --section-surface: rgba(0, 0, 0, 0.22); + --pos-card-bg: rgba(10, 16, 28, 0.95); + --fs-scrim: rgba(2, 6, 12, 0.92); + --btn-surface: rgba(0, 0, 0, 0.4); --text: #e8f4ff; --muted: #6b8aa8; --border: rgba(0, 212, 255, 0.22); @@ -21,6 +28,21 @@ html[data-theme="dark"] { --glow: 0 0 24px rgba(0, 212, 255, 0.15); --radius: 10px; --shadow: 0 8px 32px rgba(0, 0, 0, 0.45); + --plan-title: #f0f2ff; + --plan-meta: #8892b0; + --plan-meta-accent: #6ab8ff; + --plan-lbl: #8b95b8; + --plan-val: #f0f2ff; + --plan-val-neutral: #cfd3ef; + --plan-border-dash: #2a3558; + --plan-col-divider: #243050; + --plan-dca-th: #6a7598; + --plan-close-bg: #5c1e2a; + --plan-close-fg: #ffb4b4; + --plan-be-label: #cfd3ef; + --plan-be-input-bg: #0f1424; + --plan-be-input-border: #304164; + --plan-be-btn-bg: #1f4a3a; --font: "JetBrains Mono", ui-monospace, Consolas, monospace; --display: "Orbitron", var(--font); --mono: var(--font); @@ -29,26 +51,48 @@ html[data-theme="dark"] { } html[data-theme="light"] { - --bg: #e8eef5; - --bg-elevated: #ffffff; + --bg: #d4dde8; + --bg-elevated: #f6f9fc; --panel: rgba(255, 255, 255, 0.94); --panel-hover: rgba(248, 252, 255, 0.98); --panel-solid: #ffffff; - --panel-solid-border: #c8d4e4; - --nav-bg: rgba(255, 255, 255, 0.88); - --overlay: rgba(15, 35, 60, 0.35); - --chart-surface: #f4f7fb; - --text: #152030; - --muted: #5a6f85; - --border: rgba(0, 120, 170, 0.28); - --border-soft: rgba(0, 90, 140, 0.14); + --panel-solid-border: #b8c8d8; + --nav-bg: rgba(255, 255, 255, 0.92); + --overlay: rgba(15, 35, 60, 0.28); + --chart-surface: #f0f4f9; + --chart-bar-bg: #e8eef5; + --inset-surface: rgba(255, 255, 255, 0.9); + --inset-surface-strong: #eef3f8; + --section-surface: rgba(255, 255, 255, 0.82); + --pos-card-bg: rgba(255, 255, 255, 0.96); + --fs-scrim: rgba(212, 221, 232, 0.94); + --btn-surface: rgba(255, 255, 255, 0.85); + --text: #142232; + --muted: #4a6078; + --border: rgba(0, 95, 140, 0.26); + --border-soft: rgba(0, 75, 115, 0.14); --green: #0a8f5c; --red: #c93552; - --accent: #007aa8; + --accent: #006e9a; --accent-2: #5b4fc7; - --accent-dim: rgba(0, 122, 168, 0.1); - --glow: 0 0 18px rgba(0, 122, 168, 0.12); - --shadow: 0 8px 28px rgba(20, 50, 90, 0.1); + --accent-dim: rgba(0, 110, 154, 0.12); + --glow: 0 0 16px rgba(0, 110, 154, 0.1); + --shadow: 0 6px 24px rgba(30, 60, 100, 0.1); + --plan-title: var(--text); + --plan-meta: var(--muted); + --plan-meta-accent: var(--accent); + --plan-lbl: var(--muted); + --plan-val: var(--text); + --plan-val-neutral: #5a6f85; + --plan-border-dash: rgba(0, 75, 115, 0.2); + --plan-col-divider: rgba(0, 75, 115, 0.16); + --plan-dca-th: var(--muted); + --plan-close-bg: rgba(201, 53, 82, 0.12); + --plan-close-fg: var(--red); + --plan-be-label: var(--muted); + --plan-be-input-bg: var(--bg-elevated); + --plan-be-input-border: var(--border-soft); + --plan-be-btn-bg: rgba(10, 143, 92, 0.14); color-scheme: light; } @@ -396,7 +440,7 @@ button.ghost:hover:not(:disabled) { button, .btn { - background: rgba(0, 0, 0, 0.4); + background: var(--btn-surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; @@ -738,8 +782,8 @@ body.market-chart-fs-open { align-items: center; gap: 12px; padding: 10px 16px; - border-bottom: 1px solid var(--border-soft, #2a3150); - background: rgba(10, 14, 20, 0.98); + border-bottom: 1px solid var(--border-soft); + background: var(--panel-solid); } .instance-frame-title { @@ -761,14 +805,14 @@ body.market-chart-fs-open { flex: 1 1 auto; width: 100%; border: none; - background: #0f1216; + background: var(--bg); } .exchange-fullscreen { position: fixed; inset: 0; z-index: 150; - background: rgba(2, 6, 12, 0.92); + background: var(--fs-scrim); backdrop-filter: blur(6px); overflow: auto; padding: 16px 20px 24px; @@ -851,7 +895,7 @@ body.market-chart-fs-open { gap: 8px; font-size: 12px; padding: 6px 8px; - background: rgba(0, 0, 0, 0.25); + background: var(--inset-surface); border-radius: 6px; border: 1px solid var(--border-soft); } @@ -934,7 +978,7 @@ body.market-chart-fs-open { /* 对齐实盘「实时持仓」pos-card */ .hub-pos-card.pos-card { - background: rgba(10, 16, 28, 0.95); + background: var(--pos-card-bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; @@ -1172,7 +1216,7 @@ body.market-chart-fs-open { .hub-section-card { margin-top: 14px; padding: 12px 14px; - background: rgba(0, 0, 0, 0.22); + background: var(--section-surface); border: 1px solid var(--border-soft); border-radius: 10px; } @@ -1225,7 +1269,7 @@ body.market-chart-fs-open { .hub-mini-card { padding: 10px 12px; - background: rgba(0, 0, 0, 0.3); + background: var(--inset-surface); border: 1px solid var(--border-soft); border-radius: 8px; } @@ -1297,7 +1341,7 @@ body.market-chart-fs-open { } .stat-box { - background: rgba(0, 0, 0, 0.35); + background: var(--inset-surface); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; @@ -1396,7 +1440,7 @@ body.market-chart-fs-open { .hub-trend-running-title { margin: 0 0 10px; font-size: 0.95rem; - color: #b8c4ff; + color: var(--accent); font-weight: 600; } @@ -1429,18 +1473,18 @@ body.market-chart-fs-open { flex-wrap: wrap; font-size: 1rem; font-weight: 700; - color: #f0f2ff; + color: var(--plan-title); } .hub-trend-plan-card .plan-card-meta { font-size: 0.76rem; - color: #8892b0; + color: var(--plan-meta); line-height: 1.55; margin-bottom: 10px; } .hub-trend-plan-card .plan-card-meta .accent { - color: #6ab8ff; + color: var(--plan-meta-accent); } .hub-trend-plan-card .plan-card-meta strong { @@ -1454,7 +1498,7 @@ body.market-chart-fs-open { align-items: start; margin-bottom: 10px; padding-bottom: 10px; - border-bottom: 1px dashed #2a3558; + border-bottom: 1px dashed var(--plan-border-dash); } .hub-trend-plan-col-left .plan-card-meta { @@ -1479,11 +1523,11 @@ body.market-chart-fs-open { .hub-trend-plan-card .plan-cell .lbl { font-size: 0.72rem; - color: #8b95b8; + color: var(--plan-lbl); } .hub-trend-plan-card .plan-cell .val { - color: #f0f2ff; + color: var(--plan-val); font-size: 0.88rem; font-weight: 500; } @@ -1497,13 +1541,13 @@ body.market-chart-fs-open { } .hub-trend-plan-card .plan-cell .val.pnl-neutral { - color: #cfd3ef; + color: var(--plan-val-neutral); } .hub-trend-plan-card .btn-close-plan { padding: 7px 14px; - background: #5c1e2a; - color: #ffb4b4; + background: var(--plan-close-bg); + color: var(--plan-close-fg); border: none; border-radius: 8px; cursor: pointer; @@ -1527,13 +1571,13 @@ body.market-chart-fs-open { .hub-trend-plan-col-right { min-width: 0; - border-left: 1px solid #243050; + border-left: 1px solid var(--plan-col-divider); padding-left: 14px; } .hub-dca-empty { font-size: 0.76rem; - color: #8892b0; + color: var(--plan-meta); padding: 8px 0; } @@ -1554,7 +1598,7 @@ body.market-chart-fs-open { .hub-trend-plan-card .plan-dca-title { font-size: 0.74rem; - color: #8b95b8; + color: var(--plan-lbl); margin-bottom: 8px; } @@ -1567,12 +1611,12 @@ body.market-chart-fs-open { .hub-trend-plan-card .plan-dca-table th, .hub-trend-plan-card .plan-dca-table td { padding: 6px 8px; - border-bottom: 1px solid #243050; + border-bottom: 1px solid var(--plan-col-divider); text-align: left; } .hub-trend-plan-card .plan-dca-table th { - color: #6a7598; + color: var(--plan-dca-th); font-weight: 600; } @@ -1594,7 +1638,7 @@ body.market-chart-fs-open { .hub-trend-plan-card .hub-plan-be-label { font-size: 0.78rem; - color: #cfd3ef; + color: var(--plan-be-label); display: flex; align-items: center; gap: 6px; @@ -1604,16 +1648,16 @@ body.market-chart-fs-open { width: 72px; padding: 4px 8px; border-radius: 6px; - border: 1px solid #304164; - background: #0f1424; - color: #cfd3ef; - opacity: 0.85; + border: 1px solid var(--plan-be-input-border); + background: var(--plan-be-input-bg); + color: var(--plan-val); + opacity: 0.92; } .hub-trend-plan-card .hub-plan-be-btn { padding: 6px 12px; - background: #1f4a3a; - color: #8fc8ff; + background: var(--plan-be-btn-bg); + color: var(--accent); border-radius: 8px; font-size: 0.78rem; text-decoration: none; @@ -1658,7 +1702,7 @@ body.market-chart-fs-open { border-left: none; padding-left: 0; padding-top: 10px; - border-top: 1px dashed #2a3558; + border-top: 1px dashed var(--plan-border-dash); } } @@ -1718,7 +1762,7 @@ button.btn-sm { .pos-orders-collapse { margin: 10px 0 0; padding: 0; - background: rgba(0, 0, 0, 0.28); + background: var(--inset-surface); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; @@ -1832,7 +1876,7 @@ button.btn-sm { .modal-backdrop { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.65); + background: var(--overlay); } .modal-panel { @@ -1876,7 +1920,7 @@ button.btn-sm { .modal-field input { width: 100%; padding: 8px 10px; - background: rgba(0, 0, 0, 0.35); + background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 6px; color: var(--text); @@ -2053,7 +2097,7 @@ button.btn-sm { .field select, .form-row input, .form-row select { - background: rgba(0, 0, 0, 0.45); + background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); border-radius: 8px; @@ -2661,8 +2705,8 @@ body.login-page { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-soft); - background: rgba(10, 16, 26, 0.98); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); + background: var(--panel-solid); + box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; @@ -2742,7 +2786,7 @@ body.login-page { flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); - background: rgba(8, 14, 24, 0.96); + background: var(--chart-bar-bg); font-size: 0.78rem; } @@ -2771,7 +2815,8 @@ body.login-page { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.12em; - color: rgba(184, 212, 232, 0.18); + color: var(--muted); + opacity: 0.22; pointer-events: none; white-space: nowrap; user-select: none; @@ -2796,7 +2841,7 @@ body.login-page { border-radius: 4px; background: rgba(0, 255, 157, 0.12); border: 1px solid rgba(0, 255, 157, 0.35); - color: #00ff9d; + color: var(--green); font-size: 0.72rem; font-weight: 600; } @@ -3018,7 +3063,7 @@ body.login-page { font-family: var(--font); border-radius: 6px; border: 1px solid var(--border-soft); - background: rgba(8, 14, 24, 0.92); + background: var(--chart-bar-bg); color: var(--muted); cursor: pointer; line-height: 1.2; @@ -3030,68 +3075,103 @@ body.login-page { } .market-price-auto.is-on { - color: #00ff9d; + color: var(--green); border-color: rgba(0, 255, 157, 0.45); background: rgba(0, 255, 157, 0.1); } -/* —— 亮色主题：背景与局部硬编码色 —— */ +.market-chart-wrap.is-fullscreen { + background: var(--bg); +} + +.market-chart-wrap.is-fullscreen .market-ohlcv-bar, +.market-chart-wrap.is-fullscreen .market-fs-toolbar { + background: var(--chart-bar-bg); +} + +/* —— 亮色主题：对比度与全屏/放大 —— */ html[data-theme="light"] .app-bg, html[data-theme="light"] .login-bg { background: - linear-gradient(rgba(0, 100, 150, 0.06) 1px, transparent 1px), - linear-gradient(90deg, rgba(0, 100, 150, 0.06) 1px, transparent 1px), - radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 140, 200, 0.1), transparent), - radial-gradient(ellipse 60% 40% at 100% 100%, rgba(90, 80, 200, 0.06), transparent); + linear-gradient(rgba(0, 90, 130, 0.07) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 90, 130, 0.07) 1px, transparent 1px), + radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 120, 180, 0.08), transparent), + radial-gradient(ellipse 60% 40% at 100% 100%, rgba(80, 70, 180, 0.05), transparent); background-size: 48px 48px, 48px 48px, auto, auto; } html[data-theme="light"] .app-bg::after, html[data-theme="light"] .login-bg::after { - opacity: 0.15; + opacity: 0.12; } -html[data-theme="light"] .market-ind-options { - background: rgba(255, 255, 255, 0.98); - box-shadow: var(--shadow); +html[data-theme="light"] a:hover { + text-shadow: none; } -html[data-theme="light"] .market-price-auto { - background: rgba(255, 255, 255, 0.95); +html[data-theme="light"] .side-long, +html[data-theme="light"] .side-short { + text-shadow: none; +} + +html[data-theme="light"] .top-nav a.active { + background: linear-gradient(135deg, rgba(0, 110, 154, 0.14), rgba(91, 79, 199, 0.08)); + box-shadow: none; +} + +html[data-theme="light"] .mkt-exchange-tag { + background: rgba(10, 143, 92, 0.1); + border-color: rgba(10, 143, 92, 0.32); +} + +html[data-theme="light"] .market-ind-menu[open] summary { + border-color: rgba(10, 143, 92, 0.35); } html[data-theme="light"] .market-price-auto.is-on { - color: var(--green); - background: rgba(10, 143, 92, 0.12); + border-color: rgba(10, 143, 92, 0.4); } -html[data-theme="light"] .hub-trend-plan-card .plan-card-meta, -html[data-theme="light"] .hub-trend-plan-card .plan-cell .lbl, -html[data-theme="light"] .hub-trend-plan-card .plan-dca-title { - color: var(--muted); +html[data-theme="light"] .market-price-tag.is-up { + background: var(--green); + color: #fff; } -html[data-theme="light"] .hub-trend-plan-card .plan-card-meta .accent { +html[data-theme="light"] .market-price-tag.is-up .market-price-tag-label { + color: rgba(255, 255, 255, 0.9); +} + +html[data-theme="light"] .market-price-tag { + box-shadow: 0 1px 4px rgba(30, 60, 100, 0.15); +} + +html[data-theme="light"] .stat-box { + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); +} + +html[data-theme="light"] .card-stat-chip.card-stat-key-breakout { + background: rgba(0, 110, 154, 0.1); + border-color: rgba(0, 110, 154, 0.28); +} + +html[data-theme="light"] .card-stat-chip.card-stat-trend { + background: rgba(10, 143, 92, 0.1); + border-color: rgba(10, 143, 92, 0.28); +} + +html[data-theme="light"] .card-stat-chip.card-stat-key-watch { + background: rgba(91, 79, 199, 0.1); + border-color: rgba(91, 79, 199, 0.28); +} + +html[data-theme="light"] .hub-pos-card .pos-entrust-btn { + background: rgba(0, 110, 154, 0.1); color: var(--accent); -} - -html[data-theme="light"] .hub-trend-plan-card .plan-cell .val { - color: var(--text); -} - -html[data-theme="light"] .hub-trend-plan-card .plan-dca-table th { - color: var(--muted); -} - -html[data-theme="light"] .hub-trend-plan-card .plan-dca-table th, -html[data-theme="light"] .hub-trend-plan-card .plan-dca-table td { - border-bottom-color: var(--border-soft); -} - -html[data-theme="light"] .hub-trend-plan-card .hub-plan-be-input { - background: var(--bg-elevated); border-color: var(--border-soft); - color: var(--text); +} + +html[data-theme="light"] .hub-pos-card .pos-value.pnl-pos { + text-shadow: none; } html[data-theme="light"] .exchange-fullscreen-panel, @@ -3108,7 +3188,9 @@ html[data-theme="light"] textarea { } html[data-theme="light"] .hub-tile, +html[data-theme="light"] .card, html[data-theme="light"] .hub-pos-card, +html[data-theme="light"] .hub-trend-plan-card, html[data-theme="light"] .settings-row { - box-shadow: 0 2px 12px rgba(20, 50, 90, 0.06); + box-shadow: 0 2px 10px rgba(30, 60, 100, 0.08); } diff --git a/manual_trading_hub/static/chart.js b/manual_trading_hub/static/chart.js index fd66023..2c26e07 100644 --- a/manual_trading_hub/static/chart.js +++ b/manual_trading_hub/static/chart.js @@ -1290,9 +1290,9 @@ const light = document.documentElement.getAttribute("data-theme") === "light"; return light ? { - bg: "#f4f7fb", - text: "#5a6f85", - border: "#c8d4e4", + bg: "#f0f4f9", + text: "#4a6078", + border: "#b8c8d8", up: "#0a8f5c", down: "#c93552", volUp: "rgba(10, 143, 92, 0.45)", diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index 12aa2fa..0fa261d 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -2,7 +2,7 @@ - + @@ -15,7 +15,7 @@ - + @@ -248,7 +248,7 @@
- - + + diff --git a/manual_trading_hub/static/login.html b/manual_trading_hub/static/login.html index c55ffe9..a5e18d8 100644 --- a/manual_trading_hub/static/login.html +++ b/manual_trading_hub/static/login.html @@ -2,7 +2,7 @@ - + @@ -11,7 +11,7 @@ 登录 · 复盘系统中控 - + diff --git a/manual_trading_hub/static/theme.js b/manual_trading_hub/static/theme.js index 12838f1..d7df38b 100644 --- a/manual_trading_hub/static/theme.js +++ b/manual_trading_hub/static/theme.js @@ -1,7 +1,7 @@ /** 中控主题：暗色（默认）/ 亮色，localStorage hub-theme */ (function (global) { const KEY = "hub-theme"; - const META = { dark: "#0b0e18", light: "#e8eef5" }; + const META = { dark: "#0b0e18", light: "#d4dde8" }; function normalize(theme) { return theme === "light" ? "light" : "dark";