:root { --mijnsos-safe-top: env(safe-area-inset-top, 0px); --mijnsos-safe-right: env(safe-area-inset-right, 0px); --mijnsos-safe-bottom: env(safe-area-inset-bottom, 0px); --mijnsos-safe-left: env(safe-area-inset-left, 0px); } /* * Lichte platform-look: alleen lettertype en hoekafronding volgen het besturingssysteem, * niet MudBlazor's Material-default overal. De klasse op komt van het inline * script bovenaan index.html (navigator.userAgent) - geldt dus voor elke bezoeker * (browser én de native WebView-schil), niet alleen de MAUI-app. !important is nodig * omdat MudThemeProvider deze --mud-typography-*-variabelen zelf ook zet. */ html.platform-ios { --mud-typography-default-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-typography-h1-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important; --mud-typography-h2-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important; --mud-typography-h3-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important; --mud-typography-h4-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important; --mud-typography-h5-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important; --mud-typography-h6-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important; --mud-typography-subtitle1-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-typography-subtitle2-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-typography-body1-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-typography-body2-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-typography-button-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-typography-caption-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-typography-overline-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; --mud-default-borderradius: 10px !important; } html.platform-android { --mud-typography-default-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-h1-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-h2-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-h3-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-h4-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-h5-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-h6-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-subtitle1-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-subtitle2-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-body1-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-body2-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-button-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-caption-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-typography-overline-family: Roboto, "Segoe UI", Arial, sans-serif !important; --mud-default-borderradius: 6px !important; } @media (max-width: 768px) { :root { --mijnsos-safe-top: max(env(safe-area-inset-top, 0px), 24px); --mijnsos-safe-bottom: max(env(safe-area-inset-bottom, 0px), 20px); } html.maui-host { --mijnsos-safe-top: max(env(safe-area-inset-top, 0px), 28px); --mijnsos-safe-bottom: max(env(safe-area-inset-bottom, 0px), 24px); } /* Alleen actief zolang html.app-shell-fixed staat (gezet/verwijderd door menu-viewport.js zodra de flespi-dashboard-shell mount/unmount). Ooit stond deze overflow:hidden hier ongescoped op html/body/#app - dat blokkeerde het native scrollen op ELKE pagina op mobiel, niet alleen het dashboard (V2.65p-incident, zichtbaar als "kan niet meer scrollen" op willekeurige schermen). Nooit terugzetten zonder de class-gating. */ html.app-shell-fixed, html.app-shell-fixed body { height: 100%; margin: 0; overflow: hidden; } html.app-shell-fixed #app { height: 100%; min-height: 0; overflow: hidden; } }