/* switcher.css — the in-page symbol switcher (switcher.js). * * Scoped entirely to .sw-* / #sw-pop, and inert until switcher.js builds the popover on first open, * so this file can be linked unconditionally from index.html without touching the page it sits on. * * Every colour is a chart.css token (--bg --panel --panel-2 --fg --muted --border --accent --pos * --neg --hover), which is what makes light mode free: :root[data-theme="light"] redefines them and * nothing here needs a second rule. The one literal is the favourite star — there is no --warn on * this page, and #f0b90b reads as gold against both --panel values. */ /* ---- trigger (#coin + its caret) --------------------------------------------------------- #coin keeps its existing .coin type styling; this only adds the affordance. The caret is a SIBLING span, never a child (chart.js overwrites #coin's textContent on every boot) and never a button (.tb-left is align-items:baseline, which seats a tall control on the price's baseline). */ .sw-trigger { cursor: pointer; border-radius: 5px; padding: 1px 4px; margin-left: -4px; transition: background 0.12s ease; } .sw-trigger:hover { background: var(--hover); } .sw-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sw-caret { cursor: pointer; color: var(--muted); font-size: 10px; line-height: 1; margin-left: -4px; user-select: none; } .sw-trigger:hover + .sw-caret, .sw-caret:hover { color: var(--fg); } /* ---- an in-place coin switch that is still loading (chart.js switchCoin) ---- #coin already names the NEW symbol while the old chart stays live below it: the label says "on its way" by pulsing, and the chart dims only after 150 ms with nothing landed (a cached coin commits before that, so it never flickers). Motion off under prefers-reduced-motion. */ #coin.coin-pending { animation: coin-pending 0.9s ease-in-out infinite alternate; } @keyframes coin-pending { from { opacity: 1; } to { opacity: 0.45; } } #stage.coin-loading #chart { opacity: 0.55; transition: opacity 0.18s ease; } @media (prefers-reduced-motion: reduce) { #coin.coin-pending { animation: none; opacity: 0.6; } #stage.coin-loading #chart { transition: none; } } /* ---- popover ---- position:fixed and parented to : #topbar is only 48px tall and establishes a stacking context (z-index:30), so an absolutely-positioned child would be clipped by the bar it hangs off. z-index 58 puts it over the chart menu (40) and the selection bar (55) but under the Indicators modal overlay (60) — which can never be open at the same time, since '/' returns while it owns the keyboard. */ .sw-pop { display: none; position: fixed; z-index: 58; width: min(400px, calc(100vw - 16px)); max-height: min(560px, calc(100vh - 80px)); flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); overflow: hidden; } .sw-pop.on { display: flex; } .sw-head { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); } .sw-input { width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 13px; } .sw-input::placeholder { color: var(--muted); } .sw-input:focus { outline: none; border-color: var(--accent); } /* Kind chips — All / Crypto / HIP-3, the filterAssets `kind` argument. HIP-3 is a real partition of the universe (a builder-dex coin is dex-qualified, e.g. xyz:TSLA), not a cosmetic tag. */ .sw-kinds { display: flex; gap: 6px; } .sw-kind { flex: 1; background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .sw-kind:hover { color: var(--fg); border-color: var(--muted); } .sw-kind.active { color: #fff; background: var(--accent); border-color: var(--accent); } .sw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* a flick at the end of the list must not pan the chart behind it */ padding: 4px 10px 8px; } .sw-list::-webkit-scrollbar { width: 9px; } .sw-list::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 5px; } /* ---- one asset row ---- Deliberately the same three-column shape and the same class vocabulary as the extension's asset-search rows (as-row/as-sym/as-name/as-chg/as-price/as-vol/tc-star), prefixed sw- so the two surfaces read identically without colliding with chart.css. */ .sw-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; } .sw-row:first-child { border-top: none; } .sw-section + .sw-row { border-top: none; } /* Hover and keyboard selection paint the SAME way on purpose: focus never leaves the search input (switcher.js rule 2), so .active is the only thing telling you what ⏎ will open. */ .sw-row:hover, .sw-row.active { background: var(--hover); } /* The /assets-failed fallback: symbol only, because price and volume are exactly what we lost. */ .sw-row-bare { grid-template-columns: 1fr; } .sw-star { flex: none; background: none; border: none; padding: 0; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; } .sw-star.on, .sw-star:hover { color: #f0b90b; } .sw-main { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; } .sw-sym { font-weight: 600; white-space: nowrap; } .sw-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } /* Right column: price primary on top, rolling-24h volume secondary below. */ .sw-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; } .sw-pxrow { display: flex; align-items: baseline; gap: 6px; } .sw-price { font-weight: 600; white-space: nowrap; } .sw-chg { white-space: nowrap; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } /* switcher.js keeps ONE badge node per row and toggles `hidden`, so a stats landing can patch it in place (its rule 7). Spelled out because an author `display` on .sw-chg would silently beat the UA's [hidden] rule and leave an empty pill. */ .sw-chg[hidden] { display: none; } .sw-chg.pos { color: var(--pos); } .sw-chg.neg { color: var(--neg); } .sw-vol { white-space: nowrap; font-size: 11px; } /* Section headers (Recent / ★ Favourites / All) — browse mode only; a query renders one flat list. */ .sw-section { padding: 10px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .sw-note { padding: 14px 4px; font-size: 12px; } /* Footer: the keyboard hint normally, and the honest reason plus a Retry when a route failed. It is a strip rather than a toast because it must survive the re-render every keystroke causes. */ .sw-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--border); background: var(--panel-2); font-size: 11px; } .sw-err { color: var(--neg); flex: 1; min-width: 0; } .sw-retry { margin-left: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } .sw-retry:hover { border-color: var(--accent); } /* ---- touch build (?mobile=1) ---- A bottom-anchored sheet rather than a dropdown under a 17px word, and 16px on the input: below 16px iOS Safari zooms the viewport on focus, and this page sets overflow:hidden, so there is no way to scroll back. Same rule the rest of chart.css's body.mobile block follows. */ body.mobile .sw-pop { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 78vh; border-radius: 14px; } body.mobile .sw-input { font-size: 16px; padding: 10px 11px; } body.mobile .sw-kind { padding: 9px 8px; font-size: 13px; } body.mobile .sw-row { padding: 11px 4px; } body.mobile .sw-star { font-size: 18px; padding: 0 4px; } body.mobile .sw-caret { font-size: 12px; } /* ---- grid pane (?embed=1) ---- A pane can be ~300px wide and ~200px tall, and the popover is anchored to a #coin that is a few pixels from the pane's top-left. Cap it to the pane so it can never render mostly off-frame; the iframe clips anything wider whatever the fixed left/top switcher.js computed. */ html[data-embed="1"] .sw-pop { width: min(400px, calc(100vw - 12px)); max-height: calc(100vh - 44px); }