/* The price chart and its four spans. Values are the legacy `TradeLineChart.vue`'s `.segmentation-button`, `.chart-wrapper` and `.chart-skeleton` blocks. */ .symbol-chart { width: 100%; } /* --- The four spans --- */ /* Switching spans is this section's island. Without it the buttons cannot do anything, so they are not offered and the table below stands alone — the call the price table's toolbar already makes. (The landing page's PnL ranges do not do this and show four dead buttons without scripting; that is older and left alone here.) `js` is set on by an inline script in head.hbs before anything paints, so they never flash. */ .symbol-chart-ranges { display: none; } /* Full-width buttons sharing the row on a phone, shrink-wrapped from 600px up — the legacy's own two-step. */ .js .symbol-chart-ranges { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; overflow: hidden; } .symbol-chart-range { width: 100%; min-height: 30px; padding: 4px 10px; border: 1px solid var(--gray-200); border-radius: 8px; background-color: var(--white); color: var(--gray-700); font-size: 16px; font-weight: 400; /* `font: inherit` in the global reset carries the page's 1.6 line height into every button; the legacy leaves these at the browser's `normal`, which is what sizes them — the same correction the price table's sort buttons need. */ line-height: normal; transition: 0.3s all ease; } .symbol-chart-range[data-active='true'] { border-color: var(--identity); background-color: var(--low-identity); } /* --- The chart --- */ .symbol-chart-panel { position: relative; width: 100%; } /* Reserved at the height the island draws at, so the swap from placeholder to chart costs no layout shift. */ .symbol-chart-canvas { width: 100%; } /* Which of the placeholder and the table leads before the island has booted. Without JavaScript the table is the content and the placeholder must never show, since nothing will ever replace it. With JavaScript the chart is on its way, so the placeholder leads and the table waits behind it as the failure fallback. `js` is set on by an inline script in head.hbs ahead of first paint; after mounting the island's own bindings take over. */ .symbol-chart-skeleton { display: none; } .js .symbol-chart-skeleton { display: block; } .js .symbol-chart-table-scroll { display: none; } /* `.skeleton` in app.css carries the shimmer and stills itself under prefers-reduced-motion — the element wears that class, so this only gives it the chart's shape. No background of its own: the legacy chart placeholder is a moving gradient band, not a flat fill, and a colour here would only sit behind the one `.skeleton` paints. */ .symbol-chart-skeleton { height: 350px; margin-top: 20px; border-radius: 12px; } /* --- The table behind it --- */ /* A month of rows is taller than the chart it stands in for, so it scrolls in its own box rather than pushing the prices below it down the page. */ .symbol-chart-table-scroll { max-height: 350px; margin-top: 20px; overflow-y: auto; } .symbol-chart-table { width: 100%; border-collapse: collapse; } .symbol-chart-table-caption { padding-bottom: 8px; color: var(--gray-900); font-size: 14px; font-weight: 700; text-align: right; } .symbol-chart-table th, .symbol-chart-table td { padding: 8px; border-bottom: 1px solid var(--gray-100); color: var(--gray-900); font-size: 14px; font-weight: 400; text-align: right; } .symbol-chart-table thead th { position: sticky; top: 0; background-color: var(--gray-0); font-weight: 600; } @media (min-width: 600px) { .js .symbol-chart-ranges { justify-content: start; } .symbol-chart-range { width: fit-content; } }