/* ============================================================================ * app.css — App-Verhalten von EAT (installierte WebApp + Mobilgeraete) * * Wird in generateHtmlHead.php NACH Tailwind eingebunden. Enthaelt nur was * Tailwind-Utilities nicht abdecken koennen: * 1. iOS-Heranzoomen bei Eingabefeldern verhindern * 2. Seitenhoehe: kurze Seiten fuellen den Bildschirm genau aus * 3. Sichere Bereiche (Notch / Home-Indikator) in der installierten WebApp * 4. Native Touch-Anmutung (kein Tap-Highlight, kein Doppeltipp-Zoom) * 5. Druck-Layout (Sidebar/Header/Footer raus) * 6. Bausteine fuer pwa.js: Viewer, Bild-Lightbox, Hinweis-Toasts * * Die Klasse `is-standalone` setzt generateHtmlHead.php auf , sobald die * Seite als installierte App laeuft. * ========================================================================== */ /* ── 1. Kein Heranzoomen bei Eingabefeldern ────────────────────────────────── * iOS zoomt automatisch heran, sobald ein Feld kleiner als 16px Schrift hat. * Tailwind setzt an vielen Stellen `text-sm` (14px), deshalb ist hier * `!important` noetig — Utility-Klassen haben sonst die hoehere Spezifitaet. * Nur auf Touch-Geraeten, damit das Desktop-Layout unveraendert bleibt. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea { font-size: 16px !important; } } /* ── 2. Seitenhöhe: kurze Seiten füllen den Bildschirm genau aus ──────────── * `min-h-screen` ist 100vh. Auf Mobilgeräten meint das die *große* Ansicht * (mit eingeklappten Browserleisten) und in der installierten App zusätzlich * den Bereich hinter der Systemleiste. Dadurch bleibt auf Seiten wie dem * Dashboard, den Einstellungen oder der Anmeldung immer ein Stück zum Scrollen * übrig, obwohl gar nichts mehr kommt. 100dvh ist die wirklich sichtbare Höhe. * Der Fußzeilen-Abstand für den Home-Indikator erhöht die Seite nicht: der * Inhaltsbereich hat `grow` und gibt den Platz einfach ab. */ @supports (min-height: 100dvh) { #page-container { min-height: 100dvh; } } /* ── 3. Sichere Bereiche in der installierten WebApp ───────────────────────── */ .is-standalone #page-header { height: calc(4rem + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); } .is-standalone #page-content { padding-top: calc(4rem + env(safe-area-inset-top, 0px)); } .is-standalone #page-sidebar { padding-top: env(safe-area-inset-top, 0px); } .is-standalone #page-footer { padding-bottom: env(safe-area-inset-bottom, 0px); } .is-standalone #notification { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } /* Querformat: seitliche Aussparungen (Notch/Kamera) freihalten */ @media (orientation: landscape) { .is-standalone #page-header, .is-standalone #page-content, .is-standalone #page-footer { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* Nur die Seite freihalten, an der das Menue wirklich am Bildschirmrand klebt: auf dem Handy rechts, ab lg links. Ein Polster auf der falschen Seite waere ein weisser Balken mitten im Menue und wuerde den Inhalt zur Seite schieben. */ .is-standalone #page-sidebar { padding-right: env(safe-area-inset-right, 0px); } } @media (orientation: landscape) and (min-width: 1024px) { .is-standalone #page-sidebar { padding-left: env(safe-area-inset-left, 0px); padding-right: 0; } } /* Ueberdehnen beim Scrollen unterbinden — in der App wirkt das wie ein Fehler, * weil unter der Seite der Browser-Hintergrund durchblitzt. */ .is-standalone body { overscroll-behavior-y: none; } /* ── 4. Native Touch-Anmutung ────────────────────────────────────────────── */ @media (pointer: coarse) { a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } } .is-standalone a, .is-standalone button, .is-standalone [role="button"] { -webkit-touch-callout: none; } /* ── 5. Druck-Layout ─────────────────────────────────────────────────────── */ @media print { #page-sidebar, #page-header, #page-footer, #offline-hint, #notification, .eat-viewer, .eat-lightbox, .eat-sheet, .eat-toast { display: none !important; } #page-container { margin-inline-start: 0 !important; min-height: 0 !important; } #page-content { padding-top: 0 !important; } } /* ── 6. Bausteine fuer pwa.js ────────────────────────────────────────────── */ /* Gemeinsame Vollbild-Ebene fuer Viewer und Lightbox */ .eat-layer { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; } .eat-viewer { background: #f1f5f9; } .eat-lightbox { background: rgba(0, 0, 0, .92); } /* Kopfleiste der Ebene */ .eat-layer__bar { flex: none; display: flex; align-items: center; gap: .25rem; padding: .5rem .5rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); padding-left: calc(.5rem + env(safe-area-inset-left, 0px)); padding-right: calc(.5rem + env(safe-area-inset-right, 0px)); background: #ffffff; border-bottom: 1px solid rgba(148, 163, 184, .35); } .eat-lightbox .eat-layer__bar { background: rgba(15, 23, 42, .92); border-bottom-color: rgba(148, 163, 184, .2); } .eat-layer__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; color: #1e293b; padding: 0 .25rem; } .eat-lightbox .eat-layer__title { color: #f8fafc; } .eat-layer__btn { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 2.25rem; padding: 0 .6rem; border: 0; border-radius: .625rem; background: transparent; color: #334155; font-size: .8125rem; font-weight: 600; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .eat-layer__btn:active { background: rgba(148, 163, 184, .25); } .eat-lightbox .eat-layer__btn { color: #e2e8f0; } .eat-lightbox .eat-layer__btn:active { background: rgba(248, 250, 252, .2); } .eat-layer__btn svg { width: 1.125rem; height: 1.125rem; flex: none; } .eat-layer__btn--icon { padding: 0 .55rem; } /* Inhaltsbereich */ .eat-layer__body { flex: 1 1 auto; min-height: 0; position: relative; display: flex; padding-bottom: env(safe-area-inset-bottom, 0px); } .eat-layer__body iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #ffffff; } .eat-lightbox .eat-layer__body { overflow: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; justify-content: center; padding: .75rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); } .eat-lightbox img { max-width: 100%; height: auto; margin: auto; border-radius: .5rem; } /* Lade-/Hinweisfeld innerhalb einer Ebene */ .eat-layer__note { margin: auto; max-width: 22rem; padding: 1.5rem 1.25rem; text-align: center; font-size: .875rem; color: #475569; } .eat-layer__spinner { width: 1.75rem; height: 1.75rem; margin: 0 auto .75rem; border: 3px solid rgba(100, 116, 139, .3); border-top-color: #4f46e5; border-radius: 50%; animation: eat-spin .7s linear infinite; } @keyframes eat-spin { to { transform: rotate(360deg); } } /* Kurzhinweise am unteren Rand */ .eat-toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 10060; transform: translateX(-50%); max-width: calc(100vw - 2rem); padding: .625rem 1rem; border-radius: .75rem; background: rgba(15, 23, 42, .94); color: #f8fafc; font-size: .8125rem; font-weight: 500; line-height: 1.35; text-align: center; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .2s ease; pointer-events: none; } .eat-toast--visible { opacity: 1; } /* Aktionsblatt (z.B. "Datei sichern") */ .eat-sheet { position: fixed; inset: 0; z-index: 10070; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); background: rgba(15, 23, 42, .55); } @media (min-width: 640px) { .eat-sheet { align-items: center; } } .eat-sheet__card { width: 100%; max-width: 24rem; padding: 1.25rem; border-radius: 1rem; background: #ffffff; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .45); } .eat-sheet__title { margin: 0 0 .35rem; font-size: .9375rem; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; } .eat-sheet__text { margin: 0 0 1rem; font-size: .8125rem; line-height: 1.45; color: #475569; } .eat-sheet__row { display: flex; justify-content: flex-end; gap: .5rem; } .eat-sheet__btn { height: 2.5rem; padding: 0 1rem; border: 0; border-radius: .625rem; font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; touch-action: manipulation; } .eat-sheet__btn--ghost { background: #f1f5f9; color: #334155; } .eat-sheet__btn--primary { background: #4f46e5; color: #ffffff; } /* Dunkles Design */ .dark .eat-viewer { background: #020617; } .dark .eat-viewer .eat-layer__bar { background: #0f172a; border-bottom-color: rgba(148, 163, 184, .25); } .dark .eat-viewer .eat-layer__title { color: #f1f5f9; } .dark .eat-viewer .eat-layer__btn { color: #cbd5e1; } .dark .eat-viewer .eat-layer__btn:active { background: rgba(148, 163, 184, .25); } .dark .eat-layer__note { color: #94a3b8; } .dark .eat-sheet__card { background: #0f172a; } .dark .eat-sheet__title { color: #f8fafc; } .dark .eat-sheet__text { color: #94a3b8; } .dark .eat-sheet__btn--ghost { background: #1e293b; color: #e2e8f0; } /* Wenn eine Ebene offen ist, darf die Seite dahinter nicht mitscrollen */ .eat-layer-open body { overflow: hidden; } /* ── 7. Ladeanzeige beim Seitenwechsel ────────────────────────────────────── Zwischen Antippen und neuer Seite vergeht auf dem Handy schnell mehr als eine Sekunde. Ohne Rueckmeldung wirkt das, als haette der Tipp nicht gezaehlt, und es wird ein zweites Mal getippt. pwa.js blendet die Anzeige erst nach einer kurzen Wartezeit ein, damit schnelle Wechsel nicht flackern. Sie faengt keine Klicks ab (pointer-events: none), damit ein haengengebliebener Rest die Seite nicht blockiert. */ .eat-nav-laden { position: fixed; inset: 0; z-index: 10090; pointer-events: none; } .eat-nav-laden__balken { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: rgba(79, 70, 229, .2); } .eat-nav-laden__balken::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: #4f46e5; animation: eat-nav-balken 1.1s ease-in-out infinite; } @keyframes eat-nav-balken { from { left: -40%; } to { left: 100%; } } .eat-nav-laden__pille { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: .625rem; padding: .625rem .9375rem; border-radius: .75rem; background: rgba(15, 23, 42, .94); color: #f8fafc; font-size: .8125rem; font-weight: 500; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); } .eat-nav-laden__kreis { width: 1rem; height: 1rem; flex: none; border: 2px solid rgba(248, 250, 252, .35); border-top-color: #f8fafc; border-radius: 50%; animation: eat-spin .7s linear infinite; } /* Weniger Bewegung: Anzeige bleibt, laeuft aber ruhiger */ @media (prefers-reduced-motion: reduce) { .eat-nav-laden__balken::after { animation-duration: 2.6s; } .eat-nav-laden__kreis { animation-duration: 2.2s; } }