Files
xiaobaifupan/static/theme.css
T

1408 lines
40 KiB
CSS

/* Runtime theme layer. Existing page geometry stays untouched; only semantic color tokens change. */
:root {
--chart-background: #fbfcfd;
--chart-grid: #e2e8ec;
--chart-axis: #6c7983;
--chart-zero: #aeb7c1;
--chart-line: #1d65c1;
--chart-average: #b7791f;
--chart-up: #c93f45;
--chart-down: #087a55;
--chart-up-volume: rgba(201, 63, 69, .58);
--chart-down-volume: rgba(8, 122, 85, .58);
--chart-area: rgba(37, 99, 235, .07);
--chart-alert-area: rgba(224, 69, 54, .05);
--chart-moving-average: #d1d5db;
--chart-repair: #f59e0b;
--chart-ma-10: #a76500;
--chart-ma-20: #626c78;
}
/* Theme changes are captured as one page-level transition. Descendant effects are
suppressed briefly so tables and cards cannot repaint on separate timelines. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
animation: none !important;
transition: none !important;
}
::view-transition-old(root) {
animation: theme-fade-out var(--motion-medium) ease both;
}
::view-transition-new(root) {
animation: theme-fade-in var(--motion-medium) ease both;
}
@keyframes theme-fade-out {
to { opacity: 0; }
}
@keyframes theme-fade-in {
from { opacity: 0; }
}
:root[data-theme="dark"] {
color-scheme: dark;
--canvas: #121416;
--surface: #1b1e21;
--surface-muted: #202428;
--surface-subtle: #24282d;
--border: #343a40;
--border-strong: #474f57;
--text-primary: #e8eaed;
--text-secondary: #adb5bd;
--text-tertiary: #7f8993;
--action: #6ca8e8;
--action-hover: #8bbcf0;
--action-soft: #23364a;
--market-up: #f06d73;
--market-up-soft: #40262a;
--market-down: #43bc8a;
--market-down-soft: #1d382f;
--warning-color: #e2ad58;
--warning-soft: #3d3220;
/* Bridge every historical design-token layer to the same dark palette. */
--xb-gray-25: var(--surface);
--xb-gray-50: var(--surface-muted);
--xb-gray-100: var(--canvas);
--xb-gray-200: var(--border);
--xb-gray-300: var(--border-strong);
--xb-gray-500: var(--text-secondary);
--xb-gray-700: #cbd1d7;
--xb-gray-900: var(--text-primary);
--xb-blue-50: var(--action-soft);
--xb-blue-100: #294866;
--xb-blue-500: var(--action);
--xb-blue-600: var(--action-hover);
--xb-red-50: var(--market-up-soft);
--xb-red-500: var(--market-up);
--xb-green-50: var(--market-down-soft);
--xb-green-500: var(--market-down);
--xb-amber-50: var(--warning-soft);
--xb-amber-500: var(--warning-color);
--surface-canvas: var(--canvas);
--surface-raised: var(--surface);
--surface-selected: var(--action-soft);
--card-bg: var(--surface);
--card-border: var(--border);
--primary: var(--action);
--primary-hover: var(--action-hover);
--danger: var(--market-up);
--success: var(--market-down);
--warning: var(--warning-color);
--r2-blue: var(--action);
--r2-blue-dark: var(--action-hover);
--r2-blue-soft: var(--action-soft);
--r2-blue-line: #42698e;
--r2-up: var(--market-up);
--r2-up-soft: var(--market-up-soft);
--r2-down: var(--market-down);
--r2-down-soft: var(--market-down-soft);
--r2-amber: var(--warning-color);
--r2-amber-soft: var(--warning-soft);
--r2-ink: var(--text-primary);
--r2-sub: var(--text-secondary);
--r2-faint: var(--text-tertiary);
--r2-line: var(--border);
--r2-line-soft: #2a2f34;
--r2-bg: var(--canvas);
--r2-card: var(--surface);
--r2-shadow: var(--shadow-soft);
--bg: var(--canvas);
--card: var(--surface);
--ink: var(--text-primary);
--sub: var(--text-secondary);
--faint: var(--text-tertiary);
--line: var(--border);
--line-soft: #2a2f34;
--line-strong: var(--border-strong);
--text: var(--text-primary);
--text-muted: var(--text-secondary);
--blue: var(--action);
--blue-d: var(--action-hover);
--blue-dark: var(--action-hover);
--blue-soft: var(--action-soft);
--blue-line: #42698e;
--up: var(--market-up);
--up-soft: var(--market-up-soft);
--down: var(--market-down);
--down-soft: var(--market-down-soft);
--coral: var(--market-up);
--coral-soft: var(--market-up-soft);
--green: var(--market-down);
--green-soft: var(--market-down-soft);
--amber: var(--warning-color);
--amber-soft: var(--warning-soft);
--dialog-ink: var(--text-primary);
--dialog-line: var(--border);
--heaven-paper: #191a18;
--heaven-paper-soft: #20211e;
--heaven-ink: #e5e0d4;
--heaven-muted: #aaa497;
--heaven-rule: #3d3a34;
--chart-background: #181b1e;
--chart-grid: #30363c;
--chart-axis: #a3adb6;
--chart-zero: #68737d;
--chart-line: #6ca8e8;
--chart-average: #e2ad58;
--chart-up: #f06d73;
--chart-down: #43bc8a;
--chart-up-volume: rgba(240, 109, 115, .52);
--chart-down-volume: rgba(67, 188, 138, .52);
--chart-area: rgba(108, 168, 232, .12);
--chart-alert-area: rgba(240, 109, 115, .09);
--chart-moving-average: #69737d;
--chart-repair: #e2ad58;
--chart-ma-10: #d39a45;
--chart-ma-20: #9aa5af;
--on-action: #101418;
--warning-line: #6d5a38;
--warning-line-strong: #66502d;
--control-shadow: 0 1px 3px rgba(0, 0, 0, .3);
--dialog-backdrop: rgba(0, 0, 0, .62);
--ladder-level-1: #2d2426;
--ladder-level-2: #2b2822;
--ladder-level-3: #252a2d;
--ladder-level-4: #20282b;
--ladder-level-5: #202428;
--heat-strong-bg: #304f7a;
--heat-strong-ink: #f2f6fb;
--heat-warm-bg: #2b405f;
--heat-warm-ink: #dfeaf7;
--heat-mild-bg: #293440;
--heat-mild-ink: #c7d2dc;
--heaven-field-bg: #23241f;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .16);
--shadow: 0 18px 50px rgba(0, 0, 0, .46);
}
:root[data-theme="dark"] :is(html, body, .main, .app-main) {
background: var(--canvas);
color: var(--text-primary);
}
:root[data-theme="dark"] :is(.sidebar, .module-nav, .topbar, .app-header, .overview-strip, .statusbar, .status-bar) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
box-shadow: none;
}
:root[data-theme="dark"] .app-header {
background: color-mix(in srgb, var(--surface) 96%, transparent);
}
:root[data-theme="dark"] :is(.sidebar-brand, .sidebar .brand, .nav-group, .sidebar-collapse-button, .header-date-group) {
border-color: var(--line-soft);
background-color: var(--surface);
}
:root[data-theme="dark"] :is(.module-tab, .sidebar-collapse-button, .nav-group-label) {
color: var(--text-secondary);
}
:root[data-theme="dark"] .module-tab:hover {
background: var(--surface-muted);
color: var(--text-primary);
}
:root[data-theme="dark"] .module-tab.active {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] :is(.icon-button, .button, .btn, .tbtn, .date-input, .datepick, .search, .sidebar-collapse-button, input, textarea, select) {
border-color: var(--border);
background-color: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] :is(input, textarea, select)::placeholder {
color: var(--text-tertiary);
}
:root[data-theme="dark"] :is(.icon-button, .button, .btn, .tbtn):hover:not(:disabled) {
border-color: var(--blue-line);
background-color: var(--surface-muted);
color: var(--action);
}
:root[data-theme="dark"] :is(.button.primary, .btn.primary, .tbtn.primary) {
border-color: var(--action);
background: var(--action);
color: var(--on-action);
}
:root[data-theme="dark"] :is(.button.primary, .btn.primary, .tbtn.primary):hover:not(:disabled) {
border-color: var(--action-hover);
background: var(--action-hover);
color: var(--on-action);
}
:root[data-theme="dark"] .theme-toggle {
color: var(--text-secondary);
}
:root[data-theme="dark"] .theme-toggle[aria-pressed="true"] {
border-color: var(--warning-line);
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] :is(.header-command-group, .account-dropdown) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
box-shadow: var(--shadow);
}
:root[data-theme="dark"] :is(.account-dropdown-head, .account-dropdown-separator) {
border-color: var(--line-soft);
}
:root[data-theme="dark"] :is(.account-role-badge, #maxHeight, .pool-state-tag) {
border-color: var(--border);
background: var(--surface-subtle);
color: var(--text-secondary);
}
:root[data-theme="dark"] :is(.account-role-badge.vip-role-badge, .pool-state-tag.one-word) {
border-color: var(--warning-line);
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] .account-role-badge.admin-role-badge {
border-color: var(--blue-line);
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] :is(.overview-strip[data-overview-expanded="true"], .overview-strip[data-overview-expanded="true"] .metric, .overview-strip[data-overview-expanded="true"] .sentiment-block) {
border-color: var(--line-soft);
background: var(--surface);
}
:root[data-theme="dark"] :is(.workspace-view.page:not(#heavenView), .page) {
background: transparent;
color: var(--text-primary);
}
:root[data-theme="dark"] :is(
.card,
.panel,
.metric-card,
.sentiment-panel,
.sentiment-stage-guide,
.sentiment-history-card,
.pool-card,
.performance-stage-card,
.breadth-card,
.market-ladder-tier,
.market-ladder-insight-card,
.rotation-trajectory-card,
.rotation-detail-card,
.auction-primary-card,
.auction-side-card,
.theme-directory-card-v2,
.theme-market-card-v2,
.theme-members-card-v2,
.popularity-table-card-v2,
.dragon-trader-detail,
.screener-workspace-card,
.curated-strategy-card,
.quant-factor-card,
.mentor-sidebar,
.mentor-chat-panel,
.review-panel,
.review-card
) {
border-color: var(--border);
background-color: var(--surface);
color: var(--text-primary);
box-shadow: var(--shadow-soft);
}
/* Several migrated pages use id-scoped white shells with stronger selectors. */
:root[data-theme="dark"] :is(
#limitPool,
#brokenView,
#downView,
#yesterdayView,
#performanceView,
#sentimentCycleView,
#ladderView,
#rotationView,
#auctionView,
#themeLibraryView,
#popularityView,
#dragonView,
#screenerView,
#mentorView,
#reviewWorkspaceView
) :is(.table-frame, .tbl-wrap, .redesigned-card, .panel, .card) {
border-color: var(--border);
background-color: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] :is(
.card-h,
.panel-header,
.sentiment-panel-header,
.pool-card-header,
.performance-stage-card header,
.rotation-card-head,
.auction-card-head-v2,
.theme-card-head-v2,
.popularity-card-head-v2,
.dragon-detail-header,
.screener-card-head,
.mentor-page-header,
.review-section-heading
) {
border-color: var(--line-soft);
background-color: transparent;
color: var(--text-primary);
}
:root[data-theme="dark"] :is(.sub, .muted, .dtag, .table-muted, small, .empty-state, .empty-box, .auxiliary-copy) {
color: var(--text-secondary);
}
:root[data-theme="dark"] :is(.dtag, .tag.neu, .screener-soft-label) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] :is(.seg, .segmented, .filter-segment, .market-feature-segments) {
border-color: var(--border);
background: var(--surface-muted);
}
:root[data-theme="dark"] :is(.seg button.on, .seg button.active, .segment.active, .filter-segment button.active) {
background: var(--surface-subtle);
color: var(--text-primary);
box-shadow: var(--control-shadow);
}
:root[data-theme="dark"] :is(table, .data-table, .tbl) {
color: var(--text-primary);
}
:root[data-theme="dark"] :is(table thead th, .data-table thead th, .tbl thead th) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] :is(table tbody td, .data-table tbody td, .tbl tbody td) {
border-color: var(--line-soft);
background-color: transparent;
}
:root[data-theme="dark"] :is(table tbody tr:hover td, .data-table tbody tr:hover td, .tbl tbody tr:hover td) {
background: var(--action-soft);
}
:root[data-theme="dark"] :is(dialog, .stock-dialog, .settings-dialog, .global-search-dialog, .curated-detail-dialog, .strategy-drawer) {
border-color: var(--border-strong);
background: var(--surface);
color: var(--text-primary);
box-shadow: var(--shadow);
}
:root[data-theme="dark"] dialog::backdrop {
background: var(--dialog-backdrop);
}
:root[data-theme="dark"] dialog kbd {
border-color: var(--border);
background: var(--surface-subtle);
color: var(--text-secondary);
}
:root[data-theme="dark"] .settings-dialog :is(.dialog-header h2, .settings-section-heading h3) {
color: var(--text-primary);
}
:root[data-theme="dark"] .settings-dialog :is(
.form-field > span,
.settings-section-heading > span,
.form-hint,
.dialog-eyebrow
) {
color: var(--text-secondary);
}
:root[data-theme="dark"] .settings-dialog .connection-status.connected {
border-color: var(--market-down);
background: var(--market-down-soft);
color: var(--market-down);
}
:root[data-theme="dark"] .settings-dialog .dialog-header .icon-button {
color: var(--text-secondary);
}
:root[data-theme="dark"] :is(.dialog-header, .global-search-head, .settings-section, .detail-section, .stock-chart-section) {
border-color: var(--line-soft);
background-color: var(--surface);
}
:root[data-theme="dark"] :is(.global-search-results, .assistant-messages, .trade-log-form, .alerts-toolbar, .admin-section-picker) {
border-color: var(--line-soft);
background: var(--surface-muted);
}
:root[data-theme="dark"] :is(.global-search-result:hover, .global-search-result.is-active) {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] :is(.global-search-result-icon, .membership-status-grid > div, .model-row) {
border-color: var(--border);
background: var(--surface-subtle);
}
/* Market cycle and pool pages. */
:root[data-theme="dark"] :is(.sentiment-cycle-toolbar, .sentiment-history-toolbar, .pool-toolbar, .tbl-tools) {
border-color: var(--line-soft);
background: var(--surface);
}
:root[data-theme="dark"] :is(.sentiment-current-card, .sentiment-score-card, .sentiment-stage-guide-grid article) {
border-color: var(--border);
background: var(--surface-subtle);
}
:root[data-theme="dark"] .sentiment-stage-guide-grid article.current {
border-color: var(--warning-color);
background: var(--warning-soft);
}
:root[data-theme="dark"] :is(.sentiment-warning, .screener-warning, .auction-phase-notice) {
border-color: var(--warning-line-strong);
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] :is(.res-sum, .res-sum .cell, .pool-summary-card, .performance-card) {
border-color: var(--line-soft);
background: var(--surface);
}
:root[data-theme="dark"] .res-sum .cell:hover,
:root[data-theme="dark"] .res-sum .cell.on {
background: var(--action-soft);
}
/* Ladder, rotation and auction retain distinct semantic levels without bright paper blocks. */
:root[data-theme="dark"] .market-ladder-tier:nth-child(1) { background: var(--ladder-level-1); }
:root[data-theme="dark"] .market-ladder-tier:nth-child(2) { background: var(--ladder-level-2); }
:root[data-theme="dark"] .market-ladder-tier:nth-child(3) { background: var(--ladder-level-3); }
:root[data-theme="dark"] .market-ladder-tier:nth-child(4) { background: var(--ladder-level-4); }
:root[data-theme="dark"] .market-ladder-tier:nth-child(5) { background: var(--ladder-level-5); }
:root[data-theme="dark"] :is(.market-ladder-stock, .rotation-day, .rotation-table-frame, .auction-table-frame-v2) {
border-color: var(--border);
background: var(--surface-subtle);
}
:root[data-theme="dark"] .rotation-sector-chip.heat-strong { background: var(--heat-strong-bg); color: var(--heat-strong-ink); }
:root[data-theme="dark"] .rotation-sector-chip.heat-warm { background: var(--heat-warm-bg); color: var(--heat-warm-ink); }
:root[data-theme="dark"] .rotation-sector-chip.heat-mild { background: var(--heat-mild-bg); color: var(--heat-mild-ink); }
:root[data-theme="dark"] :is(.auction-tabs-v2, .auction-summary-v2, .auction-theme-row, .auction-amount-day, .auction-news-entry) {
border-color: var(--line-soft);
background: var(--surface);
}
:root[data-theme="dark"] :is(.auction-dataset-button.active, .auction-expectation-controls button.active) {
background: var(--surface-subtle);
color: var(--action);
}
/* Theme library, popularity and dragon-tiger. */
:root[data-theme="dark"] :is(.theme-summary-v2, .theme-directory-labels-v2, .theme-detail-metrics-v2) {
border-color: var(--line-soft);
background: var(--surface-muted);
}
:root[data-theme="dark"] .theme-directory-item-v2:hover,
:root[data-theme="dark"] .theme-directory-item-v2.active {
background: var(--action-soft);
}
:root[data-theme="dark"] #popularityView .popularity-glance-v2 {
background: var(--canvas);
}
:root[data-theme="dark"] #popularityView .popularity-glance-v2 article {
border-color: var(--border);
background: var(--surface);
}
:root[data-theme="dark"] .dragon-trader-card {
border-color: color-mix(in srgb, var(--card-accent) 54%, var(--border));
background: linear-gradient(155deg, var(--surface-subtle), color-mix(in srgb, var(--card-accent) 13%, var(--surface)));
color: var(--text-primary);
}
:root[data-theme="dark"] :is(.dragon-card-copy strong, .dragon-card-copy q, .dragon-card-stats small) {
color: var(--text-secondary);
}
/* Screener, mentor and review workspaces. */
:root[data-theme="dark"] :is(.screener-tabs, .screener-progress, .screener-result-frame, .screener-pipeline, .screener-backtest-strip) {
border-color: var(--line-soft);
background: var(--surface);
}
:root[data-theme="dark"] :is(.curated-strategy-card:hover, .curated-strategy-card.selected, .quant-factor-row:hover) {
border-color: var(--blue-line);
background: var(--action-soft);
}
:root[data-theme="dark"] #screenerView .curated-detail-pane {
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(.curated-detail-header, .curated-execution-bar) {
border-color: var(--line-soft);
}
:root[data-theme="dark"] #screenerView :is(
.curated-detail-header h3,
.mini-section-heading h4,
.curated-rule-row strong,
.curated-score-row strong,
.curated-data-status strong
) {
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(
.curated-detail-header > div > span,
.curated-detail-header p,
.mini-section-heading > span,
.curated-rule-row span,
.curated-score-row > span:first-child,
.curated-data-status small
) {
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView .curated-rule-row {
border-color: var(--line-soft);
}
:root[data-theme="dark"] #screenerView .curated-score-track {
background: var(--surface-muted);
}
:root[data-theme="dark"] #screenerView .curated-strategy-badges span {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView .curated-strategy-badges span:first-child {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] :is(.strategy-drawer-sidebar, .strategy-sidebar, .strategy-drawer-content) {
border-color: var(--line-soft);
background: var(--surface-muted);
}
:root[data-theme="dark"] :is(.mentor-option, .mentor-message-content, .assistant-message-content, .review-watchlist-card, .daily-review-form) {
border-color: var(--border);
background: var(--surface-subtle);
color: var(--text-primary);
}
:root[data-theme="dark"] .mentor-option:hover,
:root[data-theme="dark"] .mentor-option.active {
background: var(--action-soft);
}
:root[data-theme="dark"] :is(.mentor-composer, .assistant-form, .review-form, .trade-log-summary) {
border-color: var(--line-soft);
background: var(--surface);
}
/* Question-to-Heaven keeps its visual identity while following the selected luminance. */
:root[data-theme="dark"] #heavenView,
:root[data-theme="dark"] #heavenView .heaven-panel,
:root[data-theme="dark"] #heavenView .heart-stage,
:root[data-theme="dark"] .heaven-reading-dialog {
border-color: var(--heaven-rule);
background-color: var(--heaven-paper);
color: var(--heaven-ink);
}
:root[data-theme="dark"] #heavenView :is(.heaven-subnav, .heaven-card, .heaven-calibration-panel, .heart-ritual-card) {
border-color: var(--heaven-rule);
background-color: var(--heaven-paper-soft);
color: var(--heaven-ink);
}
:root[data-theme="dark"] #heavenView :is(input, select, textarea, .heaven-field-control) {
border-color: var(--heaven-rule);
background: var(--heaven-field-bg);
color: var(--heaven-ink);
}
:root[data-theme="dark"] :is(.price-chart, .stock-preview-chart, .entity-detail-chart) {
border-color: var(--border);
background: var(--chart-background);
}
/* Page-level controls that still carry prototype-local light fills. */
:root[data-theme="dark"] :is(#auctionView, #screenerView) {
--action: #6ca8e8;
--action-hover: #8bbcf0;
--action-soft: #23364a;
--border: #343a40;
--border-strong: #474f57;
--line: var(--border);
--line-strong: var(--border-strong);
--surface-muted: #202428;
border-color: var(--border);
background: var(--canvas);
color: var(--text-primary);
}
:root[data-theme="dark"] #sentimentCycleView :is(
.sentiment-current-tag,
.sentiment-auto-tag,
.sentiment-stage-guide-head,
.sentiment-detail-toolbar,
.section-toolbar
) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-component-track {
background: var(--surface-subtle);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-ice,
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-repair {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-fermentation {
background: var(--market-down-soft);
color: var(--market-down);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-climax {
background: var(--market-up-soft);
color: var(--market-up);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-divergence {
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-retreat {
background: var(--surface-subtle);
color: var(--text-secondary);
}
/* Keep the final history row clear of the frame's horizontal scrollbar. */
#sentimentCycleView .sentiment-history-frame {
margin-bottom: var(--card-gap);
padding-bottom: var(--card-gap);
}
:root[data-theme="dark"] :is(
#brokenView .pool-search-field,
#downView .pool-search-field,
#yesterdayView .pool-search-field
) {
border-color: var(--border);
background: var(--surface);
}
:root[data-theme="dark"] :is(
#brokenView .pool-search-field input,
#downView .pool-search-field input,
#yesterdayView .pool-search-field input
) {
background: transparent;
color: var(--text-primary);
}
:root[data-theme="dark"] #yesterdayView :is(.yesterday-table-card, .yesterday-summary-cell) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #yesterdayView .yesterday-summary-cell:hover,
:root[data-theme="dark"] #yesterdayView .yesterday-summary-cell.active {
background: var(--action-soft);
}
:root[data-theme="dark"] #yesterdayView .yesterday-outcome-tag.fail {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #performanceView :is(
.performance-status-tag.is-neutral,
.performance-date-tag,
.performance-stage-track,
.performance-width-bar
) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #performanceView :is(
.performance-empty-state,
.performance-panel-card,
.market-breadth-panel
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #ladderView :is(.ladder-sort-segment, .market-ladder-board) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #ladderView .ladder-sort-segment {
background: var(--surface-muted);
}
:root[data-theme="dark"] #ladderView .ladder-sort-segment button.active {
background: var(--surface-subtle);
color: var(--text-primary);
box-shadow: var(--control-shadow);
}
:root[data-theme="dark"] #ladderView .market-ladder-label {
border-color: var(--line-soft);
background: color-mix(in srgb, var(--tier-color) 12%, var(--surface-subtle));
}
:root[data-theme="dark"] #ladderView .market-ladder-tier.is-gap .market-ladder-label {
background: var(--surface-muted);
}
:root[data-theme="dark"] #ladderView :is(
.market-ladder-insight-card > header span,
.market-ladder-pyramid-row > i,
.market-ladder-rate-list > div > i
) {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #rotationView :is(
.rotation-order-control,
.rotation-export-button,
.rotation-top-tag,
.rotation-trajectory-card,
.rotation-detail-card,
.rotation-day,
.rotation-day > header,
.rotation-day-sectors
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #rotationView :is(.rotation-order-control, .rotation-day > header, .rotation-top-tag) {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #rotationView .rotation-day-sectors {
background: var(--surface-subtle);
}
:root[data-theme="dark"] #rotationView .rotation-order-control button.active {
background: var(--surface-subtle);
color: var(--text-primary);
box-shadow: var(--control-shadow);
}
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-strong {
border-color: var(--blue-line);
background: var(--heat-strong-bg);
color: var(--heat-strong-ink);
}
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-warm {
border-color: var(--border-strong);
background: var(--heat-warm-bg);
color: var(--heat-warm-ink);
}
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-mild {
border-color: var(--border);
background: var(--heat-mild-bg);
color: var(--heat-mild-ink);
}
:root[data-theme="dark"] #rotationView :is(
.rotation-rank,
.rotation-table thead th,
.trend-flat
) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #rotationView .rotation-table tbody tr:hover td {
background: var(--action-soft);
}
:root[data-theme="dark"] #rotationView :is(
.rotation-swatch.warm,
.trend-tag.trend-cool
) {
border-color: var(--blue-line);
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #rotationView :is(
.rotation-swatch.mild,
.strength-cell
) {
border-color: var(--border);
background: var(--surface-muted);
}
:root[data-theme="dark"] #auctionView :is(
.auction-phase-notice-v2,
.auction-export-button,
.auction-refresh-button,
.auction-filter-segments,
.auction-table-v2 thead th
) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #auctionView .auction-phase-notice-v2[data-phase="selection"] {
border-color: var(--warning-line);
background: var(--warning-soft);
}
:root[data-theme="dark"] #auctionView .auction-phase-notice-v2[data-phase="finalized"] {
border-color: var(--market-down-soft);
background: var(--market-down-soft);
}
:root[data-theme="dark"] #auctionView :is(.auction-filter-segments button.active, .auction-source-tags-v2 b) {
background: var(--surface-subtle);
color: var(--text-primary);
}
:root[data-theme="dark"] #auctionView .auction-source-tags-v2 b:nth-child(n + 2) {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #auctionView .auction-table-v2 tbody tr:hover td {
background: var(--action-soft);
}
:root[data-theme="dark"] #auctionView :is(.auction-expectation.matched, .auction-card-tag) {
background: var(--surface-subtle);
color: var(--text-secondary);
}
:root[data-theme="dark"] #auctionView :is(.auction-theme-status.steady, .auction-theme-status.strong) {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #auctionView .auction-amount-trend-v2 small {
background: var(--surface);
color: var(--text-secondary);
}
:root[data-theme="dark"] #themeLibraryView :is(
.theme-search-v2,
.theme-summary-v2,
.theme-detail-empty-v2,
#themeResultCount,
#themeDetailCode
) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #popularityView .popularity-source-tabs-v2,
:root[data-theme="dark"] #dragonView :is(.dragon-view-tabs-v2, .dragon-segments-v2) {
border-color: var(--border);
background: var(--surface-muted);
}
:root[data-theme="dark"] #popularityView .popularity-source-tabs-v2 button.active,
:root[data-theme="dark"] #dragonView :is(.dragon-view-tabs-v2 button.active, .dragon-filter-v2.active) {
background: var(--surface-subtle);
color: var(--text-primary);
box-shadow: var(--control-shadow);
}
:root[data-theme="dark"] #dragonView :is(
.dragon-summary-v2,
.dragon-filterbar-v2,
.dragon-stage-heading-v2,
.dragon-empty-state-v2,
.dragon-table-v2 thead th
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #dragonView .dragon-table-v2 thead th {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #dragonView thead th {
border-color: var(--border);
background: var(--surface-muted) !important;
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView :is(
.screener-mode-tabs,
.screener-stepper,
.regime-selector,
.regime-option,
.screener-runbar,
.screener-results-view,
.result-toolbar
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(.screener-soft-label, .neutral) {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView :is(.regime-summary, .regime-option.active) {
border-color: var(--market-up-soft);
background: var(--market-up-soft);
color: var(--market-up);
}
:root[data-theme="dark"] #screenerView :is(.regime-advice, .screener-backtest-strip) {
border-color: var(--warning-line);
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] #screenerView .screener-tracking-entry {
border-color: var(--blue-line);
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #screenerView :is(.count-badge, .screener-result-source, b.neutral) {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView .screener-strategy-title b:not(.neutral) {
background: var(--market-up-soft) !important;
color: var(--market-up) !important;
}
:root[data-theme="dark"] #screenerView .screener-strategy-title b.neutral {
background: var(--surface-muted) !important;
color: var(--text-secondary) !important;
}
:root[data-theme="dark"] #screenerView .screener-card-heading h3 > span {
color: var(--action);
}
:root[data-theme="dark"] #screenerView :is(.regime-evidence-line, .reason-column) {
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView .risk-cell {
color: var(--warning-color);
}
:root[data-theme="dark"] #screenerView .table-action {
color: var(--action);
}
:root[data-theme="dark"] #screenerView #regimeLabel {
color: var(--market-up);
}
:root[data-theme="dark"] #screenerView :is(thead th, tbody td) {
border-color: var(--line-soft);
background-color: transparent !important;
}
:root[data-theme="dark"] #screenerView thead th {
background-color: var(--surface-muted) !important;
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView :is(
.curated-library-pane,
.curated-library-heading,
.curated-library-controls,
.curated-search,
.curated-category-select select,
.curated-strategy-card,
.curated-strategy-rank,
.curated-card-tags em,
.curated-card-actions button,
.quant-builder-pane,
.quant-summary-pane,
.quant-panel-heading,
.quant-rule-row,
.quant-weight-control,
.quant-weight-status,
.quant-summary-block
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(
.curated-strategy-card.active,
.curated-card-tags em,
.curated-strategy-rank,
.quant-weight-status
) {
background: var(--surface-muted);
}
:root[data-theme="dark"] #screenerView .curated-strategy-card:hover {
border-color: var(--blue-line);
background: var(--surface-subtle);
}
:root[data-theme="dark"] #screenerView .curated-strategy-card.active {
border-color: var(--blue-line);
background: var(--action-soft);
}
:root[data-theme="dark"] #screenerView :is(.curated-health-grid, .curated-execution-bar) {
border-color: var(--line-soft);
background: var(--surface-muted);
}
:root[data-theme="dark"] #screenerView .curated-health-grid > div {
border-color: var(--line-soft);
}
:root[data-theme="dark"] #screenerView .curated-search input {
background: transparent;
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(
.quant-rule-row select,
.quant-rule-row input,
.quant-universe-grid input,
.quant-universe-grid select
) {
border-color: var(--border);
background: var(--surface-subtle);
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(
#curatedStrategyCount,
.quant-panel-heading .button,
.quant-summary-pane > header,
.quant-summary-pane > header .button,
.quant-weight-status > div
) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #mentorView {
--mentor-blue: var(--action);
--mentor-blue-dark: var(--action-hover);
--mentor-blue-soft: var(--action-soft);
--mentor-blue-line: var(--blue-line);
--mentor-line: var(--border);
--mentor-line-soft: var(--line-soft);
--mentor-ink: var(--text-primary);
--mentor-sub: var(--text-secondary);
--mentor-faint: var(--text-tertiary);
}
:root[data-theme="dark"] #mentorView :is(
.mentor-evidence-filters,
.mentor-directory-content,
.mentor-directory-heading,
.mentor-search-field,
.mentor-chat-panel,
.mentor-composer,
.mentor-option
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #mentorView :is(.mentor-evidence-filters button.active, .mentor-option.active) {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #mentorView :is(.mentor-badge.quality, .mentor-badge.private, .mentor-pin-button) {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #mentorView .mentor-badge.grade-a {
background: var(--market-down-soft);
color: var(--market-down);
}
:root[data-theme="dark"] #mentorView .mentor-badge.grade-b {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #mentorView .mentor-badge.grade-c {
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] #mentorView :is(
.mentor-chat-header,
.mentor-messages,
.mentor-quick-prompts,
.mentor-chat-form,
.mentor-disclaimer,
.mentor-quick-prompts button,
#mentorQuestion
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #mentorView :is(.mentor-messages, .mentor-empty-mark) {
background: var(--surface-muted);
}
:root[data-theme="dark"] #mentorView .mentor-message {
border-color: var(--line-soft);
background: var(--surface-subtle);
box-shadow: none;
}
:root[data-theme="dark"] #mentorView .mentor-message.user {
border-color: var(--blue-line);
background: var(--action-soft);
}
:root[data-theme="dark"] #mentorView :is(
.mentor-message-content,
.mentor-answer-heading,
.loading-message p
) {
color: var(--text-primary);
}
:root[data-theme="dark"] #mentorView .mentor-answer-quote {
color: var(--text-secondary);
}
:root[data-theme="dark"] #mentorView :is(.mentor-message-label, .mentor-message small) {
color: var(--text-tertiary);
}
:root[data-theme="dark"] #reviewWorkspaceView {
--review-blue: var(--action);
--review-blue-dark: var(--action-hover);
--review-blue-soft: var(--action-soft);
--review-blue-line: var(--blue-line);
--review-line: var(--border);
--review-line-soft: var(--line-soft);
--review-ink: var(--text-primary);
--review-sub: var(--text-secondary);
--review-faint: var(--text-tertiary);
}
:root[data-theme="dark"] #reviewWorkspaceView :is(
.review-history-toggle,
.review-card-heading,
.review-count-tag,
.review-add-watch,
.trade-log-summary,
.workspace-table-frame thead th
) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #reviewWorkspaceView .review-add-watch {
border-color: var(--blue-line);
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #reviewWorkspaceView :is(thead th, tbody td) {
border-color: var(--line-soft);
background-color: transparent !important;
}
:root[data-theme="dark"] #reviewWorkspaceView thead th {
background-color: var(--surface-muted) !important;
color: var(--text-secondary);
}
:root[data-theme="dark"] #reviewWorkspaceView :is(
.journal-form,
.journal-form input,
.journal-form textarea,
#journalDate
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #reviewWorkspaceView :is(.notes-history-section, .notes-history) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] :is(
.watchlist-search-control,
.watchlist-search-results,
.watchlist-search-results button,
.watchlist-selection
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] .watchlist-search-control:focus-within {
border-color: var(--blue-line);
box-shadow: var(--control-shadow);
}
:root[data-theme="dark"] .watchlist-search-results button:hover {
background: var(--action-soft);
}
:root[data-theme="dark"] .account-settings-dialog :is(
.membership-comparison,
.membership-comparison > div,
.membership-comparison-head
) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] .account-settings-dialog .membership-comparison > .membership-comparison-head {
background: var(--surface-muted);
color: var(--text-secondary);
}
/* High-specificity dark surfaces for workspaces with later light-theme hover rules. */
:root[data-theme="dark"] #screenerView .curated-library-heading h3 {
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(.curated-view-toggle, .curated-school-filters) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #screenerView :is(.curated-view-toggle button, .curated-school-filters button) {
color: var(--text-secondary);
}
:root[data-theme="dark"] #screenerView :is(.curated-view-toggle button, .curated-school-filters button):is(:hover, .active) {
border-color: var(--blue-line);
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #screenerView .curated-strategy-list.is-grid .curated-strategy-icon {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #screenerView .screener-result-frame tbody tr:hover td,
:root[data-theme="dark"] #screenerView .screener-result-frame tbody tr:hover td:last-child,
:root[data-theme="dark"] #reviewWorkspaceView .data-table tbody tr:hover,
:root[data-theme="dark"] #reviewWorkspaceView .data-table tbody tr:hover td {
background: var(--action-soft) !important;
color: var(--text-primary);
}
:root[data-theme="dark"] #reviewWorkspaceView .data-table tbody td {
color: var(--text-primary);
}
/* Wentian v2 owns its complete palette in wentian-v2.css. Keeping the former
paper-theme overrides here would repaint its controls and ritual stages. */
:root[data-theme="dark"] :is(.loading-overlay, .auth-gate) {
background: color-mix(in srgb, var(--canvas) 92%, transparent);
}
:root[data-theme="dark"] :is(.loading-card, .auth-shell) {
border-color: var(--border-strong);
background: var(--surface);
color: var(--text-primary);
box-shadow: var(--shadow);
}
@media (prefers-reduced-motion: reduce) {
.theme-toggle svg { transition: none; }
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}