/* timeseries.css -- media-viewer wrapper (graph-native chrome on white). Section-by-section rationale: team-history/styles/timeseries-css.md. Source of truth: team-history/styles/timeseries.css; deployed copy: Public/assets/timeseries.css. */ /* Page */ html, body { margin: 0; background: #fff; } /* Viewer column -- centred; width from the desktop fill rule below (1120 fallback). #262626 == the SVG title colour (Darker[Gray,.7]), so all chrome matches the graph. */ .viewer { position: relative; container-type: inline-size; /* size .peers/.nav in cqi (see below) */ max-width: 1120px; margin: 0 auto; padding: .4em .4em .8em; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #262626; } /* Graph -- SVG fills the column, height follows aspect ratio. position: relative so the chevrons centre on the graph (see below). .graph svg mirrors .graph img everywhere: viewer.js swaps the static img for the same SVG inlined (time-series hover highlight). */ .graph { position: relative; } .graph img, .graph svg { display: block; width: 100%; height: auto; } /* Time-series hover highlight (viewer.js on TimeSeriesTag.wl groups) -- inert elsewhere: only tagged inline time-series SVGs have ts-* nodes. */ .ts-dim .ts-line, .ts-dim .ts-dots, .ts-dim .ts-lbl { opacity: .6; } .ts-dim .ts-on { opacity: 1; } .ts-lbl { cursor: default; } /* Peer switcher -- graph-native caption at the footer-nav size; half a line-height below the graph. Blue on hover (matches squad-history); no underline needed. Size in cqi so it tracks the graph (1.4cqi == the SVG title's 14pt/1000 width). */ .peers { text-align: center; font-size: clamp(0.82rem, 1.4cqi, 1.6rem); color: #555; margin-top: .6em; margin-top: .5lh; padding-bottom: .1em; } .peers b { color: #262626; } /* active graph, no link */ .peers a { color: #575757; text-decoration: none; } /* darker than the muted default */ .peers a:hover { color: blue; } /* Prev/next season -- faint chevrons in the side margin, positioned within .graph. top is 24cqw: a fixed offset from the graph TOP (constant per window, unlike the graph height), so the chevron does NOT jitter as you step seasons. 24cqw == 24% of the column width ~= half a median-aspect graph's height, so it is also roughly centred at any window size -- exactly centred only for the median aspect; taller/ shorter seasons sit a little off, the accepted price of no jitter. rem (not em) on the horizontal offset: .step's own font is 2.4em, so an em offset would be 2.4x too big; -2rem clears the image by ~1em (past the y-axis title). */ .step { position: absolute; top: 24cqw; transform: translateY(-50%); font-size: 2.4em; line-height: 1; color: #bcbcbc; text-decoration: none; } .step:hover { color: blue; } .step.prev { left: -2rem; } .step.next { right: -2rem; } /* Footer nav -- title-consistent gray on white (no panel), sized near the SVG title; earliest/prev in the left corner, next/last in the right, index+season centred. */ .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; column-gap: 1em; margin-top: .55em; font-size: clamp(0.82rem, 1.4cqi, 1.6rem); } .nav .nleft { text-align: left; } /* center title ~30% larger than the side links. Header (.nav.top) keeps the grid's align-items:baseline, so the larger title shares the bottom line and grows upward, away from the graph below it. Footer aligns tops instead (align-items:start), so its larger title grows downward, away from the graph above it -- the requested footer treatment. */ .nav .ncenter { text-align: center; font-size: 1.3em; } .nav .nright { text-align: right; } .nav:not(.top) { align-items: start; } .nav a { color: #262626; text-decoration: none; } .nav a:hover { color: blue; } /* Header copy of the nav (above the graph): a stationary set of the same season links, so navigation never jitters even as the graph height varies. */ .nav.top { margin-top: 0; margin-bottom: .35em; } /* Grid wrappers (body.grids) -- score-grid pages; see viewer-css.md. */ body.grids .nav.top .ncenter { display: none; } /* grid SVG has its own title */ /* 2 cols: display:none unplaces the center, so 3 cols would re-flow .nright into the middle auto column (centered forward link) */ body.grids .nav.top { grid-template-columns: 1fr 1fr; } body.grids .nav .ncenter { font-size: 1em; } /* center = season-link style */ /* solo chevrons: true vertical centring beside the near-square grid (grid heights barely vary season to season -- no ts jitter concern) */ body.grids .step { top: 50%; } /* corner links: NavSep is a plain collapsible space; inline (stacked-bar mode) spacing comes from this margin, reset in the side-nav block */ body.grids .nav .nleft a + a, body.grids .nav .nright a + a { margin-left: .9em; } /* No accidental selection on the chrome or the graph -- clicking a link or the image never needs to select/copy, and the stray orange highlight is noise. user-select inherits, so .graph covers the img + chevrons. Anything NOT listed here stays selectable, so a future body-text note added below the footer (for data/source notes, with copy-paste use) is selectable by default. */ .nav, .peers, .graph { -webkit-user-select: none; user-select: none; } .graph img { -webkit-user-drag: none; -webkit-touch-callout: none; } /* Desktop -- fill the window width, but cap the column so the whole graph + nav always fits the viewport (no vertical scroll). The cap is a height budget converted to a width via 1.7 (< the tallest graph's w/h, ~1.74), with ~100px reserved for the two nav rows + padding, and an absolute ceiling. The vh line is the fallback; the dvh line refines it where supported. */ @media (min-width: 641px) { /* the 100vw term always leaves >=2.5em margin each side so the moved-out chevrons (-2rem) never clip off-screen when the column fills the window. */ .viewer { max-width: min(1600px, calc((100vh - 100px) * 1.7), calc(100vw - 5em)); } .viewer { max-width: min(1600px, calc((100dvh - 100px) * 1.7), calc(100vw - 5em)); } } /* Narrow screens -- viewport-width gate ONLY (never pointer/hover; see viewer-css.md). Wide graph scrolls rather than shrinking; chevrons fold; nav stacks centred. */ @media (max-width: 640px) { .graph { overflow-x: auto; } .graph img, .graph svg { width: auto; min-width: 640px; } .step { display: none; } /* solo chevrons off on mobile; header/footer nav steps seasons */ .nav { grid-template-columns: 1fr; row-gap: .25em; } .nav .nleft, .nav .ncenter, .nav .nright { text-align: center; } /* re-stack the 2-col grids header (later rule, same specificity) */ body.grids .nav.top { grid-template-columns: 1fr; } } /* Grid wrappers, wide view -- side nav (>=1000px: desktop + iPad landscape; iPad portrait tops out at 834px and keeps the stacked bars). Corner links move into gutters beside the near-square grid; the viewer column is height-budgeted per page via the emitted --gw/--gh variables. Mechanics and knobs: viewer-css.md. */ @media (min-width: 1000px) { body.grids .viewer { display: grid; /* graph column is the driven track: viewport height minus a reserve for the below-graph chrome, whose title-matched font scales as 1/--gh (~3.5 text lines; 47 = 3.5 x 13.333; the clamp mirrors the font floor/ceiling). The gutters flex and give way FIRST as the window narrows, flooring at their content width -- only then does the graph start shrinking. Derivation: viewer-css.md. */ grid-template-columns: minmax(min-content, 1fr) minmax(0, min(1600px, calc( (100vh - 28px - clamp(46px, (100vh - 74px) * 47 / var(--gh, 660), 90px)) * var(--gw, 640) / var(--gh, 660)))) minmax(min-content, 1fr); grid-template-columns: minmax(min-content, 1fr) minmax(0, min(1600px, calc( (100dvh - 28px - clamp(46px, (100dvh - 74px) * 47 / var(--gh, 660), 90px)) * var(--gw, 640) / var(--gh, 660)))) minmax(min-content, 1fr); grid-template-rows: auto 1fr auto auto auto; column-gap: 1em; max-width: calc(100vw - 2em); } body.grids .nav { display: contents; } /* corner spans become .viewer grid items */ body.grids .graph { grid-column: 2; grid-row: 1 / 4; } body.grids .nav.top .nleft { grid-column: 1; grid-row: 1; } body.grids .nav.top .nright { grid-column: 3; grid-row: 1; } body.grids .nav:not(.top) .nleft { grid-column: 1; grid-row: 3; align-self: end; } body.grids .nav:not(.top) .nright { grid-column: 3; grid-row: 3; align-self: end; } body.grids .peers { grid-column: 1 / -1; grid-row: 4; } /* full width: fewer wraps */ body.grids .nav:not(.top) .ncenter { grid-column: 2; grid-row: 5; margin-top: .4em; } /* corner links hug the graph: the padding clears the -2rem solo chevron */ body.grids .nav .nleft { text-align: right; padding-right: 1.4rem; } body.grids .nav .nright { text-align: left; padding-left: 1.4rem; } /* stacked corner links: flex columns with +30% inter-row air (row-gap only separates rows, keeping the outer row on the svg edge line). Near step (prev/next) sits closest to the svg, far jump (first/last) outward: DOM order (far-first left, near-first right) already fits top-left and bottom-right; the other two reverse. Safe: NavSep spaces leave no anonymous flex items. */ body.grids .nav .nleft, body.grids .nav .nright { display: flex; flex-direction: column; row-gap: .36em; } body.grids .nav.top .nright, body.grids .nav:not(.top) .nleft { flex-direction: column-reverse; } /* a lone far-jump link keeps its outer (top) slot: pack to main-end, the visual top under column-reverse. The bottom blocks already pack outward via align-self: end (content-height box at the row bottom). */ body.grids .nav.top .nright { justify-content: flex-end; } /* nav + peers at the in-image title size (13.333 SVG units = cornerFontSize 10 x the 4/3 magnifier): rendered title px = displayed graph width x 13.333/--gw, mirroring the three graph-width bounds */ body.grids .nav, body.grids .peers { font-size: clamp(0.82rem, min( calc(1600px * 13.333 / var(--gw, 640)), calc((100vh - 28px - clamp(46px, (100vh - 74px) * 47 / var(--gh, 660), 90px)) * 13.333 / var(--gh, 660)), calc((100cqi - 18rem) * 13.333 / var(--gw, 640))), 1.6rem); font-size: clamp(0.82rem, min( calc(1600px * 13.333 / var(--gw, 640)), calc((100dvh - 28px - clamp(46px, (100dvh - 74px) * 47 / var(--gh, 660), 90px)) * 13.333 / var(--gh, 660)), calc((100cqi - 18rem) * 13.333 / var(--gw, 640))), 1.6rem); } /* corner links stack; the plain-space separators collapse away */ body.grids .nav .nleft a, body.grids .nav .nright a { display: block; } body.grids .nav .nleft a + a, body.grids .nav .nright a + a { margin-left: 0; } }