:root{ /* Typografie: precies vier maten. xs = kickers/hints/badges, s = secundaire tekst en labels, m = de basistekst, l = koppen en kerngetallen. Iconen (.ms) en het logo hebben hun eigen maten. */ --tekst-xs: 11px; --tekst-s: 12.5px; --tekst-m: 14px; --tekst-l: 18px; /* Het lettertype van de hele app op één plek. De referentie is Sofia Pro (het lettertype van plenda.nl, via een Adobe-kit). Dat is een commerciele licentie die domeingebonden is en niet meegeleverd mag worden. Figtree komt er van de vrije letters het dichtst bij -- geometrisch-humanistisch, dubbelverdiepings-a, enkelverdiepings-g, vergelijkbare x-hoogte -- en staat onder de Open Font License, dus we hosten hem zelf. Zelf hosten is hier geen smaakkwestie: een lettertype van een CDN stuurt het IP-adres van een (minderjarige) leerling naar een derde partij. Dat mag niet onder de AVG en het Normenkader IBP, en het houdt de CSP dicht. Koopt iemand later een Adobe-licentie op het eigen domein, dan is dit de enige regel die verandert. */ --lettertype: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Basiskleuren van het standaardschema. */ /* De kleuren van het standaardschema Ninja. Ze worden bij elk verzoek overschreven door ShareAppearance, die ze als inline stijl op zet -- maar niet overal: op een scherm zonder sessie (het aanvraagformulier) is er niets om over te schrijven, en dan geldt dit. Hier stond nog het oude marineblauw, en daardoor was het aanvraagscherm donkerblauw terwijl het inlogscherm violet was. Twee schermen naast elkaar in een andere huisstijl. */ --primary: #4B3FA8; --primary-light: #6355C1; --primary-dark: #3A3182; --accent: #DAD7F2; --accent-green: #22D3EE; /* ---------- Maatvoering ---------- Twee rondingen en één hoogte, en daar houdt de hele app zich aan. Er waren er elf: 3, 6, 7, 8, 9, 10, 11, 12, 14, 20 pixels en 50 procent, zonder dat iemand nog wist waarom precies daar. --radius wat je bedient: knop, veld, keuzelijst, chip --radius-vlak waar iets in staat: kaart, tegel, tabel, venster --hoogte-veld de hoogte van elk bedieningselement Een rondje blijft 50% en een pil blijft een pil; die vormen betekenen iets. De rest volgt deze drie. */ --radius: 8px; --radius-vlak: 12px; --hoogte-veld: 34px; /* De ondergrond waar het paneel op zweeft. Het grijs van de huisstijl, niet blauwgrijs: naast het geel en het antraciet moet dit vlak zich gedeisd houden. */ --bg: #F1F2F3; --bg-card: #FFFFFF; --text: #323A45; --text-light: #5A6570; --border: #DDE4E8; --success: #00ACD0; --warning: #F59E0B; --danger: #DC3545; /* 264 en niet 250: op 250 werd "Gemeente Vallis" afgekapt -- het label heeft 102px nodig en kreeg er 98 naast het icoon, het pijltje en de teller. */ /* ---------- De planagenda ---------- De twee vlakken van de agenda liggen vast en draaien niet mee met het kleurenschema: boven is geel, onder is donker. Dat onderscheid is de methode zelf -- huiswerk boven, taken onder -- en niet een smaakje. De waarden komen uit het gele vlak en het donkere vlak zoals ze in beeld staan; het zuivere #FAE800 van het merk is als paginavulling te fel, dus het vlak staat een tint zachter en het merkgeel blijft voor accenten (badges, markeerstift, het logo). Contrast (WCAG 2.2 AA, tekst >= 4,5:1): inkt op geel-vlak 16,2:1 inkt op wit 17,8:1 inkt op ingepland-blauw 13,9:1 wit op planning-vlak 12,1:1 planning-zacht op vlak 4,8:1 (datums en minuten) Kleur draagt hier nooit alleen de betekenis: "ingepland" is blauw *en* een vinkje, "markering" is geel *en* vetgedrukt. */ --geel: #FAE800; --geel-vlak: #F7E44F; --markering: #FCEE7A; --agenda-kaart: #FFFFFF; --agenda-weekend: #F1F1F3; --agenda-leeg: #E9E9EC; --ingepland: #CFE4FA; --inkt: #1F2430; --inkt-zacht: #7C8398; --planning-vlak: #262A38; --planning-kaart: #2E3342; --planning-rij: #3A4052; --planning-leeg: #313648; --planning-zacht: #8B93A8; --vandaag: #E8394A; --sidebar-width: 264px; --rail-width: 0px; /* Hoever de kop in de balk inspringt: de padding van de balk (16) plus de hamburger (42) plus de tussenruimte (10). De kop van het onderste vlak gebruikt hetzelfde getal, zodat "Huiswerk" en "Takenlijst" onder elkaar staan. Verandert de hamburger van maat, dan verandert dit getal mee -- op één plek. Het stond op 58, gerekend met een knop van 32. De hamburger is 42, en de twee koppen stonden dus tien pixels uit elkaar. */ --kop-inspring: 68px; /* De breedte die de twee koppen krijgen, zodat het pijltje erachter in allebei op dezelfde x uitkomt. "Takenlijst & Planning" is de langste van de twee (162 px); 176 geeft lucht voor de Engelse vertaling. */ --kop-breedte: 176px; } *{ margin: 0; padding: 0; box-sizing: border-box; } /* Elke klik is een echte paginawissel (de app rendert op de server), en die knip zag eruit als geflikker. Met een documentovergang vloeit de oude pagina in de nieuwe; een browser die dit niet kent doet gewoon wat hij deed. Bij minder-beweging geen overgang -- dan is de knip juist rustiger. */ @view-transition { navigation: auto; } /* Zachte paginawissel: alleen het paneel wisselt, het menu, de gloed en het zoomvlak blijven gewoon staan. De wortel wisselt zonder animatie (daar verandert toch niets zichtbaars), het paneel vervaagt kort uit en komt met een klein tikje omhoog weer binnen. Hier stond een prefers-reduced-motion-blok dat alle wissels uitzette. Op verzoek weg -- dezelfde bewuste uitzondering als bij het sunburst-ornament: de Windows-instelling staat op dit systeem aan zonder dat daarom is gevraagd, en juist de zachte wissel was de hele wens. */ .main > .paneel{ view-transition-name: paneel; } ::view-transition-old(root), ::view-transition-new(root){ animation: none; } /* De groep springt meteen naar de nieuwe plek en maat: standaard animeert hij de geometrie mee, en tussen een korte en een lange pagina (de Instellingen-tabbladen) zag je het hele middenvlak daardoor bewegen. Alleen de inhoud vervaagt. */ ::view-transition-group(paneel){ animation-duration: 0s; } ::view-transition-image-pair(paneel){ isolation: isolate; } ::view-transition-old(paneel){ animation: bp-paneel-uit .14s ease both; } ::view-transition-new(paneel){ animation: bp-paneel-in .26s cubic-bezier(.3, .7, .3, 1) both; } @keyframes bp-paneel-uit { to{ opacity: 0; } } @keyframes bp-paneel-in { from{ opacity: 0; transform: translateY(5px); } to{ opacity: 1; transform: none; } } body{ /* De uitklaplijst van een