5.1
Combine and relabel table view switch. Remove and re-arrange some table columns Group Pets together
This commit is contained in:
fraxle
+28
-52
@@ -765,11 +765,13 @@
|
||||
.active-profile-row.grp-wind { border-color: rgba(106,34,16,0.30); }
|
||||
.active-profile-row.grp-ambient { border-color: rgba(60,58,53,0.30); }
|
||||
.active-profile-row.grp-surface { border-color: rgba(11,62,114,0.30); }
|
||||
.active-profile-row.grp-pets { border-color: rgba(10,81,88,0.30); }
|
||||
|
||||
.active-profile-row.grp-felt .active-profile-row-value { color: #075c3a; }
|
||||
.active-profile-row.grp-wind .active-profile-row-value { color: #6a2210; }
|
||||
.active-profile-row.grp-ambient .active-profile-row-value { color: #3c3a35; }
|
||||
.active-profile-row.grp-surface .active-profile-row-value { color: #0b3e72; }
|
||||
.active-profile-row.grp-pets .active-profile-row-value { color: #0a5158; }
|
||||
|
||||
/* Vertical rule separating general-use profiles from technical ones */
|
||||
.profile-divider {
|
||||
@@ -1085,6 +1087,7 @@
|
||||
|
||||
.col-toggle.grp-felt { background: rgba(223,243,236,0.50); color: #075c3a; border-color: rgba(7,92,58,0.35); }
|
||||
.col-toggle.grp-surface { background: rgba(221,234,248,0.50); color: #0b3e72; border-color: rgba(11,62,114,0.30); }
|
||||
.col-toggle.grp-pets { background: rgba(214,238,240,0.50); color: #0a5158; border-color: rgba(10,81,88,0.30); }
|
||||
.col-toggle.grp-ambient { background: rgba(236,234,227,0.50); color: #3c3a35; border-color: rgba(60,58,53,0.30); }
|
||||
.col-toggle.grp-precip { background: rgba(247,228,238,0.50); color: #6b1e3a; border-color: rgba(107,30,58,0.30); }
|
||||
.col-toggle.grp-sky { background: rgba(234,232,252,0.50); color: #352e7a; border-color: rgba(53,46,122,0.30); }
|
||||
@@ -1094,6 +1097,7 @@
|
||||
|
||||
.col-toggle.grp-felt:hover { background: rgba(213,233,226,0.80); color: #075c3a; border-color: rgba(7,92,58,0.55); }
|
||||
.col-toggle.grp-surface:hover { background: rgba(211,224,238,0.80); color: #0b3e72; border-color: rgba(11,62,114,0.50); }
|
||||
.col-toggle.grp-pets:hover { background: rgba(204,228,230,0.80); color: #0a5158; border-color: rgba(10,81,88,0.50); }
|
||||
.col-toggle.grp-ambient:hover { background: rgba(226,224,217,0.80); color: #3c3a35; border-color: rgba(60,58,53,0.50); }
|
||||
.col-toggle.grp-precip:hover { background: rgba(237,218,228,0.80); color: #6b1e3a; border-color: rgba(107,30,58,0.50); }
|
||||
.col-toggle.grp-sky:hover { background: rgba(224,222,242,0.80); color: #352e7a; border-color: rgba(53,46,122,0.50); }
|
||||
@@ -1103,6 +1107,7 @@
|
||||
|
||||
.col-toggle.grp-felt.on { background: #0f9e63; border-color: #0f9e63; color: #fff; }
|
||||
.col-toggle.grp-surface.on { background: #2672c8; border-color: #2672c8; color: #fff; }
|
||||
.col-toggle.grp-pets.on { background: #17868f; border-color: #17868f; color: #fff; }
|
||||
.col-toggle.grp-ambient.on { background: #7a7870; border-color: #7a7870; color: #fff; }
|
||||
.col-toggle.grp-precip.on { background: #b03060; border-color: #b03060; color: #fff; }
|
||||
.col-toggle.grp-sky.on { background: #6058c8; border-color: #6058c8; color: #fff; }
|
||||
@@ -1112,6 +1117,7 @@
|
||||
|
||||
.col-toggle.grp-felt.on:hover { background: #0c7d4e; border-color: #0c7d4e; color: #fff; }
|
||||
.col-toggle.grp-surface.on:hover { background: #1e5aa0; border-color: #1e5aa0; color: #fff; }
|
||||
.col-toggle.grp-pets.on:hover { background: #116b73; border-color: #116b73; color: #fff; }
|
||||
.col-toggle.grp-ambient.on:hover { background: #5e5c56; border-color: #5e5c56; color: #fff; }
|
||||
.col-toggle.grp-precip.on:hover { background: #8c264c; border-color: #8c264c; color: #fff; }
|
||||
.col-toggle.grp-sky.on:hover { background: #4c48a8; border-color: #4c48a8; color: #fff; }
|
||||
@@ -1816,6 +1822,7 @@
|
||||
|
||||
.utci-table th.grp-felt { background: rgba(223,243,236,0.50); color: #075c3a; }
|
||||
.utci-table th.grp-surface { background: rgba(221,234,248,0.50); color: #0b3e72; }
|
||||
.utci-table th.grp-pets { background: rgba(214,238,240,0.50); color: #0a5158; }
|
||||
.utci-table th.grp-ambient { background: rgba(236,234,227,0.50); color: #3c3a35; }
|
||||
.utci-table th.grp-precip { background: rgba(247,228,238,0.50); color: #6b1e3a; }
|
||||
.utci-table th.grp-sky { background: rgba(234,232,252,0.50); color: #352e7a; }
|
||||
@@ -1825,6 +1832,7 @@
|
||||
|
||||
.utci-table th.grp-felt.col-info-th:hover { background: rgba(213,233,226,0.80); }
|
||||
.utci-table th.grp-surface.col-info-th:hover { background: rgba(211,224,238,0.80); }
|
||||
.utci-table th.grp-pets.col-info-th:hover { background: rgba(204,228,230,0.80); }
|
||||
.utci-table th.grp-ambient.col-info-th:hover { background: rgba(226,224,217,0.80); }
|
||||
.utci-table th.grp-precip.col-info-th:hover { background: rgba(237,218,228,0.80); }
|
||||
.utci-table th.grp-sky.col-info-th:hover { background: rgba(224,222,242,0.80); }
|
||||
@@ -1834,6 +1842,7 @@
|
||||
|
||||
.utci-table th.grp-felt .col-unit { color: #0f9e63; }
|
||||
.utci-table th.grp-surface .col-unit { color: #2672c8; }
|
||||
.utci-table th.grp-pets .col-unit { color: #17868f; }
|
||||
.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; }
|
||||
@@ -1859,6 +1868,7 @@
|
||||
|
||||
.utci-table .grp-label-row th.grp-felt { background: rgba(223,243,236,0.50); border-left: 2px solid rgba(74,50,24,0.18); border-bottom: 1px solid rgba(74,50,24,0.18);}
|
||||
.utci-table .grp-label-row th.grp-surface { background: rgba(221,234,248,0.50); border-left: 2px solid rgba(74,50,24,0.18); border-bottom: 1px solid rgba(74,50,24,0.18);}
|
||||
.utci-table .grp-label-row th.grp-pets { background: rgba(214,238,240,0.50); border-left: 2px solid rgba(74,50,24,0.18); border-bottom: 1px solid rgba(74,50,24,0.18);}
|
||||
.utci-table .grp-label-row th.grp-ambient { background: rgba(236,234,227,0.50); border-left: 2px solid rgba(74,50,24,0.18); border-bottom: 1px solid rgba(74,50,24,0.18);}
|
||||
.utci-table .grp-label-row th.grp-precip { background: rgba(247,228,238,0.50); border-left: 2px solid rgba(74,50,24,0.18); border-bottom: 1px solid rgba(74,50,24,0.18);}
|
||||
.utci-table .grp-label-row th.grp-sky { background: rgba(234,232,252,0.50); border-left: 2px solid rgba(74,50,24,0.18); border-bottom: 1px solid rgba(74,50,24,0.18);}
|
||||
@@ -2201,8 +2211,14 @@
|
||||
.fvt-btn:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.fvt-btn:last-child {
|
||||
/* Only the outer corners are rounded; every segment after the first drops
|
||||
its left border so neighbours share one 1.5px rule rather than stacking
|
||||
two. Keyed off the sibling rather than :last-child so it still holds with
|
||||
three segments (Quick / Detailed / Table). */
|
||||
.fvt-btn + .fvt-btn {
|
||||
border-left: none;
|
||||
}
|
||||
.fvt-btn:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.fvt-btn:hover {
|
||||
@@ -2650,6 +2666,7 @@
|
||||
two different backgrounds is what makes them drift apart. */
|
||||
.utci-table-rotated .grp-felt { --grp-tint: rgba(223,243,236,0.50); }
|
||||
.utci-table-rotated .grp-surface { --grp-tint: rgba(221,234,248,0.50); }
|
||||
.utci-table-rotated .grp-pets { --grp-tint: rgba(214,238,240,0.50); }
|
||||
.utci-table-rotated .grp-ambient { --grp-tint: rgba(236,234,227,0.50); }
|
||||
.utci-table-rotated .grp-precip { --grp-tint: rgba(247,228,238,0.50); }
|
||||
.utci-table-rotated .grp-sky { --grp-tint: rgba(234,232,252,0.50); }
|
||||
@@ -2734,11 +2751,11 @@
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* Icon-only on narrow screens — the toolbar is already tight. */
|
||||
.table-rotate-btn {
|
||||
font-size: 0;
|
||||
gap: 0;
|
||||
padding: 6px 7px;
|
||||
/* Tighter segments on narrow screens — the toolbar is already tight,
|
||||
and there are three of them now. */
|
||||
.fvt-btn {
|
||||
padding: 6px 6px;
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2769,58 +2786,17 @@
|
||||
}
|
||||
|
||||
/* ── TOOLBAR BUTTON HEIGHTS ───────────────────────────────────────────
|
||||
Quick/Detailed, Rotate and Edit columns sit on one row and have to
|
||||
agree on height. They didn't: the first two set line-height:1 while
|
||||
Edit columns leaves it at normal, so the same 6px padding produced a
|
||||
box ~3px taller. Pinning one line-height and one min-height across all
|
||||
three settles it regardless of font-size differences. */
|
||||
The view segments and Edit columns sit on one row and have to agree on
|
||||
height. They didn't: the segments set line-height:1 while Edit columns
|
||||
leaves it at normal, so the same 6px padding produced a box ~3px
|
||||
taller. Pinning one line-height and one min-height across both settles
|
||||
it regardless of font-size differences. */
|
||||
.fvt-btn,
|
||||
.table-rotate-btn,
|
||||
.col-toggles-edit-btn {
|
||||
min-height: 29px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ── ROTATE BUTTON ────────────────────────────────────────────────────
|
||||
Sits beside the Quick/Detailed view toggle and only while the detailed
|
||||
table is showing. Deliberately mirrors .fvt-btn — same type, padding,
|
||||
border and states — so it reads as part of that control group rather
|
||||
than a stray button. Standalone, so it keeps a radius on all corners
|
||||
where .fvt-btn splits its radius across the segmented pair. */
|
||||
.table-rotate-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid #c9b08a;
|
||||
border-radius: 3px;
|
||||
background: #f5edd6;
|
||||
color: #6b4228;
|
||||
transition: background 0.12s, border-color 0.12s, color 0.12s;
|
||||
}
|
||||
.table-rotate-btn:hover {
|
||||
border-color: #c8922a;
|
||||
background: #fef3dc;
|
||||
}
|
||||
.table-rotate-btn.on {
|
||||
background: #c8922a;
|
||||
border-color: #c8922a;
|
||||
color: #fff;
|
||||
}
|
||||
/* The icon turns with the state it describes — flat when hours run down
|
||||
the side, quarter-turned when they run along the top. */
|
||||
.table-rotate-btn .fvt-btn-icon {
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
.table-rotate-btn.on .fvt-btn-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* ── MOBILE ───────────────────────────────────────────────────────── */
|
||||
@media (max-width: 640px) {
|
||||
.utci-rotated-scroll {
|
||||
|
||||
Reference in New Issue
Block a user