/* ============================================================ SAFE AREA — CONTRACTBLOK Contract: ACHTERGROND BLEEDT, CONTENT WIJKT. Het element dat de achtergrondkleur draagt loopt door tot de fysieke schermrand; het element met tekst of tikdoelen krijgt de inset als PADDING. Nooit margin als safe-area-mechanisme (dat laat de laag eronder doorschemeren als een balk) en nooit een magisch pixelgetal. Waarden komen ALTIJD uit var(--sa-t/-r/-b/-l), nooit rechtstreeks uit env() of var(--sa-top) — behalve in de aliasdefinitie hieronder. Dit bestand laadt NA css/styles.css (zie includes/loggedin/header.php), zodat het van het SB-Admin-thema wint zonder !important. css/styles.css is een gegenereerd themabestand — patch daar niets in. In een gewone browser zijn alle insets 0px, dus --app-topnav-h komt exact uit op de 3.625rem die het thema al gebruikte: geen enkele visuele wijziging buiten de app. ============================================================ */ /* ------------------------------------------------------------ 1. Aliassen — de enige bron van waarheid. Twee bronnen worden hier verenigd: - env(safe-area-inset-*) → browser / WKWebView met viewport-fit=cover - var(--sa-top/right/...) → door de iOS-shell op geinjecteerd met de ECHT gemeten inset (betrouwbaarder dan env(), en de enige bron zodra er ooit een Android-shell bijkomt: daar is env() 0px). max() pakt de grootste, dus de shell mag ontbreken zonder gevolgen. Op html EN body: de shell zet zijn inline vars op , en een inline style wint van deze stylesheet — dus alles binnen de body rekent met de gemeten waarde, de html-regel is de browserfallback. ------------------------------------------------------------ */ html, body { --sa-t: max(var(--sa-top, 0px), env(safe-area-inset-top, 0px)); --sa-r: max(var(--sa-right, 0px), env(safe-area-inset-right, 0px)); --sa-b: max(var(--sa-bottom, 0px), env(safe-area-inset-bottom, 0px)); --sa-l: max(var(--sa-left, 0px), env(safe-area-inset-left, 0px)); /* Volledige hoogte van de vaste top-nav, INCLUSIEF de statusbalk-inset. 3.625rem = de inhoudshoogte die de balk in het thema al had. ALLES wat content onder de top-nav wegduwt hoort deze var te gebruiken — een tweede hardgecodeerde 3.625rem is per definitie fout zodra de inset meetelt (op een toestel met Dynamic Island scheelt dat ~59px). */ --app-topnav-h: calc(3.625rem + var(--sa-t)); } /* ------------------------------------------------------------ 2. Top-nav — de balk groeit mee met de inset. Het thema zet `height: 3.625rem` (een vaste hoogte kan niet groeien). Met border-box valt de padding-top BINNEN de height, dus zonder de nieuwe height zou de inset de inhoud platdrukken i.p.v. de balk verhogen: logo en knoppen schuiven dan onder de statusbalk. De achtergrond (bg-white) loopt door tot de fysieke bovenrand. ------------------------------------------------------------ */ .topnav { height: var(--app-topnav-h); /* De balk is óók een .navbar en heeft daar al 0.5rem verticale padding van. Die var meenemen i.p.v. hem te overschrijven met een kale var(--sa-t): anders schuift de inhoud in een gewone browser 0.25rem omhoog. */ padding-top: calc(var(--bs-navbar-padding-y, 0.5rem) + var(--sa-t)); } /* Alles wat onder de balk begint leest dezelfde var. */ .nav-fixed #layoutSidenav #layoutSidenav_content { top: var(--app-topnav-h); } .nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav { padding-top: var(--app-topnav-h); } #layoutSidenav #layoutSidenav_content { min-height: calc(100vh - var(--app-topnav-h)); /* dvh: in de app krimpt de viewport bij een open toetsenbord */ min-height: calc(100dvh - var(--app-topnav-h)); } /* Anchors en scrollIntoView() landden anders onder de vaste balk. */ html { scroll-padding-top: var(--app-topnav-h); } /* ------------------------------------------------------------ 3. Onderkant — home-indicator / gesturebalk. Beide footers dragen hun eigen achtergrond, dus die loopt door tot de onderrand (height groeit) terwijl de inhoud omhoog wijkt (padding). Border-box houdt de content-area exact op de oorspronkelijke 5rem. ------------------------------------------------------------ */ .sidenav .sidenav-footer { height: calc(5rem + var(--sa-b)); padding-bottom: var(--sa-b); } .footer-admin { height: calc(5rem + var(--sa-b)); padding-bottom: var(--sa-b); } /* Het uitklapbare zijmenu scrollt tot aan de footer; in landscape moet het ook vrij blijven van een cutout aan de linkerkant. */ .nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav .sidenav-menu { padding-left: var(--sa-l); } /* ------------------------------------------------------------ 4. Uitgelogde pagina's (login, wachtwoord vergeten, reset, offerte). Geen top-nav, dus hier draagt de layoutcontainer zelf de insets; de body-achtergrond bleedt eronder door. ------------------------------------------------------------ */ #layoutAuthentication { min-height: 100vh; min-height: 100dvh; padding-top: var(--sa-t); padding-bottom: var(--sa-b); } /* Losse pagina's zonder een van beide layoutcontainers (privacy.php, view-quote.php): daar draagt de body de achtergrond en zit de content direct in een .container. Zelfde contract, één class. */ body.sa-page { padding-top: var(--sa-t); padding-bottom: var(--sa-b); } /* ------------------------------------------------------------ 6. Overscroll / rubber-band — de zone boven de top-nav. Bij een swipe-omlaag-voorbij-de-top (de pull-to-refresh-beweging) schuift iOS de hele laag omlaag, inclusief position:fixed elementen. Boven de balk wordt dan het canvas zichtbaar, en dat canvas erft zijn kleur van — hier --bs-body-bg (#f2f6fc). Resultaat: een grijze band boven de witte balk, elke keer dat je ververst. Waarom niet gewoon `html { background: #fff }`: er is maar ÉÉN canvaskleur voor boven- én onderkant, dus dan bounce je onderaan wit tegen de grijze footer aan. En is `height: 100%`, dus zodra een eigen achtergrond heeft dekt de body-kleur nog maar één viewport en wordt de rest van een lange pagina wit. Allebei gemeten, allebei erger dan de kwaal. Daarom hangt de kleur aan de balk zelf: een pseudo-element direct boven de top-nav dat met hem meebeweegt tijdens de bounce. Normaal staat het buiten beeld; zodra je overscrolt vult het de zone met exact de kleur van de balk. Canvas en onderkant blijven ongemoeid. ------------------------------------------------------------ */ .nav-fixed .topnav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; /* Ruim genoeg voor elke rubber-band-uitslag; de balk is fixed, dus dit kost geen documenthoogte en kan nooit scrollbars veroorzaken. */ height: 100vh; /* Volgt automatisch de klasse op