diff --git a/src/static/css/style.css b/src/static/css/style.css index 2c99c00..5f4367a 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -3620,17 +3620,58 @@ a:hover { } /* === Theme Toggle Button === */ -.theme-toggle-btn { - font-size: 18px; - width: 36px; - height: 36px; - padding: 0; +.theme-switch { display: flex; align-items: center; - justify-content: center; - border-radius: 50%; + gap: 6px; cursor: pointer; - transition: background 0.2s, border-color 0.2s; + user-select: none; + -webkit-user-select: none; +} +.theme-switch-icon { + font-size: 14px; + line-height: 1; + opacity: 0.4; + transition: opacity 0.3s; +} +.theme-switch.dark .theme-switch-moon, +.theme-switch.light .theme-switch-sun { + opacity: 1; +} +.theme-switch-track { + position: relative; + width: 40px; + height: 22px; + border-radius: 11px; + background: var(--bg-tertiary, #1A2440); + border: 1px solid var(--border, #1E2D45); + transition: background 0.3s, border-color 0.3s; + flex-shrink: 0; +} +.theme-switch-knob { + position: absolute; + top: 2px; + left: 2px; + width: 16px; + height: 16px; + border-radius: 50%; + background: var(--accent, #C8A851); + box-shadow: 0 0 8px rgba(200, 168, 81, 0.3); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; +} +/* Dark mode: knob right */ +.theme-switch.dark .theme-switch-knob { + transform: translateX(18px); +} +/* Light mode: knob left */ +.theme-switch.light .theme-switch-knob { + transform: translateX(0); +} +.theme-switch:hover .theme-switch-track { + border-color: var(--accent, #C8A851); +} +.theme-switch:hover .theme-switch-knob { + box-shadow: 0 0 12px rgba(200, 168, 81, 0.5); } /* === Light Theme Sonderregeln === */ @@ -4234,6 +4275,16 @@ select:focus-visible, textarea:focus-visible, } .map-card .card-header { flex-shrink: 0; + display: flex; + align-items: center; + gap: 8px; +} +.card-header-actions { + margin-left: auto; + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; } .map-stats { font-size: 12px; @@ -4405,3 +4456,90 @@ a.map-popup-article:hover { [data-theme="light"] .map-cluster span { color: #fff; } + +/* Karten-Legende */ +.map-legend-ctrl { + background: var(--bg-card); + padding: 10px 14px; + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + font-size: 12px; + font-family: var(--font-body); + color: var(--text-primary); + border: 1px solid var(--border); + line-height: 1.6; +} +.map-legend-ctrl strong { + font-family: var(--font-title); + font-size: 13px; +} +[data-theme="light"] .map-legend-ctrl { + background: #fff; + border-color: #ddd; + color: #333; +} + +/* SVG-Marker: kein Default-divIcon-Styling */ +.map-marker-svg { + background: none !important; + border: none !important; +} +.map-marker-svg svg { + filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.35)); +} + +/* Map Expand Button */ +.map-expand-btn { + margin-left: auto; + width: 32px; + min-height: 32px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} +.map-expand-btn:hover { + color: var(--accent); + border-color: var(--accent); +} + +/* Map Fullscreen Overlay */ +.map-fullscreen-overlay { + display: none; + position: fixed; + inset: 0; + z-index: 10000; + background: var(--bg-primary); + flex-direction: column; +} +.map-fullscreen-overlay.active { + display: flex; +} +.map-fullscreen-header { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 20px; + background: var(--bg-card); + border-bottom: 1px solid var(--border); + flex-shrink: 0; +} +.map-fullscreen-title { + font-family: var(--font-title); + font-size: 16px; + font-weight: 600; + color: var(--text-primary); +} +.map-fullscreen-stats { + flex: 1; +} +.map-fullscreen-container { + flex: 1; + position: relative; +} +.map-fullscreen-container .leaflet-container { + width: 100% !important; + height: 100% !important; +} + diff --git a/src/static/dashboard.html b/src/static/dashboard.html index a2dd319..8a2b399 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -28,7 +28,13 @@