dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(hub): refine light theme contrast and theme-aware fullscreen UI

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-04 12:08:35 +08:00
parent d1914df46f
commit e99c6cef08
5 changed files with 187 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+177 -95
View File
@@ -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);
}
manual_trading_hub/static/chart.js
+3 -3
View File
@@ -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)",
manual_trading_hub/static/index.html
+4 -4
View File
@@ -2,7 +2,7 @@
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="utf-8" />
<script src="/assets/theme.js?v=20260604-hub-theme"></script>
<script src="/assets/theme.js?v=20260604-hub-theme2"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0b0e18" />
<meta name="apple-mobile-web-app-title" content="中控" />
@@ -15,7 +15,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-theme" />
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-theme2" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -248,7 +248,7 @@
<div id="toast"></div>
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="/assets/chart.js?v=20260604-hub-theme"></script>
<script src="/assets/app.js?v=20260604-hub-theme"></script>
<script src="/assets/chart.js?v=20260604-hub-theme2"></script>
<script src="/assets/app.js?v=20260604-hub-theme2"></script>
</body>
</html>
manual_trading_hub/static/login.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="utf-8" />
<script src="/assets/theme.js?v=20260604-hub-theme"></script>
<script src="/assets/theme.js?v=20260604-hub-theme2"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0b0e18" />
<meta name="apple-mobile-web-app-title" content="中控" />
@@ -11,7 +11,7 @@
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" />
<link rel="manifest" href="/assets/icons/manifest.webmanifest" />
<title>登录 · 复盘系统中控</title>
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-theme" />
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-theme2" />
</head>
<body class="login-page">
<div class="login-bg" aria-hidden="true"></div>
manual_trading_hub/static/theme.js
+1 -1
View File
@@ -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";