optionele sticky balk onderaan (opslaan, verder)
Overlays (ui-offcanvas, ui-modal) staan BUITEN .ui-page: de
size-container kan in sommige browsers een containing block worden
voor position: fixed, en dan zou een lade aan de pagina vastzitten.
Geen kopjes (h1/h2) in de inhoud: de topbalk draagt de paginatitel.
============================================================ */
/* --- Tokens: het kaartrecept en de vaste maten van de maatstaf --- */
:root {
--kv-card-radius: 12px;
--kv-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--kv-card-border: 1px solid var(--border-color);
--kv-bar-gap: 6px; /* werkbalk naar subbalk */
--kv-block-gap: 8px; /* tussen de blokken eronder */
--kv-page-inset: 24px; /* inzet van de pagina; nu nog de padding van .container-fluid */
/* --kv-topbar-h (68px) staat in header.css */
/* Maatschaal van de leerkracht-app (ronde 3). Gebruik deze tokens in
pagina-CSS in plaats van eigen rem-waarden; nergens kleiner dan xs. */
--kv-fs-xs: 0.6875rem; /* 11px: kolomkoppen, bijschriften, chips in een matrix */
--kv-fs-sm: 0.75rem; /* 12px: meta, pills, hulptekst, formulierlabels */
--kv-fs-base: 0.8125rem; /* 13px: gewone tekst, tabelcellen, invoervelden, knoplabels */
--kv-fs-md: 0.875rem; /* 14px: namen in lijsten en matrices, kaartkoppen */
--kv-fs-title: 1rem; /* 16px: alleen de werkbalktitel en de titel van een lege stand */
--kv-btn-h: 28px; /* hoogte van een knop (ui-btn), ook de icoonknop van 28x28 */
--kv-control-h: 32px; /* hoogte van invoervelden en selects */
}
/* --- Wortel ---
Size-container, zodat werkbalken op hun eigen breedte reageren (de
zijbalk van 240 of 60px en Windows-schaling tellen vanzelf mee).
Geen eigen padding: de inzet komt van .container-fluid. */
.ui-page {
container-type: inline-size;
min-width: 0;
}
/* --- Werkbalk en subbalk: het kaartrecept --- */
.ui-toolbar,
.ui-subbar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--surface-color);
border: var(--kv-card-border);
border-radius: var(--kv-card-radius);
box-shadow: var(--kv-card-shadow);
}
/* De werkbalk is één regel: titel en status links mogen krimpen en omlopen,
de knoppen rechts houden hun breedte. Onder 1024px vouwt hij wel om, zodat
de knoppen altijd zichtbaar blijven (UI-wet 1). */
.ui-toolbar {
flex-wrap: nowrap;
min-height: 50px;
}
/* De subbalk (weeknavigatie, filters) mag altijd omvouwen: daar staan vaak
meer groepjes naast elkaar dan op één regel passen. Geen min-hoogte, hij
is de smallere balk. */
.ui-subbar {
flex-wrap: wrap;
margin-top: var(--kv-bar-gap);
}
/* Titel: mag omlopen, wordt nooit afgekapt (UI-wet 4). */
.ui-toolbar__title {
min-width: 0;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: var(--text-primary);
overflow-wrap: break-word;
}
/* Kerncijfers en status naast de titel: compacte tekst, geen kaart */
.ui-toolbar__meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.ui-toolbar__meta i {
color: var(--primary-color);
font-size: 0.8rem;
}
.ui-toolbar__actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
}
/* Voor pagina's met veel filters in de werkbalk: altijd omvouwen. */
.ui-toolbar--wrap {
flex-wrap: wrap;
row-gap: 6px;
}
@media (max-width: 1023.98px) {
.ui-toolbar {
flex-wrap: wrap;
row-gap: 6px;
}
}
/* Plakkende werkbalk voor pagina's die zelf scrollen. Hij sluit precies aan
op de topbalk; het ::before-vlak dekt de strook erboven af in de
paginakleur, zodat de inhoud daar niet zichtbaar onderdoor schuift (zelfde
aanpak als de filterbalken op beoordelen en cijfers). z-index 20: boven de
inhoud, ruim onder de topbalk (1040), de zijbalk (1045) en de lades (1200).
De werkbalk staat bovenaan de pagina; het vlak dekt 90px erboven af. */
.ui-toolbar--sticky {
position: sticky;
top: var(--kv-topbar-h, 68px);
z-index: 20;
}
.ui-toolbar--sticky::before {
content: '';
position: absolute;
left: -4px;
right: -4px;
/* +1px: bottom 100% rekent vanaf de binnenkant van de rand en zou de
bovenrand van de balk afdekken. */
bottom: calc(100% + 1px);
height: 90px;
background: var(--surface-color);
pointer-events: none;
}
@media (max-width: 767.98px) {
.ui-toolbar--sticky {
position: static;
}
.ui-toolbar--sticky::before {
display: none;
}
}
/* Knoplabels inklappen is opt-in (alles past altijd, UI-wet 1): alleen een
werkbalk of subbalk met veel knoppen krijgt --labels-auto. Een balk met
een paar knoppen houdt zijn labels; daar is ruimte genoeg.
Met de modifier gaat het in twee stappen, net als de maatstaf: onder 1180px
containerbreedte verdwijnen de labels in de werkbalk, behalve die met
.ui-btn__label--keep (de hoofdactie); onder 860px alle labels, ook in een
subbalk met --labels-auto. Het icoon blijft; geef de knop daarom altijd een
title of aria-label. */
@container (max-width: 1180px) {
.ui-toolbar--labels-auto .ui-btn__label:not(.ui-btn__label--keep) {
display: none;
}
}
@container (max-width: 860px) {
.ui-toolbar--labels-auto .ui-btn__label,
.ui-subbar--labels-auto .ui-btn__label {
display: none;
}
}
/* --- Inhoudskaart ---
isolation: isolate houdt de z-index van alles binnenin (plakkende
tabelkoppen, vaste kolommen) binnen de kaart, zodat een ui-dropdown uit
de werkbalk er altijd overheen valt. */
.ui-panel {
margin-top: var(--kv-block-gap);
background: var(--surface-color);
border: var(--kv-card-border);
border-radius: var(--kv-card-radius);
box-shadow: var(--kv-card-shadow);
overflow: hidden;
isolation: isolate;
}
/* Eigen scrollvak, alleen voor een matrix met vaste kop en vaste eerste
kolom. De pagina zet --ui-panel-max-h (meestal vanuit JS: de resterende
hoogte van het venster); zonder waarde groeit de kaart gewoon mee. */
.ui-panel--scroll {
max-height: var(--ui-panel-max-h, none);
overflow: auto;
overscroll-behavior: contain;
}
/* Lege stand en laadstand op paginaniveau houden dezelfde afstand als een
inhoudskaart. */
.ui-page > .ui-empty-state,
.ui-page > .ui-loading {
margin-top: var(--kv-block-gap);
}
/* --- Lege stand ---
.ui-empty-state staat hierboven (sectie EMPTY STATE). In de leerkracht-app
(alles binnen .main-container, de schil van templates/header.php) volgt hij
het kaartrecept in plaats van de gestippelde rand. De beheer-shell heeft
geen .main-container en houdt de gestippelde rand, ook voor de
ui-empty-states die ui_empty_state() daar rendert. */
.main-container .ui-empty-state {
border: var(--kv-card-border);
border-radius: var(--kv-card-radius);
box-shadow: var(--kv-card-shadow);
}
/* Geen extra witruimte onder de tekst als er geen knop meer volgt */
.main-container .ui-empty-state__desc:last-child {
margin-bottom: 0;
}
/* --- Laadstand ---
Markup:
Laden...
*/
.ui-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 3rem;
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 600;
text-align: center;
}
.ui-loading i {
color: var(--primary-color);
font-size: 1.1rem;
}
/* --- Actiebalk onderaan ---
Voor pagina's met een opslaan- of verderknop. Kaartrecept zonder ronding
onderaan; de schaduw is die van de kaart, maar naar boven gericht. */
.ui-actionbar {
position: sticky;
bottom: 0;
z-index: 20;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 48px;
margin-top: var(--kv-block-gap);
padding: 6px 12px;
background: var(--surface-color);
border: var(--kv-card-border);
border-bottom: 0;
border-radius: var(--kv-card-radius) var(--kv-card-radius) 0 0;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
/* ============================================================
MAATSCHAAL LEERKRACHT-APP (PLAN-LAYOUT-CONSISTENT.md, ronde 3)
------------------------------------------------------------
Eén compacte maat voor knoppen, invoer, tabs, tabellen en lege
standen in de leerkracht-app; de tokens staan bij :root hierboven.
Alles hieronder dat een bestaande klasse aanpast, staat onder
:where(.main-container). Alleen de leerkracht-shell
(templates/header.php) heeft die wrapper, dus de beheer-shell, de
loginpagina's en de dialogen van showConfirmDialog (die in
hangen) houden hun maten.
Waarom :where(): de specificiteit blijft gelijk aan die van de
klasse zelf (.ui-btn telt als 0,1,0). Daardoor
- wint deze regel van de basisregel en van --sm en --lg hierboven,
omdat hij later in dit bestand staat;
- winnen pagina-CSS (laadt na dit bestand) en de aanraakregel in
mobile-responsive.css (min-height 44px bij pointer: coarse) nog
steeds, net als voor deze ronde. Eigen knop- en invoermaten op
pagina's ruimen de pagina's zelf op.
De nieuwe klassen (ui-panel__title, ui-filter-row, ui-panel--table,
ui-tabs--many, ui-tabs__select) bestaan alleen in de leerkracht-app
en staan daarom zonder scope, net als de rest van het skelet.
============================================================ */
/* --- Knoppen ---
ui-btn zonder modifier is de compacte knop van 28px (letter 0.78rem).
ui-btn--sm blijft bestaan voor bestaande markup en is hier gelijk aan de
standaard; zet hem niet meer bij. ui-btn--lg is de oude standaardmaat
(36px), alleen voor de ene hoofdknop in een lege stand. */
:where(.main-container) .ui-btn,
:where(.main-container) .ui-btn--sm {
padding: 0.35rem 0.7rem;
font-size: 0.78rem;
line-height: 1.2;
min-height: var(--kv-btn-h);
}
:where(.main-container) .ui-btn--lg {
padding: 0.55rem 1.1rem;
font-size: 0.875rem;
}
/* Knop met alleen een icoon: vierkant van 28 bij 28. Geef hem altijd een
title of aria-label. Op een aanraakscherm maakt mobile-responsive.css elke
knop 44px hoog; de breedte gaat dan mee, zodat hij vierkant blijft. */
:where(.main-container) .ui-btn--icon {
justify-content: center;
gap: 0;
width: var(--kv-btn-h);
height: var(--kv-btn-h);
padding: 0;
flex-shrink: 0;
}
@media (pointer: coarse) {
:where(.main-container) .ui-btn--icon {
width: var(--mobile-touch-target, 44px);
height: var(--mobile-touch-target, 44px);
}
}
/* --- Formulieren ---
Invoer en select 32px met letter 13px, label en hulptekst 12px. De
textarea houdt de min-height van 90px uit de basisregel. Zoekvelden in een
werkbalk zijn gewoon een ui-form-input en dus ook 32px. */
:where(.main-container) .ui-form-input,
:where(.main-container) .ui-form-select,
:where(.main-container) .ui-form-textarea {
padding: 0.35rem 0.6rem;
font-size: var(--kv-fs-base);
}
:where(.main-container) .ui-form-input,
:where(.main-container) .ui-form-select {
min-height: var(--kv-control-h);
}
:where(.main-container) .ui-form-label,
:where(.main-container) .ui-form-help {
font-size: var(--kv-fs-sm);
}
/* --- Tabs ---
Een tab is even hoog als een knop (28px), ook met een telling erin. De
hoogte komt uit min-height en align-items center, niet uit verticale
padding: met 0.4rem padding zou een tab met een telling van 18px op 31px
uitkomen. Zonder telling geeft de regelhoogte van 1.2 ruim 15px tekst. */
:where(.main-container) .ui-tabs {
padding: 0.3rem;
}
:where(.main-container) .ui-tab {
min-height: var(--kv-btn-h);
padding: 0 0.8rem;
font-size: 0.8rem;
line-height: 1.2;
}
:where(.main-container) .ui-tab__count {
min-width: 18px;
height: 18px;
padding: 0 0.35rem;
font-size: var(--kv-fs-xs);
}
/* Meer dan vier tabs (telefoonregel 2): op telefoon een keuzelijst met
dezelfde keuzes in plaats van de tabs. Tot en met vier tabs is niets nodig,
die staan op telefoon twee per regel (sectie TABS hierboven).
Markup: