/* ========================================================================== ApexMint - theme.css Light mode overrides applied when (or #app-container) carries the "light-mode" class. Every CSS variable defined in style.css is overridden here so the colour swap is complete and consistent. ========================================================================== */ /* -------------------------------------------------------------------------- Light mode: override ALL CSS custom properties -------------------------------------------------------------------------- */ body.light-mode, #app-container.light-mode { /* Backgrounds */ --bg-primary: #f6f8fa; --bg-card: #ffffff; --bg-elevated: #eaeef2; --bg-card-hover: #f3f6f9; /* Borders */ --border: #d0d7de; /* Text */ --text-primary: #1f2328; --text-secondary:#57606a; --text-muted: #6e7781; /* Accent */ --accent: #0969da; --accent-green: #1a7f37; --accent-red: #cf222e; --accent-orange: #9a6700; --accent-gold: #9a6700; --accent-gray: #6e7781; /* Badge backgrounds - light mode values (same design, slightly adjusted) */ --badge-strong-buy-bg: #1a7f37; --badge-strong-buy-fg: #ffffff; --badge-buy-bg: #2da44e; --badge-buy-fg: #ffffff; --badge-hold-bg: #6e7781; --badge-hold-fg: #ffffff; --badge-reduce-bg: #9a6700; --badge-reduce-fg: #ffffff; --badge-sell-bg: #cf222e; --badge-sell-fg: #ffffff; /* Shadows - softer in light mode */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.15); } /* -------------------------------------------------------------------------- Light mode: component-level overrides Bootstrap and Dash inject inline styles that need explicit counters. -------------------------------------------------------------------------- */ /* Scrollbars */ body.light-mode ::-webkit-scrollbar-track, #app-container.light-mode ::-webkit-scrollbar-track { background: var(--bg-primary); } body.light-mode ::-webkit-scrollbar-thumb, #app-container.light-mode ::-webkit-scrollbar-thumb { background: var(--border); } /* Navbar */ body.light-mode .af-navbar, #app-container.light-mode .af-navbar { box-shadow: 0 1px 0 var(--border); } /* Dropdown */ body.light-mode .dropdown-menu, #app-container.light-mode .dropdown-menu { background-color: var(--bg-card); } body.light-mode .dropdown-item:hover, #app-container.light-mode .dropdown-item:hover { background-color: var(--bg-elevated); } /* Input / select */ body.light-mode input, body.light-mode select, body.light-mode textarea, #app-container.light-mode input, #app-container.light-mode select, #app-container.light-mode textarea { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border); } /* Plotly chart bg overrides - Dash injects SVG backgrounds */ body.light-mode .js-plotly-plot .plotly .bg, #app-container.light-mode .js-plotly-plot .plotly .bg { fill: var(--bg-card) !important; } /* Modal close button - invert is for dark mode (dark ✕ on dark bg → white). In light mode the default Bootstrap ✕ is already dark, so remove the invert. */ #app-container.light-mode .modal-header .btn-close { filter: none; opacity: 0.5; } /* dcc.Dropdown - light mode overrides */ body.light-mode .Select-control, #app-container.light-mode .Select-control { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.light-mode .Select-menu-outer, #app-container.light-mode .Select-menu-outer { background-color: var(--bg-card) !important; border-color: var(--border) !important; box-shadow: var(--shadow-elevated) !important; } body.light-mode .Select-menu, #app-container.light-mode .Select-menu { background-color: var(--bg-card) !important; } body.light-mode .Select-option, #app-container.light-mode .Select-option { background-color: var(--bg-card) !important; color: var(--text-primary) !important; } body.light-mode .Select-option.is-focused, #app-container.light-mode .Select-option.is-focused { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; } body.light-mode .Select-option.is-selected, #app-container.light-mode .Select-option.is-selected { background-color: var(--accent) !important; color: #ffffff !important; } body.light-mode .Select-value-label, #app-container.light-mode .Select-value-label { color: var(--text-primary) !important; } body.light-mode .Select-placeholder, #app-container.light-mode .Select-placeholder { color: var(--text-secondary) !important; } body.light-mode .Select-arrow, #app-container.light-mode .Select-arrow { border-top-color: var(--text-secondary) !important; } /* -- Light mode: dbc.Select / dbc.Input native Bootstrap elements --------- */ body.light-mode .form-select, #app-container.light-mode .form-select { background-color: #ffffff !important; border-color: var(--border) !important; color: var(--text-primary) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e7681' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; } body.light-mode .form-select:focus, #app-container.light-mode .form-select:focus { background-color: #ffffff !important; border-color: var(--accent) !important; color: var(--text-primary) !important; } body.light-mode .form-select option, #app-container.light-mode .form-select option { background-color: #ffffff; color: var(--text-primary); } body.light-mode .form-control, #app-container.light-mode .form-control { background-color: #ffffff !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.light-mode .form-control:focus, #app-container.light-mode .form-control:focus { background-color: #ffffff !important; border-color: var(--accent) !important; color: var(--text-primary) !important; } body.light-mode .form-control::placeholder, #app-container.light-mode .form-control::placeholder { color: var(--text-secondary) !important; } body.light-mode .input-group-text, #app-container.light-mode .input-group-text { background-color: #f6f8fa !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } /* -------------------------------------------------------------------------- Light mode: Accordion chevron reset Dark mode uses filter:invert on the Bootstrap chevron SVG to make it visible on dark backgrounds. Light mode uses Bootstrap's native dark chevron so no filter is needed. -------------------------------------------------------------------------- */ body.light-mode .accordion-button::after, body.light-mode .accordion-button:not(.collapsed)::after, #app-container.light-mode .accordion-button::after, #app-container.light-mode .accordion-button:not(.collapsed)::after { filter: none; } /* -------------------------------------------------------------------------- Light mode: COT History Drawer -------------------------------------------------------------------------- */ /* Override Bootstrap's own offcanvas CSS variables so the panel background, text, and border all follow the light theme. The drawer renders inside #app-container so both selectors cover it. */ body.light-mode .cot-drawer, #app-container.light-mode .cot-drawer { --bs-offcanvas-bg: var(--bg-card); --bs-offcanvas-color: var(--text-primary); border-left-color: var(--border) !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12); } body.light-mode .cot-drawer .offcanvas-header, #app-container.light-mode .cot-drawer .offcanvas-header { background-color: var(--bg-card) !important; border-bottom-color: var(--border) !important; } body.light-mode .cot-drawer .offcanvas-body, #app-container.light-mode .cot-drawer .offcanvas-body { background-color: var(--bg-card) !important; } /* Close button: no invert needed in light mode, use Bootstrap default */ body.light-mode .cot-drawer .btn-close, #app-container.light-mode .cot-drawer .btn-close { filter: none; opacity: 0.5; } /* Signal badges: stronger border contrast for light backgrounds */ body.light-mode .cot-signal-BULLISH_EXTREME, #app-container.light-mode .cot-signal-BULLISH_EXTREME { background: rgba(26,127,55,0.10); border-color: rgba(26,127,55,0.4); } body.light-mode .cot-signal-BEARISH_EXTREME, #app-container.light-mode .cot-signal-BEARISH_EXTREME { background: rgba(207,34,46,0.08); border-color: rgba(207,34,46,0.4); } body.light-mode .cot-signal-BULLISH_MODERATE, #app-container.light-mode .cot-signal-BULLISH_MODERATE { background: rgba(45,164,78,0.08); border-color: rgba(45,164,78,0.35); } body.light-mode .cot-signal-BEARISH_MODERATE, #app-container.light-mode .cot-signal-BEARISH_MODERATE { background: rgba(207,34,46,0.06); border-color: rgba(207,34,46,0.3); } body.light-mode .cot-signal-NEUTRAL, #app-container.light-mode .cot-signal-NEUTRAL { background: rgba(110,119,129,0.08); border-color: rgba(110,119,129,0.3); } /* COT analysis label: in dark mode uses white (style.css default), in light mode keep accent styling for visual hierarchy. */ body.light-mode .cot-analysis-label, #app-container.light-mode .cot-analysis-label { color: var(--accent); } /* -------------------------------------------------------------------------- Light mode: period selector radio buttons (stock detail price chart) -------------------------------------------------------------------------- */ body.light-mode .af-interval-selector .form-check-input, #app-container.light-mode .af-interval-selector .form-check-input { border-color: var(--border); background-color: var(--bg-card); } body.light-mode .af-interval-selector .form-check-input:checked, #app-container.light-mode .af-interval-selector .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); background-image: none; } body.light-mode .af-interval-selector .form-check-label, #app-container.light-mode .af-interval-selector .form-check-label { color: var(--text-primary); } /* -------------------------------------------------------------------------- Light mode: knowledge graph controls (switches + radio buttons) -------------------------------------------------------------------------- */ body.light-mode .af-graph-controls .form-check-input, #app-container.light-mode .af-graph-controls .form-check-input { border-color: var(--border); background-color: var(--bg-card); } /* Switch track checked state */ body.light-mode .af-graph-controls .form-switch .form-check-input:checked, #app-container.light-mode .af-graph-controls .form-switch .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } /* Radio button checked state */ body.light-mode .af-graph-controls .form-check-input[type=radio]:checked, #app-container.light-mode .af-graph-controls .form-check-input[type=radio]:checked { background-color: var(--accent); border-color: var(--accent); background-image: none; } body.light-mode .af-graph-controls .form-check-label, #app-container.light-mode .af-graph-controls .form-check-label { color: var(--text-primary); }