5.5
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:
+102
-8
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user