/* moneybirdtool-python — themalaag bovenop missing.css (`static/missing.min.css`). De maten en kleuren hieronder zijn die van de **LSR-huisstijl**, zoals de oude app ze had (`public/style.css` daar, met de Figma-tokens in de kop). Dat is met opzet: de oude app zag eruit zoals hij hoorde te zien, en dit is dezelfde huisstijl in een andere dragende laag. Wie hier iets verandert verandert dus de huisstijl, niet alleen deze app. Wat er niet uit overgenomen is: de lettertypes. `Commissioner` en `Poppins` zijn Google Fonts, en `docs/BESLUITEN.md` heeft besloten geen externe lettertypes te laden. De systeemletter blijft dus, en dat is het enige zichtbare verschil met de oude app -- afgewogen en afgewezen, geen open vraag. Komt iemand er ooit op terug, dan gevendored in `static/` en niet via een CDN: `SECURE_CSP` staat op `default-src 'self'`. Structuur: eerst de tokens, dan de basis, dan het rooster, dan de componenten. Canonieke markup staat in `docs/UI.md`. */ /* ── Tokens: de LSR-huisstijl in de variabelen van missing.css ──────────── */ :root { /* Geen externe lettertypes; de oude app noemde Commissioner en Poppins met deze zelfde systeemval erachter. */ --main-font: system-ui, -apple-system, "Segoe UI", sans-serif; --secondary-font: var(--main-font); --display-font: var(--main-font); --mono-font: ui-monospace, monospace; /* De maten van de oude app. 13px body is dicht, en dat hoort ook: dit zijn tabelschermen waar je veel in één blik wil zien. */ --tekst: 13px; --tekst-klein: 12px; --tekst-meta: 11.5px; --kop-1: 18px; --kop-2: 14.5px; /* Drie tussenruimtes, en niet meer. Er stonden dertien harde waarden in zes maten -- 2, 4, 6, 8, 12 en 14px -- en dat verschil zag niemand, terwijl elke nieuwe regel weer een eigen getal koos. `--gap` van missing.css is 22,4px en dat is voor deze dichtheid te ruim; dit is de schaal eronder. */ --gap-krap: 4px; --gap-klein: 8px; --gap-ruim: 12px; /* Rondingen zoals de oude app ze had: kaart 10, knop 11, veld 8, modal en inlogkaart 14, chip 9. De skeletcel is van ons -- die had de oude app niet. */ --border-radius: 10px; --interactive-border-radius: 8px; --ronding-knop: 11px; --ronding-groot: 14px; --ronding-chip: 9px; --ronding-skelet: 6px; /* Merk en accent. Navy is de merkkleur, blauw de linkkleur. */ --accent: light-dark(#1f3864, #a9c3e8); /* De balk heeft eigen tokens en niet `--accent`. In donkere modus is `--accent` lichtblauw -- dat is goed voor koppen op een donkere pagina, maar als balkvulling geeft het een lichte strook boven een donker scherm. De balk hoort in beide modi donker navy te zijn. */ --balk-bg: light-dark(#1f3864, #16233a); --balk-fg: light-dark(#ffffff, #dce6f5); /* De linkkleur is een tint donkerder dan de #2e74b5 van de huisstijl, en dat is een contrastcorrectie zoals bij `--faded-fg` hieronder. Nagemeten: #2e74b5 op de paginakleur (#f3f5f8) haalt 4,49:1 waar WCAG AA 4,5 eist -- op wit haalt hij het wél (4,91), dus het viel alleen op waar een link direct op de pagina staat: de sorteerlinks in een tabelkop en de weg terug. #2b6da9 brengt dat op 4,98 en op wit op 5,4. Donkere modus raakte het niet: die zat op 7,6. */ --muted-accent: light-dark(#2b6da9, #6aa6f5); --link-fg: light-dark(#2b6da9, #6aa6f5); --navy-hover: light-dark(#16294a, #cddcf2); --accent-zacht: light-dark(#e7f1fa, #16233a); /* Oppervlaktes en tekst. */ --bg: light-dark(#f3f5f8, #0e1014); --fg: light-dark(#1c1e21, #e6e8ec); /* Twee namen, één waarde -- en met opzet in deze richting. Een colorway van missing.css (`.plain`, `.ok`, `.warn`, `.bad`, `.info`) zet `--muted-fg: var(--graphical-fg)`, dus binnen zo'n element wordt "stille tekst" ineens de randkleur: op een stille knop was dat #e2e5ea op wit, oftewel onleesbaar. Bedoel je stil, gebruik dan `--stil-fg` -- die kan een colorway niet overschrijven. `--muted-fg` is er voor missing.css zelf en volgt hem, zodat er één waarde te wijzigen valt. */ --stil-fg: light-dark(#4b4f56, #99a1af); --muted-fg: var(--stil-fg); /* Geen eigen token maar een override: `--faded-fg` is van missing.css, en dit is de metakleur van de huisstijl in plaats van zijn eigen waarde. Wij gebruiken hem nergens zelf, en met reden -- nagemeten haalt hij op klein schrift geen WCAG AA (3,73:1 op de paginakleur, waar 4,5 nodig is). Tekst die je léést krijgt `--stil-fg`; zie `docs/UI.md`, "Contrast". */ --faded-fg: light-dark(#7a7e86, #7d8592); --plain-bg: light-dark(#ffffff, #16181d); --plain-fg: light-dark(#1f3864, #a9c3e8); --plain-graphical-fg: light-dark(#e2e5ea, #2c303a); /* De vulling van een invulveld. Stond als losse waarde bij de velden zelf, met een derde donkere tint (#22262e) in dit token die daardoor nergens won -- een naam die niets beschreef. Nu de waarde die er echt staat; missing.css leest hem ook voor zijn eigen componenten. */ --interactive-bg: light-dark(#ffffff, #1a1d23); /* De statuskleuren, elk als bg/graphical/text-drietal. */ --ok-bg: light-dark(#e1f5ee, #10241c); --ok-fg: light-dark(#0f6e56, #7fd9ab); --ok-graphical-fg: light-dark(#1d9e75, #5cc48a); --warn-bg: light-dark(#faeeda, #2a2013); --warn-fg: light-dark(#854f0b, #f0c37e); --warn-graphical-fg: light-dark(#ba7517, #e0aa53); --bad-bg: light-dark(#fcebeb, #2a1414); --bad-fg: light-dark(#791f1f, #f5a3a3); --bad-graphical-fg: light-dark(#a32d2d, #f08585); --info-bg: light-dark(#e7f1fa, #16233a); --info-fg: light-dark(#1f3864, #a9c3e8); --info-graphical-fg: light-dark(#2e74b5, #6aa6f5); /* De maat voor lopende tekst en formulieren. */ --line-length: 46rem; /* Hoe hoog de merkbalk is. Die plakt bovenaan (`position: sticky`, z-index 5), dus een plakkende kolomkop moet er precies onder beginnen -- anders schuift hij eronder en zie je hem niet meer. Nagemeten: 58px, en dat volgt uit zijn eigen padding (12px) en regelhoogte. Een waarde en geen berekening, want CSS kan de hoogte van een ander element niet lezen. Verandert de balk, dan valt `kern/tests/test_browser.py::test_de_kolomkop_plakt_onder_de_balk` om -- dat is de bewaking. */ --balk-hoogte: 58px; /* Schaduwen: alleen waar iets écht boven de pagina hangt. */ --schaduw-kaart: 0 1px 2px light-dark(rgb(31 56 100 / 0.06), rgb(0 0 0 / 0.3)); --schaduw-hoog: 0 20px 60px light-dark(rgb(31 56 100 / 0.15), rgb(0 0 0 / 0.5)); } /* ── Basis ──────────────────────────────────────────────────────────────── */ body { font-size: var(--tekst); line-height: 1.45; } h1 { font-family: var(--display-font); font-size: var(--kop-1); font-weight: 700; line-height: 1.3; color: var(--accent); margin-block: 0 calc(var(--gap) / 3); } h2 { font-family: var(--display-font); font-size: var(--kop-2); font-weight: 600; line-height: 1.35; color: var(--accent); } h3 { font-size: var(--kop-2); font-weight: 600; line-height: 1.35; } /* Een label is kleiner en stiller dan wat je invult. Niet als het een aanvinkvakje omsluit -- dat is een zin, geen label. */ label:not(:has(input[type="checkbox"], input[type="radio"])) { font-size: var(--tekst-klein); font-weight: 500; color: var(--stil-fg); } /* Eén maat voor alle bijzaak, zodat het rustig blijft. */ .toelichting, .helptext, .wanneer { font-size: var(--tekst-klein); color: var(--stil-fg); } .errorlist { color: var(--bad-fg); } /* ── Rooster ────────────────────────────────────────────────────────────── */ /* De oude app had één gecentreerd canvas van 1200px. Dat is de basis; een scherm dat écht de hele breedte nodig heeft zegt dat zelf met `.breed` op `main`. Per scherm en niet per element: twee verschillende linkermarges op één pagina is precies hoe het rommelig werd. */ main { max-inline-size: 1200px; inline-size: 100%; margin-inline: auto; padding: 22px 24px 60px; } main.breed { max-inline-size: none; } /* Lopende tekst en formulieren houden een maat, links uitgelijnd. */ .kolom { max-inline-size: var(--line-length); } /* `.f-row` van missing.css is een flexrij, maar hij wrapt niet -- en op deze schermen moet dat: een naam met vier chips erachter hoort op een smal venster door te lopen in plaats van uit het scherm te schuiven. Wanneer je `.f-row` gebruikt en wanneer een eigen klasse: een component die zélf «een rij van iets» betekent (`.kpi`, `.kop`) regelt zijn eigen `display: flex`, want die staat op meerdere plekken en dan is «vergeet `.f-row` niet» precies de kwetsbaarheid die we kwijt willen. `.f-row` is voor een eenmalige rij in de markup, waar een eigen klasse alleen maar `display: flex` zou bevatten. */ .f-row { flex-wrap: wrap; } /* Een scherm dat in de modal opengaat (`templates/popup.html`). Het krijgt geen eigen breedte -- de modal bepaalt die, en als volledige pagina staat het op hetzelfde canvas als de rest. Wat het wél doet: de lopende tekst die er direct in staat op leesbreedte zetten, zodat de uitleg boven een bevestiging niet over 1200px uitloopt. Tabellen en formulieren erin blijven ongemoeid; die zeggen zelf wat ze nodig hebben. */ .popup > p { max-inline-size: var(--line-length); } /* missing.css' `.grid` maakt pas kolommen als een kind met `data-cols` zegt waar het hoort. Deze variant vult zichzelf -- nodig voor een formulier waarvan het aantal velden uit een Django-form komt. */ .grid.kolommen { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } /* Kop met acties ernaast. */ .kop { display: flex; flex-flow: row wrap; align-items: baseline; gap: var(--gap); /* De acties staan in een eigen `.kopacties` en niet los naast de kop, en dan is één regel genoeg om ze rechts te zetten. Eerst hing dat aan `> :first-child`: `space-between` werkte namelijk alleen bij precies twee kinderen, en met drie knoppen stond de middelste midden in de balk te zweven. Met een doos eromheen is het aantal knoppen niet meer van belang -- en `templates/scherm.html` zet die doos er altijd, dus geen scherm kan hem vergeten. */ > .kopacties { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--gap-klein); align-items: baseline; } } /* ── Balk en navigatie ──────────────────────────────────────────────────── */ /* De oude app had twee balken: een navy topbar met de merknaam en de gebruiker, en daaronder een witte balk met tabbladen. Die tweede balk is waaraan je het herkent, dus die staat hier ook. */ .navbar { padding: 12px 24px; background: var(--balk-bg); color: var(--balk-fg); border-block-end: none; font-size: var(--tekst); /* missing.css geeft een `body > header` een marge eronder; de tweede balk hoort er tegenaan te zitten. */ margin-block-end: 0; a { color: inherit; } form { display: flex; align-items: center; gap: var(--gap-klein); } button { color: inherit; /* Op een donkere balk, in beide modi: een lichte doorschijnende vulling. */ background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.45); box-shadow: none; font-size: var(--tekst-klein); &:hover, &:focus-visible { background: rgb(255 255 255 / 0.26); filter: none; } } .merk { font-family: var(--display-font); font-weight: 700; font-size: 1.05rem; } .gebruiker { font-size: var(--tekst-meta); opacity: 0.75; } } /* De merknaam links, de gebruiker met zijn uitlogknop rechts. Deze drie regels spiegelen een regel van missing.css, en dat is met opzet. Hij centreert de inhoud van een `.navbar` namelijk zélf: .navbar:not(.expanded) { > :first-child, nav > :first-child { margin-inline-start: auto } > :last-child, nav > :last-child { margin-inline-end: auto } } Zonder tegenwicht staan merknaam en uitlogknop dus midden in de balk. Het moet op deze selector: `.navbar > *` weegt (0,2,0) en verliest van zijn (0,3,0). Een `space-between` op de balk zetten helpt niet -- een auto-marge slokt de vrije ruimte op vóórdat `justify-content` aan bod komt. Nagemeten: dan schuiven ze naar het midden. Zijn `nav >`-varianten spiegelen we niet: in deze balk staat geen `