randy
5afb130c45
Replace Leaflet/raster tiles with MapLibre GL JS: an online OpenFreeMap style and an offline style built from a local PMTiles archive via pmtiles.js and protomaps-themes-base (no glyphs/labels offline by design, see docs/architecture.adoc). Frontend libraries are vendored locally rather than loaded from a CDN so the app keeps working with no internet access. Also add an animated RainViewer precipitation radar overlay (toggle, play/pause, scrub slider), matching the default time window of the weather-radar-card Home Assistant integration.
79 lines
1.2 KiB
CSS
79 lines
1.2 KiB
CSS
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
#map {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.layer-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.layer-toggle button {
|
|
/* Override maplibregl-ctrl-group's 29x29px square icon-button sizing —
|
|
these are text buttons. */
|
|
width: auto;
|
|
height: auto;
|
|
border: none;
|
|
background: #fff;
|
|
padding: 6px 10px;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.layer-toggle button.active {
|
|
background: #dbe9ff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.radar-control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 6px 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.radar-control__toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.radar-control__playback {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.radar-control__playback[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.radar-control__play {
|
|
/* Override maplibregl-ctrl-group's 29x29px square icon-button sizing. */
|
|
width: auto;
|
|
height: auto;
|
|
border: none;
|
|
background: none;
|
|
padding: 2px 4px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radar-control__scrub {
|
|
width: 110px;
|
|
}
|
|
|
|
.radar-control__time {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|