New big and small scope sunset and sunrise simulation
New calculations for the day tabs
Added missing icons to simple view
New record popups
Week ahead description popups
Camping profile
Tweak to some of the indoor tems
This commit is contained in:
fraxle
2026-10-08 09:53:41 +01:00
parent 71860b9dd9
commit 862f631beb
22 changed files with 2169 additions and 429 deletions
+102 -8
View File
@@ -735,10 +735,12 @@
}
.utci-thead-sticky {
position: sticky;
/* Clears the profile row pinned above it. DayTabs measures that row and
publishes its height (+ its 4px margin) as --profile-row-h — it is one
line or two depending on the labels, and the old fixed 28px left the
table header tucked under it. */
/* Sits flush under the profile row pinned above it. DayTabs measures that
row and publishes its height as --profile-row-h — it is one line or two
depending on the labels, and the old fixed 28px left the table header
tucked under it. The offset is the row's exact height, so the two bands
butt together; any padding here shows as a strip of the scrolling page
between them. */
top: var(--profile-row-h, 52px) !important;
z-index: 10;
}
@@ -1749,6 +1751,36 @@
animation: popup-open-below 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
/* ── WEEK AHEAD ROW POPUP ───────────────────────────────────────────────
Replaces the desktop-only `title=` tooltips the Week Ahead rows used to
carry: tap/click a row to open this. Reuses the .col-info-popup shell. */
.col-info-popup--week { width: 240px; }
.col-info-desc--lead {
margin-bottom: 8px;
font-weight: 600;
color: #4a3420;
}
.week-popup-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
}
.week-popup-list li {
display: grid;
grid-template-columns: 18px 1fr;
column-gap: 8px;
align-items: start;
font-family: Manrope, sans-serif;
font-size: 12px;
line-height: 1.45;
color: #6b4f2a;
}
.week-popup-icon { text-align: center; }
/* ── EVENT TAG POPUP — SLIDESHOW ────────────────────────────────────────
The stage holds the current slide. On transition, evTransition is set
to 'exiting' (fade out) then 'entering' (fade in) via the hook. */
@@ -1757,6 +1789,12 @@
.ev-popup-stage {
transition: opacity 0.38s ease;
/* Shrinkable and scrollable, so a long message runs out of room inside the
stage rather than pushing the Quick Record button below it out of the
card's 260px cap. min-height:0 because a flex item won't otherwise
shrink past its content. */
min-height: 0;
overflow-y: auto;
}
.ev-popup-entering {
animation: ev-fade-in 0.38s ease both;
@@ -1765,6 +1803,43 @@
animation: ev-fade-out 0.38s ease both;
}
/* Quick Record — sends the event showing to the journal (see quickRecord in
app.js). Same pill as the event banner's, sized for this popup: full-width
so it reads as the panel's action rather than a stray chip, and outside the
crossfading stage so it stays put while the events cycle. Never shrinks, so
it survives a long message scrolling inside .col-info-desc. */
.ev-popup-record {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
flex: 0 0 auto;
margin-top: 10px;
padding: 6px 10px;
border: 1px solid rgba(200, 146, 42, 0.45);
border-radius: 999px;
background: rgba(200, 146, 42, 0.13);
font-family: Manrope, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8a6414;
line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ev-popup-record:hover {
background: rgba(200, 146, 42, 0.28);
border-color: rgba(200, 146, 42, 0.75);
color: #6b4a0c;
}
.ev-popup-record:focus-visible {
outline: 2px solid #c8922a;
outline-offset: 1px;
}
/* Slideshow navigation dots */
.ev-popup-dots {
display: flex;
@@ -2623,6 +2698,17 @@
.fsc-card--now .fsc-time {
color: #c8922a;
}
/* Event emojis: centred row under the time. Fixed height so cards without
events (which still render an empty row) match those with them. */
.fsc-ev-row {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 16px;
margin: -2px 0;
white-space: nowrap;
}
.fsc-feel {
font-family: Manrope, sans-serif;
@@ -2694,9 +2780,16 @@
88px. It must not be flexible: the connector lines are drawn from the SVG's
top edge and have to stay flush under the cards, so any height the box does
not get is height the cold end loses off the bottom. */
/* Width: 0 + min-width: 100% rather than width: 100%. The SVG's viewBox gives
it an intrinsic width of height × 1000/80 (1100px at 88px), and inside the
max-content .forecast-simple-inner that set the row's minimum width — so at
3h/4h, where the cards need far less, they were stretched apart to 1100px
and the panel scrolled. This way only the cards size the row; the curve
just fills whatever width they settle on. */
.fsc-temp-curve {
display: block;
width: 100%;
width: 0;
min-width: 100%;
flex: 0 0 auto;
height: 88px;
}
@@ -2915,8 +3008,9 @@
.utci-table.utci-table-rotated tbody td.grp-label-fill {
padding: 5px 0;
min-width: 0;
background-color: #f0e4c4;
background-image: linear-gradient(var(--grp-tint, transparent), var(--grp-tint, transparent));
/* White across the hour columns - only the pinned group label keeps the
category shade. */
background: #ffffff;
/* One rule, along the very top of the category block — the same 2px
rgba(74,50,24,0.18) the unrotated table draws down the left of each new
column group (.col-group-start), so a group boundary looks the same
@@ -2925,7 +3019,7 @@
as a double rule around the label. Every cell in the row carries the edge
— under border-collapse:separate a <tr> border never paints, so the row's
rule has to be drawn cell by cell (see the row-separator rule above). */
border-top: 2px solid rgba(74, 50, 24, 0.18);
border-top: 2px solid #ffffff; /* white under the hour columns; the label keeps its shaded rule */
border-bottom: 0;
}