:root{color-scheme:light dark}.dark-theme{color-scheme:dark}.light-theme{color-scheme:light}body{--igc-background-color: light-dark(#e5e7e9, #111);--igc-accent-color: light-dark(#fff, #424242);--igc-text-color: light-dark(rgb(0 0 0 / 72%), rgb(255 255 255 / 70%));--igc-border-color: light-dark(#f3f5f7, #212121);--igc-resize-target-border-color: magenta;--igc-resize-target-border-width: 0;--igc-resize-target-border-style: solid;--igc-resize-handle-width: 2px;--igc-resize-handle-height: 80px;--igc-button-component-text: "inherit";--igc-splitter-background: light-dark(#d3d6d9, #000);--igc-splitter-thickness: 4px;--igc-flyout-shadow-color: light-dark( rgb(0 0 0 / 8%), rgb(0 0 0 / 38%) );--igc-joystick-icon-color-active: light-dark(#000, #fff);--igc-joystick-border-color: light-dark(#d3d6d9, #424242);--igc-tab-background-active: light-dark(#f3f5f7, #212121);--igc-pane-content-background: light-dark(#f3f5f7, #212121);--igc-floating-pane-border-color: light-dark(#fff, rgb(0 0 0 / 26%));--igc-context-menu-color-active: light-dark(#000, #fff);--igc-disabled-color: light-dark( rgb(0 0 0 / 38%), rgb(255 255 255 / 50%) );--igc-sb-size: 12px;--igc-sb-track-bg-color: light-dark(#e5e7e9, #111);--igc-sb-track-bg-color-hover: light-dark(#e5e7e9, #111);--igc-sb-track-border-color: transparent;--igc-sb-track-border-size: 0;--igc-sb-corner-bg: light-dark(#e5e7e9, #111);--igc-sb-corner-border-color: transparent;--igc-sb-corner-border-size: 0;--igc-sb-thumb-border-size: 0;--igc-sb-thumb-min-height: 32px;--igc-sb-thumb-border-color: transparent;--igc-sb-thumb-border-radius: 0;--igc-sb-thumb-bg-color: light-dark(#d1d1d1, #3c3c3c);--igc-sb-thumb-bg-color-hover: light-dark(#afafaf, #616161)}/* ============================================================================ Theme cohesion layer. One semantic palette drives every surface: app chrome, Ignite UI grids, the Dock Manager, charts, and native scrollbars. Colors are keyed off [data-variant] (dark/light) and [data-palette] (material/bootstrap/fluent/ indigo) set on by themeRegistry.applyTheme(). Rule: odd/even grid rows are intentionally identical (no zebra striping). ============================================================================ */ :root { /* gain/loss are shared defaults; overridden per variant below */ --app-gain: #22c98a; --app-loss: #ff5b6e; --app-gain-soft: rgba(34, 201, 138, 0.16); --app-loss-soft: rgba(255, 91, 110, 0.16); --app-flash-up: rgba(34, 201, 138, 0.55); --app-flash-down: rgba(255, 91, 110, 0.55); --app-radius: 6px; --app-mono: 'SF Mono', 'JetBrains Mono', 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace; } /* ---------- DARK base ---------- */ :root[data-variant='dark'] { --app-bg: #0b0f17; --app-surface: #121826; --app-surface-2: #0e131f; --app-header: #161d2e; --app-elevated: #1a2233; --app-border: #232c40; --app-border-strong: #2e3a54; --app-text: #e6ecf5; --app-text-muted: #8a97ad; --app-text-dim: #5d6a82; --app-hover: #1d2740; --app-selected: #243154; --app-accent: #3d8bff; --app-accent-contrast: #ffffff; --app-gain: #2ee08a; --app-loss: #ff5b6e; --app-gain-soft: rgba(46, 224, 138, 0.14); --app-loss-soft: rgba(255, 91, 110, 0.14); --app-flash-up: rgba(46, 224, 138, 0.45); --app-flash-down: rgba(255, 91, 110, 0.45); --app-scroll-track: #0e131f; --app-scroll-thumb: #2b3a57; --app-scroll-thumb-hover: #3a4d72; --app-shadow: rgba(0, 0, 0, 0.5); } /* ---------- LIGHT base ---------- */ :root[data-variant='light'] { --app-bg: #eef1f6; --app-surface: #ffffff; --app-surface-2: #f4f6fa; --app-header: #e9edf4; --app-elevated: #ffffff; --app-border: #d7dde8; --app-border-strong: #c3ccdb; --app-text: #1b2330; --app-text-muted: #5d6a82; --app-text-dim: #8a97ad; --app-hover: #eaf0fb; --app-selected: #d8e6ff; --app-accent: #1565d8; --app-accent-contrast: #ffffff; --app-gain: #0a9d5a; --app-loss: #d93a4a; --app-gain-soft: rgba(10, 157, 90, 0.12); --app-loss-soft: rgba(217, 58, 74, 0.12); --app-flash-up: rgba(10, 157, 90, 0.28); --app-flash-down: rgba(217, 58, 74, 0.28); --app-scroll-track: #e6eaf1; --app-scroll-thumb: #c0c9d8; --app-scroll-thumb-hover: #a6b2c6; --app-shadow: rgba(20, 30, 50, 0.15); } /* ---------- per-palette accent + background hue tweaks ---------- */ :root[data-variant='dark'][data-palette='material'] { --app-accent: #4aa3ff; --app-bg: #0b0f17; --app-surface: #121826; } :root[data-variant='dark'][data-palette='bootstrap'] { --app-accent: #4f8cff; --app-bg: #0a0d12; --app-surface: #11151d; --app-surface-2: #0c0f15; --app-header: #141a24; --app-border: #1e2530; } :root[data-variant='dark'][data-palette='fluent'] { --app-accent: #2ea0ff; --app-bg: #0d0f13; --app-surface: #16191f; --app-surface-2: #101216; --app-header: #1a1e25; --app-border: #262b33; } :root[data-variant='dark'][data-palette='indigo'] { --app-accent: #8b8bff; --app-bg: #0c0c18; --app-surface: #15162a; --app-surface-2: #101023; --app-header: #1a1b33; --app-border: #272948; --app-border-strong: #34376a; --app-hover: #21234a; --app-selected: #2c2f63; } :root[data-variant='light'][data-palette='material'] { --app-accent: #1565d8; } :root[data-variant='light'][data-palette='bootstrap'] { --app-accent: #0d6efd; } :root[data-variant='light'][data-palette='fluent'] { --app-accent: #0f6cbd; } :root[data-variant='light'][data-palette='indigo'] { --app-accent: #5b5bd6; --app-bg: #f0f0f8; --app-surface: #ffffff; --app-selected: #e2e2fb; --app-hover: #eeeefb; } /* ============================================================================ App chrome ============================================================================ */ html, body, #root { height: 100%; } body { margin: 0; background: var(--app-bg); color: var(--app-text); font-family: var(--ig-font-family, 'Segoe UI', system-ui, -apple-system, sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } /* ============================================================================ Ignite UI Grid tokens — mapped to the app palette (strict acceptance list). Odd/even identical => no zebra. Applied to every grid in the app. ============================================================================ */ igc-grid, igx-grid, .ig-grid-surface { --ig-grid-background: var(--app-surface); --ig-grid-content-background: var(--app-surface); --ig-grid-row-odd-background: var(--app-surface); --ig-grid-row-even-background: var(--app-surface); --ig-grid-row-hover-background: var(--app-hover); --ig-grid-row-selected-background: var(--app-selected); --ig-grid-header-background: var(--app-header); --ig-grid-header-text-color: var(--app-text-muted); --ig-grid-content-text-color: var(--app-text); --ig-grid-row-border-color: var(--app-border); --ig-grid-cell-active-border-color: var(--app-accent); --ig-grid-group-row-background: var(--app-header); --ig-grid-group-label-column-name-text: var(--app-text); --ig-grid-group-count-background: var(--app-accent); --ig-grid-group-count-text-color: var(--app-accent-contrast); --ig-grid-row-selected-text-color: var(--app-text); --ig-grid-row-hover-text-color: var(--app-text); --ig-grid-header-border-color: var(--app-border); --ig-grid-row-highlight: var(--app-accent); } /* Grid host fills its pane */ .ig-grid-surface { width: 100%; height: 100%; } /* Conditional cell coloring (paired with cellStyles for background tints) */ .cell-gain { color: var(--app-gain) !important; font-variant-numeric: tabular-nums; } .cell-loss { color: var(--app-loss) !important; font-variant-numeric: tabular-nums; } .cell-flat { color: var(--app-text-muted) !important; font-variant-numeric: tabular-nums; } .cell-num { font-variant-numeric: tabular-nums; font-family: var(--app-mono); } /* ============================================================================ Dock Manager tokens ============================================================================ */ igc-dockmanager { --igc-dock-background: var(--app-bg); --igc-dock-text: var(--app-text); --igc-pane-content-background: var(--app-surface); --igc-pane-content-text: var(--app-text); --igc-pane-header-background: var(--app-header); --igc-pane-header-text: var(--app-text); --igc-tab-background: var(--app-surface-2); --igc-tab-text: var(--app-text-muted); --igc-tab-border-color: var(--app-border); --igc-tab-background-active: var(--app-surface); --igc-tab-text-active: var(--app-text); --igc-tab-border-color-active: var(--app-accent); --igc-border-color: var(--app-border); --igc-accent-color: var(--app-accent); --igc-active-color: var(--app-accent); --igc-splitter-background: var(--app-bg); --igc-splitter-handle: var(--app-border-strong); --igc-button-text: var(--app-text-muted); --igc-flyout-shadow-color: var(--app-shadow); --igc-floating-pane-border-color: var(--app-border-strong); --igc-pinned-header-background: var(--app-header); --igc-pinned-header-text: var(--app-text-muted); --igc-context-menu-background: var(--app-elevated); --igc-context-menu-color: var(--app-text); --igc-context-menu-background-active: var(--app-accent); --igc-context-menu-color-active: var(--app-accent-contrast); --igc-joystick-background: var(--app-elevated); --igc-joystick-border-color: var(--app-border-strong); --igc-joystick-icon-color: var(--app-text-muted); --igc-joystick-background-active: var(--app-accent); --igc-joystick-icon-color-active: var(--app-accent-contrast); /* dock scrollbars */ --igc-sb-track-bg-color: var(--app-scroll-track); --igc-sb-track-bg-color-hover: var(--app-scroll-track); --igc-sb-corner-bg: var(--app-scroll-track); --igc-sb-thumb-bg-color: var(--app-scroll-thumb); --igc-sb-thumb-bg-color-hover: var(--app-scroll-thumb-hover); --igc-sb-size: 12px; --igc-sb-thumb-border-radius: 6px; width: 100%; height: 100%; } igc-dockmanager::part(content-pane) { background: var(--app-surface); } igc-dockmanager::part(pane-header) { border-bottom: 1px solid var(--app-border); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; } igc-dockmanager::part(tab-header) { font-size: 0.74rem; } igc-dockmanager::part(tab-header selected) { border-bottom: 2px solid var(--app-accent); color: var(--app-text); } /* ============================================================================ Native scrollbars — palette matched everywhere (no bright blue defaults) ============================================================================ */ * { scrollbar-width: thin; scrollbar-color: var(--app-scroll-thumb) var(--app-scroll-track); } *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-track { background: var(--app-scroll-track); } *::-webkit-scrollbar-thumb { background: var(--app-scroll-thumb); border-radius: 6px; border: 2px solid var(--app-scroll-track); } *::-webkit-scrollbar-thumb:hover { background: var(--app-scroll-thumb-hover); } *::-webkit-scrollbar-corner { background: var(--app-scroll-track); } /* ============================================================================ Component chrome — all colors resolve from the palette layer (palette.css). ============================================================================ */ .workstation { display: flex; flex-direction: column; height: 100vh; width: 100vw; background: var(--app-bg); overflow: hidden; } .dock-host { flex: 1 1 auto; min-height: 0; position: relative; } .slot-fill { width: 100%; height: 100%; overflow: hidden; } /* ---------------- Top bar ---------------- */ .topbar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; background: linear-gradient(180deg, var(--app-header), var(--app-surface-2)); border-bottom: 1px solid var(--app-border); padding: 6px 14px 0; gap: 4px 0; flex: 0 0 auto; } .topbar-left { display: flex; align-items: center; gap: 22px; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 18px; justify-self: end; } .brand { display: flex; align-items: baseline; gap: 8px; } .brand-mark { color: var(--app-accent); font-size: 1.1rem; transform: translateY(1px); } .brand-name { font-weight: 800; letter-spacing: 0.08em; font-size: 1.05rem; color: var(--app-text); } .brand-accent { color: var(--app-accent); } .brand-sub { font-size: 0.6rem; letter-spacing: 0.28em; color: var(--app-text-muted); border-left: 1px solid var(--app-border-strong); padding-left: 8px; align-self: center; } .index-strip { display: flex; gap: 14px; overflow: hidden; } .index-chip { display: flex; flex-direction: column; line-height: 1.15; } .index-label { font-size: 0.58rem; letter-spacing: 0.1em; color: var(--app-text-muted); } .index-pct { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; } .idx-up { color: var(--app-gain); } .idx-down { color: var(--app-loss); } .idx-flat { color: var(--app-text-muted); } .market-status { display: flex; align-items: center; gap: 7px; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--app-text-muted); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-gain); box-shadow: 0 0 0 0 var(--app-gain); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-gain) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .clock { font-family: var(--app-mono); font-size: 0.92rem; font-weight: 600; color: var(--app-text); font-variant-numeric: tabular-nums; } .clock-tz { color: var(--app-text-muted); font-size: 0.62rem; } /* ---------------- Streaming ticker marquee ---------------- */ .ticker { grid-column: 1 / -1; overflow: hidden; border-top: 1px solid var(--app-border); background: var(--app-surface-2); position: relative; height: 30px; display: flex; align-items: center; } .ticker-track { display: flex; gap: 0; white-space: nowrap; animation: marquee 90s linear infinite; will-change: transform; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; height: 30px; border: none; background: none; cursor: pointer; border-right: 1px solid var(--app-border); font-size: 0.76rem; } .ticker-item:hover { background: var(--app-hover); } .ticker-sym { font-weight: 700; color: var(--app-text); letter-spacing: 0.02em; } .ticker-last { font-variant-numeric: tabular-nums; color: var(--app-text-muted); padding: 1px 4px; border-radius: 3px; } .ticker-chg { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.72rem; } .flash-up { animation: flashUp 0.85s ease-out; } .flash-down { animation: flashDown 0.85s ease-out; } @keyframes flashUp { 0% { background: var(--app-flash-up); color: #fff; } 100% { background: transparent; } } @keyframes flashDown { 0% { background: var(--app-flash-down); color: #fff; } 100% { background: transparent; } } /* ---------------- Pane scaffolding ---------------- */ .pane { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--app-surface); overflow: hidden; } .pane-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 5px 10px; background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); font-size: 0.72rem; color: var(--app-text-muted); min-height: 28px; } .pane-toolbar .spacer { flex: 1 1 auto; } .pane-title { font-weight: 700; letter-spacing: 0.05em; color: var(--app-text); text-transform: uppercase; font-size: 0.7rem; } .pane-badge { font-variant-numeric: tabular-nums; background: var(--app-elevated); border: 1px solid var(--app-border); border-radius: 4px; padding: 1px 6px; color: var(--app-text-muted); } .pane-body { flex: 1 1 auto; min-height: 0; position: relative; } .sym-pill { font-weight: 800; color: var(--app-accent); letter-spacing: 0.04em; background: color-mix(in srgb, var(--app-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--app-accent) 45%, transparent); border-radius: 4px; padding: 1px 8px; } /* search box used in watchlist / market data */ .pane-search { background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 4px; color: var(--app-text); font-size: 0.74rem; padding: 3px 8px; outline: none; width: 130px; } .pane-search:focus { border-color: var(--app-accent); } .seg { display: inline-flex; border: 1px solid var(--app-border); border-radius: 5px; overflow: hidden; } .seg button { background: var(--app-surface); color: var(--app-text-muted); border: none; padding: 3px 9px; font-size: 0.7rem; cursor: pointer; border-right: 1px solid var(--app-border); } .seg button:last-child { border-right: none; } .seg button.active { background: var(--app-accent); color: var(--app-accent-contrast); font-weight: 700; } .seg button:hover:not(.active) { background: var(--app-hover); color: var(--app-text); } /* ---------------- Level II depth ladder ---------------- */ .depth { display: grid; grid-template-columns: 1fr 1fr; height: 100%; font-size: 0.76rem; } .depth-col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .depth-col.asks { border-left: 1px solid var(--app-border); } .depth-head { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 4px 8px; color: var(--app-text-muted); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--app-border); background: var(--app-header); } .depth-rows { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .depth-row { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 2px 8px; font-variant-numeric: tabular-nums; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--app-border) 50%, transparent); } .depth-bar { position: absolute; top: 0; bottom: 0; right: 0; opacity: 0.16; pointer-events: none; } .bids .depth-bar { background: var(--app-gain); left: 0; right: auto; } .asks .depth-bar { background: var(--app-loss); } .depth-price.bid { color: var(--app-gain); font-weight: 700; } .depth-price.ask { color: var(--app-loss); font-weight: 700; } .depth-size, .depth-orders { color: var(--app-text); z-index: 1; } .depth-orders { color: var(--app-text-muted); text-align: right; } .depth-size { text-align: right; } .depth-spread { grid-column: 1 / -1; text-align: center; padding: 4px; font-size: 0.66rem; color: var(--app-text-muted); background: var(--app-surface-2); border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); } /* ---------------- Config pane ---------------- */ .config { padding: 14px; overflow-y: auto; height: 100%; display: flex; flex-direction: column; gap: 18px; } .config-group { display: flex; flex-direction: column; gap: 8px; } .config-label { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-text-muted); font-weight: 700; } .swatch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .swatch { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--app-border); background: var(--app-surface-2); color: var(--app-text); font-size: 0.78rem; transition: border-color 0.15s, background 0.15s; } .swatch:hover { background: var(--app-hover); } .swatch.active { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface-2)); } .swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); } .config-row { display: flex; gap: 8px; } .config-note { font-size: 0.7rem; color: var(--app-text-muted); line-height: 1.5; } .config-meta { margin-top: auto; font-size: 0.66rem; color: var(--app-text-muted); border-top: 1px solid var(--app-border); padding-top: 12px; line-height: 1.6; } .config-meta b { color: var(--app-text); } /* quote header strip (chart pane) */ .quote-head { display: flex; align-items: baseline; gap: 16px; padding: 6px 12px; background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); flex: 0 0 auto; } .quote-head .qh-sym { font-size: 1.05rem; font-weight: 800; color: var(--app-text); } .quote-head .qh-name { font-size: 0.72rem; color: var(--app-text-muted); } .quote-head .qh-last { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; } .quote-head .qh-chg { font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; } .qh-stat { display: flex; flex-direction: column; line-height: 1.2; } .qh-stat .k { font-size: 0.58rem; letter-spacing: 0.08em; color: var(--app-text-muted); text-transform: uppercase; } .qh-stat .v { font-size: 0.78rem; color: var(--app-text); font-variant-numeric: tabular-nums; } .chart-wrap { flex: 1 1 auto; min-height: 0; position: relative; } /* ---------------------------------------------------------------------------- IgrFinancialChart light-DOM re-skin. The chart renders its toolbar, range selector, type/indicator menus and legend as plain HTML with a HARD-CODED LIGHT THEME (light-gray toolbar, black/white text, white dropdowns). These can't be themed via chart props, so override the shipped classes here. The plot/volume canvas is themed via props in ChartPane; the zoom slider is disabled (no color API). ---------------------------------------------------------------------------- */ .chart-wrap .financialChartToolbar { background: var(--app-surface-2) !important; color: var(--app-text-muted) !important; border-bottom: 1px solid var(--app-border) !important; } .chart-wrap .financialChartToolbarArea, .chart-wrap .financialChartTypePicker, .chart-wrap .financialChartIndicators, .chart-wrap .financialChartRangeSelector { background: transparent !important; } /* range selector buttons (1M / 3M / 6M / ALL) — default black text */ .chart-wrap .financialChartRangeSelectorLabel, .chart-wrap .financialChartRangeSelectorLabelSpan, .chart-wrap .rangeSelectorAll, .chart-wrap .rangeSelectorOneMonth, .chart-wrap .rangeSelectorThreeMonths, .chart-wrap .rangeSelectorSixMonths { color: var(--app-text-muted) !important; background: transparent !important; border-radius: 4px; } .chart-wrap .financialChartRangeSelectorLabelSpan:hover, .chart-wrap .rangeSelectorAll:hover, .chart-wrap .rangeSelectorOneMonth:hover, .chart-wrap .rangeSelectorThreeMonths:hover, .chart-wrap .rangeSelectorSixMonths:hover { background: var(--app-hover) !important; color: var(--app-text) !important; } /* selected range pill (shipped light-gray #dadada) */ .chart-wrap .financialChartRangeSelectorLabelSpan { background: color-mix(in srgb, var(--app-accent) 24%, transparent) !important; color: var(--app-text) !important; } /* type-picker + indicator menu trigger buttons */ .chart-wrap .financialChartTypePickerDropDownButton, .chart-wrap .financialChartIndicatorMenuDropDownButton, .chart-wrap .financialChartIndicatorMenuLabel { color: var(--app-text-muted) !important; } .chart-wrap .financialChartTypePickerDropDownButton:hover, .chart-wrap .financialChartIndicatorMenuDropDownButton:hover { background: var(--app-hover) !important; } /* dropdown menus (shipped white bg / black text) */ .chart-wrap .financialChartTypePickerDropDownMenu, .chart-wrap .financialChartIndicatorMenuDropDownMenu, .chart-wrap .financialChartIndicatorMenuDropDownMenuList { background: var(--app-elevated) !important; color: var(--app-text) !important; border: 1px solid var(--app-border) !important; box-shadow: 0 8px 22px var(--app-shadow) !important; } .chart-wrap .financialChartListItem { color: var(--app-text) !important; background: transparent !important; } .chart-wrap .financialChartListItem:hover { background: var(--app-hover) !important; } /* legend + toolbar icons */ .chart-wrap .financialChartLegend, .chart-wrap .ig-chart-legend-items-list, .chart-wrap .financialChartListItem label { color: var(--app-text-muted) !important; } .chart-wrap .ui-icon { color: var(--app-text-muted) !important; } .chart-wrap .ui-icon svg { fill: currentColor !important; }