` of een `` -- dus de regel hangt aan de kolom en niet aan de vorm van de tekening. De kolom scrolt al verticaal, dus niet krimpen is het goede antwoord. Alleen in de opgavekolom: het foutscherm en de docentkaarten hebben geen kolom die knijpt, en daar hoort de sleutelplaat juist te mogen meeschalen. */ .opgave-kolom > .tekening { flex: none; } .tekening svg[data-antwoord] { max-width: none; flex: none; margin-inline: auto; } /* --- Breukvakjes (#51, designspec 3.6) --- Een breuk typt een kind boven elkaar: teller boven de streep, noemer eronder. Bij twee breuken twee paren met "en" ertussen, zoals de vraag het zegt. Het antwoordveld staat dan op hidden en draagt alleen nog de waarde. Smaller dan de 168px uit de designspec: die maat gaat over één breuk, en twee paren met "en" ertussen zijn dan breder dan de opgavekolom op een Chromebook. 120px houdt twee paren binnen 480px. */ .breukvakjes { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .breukpaar { display: flex; flex-direction: column; align-items: center; gap: 8px; } .breukstreep { width: 120px; height: 5px; background: var(--inkt); } .breukvak { width: 120px; height: 104px; border: 2px solid var(--inkt); border-radius: var(--radius); background: var(--papier); box-shadow: 6px 6px 0 var(--inkt); padding: 0 8px; font-family: var(--serif); font-size: 64px; font-weight: 700; color: var(--inkt); text-align: center; } /* Het actieve vakje krijgt de accentschaduw: waar je typt hoort te zien zijn, en de focusring alleen is op een vak van 120px makkelijk te missen. */ .breukvak:focus { box-shadow: 6px 6px 0 var(--groen); } .breukvakjes-en { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--inkt); } /* Een gestapelde breuk in de vraagtekst zelf. Hij staat midden in een regel tekst, dus inline-flex en niet flex, en de regelhoogte van de vraag blijft die van de vraag: een breuk van twee regels hoog in een vraag van 112px zou de vraag anderhalf keer zo hoog maken. De streep is een rand en geen eigen element -- de breuk komt uit tekst en niet uit een invoervak. */ .breuk { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; font-size: 0.62em; } .breuk-teller { padding: 0 0.15em; border-bottom: 0.09em solid currentColor; } .breuk-noemer { padding: 0 0.15em; } .antwoordveld { width: 360px; max-width: 100%; min-width: 0; height: 116px; border: 2px solid var(--inkt); border-radius: var(--radius); background: var(--papier); box-shadow: 6px 6px 0 var(--inkt); padding: 0 32px; font-family: var(--serif); font-size: 72px; font-weight: 700; color: var(--inkt); text-align: center; } .zijpaneel { border-left: 2px solid var(--inkt); background: var(--paneel); padding: 32px; display: flex; flex-direction: column; gap: 16px; overflow: auto; } /* Vijf rijen in plaats van vier (spatie en komma erbij), dus 76px per toets en een iets kleinere gap: met de 84px uit de designspec kreeg het zijpaneel een scrollbar en verdween "Nakijken" onder de vouw. */ .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .toets { border: 2px solid var(--inkt); background: var(--papier); color: var(--inkt); font-family: var(--serif); font-size: 34px; font-weight: 700; height: 76px; border-radius: var(--radius); box-shadow: 4px 4px 0 var(--inkt); cursor: pointer; } .toets--breed { grid-column: span 2; } /* De spatietoets draagt een woord, geen cijfer: de serif op 34px past niet. */ .toets--woord { font-family: var(--ui); font-size: 20px; font-weight: 700; } .toets:hover:not(:disabled) { background: var(--mint); } .toets:active:not(:disabled) { box-shadow: 0 0 0 var(--inkt); transform: translate(4px, 4px); } /* Een toets die niets doet, ziet er ook zo uit: de komma staat uit zolang er breukvakjes staan, want in een breuk hoort geen komma (#51). Uitzetten en niet weghalen -- een gat in het raster zou alle andere toetsen verschuiven, en een kind dat de komma zoekt vindt hem dan niet meer terug. De hover- en actief-stijl gaan hierboven mee uit: een toets die oplicht en indrukt maar niets doet, is erger dan een doffe toets. */ .toets:disabled { box-shadow: none; background: var(--paneel-hover); color: var(--tekst-zwak); cursor: default; } .paneel-onder { margin-top: auto; height: 84px; padding: 0; } .hulpregel { font-size: 15px; color: var(--tekst-zwak); } /* De tweede kans (#52): de regel onder de opgave na de eerste fout, met de tip van de docent eronder. Geen groot foutblok: de opgave blijft de hoofdzaak en dit is een aanwijzing ernaast. Daarom de zalmkleur van .melding, maar kleiner en met de tip in de rustige tekstkleur. `[hidden]` apart, want een eigen display-regel verslaat de hidden-stijl van de browser -- dezelfde reden als bij .melding. */ .tweedekans { display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--inkt); border-radius: var(--radius); background: var(--zalm); padding: 12px 16px; } .tweedekans[hidden] { display: none; } .tweedekans-regel { font-size: 17px; font-weight: 700; color: var(--rood); } .tweedekans-tip { font-size: 16px; color: var(--tekst-sterk); } /* De bevestiging na het melden. Rustig van toon: een kind dat een fout aanwijst hoort geen alarm te krijgen, alleen een bedankje. */ .meldregel { font-size: 16px; color: var(--tekst-sterk); background: var(--mint); border-radius: var(--radius); padding: 10px 12px; } /* Meerkeuze (3.4) */ .meerkeuze-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 44px; padding: 48px 64px; overflow: auto; } .mk-vraag { font-family: var(--serif); font-size: 64px; font-weight: 700; line-height: 1.1; text-align: center; max-width: 940px; } .mk-vraag--lang { font-size: 44px; } /* Flex en geen grid met vier vaste kolommen: bij drie opties hield de vierde track zijn plek en stonden de knoppen uit het midden. */ .mk-opties { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 100%; } .mk-opties .mk-optie { flex: 0 1 260px; min-width: 200px; } .mk-opties--twee .mk-optie { flex: 0 1 320px; min-width: 260px; } /* Een tekstuele optie ("35 groepjes van 12, 5 over") heeft meer ruimte nodig dan een kaal getal. Twee kolommen en een kleinere letter, want de designspec tekende deze knoppen met een enkel getal erin. */ .mk-opties--tekst .mk-optie { flex: 0 1 380px; min-width: 280px; } .mk-optie { border: 2px solid var(--inkt); background: var(--papier); color: var(--inkt); font-family: var(--serif); font-size: 46px; font-weight: 700; /* min-height en geen height: een optie die niet in 132px past, hoort door te lopen en niet afgeknipt te worden. Afgeknipte tekst maakt een opgave onbeantwoordbaar, en dat is precies het soort fout dat een leerling niet kan melden omdat hij niet weet dat er iets mist. */ min-height: 132px; padding: 16px 20px; line-height: 1.15; border-radius: var(--radius); box-shadow: 6px 6px 0 var(--inkt); cursor: pointer; } .mk-opties--tekst .mk-optie { font-size: 26px; } .mk-optie[aria-checked="true"] { background: var(--groen); color: var(--groen-tekst); } /* De optie die al fout geprobeerd is (#52): blijft staan, maar dooft en ligt plat op het papier -- geen slagschaduw, dus hij leest niet meer als een knop die nog ingedrukt kan worden. */ .mk-optie--weg { opacity: 0.4; box-shadow: none; cursor: default; } .mk-onder { display: flex; align-items: center; gap: 24px; } .mk-hint { font-size: 17px; color: var(--tekst-zwak); } /* --- Feedback (3.8, 3.9) --- */ .feedback-goed { background: var(--mint); } .feedback-fout { background: var(--zalm); gap: 26px; } /* De uitslag staat in een eigen blok met role="status": dat blok wordt voorgelezen, de knop eronder hoort er niet bij. */ .fb-inhoud { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 100%; } .fb-uitspraak { font-family: var(--serif); font-size: 104px; font-weight: 700; line-height: 1; text-align: center; max-width: 100%; overflow-wrap: anywhere; } .fb-uitspraak--lang { font-size: 56px; } .fb-toelichting { font-size: 21px; line-height: 1.5; color: var(--tekst-sterk); text-align: center; max-width: 680px; } /* De tip van de docent op het foutscherm (#56). Een kolom en geen rij: de uitleg klapt onder de knop open, zodat de knop op zijn plek blijft staan en het kind niet hoeft te zoeken waar de tekst gebleven is. */ .uitlegblok { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 680px; } .uitlegtekst { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 2px solid var(--inkt); background: var(--papier); padding: 16px 20px; } /* --- Sessie afgerond (3.12) --- */ .afrond-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 32px; padding: 64px; overflow: auto; } .afrond-score { font-family: var(--serif); font-size: 76px; font-weight: 700; line-height: 1.05; text-align: center; max-width: 900px; } .samenvatting { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 18px; padding: 32px; } .samenvatting-regel { display: flex; justify-content: space-between; /* Een gap en geen kale space-between: een lange doeltekst duwt de waarde anders tegen het label aan, en dan staat er "OnderwerpIk kan uitleggen". */ gap: 24px; font-size: 20px; } .samenvatting-regel span:first-child { color: var(--tekst-sterk); flex: none; } .samenvatting-regel span:last-child { font-weight: 700; text-align: right; } .knoppenrij { display: flex; gap: 16px; align-items: center; } /* --- Hoe ging het? (#64) --- */ .gevoelvraag { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* De kop wisselt van tekst (vraag, bevestiging, foutzin) en niet van hoogte: een vaste min-height houdt de knoppenrij eronder op zijn plek. */ .gevoelvraag-kop { margin: 0; min-height: 32px; font-size: 21px; line-height: 32px; font-weight: 700; text-align: center; } .gezichtenrij { display: flex; gap: 20px; } /* Rond en niet vierkant zoals de andere knoppen: dit zijn geen knoppen die iets doen maar gezichtjes die je aanwijst. Groot genoeg voor een vinger op een tablet en voor een kind dat niet precies mikt. */ .gezichtknop { width: 88px; height: 88px; padding: 10px; border: 2px solid var(--inkt); border-radius: 50%; background: var(--papier); cursor: pointer; transition: transform 120ms ease, opacity 120ms ease; } .gezichtknop svg { display: block; width: 100%; height: 100%; } .gezichtknop:hover:not(:disabled) { transform: translateY(-2px); background: var(--paneel-hover); } .gezichtknop[aria-pressed="true"] { background: var(--mint); box-shadow: 4px 4px 0 var(--inkt); } /* Na de keuze blijven de andere twee klikbaar (de laatste keuze wint) maar gedimd, zodat het kind ziet wat het koos. Tijdens het opsturen zijn ze even uitgeschakeld tegen dubbelklikken; dat ziet er hetzelfde uit. */ .gezichtenrij:has([aria-pressed="true"]) .gezichtknop:not([aria-pressed="true"]), .gezichtknop:disabled { opacity: 0.35; } .gezichtknop:disabled { cursor: default; } /* De kleur zit op de mond en de ogen (currentColor), dus één regel per gevoel bedient het afrondscherm en het docentscherm allebei. */ .gezicht--goed { color: var(--groen-donker); } .gezicht--gewoon { color: var(--tekst-sterk); } .gezicht--moeilijk { color: var(--rood); } /* Het kleine gezichtje bij het percentage in het leerlingdetail van de docent. */ .gezicht { display: inline-block; width: 28px; height: 28px; vertical-align: middle; } .gezicht svg { display: block; width: 100%; height: 100%; } /* Negatieve verticale marges: het gezichtje is hoger dan de regel, en zonder die marges tilt zijn margebox de regel op, zodat een rij mét gezichtje 5px hoger werd dan een rij zonder. Zo blijft elke rij even hoog. */ .gezicht--cel { width: 28px; height: 28px; margin: -8px 0 -8px 10px; } /* --- Voortgang (3.11) --- */ .statkaart { padding: 26px; } .statgetal { font-family: var(--serif); font-size: 56px; font-weight: 700; line-height: 1; } .statbij { font-size: 18px; color: var(--tekst-sterk); margin-top: 8px; } .voortgangslijst { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; } .voortgangsrij { display: grid; grid-template-columns: 260px 1fr 150px; gap: 20px; align-items: center; } .voortgangsrij-naam { font-size: 20px; font-weight: 600; } .voortgangsrij-pct { font-size: 18px; font-weight: 700; text-align: right; } /* --- Rekenmuur (#59) --- Eén bord per groep: de klasmuur bovenaan, daaronder een balk per leerling. Hetzelfde bord op het leerling- en het docentscherm (App.muurbord), zodat een kind en zijn juf naar hetzelfde plaatje kijken. */ .muurbord { border: 2px solid var(--inkt); background: var(--papier); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; } .muurkop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .muurkop-naam { font-size: 22px; font-weight: 800; } .muurkop-tekst { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--tekst-sterk); } /* De muur zelf: één blokje per opgave van vandaag, gevuld als hij goed was. Een wikkelende rij en geen vast raster: het aantal hangt van de dag af, en een raster met een vaste kolombreedte laat bij twaalf opgaven een lege muur zien die er niet is. 18px is klein genoeg voor honderdtwintig blokjes op een Chromebook (120 x 22px inclusief gap is 2640px, dus ruim zes regels van 20 blokjes) en groot genoeg om los te zien. */ .muur { display: flex; flex-wrap: wrap; gap: 4px; } .muursteen { width: 18px; height: 18px; border: 2px solid var(--inkt); background: var(--canvas); } .muursteen--goed { background: var(--balkvulling); } .muur-schaal { margin: 10px 0 0; font-size: 15px; color: var(--tekst-zwak); } .muurbalken { margin-top: 20px; display: grid; gap: 10px; } /* Naam, balk, getal. Zonder namen valt de eerste kolom weg -- de balken staan dan zonder kolom voor een naam die er niet is, in plaats van met een lege kolom die de vraag oproept wie daar hoorde te staan. */ .muurbalk { display: grid; grid-template-columns: 160px 1fr 70px; gap: 16px; align-items: center; } .muurbalken--anoniem .muurbalk { grid-template-columns: 1fr 70px; } .muurbalk-naam { font-size: 19px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .muurbalk-getal { font-family: var(--serif); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; } .muurbalk-getal--stil { color: var(--tekst-zwak); } /* --- Leraar-overzicht (3.13) --- */ .leraar-body { flex: 1; padding: 36px 44px; display: flex; flex-direction: column; gap: 24px; overflow: auto; } .titelrij { display: flex; align-items: baseline; gap: 20px; } .titelrij h2 { font-size: 30px; font-weight: 800; margin: 0; } .titelrij-meta { font-size: 19px; color: var(--tekst-zwak); } .tabel { border: 2px solid var(--inkt); /* Wordt het te smal voor de kolommen, dan schuift de tabel in zichzelf en niet de hele pagina. De ondergrens per kolom zorgt dat de omschrijving nooit tot nul knijpt -- dat is de tekst waarop de docent kiest. */ overflow-x: auto; } .tabel-kop, .tabel-rij { min-width: 700px; } .tabel-kop, .tabel-rij { display: grid; gap: 16px; align-items: center; } .tabel-kop { padding: 16px 24px; background: var(--paneel-hover); border-bottom: 2px solid var(--inkt); font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-sterk); } .tabel-rij { padding: 18px 24px; border-bottom: 1px solid var(--lijn-zacht); font-size: 19px; width: 100%; text-align: left; background: var(--papier); color: var(--inkt); font-family: var(--ui); border-left: 0; border-right: 0; border-top: 0; } button.tabel-rij { cursor: pointer; } button.tabel-rij:hover { background: var(--paneel-hover); } .tabel-rij--leeg { display: block; } /* Vaste maten voor wat een vaste maat heeft, de rest naar de tekst die je werkelijk leest. Met alles in fr kreeg een doelcode van twaalf tekens 352px en een getal van drie cijfers 205px, terwijl de omschrijving op twee regels brak. minmax(0, 1fr) en niet 1fr: anders weigert de kolom te krimpen onder de breedste ononderbroken tekst en loopt de rij op een smal scherm buiten het kader. */ .kolommen-doelen { /* De actiekolom draagt sinds de jaarplanning ook een datumveld; zonder die extra ruimte breekt de knop eronder af op een laptopscherm. */ grid-template-columns: 160px minmax(200px, 1fr) 90px minmax(320px, 520px); } .kolommen-voortgang { grid-template-columns: 160px minmax(200px, 1fr) 120px 120px; } /* Een naam en een gebruikersnaam worden niet leesbaarder van 700px. Die twee krijgen een bovengrens; de ruimte die overblijft gaat naar de laatste kolom, zodat de actie rechts uitlijnt in plaats van dat de tabel uitgerekt oogt. */ .kolommen-leerlingen { grid-template-columns: minmax(160px, 420px) minmax(140px, 300px) 200px minmax(120px, 1fr); } /* De groepentabel: naam, aantal, de klok en de rekenmuur als keuzelijst, het vinkje "zelf kiezen", en rechts de knop naar de leerlingen. Beide keuzekolommen zijn vast: de langste keuzes zijn "alleen tijd tonen" en "balken met namen" en die passen hier op één regel. De vinkkolom is smal, want er staat een vierkantje van 24px in. Drie instellingen naast elkaar en niet onder elkaar in één cel: de som van de minimumbreedtes is 160 + 100 + 220 + 220 + 110 + 160 = 970px plus vijf gaps van 16px, samen 1050px. Het docentpaneel is op een 1366-scherm ruim 1250px breed, dus het past zonder dat de tabel in zichzelf hoeft te schuiven -- en instellingen onder elkaar in één cel maakt elke rij 30px hoger, wat bij twintig groepen een halve schermhoogte kost. */ .kolommen-groepen { grid-template-columns: minmax(160px, 420px) minmax(100px, 200px) 220px 220px 110px minmax(160px, 1fr); /* Boven de 700px van .tabel-rij: met zes kolommen is dit de echte ondergrens, en daaronder schuift de tabel (overflow-x op .tabel). */ min-width: 1050px; } /* Het vinkje van een groepsinstelling die een ja of een nee is (#57): een echt vinkje, maar groot genoeg om met een vinger te raken. */ .vinkje-groep { width: 24px; height: 24px; accent-color: var(--groen-donker); cursor: pointer; } .cel-actie--rechts { justify-content: flex-end; } /* De keuzelijst in een tabelrij: lager en kleiner dan een formulierveld, zoals het datumveld in de doelentabel. */ .invoer-klok { width: 100%; min-height: 0; padding: 6px 8px; font-size: 15px; } /* De leerlingenlijst draagt er een klaskolom bij. Die is smal en vast: er staat "7B" in en nooit iets langers. */ .kolommen-leerlingen-klas { grid-template-columns: minmax(160px, 360px) 80px minmax(140px, 260px) 200px minmax(120px, 1fr); } .cel-sterk { font-weight: 600; } .cel-zwak { color: var(--tekst-zwak); } .cel-serif { font-family: var(--serif); font-weight: 700; } .cel-reden { color: var(--tekst-sterk); } /* Geen opacity: dat maakte juist de reden waarom een doel niet klaarstaat de slechtst leesbare tekst van de tabel (2.85:1). Een eigen achtergrond met volle tekstkleur zegt hetzelfde en is leesbaar. */ .rij-uit { background: var(--canvas); } .rij-uit .cel-sterk, .rij-uit .cel-serif { color: var(--tekst-sterk); font-weight: 600; } .rij-uit .cel-reden { color: var(--tekst-sterk); } /* Een klaargezet doel is aan de rij te zien, niet alleen aan het knoplabel. */ .rij-klaar { background: var(--mint); box-shadow: inset 6px 0 0 var(--groen); } .cel-actie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Het datumveld staat in een tabelrij en niet in een formulier: smal genoeg om naast de knoppen te passen, en met de tekstgrootte van de rij eromheen. */ .invoer-datum { width: 9.5rem; padding: 4px 8px; font-size: 0.85rem; } /* De tip en de link naar een filmpje staan op een eigen regel onder de knoppen: 280 tekens naast een datumveld en twee knoppen past op geen laptopscherm. De cel is al flex-wrap, dus een volle breedte legt hem onderaan. */ .tipregel { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .invoer-tip { flex: 1 1 16rem; min-width: 0; padding: 6px 8px; font-size: 0.85rem; resize: vertical; } .invoer-tiplink { flex: 1 1 12rem; min-width: 0; padding: 4px 8px; font-size: 0.85rem; } /* De tekenteller is context en geen boodschap: klein, dof, en hij trekt geen aandacht weg van het veld waar hij bij hoort. */ .tipteller { font-size: 0.75rem; color: var(--tekst-zwak); white-space: nowrap; } .doelmerk { border: 2px solid var(--groen-donker); background: var(--papier); color: var(--groen-label); padding: 4px 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .voetregel { font-size: 18px; color: var(--tekst-zwak); } .filterrij { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; } .filterrij .veld { gap: 6px; } /* Een knop die naast invoervelden staat, deelt hun hoogte: zo lopen de bovenkanten én de onderkanten van de hele rij gelijk. */ .filterrij > .knop-secundair, .formulier-rij > .knop-secundair { min-height: var(--veldhoogte); } .tabbalk { display: flex; gap: 10px; } .formulier-rij { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; } .kolom-smal { display: flex; flex-direction: column; gap: 16px; } /* Eén gemelde som op de meldingentab. Een kaart en geen tabelrij: er staat een tekening in, en een tekening past niet in een cel. */ .meldkaart { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .meldkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Per leerling zijn telling en een wegstreepknop, bóven de kaarten: wie 42 meldingen van één kind ziet, hoort dat te zien voordat hij gaat scrollen. */ .melders { display: flex; flex-direction: column; gap: 8px; } .melderregel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Hoe vaak dezelfde som gemeld is: dat getal zegt hoe hard het signaal is. */ .meldtelling { border: 2px solid var(--inkt); padding: 4px 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .meldvraag { font-family: var(--serif); font-size: 26px; font-weight: 700; } .meldsleutel { font-family: var(--serif); font-size: 20px; font-weight: 700; background: var(--mint); padding: 6px 10px; } /* "Zo mag het getypt worden": per gedaante van de sleutel de invoer die het nakijken goedkeurt, als code -- het gaat om de tekens zelf, dus een vaste breedte en geen serif. Het staat in een tabelrij (over de hele breedte, onder de vier cellen) én op een meldkaart, met dezelfde opmaak. */ .schrijfwijzen { display: flex; flex-direction: column; gap: 6px; } .schrijfwijzen-vak { grid-column: 1 / -1; } .schrijfwijzen-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .schrijfwijze { font-family: monospace; font-size: 16px; color: var(--tekst-sterk); background: var(--papier); border: 1px solid var(--inkt); padding: 2px 8px; white-space: pre; } .schrijfwijzen-of { font-size: 15px; color: var(--tekst-zwak); } /* Seed en contractversie: bedoeld om te kopiëren, dus selecteerbaar en in een vaste breedte, niet in de lopende tekst verstopt. */ .meldbron { font-family: monospace; font-size: 15px; color: var(--tekst-sterk); user-select: all; word-break: break-all; } /* De twee knoppen onder een melding. Naast elkaar zolang het past, want ze zijn even zwaar: de docent kiest tussen twee dingen en wordt niet naar één ervan geduwd. */ .meldknoppen { display: flex; gap: 12px; flex-wrap: wrap; } /* De uitzetknop wordt naar de overkant geduwd. Hij ziet er hetzelfde uit als zijn buur -- een eigen kleur zou een nieuwe knopvariant zijn en dat is een groter gebaar dan nodig -- maar hij hoort geen knoppenpaar te vormen met een handeling die maar één regel raakt. Wat hij doet staat op zijn label. */ .knop-ver { margin-left: auto; } .tekening--melding { justify-content: flex-start; } /* De tekening op het foutscherm: het antwoord op de plek waar het hoorde. Ze staat tussen de sleutel en de toelichting en mag het scherm niet vullen -- het kind moet de hele boodschap in één blik zien, zonder te scrollen. */ .tekening--sleutel { width: 100%; max-width: 480px; margin: 6px auto 12px; } .wachtwoordkaart { background: var(--mint); padding: 24px; display: flex; flex-direction: column; gap: 10px; } .wachtwoord { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1.05; } .waarschuwing { font-size: 17px; color: var(--rood); font-weight: 700; } .leeg { font-size: 19px; color: var(--tekst-zwak); } #peilingen { margin-top: 40px; } .peilingkop { margin: 0 0 6px; font-size: 24px; } /* De kaart van het herhalingsbakje (#54). Zelf geen knop -- hij draagt er drie -- dus geen cursor en geen hover op de kaart: alleen de knoppen reageren. Dezelfde maten als een doelkaart, zodat het raster niet hapert. */ .herhaalkaart { display: flex; flex-direction: column; gap: 14px; text-align: left; } .bakknoppen { display: flex; flex-wrap: wrap; gap: 8px; } /* Klein, want er staan er drie op één kaart, en met de rand en de harde schaduw van de andere knoppen: het is dezelfde taal. */ .bakknop { border: 2px solid var(--inkt); background: var(--papier); color: var(--inkt); font-family: var(--ui); font-size: 17px; font-weight: 700; padding: 10px 14px; min-height: 44px; border-radius: var(--radius); box-shadow: 3px 3px 0 var(--inkt); cursor: pointer; } .bakknop:hover { background: var(--mint); } .bakknop:active { box-shadow: 1px 1px 0 var(--inkt); transform: translate(2px, 2px); } /* De laatste keuze van het kind staat aan in de accentkleur. Niet alleen de kleur: een kind dat kleur niet ziet hoort ook uit aria-current te weten welke het is (zie herhaalkaart in leerling.js). */ .bakknop--aan { background: var(--groen); color: var(--groen-tekst); } .bakknop--aan:hover { background: var(--groen-donker); color: var(--papier); } .bakknop[disabled] { background: var(--mint-dof); color: var(--tekst-sterk); box-shadow: 3px 3px 0 var(--streep-grijs); cursor: not-allowed; } .doelkaart--peiling { background: var(--vlak-zacht, #f4f8fb); } .visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- Korte schermen (Chromebook na browserchrome) --- */ @media (max-height: 780px) { .toets { height: 54px; font-size: 24px; } .hulpregel { margin: 4px 0 0; font-size: 14px; } .keypad { gap: 8px; } .paneel-onder { height: 68px; } .antwoordveld { height: 92px; font-size: 56px; } /* Dezelfde krimp als het antwoordveld: de vakjes staan op zijn plek. */ .breukvak { height: 80px; font-size: 48px; } .breukvakjes { gap: 16px; } .som-vraag { font-size: 84px; } /* De --lang-varianten staan hier opnieuw, en dat is geen dubbeling maar de cascade. Ze hebben dezelfde specificiteit als .som-vraag en .fb-uitspraak, dus zonder deze regels wint de latere: een lánge vraag kreeg op een Chromebook juist 84px in plaats van 52px -- precies omgekeerd aan de bedoeling. Korter scherm betekent kleiner, ook hier. */ .som-vraag--lang { font-size: 44px; } .opgave-kolom { gap: 28px; padding: 32px; } /* Het afrondscherm draagt sinds #64 de gezichtjes; met de volle 64px padding en 32px gap liep de body op 660px hoog 74px over en stond de knoppenrij buiten beeld. */ .afrond-body { padding: 32px 64px; gap: 24px; } .gezichtknop { width: 72px; height: 72px; } .zijpaneel { padding: 24px; } .fb-uitspraak { font-size: 76px; } .fb-uitspraak--lang { font-size: 40px; } /* Minder bladspiegel eromheen, zodat het hele foutscherm -- kop, sleutel, tekening, knop -- op 660px in één blik past. Met 48px eromheen stak het erdoorheen en moest een kind naar de knop scrollen. */ .body-midden { padding: 32px 48px; gap: 20px; } /* De puntenregel op het goed-scherm krimpt mee met de rest van dat scherm: de kop, de uitspraak en de knop staan er al krap op 660px. */ .puntenwinst-getal { font-size: 20px; } /* En de sleutelplaat krijgt een dak. De bouwplaat is met 228px de hoogste van de drie en duwde als enige de knop eronder buiten beeld. */ .tekening--sleutel svg { max-height: 190px; width: auto; } } /* --- Doelentabel: de balk boven de tabel en de knop eronder (issue #10) --- */ /* De weergavekiezer staat tussen de uitleg en de tabel in, niet in de filterrij: hij past zich meteen toe en de filters pas na een knop. Rechts uitgelijnd zodat hij ook visueel bij de tabel hoort en niet bij het formulier erboven. */ .tabelbalk { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 16px; } /* Een label naast zijn veld in plaats van erboven: in een balk van één regel leest "Toon: alleen wat klaarstaat" als een zin, en een kolom van twee regels zou de balk twee keer zo hoog maken als hij hoeft te zijn. */ .veld--liggend { flex-direction: row; align-items: center; gap: 10px; } /* De knop is een bediening onder de tabel, geen extra tabelrij: hij volgt de breedte van het kader en schuift dus niet mee als de tabel op een smal scherm in zichzelf scrollt. Dat is de bedoeling -- een knop die half buiten beeld begint is erger dan een knop die stil blijft staan. */ .tabelvoet-knop { width: 100%; } /* --- Berichtje van de juf of meester (issue #55) --- */ /* Het tekstvak bij het leerlingdetail. Een kolom en geen kaart: het hoort bij het detail dat eromheen staat, en een tweede kader zou er een los paneel van maken. */ .berichtvak { display: flex; flex-direction: column; gap: 12px; } /* Drie regels hoog en alleen verticaal te rekken: breder dan de kolom zou de tabel ernaast laten schuiven. */ .invoer--bericht { width: 100%; resize: vertical; line-height: 1.4; } /* De vier vaste zinnen. Ze wrappen, want op een smal scherm zijn vier knoppen naast elkaar vier onleesbare knoppen. */ .zinnenrij { display: flex; flex-wrap: wrap; gap: 10px; } /* De kaart op de startpagina van het kind zodra er een bericht staat. De afzenderregel is een micro-label en de tekst mag afbreken zoals de docent hem typte: witruimte blijft staan, lange woorden breken af in plaats van de kaart uit het raster te duwen. */ .berichttekst { font-size: 19px; white-space: pre-wrap; overflow-wrap: break-word; } /* --- Confetti bij een goed antwoord (#62) --- Unaniem gevraagd in de speelhoek van 14 september, dus geen instelling. Eén laag over het goed-scherm, zestig snippers, elk met zijn eigen startpositie, duur en vertraging uit leerling.js. De animatie is CSS en geen JavaScript-lus: een lus van zestig elementen op een Chromebook kost frames die het scherm nodig heeft voor de knop. pointer-events staat uit, want de knop Volgende ligt eronder en hoort direct klikbaar te blijven. De kleur is het accent van het thema (var(--groen), dat per data-thema verschilt) met twee tinten erbij, zodat de snippers niet als één vlak lezen. */ .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .confetti-snipper { position: absolute; top: -24px; width: 9px; height: 14px; background: var(--groen); opacity: 0; animation-name: confetti-val; animation-timing-function: linear; animation-fill-mode: forwards; } .confetti-snipper--twee { background: var(--groen-donker); } .confetti-snipper--drie { background: var(--inkt); } @keyframes confetti-val { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(104vh) rotate(540deg); opacity: 1; } } /* Wie beweging liever niet ziet, krijgt geen confetti. De laag blijft leeg: leerling.js kijkt dezelfde voorkeur na en zet er dan niets in, en deze regel is de tweede poort voor wie de voorkeur midden in een sessie omzet. */ @media (prefers-reduced-motion: reduce) { .confetti-snipper { animation: none; display: none; } }