diff --git a/VERSION b/VERSION index 71db39d..08e9158 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1216 \ No newline at end of file +1217 \ No newline at end of file diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 72b89e6..77b70ec 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -3053,41 +3053,46 @@ html.modal-open { .map-legend::-webkit-scrollbar { display: none; } /* Regenradar-Zeitleiste (RainViewer: ~2h Vergangenheit + ~30min Nowcast, Play/Pause + Slider) */ +/* Optik wie die Status-Pill darunter (hell/cremefarben, Blur, Border), direkt darüber gesetzt. */ .map-radar-timeline { position: absolute; - left: 12px; + left: var(--space-3); right: 88px; /* Platz für die Ecken-FABs (Speed-Dial / Zurück) rechts */ - bottom: calc(60px + env(safe-area-inset-bottom, 0px)); + bottom: calc(var(--space-3) + 40px); /* unmittelbar über der Status-Pill */ z-index: 900; display: flex; align-items:center; - gap: 10px; - padding: 7px 12px; - border-radius: 999px; - background: rgba(15, 22, 35, 0.82); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); - color: #fff; + gap: 8px; + padding: 4px 12px 4px 5px; + border-radius: var(--radius-full); + background: rgba(255, 255, 255, 0.88); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + border: 1px solid var(--c-border-light); + color: var(--c-text); pointer-events: auto; } +:root[data-theme="dark"] .map-radar-timeline { + background: rgba(24, 20, 16, 0.92); + border-color: rgba(255, 255, 255, 0.1); +} .rdr-play { flex-shrink: 0; - width: 34px; height: 34px; + width: 30px; height: 30px; border: none; border-radius: 50%; - background: rgba(255, 255, 255, 0.16); - color: #fff; cursor: pointer; + background: var(--c-surface-2); + color: var(--c-text); cursor: pointer; display: flex; align-items: center; justify-content: center; } -.rdr-play:active { background: rgba(255, 255, 255, 0.3); } -.rdr-slider { flex: 1; min-width: 0; height: 4px; accent-color: #60a5fa; cursor: pointer; } +.rdr-play:active { background: var(--c-border); } +.rdr-slider { flex: 1; min-width: 0; height: 4px; accent-color: var(--c-primary); cursor: pointer; } .rdr-time { flex-shrink: 0; - font-size: 12px; font-weight: 600; + font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; - min-width: 82px; text-align: right; opacity: 0.92; + min-width: 78px; text-align: right; color: var(--c-text-secondary); } -.rdr-time.is-forecast { color: #93c5fd; } /* Nowcast/Vorhersage-Frames bläulich */ +.rdr-time.is-forecast { color: var(--c-primary); } /* Nowcast/Vorhersage-Frames hervorgehoben */ .map-legend-btn { flex-shrink: 0; diff --git a/backend/static/index.html b/backend/static/index.html index a82c60d..60bf077 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -86,14 +86,14 @@