/* DS platform font for the TradingView chart. `custom_font_family` (set in useInitializeChart.ts) styles the canvas-drawn time/price scales + pane, but TradingView only picks up a non-system font if it's loaded in this custom CSS. The `font-family` rule below covers the HTML chrome (toolbar, legend, popups, dialogs). Keep in sync with --font-family-platform (theme/typography.css). */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* This file is loaded ONLY into the TradingView iframe (via custom_css_url), so the broad !important here is contained to the chart and cannot leak into the app. TradingView's chrome hardcodes `font-family: -apple-system, …, Trebuchet MS, …` on many elements, so a plain :root rule is not enough — we have to force it. */ :root, body, body * { font-family: 'IBM Plex Sans', sans-serif !important; } /* Everything in the chart iframe at 12px (HTML chrome — top header toolbar, the bottom time-axis bar incl. interval buttons + clock, legend, buttons, popups, dialogs, menus). `--ui-lib-typography-font-size` is the variable many ui-lib components read; the raw `font-size` blanket catches everything else. Scoped to the iframe via custom_css_url, so it can't leak into the app. Canvas-drawn text (axis ticks) isn't CSS-styled — set via `scalesProperties.fontSize` in useInitializeChart.ts. */ * { font-size: 12px !important; --ui-lib-typography-font-size: 12px !important; --ui-lib-typography-line-height: 16px !important; } /* Marks tooltip (hover on the B/S trade bubbles / KOL dots) — the 12px blanket above makes it hard to read, so restore the library's intended 14px. The class names are the hashed CSS-module names of the vendored library build (see bundles/user-defined-bars-marks-tooltip.*.js). If the library is ever upgraded the hashes change and this rule harmlessly stops matching (tooltip drops back to 12px) — re-grep the new bundle for `tooltip:"tooltip-…"`. */ .tooltip-eSLcXvvL .text-hF57_4zZ { font-size: 14px !important; line-height: 19px !important; /* Render the \n line structure the mark builders compose ("You bought $805 at $339M USD" / "Market Cap") instead of collapsing it into one auto-wrapped paragraph that breaks mid-phrase ("… Market" / "Cap"). */ white-space: pre-line; /* Library default is 244px; a bit wider keeps the first row on one line even with larger figures ("You bought $99.9K at $99.9M USD"). */ max-width: 280px !important; } /* DEV-910: on touch devices the pane is narrow (~310px on phones) and the tooltip renderer only edge-checks the LEFT side — a wide tooltip forces the right-side flip for most mid-pane marks and runs off-screen. Narrower text keeps the left placement fitting far more often; the residual overflow is clamped by useMarkTooltipClamp (effect #31). Keyed on pointer, not width: the iframe can be narrower than the phone breakpoint on desktop layouts, where the wide tooltip is fine. */ @media (pointer: coarse) { .tooltip-eSLcXvvL .text-hF57_4zZ { max-width: 200px !important; } } /* DEV-910: marks tooltip on the platform surface palette instead of TV's own dark-blue panel. DS tokens don't exist inside the chart iframe, so the literals mirror theme/colors.css by hand (same contract as the zen axis literals in useZenLegendSync): popover surface = --color-active, text = --color-neutral-1, radius = --size-border-s. The surface routes through TV's own --themed-color-background so the bubble AND both callout arrows (::before/::after border tricks) recolor together. Font matches custom_font_family in useInitializeChart (literal for the same reason). */ .tooltip-eSLcXvvL { border-radius: 4px; /* --size-border-s */ } .tooltip-eSLcXvvL .text-hF57_4zZ { font-family: 'IBM Plex Sans', sans-serif; /* --font-family-platform */ } .theme-dark:root .tooltip-eSLcXvvL { --themed-color-background: #383838; /* --color-active (dark) */ } .theme-dark:root .tooltip-eSLcXvvL .text-hF57_4zZ { --themed-color-text: #e9e9e9; /* --color-neutral-1 (dark) */ } :root:not(.theme-dark) .tooltip-eSLcXvvL { --themed-color-background: #b7b09e; /* --color-active (light) */ } :root:not(.theme-dark) .tooltip-eSLcXvvL .text-hF57_4zZ { --themed-color-text: #171717; /* --color-neutral-1 (light) */ } /* …but NOT the screen-reader-only text TradingView collapses via `font-size: 0` — the blanket above would un-hide it, so force it back. The keyboard-commands hint block is `
`; aria-live / visually-hidden / status / alert regions use the same trick. */ [role='contentinfo'], [role='contentinfo'] *, [class*='visually-hidden'], [class*='visually-hidden'] *, [aria-live], [aria-live] *, .aria-live-regions-wrapper, .aria-live-regions-wrapper *, [role='status'], [role='status'] *, [role='alert'], [role='alert'] * { font-size: 0 !important; } /* Hover pill for our custom header buttons (Price/MCap, Display, Bubbles — tagged with .mb-toolbar-button in toolbar/*.ts). Mirrors the native TV toolbar-button hover: an absolutely-positioned ::before pill (4px radius, 28px tall) behind the content, filled with the toolbar hover token. */ .mb-toolbar-button { position: relative; z-index: 0; } .mb-toolbar-button::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 28px; transform: translateY(-50%); border-radius: 4px; z-index: -1; } .mb-toolbar-button:hover::before { background-color: var(--tv-color-toolbar-button-background-hover); } .theme-dark:root { --tv-color-platform-background: #121212; /* --color-bg-secondary */ --tv-color-pane-background: #121212; /* --color-bg-secondary */ --tv-color-toolbar-button-text: #9c9c9c; /* --color-neutral-2 */ --tv-color-toolbar-button-text-active: #ffffff; /* --color-brand-primary */ --tv-color-toolbar-button-text-active-hover: #ffffff; /* --color-brand-primary */ --tv-color-toolbar-button-background-hover: #2d2d2d; /* --color-hover */ --tv-color-toolbar-button-background-expanded: #2a2a2a; /* --color-pressed */ --tv-color-toolbar-button-background-active: #383838; /* --color-active */ --tv-color-toolbar-button-background-active-hover: #2d2d2d; /* --color-hover */ --tv-color-toolbar-toggle-button-background-active: #ffffff; /* --color-brand-primary */ --tv-color-toolbar-toggle-button-background-active-hover: #ffffff; /* --color-brand-primary */ --tv-color-popup-background: #0a0a0a; /* --color-bg-primary */ --tv-color-popup-element-text: #9c9c9c; /* --color-neutral-2 */ --tv-color-popup-element-text-hover: #e9e9e9; /* --color-neutral-1 */ --tv-color-popup-element-secondary-text: #606060; /* --color-neutral-3 */ --tv-color-popup-element-text-active: #ffffff; /* --color-brand-primary */ --tv-color-popup-element-background-hover: #2d2d2d; /* --color-hover */ --tv-color-popup-element-background-active: #383838; /* --color-active */ --tv-color-popup-element-divider-background: #383838; /* --color-active */ } :root:not(.theme-dark) { --tv-color-platform-background: #eae7dc; /* --color-bg-secondary */ --tv-color-pane-background: #eae7dc; /* --color-bg-secondary */ --tv-color-toolbar-button-text: #7a7870; /* --color-neutral-2 */ --tv-color-toolbar-button-text-active: #171717; /* --color-brand-primary */ --tv-color-toolbar-button-text-active-hover: #171717; /* --color-brand-primary */ --tv-color-toolbar-button-background-hover: #cbc5b3; /* --color-hover */ --tv-color-toolbar-button-background-expanded: #dbd7c8; /* --color-pressed */ --tv-color-toolbar-button-background-active: #b7b09e; /* --color-active */ --tv-color-toolbar-button-background-active-hover: #cbc5b3; /* --color-hover */ --tv-color-toolbar-toggle-button-background-active: #171717; /* --color-brand-primary */ --tv-color-toolbar-toggle-button-background-active-hover: #171717; /* --color-brand-primary */ --tv-color-popup-background: #f7f6f0; /* --color-bg-primary */ --tv-color-popup-element-text: #7a7870; /* --color-neutral-2 */ --tv-color-popup-element-text-hover: #171717; /* --color-neutral-1 */ --tv-color-popup-element-secondary-text: #a5a297; /* --color-neutral-3 */ --tv-color-popup-element-text-active: #171717; /* --color-brand-primary */ --tv-color-popup-element-background-hover: #cbc5b3; /* --color-hover */ --tv-color-popup-element-background-active: #b7b09e; /* --color-active */ --tv-color-popup-element-divider-background: #b7b09e; /* --color-active */ } /* Zen chrome dimming: in zen the TV toolbar keeps its characteristic positions (interval top-left etc.) but drops one hierarchy tier — resting text moves to neutral-3, active states to neutral-2, so the chart is the only loud layer. Hover pills still restore full affordance. Values mirror the DS neutrals per theme — keep in sync with the theme blocks above. (Axis tick labels are canvas-drawn — dimmed via scalesProperties overrides in useZenLegendSync/useInitializeChart, tune together with this block.) */ html.zen-mode.theme-dark:root { --tv-color-toolbar-button-text: #606060; /* --color-neutral-3 */ --tv-color-toolbar-button-text-active: #9c9c9c; /* --color-neutral-2 */ --tv-color-toolbar-button-text-active-hover: #e9e9e9; /* --color-neutral-1 */ --tv-color-toolbar-toggle-button-background-active: #9c9c9c; /* --color-neutral-2 */ --tv-color-toolbar-toggle-button-background-active-hover: #e9e9e9; /* --color-neutral-1 */ } html.zen-mode:root:not(.theme-dark) { --tv-color-toolbar-button-text: #a5a297; /* --color-neutral-3 */ --tv-color-toolbar-button-text-active: #7a7870; /* --color-neutral-2 */ --tv-color-toolbar-button-text-active-hover: #171717; /* --color-neutral-1 */ --tv-color-toolbar-toggle-button-background-active: #7a7870; /* --color-neutral-2 */ --tv-color-toolbar-toggle-button-background-active-hover: #171717; /* --color-neutral-1 */ } /* Zen mode (the host toggles `zen-mode` on this document's root — see useZenLegendSync effect #29): the app hides TV's series legend row and renders its own identity block over the pane's top-left, so the remaining study rows (e.g. "Volume SMA" + its eye/settings/delete controls) are pushed below that block. `zen-main-legend` is tagged onto the MAIN pane's legend only by useZenLegendSync (sub-pane study legends — RSI/MACD — must not be displaced inside their short panes); on a library upgrade re-grep the new bundle for `legend:"legend-…"` and update the tagging selector. */ html.zen-mode .zen-main-legend { margin-top: 56px; } /* Zen: kill the 1px separator TV draws under its header toolbar. It spans the full chart width ABOVE the pane (the crosshair renders under it), so no host-side ground fade can cover it — those live inside the pane and are bounded by the HUD band. In zen the toolbar is meant to melt into the chart, and that hairline was the one thing still drawing a box around it. Belt and braces: the separator has been both a border-bottom and a box-shadow across library versions, and `layout__area--top` is not part of TV's public API — on a library upgrade, re-check that this still matches. */ html.zen-mode [class*='layout__area--top'], html.zen-mode [class*='header-chart-panel'], html.zen-mode [class*='chart-toolbar'] { border-bottom: none !important; box-shadow: none !important; } /* Zen + visible holder-metrics block: that block renders between the identity block and the study legend, so push the legend below it. The host MEASURES the rendered HUD band and writes its height into `--zen-hud-height` on this root (useZenLegendSync effect #29b), so the push follows the real block — which changes with viewport width (the stats line wraps), with holder-row count and with the type scale. The 220px fallback only applies for the frame between class toggle and first measurement. */ html.zen-mode.zen-metrics .zen-main-legend { margin-top: var(--zen-hud-height, 220px); } /* ---- Dock-style overlay bottom controls bar (timeframes + log/auto) ---- Zen only (`html.zen-mode`, like every other rule in this file): the host applies the matching 33px oversize only under its own zen marker (`.zen-chart-host` in TradingChart.module.css — keep the two files in sync; both flip together on zen transitions). macOS-Dock behavior with NO reserved space: the host oversizes this iframe by 33px and clips the overhang, so TV lays the pane + time axis out over the full visible height and the 39px `.chart-controls-bar` naturally pokes just 6px into view at the bottom edge. Hovering that peek strip slides the bar 33px UP, overlaying the chart bottom with its own solid pane background + top border (both from the bundle). `.chart-controls-bar` is not part of TV's public API — on a library upgrade re-grep the new bundle for the class. Hover-capable pointers only: touch has no hover, so phones/tablets keep the normal always-visible bar (the host skips the oversize there too). Transition values mirror the DS motion tokens (--motion-base 240ms / --ease-out-quart) — app CSS vars don't reach this iframe, keep in sync with theme/motion.css. */ @media (hover: hover) and (pointer: fine) { html.zen-mode .chart-controls-bar { /* pin to the iframe's bottom edge deterministically — TV's JS sets an inline `top` from its own layout pass; author !important beats inline, so the peek geometry never depends on when that pass ran */ top: auto !important; bottom: 0 !important; transition: transform 240ms cubic-bezier(0.25, 1, 0.5, 1); } /* reveal while hovered or while any control inside holds keyboard focus */ html.zen-mode .chart-controls-bar:hover, html.zen-mode .chart-controls-bar:focus-within { transform: translateY(-33px); } }