/* Alpha trendline chart page — dark theme (default) + a light theme under [data-theme="light"]. Nearly all chrome reads these vars, so the light override below re-themes the DOM for free; the lightweight-charts canvas + a few canvas-drawn chips are re-themed in chart.js (THEME/applyTheme). */ :root { --bg: #131722; --panel: #1c2030; --panel-2: #222737; --fg: #d1d4dc; --muted: #787b86; --border: #2a2e39; --accent: #2962ff; --pos: #26a69a; --neg: #ef5350; --hover: rgba(255, 255, 255, 0.06); } :root[data-theme="light"] { --bg: #ffffff; --panel: #f0f3fa; --panel-2: #e0e3eb; --fg: #131722; --muted: #787b86; --border: #d1d4dc; --accent: #2962ff; --pos: #089981; --neg: #f23645; --hover: rgba(0, 0, 0, 0.05); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow: hidden; } .muted { color: var(--muted); } .hidden { display: none !important; } /* ---- top bar ---- */ #topbar { display: flex; align-items: center; gap: 12px; /* 16 until design/41 review P1-7: four gaps were the stats strip's 7th column */ height: 48px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--border); user-select: none; position: relative; /* anchor + stacking context so tool tooltips paint above the chart canvas */ z-index: 30; } .tb-left { display: flex; align-items: baseline; gap: 8px; min-width: 140px; } .coin { font-size: 17px; font-weight: 700; letter-spacing: 0.3px; } /* The instrument name beside the symbol ("US 10Y Treasury Yield"). Muted and small on purpose: it is context for a symbol you may not recognise, never a second headline competing with the price. `white-space: nowrap` because .tb-left is a flex row — a wrapped name would grow the 48px bar. */ .coin-name { font-size: 12px; color: var(--muted); white-space: nowrap; } /* Vendor-delay note, in the LIVE badge's slot. It borrows the badge's typography (10px, 700, wide tracking) so the two read as the same kind of fact about the price, and the muted colour is what distinguishes them: green means it is happening now, grey means it already happened. */ .feed-note { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: var(--muted); white-space: nowrap; } #last-price { font-variant-numeric: tabular-nums; transition: color 0.15s ease; } #last-price.up { color: var(--pos); } #last-price.down { color: var(--neg); } /* 24h change. Same green/red vars as the price, but they mean a different thing on each: on #last-price .up/.down is a transient TICK flash (up vs the previous tick), here it is the standing sign of the day's move. No `transition` for that reason — this colour should not fade between states, it should just be the sign. */ #chg24 { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); } #chg24.up { color: var(--pos); } #chg24.down { color: var(--neg); } /* Live-stream badge: a pulsing dot + LIVE, shown once the 1s trades stream is ticking. */ .live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: var(--pos); } .live-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); animation: livepulse 1.8s ease-out infinite; } @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(38, 166, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(38, 166, 154, 0); } } /* Read-only asset (a bond: no HyperLiquid market) — the class chart.js's loadAsset() puts on . The three affordances that would spend money or read an order book stop EXISTING rather than going grey: a disabled button still says "this is something you do here", which on a market you cannot trade is a promise the page cannot keep. Bookmap has no `book_samples` rows for it either way. The keyboard is refused in step (chart.js's P/O branches, bookmap.js's D handler), so there is no hidden path back to them. Everything else — drawings, setups, alerts, every candle-only overlay — is deliberately untouched: read-only is about the ORDER BOOK, not about the chart. The `:not(.bookmap)` is an escape hatch, not a nicety: that button is also the way OUT of the mode, so hiding it unconditionally would strand a hand-edited `?coin=US10Y&bookmap=1` with no exit (bookmap.js's D handler refuses to enter for the same reason, and only to enter). */ body.readonly-asset:not(.bookmap) #tool-bookmap, body.readonly-asset:not(.vbars) #tool-vbars, body.readonly-asset #tool-long, body.readonly-asset #tool-short { display: none; } /* The TF row sits LEFT, right after the symbol block, at its content width (design/41 review P1-7: centred and flex-growing it left ~170 px empty on each side at 1419 px, room the stats strip after it needed). The TOOLS take the slack (.tb-tools margin-left:auto). A phone and a /grid pane keep the row flex-growing: there it is the bar's one horizontal scroller (the mobile block + embed.css). */ .tb-center { display: flex; gap: 4px; flex: 0 0 auto; justify-content: flex-start; } body.mobile .tb-center, html[data-embed="1"] .tb-center { flex: 1 1 auto; } .tf-btn { background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; } .tf-btn:hover { color: var(--fg); background: var(--panel-2); } .tf-btn.active { color: #fff; background: var(--accent); } /* ---- floating drawing / overlay toolbar --------------------------------------------------- One uniform Lucide/Feather icon grammar (inline SVG, currentColor stroke) so .active (white-on-accent) and .hidden just work with zero JS change. Every button keeps its id + `tool` class; chart.js drives setTool/toggle by id. ---- */ .tb-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; } /* "Charts by TradingView" (#tv-attr): lightweight-charts' attribution, last in the tool cluster since the vendor logo that sat over the bottom pane's data is off (chart.js attributionLogo: false). Two muted 9px lines — present and clickable, never a competitor for the eye. */ #tv-attr { flex: 0 0 auto; display: inline-flex; flex-direction: column; justify-content: center; margin-left: 6px; color: var(--muted); font-size: 9px; line-height: 1.2; letter-spacing: .2px; white-space: nowrap; text-decoration: none; opacity: .75; } #tv-attr:hover { color: var(--fg); opacity: 1; text-decoration: underline; } #tv-attr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; } /* Group divider: subtle 1px vertical rule — isolates the pointer, splits draw vs. toggle groups. */ .tb-div { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 4px; background: var(--border); border-radius: 1px; } /* Hidden toolbar entries (trend flips / snapshots / AI assistant). They stay in the DOM on purpose — chart.js and snapshot.js select #tool-flips / #tool-snap / #tool-snap-list with the throwing `$`, and the F, N, ⇧N and C keys still drive all three — they are simply no longer offered as buttons. Delete a line here to bring one back (the trainer came back this way, as the 🎮 #tool-game beside the bell). The .tool-split wrapper needs the #topbar prefix to outrank its own `display: inline-flex` further down the file (the snapshots section). */ #tool-flips, #tool-ai, #topbar .tool-split { display: none; } .tool { position: relative; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: 1px solid transparent; /* transparent rest border = zero layout shift across states */ border-radius: 8px; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease; } .tool svg { width: 18px; height: 18px; display: block; pointer-events: none; } /* rest -> hover -> active */ .tool:hover { color: var(--fg); background: var(--panel-2); border-color: var(--border); } .tool:active { transform: translateY(.5px); } .tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .tool.active, .tool.active:hover { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 8px rgba(41, 98, 255, .35); } .tool.active:hover { filter: brightness(1.08); } /* Theme toggle: show the sun in dark mode (click → light), the moon in light mode. */ #tool-theme .theme-moon { display: none; } :root[data-theme="light"] #tool-theme .theme-sun { display: none; } :root[data-theme="light"] #tool-theme .theme-moon { display: block; } /* The two phone-only chrome buttons that flank row 1 of the mobile topbar: the iOS app's back chip and the tool-cluster disclosure trigger. Both are inert here — the extension and desktop Safari never lay them out and never paint them. #tb-back needs the RN bridge on top of that (body.inapp, set by chart.js only when window.ReactNativeWebView exists), because a back button with nowhere to go is a lie; #tool-more is revealed by the body.mobile block near the foot of this file. */ #tb-back, #tool-more { display: none; } body.inapp #tb-back { display: inline-flex; } /* The Notifications button opens /alerts/ in a NEW tab, and the iOS WebView is locked to /chart — there is no tab for it to open, so inside the app it is not offered at all (the app has its own alert screens). */ body.inapp #tool-alerts { display: none; } /* The trainer (🎮) opens /chart/?game=1 in a new tab for the same reason, and the mobile build has no trainer at all (body.mobile #tool-game, below) — this line holds even for an in-app page loaded without ?mobile=1. */ body.inapp #tool-game { display: none; } /* An emoji glyph in place of an SVG (#tool-game): sized to sit like the 18px stroke icons, and pinned to the colour-emoji faces so every OS draws the same glyph. It ignores `color`, so the rest/hover states read through the button's own background, as they do for every .tool. */ .tool .tool-emoji { font-size: 16px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; pointer-events: none; } /* Indicators = popover trigger: auto width to seat a muted chevron affordance beside the glyph. */ .tool.tool-menu { width: auto; padding: 0 7px; gap: 3px; } .tool.tool-menu .tool-caret { width: 12px; height: 12px; opacity: .6; } .tool.tool-menu:hover .tool-caret { opacity: 1; } .tool.tool-menu.active .tool-caret { opacity: 1; } /* Contextual caption (mid-draw guidance, set by setTool); fades out on the default pointer tool so "Select" never floats as a stray word. It takes NO room in the bar (design/41 review P1-7: its old reserved 132px slot was the stats strip's): a pill floated under the bar's centre, as the phone and the /grid pane already had it (those rules below / in embed.css restyle it; #topbar is position:relative). */ .tb-hint { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); max-width: 60vw; padding: 3px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); pointer-events: none; z-index: 31; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; transition: opacity .15s ease; } /* Hidden on the default pointer tool (setTool toggles `.idle`; the drawing tools now live in the #toolrail, so a `:has(#tool-pointer.active)` selector inside .tb-tools would no longer match). */ .tb-hint.idle { opacity: 0; } /* Custom tooltip: tool name + a mono keycap chip, dropped BELOW the 48px header. */ .tip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 8px; background: var(--panel-2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 500; letter-spacing: .2px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; z-index: 60; transition: opacity .12s ease, transform .12s ease; } .tip::before { /* arrow, matched to the bubble fill */ content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--panel-2); } .tip kbd { font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; min-width: 11px; text-align: center; } .tool:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .28s; } /* Right-anchored tooltips for the far-right toggle group so they can't clip the viewport edge. */ .tool.tip-right .tip { left: auto; right: 0; transform: translateX(0) translateY(-4px); } .tool.tip-right .tip::before { left: auto; right: 11px; transform: none; } .tool.tip-right:hover .tip { transform: translateX(0) translateY(0); } /* ---- vertical drawing rail (floats over the chart's left edge, drag to reposition) ---- */ #toolrail { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); /* default dock; the drag JS switches to explicit inline left/top */ z-index: 15; /* above #draw-overlay (z5) so buttons stay clickable when armed */ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); user-select: none; touch-action: none; } #toolrail-grip { display: flex; align-items: center; justify-content: center; width: 32px; height: 18px; color: var(--muted); cursor: grab; border-radius: 6px; touch-action: none; } #toolrail-grip:hover { color: var(--fg); background: var(--panel-2); } #toolrail-grip:active { cursor: grabbing; } #toolrail-grip svg { width: 18px; height: 18px; display: block; pointer-events: none; } /* Horizontal group divider for the vertical rail (the top-bar .tb-div is a vertical rule). */ .tb-div-h { flex: 0 0 auto; width: 20px; height: 1px; margin: 4px 0; background: var(--border); border-radius: 1px; } /* Tooltips open to the RIGHT of the rail (the default .tip drops below the top bar). */ #toolrail .tip { top: 50%; left: calc(100% + 9px); right: auto; transform: translateY(-50%) translateX(-4px); } #toolrail .tip::before { /* arrow on the tip's LEFT edge, pointing back at the button */ bottom: auto; left: auto; top: 50%; right: 100%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: var(--panel-2); border-bottom-color: transparent; } #toolrail .tool:hover .tip { transform: translateY(-50%) translateX(0); } /* DOCKED RAIL (design/41 review P1-6). On a desktop window >= 1280 px the rail leaves the chart and lives in its OWN gutter at the stage's left edge, TradingView's layout: floating, it covered the oldest bars of the price pane and of every sub-pane below it. #stage moves right by the gutter and narrows by it (below), so the chart (LWC autoSize), every overlay and every panel positioned in #stage keep their geometry; the rail sits at left:-gutter, outside #stage's box. The flag is html[data-rail="dock"], stamped PRE-PAINT by index.html (never on ?mobile=1 / ?embed=1 / a pop-out, which have no rail); the width test is this media query, and chart.js's railMode is the same rule (RAIL_DOCK_MIN_PX): while docked the grip is gone and a saved float position is ignored, and below 1280 px the draggable floating rail returns. No overflow scroll on the docked rail: it would clip the tooltips, which open to its right. */ :root { --rail-gutter: 0px; } @media (min-width: 1280px) { html[data-rail="dock"] { --rail-gutter: 44px; } html[data-rail="dock"] #toolrail { left: calc(-1 * var(--rail-gutter)); top: 0; bottom: 0; width: var(--rail-gutter); transform: none; padding: 6px 0; border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; } html[data-rail="dock"] #toolrail-grip { display: none; } /* The left corners stop clearing a rail that no longer covers them (60px -> the 8px edge). */ html[data-rail="dock"] #msbias-panel.pos-tl, html[data-rail="dock"] #msbias-panel.pos-bl, html[data-rail="dock"] #onebox-panel.pos-tl, html[data-rail="dock"] #onebox-panel.pos-bl { left: 8px; } } /* Docked, the "Charts by TradingView" credit (#tv-attr) leaves the bar — whose room is the stats strip's — for the gutter's empty foot, read bottom-to-top like a book's spine. `fixed` because it stays a #topbar child in the DOM (the bar's z 30 keeps it above the rail); only on a window tall enough that the tools above never reach it. */ @media (min-width: 1280px) and (min-height: 600px) { html[data-rail="dock"] #tv-attr { position: fixed; left: 0; bottom: 10px; width: var(--rail-gutter); margin: 0; flex-direction: row; align-items: center; gap: .35em; writing-mode: vertical-rl; transform: rotate(180deg); } } /* ---- stage (chart + overlay + inspector) ---- */ /* The stage gives up a LEFT gutter to the docked toolrail and a RIGHT one to whatever is docked on the right (design/42 §7): the L4 side panel, the trading dock (#rdock), the VWAP σ map, any of them side by side. Each adds its own term to --right-gutter (below: the sum is additive), so none fights another over #stage's width; LWC's autoSize and every overlay anchored to #stage keep their geometry. The /chart TAB STRIP (tabs.css, design/44) sits between #topbar and #stage; --tabs-h is its height, UNSET without tabs, so every `var(--tabs-h, 0px)` term here and in rdock.css is 0 and a page without tabs is pixel-identical. */ #stage { position: relative; height: calc(100% - 48px - var(--tabs-h, 0px)); width: calc(100% - var(--rail-gutter) - var(--right-gutter, 0px)); margin-left: var(--rail-gutter); } #chart { position: absolute; inset: 0; } #draw-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; /* enabled only while a draw tool is active */ cursor: crosshair; } #draw-overlay.armed { pointer-events: auto; } /* ---- inspector ---- */ #inspector { position: absolute; top: 12px; right: 12px; width: 248px; z-index: 10; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } .insp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .insp-head h2 { margin: 0; font-size: 13px; font-weight: 700; } /* Provenance chip: which timeframe this drawing was DRAWN on. Every drawing is now visible and editable on every timeframe, so this chip is the only thing that still carries that fact — and it is clickable (switch to that timeframe and focus the drawing). Cloned from .sd-tf, one step larger because it is a tap target rather than a label. The two font declarations are deliberately SEPARATE properties: the `font:` shorthand cannot carry `inherit` in its family slot, so `font: 700 10px inherit` is invalid and the browser drops the whole declaration — and a