1.44 - New Filters, profiles & Mobile fixes
This commit is contained in:
fraxle
+103
-89
@@ -3,7 +3,6 @@
|
||||
now-row and night-row decorations.
|
||||
════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
|
||||
/* ── 5. DAY TABS (today / tomorrow / etc.) ─────────────────────────── */
|
||||
/* Note: each tab's background colour comes from inline styles in
|
||||
app.js (the confidence bands). This file only handles spacing,
|
||||
@@ -241,31 +240,6 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Burn select — unlike regular col-toggle buttons, the select never
|
||||
goes full-brass background so the native dropdown list stays readable.
|
||||
Active state = brass border + brass text on parchment.
|
||||
Inactive state = same as a regular col-toggle pill. */
|
||||
.burn-select {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
/* Override the inherited .col-toggle.on brass background */
|
||||
.col-toggle.burn-select.on {
|
||||
background: #f5edd6;
|
||||
color: #c8922a;
|
||||
border-color: #c8922a;
|
||||
font-weight: 600;
|
||||
}
|
||||
.col-toggle.burn-select.on:hover {
|
||||
background: #fef3dc;
|
||||
color: #c8922a;
|
||||
border-color: #c8922a;
|
||||
}
|
||||
.burn-select:focus {
|
||||
border-color: #c8922a;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ── Vehicle group: select + windows-open checkbox fused together ── */
|
||||
.col-toggle-group {
|
||||
display: inline-flex;
|
||||
@@ -287,69 +261,12 @@
|
||||
}
|
||||
.col-toggle-group .grouped-left {
|
||||
border-right: none !important;
|
||||
border-radius: 20px 0 0 20px !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.col-toggle-group .cs-wrap:only-child .grouped-left,
|
||||
.col-toggle-group .cs-wrap:last-child .grouped-left {
|
||||
border-right: 1.5px solid #c9b08a !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
/* The checkbox pill — same height/padding as a col-toggle but styled as a label */
|
||||
.col-toggle-vent {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 12px 5px 10px;
|
||||
font-size: 12px;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid #c9b08a;
|
||||
border-left: 1px solid #d4c0a0; /* softer join line */
|
||||
border-radius: 0 20px 20px 0;
|
||||
background: #fef8ee;
|
||||
color: #6b4228;
|
||||
user-select: none;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.col-toggle-vent:hover {
|
||||
border-color: #c8922a;
|
||||
color: #6b4f2a;
|
||||
background: #fef3dc;
|
||||
}
|
||||
.col-toggle-vent.on {
|
||||
background: #c8922a;
|
||||
border-color: #c8922a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Custom checkbox square inside the vent label */
|
||||
.vent-checkbox {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1.5px solid currentColor;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.vent-checkbox.checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: -1px;
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
border: 2px solid currentColor;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -636,10 +553,6 @@
|
||||
.col-info-close:hover {
|
||||
color: #4a3420;
|
||||
}
|
||||
then sit with balanced visual padding on either side. */
|
||||
.utci-table th.utci-tight-head {
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
|
||||
/* ── 8. NOW-ROW & NIGHT-ROW DECORATIONS ─────────────────────────────── */
|
||||
@@ -715,3 +628,104 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
|
||||
/* ── FILTER PROFILES + COLUMN TOGGLES — mobile fixes ───────────────── */
|
||||
@media (max-width: 640px) {
|
||||
|
||||
/* ── Profile bar ────────────────────────────────────────────────────
|
||||
Keep flex-wrap but make every child a consistent ~31% width so
|
||||
they land in tidy rows of 3. The label gets its own full row. */
|
||||
.filter-profiles {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 10px 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-profiles-label {
|
||||
flex: 0 0 100%; /* own row */
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Hide vertical pipe dividers — not needed when wrapping */
|
||||
.profile-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Plain profile buttons: fixed ~31% so 3 fit per row */
|
||||
.profile-btn {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
text-align: center;
|
||||
padding: 7px 2px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* CustomSelect (Activities / Places dropdowns) — same width as buttons */
|
||||
.filter-profiles .cs-wrap {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
}
|
||||
.filter-profiles .cs-btn {
|
||||
width: 100%;
|
||||
padding: 7px 6px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ── Column toggles bar ─────────────────────────────────────────────
|
||||
Same approach — label full row, toggles at ~31% each. */
|
||||
.col-toggles {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 10px 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.col-toggles-label {
|
||||
flex: 0 0 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.col-toggle {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
text-align: center;
|
||||
padding: 7px 2px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* Pollen CustomSelect in col-toggles — match toggle width */
|
||||
.col-toggles .cs-wrap {
|
||||
flex: 0 0 calc(33.33% - 4px);
|
||||
}
|
||||
.col-toggles .cs-btn {
|
||||
width: 100%;
|
||||
padding: 7px 6px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Fused vehicle group (select + vent pill): spans 2 slots = ~65% */
|
||||
.col-toggle-group {
|
||||
flex: 0 0 calc(66.66% - 1px);
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.col-toggle-group .cs-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
.col-toggle-group .cs-btn {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
padding: 7px 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user