Ulas
26a42d001b
Exclude small buttons (task checkboxes, action buttons, color swatches) from the 44px min-size rule in pwa.css — they already expand touch area via ::before pseudo-elements. Force consistent left-alignment on meal card titles, ingredients, and type labels. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
72 lines
2.0 KiB
CSS
72 lines
2.0 KiB
CSS
/**
|
||
* Modul: PWA Native Feel
|
||
* Zweck: Natives Touch- und Scrollverhalten, Safe Areas, Touch-Targets
|
||
* Abhängigkeiten: tokens.css, layout.css
|
||
*/
|
||
|
||
/* ── Kein Rubber-Banding / Pull-to-Refresh des Browsers ── */
|
||
html, body {
|
||
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) ── */
|
||
body {
|
||
padding-top: env(safe-area-inset-top);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
padding-left: env(safe-area-inset-left);
|
||
padding-right: env(safe-area-inset-right);
|
||
}
|
||
|
||
/* ── Bottom Nav über der Gesture Bar ──
|
||
* layout.css nutzt --safe-area-inset-bottom Token;
|
||
* hier als Fallback direkt via env() */
|
||
.nav-bottom {
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
/* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ──
|
||
* Ausnahme: Elemente, die Touch-Area bereits per ::before erweitern
|
||
* (task-status-btn, subtask-item__checkbox, meal-card action-btns,
|
||
* note color-swatches, etc.) — dort würde min-44px das Layout sprengen. */
|
||
button:not(.task-status-btn):not(.subtask-item__checkbox):not(.meal-card__action-btn):not(.note-color-btn):not(.modal-panel__close):not(.btn-dismiss),
|
||
a,
|
||
input[type="checkbox"],
|
||
input[type="radio"] {
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
}
|
||
|
||
/* ── 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) {
|
||
body {
|
||
padding-top: env(safe-area-inset-top);
|
||
}
|
||
}
|