iarv/meshstream
1
0
Fork 1
mirror of https://github.com/dpup/meshstream.git synced 2026-03-28 17:42:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dark theme for MapLibre navigation controls, add to NetworkMap

Browse Source 
Style .maplibregl-ctrl-group with dark semi-transparent background
and invert the SVG icons to match the dark map aesthetic. Add
NavigationControl to NetworkMap alongside NodeLocationMap.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel Pupius
2026-03-16 00:09:31 +00:00
parent 3ca73ae978
commit 1d3500082e
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/dashboard/NetworkMap.tsx
View File

@@ -114,6 +114,7 @@ export const NetworkMap = React.forwardRef<{ resetAutoZoom: () => void }, Networ
});
map.addControl(new maplibregl.AttributionControl({ compact: true }));
map.addControl(new maplibregl.NavigationControl(), 'top-left');
map.on("load", () => {
map.addSource("links", { type: "geojson", data: { type: "FeatureCollection", features: [] } });

23
web/src/styles/index.css
View File

@@ -42,6 +42,29 @@
.maplibregl-ctrl-attrib-inner a:hover {
color: #fff !important;
}
/* MapLibre navigation controls — dark theme */
.maplibregl-ctrl-group {
background: rgba(20, 20, 20, 0.75) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(4px);
}
.maplibregl-ctrl-group button {
background-color: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.maplibregl-ctrl-group button:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.maplibregl-ctrl-icon {
filter: invert(1) opacity(0.8);
}
.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon {
filter: invert(1) opacity(1);
}
/* Prevent auto-expand on wide maps */
.maplibregl-ctrl-attrib.maplibregl-compact-show {
display: flex !important;