Ulas Kalayci
95 lines
3.2 KiB
CSS
95 lines
3.2 KiB
CSS
/**
|
|
* Modul: PWA Native Feel
|
|
* Zweck: Natives Touch- und Scrollverhalten, Safe Areas, Touch-Targets
|
|
* Abhängigkeiten: tokens.css, layout.css
|
|
*/
|
|
|
|
/* ── Kein Rubber-Banding, kein Body-Scroll ──
|
|
* overflow: hidden NUR auf body - NICHT auf html setzen.
|
|
* iOS Safari Bug: overflow:hidden auf <html> clippt position:fixed-Elemente,
|
|
* was body::after (Safe-Area-Fill) unsichtbar macht.
|
|
* overscroll-behavior: none auf html+body deaktiviert Pull-to-Refresh/Rubber-Banding. */
|
|
html {
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* ── Kein Tap-Highlight auf allen Elementen (Android Chrome) ──
|
|
* reset.css setzt es nur auf html; hier global für alle Elemente */
|
|
* {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* ── Safe Area Insets (Notch, Dynamic Island, Gesture Bar) ──
|
|
* Nur horizontale Safe Areas auf body. Vertikale Safe Areas werden über
|
|
* .app-shell (padding-top im Standalone-Modus) und body::after (unten) gehandhabt.
|
|
* KEIN body padding-top/bottom - das würde .app-shell (height: 100dvh)
|
|
* um den Safe-Area-Betrag aus dem Viewport schieben und Scroll-Bleed erzeugen. */
|
|
body {
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
/* Touch-Targets werden über tokens.css (--target-sm/md/lg) und
|
|
* komponentenspezifische Styles gehandhabt - siehe Redesign Phase E.
|
|
* Keine globale min-size-Regel hier, da sie mit dem bestehenden
|
|
* Touch-Target-System kollidiert (::before-Expansion auf kleinen Elementen). */
|
|
|
|
/* ── Smooth Momentum-Scrolling in scrollbaren Containern ── */
|
|
.scroll-container,
|
|
.nav-bottom__scroll {
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
/* ── Kein Text-Selection in UI-Elementen (nur in Content-Bereichen) ── */
|
|
nav,
|
|
.nav-bottom,
|
|
.nav-sidebar,
|
|
.cal-toolbar,
|
|
.tasks-toolbar,
|
|
.notes-toolbar,
|
|
.contacts-toolbar,
|
|
.modal-panel__header {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ── Standalone-Modus: Status-Bar-Bereich berücksichtigen ── */
|
|
@media (display-mode: standalone) {
|
|
/* padding-top auf .app-shell (nicht body): So bleibt app-shell exakt 100dvh
|
|
* hoch und überläuft den Viewport nicht - body-padding hätte .app-shell
|
|
* nach unten verschoben und Scroll-Bleed verursacht. */
|
|
.app-shell {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
/* Kein Scroll-Bleed - Content bleibt in seinem Container */
|
|
.app-content {
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
/* iOS PWA: Home-Indicator-Bereich unter der Nav füllen.
|
|
* position:fixed ist erforderlich, damit body::after auch dann sichtbar ist,
|
|
* wenn der App-Shell-Inhalt den Home-Indicator-Bereich nicht erreicht.
|
|
* Funktioniert nur wenn html KEIN overflow:hidden hat (iOS Safari Bug:
|
|
* overflow:hidden auf <html> clippt position:fixed-Elemente). */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: env(safe-area-inset-bottom, 0px);
|
|
background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
|
|
backdrop-filter: blur(16px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
|
z-index: calc(var(--z-nav) - 1);
|
|
}
|
|
}
|