/* ============================================================ AgroWorld Scan — gedeelde UI-componenten (app + Beheerconsole) ------------------------------------------------------------ Statusbadges, toastmeldingen en de login-gate stonden twee keer in de codebase (css/styles.css en css/admin.css) en liepen uit elkaar: de console kende geen taalchips onder de loginkaart, toonde foutmeldingen als kale rode tekst en had een eigen toast zonder ernst-niveau. Dit bestand is sinds WP6 de enige bron; paginaspecifieke sheets mogen nog afwijken (ze laden ná dit bestand), maar de basis staat hier. Volgorde in de : tokens.css → shared-ui.css → styles.css/admin.css. Beide pagina's laden dit bestand; de dubbele blokken zijn uit styles.css en admin.css verdwenen. Wat daar nog staat is een bewuste verfijning (bv. de modusbadges en de toasthoogte boven de tabbar in de app) — geen kopie. Geen enkele hex hier — uitsluitend var(--token) uit tokens.css. ============================================================ */ /* ── Statusbadges — zachte tint met leesbare statuskleur ───────────────── Status draagt altijd tekst; de stip is versiering, geen betekenis. */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: var(--sp-1) 9px; border-radius: var(--r-pill); background: var(--surface2); color: var(--dim); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.ok { color: var(--success); background: var(--tint-ok); } .badge.info { color: var(--info); background: var(--tint-info); } .badge.warn { color: var(--warn); background: var(--tint-warn); } /* .err is de historische naam in admin-v2.js; identiek aan .danger. */ .badge.danger, .badge.err { color: var(--error); background: var(--tint-danger); } .badge.neutral { color: var(--dim); background: var(--surface2); } /* ── Toasts (js/ui-toast.js) ───────────────────────────────────────────── Donker navigatiechrome met een statuskleur in de linkerrand én het icoon; leesbaar boven elke content in alle skins, omdat het nav-chrome — anders dan de grijze ramp — niet inverteert in donker. De uitloop-animatie loopt mee met AWToast.HOLD (2600/5200/8000 ms). I3: --success/--warn-accent/--error zelf halen op --nav-bg niet overal 3:1 (grafisch element, WCAG 1.4.11) — color-mix richting --nav-fg tilt de icoon-/randkleur op zonder de statuskleur te verliezen. Zie de color-mix-paren in scripts/contrast-audit.mjs. */ .toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 50; pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--sp-3); max-width: min(92vw, 460px); background: var(--nav-bg); color: var(--nav-fg); border-left: 4px solid color-mix(in srgb, var(--success) 55%, var(--nav-fg)); padding: 10px var(--sp-4); border-radius: var(--r); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-md); animation: toast-in .2s ease, toast-out .2s ease 2.2s forwards; /* De toast zelf blokkeert geen taps (net als .toast-host): op de vloer ligt hij boven de tabbar/scanknop en zonder dit vangt hij die aanrakingen weg. Alleen de sluitknop hieronder is echt klikbaar. */ pointer-events: none; } .toast svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: color-mix(in srgb, var(--success) 55%, var(--nav-fg)); } .toast-close { pointer-events: auto; cursor: pointer; min-width: 44px; min-height: 44px; margin: -10px calc(-1 * var(--sp-4)) -10px auto; display: grid; place-items: center; flex: 0 0 auto; border: 0; background: transparent; color: inherit; border-radius: var(--r); } .toast-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; color: inherit; } .toast-warn { border-left-color: color-mix(in srgb, var(--warn-accent) 55%, var(--nav-fg)); animation: toast-in .2s ease, toast-out .2s ease 4.8s forwards; } .toast-warn svg { color: color-mix(in srgb, var(--warn-accent) 55%, var(--nav-fg)); } .toast-error { border-left-color: color-mix(in srgb, var(--error) 55%, var(--nav-fg)); animation: toast-in .2s ease, toast-out .2s ease 7.6s forwards; } .toast-error svg { color: color-mix(in srgb, var(--error) 55%, var(--nav-fg)); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } } @keyframes toast-out { to { opacity: 0; transform: translateY(10px); } } /* ── Login-gate (js/auth.js) ─────────────────────────────────────────────── Mockups docs/mockups/login.html + auth-staten.html: indigo hero met de rode merklijn, daaronder een formulierkolom met het label BOVEN elk veld, invoervelden van 56px, een toonknop van 48px, een infonotitie, de taalchips en de versievoet. Op een telefoon vult de kolom het scherm; vanaf 560px wordt hij een gecentreerde kaart op het indigo doek (de Beheerconsole laadt dezelfde gate op desktopbreedte). */ .auth-gate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: stretch; justify-content: center; background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%); overflow-y: auto; } .auth-gate[hidden] { display: none; } .auth-card { display: flex; flex-direction: column; width: 100%; max-width: 460px; min-height: 100%; background: var(--bg); color: var(--text-c); animation: auth-pop .22s ease; } @keyframes auth-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } } @media (min-width: 560px) { .auth-gate { align-items: center; padding: var(--sp-6); } .auth-card { min-height: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } } /* Hero: --nav-bg is in elke skin donker, dus het witte logo én de wordmark in --nav-fg lezen er allebei. De 2px merklijn is het enige rood in het chrome. */ .l-hero { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5); min-height: 200px; background: linear-gradient(160deg, var(--nav-bg), var(--nav-bg-2)); color: var(--nav-fg); text-align: center; } .l-hero.sm { min-height: 130px; gap: var(--sp-1); padding: var(--sp-5); } .l-hero p { margin: 0; font-size: var(--fs-sm); color: var(--nav-fg-dim); } .l-hero-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-red); } .l-hero-chip { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--nav-fg) 25%, transparent); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--nav-fg-dim); } .auth-logo-img { max-width: 180px; height: auto; } .auth-wordmark { font-weight: 800; font-size: var(--fs-2xl); letter-spacing: .08em; color: var(--nav-fg); } /* Woordspatie via de marge, zodat applyBranding (wordmarkPrimary + wordmarkAccent) ongewijzigd kan blijven — zelfde truc als .brand-word. */ .auth-wordmark span { color: inherit; margin-left: .35em; } .l-hero.sm .auth-wordmark { font-size: var(--fs-xl); } /* Formulierkolom: neemt de resterende hoogte, zodat taalchips en versievoet onderaan het scherm staan. */ .l-form { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); } .auth-card h1 { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.3px; color: var(--text-c); } .auth-sub { margin: calc(-1 * var(--sp-2)) 0 0; font-size: var(--fs-sm); color: var(--dim); line-height: 1.5; } .auth-card form { display: flex; flex-direction: column; gap: var(--sp-4); } /* Veld: label boven, invoer 56px. */ .l-field { position: relative; } .l-label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--dim); } .auth-card input { width: 100%; box-sizing: border-box; min-height: 56px; padding: 0 var(--sp-4); border: 1px solid var(--gray-300); border-radius: var(--r); font-family: var(--font); font-size: var(--fs-lg); background: var(--bg2); color: var(--text-c); } .l-field.pw input { padding-right: 56px; } .auth-card input::placeholder { color: var(--faint); } .auth-card input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } /* Wachtwoord tonen: 48px tap-doel ín het veld. */ .l-eye { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--dim); cursor: pointer; } .l-eye[aria-pressed="true"] { color: var(--primary); } .auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 56px; padding: 0 var(--sp-5); border: 1px solid var(--primary); border-radius: var(--r); cursor: pointer; background: var(--primary); color: var(--on-primary); font-family: var(--font); font-weight: 700; font-size: var(--fs-lg); } .auth-btn:active { background: var(--primary-press); border-color: var(--primary-press); } .auth-btn:disabled { opacity: .6; cursor: default; } /* Tekstlink, maar wel een volwaardig tap-doel van 48px. */ .auth-link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--primary); font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; } .auth-link.l-back { color: var(--dim); } /* Notitie: kleur + tekst + icoon (info = geruststelling, ok = bevestiging). */ .l-note { display: flex; gap: var(--sp-2); padding: var(--sp-3); background: var(--tint-info); border-left: 3px solid var(--info); border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-c); } .l-note > svg { flex: 0 0 auto; color: var(--info); } .l-note.ok { background: var(--tint-ok); border-left-color: var(--success); } .l-note.ok > svg { color: var(--success); } .l-note .auth-sub { margin: 0; color: var(--text-c); font-size: var(--fs-sm); } /* Wachtwoordeisen: voldaan = vinkje + kleur, nooit kleur alleen. */ .l-reqs { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: calc(-1 * var(--sp-2)); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } .l-req { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--dim); } .l-req-ic { display: inline-flex; flex: 0 0 auto; } .l-req.ok { color: var(--success); } /* Taalwissel: 5 chips van 48px onder het formulier (klassen i.p.v. inline styles — auth.js). */ .auth-langs { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; padding: 0 var(--sp-5) var(--sp-3); } .auth-lang { min-width: 56px; min-height: 48px; padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-bg); color: var(--dim); font-family: var(--font); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; } .auth-lang.active { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); } .l-version { padding: 0 var(--sp-5) var(--sp-4); text-align: center; font-size: var(--fs-xs); color: var(--faint); } .auth-error { background: var(--tint-danger); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--r-sm); padding: 10px var(--sp-3); font-size: var(--fs-sm); font-weight: 600; } .auth-note { background: var(--tint-ok); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); border-radius: var(--r-sm); padding: 10px var(--sp-3); font-size: var(--fs-sm); } .auth-spin { text-align: center; color: var(--dim); padding: 18px; font-size: var(--fs-md); } /* Buiten/zon: 2px randen, geen schaduw — zelfde uitzondering als in de app. */ body.aw-high-contrast .auth-card, body.aw-high-contrast .auth-lang, body.aw-high-contrast .l-reqs { border-width: 2px; box-shadow: none; }