/* LightWatch — Liquid Glass-modus. Elke regel hier hangt onder `body.liquid-glass`; zonder die class op de body verandert dit bestand niets. Laadt ná base.css, zodat de cascade klopt. De bijbehorende @keyframes staan in base.css. */ /* ─── Liquid Glass mode ──────────────────────────────────────────── */ body.liquid-glass { --logo-light: #FFFFFF; } body.liquid-glass .settings-close-btn { display: flex; margin-left: 6px; } body.liquid-glass #lg-bg { display: block; position: fixed; inset: -20px; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; } /* ── Headergordijn ──────────────────────────────────────────────── De header is transparant, dus kaartjes die eronder door scrollen moeten uitfaden. Dat gebeurde per kaartje in JS op elk scroll-event, maar tijdens een harde fling loopt de compositor vóór op die events: één frame lang stond een kaartje ongemaskeerd in de header (flikkering). Dit gordijn lost dat frame-onafhankelijk op: exact dezelfde fixed geometrie en dezelfde foto als #lg-bg, dus optisch niet van de achtergrond te onderscheiden, met een mask dat op de onderkant van de header uitvloeit. Alles wat eronder komt is per definitie al weg vóór de paint. ──────────────────────────────────────────────────────────────── */ body.liquid-glass:has(.screen.has-global-header.active) #lg-header-curtain { /* Zelfde box als #lg-bg (inset -20px), dus de foto valt exact samen */ --lg-curtain-end: calc(20px + var(--status-bar-height, env(safe-area-inset-top, 0px)) + 72px); display: block; position: fixed; inset: -20px; z-index: 148; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--lg-curtain-end) - 20px), transparent var(--lg-curtain-end)); mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--lg-curtain-end) - 20px), transparent var(--lg-curtain-end)); } /* De header zelf moet boven het gordijn blijven (basis is z-index 20). Niet bij een open gebruikersmenu: die regel zet 'm bewust op 3000. */ body.liquid-glass:not(.user-menu-open) .global-header { z-index: 151; } /* Uitloggen: `landing-screen` staat er zodra op "Ja, uitloggen" geklikt is, terwijl het dashboard nog wegschuift. Zonder deze regel blijft het dock die transitie lang staan omdat de selector hieronder nog op #screen-dashboard.active matcht. */ body.liquid-glass.landing-screen .lg-dock { display: none !important; } /* Tijdens een swipe-back gebaar (_initSwipeBack in app.js) krijgt het doelscherm al vroeg .active, zodat het achter het slepende scherm zichtbaar wordt — maar de :has()-regel hieronder zou het dock daardoor al bij de eerste paar pixels tonen, ruim vóór de swipe echt is afgerond. Deze class staat op zolang er gesleept wordt en onderdrukt het dock tot de overgang (commit of annuleren) daadwerkelijk klaar is. */ body.liquid-glass.lg-swipe-dragging .lg-dock { display: none !important; } /* Pas tonen zodra de eerste refractie-render klaar is (lg-refraction.js), anders verschijnt het dock eerst zonder glas en springt de achtergrond daarna om. */ body.liquid-glass .lg-dock { opacity: 0; } body.liquid-glass.lg-ready .lg-dock { opacity: 1; } body.liquid-glass:has(#screen-dashboard.active, #screen-user-settings.active, #screen-account.active, #screen-notif-archive.active, #screen-admin-settings.active, #screen-admin-users.active, #screen-admin-stats.active) .lg-dock { position: fixed; z-index: 200; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; display: flex; align-items: center; justify-content: space-around; width: min(calc(100vw - 32px), 460px); gap: 0; padding: 4px 8px; border-radius: 99em; isolation: isolate; overflow: visible; border: none; background: transparent; box-shadow: 0px 4px 14px 0px rgba(0,0,0,.38), 0px 10px 30px -4px rgba(0,0,0,.32); transition: padding 0.45s ease-in-out, width 0.45s ease-in-out; } /* Donkere semi-transparante achtergrond — refractie canvas is zichtbaar eronder */ body.liquid-glass .lg-dock::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: rgba(0, 0, 0, 0.60); background-image: radial-gradient(120% 70% at 20% -25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 45%, transparent 62%); pointer-events: none; z-index: 1; } /* Top + bottom border (Instagram-stijl) */ body.liquid-glass .lg-dock::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border-top: 1px solid rgba(255,255,255,0.22); border-bottom: 1px solid rgba(255,255,255,0.22); pointer-events: none; z-index: 2; } body.liquid-glass .lg-dock.lg-dock--tap { animation: lg-dock-tap 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } body.liquid-glass .lg-dock.lg-dock--report-exit { animation: lg-dock-report-exit 0.42s cubic-bezier(0.4, 0, 1, 1) forwards !important; pointer-events: none; } body.liquid-glass .lg-dock.lg-dock--swipe-enter { /* Zelfde soepele van-onderuit-in-beeld-schuiven als bij het verlaten van het meldscherm, nu ook na een voltooide swipe-back (zie _initSwipeBack). */ animation: lg-dock-report-enter 0.42s cubic-bezier(0, 0, 0.2, 1) forwards; } body.liquid-glass .lg-dock.lg-dock--report-enter { animation: lg-dock-report-enter 0.42s cubic-bezier(0, 0, 0.2, 1) forwards !important; } /* Verberg de top-tabs, maak header-slot fixed zodat made-reports-bar nog werkt */ body.liquid-glass #main-nav-tabs { display: none; } body.liquid-glass .notifs-header-slot { position: fixed; top: 0; left: 0; right: 0; z-index: 150; margin: 0; padding: 0; min-height: 54px; background: transparent; overflow: hidden; border-radius: 0; } /* Geen scrollbalken in LG mode */ body.liquid-glass * { scrollbar-width: none; } body.liquid-glass *::-webkit-scrollbar { display: none; } /* Scroll-containers starten bovenaan: verwijder de header-padding van het scherm */ body.liquid-glass #screen-dashboard.has-global-header { padding-top: 0; } /* Ruimte boven de scrolllijsten: header-hoogte + originele 12px buffer */ body.liquid-glass .notif-list-wrap, body.liquid-glass #tab-made-scroll { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px + var(--banner-space, 0px)); transition: padding-top 0.65s cubic-bezier(0.4, 0, 0.2, 1); } body.liquid-glass .cars-scroll { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px + var(--banner-space, 0px)); transition: padding-top 0.65s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Scrim op het meldscherm ─────────────────────────────────────── Dezelfde donkere laag als bij een bevestigingsvraag (rgba(0,0,0,.38)), over de hele achtergrondfoto. Dat blijft #bg-overlay: navigateTo() fadet die bij het verlaten van het scherm in 400ms uit, terwijl een scrim in een background-gradient hard zou wegspringen. Het headergordijn blijft: dat laat de content onder de header uitlopen zoals de kaartjes in de lijsten. Het hertekent wél zijn eigen kopie van de foto en ligt boven #bg-overlay, dus het krijgt de scrim apart — met dezelfde 400ms, zodat beide gelijk opgaan. ──────────────────────────────────────────────────────────────── */ body.liquid-glass #bg-overlay.report-overlay { background: rgba(0, 0, 0, 0.38); } /* Bedankscherm: donkerder dan het meldscherm zelf, zodat de content (die hier geen kaart-achtergrond heeft) goed leesbaar blijft. */ body.liquid-glass #bg-overlay.reported-overlay { background: rgba(0, 0, 0, 0.60); } body.liquid-glass #lg-header-curtain { transition: box-shadow 400ms ease; } body.liquid-glass:has(#screen-report.active) #lg-header-curtain { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.38); } body.liquid-glass:has(#screen-reported.active) #lg-header-curtain { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.60); } /* Meldformulier scrollt op dezelfde manier onder de header door */ body.liquid-glass #screen-report.has-global-header { padding-top: 0; } body.liquid-glass #screen-report .screen-content { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px + var(--banner-space, 0px)); /* GEEN mask-image hier: een masker op de scroll-container maakt een nieuwe backdrop-root, waardoor élk backdrop-filter binnen dit scherm (info-card, lamptegels, knoppen) niets meer te vervagen heeft en het glas verdwijnt. Het uitfaden onder de transparante header doet #lg-header-curtain. */ } /* Ruimte onder de lijsten zodat laatste kaartje 20px boven het dock uitkomt. Padding op de binnenste div (niet de scroll-container) — betrouwbaarder in WebKit/iOS. --lg-list-pad wordt dynamisch gezet via JS (_lgUpdateScrollPadding). */ body.liquid-glass #notif-list, body.liquid-glass #tab-made-list, body.liquid-glass #archive-list, body.liquid-glass .cars-scroll { padding-bottom: var(--lg-list-pad, calc(85px + max(16px, env(safe-area-inset-bottom, 16px)))); } /* Content blijft boven het dock: de vaste bottom-padding zou anders een scrollbare rest opleveren waar niets in staat (_lgUpdateScrollLock). */ body.liquid-glass .screen-content.lg-no-scroll { overflow-y: hidden; } /* Anders telt de bottom-padding van de scroll-container hierbovenop en scrollt het laatste kaartje veel te ver door. */ body.liquid-glass #screen-notif-archive .screen-content { padding-bottom: 0; } /* Dashboard-card gebruikt volledige hoogte (geen top-nav meer in flow). De banner-ruimte zit in LG-mode al in de padding van de scrolllijsten. */ body.liquid-glass .dashboard-card, body.liquid-glass #screen-dashboard .dashboard-card { margin-top: 0; } /* "Melding maken" en "auto toevoegen" FAB verbergen in LG mode */ body.liquid-glass #dashboard-report-action, body.liquid-glass #add-car-fab-wrap { display: none !important; } /* Extra padding van has-report-btn niet meer nodig in LG mode */ body.liquid-glass #screen-dashboard.has-report-btn, body.liquid-glass #screen-notif-archive.has-report-btn { padding-bottom: 0; } /* ── Liquid Glass kaartjes ────────────────────────────────────────── */ body.liquid-glass .notif-item, body.liquid-glass .car-card, body.liquid-glass .empty-card { position: relative; background: rgba(255, 255, 255, 0.07); border: none; box-shadow: 0 4px 16px rgba(0,0,0,.10); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); color: rgba(0,0,0,.85); } /* Op een lichte achtergrondfoto verdwijnt lichtglas: tekst en iconen vallen weg. Deze kaartjes krijgen daarom een donkere vlakvulling in de stijl van het dock (dezelfde highlight-gradient, lichter dan de .60 van het dock zelf). Let op: lg-refraction.js schildert dezelfde kaartjes in het world-canvas — die vulling moet meeveranderen, anders wijkt het stuk onder het dock af. */ body.liquid-glass .empty-card, body.liquid-glass .car-card, body.liquid-glass .notif-item { background-color: rgba(0, 0, 0, 0.32); background-image: radial-gradient(120% 70% at 20% -25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 45%, transparent 62%); color: rgba(255, 255, 255, 0.85); } body.liquid-glass .notif-item::before, body.liquid-glass .car-card::before, body.liquid-glass .empty-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } /* Oranje blijft de signaalkleur, maar op een donkere basis in plaats van rechtstreeks op de foto — anders is dit het enige lichte kaartje in de lijst. */ body.liquid-glass .notif-unread { border-left: none; background-color: rgba(0, 0, 0, 0.38); background-image: linear-gradient(rgba(232, 100, 20, 0.16), rgba(232, 100, 20, 0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 8px 24px rgba(0,0,0,.14); } /* Beoordeeld, nog niet gerepareerd: neutraal donker glas zoals een auto-kaartje. background-color en niet de shorthand, anders sneuvelt de highlight-gradient uit de regel hierboven. */ body.liquid-glass .notif-correct-unrepaired { border-left: none; background-color: rgba(0, 0, 0, 0.32); box-shadow: 0 4px 16px rgba(0,0,0,.10); } /* Beoordeeld/afgehandeld: minder prominent dan een openstaande melding, maar wel in dezelfde donkere stijl (staat ná de regel hierboven, dus die wint). */ body.liquid-glass .notif-item--resolved { background-color: rgba(0, 0, 0, 0.20); box-shadow: 0 2px 10px rgba(0,0,0,.08); } /* Tekst in glass kaartjes wit */ body.liquid-glass .notif-title, body.liquid-glass .car-card-plate, body.liquid-glass .car-card-brand, body.liquid-glass .car-card-name { color: #ffffff; } body.liquid-glass .notif-meta, body.liquid-glass .notif-meta strong, body.liquid-glass .notif-date, body.liquid-glass .car-card-date, body.liquid-glass .car-card-lightcheck { color: #ffffff; } /* !important: de algemene "alle tekst wit"-regel voor de LightCheck-schermen verderop bevat een ID via :is() en is daardoor specifieker dan een gewone class-selector hier — zonder !important overschrijft die de statuskleur. */ body.liquid-glass .lightcheck-status-badge--ok { color: #30D158 !important; } body.liquid-glass .lightcheck-status-badge--defect { color: #FF6B6B !important; } body.liquid-glass .notif-status-dot--pending { background: #ffffff; border-color: rgba(255, 255, 255, 0.50); color: rgba(155, 28, 28, 0.90); } body.liquid-glass .notif-status-dot--correct, body.liquid-glass .notif-status-dot--repaired { background: #ffffff; border-color: rgba(255, 255, 255, 0.50); color: #1B8C3A; } body.liquid-glass .notif-status-dot--incorrect { background: #ffffff; border-color: rgba(255, 255, 255, 0.50); color: #B71C1C; } body.liquid-glass .notif-status-dot--expired { background: #ffffff; border-color: rgba(255, 255, 255, 0.50); color: #6B6B6B; } /* Expanded notif card tekst in LG mode */ body.liquid-glass .reporter-expand-title, body.liquid-glass .reporter-expand-loading, body.liquid-glass .reporter-detail-name { color: #ffffff; } body.liquid-glass .reporter-detail-meta, body.liquid-glass .trust-badge-inline { color: rgba(255, 255, 255, 0.85); } body.liquid-glass .reporter-detail-row { border-bottom-color: rgba(255, 255, 255, 0.15); } body.liquid-glass .reporter-expand-inner { border-top-color: rgba(255, 255, 255, 0.15); } body.liquid-glass .trust-badge { background: rgba(255, 255, 255, 0.20); color: #ffffff; } body.liquid-glass .notif-expand-close { background: #ffffff; } body.liquid-glass .notif-expand-close .material-icons-round { color: #666666; } body.liquid-glass .notif-action-correct { background: #ffffff; color: #1B8C3A; } body.liquid-glass .notif-action-incorrect { background: #ffffff; color: #B71C1C; } body.liquid-glass .notif-action-repaired { background: #ffffff; color: #2E7D32; } /* Backdrop weg in LG mode */ body.liquid-glass .notif-expand-backdrop { background: transparent !important; } /* Verdict confirm sheet + crop modal als glass */ body.liquid-glass #verdict-confirm-overlay.modal-overlay, body.liquid-glass #crop-modal-overlay.modal-overlay { background: rgba(0, 0, 0, 0.38); animation-name: overlayFadeInLG; } body.liquid-glass #verdict-confirm-overlay.modal-overlay.closing, body.liquid-glass #crop-modal-overlay.modal-overlay.closing { animation-name: overlayFadeOutLG; } body.liquid-glass #verdict-confirm-overlay .modal-box, body.liquid-glass #crop-modal-overlay .modal-box { position: relative; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); overflow: hidden; } body.liquid-glass #verdict-confirm-overlay .modal-box::before, body.liquid-glass #crop-modal-overlay .modal-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #verdict-confirm-overlay .modal-title, body.liquid-glass #verdict-confirm-overlay .verdict-confirm-text { color: #ffffff; } body.liquid-glass #verdict-confirm-overlay .verdict-confirm-icon--correct, body.liquid-glass #verdict-confirm-overlay .verdict-confirm-icon--repaired { background: rgba(52, 199, 89, 0.25); color: #ffffff; } body.liquid-glass #verdict-confirm-overlay .verdict-confirm-icon--incorrect { background: rgba(183, 28, 28, 0.25); color: #ffffff; } body.liquid-glass #verdict-confirm-overlay .modal-cancel { position: relative; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; color: #ffffff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 -1px 0 rgba(0, 0, 0, 0.14) inset, 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass #verdict-confirm-overlay .modal-cancel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.32) 28%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.20) 76%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } body.liquid-glass #verdict-confirm-overlay .modal-cancel::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; border-radius: inherit; z-index: 2; } body.liquid-glass #verdict-confirm-overlay .modal-cancel:hover { filter: brightness(1.08); } /* ── Evaluate / repaired overlay als glass (bij 1 klik op kaartje) ── */ /* De dim blijft nog even hangen nadat de sheet is weggeschoven (0.25s), zodat het verdwijnen niet abrupt aanvoelt. */ body.liquid-glass .modal-overlay.closing { animation-duration: 0.45s; } body.liquid-glass #evaluate-overlay.modal-overlay, body.liquid-glass #logout-confirm-overlay.modal-overlay, body.liquid-glass #photo-analysis-overlay.modal-overlay, body.liquid-glass #lightcheck-incomplete-overlay.modal-overlay, body.liquid-glass #delete-car-confirm-overlay.modal-overlay, body.liquid-glass #own-delete-confirm-overlay.modal-overlay, body.liquid-glass #leave-form-confirm-overlay.modal-overlay, body.liquid-glass #repaired-overlay.modal-overlay, body.liquid-glass #avatar-picker-overlay.modal-overlay, body.liquid-glass #car-avatar-picker-overlay.modal-overlay, body.liquid-glass #abuse-reason-overlay.modal-overlay { background: rgba(0, 0, 0, 0.38); animation-name: overlayFadeInLG; } body.liquid-glass #evaluate-overlay.modal-overlay.closing, body.liquid-glass #logout-confirm-overlay.modal-overlay.closing, body.liquid-glass #photo-analysis-overlay.modal-overlay.closing, body.liquid-glass #lightcheck-incomplete-overlay.modal-overlay.closing, body.liquid-glass #delete-car-confirm-overlay.modal-overlay.closing, body.liquid-glass #own-delete-confirm-overlay.modal-overlay.closing, body.liquid-glass #leave-form-confirm-overlay.modal-overlay.closing, body.liquid-glass #repaired-overlay.modal-overlay.closing, body.liquid-glass #avatar-picker-overlay.modal-overlay.closing, body.liquid-glass #car-avatar-picker-overlay.modal-overlay.closing, body.liquid-glass #abuse-reason-overlay.modal-overlay.closing { animation-name: overlayFadeOutLG; } body.liquid-glass #evaluate-overlay .modal-box, body.liquid-glass #logout-confirm-overlay .modal-box, body.liquid-glass #photo-analysis-overlay .modal-box, body.liquid-glass #lightcheck-incomplete-overlay .modal-box, body.liquid-glass #delete-car-confirm-overlay .modal-box, body.liquid-glass #own-delete-confirm-overlay .modal-box, body.liquid-glass #leave-form-confirm-overlay .modal-box, body.liquid-glass #repaired-overlay .modal-box, body.liquid-glass #avatar-picker-overlay .modal-box, body.liquid-glass #car-avatar-picker-overlay .modal-box, body.liquid-glass #abuse-reason-overlay .modal-box { position: relative; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); overflow: hidden; } body.liquid-glass #evaluate-overlay .modal-box::before, body.liquid-glass #logout-confirm-overlay .modal-box::before, body.liquid-glass #photo-analysis-overlay .modal-box::before, body.liquid-glass #lightcheck-incomplete-overlay .modal-box::before, body.liquid-glass #delete-car-confirm-overlay .modal-box::before, body.liquid-glass #own-delete-confirm-overlay .modal-box::before, body.liquid-glass #leave-form-confirm-overlay .modal-box::before, body.liquid-glass #repaired-overlay .modal-box::before, body.liquid-glass #avatar-picker-overlay .modal-box::before, body.liquid-glass #car-avatar-picker-overlay .modal-box::before, body.liquid-glass #abuse-reason-overlay .modal-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #evaluate-overlay .modal-title, body.liquid-glass #logout-confirm-overlay .modal-title, body.liquid-glass #photo-analysis-overlay .modal-title, body.liquid-glass #lightcheck-incomplete-overlay .modal-title, body.liquid-glass #delete-car-confirm-overlay .modal-title, body.liquid-glass #own-delete-confirm-overlay .modal-title, body.liquid-glass #leave-form-confirm-overlay .modal-title, body.liquid-glass #logout-confirm-overlay .modal-sub, body.liquid-glass #photo-analysis-overlay .modal-sub, body.liquid-glass #lightcheck-incomplete-overlay .modal-sub, body.liquid-glass #delete-car-confirm-overlay .modal-sub, body.liquid-glass #own-delete-confirm-overlay .modal-sub, body.liquid-glass #leave-form-confirm-overlay .modal-sub, body.liquid-glass #repaired-overlay .modal-title, body.liquid-glass #avatar-picker-overlay .modal-title, body.liquid-glass #car-avatar-picker-overlay .modal-title, body.liquid-glass #crop-modal-overlay .modal-title, body.liquid-glass #evaluate-overlay .modal-sub, body.liquid-glass #abuse-reason-overlay .modal-title, body.liquid-glass #abuse-reason-overlay .modal-sub, body.liquid-glass #repaired-overlay .modal-sub { color: #ffffff; } /* Redenknoppen als glasknoppen, net als de choice-buttons hieronder. */ body.liquid-glass #abuse-reason-overlay .abuse-reason-btn { background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; } body.liquid-glass #abuse-reason-overlay .abuse-reason-btn:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.55); } body.liquid-glass #abuse-reason-overlay .abuse-reason-btn--cancel { color: rgba(255, 255, 255, 0.75); } /* De rapporteerknop in de actierij van een uitgeklapt kaartje. */ body.liquid-glass .notif-action-flag { background: rgba(255, 255, 255, 0.22); color: #ffffff; } body.liquid-glass .notif-action-flag--done { background: rgba(255, 179, 179, 0.30); color: #FFD6D6; } /* Choice-buttons: glass-effect */ body.liquid-glass #evaluate-overlay .choice-btn, body.liquid-glass #repaired-overlay .choice-btn { position: relative; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 -1px 0 rgba(0, 0, 0, 0.14) inset, 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass #evaluate-overlay .choice-btn::before, body.liquid-glass #repaired-overlay .choice-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.32) 28%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.20) 76%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } body.liquid-glass #evaluate-overlay .choice-btn::after, body.liquid-glass #repaired-overlay .choice-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; border-radius: inherit; z-index: 2; } body.liquid-glass #evaluate-overlay .choice-btn:hover, body.liquid-glass #repaired-overlay .choice-btn:hover { filter: brightness(1.08); } body.liquid-glass #evaluate-overlay .choice-btn .choice-label, body.liquid-glass #repaired-overlay .choice-btn .choice-label { color: #ffffff; } body.liquid-glass #evaluate-overlay .choice-btn.correct .choice-icon, body.liquid-glass #repaired-overlay .choice-btn.correct .choice-icon { color: #34C759; } body.liquid-glass #evaluate-overlay .choice-btn.incorrect .choice-icon, body.liquid-glass #repaired-overlay .choice-btn.incorrect .choice-icon { color: #FF6B6B; } body.liquid-glass #evaluate-overlay .choice-btn.repaired .choice-icon, body.liquid-glass #repaired-overlay .choice-btn.repaired .choice-icon { color: #5AC8FA; } /* Modal-cancel knop + upload-avatar-btn: zelfde glass als verdict-confirm */ body.liquid-glass #evaluate-overlay .modal-cancel, body.liquid-glass #logout-confirm-overlay .btn, body.liquid-glass #photo-analysis-overlay .btn, body.liquid-glass #lightcheck-incomplete-overlay .btn, body.liquid-glass #delete-car-confirm-overlay .btn, body.liquid-glass #own-delete-confirm-overlay .btn, body.liquid-glass #leave-form-confirm-overlay .btn, body.liquid-glass #repaired-overlay .modal-cancel, body.liquid-glass #avatar-picker-overlay .modal-cancel, body.liquid-glass #car-avatar-picker-overlay .modal-cancel, body.liquid-glass #crop-modal-overlay .modal-cancel, body.liquid-glass #avatar-picker-overlay .upload-avatar-btn, body.liquid-glass #car-avatar-picker-overlay .upload-avatar-btn { position: relative; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; color: #ffffff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 -1px 0 rgba(0, 0, 0, 0.14) inset, 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass #evaluate-overlay .modal-cancel::before, body.liquid-glass #logout-confirm-overlay .btn::before, body.liquid-glass #photo-analysis-overlay .btn::before, body.liquid-glass #lightcheck-incomplete-overlay .btn::before, body.liquid-glass #delete-car-confirm-overlay .btn::before, body.liquid-glass #own-delete-confirm-overlay .btn::before, body.liquid-glass #leave-form-confirm-overlay .btn::before, body.liquid-glass #repaired-overlay .modal-cancel::before, body.liquid-glass #avatar-picker-overlay .modal-cancel::before, body.liquid-glass #car-avatar-picker-overlay .modal-cancel::before, body.liquid-glass #crop-modal-overlay .modal-cancel::before, body.liquid-glass #avatar-picker-overlay .upload-avatar-btn::before, body.liquid-glass #car-avatar-picker-overlay .upload-avatar-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.32) 28%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.20) 76%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } body.liquid-glass #evaluate-overlay .modal-cancel::after, body.liquid-glass #logout-confirm-overlay .btn::after, body.liquid-glass #photo-analysis-overlay .btn::after, body.liquid-glass #lightcheck-incomplete-overlay .btn::after, body.liquid-glass #delete-car-confirm-overlay .btn::after, body.liquid-glass #own-delete-confirm-overlay .btn::after, body.liquid-glass #leave-form-confirm-overlay .btn::after, body.liquid-glass #repaired-overlay .modal-cancel::after, body.liquid-glass #avatar-picker-overlay .modal-cancel::after, body.liquid-glass #car-avatar-picker-overlay .modal-cancel::after, body.liquid-glass #crop-modal-overlay .modal-cancel::after, body.liquid-glass #avatar-picker-overlay .upload-avatar-btn::after, body.liquid-glass #car-avatar-picker-overlay .upload-avatar-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; border-radius: inherit; z-index: 2; } body.liquid-glass #evaluate-overlay .modal-cancel:hover, body.liquid-glass #logout-confirm-overlay .btn:hover, body.liquid-glass #photo-analysis-overlay .btn:hover, body.liquid-glass #lightcheck-incomplete-overlay .btn:hover, body.liquid-glass #delete-car-confirm-overlay .btn:hover, body.liquid-glass #own-delete-confirm-overlay .btn:hover, body.liquid-glass #leave-form-confirm-overlay .btn:hover, body.liquid-glass #repaired-overlay .modal-cancel:hover, body.liquid-glass #avatar-picker-overlay .modal-cancel:hover, body.liquid-glass #car-avatar-picker-overlay .modal-cancel:hover, body.liquid-glass #crop-modal-overlay .modal-cancel:hover, body.liquid-glass #avatar-picker-overlay .upload-avatar-btn:hover, body.liquid-glass #car-avatar-picker-overlay .upload-avatar-btn:hover { filter: brightness(1.08); } /* Avatar-optie: wit randje ipv rood in LG mode */ body.liquid-glass #avatar-picker-overlay .avatar-option, body.liquid-glass #car-avatar-picker-overlay .avatar-option { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20); } body.liquid-glass #avatar-picker-overlay .avatar-option:hover, body.liquid-glass #avatar-picker-overlay .avatar-option.selected, body.liquid-glass #car-avatar-picker-overlay .avatar-option:hover, body.liquid-glass #car-avatar-picker-overlay .avatar-option.selected { border-color: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75); } /* Crop modal: instructietekst en zoom-iconen leesbaar in LG mode */ body.liquid-glass #crop-modal-overlay p:not(.modal-title):not(#crop-moderation-error) { color: rgba(255, 255, 255, 0.72); } body.liquid-glass #crop-modal-overlay .crop-zoom-row .material-icons-round { color: rgba(255, 255, 255, 0.60) !important; } body.liquid-glass .car-card-name span { color: rgba(255, 255, 255, 0.72) !important; } body.liquid-glass .empty-card-title { color: #ffffff; } body.liquid-glass .empty-card-text { color: #ffffff; } /* ── Auto-formulier kaartjes in LG mode ──────────────────────────── */ body.liquid-glass #cars-form-panel .card, body.liquid-glass #cars-edit-panel .card { position: relative; background-color: rgba(0, 0, 0, 0.32); background-image: radial-gradient(120% 70% at 20% -25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 45%, transparent 62%); border: none; box-shadow: 0 4px 24px rgba(0,0,0,.15); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); color: #ffffff; } body.liquid-glass #cars-form-panel .card::before, body.liquid-glass #cars-edit-panel .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #cars-form-panel .card label, body.liquid-glass #cars-form-panel .card .section-label, body.liquid-glass #cars-form-panel .card .card-title, body.liquid-glass #cars-edit-panel .card label, body.liquid-glass #cars-edit-panel .card .section-label, body.liquid-glass #cars-edit-panel .card .card-title { color: #ffffff !important; } body.liquid-glass #cars-form-panel .card input, body.liquid-glass #cars-edit-panel .card input { background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 255, 255, 0.45); color: #ffffff; } body.liquid-glass #cars-form-panel .card input::placeholder, body.liquid-glass #cars-edit-panel .card input::placeholder { color: rgba(255, 255, 255, 0.85); } body.liquid-glass #cars-form-panel .card input:focus, body.liquid-glass #cars-edit-panel .card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.18); } /* ── Verberg lg-bg op splash (voorkomt inner-shadow via blurred backdrop) ── */ body.liquid-glass:has(#screen-splash.active) #lg-bg { display: none; } body.liquid-glass #add-car-header-btn.is-dismissing { animation: add-car-btn-dismiss 0.30s cubic-bezier(0.4, 0, 0.6, 1) forwards !important; pointer-events: none !important; } body.liquid-glass #add-car-header-btn { display: flex; position: relative; background: rgba(232, 123, 46, 0.65); color: #ffffff; border: none; box-shadow: 0 2px 8px rgba(200, 96, 16, 0.30); opacity: 0; transform: scale(0.2); pointer-events: none; } body.liquid-glass #add-car-header-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } /* Alleen tonen als het dashboard óók het enige actieve scherm is — anders popt de knop weer op zodra je vanaf de auto's-tab naar account/archief/admin navigeert. */ body.liquid-glass:has(#screen-dashboard.active):not(:has(.screen.active:not(#screen-dashboard))):has(#tab-autos.tab-content.active):has(#cars-list-panel.active) #add-car-header-btn:not(.is-hiding) { animation: add-car-btn-pop 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; pointer-events: auto; } body.liquid-glass #add-car-header-btn.is-hiding { opacity: 0 !important; transform: scale(0.2) !important; pointer-events: none !important; animation: none !important; } body.liquid-glass #add-car-header-btn:hover { background: var(--primary-dark); } /* ── Lege kaart staat op juiste hoogte (gelijk aan eerste auto-kaartje) ── */ /* !important nodig omdat de inline style="padding: 8px 14px 0" anders wint */ body.liquid-glass #notif-empty { padding-top: 0 !important; } /* ── Lege kaart staat op goede hoogte (padding alleen als lijst items heeft) ── */ body.liquid-glass #notif-list:empty, body.liquid-glass #tab-made-list:empty { padding-bottom: 0; } /* ── Hamburger popup menu transparant in Liquid Glass mode ── */ body.liquid-glass .user-menu { background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.40); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); overflow: clip; } body.liquid-glass .user-menu-item, body.liquid-glass .user-menu-item .material-icons-round { color: #ffffff; } body.liquid-glass .user-menu-item:hover, body.liquid-glass .user-menu-item:hover .material-icons-round { color: #ffffff; } body.liquid-glass .user-menu-item:hover { background: rgba(255, 255, 255, 0.25); } /* ── Hamburger knop als glazen bol (alleen in Liquid Glass mode) ── */ body.liquid-glass #user-menu-btn { position: relative; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); color: #ffffff; } body.liquid-glass #user-menu-btn::before { display: block; content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #user-menu-btn:hover { background: rgba(255, 255, 255, 0.32); color: #ffffff; } /* ── Melding-scherm (screen-report + anonieme melding) ── */ /* Zelfde donkere vulling als de kaartjes in de auto's-/meldingenlijst; de rand komt van ::before */ body.liquid-glass :is(#screen-report, #screen-anon-report) .info-card { position: relative; background-color: rgba(0, 0, 0, 0.32); background-image: radial-gradient(120% 70% at 20% -25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 45%, transparent 62%); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); color: #ffffff; } body.liquid-glass :is(#screen-report, #screen-anon-report) .info-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass :is(#screen-report, #screen-anon-report) .info-card .card-title { color: #ffffff; } body.liquid-glass :is(#screen-report, #screen-anon-report) label, body.liquid-glass :is(#screen-report, #screen-anon-report) .light-label { color: rgba(255, 255, 255, 0.92); } /* Zelfde veldstijl als het kenteken-veld in het auto-formulier; daar ligt het veld op een glaskaart, hier direct op de achtergrond — vandaar de eigen backdrop-filter zodat het er identiek uitziet. */ body.liquid-glass :is(#screen-report, #screen-anon-report) .plate-input-wrapper .plate-input { background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.45); color: #ffffff; -webkit-text-fill-color: #ffffff; } body.liquid-glass :is(#screen-report, #screen-anon-report) .plate-input-wrapper .plate-input::placeholder { color: rgba(255, 255, 255, 0.85); -webkit-text-fill-color: rgba(255, 255, 255, 0.85); } body.liquid-glass :is(#screen-report, #screen-anon-report) .plate-input-wrapper .plate-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.18); outline: none; } body.liquid-glass :is(#screen-report, #screen-anon-report) .plate-clear-btn { color: rgba(255, 255, 255, 0.85); } /* Lampen-knoppen in LG mode */ /* Lamptegels in Liquid Glass (meldscherm én anonieme melding) */ body.liquid-glass :is(#screen-report, #screen-anon-report) .light-btn { position: relative; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } /* Randlicht alleen op de hoeken, net als bij de auto-kaartjes */ body.liquid-glass :is(#screen-report, #screen-anon-report) .light-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass :is(#screen-report, #screen-anon-report) .light-btn.selected { background: rgba(240, 128, 32, 0.28); box-shadow: 0 6px 24px rgba(240, 128, 32, 0.30); } body.liquid-glass :is(#screen-report, #screen-anon-report) .light-btn.selected::before { background: linear-gradient(135deg, rgba(255,214,170,.90) 0%, rgba(255,196,140,.30) 22%, rgba(255,190,130,.00) 42%, rgba(255,190,130,.00) 58%, rgba(255,196,140,.26) 78%, rgba(255,214,170,.85) 100% ); } @media (hover: hover) { body.liquid-glass :is(#screen-report, #screen-anon-report) .light-btn:hover { border-color: transparent; } } body.liquid-glass :is(#screen-report, #screen-anon-report) .light-group-title, body.liquid-glass :is(#screen-report, #screen-anon-report) .light-hint { color: rgba(255, 255, 255, 0.75); } body.liquid-glass :is(#screen-report, #screen-anon-report) .light-label { color: #ffffff; } body.liquid-glass #screen-report .light-circle { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.liquid-glass #screen-report .light-btn.selected .light-circle { background: rgba(232, 123, 46, 0.30); border-color: rgba(232, 123, 46, 0.80); } body.liquid-glass :is(#screen-report, #screen-anon-report) .light-btn.selected .light-label, body.liquid-glass :is(#screen-report, #screen-anon-report) .light-btn.selected .light-hint { color: #ffffff; } /* ── Bottom action buttons in LG mode ── */ body.liquid-glass .bottom-action .btn.primary, body.liquid-glass #screen-report .bottom-action .btn.primary { background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); color: #ffffff; } body.liquid-glass .bottom-action .btn.primary:not(:disabled):hover, body.liquid-glass #screen-report .bottom-action .btn.primary:not(:disabled):hover { background: rgba(255, 255, 255, 0.30); } body.liquid-glass .bottom-action .btn.primary:disabled { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.45); } /* ── Zelfde glas-look voor de knoppen op de bedankschermen ── Deze staan in .success-actions, niet in .bottom-action, en kregen anders nog de oude oranje gradient-knop uit base.css. */ body.liquid-glass #screen-reported .success-actions .btn.primary, body.liquid-glass #anon-report-success .success-actions .btn.primary { background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); color: #ffffff; } body.liquid-glass #screen-reported .success-actions .btn.primary:hover, body.liquid-glass #anon-report-success .success-actions .btn.primary:hover { background: rgba(255, 255, 255, 0.30); } /* anon-report-success zit, anders dan screen-reported, niet standaard op witte tekst — de donkere foto-wash (#app-wrap::before) maakt de standaard donkere tekst hier onleesbaar. */ body.liquid-glass #anon-report-success .success-title, body.liquid-glass #anon-report-success .success-msg, body.liquid-glass #anon-report-success .success-msg p, body.liquid-glass #anon-report-success .success-msg li { color: #ffffff; } /* Extra lokale dim bovenop de gedeelde landing-wash (die staat ook achter login/register/etc. en mag daar niet donkerder van worden). */ body.liquid-glass #anon-report-success { background: rgba(0, 0, 0, 0.35); } /* ── Buttons in edit/form panels: border gelijk aan menu ── */ body.liquid-glass #cars-edit-panel .card .btn, body.liquid-glass #cars-form-panel .card .btn, body.liquid-glass #adm-form-panel .adm-form-actions .btn { position: relative; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 -1px 0 rgba(0, 0, 0, 0.14) inset, 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass #cars-edit-panel .card .btn:not(:disabled), body.liquid-glass #cars-form-panel .card .btn:not(:disabled), body.liquid-glass #adm-form-panel .adm-form-actions .btn:not(:disabled) { color: #ffffff !important; } /* Gradient border */ body.liquid-glass #cars-edit-panel .card .btn::before, body.liquid-glass #cars-form-panel .card .btn::before, body.liquid-glass #adm-form-panel .adm-form-actions .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.32) 28%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.20) 76%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* Lens flare: elliptisch speculair highlight linksboven */ body.liquid-glass #cars-edit-panel .card .btn:not(:disabled)::after, body.liquid-glass #cars-form-panel .card .btn:not(:disabled)::after, body.liquid-glass #adm-form-panel .adm-form-actions .btn:not(:disabled)::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; border-radius: inherit; z-index: 2; } body.liquid-glass #screen-report .bottom-action.lg-report-enter { animation: report-action-enter 450ms cubic-bezier(0.4, 0, 0.2, 1) both; } body.liquid-glass #screen-report .bottom-action.lg-report-exit { animation: report-action-exit 450ms cubic-bezier(0.4, 0, 0.2, 1) both; } body.liquid-glass :is(#screen-report, #screen-anon-report) .bottom-action .btn, body.liquid-glass :is(#screen-report, #screen-anon-report) .bottom-action .btn.primary { position: relative; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18); overflow: hidden; } body.liquid-glass :is(#screen-report, #screen-anon-report) .bottom-action .btn:not(:disabled) { color: #ffffff !important; } body.liquid-glass :is(#screen-report, #screen-anon-report) .bottom-action .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } body.liquid-glass :is(#screen-report, #screen-anon-report) .bottom-action .btn:not(:disabled)::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; border-radius: inherit; z-index: 2; } /* ── Instellingen-pagina in LG mode ── */ body.liquid-glass #screen-user-settings .sub-header-pill, body.liquid-glass #screen-account .sub-header-pill { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #ffffff; box-shadow: none; } body.liquid-glass #screen-user-settings .logout-btn, body.liquid-glass #screen-account .logout-btn { background: rgba(255, 255, 255, 0.15); color: #ffffff; } body.liquid-glass #screen-user-settings .logout-btn:hover, body.liquid-glass #screen-account .logout-btn:hover { background: rgba(255, 255, 255, 0.25); } /* Zelfde donkere vulling als de kaartjes in de lijsten; de rand komt van ::before */ body.liquid-glass #screen-user-settings .settings-section, body.liquid-glass #screen-account .settings-section { position: relative; background-color: rgba(0, 0, 0, 0.32); background-image: radial-gradient(120% 70% at 20% -25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 45%, transparent 62%); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass #screen-user-settings .settings-section::before, body.liquid-glass #screen-account .settings-section::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #screen-user-settings .settings-section-title, body.liquid-glass #screen-account .settings-section-title { color: #ffffff; } body.liquid-glass #screen-user-settings .settings-row, body.liquid-glass #screen-account .settings-row { border-top-color: rgba(255, 255, 255, 0.12); } body.liquid-glass #screen-user-settings .settings-row-label, body.liquid-glass #screen-account .settings-row-label { color: #ffffff; } body.liquid-glass #screen-user-settings .settings-row-sub, body.liquid-glass #screen-account .settings-row-sub { color: #ffffff; } body.liquid-glass #screen-account .plan-usage li, body.liquid-glass #screen-account .plan-badge:not(.plan-badge--paid) { color: #ffffff; } /* Alle overige tekst op de instellingen-pagina volledig wit in LG-mode */ body.liquid-glass #screen-user-settings, body.liquid-glass #screen-user-settings .screen-content, body.liquid-glass #screen-user-settings p, body.liquid-glass #screen-user-settings span, body.liquid-glass #screen-user-settings label { color: #ffffff; } /* Foutmeldingen blijven rood */ body.liquid-glass #screen-user-settings .error-msg { color: var(--error); } body.liquid-glass #screen-user-settings .bg-swatch-label, body.liquid-glass #screen-user-settings .bg-swatch.is-active .bg-swatch-label { color: #ffffff; } body.liquid-glass #screen-user-settings .divider, body.liquid-glass #screen-account .divider { border-color: rgba(255, 255, 255, 0.12); } body.liquid-glass #screen-user-settings .theme-select, body.liquid-glass #screen-user-settings select, body.liquid-glass #screen-account .field { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; } body.liquid-glass #screen-account .field::placeholder { color: rgba(255, 255, 255, 0.70); } body.liquid-glass #screen-account .field:focus { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.55); outline: none; } body.liquid-glass #screen-user-settings .toggle-slider { background: rgba(255, 255, 255, 0.25); } body.liquid-glass #screen-user-settings .toggle-switch input:checked + .toggle-slider { background: var(--primary); } body.liquid-glass #screen-user-settings .sub-header, body.liquid-glass #screen-account .sub-header, body.liquid-glass #screen-notif-archive .sub-header { display: none; } body.liquid-glass #screen-user-settings .btn, body.liquid-glass #screen-admin-settings .screen-content .btn { position: relative; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 -1px 0 rgba(0, 0, 0, 0.14) inset, 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass #screen-user-settings .btn:not(:disabled), body.liquid-glass #screen-admin-settings .screen-content .btn:not(:disabled) { color: #ffffff !important; } body.liquid-glass #screen-user-settings .btn::before, body.liquid-glass #screen-admin-settings .screen-content .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.32) 28%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.20) 76%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } body.liquid-glass #screen-user-settings .btn:not(:disabled)::after, body.liquid-glass #screen-admin-settings .screen-content .btn:not(:disabled)::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; border-radius: inherit; z-index: 2; } body.liquid-glass #screen-account .account-success-msg { color: rgba(180, 255, 200, 0.90); font-size: 13px; font-weight: 600; } body.liquid-glass #screen-account .btn { position: relative; width: auto; align-self: flex-end; height: 44px; padding: 0 22px; font-size: 15px; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 -1px 0 rgba(0, 0, 0, 0.14) inset, 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass #screen-account .btn:not(:disabled) { color: #ffffff !important; } body.liquid-glass #screen-account .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.32) 28%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.20) 76%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } body.liquid-glass #screen-account .btn:not(:disabled)::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; border-radius: inherit; z-index: 2; } body.liquid-glass .bg-swatch-img { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25); } body.liquid-glass .bg-swatch.is-active .bg-swatch-img { box-shadow: 0 0 0 3px var(--primary), 0 2px 10px rgba(0, 0, 0, 0.3); } body.liquid-glass .bg-swatch-label { color: var(--lg-light); } /* ─── Broadcast banner in Liquid Glass ───────────────────────────── In LG-mode heeft het dashboard geen header-padding (de header is fixed), waardoor de banner in de normale flow onder de statusbalk verdween. Hier zweeft hij als glaskaartje onder de header en boven de content; het dock (z 200) en de header (z 20, maar fixed erboven) blijven bereikbaar. ──────────────────────────────────────────────────────────────── */ body.liquid-glass .broadcast-banner { /* Gelijk aan de padding-top van de scrolllijsten: het eerste kaartje */ top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px); width: min(calc(100vw - 28px), 466px); padding: 0; } body.liquid-glass .screen.has-global-header { padding-top: calc(72px + var(--status-bar-height, env(safe-area-inset-top, 0px)) + var(--banner-space, 0px)); } body.liquid-glass .broadcast-banner.visible { padding: 0; max-height: 300px; } /* De tweede banner schuift onder de eerste door */ body.liquid-glass #user-message-banner.visible ~ #broadcast-banner { top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px + var(--banner-offset, 0px)); } body.liquid-glass #user-message-banner { margin-bottom: 0; } body.liquid-glass #user-message-banner.visible { padding: 0; margin-bottom: 0; } body.liquid-glass .broadcast-banner-inner, body.liquid-glass #user-message-banner .broadcast-banner-inner { position: relative; pointer-events: auto; background: rgba(255, 255, 255, 0.10); border: none; border-radius: var(--r-lg); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); color: #ffffff; } /* Zelfde lichtrand als de andere glaskaartjes */ body.liquid-glass .broadcast-banner-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass .broadcast-banner-text { color: #ffffff; } body.liquid-glass .broadcast-banner-close { color: rgba(255, 255, 255, 0.75); } body.liquid-glass .broadcast-banner--notificatie .broadcast-banner-icon { color: #7FC4FF; } body.liquid-glass .broadcast-banner--waarschuwing .broadcast-banner-icon { color: #FF9A8B; } body.liquid-glass .broadcast-banner--succes .broadcast-banner-icon { color: #6FE59A; } /* ─── Landing (uitgelogd) in Liquid Glass ────────────────────────── De achtergrondafbeelding kreeg een witte 75%-overlay (#app-wrap::before). In LG-mode wordt dat de donkere scrim die ook bij het openen van het menu over de achtergrond valt (rgba(0,0,0,.38)). De hero-card blijft licht met antraciet tekst. ──────────────────────────────────────────────────────────────── */ body.liquid-glass:has(#screen-landing.active) #app-wrap::before, body.liquid-glass:has(#screen-login.active) #app-wrap::before, body.liquid-glass:has(#screen-register.active) #app-wrap::before, body.liquid-glass:has(#screen-activate.active) #app-wrap::before, body.liquid-glass:has(#screen-verify.active) #app-wrap::before, body.liquid-glass:has(#screen-forgot.active) #app-wrap::before, body.liquid-glass:has(#screen-anon-report.active) #app-wrap::before { background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)), var(--app-bg) center / cover no-repeat; } body.liquid-glass .hero-card { position: relative; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } /* Glasrand i.p.v. een doorlopende lijn: alleen de hoeken lichten op */ body.liquid-glass .hero-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; } body.liquid-glass .hero-title { color: #ffffff; } body.liquid-glass .hero-sub { color: #ffffff; } /* Witte bolletjes; de voortgangsbalk in de actieve dot loopt grijs vol */ body.liquid-glass .dot-ind { background: rgba(255, 255, 255, 0.90); } body.liquid-glass .dot-ind.active { background: rgba(255, 255, 255, 0.90); } /* Logo-oranje; half-transparant wit zou over de witte dot wegvallen */ body.liquid-glass .dot-ind.active::after { background: var(--primary); } /* Landing-knoppen als glas, zoals de knoppen in de instellingen */ body.liquid-glass #btn-landing-register, body.liquid-glass #btn-landing-login, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .btn { position: relative; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: none; color: #ffffff !important; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass #btn-landing-register::before, body.liquid-glass #btn-landing-login::before, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.30) 8%, rgba(255,255,255,.00) 20%, rgba(255,255,255,.00) 80%, rgba(255,255,255,.26) 92%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } body.liquid-glass #btn-landing-register::after, body.liquid-glass #btn-landing-login::after, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .btn:not(:disabled)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse 88% 78% at 28% -8%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.00) 72% ); pointer-events: none; z-index: 2; } body.liquid-glass #btn-landing-register:hover, body.liquid-glass #btn-landing-login:hover, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .btn:not(:disabled):hover { filter: brightness(1.10); } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .btn:disabled { background: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.55) !important; box-shadow: none; } /* ─── Auth-schermen (aanmaken / inloggen / activeren / wachtwoord vergeten / verifiëren) in Liquid Glass ───────────────────────── */ body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .card, body.liquid-glass #screen-register .screen-content > .card:nth-child(2), body.liquid-glass #screen-register .screen-content > .card:nth-child(3) { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); color: #ffffff; } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .card-title, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .section-label, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .section-label span, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) label, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .alt-link, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .required-note, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .verify-heading, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .verify-sub, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .verify-timer-text, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .verify-resend-msg, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .field-error-msg { color: #ffffff; } /* Het icoon staat in een lichte cirkel (--primary-light): wit valt daar weg, antraciet leest wél. */ body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .verify-icon .material-icons-round { color: #2E3338; } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .required-asterisk, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .required-note .required-asterisk { color: #ffffff; } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .link-btn { color: #ffffff; text-decoration: underline; } body.liquid-glass :is(#screen-register, #screen-activate) .terms-consent-box { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); } body.liquid-glass :is(#screen-register, #screen-activate) .terms-consent-check:checked + .terms-consent-box { background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.85); } body.liquid-glass :is(#screen-register, #screen-activate) .terms-consent-check:checked + .terms-consent-box .material-icons-round { color: var(--primary-dark); } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) input:not([type="checkbox"]):not([type="radio"]), body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) select, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) textarea { background-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; -webkit-text-fill-color: #ffffff; } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) input:not([type="checkbox"]):not([type="radio"])::placeholder, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) textarea::placeholder { color: rgba(255, 255, 255, 0.60); -webkit-text-fill-color: rgba(255, 255, 255, 0.60); } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) input:not([type="checkbox"]):not([type="radio"]):focus, body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) textarea:focus { background-color: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.55); outline: none; } /* Het kentekenveld houdt zijn mono-uppercase look, maar krijgt dezelfde veldhoogte als de andere formuliervelden op deze schermen. */ body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .plate-input { font-size: 16px; letter-spacing: 2px; } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify) .pw-toggle-btn { color: rgba(255, 255, 255, 0.80); } /* De ring van de spinner is standaard rgba(0,0,0,.12); op de achtergrondfoto leest dat als een zwarte cirkel. */ body.liquid-glass .spinner { border-color: rgba(255, 255, 255, 0.85); border-top-color: var(--primary); } /* Login-spinner: geen witte waas, maar dezelfde donkere waas over de achtergrond als de modals (o.a. het uitlog-bevestigingsvenster). De spinner staat erboven. */ body.liquid-glass #login-loading-overlay { background: rgba(0, 0, 0, 0.65); } /* Foutmelding bij inloggen als glaskaartje — ook op de meldingsschermen (bv. "al binnen de afgelopen maand gemeld"), die stonden nog in het standaard zwarte kaartje met rode tekst. */ body.liquid-glass :is(#screen-login, #screen-register, #screen-activate, #screen-forgot, #screen-report, #screen-anon-report) :is(.login-error-inner, .form-error-inner) { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify, #screen-report, #screen-anon-report) :is(.login-error-text, .form-error-text) { color: #ffffff; } body.liquid-glass :is(#screen-register, #screen-login, #screen-activate, #screen-forgot, #screen-verify, #screen-report, #screen-anon-report) :is(.login-error-icon, .form-error-icon) { color: #FF9A8B; } /* Melding-maken-knop in de landing-header: zelfde look als de auto-toevoegen-knop in de app-header */ body.liquid-glass #anon-report-fab { background: rgba(232, 123, 46, 0.65); color: #ffffff; border: none; box-shadow: 0 2px 8px rgba(200, 96, 16, 0.30); } body.liquid-glass #anon-report-fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #anon-report-fab:hover { background: var(--primary-dark); filter: none; } /* ─── Beheerdersschermen in Liquid Glass ─────────────────────────── Statistieken, gebruikers, beheerdersinstellingen en de zijbalk. De schermen houden hun sub-header (er is hier geen dock om mee terug te navigeren), maar die wordt glas zodat de lijst er zichtbaar onderdoor schuift. ──────────────────────────────────────────────────────────────── */ body.liquid-glass :is(#screen-admin-stats, #screen-admin-users, #screen-admin-settings) .sub-header-pill { background: rgba(255, 255, 255, 0.15); color: #ffffff; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); } body.liquid-glass :is(#screen-admin-stats, #screen-admin-users, #screen-admin-settings) .logout-btn { background: rgba(255, 255, 255, 0.15); color: #ffffff; } /* De sub-header (en op het gebruikersscherm ook het zoekveld) zweeft als glas onder de app-header; de lijst scrollt er zichtbaar onderdoor en verdwijnt pas bij de app-header, waar het masker hem afsnijdt. */ body.liquid-glass :is(#screen-admin-stats, #screen-admin-users, #screen-admin-settings).has-global-header { padding-top: 0; } body.liquid-glass :is(#screen-admin-stats, #screen-admin-users, #screen-admin-settings) .sub-header { position: fixed; top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 72px + var(--banner-space, 0px)); transition: top 0.65s cubic-bezier(0.4, 0, 0.2, 1); left: 50%; transform: translateX(-50%); width: min(100%, 480px); z-index: 150; } body.liquid-glass #screen-admin-users .admin-users-search-wrap { position: fixed; /* 72px + de 12px eigen padding = 84px, gelijk aan waar de kaartjes in de lijsten beginnen */ top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 72px + var(--banner-space, 0px)); transition: top 0.65s cubic-bezier(0.4, 0, 0.2, 1); left: 50%; transform: translateX(-50%); width: min(100%, 480px); z-index: 149; } /* Geen mask op de beheerdersschermen: die breekt de backdrop-filter van de kaartjes erbinnen (die worden dan volledig doorzichtig). Het uitfaden onder de header doet #lg-header-curtain. */ body.liquid-glass #screen-admin-stats .screen-content { padding-bottom: var(--lg-list-pad, calc(85px + max(16px, env(safe-area-inset-bottom, 16px)))); } /* Statistieken: geen sub-header meer, terug gaat via het dock */ body.liquid-glass #screen-admin-stats .sub-header { display: none; } body.liquid-glass #screen-admin-stats .screen-content { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px + var(--banner-space, 0px)); } /* Dit scherm heeft geen sub-header, dus alleen ruimte voor de app-header */ body.liquid-glass #screen-admin-settings .screen-content { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 88px + var(--banner-space, 0px)); padding-bottom: var(--lg-list-pad, calc(85px + max(16px, env(safe-area-inset-bottom, 16px)))); } /* Opslaan-knop compact en rechts uitgelijnd i.p.v. over de volle breedte */ body.liquid-glass #screen-admin-settings .settings-broadcast .btn.primary { align-self: flex-end; width: auto; min-width: 0; height: 38px; padding: 0 20px; font-size: 13px; } /* De Terug-knop onderin valt achter het dock; terug gaat via swipe of het tandwiel */ body.liquid-glass #screen-admin-settings .bottom-action { display: none; } /* Gebruikersoverzicht: geen sub-header, alleen het zoekveld onder de app-header. Terug gaat via het dock, dat op dit scherm blijft staan. */ body.liquid-glass #screen-admin-users .sub-header { display: none; } body.liquid-glass #screen-admin-users .admin-users-scroll { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 142px + var(--banner-space, 0px)); padding-bottom: var(--lg-list-pad, calc(85px + max(16px, env(safe-area-inset-bottom, 16px)))); } body.liquid-glass :is(#screen-admin-stats, #screen-admin-settings) .screen-content, body.liquid-glass #screen-admin-users .admin-users-scroll { transition: padding-top 0.65s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Statistieken ── */ body.liquid-glass #screen-admin-stats .stat-block { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass #screen-admin-stats .stat-block-label { color: rgba(255, 255, 255, 0.75); } body.liquid-glass #screen-admin-stats .stat-block-value { color: #ffffff; } body.liquid-glass #screen-admin-stats .stat-block-value.warn { color: #FFCF7A; } body.liquid-glass #screen-admin-stats .stat-block-value.good { color: #6FE59A; } body.liquid-glass #screen-admin-stats .stat-block-value.bad { color: #FF9A8B; } body.liquid-glass #screen-admin-stats .stat-block-value.muted { color: rgba(255, 255, 255, 0.60); } /* ── Gebruikers ── */ body.liquid-glass #screen-admin-users .admin-users-search-wrap input { background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; } body.liquid-glass #screen-admin-users .admin-users-search-wrap input::placeholder { color: rgba(255, 255, 255, 0.60); } body.liquid-glass .user-list-row { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass .user-list-name { color: #ffffff; } body.liquid-glass .user-list-email, body.liquid-glass .user-list-org { color: rgba(255, 255, 255, 0.75); } body.liquid-glass .role-badge.admin { background: rgba(179, 157, 255, 0.28); color: #E4DBFF; } body.liquid-glass .role-badge.beheerder { background: rgba(127, 196, 255, 0.28); color: #D6EBFF; } body.liquid-glass .role-badge.user { background: rgba(240, 128, 32, 0.30); color: #FFDCBC; } /* ── Beheerdersinstellingen ── */ body.liquid-glass #screen-admin-settings .settings-section { position: relative; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass #screen-admin-settings .settings-section-title, body.liquid-glass #screen-admin-settings .settings-row-label, body.liquid-glass #screen-admin-settings .settings-row-sub, body.liquid-glass #screen-admin-settings label, body.liquid-glass #screen-admin-settings p, body.liquid-glass #screen-admin-settings span { color: #ffffff; } body.liquid-glass #screen-admin-settings .error-msg { color: var(--error); } body.liquid-glass #screen-admin-settings .divider { border-color: rgba(255, 255, 255, 0.12); } body.liquid-glass #screen-admin-settings input:not([type="checkbox"]):not([type="radio"]), body.liquid-glass #screen-admin-settings select, body.liquid-glass #screen-admin-settings textarea { background-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; -webkit-text-fill-color: #ffffff; } body.liquid-glass #screen-admin-settings .toggle-slider { background: rgba(255, 255, 255, 0.25); } body.liquid-glass #screen-admin-settings .toggle-switch input:checked + .toggle-slider { background: var(--primary); } /* ── Admin-zijbalk ── */ body.liquid-glass .admin-sidebar { background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-right: 1px solid rgba(255, 255, 255, 0.20); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass .sidebar-item, body.liquid-glass .sidebar-item .material-icons-round, body.liquid-glass .sidebar-label, body.liquid-glass .sidebar-toggle, body.liquid-glass .sidebar-toggle .material-icons-round { color: #ffffff; } body.liquid-glass .sidebar-item:hover, body.liquid-glass .sidebar-item.active { background: rgba(255, 255, 255, 0.18); } body.liquid-glass .sidebar-divider { border-color: rgba(255, 255, 255, 0.18); } /* ─── LightCheck in Liquid Glass ──────────────────────────────────── LightCheck is alleen bereikbaar (menu-item) in het liquid-glass thema, dus deze schermen bestaan feitelijk alleen in LG. Zelfde aanpak als Instellingen/Account/Meldingenarchief: geen sub-header (terug gaat via swipe, zie _initSwipeBack in app.js), .settings-section als glaskaart. */ body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings) .sub-header { display: none; } /* Zonder sub-header telt alleen de app-header nog mee — zelfde offset als .cars-scroll/#screen-report .screen-content, zodat het bovenste kaartje hier op dezelfde hoogte begint als het eerste auto-kaartje. Zonder deze override blijft de oude .has-global-header-padding (80px) gewoon staan én telt de eigen 20px top-padding van .screen-content er nog eens bovenop. */ body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings).has-global-header { padding-top: 0; } body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings) .screen-content { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px + var(--banner-space, 0px)); transition: padding-top 0.65s cubic-bezier(0.4, 0, 0.2, 1); } body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-settings) .settings-section { position: relative; background-color: rgba(0, 0, 0, 0.32); background-image: radial-gradient(120% 70% at 20% -25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 45%, transparent 62%); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-settings) .settings-section::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } /* Alle overige tekst op de LightCheck-schermen wit, zoals op Instellingen/Account */ body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings), body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings) .screen-content, body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings) p, body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings) span, body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings) label, body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-checklist, #screen-lightcheck-settings) li { color: #ffffff; } body.liquid-glass :is(#screen-lightcheck-overview, #screen-lightcheck-settings) .error-msg { color: var(--error); } /* .lightcheck-issue-note en de titel erboven blijven wit, zoals de rest van de kaart (algemene span/label-regel hieronder) — geen rode waarschuwing, gewoon informatieve tekst. */ body.liquid-glass :is(#screen-lightcheck-hub, #screen-lightcheck-overview, #screen-lightcheck-settings) .divider { border-color: rgba(255, 255, 255, 0.12); } body.liquid-glass #screen-lightcheck-settings .settings-row { border-top-color: rgba(255, 255, 255, 0.12); } body.liquid-glass #screen-lightcheck-settings .theme-select, body.liquid-glass #screen-lightcheck-settings select { background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; } body.liquid-glass #screen-lightcheck-settings .toggle-slider { background: rgba(255, 255, 255, 0.25); } body.liquid-glass #screen-lightcheck-settings .toggle-switch input:checked + .toggle-slider { background: var(--primary); } /* Checklist-items: zelfde glaskaart-basis als de lamptegels op het meldformulier (.light-btn in #screen-report), met eigen ok/defect-kleuren i.p.v. "selected" */ body.liquid-glass #screen-lightcheck-checklist .light-group-title { display: inline-block; color: #ffffff; background: rgba(0, 0, 0, 0.85); border-radius: 100px; padding: 8px 18px; } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item { position: relative; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item-label { color: #ffffff; } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item-icon { color: rgba(255, 255, 255, 0.55); } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item[data-state="ok"] { background: rgba(52, 199, 89, 0.30); box-shadow: 0 6px 20px rgba(52, 199, 89, 0.28); } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item[data-state="ok"] .lightcheck-item-icon { color: #ffffff; } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item[data-state="defect"] { background: rgba(220, 70, 70, 0.30); box-shadow: 0 6px 20px rgba(220, 70, 70, 0.26); } body.liquid-glass #screen-lightcheck-checklist .lightcheck-item[data-state="defect"] .lightcheck-item-icon { color: #ffffff; } /* Bevestigingsdialoog "Nog niet alles gecontroleerd" krijgt dezelfde glass-look als de andere bevestigingssheets (uitloggen, auto verwijderen, ...) — daarom hier gewoon toegevoegd aan die bestaande, al goed afgestelde selectorgroepen (zie #logout-confirm-overlay hierboven) i.p.v. een eigen stijl opnieuw op te bouwen. */ /* ─── Beheerderstabs op het dashboard in Liquid Glass ────────────── (#tab-admin: meldingen-overzicht en accountbeheer). De headers en zoekbalken staan vast bovenin de tab; de lijsten scrollen eronder door tot onder de app-header, net als de auto- en meldingkaartjes. ──────────────────────────────────────────────────────────────── */ body.liquid-glass .admin-notifs-header, body.liquid-glass .accounts-search-wrap { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px); } body.liquid-glass .admin-notifs-scroll, body.liquid-glass .accounts-scroll { padding-bottom: var(--lg-list-pad, calc(85px + max(16px, env(safe-area-inset-bottom, 16px)))); } /* Panels zonder eigen kop (formulier/instellingen) beginnen zelf onder de header, plus de ruimte die de meldingsbanners innemen. Bij het formulier zit de padding op het paneel zelf, zodat de kaart als geheel onder de header door scrollt en de knoppen onderin boven het dock uitkomen — net als bij "Nieuwe auto". */ body.liquid-glass #adm-settings-panel .adm-settings-scroll, body.liquid-glass #adm-form-panel { padding-top: calc(var(--status-bar-height, env(safe-area-inset-top, 0px)) + 84px + var(--banner-space, 0px)); padding-bottom: var(--lg-list-pad, calc(85px + max(16px, env(safe-area-inset-bottom, 16px)))); transition: padding-top 0.65s cubic-bezier(0.4, 0, 0.2, 1); } /* Invoervelden als glas, gelijk aan het auto-formulier */ body.liquid-glass #adm-form-panel input:not([type="checkbox"]):not([type="radio"]), body.liquid-glass #adm-form-panel select { background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 255, 255, 0.45); color: #ffffff; /* Het uitklapmenu wordt door het systeem getekend; dit maakt het donker in plaats van de crème/oranje van de lichte modus */ color-scheme: dark; accent-color: var(--primary); } body.liquid-glass #adm-form-panel input::placeholder { color: rgba(255, 255, 255, 0.85); } body.liquid-glass #adm-form-panel input:focus, body.liquid-glass #adm-form-panel select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.18); } body.liquid-glass #adm-form-panel select option { background: #1C1C1E; color: #ffffff; } /* Scheidingslijn tussen "Nieuw account" en "Auto" op glas */ body.liquid-glass #adm-form-panel .divider { border-color: rgba(255, 255, 255, 0.60); } /* Uitgeschakelde knop: gedimd glas, maar met leesbare tekst i.p.v. het grijs van de lichte modus dat op glas wegvalt */ body.liquid-glass #adm-form-panel .adm-form-actions .btn:disabled { background: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.62) !important; box-shadow: none !important; } /* Kaartjes als glas, gelijk aan de auto- en meldingkaartjes */ body.liquid-glass .admin-notif-card, body.liquid-glass .account-card, body.liquid-glass .adm-form-card { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass :is(.admin-notif-card, .account-card, .adm-form-card) :is(p, span, label, h2, h3, strong, em) { color: #ffffff; } body.liquid-glass :is(.admin-notif-card, .account-card) .material-icons-round { color: rgba(255, 255, 255, 0.85); } /* ─── Account-instellingenpaneel (tandwiel op een accountkaartje) ─── De kop stond op --surface met een witte fade eronder; in glas moet dat volledig doorzichtig zijn zodat de achtergrond doorloopt. ──────────────────────────────────────────────────────────────── */ body.liquid-glass .adm-form-header { background: transparent; } body.liquid-glass .adm-form-header::after { display: none; } body.liquid-glass #adm-settings-panel .settings-item { border-bottom-color: rgba(255, 255, 255, 0.14); } body.liquid-glass #adm-settings-panel .settings-item-desc, body.liquid-glass #adm-settings-panel #adm-settings-confirm-text { color: rgba(255, 255, 255, 0.75) !important; } body.liquid-glass #adm-settings-panel .toggle-slider { background: rgba(255, 255, 255, 0.25); } body.liquid-glass #adm-settings-panel .toggle-switch input:checked + .toggle-slider { background: var(--primary); } body.liquid-glass #adm-settings-panel .adm-user-message-input { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; -webkit-text-fill-color: #ffffff; } body.liquid-glass #adm-settings-panel .adm-user-message-input::placeholder { color: rgba(255, 255, 255, 0.60); -webkit-text-fill-color: rgba(255, 255, 255, 0.60); } body.liquid-glass #adm-settings-panel .adm-user-message-input:focus { border-color: rgba(255, 255, 255, 0.55); outline: none; } /* Knoppen in de kaart (versturen/verwijderen, bevestigen/annuleren) als glas */ body.liquid-glass #adm-settings-panel .adm-form-body .btn.primary { background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); color: #ffffff; } body.liquid-glass #adm-settings-panel .adm-form-body .btn.primary:not(:disabled):hover { background: rgba(255, 255, 255, 0.30); } body.liquid-glass #adm-settings-panel .adm-form-body .btn.primary .material-icons-round { color: #ffffff; } body.liquid-glass .adm-settings-close { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.32); } body.liquid-glass .adm-settings-close .material-icons-round { color: #ffffff; } body.liquid-glass .adm-settings-close:hover { background: rgba(255, 255, 255, 0.30); } /* Zoekvelden en filters in de beheerderstabs */ body.liquid-glass .accounts-search-wrap input, body.liquid-glass .admin-notifs-header input, body.liquid-glass .admin-notifs-header select { background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; } body.liquid-glass .accounts-search-wrap input::placeholder, body.liquid-glass .admin-notifs-header input::placeholder { color: rgba(255, 255, 255, 0.60); } body.liquid-glass .admin-notifs-header :is(p, span, label) { color: #ffffff; } body.liquid-glass.is-staff #tab-admin > .nav-tabs { display: none; } body.liquid-glass.is-staff .admin-tab-viewport { padding-top: 0; } /* Twee knoppen vragen om een smaller dock dan de vijf van een gebruiker; dit geldt op elk scherm waar het dock zichtbaar is, zodat het niet verspringt bij het openen van instellingen, account of archief */ body.liquid-glass.is-staff:has(#screen-dashboard.active, #screen-user-settings.active, #screen-account.active, #screen-notif-archive.active, #screen-admin-settings.active, #screen-admin-users.active, #screen-admin-stats.active) .lg-dock { width: min(calc(100vw - 32px), 300px); } /* De knop onder de lijst is vervangen door de + in het dock */ body.liquid-glass.is-staff .adm-create-btn-wrap { display: none; } /* "Nieuw account aanmaken" mag niet achter het dock vallen */ body.liquid-glass.is-staff .adm-create-btn-wrap { padding-bottom: var(--lg-list-pad, calc(85px + max(16px, env(safe-area-inset-bottom, 16px)))); background: transparent; } /* Filterkaartjes boven het meldingen-overzicht van beheerders */ body.liquid-glass .stat-card { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass .stat-card.active { background: rgba(240, 128, 32, 0.28); border-color: rgba(255, 190, 130, 0.85); } body.liquid-glass .stat-label { color: rgba(255, 255, 255, 0.75); } body.liquid-glass .stat-value { color: #ffffff; } body.liquid-glass .stat-value.warn { color: #FFCF7A; } body.liquid-glass .stat-value.good { color: #6FE59A; } body.liquid-glass .stat-value.bad { color: #FF9A8B; } body.liquid-glass .stat-value.muted { color: rgba(255, 255, 255, 0.60); } body.liquid-glass .admin-search-input { background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; } body.liquid-glass .admin-search-input::placeholder { color: rgba(255, 255, 255, 0.60); } /* De auto-toevoegen-knop bestaat niet voor beheerders, maar hield in LG wel ruimte bezet (display:flex met opacity 0) — vandaar het gat naast het tandwiel. Voor staff dus helemaal uit de flow halen. */ body.liquid-glass.is-staff #add-car-header-btn { display: none; } /* Lichte vlakken binnen de accountkaartjes in Liquid Glass */ body.liquid-glass .account-avatar-wrap, body.liquid-glass .account-car-block { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); } body.liquid-glass .account-role-select { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; } body.liquid-glass .account-card-date, body.liquid-glass .account-car-footer { color: rgba(255, 255, 255, 0.70); } body.liquid-glass .score-dot.correct { background: rgba(111, 229, 154, 0.30); color: #DFFFEB; } body.liquid-glass .score-dot.incorrect { background: rgba(255, 154, 139, 0.30); color: #FFE3DE; } body.liquid-glass .score-dot.pending { background: rgba(255, 207, 122, 0.30); color: #FFEFD3; } body.liquid-glass .info-popup, body.liquid-glass .score-popup { background: rgba(30, 30, 32, 0.88); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.24); } body.liquid-glass :is(.info-popup, .score-popup) :is(p, span, .info-popup-label, .info-popup-value) { color: #ffffff; } body.liquid-glass .info-popup-item + .info-popup-item { border-top-color: rgba(255, 255, 255, 0.16); } /* Actieknoppen op de accountkaartjes (info, instellingen, verwijderen) */ body.liquid-glass .account-card-actions .icon-btn { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.26); color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } body.liquid-glass .account-card-actions .icon-btn:hover { background: rgba(255, 255, 255, 0.26); color: #ffffff; } body.liquid-glass .account-card-actions .icon-btn.delete-btn { background: rgba(210, 45, 45, 0.30); border-color: rgba(255, 154, 139, 0.55); color: #FFD9D3; } body.liquid-glass .account-card-actions .icon-btn.delete-btn:hover { background: rgba(210, 45, 45, 0.45); } /* Statusbadge en tekst op de meldingkaartjes van beheerders */ body.liquid-glass .verdict-badge.correct { background: rgba(111, 229, 154, 0.30); color: #DFFFEB; } body.liquid-glass .verdict-badge.incorrect { background: rgba(255, 154, 139, 0.30); color: #FFE3DE; } body.liquid-glass .verdict-badge.pending { background: rgba(240, 128, 32, 0.32); color: #FFE2C6; } body.liquid-glass .verdict-badge.repaired { background: rgba(111, 229, 154, 0.30); color: #DFFFEB; } body.liquid-glass .admin-notif-date, body.liquid-glass .admin-notif-reporter { color: rgba(255, 255, 255, 0.75); } body.liquid-glass .admin-notif-owner-popup { background: rgba(30, 30, 32, 0.88); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.24); color: #ffffff; } body.liquid-glass .account-cars-hint { color: rgba(255, 255, 255, 0.70); } /* Tandwielknop in de header: zelfde glazen bol als het hamburger-menu */ body.liquid-glass #admin-settings-btn { position: relative; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); color: #ffffff; } body.liquid-glass #admin-settings-btn::before { display: block; content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass #admin-settings-btn:hover, body.liquid-glass #admin-settings-btn.active { background: rgba(255, 255, 255, 0.32); color: #ffffff; } /* Beheerdersinstellingen: broadcast-blok en losse onderdelen */ body.liquid-glass #screen-admin-settings .settings-broadcast { border-top-color: rgba(255, 255, 255, 0.16); } body.liquid-glass #screen-admin-settings .broadcast-input, body.liquid-glass #screen-admin-settings .broadcast-urgency-select { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; -webkit-text-fill-color: #ffffff; } body.liquid-glass #screen-admin-settings .broadcast-input::placeholder { color: rgba(255, 255, 255, 0.60); -webkit-text-fill-color: rgba(255, 255, 255, 0.60); } body.liquid-glass #screen-admin-settings .broadcast-input:focus, body.liquid-glass #screen-admin-settings .broadcast-urgency-select:focus { border-color: rgba(255, 255, 255, 0.55); outline: none; } body.liquid-glass #screen-admin-settings .settings-item { border-bottom-color: rgba(255, 255, 255, 0.14); } body.liquid-glass #screen-admin-settings .settings-item-label, body.liquid-glass #screen-admin-settings .settings-item-desc { color: #ffffff; } body.liquid-glass #screen-admin-settings .settings-item-desc { color: rgba(255, 255, 255, 0.75); } /* ─── Uitlog-melding op het landingsscherm in Liquid Glass ───────── Het groene kaartje wordt glas met een groene tint, zodat het bij de rest van de LG-elementen past. ──────────────────────────────────────────────────────────────── */ body.liquid-glass .logout-success-inner { background: rgba(52, 199, 89, 0.18); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.liquid-glass .logout-success-icon { color: #8CE8A6; } body.liquid-glass .logout-success-text { color: #ffffff; } /* ─── "Account geblokkeerd"-kaartje op het inlogscherm in LG ─────── De kaart erft al het glas van de auth-schermen; alleen de tekst moet wit en het accent fel rood-oranje. ──────────────────────────────────────────────────────────────── */ body.liquid-glass #screen-login .login-blocked-text { color: #ffffff; } body.liquid-glass #screen-login .login-blocked-icon, body.liquid-glass #screen-login .login-blocked-title, body.liquid-glass #screen-login .login-blocked-text a { color: #FF6B35; } body.liquid-glass #screen-login .login-blocked-text a { text-decoration: underline; } /* ─── Snackbar / toast in LG ─────────────────────────────────────── Zelfde vulling en randgloed als de ronde "auto toevoegen"-knop in de header; tekst en icoon wit. ──────────────────────────────────────────────────────────────── */ body.liquid-glass .app-toast { background: rgba(232, 123, 46, 0.94); color: #ffffff; border: none; box-shadow: 0 2px 8px rgba(200, 96, 16, 0.30); overflow: hidden; } body.liquid-glass .app-toast::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } body.liquid-glass .app-toast__icon, body.liquid-glass .app-toast__subtitle, body.liquid-glass .verdict-snackbar-status--correct, body.liquid-glass .verdict-snackbar-status--incorrect, body.liquid-glass .verdict-snackbar-status--repaired { color: #ffffff; } body.liquid-glass .app-toast__subtitle { opacity: 0.85; } /* ─── Undo-snackbar in LG ────────────────────────────────────────── Zelfde dekkende donkere pill en positie als in light/dark mode, alleen hoger en met de glasrand van de overige LG-elementen. ──────────────────────────────────────────────────────────────── */ body.liquid-glass .undo-snackbar-inner { background: #2C2C2E; min-height: 68px; } body.liquid-glass .undo-snackbar-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.00) 42%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.65) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* "Account" zit in LG al in het dock — behalve bij staff, die dat dock-item niet heeft */ body.liquid-glass:not(.is-staff) #menu-account { display: none; } /* ─── Landingsmenu (Liquid Glass) ────────────────────────────────── De drie losse knoppen op het landingsscherm (anon-melding in de header, "Account aanmaken" en "Inloggen" onderin) maken plaats voor één ronde glasknop rechtsonder met een 3×3-raster, die een menu met dezelfde drie acties opent. De knop krijgt echte refractie via een eigen WebGL-canvas (lg-glass-refraction.js), net als het dock. ──────────────────────────────────────────────────────────────── */ body.liquid-glass #anon-report-fab, body.liquid-glass .landing-actions { display: none; } /* Het privacybeleid staat in LG-mode in het landingsmenu. */ body.liquid-glass .landing-legal { display: none; } .landing-fab { display: none; } body.liquid-glass:has(#screen-landing.active) .landing-fab { position: fixed; z-index: 201; /* Gelijk aan de horizontale padding van .hero-slider-wrap, zodat de knop rechts uitlijnt met de rand van de slider-kaart. */ right: 16px; bottom: max(4px, calc(env(safe-area-inset-bottom) - 8px)); display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; padding: 0; border: none; border-radius: 50%; background: transparent; isolation: isolate; opacity: 0; box-shadow: 0px 4px 14px 0px rgba(0,0,0,.38), 0px 10px 30px -4px rgba(0,0,0,.32); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } body.liquid-glass.lg-fab-ready:has(#screen-landing.active) .landing-fab { opacity: 1; } #landing-fab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; z-index: 0; } /* Donkere semi-transparante laag over de refractie — zelfde recept als het dock */ .landing-fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: rgba(0, 0, 0, 0.42); background-image: radial-gradient(120% 70% at 20% -25%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, transparent 62%); pointer-events: none; z-index: 1; } /* Glasrand: alleen boven- en onderkant lichten op */ .landing-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border-top: 1px solid rgba(255,255,255,0.28); border-bottom: 1px solid rgba(255,255,255,0.28); pointer-events: none; z-index: 2; } /* Na een keuze in het menu meteen weg, niet meeschuiven met de schermwissel */ body.liquid-glass:has(#screen-landing.active) .landing-fab.is-hidden { opacity: 0; pointer-events: none; transition: none; } /* Terug op de landing: dezelfde pop als de auto-toevoegen-knop in de header. _showFab() draait pas na de schermtransitie, dus zonder extra delay. */ body.liquid-glass:has(#screen-landing.active) .landing-fab.is-entering { animation: add-car-btn-pop 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; } .landing-fab:active { transform: scale(0.94); } .landing-fab.is-open { transform: scale(0.92); } .landing-fab-grid { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(3, 5px); gap: 4px; pointer-events: none; } .landing-fab-grid i { display: block; width: 5px; height: 5px; border-radius: 1.5px; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.35); animation: landing-fab-wave 2.4s ease-in-out infinite; } /* Golf van linksboven naar rechtsonder: de vertraging volgt de diagonaal (rij + kolom), zodat de drie diagonalen na elkaar oplichten. */ .landing-fab-grid i:nth-child(1) { animation-delay: 0s; } .landing-fab-grid i:nth-child(2), .landing-fab-grid i:nth-child(4) { animation-delay: 0.12s; } .landing-fab-grid i:nth-child(3), .landing-fab-grid i:nth-child(5), .landing-fab-grid i:nth-child(7) { animation-delay: 0.24s; } .landing-fab-grid i:nth-child(6), .landing-fab-grid i:nth-child(8) { animation-delay: 0.36s; } .landing-fab-grid i:nth-child(9) { animation-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { .landing-fab-grid i { animation: none; } } /* Scrim onder het menu: vangt de klik buiten het menu op */ #landing-menu-scrim { display: none; } body.liquid-glass:has(#screen-landing.active) #landing-menu-scrim { position: fixed; inset: 0; z-index: 200; display: block; background: rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } body.liquid-glass:has(#screen-landing.active) #landing-menu-scrim.is-open { opacity: 1; pointer-events: auto; } .landing-menu { display: none; } body.liquid-glass:has(#screen-landing.active) .landing-menu { position: fixed; z-index: 201; right: 11px; bottom: max(71px, calc(env(safe-area-inset-bottom) + 59px)); display: flex; flex-direction: column; gap: 2px; min-width: 208px; padding: 6px; border-radius: 20px; background: rgba(255, 255, 255, 0.09); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34); transform-origin: 100% 100%; opacity: 0; transform: translateY(10px) scale(0.92); pointer-events: none; transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); } body.liquid-glass:has(#screen-landing.active) .landing-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Glasrand om het menu */ body.liquid-glass:has(#screen-landing.active) .landing-menu::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.30) 8%, rgba(255,255,255,.00) 20%, rgba(255,255,255,.00) 80%, rgba(255,255,255,.26) 92%, rgba(255,255,255,.78) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .landing-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; border-radius: 14px; background: transparent; color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; } .landing-menu-item .material-icons-round { font-size: 20px; opacity: 0.9; } .landing-menu-item:hover { background: rgba(255, 255, 255, 0.14); } .landing-menu-item:active { background: rgba(255, 255, 255, 0.22); } /* De hero-kaart nam de ruimte over van de verdwenen knoppen onderin; laat er weer ruimte staan zodat de ronde knop niet over de dots en tekst valt. */ body.liquid-glass:has(#screen-landing.active) .hero-slider-wrap { padding-bottom: 100px; } /* ─── Knoppen met echte refractie op de uitgelogde schermen ──────── De knoppen onderin inloggen / account aanmaken / anonieme melding krijgen hetzelfde glas als de ronde landingsknop: geen backdrop-filter maar een eigen WebGL-canvas (lg-glass-refraction.js). De donkere laag zit in de shader (u_tint), omdat ::before en ::after hier de rand tekenen. Het canvas staat op z-index -1 met isolation op de knop, zodat het achter het label valt maar wel binnen de knop blijft. De selectors nemen `.bottom-action` mee omdat de bestaande glas-regels voor het meldingsscherm dat ook doen en anders zwaarder wegen. ──────────────────────────────────────────────────────────────── */ body.liquid-glass :is(#screen-login, #screen-register, #screen-anon-report, #screen-verify, #screen-activate) .bottom-action .lg-glass-btn { position: relative; isolation: isolate; background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; /* De meldingsschermen zetten hier witte inset-lijnen; die horen bij het backdrop-filter-glas en niet bij het canvas-glas. */ box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22); overflow: hidden; } body.liquid-glass :is(#screen-login, #screen-register, #screen-anon-report, #screen-verify, #screen-activate) .bottom-action .lg-glass-btn .lg-btn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: -1; } /* Rand als op de landingsknop: alleen boven- en onderkant lichten op. De diagonale randgradient en de witte glans van de andere auth-knoppen vervallen hier — het glas komt volledig uit het canvas. */ body.liquid-glass :is(#screen-login, #screen-register, #screen-anon-report, #screen-verify, #screen-activate) .bottom-action .lg-glass-btn::before { display: none; } body.liquid-glass :is(#screen-login, #screen-register, #screen-anon-report, #screen-verify, #screen-activate) .bottom-action .lg-glass-btn::after, body.liquid-glass :is(#screen-login, #screen-register, #screen-anon-report, #screen-verify, #screen-activate) .bottom-action .lg-glass-btn:not(:disabled)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0; background: none !important; border-top: 1px solid rgba(255, 255, 255, 0.28) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important; -webkit-mask: none; mask: none; pointer-events: none; z-index: 2; } /* Uitgeschakeld ziet er verder identiek uit; alleen de tekst verraadt de staat. De algemene auth-regel voor :disabled zou de knop grijs vullen en de schaduw weghalen — hier expliciet teruggedraaid. */ body.liquid-glass :is(#screen-login, #screen-register, #screen-anon-report, #screen-verify, #screen-activate) .bottom-action .lg-glass-btn:disabled { background: transparent !important; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22); color: rgba(255, 255, 255, 0.45) !important; } body.liquid-glass :is(#screen-login, #screen-register, #screen-anon-report, #screen-verify, #screen-activate) .bottom-action .lg-glass-btn:not(:disabled) { color: #ffffff !important; } /* ─── Logo gelijk houden op de uitgelogde schermen ───────────────── base.css maakt de logo-gradient egaal #F49030 zodra #bg-overlay zichtbaar is; navigateTo() doet dat op inloggen/aanmaken/anonieme melding, maar niet op de landing. Hier de originele stops uit de SVG terugzetten, zodat het logo op alle vier de schermen hetzelfde oogt. */ body.liquid-glass:has(#screen-login.active, #screen-register.active, #screen-anon-report.active) #lw-ig1 stop:first-child { stop-color: #F49030; } body.liquid-glass:has(#screen-login.active, #screen-register.active, #screen-anon-report.active) #lw-ig1 stop:last-child { stop-color: #D86010; } body.liquid-glass:has(#screen-login.active, #screen-register.active, #screen-anon-report.active) #lw-tg1 stop:first-child { stop-color: #E87018; } body.liquid-glass:has(#screen-login.active, #screen-register.active, #screen-anon-report.active) #lw-tg1 stop:last-child { stop-color: #C86010; }