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;

2
backend/static/index.html
View file

@ -103,7 +103,7 @@
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=907">
<link rel="stylesheet" href="/css/layout.css?v=1013">
<link rel="stylesheet" href="/css/components.css?v=1014">
<link rel="stylesheet" href="/css/components.css?v=1015">
</head>
<body>

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1023'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1024'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
const CACHE_VERSION = 'by-v1023';
const CACHE_VERSION = 'by-v1024';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache