From 1459740d962f0964589afe7f82bb508060d69414 Mon Sep 17 00:00:00 2001 From: fraxle Date: Sun, 7 Jun 2026 01:44:53 +0100 Subject: [PATCH] 2.9 Scope weather effects Scope objects Scope selection changes --- assets/css/header.css | 12 +- assets/css/table.css | 26 ++- assets/js/app.js | 6 +- assets/js/components.js | 346 ++++++++++++++++++++++++++++++-- assets/js/components/DayTabs.js | 1 + scope-cell.html | 4 +- scope-lab.html | 88 ++++---- 7 files changed, 411 insertions(+), 72 deletions(-) diff --git a/assets/css/header.css b/assets/css/header.css index f6885d0..4b07dc4 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -252,7 +252,7 @@ transition: background 0.15s, border-color 0.15s, color 0.15s; } .scope-play:hover { - background: rgba(200, 146, 42, 0.18); + background: rgba(16, 10, 3, 0.8); border-color: rgba(200, 146, 42, 0.85); color: #f5edd6; } @@ -263,19 +263,19 @@ color: #ffd98a; } .scope-play.is-playing:hover { - background: #2e1d0a; + background: #160d03; color: #ffe6b0; } .scope-play-icon { font-size: 9px; line-height: 1; } -/* While playing, the simulated clock is the main readout — big, bright and - monospaced so the digits don't jitter as they tick. */ +/* While playing, the simulated clock is the readout — same size as the idle + label, but monospaced + tabular so the digits don't jitter as they tick. */ .scope-play.is-playing .scope-play-label { font-family: 'JetBrains Mono', ui-monospace, monospace; - font-size: 15px; + font-size: 11px; font-weight: 700; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; - min-width: 52px; + min-width: 40px; text-align: center; color: #ffd98a; } diff --git a/assets/css/table.css b/assets/css/table.css index 237c176..8a384cb 100644 --- a/assets/css/table.css +++ b/assets/css/table.css @@ -103,10 +103,28 @@ border-left: none; } -/* Each tab's background is an inline per-day weather gradient, so we darken - the whole tab with a filter on hover (!important to beat the inline filter). */ -.utci-day-tab:hover { - filter: brightness(0.93) !important; +/* The selected-tab background is a different gradient (radial vs linear), and + CSS can't tween between gradients — so we paint the active gradient as an + overlay pseudo-element behind the tab content and fade its opacity on hover. + z-index:-1 keeps it above the tab's own background but below the labels. */ +.utci-day-tab::before { + content: ''; + position: absolute; + inset: 0; + background: var(--w-bg-active); + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; + z-index: -1; +} + +/* On hover, a non-active tab fades in the selected gradient + filter so it + previews the selected shade (!important to beat the inline filter). */ +.utci-day-tab:hover:not(.active)::before { + opacity: 1; +} +.utci-day-tab:hover:not(.active) { + filter: saturate(1.1) brightness(1.04) !important; } .utci-day-tab.active { diff --git a/assets/js/app.js b/assets/js/app.js index 623f0ab..d583ecf 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -526,11 +526,15 @@ export function UTCIForecast() { precip=${scopeRow?.precip ?? 0} snow=${scopeRow?.snow ?? 0} visKm=${scopeRow?.visKm ?? null} + env=${utciEnv} + wind=${scopeRow?.va ?? 0} + gust=${scopeRow?.gust ?? 0} + wd=${scopeRow?.wd ?? null} /> ${hourlyRows.length > 0 && html`