Updated At A Glance - re-order and add category colour shades
Pets image
This commit is contained in:
fraxle
2026-07-09 20:16:10 +01:00
parent aee039ad61
commit fb8547c8b8
4 changed files with 68 additions and 20 deletions
+24
View File
@@ -1726,6 +1726,19 @@
padding-bottom: 0;
}
/* Group-tinted rows remove the divider border since the background pill
provides the visual separation. */
.insight-row--felt,
.insight-row--surface,
.insight-row--ambient,
.insight-row--precip,
.insight-row--sky,
.insight-row--wind,
.insight-row--airqual,
.insight-row--solar {
border-bottom: none;
}
.insight-icon {
width: 20px;
text-align: center;
@@ -1807,6 +1820,17 @@
font-weight: 700;
}
/* Group-tinted backgrounds for insight rows — very light shade matching
the column group colour so items feel categorised at a glance. */
.insight-row--felt { background: rgba(223,243,236,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
.insight-row--surface { background: rgba(221,234,248,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
.insight-row--ambient { background: rgba(236,234,227,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
.insight-row--precip { background: rgba(247,228,238,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
.insight-row--sky { background: rgba(234,232,252,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
.insight-row--wind { background: rgba(250,230,224,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
.insight-row--airqual { background: rgba(229,240,216,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
.insight-row--solar { background: rgba(250,234,204,0.50); margin: 0 -10px; padding: 5px 10px; border-radius: 6px; }
/* ── Wide screens - the rail is narrow (240px), so stack each value
beneath its label instead of letting long values overflow sideways.
Mobile keeps the inline label/value layout (plenty of width there). */