/* exfoliation-kjb-spa — shell-only styles. The per-view body styles continue to come from exfoliation.css + forecast_*.css. */ /* Reserve scrollbar gutter so a vertical scrollbar appearing on a tall view (history/almanac) doesn't shrink the viewport — that's what caused the shell-header (justify-content: space-between) to shift visibly when switching from a no-scroll view to a scrolling one. */ html { scrollbar-gutter: stable; } /* Body font reset. css/gauges-ss.css ships an unscoped `body { font-family: Verdana }` rule that wins the cascade in the shell (loaded after exfoliation.css). spa.css is loaded last, so re-pinning the font here restores exfoliation.css's intended 'Open Sans' for every view regardless of which iframe-era stylesheet load order applied. */ body { font-family: 'Open Sans', arial, sans-serif; font-size: 10pt; } .spa-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #ccc; } .spa-nav { display: flex; flex-wrap: wrap; gap: 8px; } .spa-nav a { padding: 4px 10px; text-decoration: none; border: 1px solid transparent; border-radius: 4px; } .spa-nav a:hover { background: #f0f0f0; } .spa-nav a.is-active { background: #eef3ff; border-color: #b8c8ee; font-weight: 600; } main#view { /* Match the standalone exfoliation pages' default body margin (8px) so views render with the same usable horizontal width they had pre-SPA. Top padding gives breathing room from the shell-header border-bottom — without it, views whose first row is a navigation_controls strip (forecast tabs, history Day/Week/Month/ Year) sit flush against the divider. */ padding: 14px 8px 0 4px; min-height: 60vh; } /* Break margin-collapse so iconic/table panes (which open with a

) don't drag the floated nav_controls tabs an additional ~16px down — keeps the gap consistent across all four panes. */ [data-view="forecast"] #content > .fc_pane { padding-top: 1px; } .spa-loading { color: #888; font-style: italic; } .spa-error { color: #b22; } .spa-footer { border-top: 1px solid #ccc; padding: 8px 16px; font-size: 80%; color: #666; } /* Per-page styles lifted from the original index.html.tmpl block. The SPA fragment doesn't have its own , so these have to live in the shell-loaded stylesheet to keep the three-column block layout and the chart-link color coding working. */ main#view::after { content: ""; display: block; clear: both; } .block { float: left; padding-right: 50px; } .heatindex { color: #aa4444; } .windchill { color: #4444aa; } .temphi { color: #aa4444; } .templo { color: #4444aa; } .precip-img { width: 32px; } .obvis-img { width: 32px; } .pop-img { width: 8px; } .table_heading { font-size: 80%; color: #888; border-bottom: 1px solid #ccc; padding-top: 20px; } .radar { border: none; width: 480px; padding: 2px; } .zambretti { font-size: 80%; } .forecast_summary { width: 100%; } /* Pin the main metric table's outer width AND lock column widths to the header row, so the layout is stable independent of cell content. `table-layout: fixed` makes the browser size columns from the first row only — both Current and Live emit an identical header row (empty / "ACTUAL" colspan=2 / "HI/LO" / empty / "FORECAST"), so columns end up byte-for-byte equal regardless of what later rows contain (Cheetah values vs empty rtgd-* spans vs JS-populated). */ .block table.metrics { width: 460px; table-layout: fixed; } /* Mobile: unfloat the three .block columns (metrics, forecast, radar) so they stack vertically, and drop the metric table's hard 460px width so the table fits inside an iPhone-class viewport (~390px). */ @media (max-width: 480px) { .block { float: none; padding-right: 0; width: 100%; } .block table.metrics { width: 100%; table-layout: fixed; } /* On mobile we keep the explicit name-column width from desktop (100px) so labels like 'Particulates PM2.5' still fit on one line; remaining cells share the rest equally. */ .block table.metrics tr:first-child td:first-child { width: 80px; } .radar { width: 100%; height: auto; } } /* table-layout: fixed reads column widths from the first row only, then locks them. Both Current and Live emit an identical header row, so this distributes columns identically across views. Pinning the first (name) column wider lets long labels — "Solar Radiation", "Particulates PM2.5", "Cloud Base" — stay on a single line. */ .block table.metrics tr:first-child td:first-child { width: 100px; } .block table.metrics .metric_name { white-space: nowrap; } /* almanac + history want auto-sized metric tables; restore them */ [data-view="almanac"] .block table.metrics, [data-view="history"] .block table.metrics { width: auto; } /* Per-view styles lifted from each template's inline