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
+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);