rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Karten-UI vollständig Dark-Mode-fähig

Browse source 
Filter-Chips, Status-Pille und Popup-Ballons passen sich dem Dark-Mode an:
- .map-legend-btn: dunkel frosted-glass (rgba(24,20,16,0.88)) statt weiß
- .map-legend-all (Filter-Btn): entsprechend dunkler Ton
- .map-statusbar: dunkler Hintergrund + helle Schrift
- .leaflet-popup-content-wrapper/.tip: --c-surface (#241C14) statt weiß
Aktive Tabs behalten Layer-Farbe, Marker-Farben bleiben unverändert.
components.css ?v=1015, SW by-v1024, APP_VER 1024
This commit is contained in:
rene 2026-05-16 11:25:04 +02:00
parent 2cf0bc0d97
commit 059002670a
5 changed files with 71 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

67
backend/static/css/components.css
View file

@ -3149,6 +3149,73 @@ html.modal-open {
color: #fff;
}
/* Dark-Mode: Karten-UI-Elemente (manuell + System) */
:root[data-theme="dark"] .map-legend-btn,
:root:not([data-theme="light"]) .map-legend-btn.dark-map {
background: rgba(24,20,16,0.88);
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.15);
}
:root[data-theme="dark"] .map-legend-btn {
background: rgba(24,20,16,0.88);
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.15);
}
:root[data-theme="dark"] .map-legend-btn.active {
background: var(--layer-color, var(--c-primary));
color: #fff;
border-color: var(--layer-color, var(--c-primary));
}
:root[data-theme="dark"] .map-legend-all {
background: rgba(36,28,20,0.92);
border-color: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.7);
}
:root[data-theme="dark"] .map-legend-all.all-off {
background: rgba(10,8,6,0.92);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.9);
}
:root[data-theme="dark"] .map-statusbar {
background: rgba(24,20,16,0.92);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
background: #241C14;
color: rgba(255,255,255,0.85);
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .map-legend-btn {
background: rgba(24,20,16,0.88);
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.15);
}
:root:not([data-theme="light"]) .map-legend-btn.active {
background: var(--layer-color, var(--c-primary));
color: #fff;
border-color: var(--layer-color, var(--c-primary));
}
:root:not([data-theme="light"]) .map-legend-all {
background: rgba(36,28,20,0.92);
border-color: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.7);
}
:root:not([data-theme="light"]) .map-statusbar {
background: rgba(24,20,16,0.92);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
}
:root:not([data-theme="light"]) .leaflet-popup-content-wrapper,
:root:not([data-theme="light"]) .leaflet-popup-tip {
background: #241C14;
color: rgba(255,255,255,0.85);
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
}
/* FAB-Gruppe rechts unten — direkt über dem Zurück-Button */
.map-fabs {
position: absolute;