/* * chart-readout.css * Gideonite — P6.53 (chart header hover-readout pills) * * The one-line OHLC readout in the chart card header renders each value as a * soft-tinted pill (label + price sharing the pill), matching the trade-plan * `tp-pill` treatment. OHLC use semantic colours (High = success, Low = * danger, Close = by direction, Open/Vol = neutral); the overlays keep their * line colours (VWAP amber, 9EMA violet, PM High grey, HOD coral, Ignition * info). In (not a body ) because `layout extractStyles` would * otherwise drop it. Scoped by .rdo- classes; harmless globally. */ .gd-readout { gap: 0.28rem; /* Single non-wrapping line (see the container's flex-nowrap): the OHLC pills stay pinned left and the row scrolls horizontally on overflow rather than dropping pills to a second line. Thin, unobtrusive bar. */ scrollbar-width: thin; } .rdo-time { font-weight: 600; color: var(--phoenix-emphasis-color, var(--bs-emphasis-color)); white-space: nowrap; flex: 0 0 auto; } .rdo-pill { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.1rem 0.45rem; border-radius: 0.5rem; line-height: 1.35; white-space: nowrap; /* Never shrink — keep full size and let the row scroll instead. */ flex: 0 0 auto; } .rdo-pill__label { font-weight: 700; } .rdo-pill__value { font-weight: 600; } /* ── semantic tints (theme-adaptive via Phoenix/Bootstrap tokens) ────────── First background-color is the full-strength fallback; the second softens the wash ~60% where color-mix is supported, matching tp-pill. */ .rdo-pill--neutral { background-color: var(--phoenix-secondary-bg-subtle, var(--bs-secondary-bg-subtle)); background-color: color-mix(in srgb, var(--phoenix-secondary-bg-subtle, var(--bs-secondary-bg-subtle)) 60%, transparent); color: var(--phoenix-secondary-color, var(--bs-secondary-color)); } .rdo-pill--success { background-color: var(--phoenix-success-bg-subtle, var(--bs-success-bg-subtle)); background-color: color-mix(in srgb, var(--phoenix-success-bg-subtle, var(--bs-success-bg-subtle)) 60%, transparent); color: var(--phoenix-success-text-emphasis, var(--bs-success-text-emphasis)); } .rdo-pill--danger { background-color: var(--phoenix-danger-bg-subtle, var(--bs-danger-bg-subtle)); background-color: color-mix(in srgb, var(--phoenix-danger-bg-subtle, var(--bs-danger-bg-subtle)) 60%, transparent); color: var(--phoenix-danger-text-emphasis, var(--bs-danger-text-emphasis)); } .rdo-pill--warning { background-color: var(--phoenix-warning-bg-subtle, var(--bs-warning-bg-subtle)); background-color: color-mix(in srgb, var(--phoenix-warning-bg-subtle, var(--bs-warning-bg-subtle)) 60%, transparent); color: var(--phoenix-warning-text-emphasis, var(--bs-warning-text-emphasis)); } .rdo-pill--info { background-color: var(--phoenix-info-bg-subtle, var(--bs-info-bg-subtle)); background-color: color-mix(in srgb, var(--phoenix-info-bg-subtle, var(--bs-info-bg-subtle)) 60%, transparent); color: var(--phoenix-info-text-emphasis, var(--bs-info-text-emphasis)); } .rdo-pill--primary { background-color: var(--phoenix-primary-bg-subtle, var(--bs-primary-bg-subtle)); background-color: color-mix(in srgb, var(--phoenix-primary-bg-subtle, var(--bs-primary-bg-subtle)) 60%, transparent); color: var(--phoenix-primary-text-emphasis, var(--bs-primary-text-emphasis)); } /* ── custom line colours (no theme token pair) ─ hex text + translucent wash; the tints read on both light and dark backgrounds. */ .rdo-pill--ema { color: #8b5cf6; background-color: rgba(139, 92, 246, 0.15); } .rdo-pill--hod { color: #e5603b; background-color: rgba(229, 96, 59, 0.15); } .rdo-pill--pmh { color: #8a94a4; background-color: rgba(138, 148, 164, 0.16); }