/** * V2 Overlay & Tray Styles + Global Theme System * * This file contains: * 1. GLOBAL THEME SYSTEM - Light/Dark mode CSS variables * 2. Styles for Fund Profile Overlay, Compare Tray, and Recent Funds bar * * ============================================================================= * THEME SYSTEM DOCUMENTATION * ============================================================================= * * The theme system uses CSS custom properties (variables) that automatically * switch between light and dark values when the .dark-theme class is toggled * on the element. * * HOW TO USE IN NEW PAGES/COMPONENTS: * ------------------------------------ * Use these CSS variables instead of hardcoded colors: * * BACKGROUNDS: * --v2-bg-page Page background (lightest/darkest) * --v2-bg-surface Card/panel background * --v2-bg-elevated Elevated elements (modals, dropdowns) * --v2-bg-hover Hover state background * --v2-bg-active Active/pressed state background * --v2-bg-input Form input background * * TEXT: * --v2-text-primary Primary text (headings, body) * --v2-text-secondary Secondary text (descriptions) * --v2-text-muted Muted text (labels, hints) * --v2-text-placeholder Placeholder text * * BORDERS: * --v2-border Standard border * --v2-border-light Subtle border * --v2-border-focus Focus ring border * * ACCENT/BRAND: * --v2-accent Brand color (buttons, links) * --v2-accent-hover Brand hover state * --v2-accent-bg Brand background (pills, badges) * --v2-accent-bg-hover Brand background hover * * STATUS: * --v2-success Success/positive * --v2-warning Warning/caution * --v2-danger Error/destructive * * SHADOWS: * --v2-shadow-sm Small shadow * --v2-shadow-md Medium shadow * --v2-shadow-lg Large shadow * * LEGACY VARIABLES (for existing pages): * --color-bg, --color-bg-soft, --color-text, --color-muted, --color-border * --bg, --bg-elev, --text, --muted, --border * * EXAMPLE USAGE: * .my-component { * background: var(--v2-bg-surface); * color: var(--v2-text-primary); * border: 1px solid var(--v2-border); * } * .my-component:hover { * background: var(--v2-bg-hover); * } * * The theme is controlled by themeToggleV2.js which: * - Persists preference to localStorage * - Respects system preference on first visit * - Provides API: themeToggleV2.toggle(), .setTheme(), .isDark(), etc. * * ============================================================================= */ /* ============================================================================ THEME VARIABLES - Light Theme (Default) Also overrides legacy app-shell variables for consistent theming ============================================================================ */ :root { /* V2 Backgrounds */ --v2-bg-page: #f8f9fa; --v2-bg-surface: #ffffff; --v2-bg-elevated: #ffffff; --v2-bg-hover: #f1f3f4; --v2-bg-active: #e9ecef; --v2-bg-input: #ffffff; /* Some component CSS references `--v2-bg-primary` / `--v2-bg-secondary` (e.g. chart-lab share popover, share-hub modal, ETF universe cards). Alias them to the existing surface/page colours so they stay in sync with theme switches without editing every consumer. */ --v2-bg-primary: #ffffff; --v2-bg-secondary: #f9fafb; /* V2 Text */ --v2-text-primary: #212529; --v2-text-secondary: #495057; --v2-text-muted: #6c757d; --v2-text-placeholder: #adb5bd; /* V2 Borders */ --v2-border: #dee2e6; --v2-border-light: #e9ecef; --v2-border-focus: #0964A0; /* V2 Accent */ --v2-accent: #0964A0; --v2-accent-hover: #075280; --v2-accent-bg: rgba(9, 100, 160, 0.1); --v2-accent-bg-hover: rgba(9, 100, 160, 0.15); /* V2 Status */ --v2-success: #28a745; --v2-warning: #ffc107; --v2-danger: #dc3545; /* V2 Shadows */ --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --v2-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --v2-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Legacy overlay variables (for backwards compat) */ --overlay-bg: var(--v2-bg-elevated); --overlay-border: var(--v2-border); --overlay-header-h: 64px; --overlay-tabs-h: 44px; --sidebar-w: 280px; /* ======================================================================== LEGACY APP-SHELL VARIABLE OVERRIDES (Light Theme) These override the dark defaults in app-shell.css ======================================================================== */ --bg: #f7f9fc; --bg-elev: #ffffff; --text: #212529; --text-strong: #1a1a2e; --muted: #6c757d; --border: #dee2e6; --success: #28a745; --warning: #ffc107; --danger: #dc3545; /* Chart Lab / share-save popover / scp panel variables. These were referenced by Chart Lab CSS with light-only hard-coded fallbacks, causing any surface / hover colour inside dark mode to render white. Defining them centrally makes every consumer reactive to the theme. */ --surface: #ffffff; --surface-hover: #f1f5f9; --hover: #f1f5f9; --accent: #0964a0; --accent-hover: #07537e; --accent-bg: #e0f2fe; /* Short generic aliases used by component CSS (compare tool, reports, chart lab, etc.) that were never declared. Without these every `var(--bg-surface)` / `var(--text-primary)` falls through to its hard-coded light fallback even when dark mode is active. */ --bg-surface: #ffffff; --bg-secondary: #f9fafb; --text-primary: #212529; --text-secondary: #495057; --muted-bg: #f1f3f4; --card-bg: #ffffff; --bg-card: #ffffff; --bg-offset: #f3f4f6; --bg-sidebar: #111827; --positive: #16a34a; --negative: #dc2626; /* Short hover alias used by `.cb-scp__scope-btn`, `.cb-scope-btn` and a handful of other components. Left undeclared previously, which caused any `var(--bg-hover)` in dark mode to land on its light fallback (#f1f5f9) and flash white on hover. */ --bg-hover: #f1f5f9; /* ======================================================================== ETF DATABASE / PAGE-LEVEL VARIABLE OVERRIDES (Light Theme) These override etfMainV2.css variables ======================================================================== */ --color-primary: #1C98D4; --color-primary-600: #0964A0; --color-accent: #1C98D4; --color-text: #2B2B2B; --color-muted: #6B7280; --color-border: #E5E7EB; --color-bg: #FFFFFF; --color-bg-soft: #F7F8FA; --color-success: #17B26A; --color-warning: #F4B740; --color-danger: #E11D48; } /* ============================================================================ THEME VARIABLES - Dark Theme Also overrides legacy app-shell variables for consistent theming ============================================================================ */ .dark-theme { /* V2 Backgrounds */ --v2-bg-page: #0c111a; --v2-bg-surface: #111520; --v2-bg-elevated: #161b26; --v2-bg-hover: rgba(255, 255, 255, 0.05); --v2-bg-active: rgba(255, 255, 255, 0.08); --v2-bg-input: rgba(255, 255, 255, 0.05); --v2-bg-primary: #111520; --v2-bg-secondary: #161b26; /* V2 Text */ --v2-text-primary: #e6e9f0; --v2-text-secondary: #c4c9d4; --v2-text-muted: #8b92a5; --v2-text-placeholder: #6b7280; /* V2 Borders */ --v2-border: #1e2433; --v2-border-light: #252d3d; --v2-border-focus: #0964A0; /* V2 Accent (slightly brighter in dark mode) */ --v2-accent: #0d7cc4; --v2-accent-hover: #0a9bea; --v2-accent-bg: rgba(9, 100, 160, 0.2); --v2-accent-bg-hover: rgba(9, 100, 160, 0.3); /* V2 Shadows (more subtle in dark mode) */ --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --v2-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --v2-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); /* Legacy overlay variables */ --overlay-bg: var(--v2-bg-elevated); --overlay-border: var(--v2-border); /* ======================================================================== LEGACY APP-SHELL VARIABLE OVERRIDES (Dark Theme) ======================================================================== */ --bg: #0b0e13; --bg-elev: #111520; --text: #e6e9f0; --text-strong: #E8F2F9; --muted: #ADADAD; --border: #1e2433; --success: #1fa971; --warning: #e2b534; --danger: #e05b5b; /* Dark-mode equivalents for the Chart Lab shared vars defined in :root. Surfaces use the elevated panel colour, hover is a subtle white tint, accent-bg is a translucent accent fill that reads against both the surface and the hover row. */ --surface: #161b26; --surface-hover: rgba(255, 255, 255, 0.06); --hover: rgba(255, 255, 255, 0.06); --accent: #0d7cc4; --accent-hover: #0a9bea; --accent-bg: rgba(13, 124, 196, 0.22); /* Dark-mode values for generic short-name aliases. */ --bg-surface: #111520; --bg-secondary: #161b26; --text-primary: #e6e9f0; --text-secondary: #c4c9d4; --muted-bg: rgba(255, 255, 255, 0.05); --card-bg: #161b26; --bg-card: #161b26; --bg-offset: rgba(255, 255, 255, 0.05); --bg-sidebar: #0b0e13; --positive: #22c55e; --negative: #ef4444; --bg-hover: rgba(255, 255, 255, 0.05); /* ======================================================================== ETF DATABASE / PAGE-LEVEL VARIABLE OVERRIDES (Dark Theme) These override etfMainV2.css variables ======================================================================== */ --color-primary: #2BA8E8; --color-primary-600: #1C98D4; --color-accent: #2BA8E8; --color-text: #e6e9f0; --color-muted: #9CA3AF; --color-border: #2d3748; --color-bg: #111520; --color-bg-soft: #1a202c; --color-success: #34D399; --color-warning: #FBBF24; --color-danger: #F87171; } /* ============================================================================ HEADER & SIDEBAR THEME ADJUSTMENTS Ensure header/sidebar elements respond to theme toggle ============================================================================ */ /* Header buttons - light theme */ .app-header .btn-ghost, .app-header .header-actions button { color: var(--text, #212529); } .app-header .btn-ghost:hover, .app-header .header-actions button:hover { background: var(--v2-bg-hover, #f1f3f4); color: var(--v2-accent, #0964A0); } /* Header search - light theme */ .app-header .header-search input, #v2-global-search { background: var(--v2-bg-input, #fff); border-color: var(--border, #dee2e6); color: var(--text, #212529); } .app-header .header-search input::placeholder, #v2-global-search::placeholder { color: var(--muted, #6c757d); } .app-header .header-search input:focus, #v2-global-search:focus { border-color: var(--v2-accent, #0964A0); box-shadow: 0 0 0 2px var(--v2-accent-bg, rgba(9, 100, 160, 0.1)); } /* Sidebar links - ensure text is visible */ .app-sidebar .sidebar-link, .app-sidebar .etf-sidebar-list-head, .app-sidebar .flyout-header { color: var(--text, #212529); } .app-sidebar .sidebar-link:hover, .app-sidebar .etf-sidebar-list-head:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .app-sidebar h4, .app-sidebar .etf-sidebar-head h4 { color: var(--text, #212529); } /* Active sidebar head text should always be white (on accent background) */ .app-sidebar .etf-sidebar-head.active h4 { color: #fff; } /* Dark theme overrides for header/sidebar */ .dark-theme .app-header .btn-ghost, .dark-theme .app-header .header-actions button { color: var(--text, #e6e9f0); } .dark-theme .app-header .btn-ghost:hover, .dark-theme .app-header .header-actions button:hover { background: var(--v2-bg-hover, rgba(255, 255, 255, 0.05)); color: var(--v2-accent, #0d7cc4); } .dark-theme .app-header .header-search input, .dark-theme #v2-global-search { background: var(--v2-bg-input, rgba(255, 255, 255, 0.05)); border-color: var(--border, #1e2433); color: var(--text, #e6e9f0); } .dark-theme .app-sidebar .sidebar-link, .dark-theme .app-sidebar .etf-sidebar-list-head, .dark-theme .app-sidebar .flyout-header { color: var(--text, #e6e9f0); } .dark-theme .app-sidebar .sidebar-link:hover, .dark-theme .app-sidebar .etf-sidebar-list-head:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } .dark-theme .app-sidebar h4, .dark-theme .app-sidebar .etf-sidebar-head h4 { color: var(--text, #e6e9f0); } /* Theme toggle button icon color */ #v2-theme-toggle { font-size: 16px; } #v2-theme-toggle i { color: var(--text, #212529); transition: color 0.15s ease; } .dark-theme #v2-theme-toggle i { color: var(--text, #e6e9f0); } /* Logo switching for light/dark mode */ .header-brand .logo-light { display: block; } .header-brand .logo-dark { display: none; } .dark-theme .header-brand .logo-light { display: none; } .dark-theme .header-brand .logo-dark { display: block; } /* ============================================================================ GLOBAL BODY & MAIN CONTENT THEMING Ensures the entire page background and content areas respond to theme ============================================================================ */ /* Base page background */ html, body { background-color: var(--v2-bg-page, var(--color-bg, #f8f9fa)); color: var(--v2-text-primary, var(--color-text, #212529)); transition: background-color 0.15s ease, color 0.15s ease; } /* Main content area */ .app-main, .app-body main, #app-main, .etf-content-main, .terminal-wrapper, #dash-wrapper { background-color: var(--v2-bg-page, var(--color-bg, #f8f9fa)); color: var(--v2-text-primary, var(--color-text, #212529)); } /* Cards, panels, and elevated surfaces */ .card, .panel, .etf-v2-container, .etf-v2-header, .etf-v2-toast, .etf-v2-control-bar, .etf-v2-main, [class*="etf-v2-"], .ag-root-wrapper { background-color: var(--v2-bg-surface, var(--color-bg, #ffffff)); color: var(--v2-text-primary, var(--color-text, #212529)); } /* Form inputs globally */ input, select, textarea, .form-control { background-color: var(--v2-bg-input, var(--color-bg, #ffffff)); color: var(--v2-text-primary, var(--color-text, #212529)); border-color: var(--v2-border, var(--color-border, #dee2e6)); } input::placeholder, select::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--v2-text-placeholder, var(--color-muted, #6c757d)); } input:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--v2-border-focus, var(--color-primary, #0964A0)); outline: none; box-shadow: 0 0 0 2px var(--v2-accent-bg, rgba(9, 100, 160, 0.1)); } /* Dark theme overrides for main content - using hardcoded colors */ html.dark-theme .app-main, html.dark-theme .app-body main, html.dark-theme #app-main, html.dark-theme .etf-content-main, html.dark-theme .terminal-wrapper, html.dark-theme #dash-wrapper, .dark-theme .app-main, .dark-theme .app-body main, .dark-theme #app-main, .dark-theme .etf-content-main, .dark-theme .terminal-wrapper, .dark-theme #dash-wrapper { background-color: #0c111a !important; color: #e6e9f0 !important; } html.dark-theme .card, html.dark-theme .panel, html.dark-theme .etf-v2-container, html.dark-theme .etf-v2-header, html.dark-theme .etf-v2-toast, html.dark-theme .etf-v2-control-bar, html.dark-theme .etf-v2-main, html.dark-theme [class*="etf-v2-"], html.dark-theme .ag-root-wrapper, .dark-theme .card, .dark-theme .panel, .dark-theme .etf-v2-container, .dark-theme .etf-v2-header, .dark-theme .etf-v2-toast, .dark-theme .etf-v2-control-bar, .dark-theme .etf-v2-main, .dark-theme [class*="etf-v2-"], .dark-theme .ag-root-wrapper { background-color: #111520 !important; color: #e6e9f0 !important; } html.dark-theme input, html.dark-theme select, html.dark-theme textarea, html.dark-theme .form-control, html.dark-theme .control-select, .dark-theme input, .dark-theme select, .dark-theme textarea, .dark-theme .form-control, .dark-theme .control-select { background-color: #0c111a !important; color: #e6e9f0 !important; border-color: #1e2433 !important; } html.dark-theme .control-select:focus, .dark-theme .control-select:focus { border-color: #0d7cc4 !important; box-shadow: 0 0 0 2px rgba(13, 124, 196, 0.2) !important; } html.dark-theme .control-select option, .dark-theme .control-select option { background-color: #111520 !important; color: #e6e9f0 !important; } /* Generic