Boost light-mode contrast on options position cards.

Darken labels, hints, and badges so call/put chips and metric text stay readable on white.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-16 12:00:30 +08:00
parent 4c7197ad99
commit b50eebe37c
5 changed files with 157 additions and 32 deletions
+117 -29
View File
@@ -881,11 +881,11 @@ html[data-theme="light"] .pos-meta,
html[data-theme="light"] .pos-footer,
html[data-theme="light"] .pos-ex-orders-title,
html[data-theme="light"] .pos-ex-order-row {
color: #4a6078 !important;
color: #1e293b !important;
}
html[data-theme="light"] .pos-meta-item::after {
color: #b8c8d8 !important;
color: #94a3b8 !important;
}
.pos-time-close-meta {
@@ -971,13 +971,15 @@ html[data-theme="light"] .pos-meta-on {
}
html[data-theme="light"] .pos-side-long {
background: rgba(0, 110, 154, 0.12) !important;
color: #006e9a !important;
background: #006e9a !important;
color: #fff !important;
border: 1px solid #005a82 !important;
}
html[data-theme="light"] .pos-side-short {
background: rgba(180, 50, 50, 0.1) !important;
color: #b03030 !important;
background: #b03030 !important;
color: #fff !important;
border: 1px solid #8a2424 !important;
}
html[data-theme="light"] .pos-entrust-btn,
@@ -4706,26 +4708,89 @@ html[data-theme="light"] .pos-pnl-loss {
}
/* 期权持仓 · 亮色主题对比度 */
html[data-theme="light"] .options-page-wrap .opt-pos-card {
background: #fff !important;
border-color: #94a3b8 !important;
}
html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-label,
html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-meta,
html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-meta-item {
color: #334155 !important;
color: #0f172a !important;
font-weight: 500 !important;
opacity: 1 !important;
}
html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-meta-item::after {
color: #94a3b8 !important;
color: #64748b !important;
}
html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-value {
color: #0f172a !important;
color: #020617 !important;
font-weight: 600 !important;
}
html[data-theme="light"] .options-page-wrap .opt-bid-plain {
color: #1e3a52 !important;
color: #0f172a !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-value {
color: #9f1239 !important;
}
html[data-theme="light"] .options-page-wrap .opt-bid-invalid-hint,
html[data-theme="light"] .options-page-wrap .opt-pos-card .muted {
color: #334155 !important;
opacity: 1 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-row {
border-top-color: #94a3b8 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-row-label {
color: #0f172a !important;
font-weight: 600 !important;
}
html[data-theme="light"] .options-page-wrap .opt-pos-target-input {
background: #fff !important;
color: #0f172a !important;
border-color: #64748b !important;
}
html[data-theme="light"] .options-page-wrap .opt-pos-target-input::placeholder {
color: #64748b !important;
opacity: 1 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-row .btn-secondary {
color: #004d6e !important;
border-color: #007aa8 !important;
background: #e8f4fa !important;
font-weight: 600 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-armed {
color: #004d6e !important;
font-weight: 600 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-est-item .k {
color: #334155 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-est-item .v {
color: #0f172a !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-row-hint {
color: #334155 !important;
}
html[data-theme="light"] .options-page-wrap .opt-expiry-cd {
color: #004d6e !important;
font-weight: 600 !important;
}
html[data-theme="light"] .options-page-wrap .opt-expiry-cd--urgent {
@@ -4733,60 +4798,83 @@ html[data-theme="light"] .options-page-wrap .opt-expiry-cd--urgent {
}
html[data-theme="light"] .options-page-wrap .opt-expiry-cd--expired {
color: #64748b !important;
color: #475569 !important;
}
html[data-theme="light"] .options-page-wrap .opt-pos-tab:not(.active) {
color: #334155 !important;
border-color: #b8c8d8 !important;
color: #0f172a !important;
border-color: #64748b !important;
background: #fff !important;
font-weight: 500 !important;
}
html[data-theme="light"] .options-page-wrap .opt-pos-tab.active {
color: #003d57 !important;
border-color: #006e9a !important;
background: rgba(0, 110, 154, 0.16) !important;
font-weight: 700 !important;
}
html[data-theme="light"] .options-page-wrap .options-pos-head h2,
html[data-theme="light"] .options-page-wrap .options-pos-card-wrap h2 {
color: #0f172a !important;
color: #020617 !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule {
border: 1px solid #b8c8d8 !important;
background: #eef3f8 !important;
border: 1px solid #64748b !important;
background: #e2e8f0 !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule summary {
color: #0f172a !important;
background: #e2eaf2 !important;
background: #cbd5e1 !important;
font-weight: 600 !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule summary::after {
background: rgba(0, 95, 140, 0.12) !important;
color: #004d6e !important;
background: rgba(0, 95, 140, 0.18) !important;
color: #003d57 !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule[open] summary {
background: #dce6f0 !important;
border-bottom-color: #b8c8d8 !important;
background: #b8c8d8 !important;
border-bottom-color: #64748b !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule-body {
color: #334155 !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule-body p {
color: #1e293b !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule-body p {
color: #0f172a !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule-body li {
color: #334155 !important;
color: #1e293b !important;
}
html[data-theme="light"] .options-page-wrap .opt-close-rule-body code {
color: #142232 !important;
color: #0f172a !important;
background: #fff !important;
border: 1px solid #c8d4e0 !important;
border: 1px solid #94a3b8 !important;
}
html[data-theme="light"] .options-page-wrap .pos-empty {
color: #475569 !important;
color: #334155 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-monitors {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-monitors-head,
html[data-theme="light"] .options-page-wrap .opt-target-mon-inst {
color: #f8fafc !important;
}
html[data-theme="light"] .options-page-wrap .opt-target-mon-rule {
color: #7dd3fc !important;
}
html[data-theme="light"] .order-preview-profit {
+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=6">
<link rel="stylesheet" href="/static/instance_theme.css?v=93">
<link rel="stylesheet" href="/static/instance_theme.css?v=94">
<script src="/static/account_risk_badge.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<title>{{ pwa_app_name }}</title>
+1 -1
View File
@@ -17,7 +17,7 @@
<link rel="manifest" href="/static/icons/manifest.webmanifest">
<title>{{ pwa_app_name }}</title>
<link rel="stylesheet" href="/static/instance_page.css?v=3">
<link rel="stylesheet" href="/static/instance_theme.css?v=93">
<link rel="stylesheet" href="/static/instance_theme.css?v=94">
</head>
<body
+37
View File
@@ -2034,6 +2034,43 @@ body.market-chart-fs-open {
font-weight: 600;
}
html[data-theme="light"] .hub-pos-card .pos-label {
color: #0f172a;
font-weight: 500;
}
html[data-theme="light"] .hub-pos-card .pos-meta,
html[data-theme="light"] .hub-pos-card .pos-meta-item {
color: #1e293b;
}
html[data-theme="light"] .hub-pos-card .pos-value {
color: #020617;
font-weight: 600;
}
html[data-theme="light"] .hub-pos-card .pos-side-long,
html[data-theme="light"] .hub-pos-card .pos-side-badge.side-long {
background: #006e9a;
color: #fff;
border-color: #005a82;
}
html[data-theme="light"] .hub-pos-card .pos-side-short,
html[data-theme="light"] .hub-pos-card .pos-side-badge.side-short {
background: #b03030;
color: #fff;
border-color: #8a2424;
}
html[data-theme="light"] .hub-opt-pos-card .opt-bid-plain {
color: #0f172a;
}
html[data-theme="light"] .hub-opt-pos-card .opt-close-value {
color: #9f1239;
}
html[data-theme="light"] .hub-pos-card .pos-tp-profit {
color: #1a8f4a;
}
+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=20260716-funds-pnl-banner" />
<link rel="stylesheet" href="/assets/app.css?v=20260716-opt-light-contrast" />
<link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=4" />
<link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
<script src="/assets/account_risk_badge.js?v=4"></script>