Improve hub and instance navigation contrast for light and dark themes.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-10 12:33:54 +08:00
parent 66d0721c12
commit 944673cac1
6 changed files with 121 additions and 17 deletions
+58 -9
View File
@@ -1,4 +1,21 @@
/* 实例页手机端:与中控一致,桌面专属区块隐藏;下载仅电脑端 */
:root,
html[data-theme="dark"] {
--inst-label: #8892b0;
--inst-muted: #9aa3bf;
--inst-text: #e8ecff;
--inst-nav-idle: #8fc8ff;
--inst-nav-active-fg: #dbe4ff;
}
html[data-theme="light"] {
--inst-label: #4a6078;
--inst-muted: #5a6f85;
--inst-text: #142232;
--inst-nav-idle: #006e9a;
--inst-nav-active-fg: #004d6e;
}
@media (max-width: 720px) {
.instance-desktop-only {
display: none !important;
@@ -362,13 +379,23 @@ html[data-theme="light"] .exchange-tag {
html[data-theme="light"] .top-nav a {
background: #fff !important;
color: #006e9a !important;
color: var(--inst-nav-idle) !important;
border-color: rgba(0, 95, 140, 0.22) !important;
}
html[data-theme="light"] .top-nav a.active {
html[data-theme="light"] .top-nav a:hover,
html[data-theme="light"] .embed-top-nav a:hover,
html[data-theme="light"] .strategy-subnav a:hover {
background: rgba(0, 110, 154, 0.1) !important;
color: var(--inst-nav-active-fg) !important;
}
html[data-theme="light"] .top-nav a.active,
html[data-theme="light"] .embed-top-nav a.active {
background: rgba(0, 110, 154, 0.12) !important;
color: #142232 !important;
color: var(--inst-nav-active-fg) !important;
border: 1px solid rgba(0, 95, 140, 0.28) !important;
font-weight: 600;
}
html[data-theme="light"] .stat-item,
@@ -581,7 +608,7 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
display: inline-flex;
align-items: center;
gap: 6px;
color: #9aa;
color: var(--inst-label);
margin: 0;
}
@@ -590,13 +617,13 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
}
.list-window-label {
color: #cfd3ef;
color: var(--inst-text);
font-size: 0.82rem;
white-space: nowrap;
}
.list-window-hint {
color: #8892b0;
color: var(--inst-muted);
font-size: 0.72rem;
white-space: nowrap;
}
@@ -650,7 +677,7 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
.stat-strip-item .label {
font-size: 0.72rem;
color: #8892b0;
color: var(--inst-label);
margin-bottom: 6px;
white-space: nowrap;
}
@@ -658,7 +685,7 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
.stat-strip-item .value {
font-size: 0.88rem;
font-weight: 600;
color: #e8ecff;
color: var(--inst-text);
line-height: 1.3;
white-space: nowrap;
}
@@ -726,7 +753,16 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
}
html[data-theme="light"] .stat-strip-item .value {
color: #142232;
color: var(--inst-text);
}
html[data-theme="light"] .stat-strip-item .label,
html[data-theme="light"] .instance-header-toolbar-filter label {
color: var(--inst-label) !important;
}
html[data-theme="light"] .list-window-hint {
color: var(--inst-muted) !important;
}
html[data-theme="light"] .instance-header-stats {
@@ -1067,6 +1103,19 @@ html[data-theme="light"] .strategy-subnav {
border-bottom-color: #d0dae4 !important;
}
html[data-theme="light"] .strategy-subnav a {
background: #fff !important;
color: var(--inst-nav-idle) !important;
border-color: rgba(0, 95, 140, 0.22) !important;
}
html[data-theme="light"] .strategy-subnav a.active {
background: rgba(0, 110, 154, 0.12) !important;
color: var(--inst-nav-active-fg) !important;
border: 1px solid rgba(0, 95, 140, 0.28) !important;
font-weight: 600;
}
/* ── 策略交易 / 策略记录(strategy_templates 内联)── */
html[data-theme="dark"] .strategy-records-page .sr-summary,
html[data-theme="dark"] .strategy-records-page .sr-detail {
+12 -1
View File
@@ -24,16 +24,27 @@ html[data-theme="light"] .header h1 {
}
html[data-theme="light"] .top-nav a,
html[data-theme="light"] .embed-top-nav a,
html[data-theme="light"] .strategy-subnav a {
background: #fff !important;
color: #006e9a !important;
border-color: rgba(0, 95, 140, 0.22) !important;
}
html[data-theme="light"] .top-nav a:hover,
html[data-theme="light"] .embed-top-nav a:hover,
html[data-theme="light"] .strategy-subnav a:hover {
background: rgba(0, 110, 154, 0.1) !important;
color: #004d6e !important;
}
html[data-theme="light"] .top-nav a.active,
html[data-theme="light"] .embed-top-nav a.active,
html[data-theme="light"] .strategy-subnav a.active {
background: rgba(0, 110, 154, 0.12) !important;
color: #142232 !important;
color: #004d6e !important;
border: 1px solid rgba(0, 95, 140, 0.28) !important;
font-weight: 600;
}
html[data-theme="light"] .card,
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
<link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
<link rel="stylesheet" href="/static/instance_page.css?v=4">
<link rel="stylesheet" href="/static/instance_theme.css?v=76">
<link rel="stylesheet" href="/static/instance_theme.css?v=77">
<script src="/static/account_risk_badge.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
+1 -1
View File
@@ -17,7 +17,7 @@
<link rel="manifest" href="/static/icons/manifest.webmanifest">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
<link rel="stylesheet" href="/static/instance_page.css?v=1">
<link rel="stylesheet" href="/static/instance_theme.css?v=76">
<link rel="stylesheet" href="/static/instance_theme.css?v=77">
</head>
<body
+48 -4
View File
@@ -68,6 +68,9 @@ html[data-theme="dark"] {
--archive-viz-mid-line: rgba(255, 255, 255, 0.2);
--archive-profit: #4cd97f;
--archive-loss: #ff6b6b;
--nav-link-idle: var(--muted);
--nav-link-hover-bg: var(--panel-hover);
--nav-link-active-fg: var(--accent);
color-scheme: dark;
}
@@ -135,6 +138,9 @@ html[data-theme="light"] {
--archive-viz-mid-line: rgba(20, 34, 50, 0.22);
--archive-profit: var(--green);
--archive-loss: var(--red);
--nav-link-idle: #3a5068;
--nav-link-hover-bg: rgba(0, 110, 154, 0.08);
--nav-link-active-fg: #004d6e;
color-scheme: light;
}
@@ -343,11 +349,12 @@ a:hover {
padding: 8px 16px;
border-radius: 7px;
text-decoration: none;
color: var(--muted);
color: var(--nav-link-idle);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
border: 1px solid transparent;
}
.top-nav a.nav-hidden {
@@ -356,15 +363,16 @@ a:hover {
.top-nav a:hover {
color: var(--text);
background: var(--panel-hover);
background: var(--nav-link-hover-bg);
text-decoration: none;
}
.top-nav a.active {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(123, 97, 255, 0.15));
color: var(--accent);
border: 1px solid var(--border);
color: var(--nav-link-active-fg);
border-color: var(--border);
box-shadow: var(--glow);
font-weight: 600;
}
button.ghost {
@@ -5122,11 +5130,47 @@ html[data-theme="light"] .side-short {
text-shadow: none;
}
html[data-theme="light"] .top-nav {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(0, 75, 115, 0.18);
box-shadow: 0 1px 4px rgba(30, 60, 100, 0.08);
}
html[data-theme="light"] .top-nav a.active {
background: linear-gradient(135deg, rgba(0, 110, 154, 0.14), rgba(91, 79, 199, 0.08));
color: var(--nav-link-active-fg);
border-color: rgba(0, 95, 140, 0.28);
box-shadow: none;
}
html[data-theme="light"] .theme-toggle {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(0, 75, 115, 0.18);
}
html[data-theme="light"] .theme-toggle-btn.is-active {
color: var(--nav-link-active-fg);
background: rgba(0, 110, 154, 0.12);
}
html[data-theme="light"] .header-right #btn-logout {
color: var(--nav-link-idle);
border-color: rgba(0, 75, 115, 0.18);
}
html[data-theme="light"] .instance-frame-toolbar {
background: #fff;
}
html[data-theme="light"] .instance-frame-toolbar .ghost {
color: var(--nav-link-idle);
border-color: rgba(0, 75, 115, 0.18);
}
html[data-theme="light"] .instance-frame-title {
color: var(--text);
}
html[data-theme="light"] .mkt-exchange-tag {
background: rgba(10, 143, 92, 0.1);
border-color: rgba(10, 143, 92, 0.32);
+1 -1
View File
@@ -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=20260708-hub-ai-env" />
<link rel="stylesheet" href="/assets/app.css?v=20260710-nav-theme" />
<link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=3" />
<link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
<script src="/assets/account_risk_badge.js?v=4"></script>