style(hub): fix light-theme load button and market position panel colors

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-04 12:14:48 +08:00
parent e99c6cef08
commit 9d12323ce6
3 changed files with 138 additions and 21 deletions
+132 -15
View File
@@ -43,6 +43,11 @@ html[data-theme="dark"] {
--plan-be-input-bg: #0f1424;
--plan-be-input-border: #304164;
--plan-be-btn-bg: #1f4a3a;
--primary-btn-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.38), rgba(123, 97, 255, 0.28));
--primary-btn-fg: #ffffff;
--primary-btn-border: var(--accent);
--status-done: #4cd97f;
--status-pending: #9aa3c4;
--font: "JetBrains Mono", ui-monospace, Consolas, monospace;
--display: "Orbitron", var(--font);
--mono: var(--font);
@@ -93,6 +98,11 @@ html[data-theme="light"] {
--plan-be-input-bg: var(--bg-elevated);
--plan-be-input-border: var(--border-soft);
--plan-be-btn-bg: rgba(10, 143, 92, 0.14);
--primary-btn-bg: #006e9a;
--primary-btn-fg: #ffffff;
--primary-btn-border: #005a82;
--status-done: #087a50;
--status-pending: #3d556d;
color-scheme: light;
}
@@ -460,10 +470,11 @@ button:hover:not(:disabled) {
}
button.primary {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(123, 97, 255, 0.2));
border-color: var(--accent);
color: #fff;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
background: var(--primary-btn-bg);
border-color: var(--primary-btn-border);
color: var(--primary-btn-fg);
font-weight: 600;
text-shadow: none;
}
button.danger {
@@ -1613,6 +1624,11 @@ body.market-chart-fs-open {
padding: 6px 8px;
border-bottom: 1px solid var(--plan-col-divider);
text-align: left;
font-weight: 500;
}
.hub-trend-plan-card .plan-dca-table td {
color: var(--text);
}
.hub-trend-plan-card .plan-dca-table th {
@@ -1621,11 +1637,13 @@ body.market-chart-fs-open {
}
.hub-trend-plan-card .plan-dca-table .st-done {
color: #4cd97f;
color: var(--status-done);
font-weight: 700;
}
.hub-trend-plan-card .plan-dca-table .st-pending {
color: #9aa3c4;
color: var(--status-pending);
font-weight: 600;
}
.hub-trend-plan-card .hub-plan-breakeven-row {
@@ -2855,6 +2873,7 @@ body.login-page {
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
font-weight: 600;
}
.market-ohlcv-row .ohlcv-item {
@@ -2868,10 +2887,11 @@ body.login-page {
.market-pos-panel {
flex: 0 0 auto;
padding: 6px 12px 8px;
padding: 8px 12px 10px;
border-bottom: 1px solid var(--border-soft);
background: rgba(12, 20, 32, 0.98);
font-size: 0.76rem;
background: var(--chart-bar-bg);
color: var(--text);
font-size: 0.8rem;
}
.market-pos-panel.hidden {
@@ -2895,13 +2915,13 @@ body.login-page {
.market-pos-side.side-long {
background: rgba(0, 255, 157, 0.12);
border: 1px solid rgba(0, 255, 157, 0.35);
color: #00ff9d;
color: var(--green);
}
.market-pos-side.side-short {
background: rgba(255, 77, 109, 0.12);
border: 1px solid rgba(255, 77, 109, 0.35);
color: #ff4d6d;
color: var(--red);
}
.market-pos-clear {
@@ -2910,12 +2930,23 @@ body.login-page {
padding: 2px 8px;
}
.market-pos-panel .ohlcv-item {
font-weight: 600;
color: var(--text);
}
.market-pos-panel .ohlcv-item .k {
font-weight: 600;
color: var(--muted);
}
.market-pos-orders {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin-top: 6px;
color: var(--muted);
color: var(--text);
font-weight: 500;
}
.market-pos-orders-empty {
@@ -2929,9 +2960,10 @@ body.login-page {
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
background: var(--inset-surface);
border: 1px solid var(--border-soft);
white-space: nowrap;
font-weight: 500;
}
.market-pos-order-kind {
@@ -2944,8 +2976,9 @@ body.login-page {
}
.market-pos-order-price {
color: #ffb84d;
color: #c98a20;
font-family: var(--font-mono, monospace);
font-weight: 600;
}
.market-pos-order-amt {
@@ -2954,8 +2987,9 @@ body.login-page {
}
.market-pos-tp-monitored {
color: #8fc8ff;
color: var(--accent);
font-size: 0.72rem;
font-weight: 600;
}
.sym-link {
@@ -3194,3 +3228,86 @@ html[data-theme="light"] .hub-trend-plan-card,
html[data-theme="light"] .settings-row {
box-shadow: 0 2px 10px rgba(30, 60, 100, 0.08);
}
html[data-theme="light"] button.primary,
html[data-theme="light"] .market-toolbar button.primary,
html[data-theme="light"] #market-load,
html[data-theme="light"] #market-fs-load,
html[data-theme="light"] #btn-monitor-refresh {
background: #006e9a;
border-color: #005a82;
color: #fff;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 95, 140, 0.28);
}
html[data-theme="light"] button.primary:hover:not(:disabled),
html[data-theme="light"] #market-load:hover:not(:disabled),
html[data-theme="light"] #market-fs-load:hover:not(:disabled),
html[data-theme="light"] #btn-monitor-refresh:hover:not(:disabled) {
background: #0088b8;
color: #fff;
box-shadow: 0 3px 12px rgba(0, 95, 140, 0.35);
}
html[data-theme="light"] .market-pos-panel {
background: var(--chart-bar-bg);
color: var(--text);
}
html[data-theme="light"] .market-pos-side.side-long {
background: rgba(10, 143, 92, 0.12);
border-color: rgba(10, 143, 92, 0.35);
}
html[data-theme="light"] .market-pos-side.side-short {
background: rgba(201, 53, 82, 0.1);
border-color: rgba(201, 53, 82, 0.35);
}
html[data-theme="light"] .market-pos-order {
background: var(--inset-surface-strong);
}
html[data-theme="light"] .market-pos-order-price {
color: #9a6b10;
}
html[data-theme="light"] .market-pos-clear {
font-weight: 600;
color: var(--text);
border-color: var(--border);
background: var(--bg-elevated);
}
html[data-theme="light"] .market-status {
font-weight: 600;
color: var(--text);
opacity: 0.88;
}
html[data-theme="light"] .toolbar-meta {
font-weight: 600;
color: var(--text);
opacity: 0.85;
}
html[data-theme="light"] .chk-label {
font-weight: 600;
color: var(--text);
}
html[data-theme="light"] .hub-trend-plan-card .plan-dca-table {
font-size: 0.8rem;
}
html[data-theme="light"] .hub-trend-plan-card .plan-dca-table th {
font-weight: 700;
color: var(--text);
}
html[data-theme="light"] button.danger {
font-weight: 600;
background: rgba(201, 53, 82, 0.1);
border-color: rgba(201, 53, 82, 0.45);
}