/* css/basemaps.css — P1-02. The corner style switcher, and nothing else. Owned by P1-02 together with js/basemaps.js. This file is linked at runtime by js/basemaps.js (id-guarded injection into ) because index.html and styles.css belong to P1-01. P1-12 REQUEST: replace that injection with a static here in index.html. Every colour and radius below comes from the tokens styles.css already defines on :root — --bg-raised, --line, --text, --text-dim, --accent, --radius, --pad, --z-chrome, --z-panel. No new colours are invented. */ /* The L.Control container. Leaflet adds .leaflet-control (margin, pointer events); this owns the stacking context the panel anchors to. */ .atlas-basemaps { position: relative; /* Under the chrome header (--z-chrome 1000) and the panel (--z-panel 900), above Leaflet's own controls, which top out around 800. */ z-index: 810; font-family: var(--font, system-ui, sans-serif); line-height: 1; } /* --------------------------------------------------------------------------- The button — one-handed at a trailhead, so 44px minimum in both axes. --------------------------------------------------------------------------- */ .atlas-basemaps__btn { display: flex; align-items: center; justify-content: center; width: 2.75rem; /* 44px */ height: 2.75rem; /* 44px */ margin: 0; padding: 0; border: 1px solid var(--line, #26333b); border-radius: var(--radius, 0.5rem); background: var(--bg-raised, #172026); color: var(--text, #e8eef1); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); transition: background-color 120ms ease, border-color 120ms ease; } .atlas-basemaps__btn svg { display: block; fill: currentColor; } .atlas-basemaps__btn:hover { background: color-mix(in srgb, var(--bg-raised, #172026) 82%, var(--text, #e8eef1)); } .atlas-basemaps__btn:focus-visible { outline: 2px solid var(--accent, #2ec4b6); outline-offset: 2px; } /* Open state reads as pressed, using the mode accent already in the palette. */ .atlas-basemaps.is-open > .atlas-basemaps__btn { border-color: var(--accent, #2ec4b6); color: var(--accent, #2ec4b6); } /* --------------------------------------------------------------------------- The slide-out panel — anchored under the button, flush to the right edge so it can never push the layout sideways at 320px. --------------------------------------------------------------------------- */ .atlas-basemaps__panel { position: absolute; top: calc(2.75rem + 0.375rem); right: 0; min-width: 9.5rem; /* 20px of Leaflet control margin plus a little breathing room, so the panel always fits inside a 320px viewport without horizontal scrolling. */ max-width: calc(100vw - 2.5rem); /* P5 follow-up: five base styles + five overlay/provider rows outgrew the map area on phones — unbounded, the bottom rows slid under the attribution bar and became untappable (measured by the T7 harness). The panel now scrolls within itself instead of spilling. */ max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.25rem; border: 1px solid var(--line, #26333b); border-radius: var(--radius, 0.5rem); background: var(--bg-raised, #172026); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); animation: atlas-basemaps-in 140ms ease-out; transform-origin: top right; } .atlas-basemaps__panel[hidden] { display: none; } @keyframes atlas-basemaps-in { from { opacity: 0; transform: translateY(-0.375rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* styles.css already zeroes animation globally under reduced motion; this is the explicit, local guarantee so the rule survives a refactor there. */ @media (prefers-reduced-motion: reduce) { .atlas-basemaps__panel { animation: none; } .atlas-basemaps__btn, .atlas-basemaps__item { transition: none; } } /* --------------------------------------------------------------------------- The style rows — also 44px tall. --------------------------------------------------------------------------- */ .atlas-basemaps__item { display: flex; align-items: center; gap: var(--pad, 0.75rem); width: 100%; min-height: 2.75rem; /* 44px */ padding: 0 0.625rem; border: 0; border-radius: calc(var(--radius, 0.5rem) - 0.125rem); background: transparent; color: var(--text, #e8eef1); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease; } .atlas-basemaps__item + .atlas-basemaps__item { margin-top: 0.125rem; } .atlas-basemaps__item:hover { background: color-mix(in srgb, var(--bg-raised, #172026) 78%, var(--text, #e8eef1)); } .atlas-basemaps__item:focus-visible { outline: 2px solid var(--accent, #2ec4b6); outline-offset: -2px; } .atlas-basemaps__label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The active row. aria-selected carries this for screen readers; the tick and the accent carry it for everyone else. */ .atlas-basemaps__item.is-active { color: var(--accent, #2ec4b6); font-weight: 600; } .atlas-basemaps__tick { flex: 0 0 auto; visibility: hidden; color: var(--accent, #2ec4b6); } .atlas-basemaps__item.is-active .atlas-basemaps__tick { visibility: visible; } /* Only reachable if a future mode has no styles declared for it. */ .atlas-basemaps__empty { margin: 0; padding: 0.625rem; color: var(--text-dim, #9aabb5); font-size: 0.8125rem; } /* Light-scheme courtesy: the tokens are dark-first, so this only softens the shadow rather than restating colours. */ @media (prefers-color-scheme: light) { .atlas-basemaps__btn { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); } .atlas-basemaps__panel { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24); } } /* P2-01 — overlay toggle rows under the base list. */ .atlas-basemaps__rule { height: 1px; background: var(--line); margin: 0.25rem 0.5rem; } .atlas-basemaps__item--overlay .atlas-basemaps__label::before { content: '⊕ '; color: var(--text-dim); }