New table column order
Table groups and colouring
Chance of rain column
This commit is contained in:
fraxle
2026-05-24 11:41:13 +01:00
parent 0853b9852b
commit d7bfaf11b6
6 changed files with 282 additions and 194 deletions
+58
View File
@@ -710,6 +710,64 @@
border-left: 2px solid rgba(74, 50, 24, 0.18);
}
/* ── COLUMN GROUP COLOURS — header cell tints per group ─────────────────
Each grp-* class gives the th a distinct background + text colour.
The hover state darkens slightly. The col-unit underneath inherits
a matching accent colour. */
.utci-table th.grp-felt { background: #dff3ec; color: #075c3a; }
.utci-table th.grp-surface { background: #ddeaf8; color: #0b3e72; }
.utci-table th.grp-ambient { background: #eceae3; color: #3c3a35; }
.utci-table th.grp-precip { background: #f7e4ee; color: #6b1e3a; }
.utci-table th.grp-sky { background: #eae8fc; color: #352e7a; }
.utci-table th.grp-wind { background: #fae6e0; color: #6a2210; }
.utci-table th.grp-airqual { background: #e5f0d8; color: #244408; }
.utci-table th.grp-solar { background: #faeacc; color: #5a3004; }
.utci-table th.grp-felt.col-info-th:hover { background: #c8ead9; }
.utci-table th.grp-surface.col-info-th:hover { background: #c5d9f0; }
.utci-table th.grp-ambient.col-info-th:hover { background: #d8d6ce; }
.utci-table th.grp-precip.col-info-th:hover { background: #eecfdf; }
.utci-table th.grp-sky.col-info-th:hover { background: #d4d0f5; }
.utci-table th.grp-wind.col-info-th:hover { background: #f0cfc5; }
.utci-table th.grp-airqual.col-info-th:hover { background: #d0e4bc; }
.utci-table th.grp-solar.col-info-th:hover { background: #f0d5a8; }
.utci-table th.grp-felt .col-unit { color: #0f9e63; }
.utci-table th.grp-surface .col-unit { color: #2672c8; }
.utci-table th.grp-ambient .col-unit { color: #7a7870; }
.utci-table th.grp-precip .col-unit { color: #b03060; }
.utci-table th.grp-sky .col-unit { color: #6058c8; }
.utci-table th.grp-wind .col-unit { color: #b04030; }
.utci-table th.grp-airqual .col-unit { color: #4a8018; }
.utci-table th.grp-solar .col-unit { color: #b07820; }
/* ── GROUP LABEL ROW — spans above the column header row ────────────────
A second tr in the thead. Each cell spans all visible columns in its
group. The Hour column gets a blank matching-background cell. */
.grp-label-row th {
font-family: Manrope, sans-serif;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.10em;
padding: 4px 8px 2px;
text-align: center;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.grp-label-hour { background: #f0e4c4; }
.grp-label-felt { background: #dff3ec; color: #075c3a; border-left: 2px solid rgba(74,50,24,0.18); }
.grp-label-surface { background: #ddeaf8; color: #0b3e72; border-left: 2px solid rgba(74,50,24,0.18); }
.grp-label-ambient { background: #eceae3; color: #3c3a35; border-left: 2px solid rgba(74,50,24,0.18); }
.grp-label-precip { background: #f7e4ee; color: #6b1e3a; border-left: 2px solid rgba(74,50,24,0.18); }
.grp-label-sky { background: #eae8fc; color: #352e7a; border-left: 2px solid rgba(74,50,24,0.18); }
.grp-label-wind { background: #fae6e0; color: #6a2210; border-left: 2px solid rgba(74,50,24,0.18); }
.grp-label-airqual { background: #e5f0d8; color: #244408; border-left: 2px solid rgba(74,50,24,0.18); }
.grp-label-solar { background: #faeacc; color: #5a3004; border-left: 2px solid rgba(74,50,24,0.18); }
/* ── FILTER PROFILES + COLUMN TOGGLES — mobile fixes ───────────────── */
@media (max-width: 640px) {