feat(pwa): Offline-Banner in App-Shell, reminders.css lazy geladen
Zeigt automatisch wenn navigator.onLine === false. Blendet sich aus sobald Verbindung wiederhergestellt. reminders.css aus globalem <link> entfernt (wird lazy geladen).
This commit is contained in:
@@ -1897,6 +1897,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Offline-Banner
|
||||
* -------------------------------------------------------- */
|
||||
.offline-banner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: calc(var(--z-toast) + 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background-color: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent);
|
||||
animation: offline-banner-in 0.2s var(--ease-out);
|
||||
}
|
||||
|
||||
.offline-banner[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes offline-banner-in {
|
||||
from { opacity: 0; transform: translateY(-100%); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.offline-banner { animation: none; }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Print-Styles
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user