/* =====================================================================
Lettertypen, meegeleverd als woff2 onder statisch/lettertypen/.
Bewust geen Google Fonts-link: geen externe afhankelijkheid op een site
waar straks nabestaanden foto's achterlaten, en niets wat onderweg naar
een derde partij lekt.
Eén familie voor het hele portaal. Er stond hier ook een klassieke letter
voor de koppen en voor de merknaam in de balk; die is op 4 september 2026
vervallen, want in de balk staat sindsdien het logo.
Nunito is een variabel lettertype, dus een bestand per subset dekt het
hele gewichtsbereik. Latin en latin-ext zijn er allebei, met de
unicode-ranges van Google; een naam met een Poolse of Tsjechische letter
valt daarmee niet terug op een systeemletter.
Dit blok staat boven de variabelen omdat @font-face geen var() kan
gebruiken. De gewichten hieronder zijn wat het bestand kan, geen
ontwerpkeuze; die staat verderop als --gewicht-*.
===================================================================== */
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url('/statisch/lettertypen/nunito-cursief.latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* latin */
}
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url('/statisch/lettertypen/nunito-cursief.latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; /* latin-ext */
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('/statisch/lettertypen/nunito.latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* latin */
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('/statisch/lettertypen/nunito.latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; /* latin-ext */
}
/* =====================================================================
Fundament van de huisstijl.
Alles onder dit blok gebruikt uitsluitend deze variabelen: geen losse
kleurcode, geen losse pixelwaarde. Wie later de look aanpast, doet dat
hier en nergens anders.
De waarden komen letterlijk uit Memoria Regie
(apps/desktop/src/renderer/regie.css), zodat portaal en MR familie van
elkaar zijn. Waar het portaal afwijkt of iets toevoegt staat dat erbij.
Dit is nog geen ontwerp. De schermen zijn kaal en functioneel; de
huisstijl wordt later in één keer goed gedaan, en dan bovenop dit blok.
===================================================================== */
:root {
/* --- Huisstijl ---------------------------------------------------- */
--navy: #22305f; /* MR --navy. Tekst en koppen. */
--navy-zacht: #46527a; /* MR --navy-soft */
--gedempt: #83879a; /* MR --muted. Bijschriften. */
--koraal: #e8846b; /* MR --coral. Het oranje accent. */
--hart: #E57D6D; /* Het zalmrood van het hartje in het woordmerk. */
--koraal-diep: #d5624a; /* MR --coral-deep */
--groen: #4f8c62; /* MR --ok. Bevestiging. */
--rood: #8c1c2b; /* MR --t-ritueel. Ook onze foutkleur. */
/* De twee kleuren van het definitieve logo, uitgelezen uit de bestanden.
Ze staan naast --navy en --koraal en vervangen die niet: die twee komen
letterlijk uit Memoria Regie en dragen het hele portaal, en ze omgooien
zou een herontwerp zijn en geen logo-invoering. Deze twee zijn voor wat
bij het merk hoort. */
--merk-blauw: #0e2a6b;
--merk-zalm: #e57d6d;
/* Maten van het merk in de balk. Het woordmerk wordt op hoogte gezet en
houdt zijn verhouding; het logo van de klant is van onbekende vorm en
wordt daarom aan twee kanten begrensd. */
--merk-hoogte: 1.6rem;
--merk-hoogte-klein: .95rem;
--merk-klant-hoogte: 3.4rem;
--merk-klant-breedte: 17rem;
--inlogmerk-hoogte: 4.5rem; /* Haar logo boven het inlogscherm. */
--merk-onder-hoogte: 1.47rem; /* Ons woordmerk onderaan de pagina. */
--menu-lade-breedte: 11rem; /* Het laatje onder een menuknop. */
/* De menuknoppen, in allebei de portalen en ook bij Komend en Afgelopen.
In rust alleen tekst, geen vlak eromheen; de pagina waar je staat draagt
het zalmrood van het hartje in het woordmerk. */
--menu-tekst: #0E2A6B;
--menu-hier-vlak: #FDEBE6;
--menu-hier-tekst: #E5542E;
--menu-zweef-vlak: #FBF6F4;
/* Links in de lopende tekst en in de tabellen. Dezelfde twee kleuren als de
menuknoppen hierboven, en met opzet als verwijzing en niet als tweede
kleurcode: gaat het menu ooit van kleur, dan gaan de links mee. */
--link: var(--menu-tekst);
--link-zweef: var(--menu-hier-tekst);
/* --- Vlakken en lijnen -------------------------------------------- */
--creme: #f5f0e8; /* MR --cream. De pagina zelf. */
--vlak: #ffffff; /* MR --surface. Kaarten, tabellen, velden. */
--papier: #fffdfa; /* MR --paper */
--lijn: #e7e0d5; /* MR --line. Zachte rand, nooit hard zwart. */
--tint: #eceef6; /* MR --tint. Rustige achtergrondvulling. */
/* --- Scenefamilies ------------------------------------------------
MR kleurt niet per scenetype maar per familie: zeven kleuren, en een
scenetype hoort bij een familie. Zie de tabel onderaan dit blok.
Per familie staat hier één accent, letterlijk uit MR. Het pastelvlak
wordt daaruit gemengd, precies zoals MR het doet
(.step: 14% op wit, rand 26% op de lijnkleur). Zo is er per familie
één waarde om aan te draaien in plaats van twee die uit elkaar lopen.
------------------------------------------------------------------ */
/* --- Kleuren van de draaiboekitems --------------------------------
Zeven kleuren voor negen items, letterlijk uit Memoria Regie. Welk item
welke kleur heeft staat in de database; deze variabelen zijn het palet
waaruit gekozen wordt, en wat de test bewaakt als iemand ze ooit
ongemerkt wijzigt.
Een kaart toont de kleur die bij dat item is opgeslagen, via --tc. Zou de
kaart een van deze variabelen gebruiken, dan verandert er niets als Mat
een kleur wijzigt en liegt het scherm.
------------------------------------------------------------------ */
--scene-magenta: #c23c9c;
--scene-blauw: #1fa0e0;
--scene-oranje: #ee8a22;
--scene-groen: #2e9e5b;
--scene-wijnrood: #8c1c2b;
--scene-grijs: #8a8f9c;
--scene-donkerblauw: #3a4767;
/* Menging van een gekleurd vlak op wit, en van zijn rand op de lijnkleur.
Deze verhoudingen komen van de instellingenpagina van MR, niet van het
Regie-scherm: die laatste is gemaakt om van een meter afstand leesbaar te
zijn, deze om rustig onder een tabel te liggen. */
--scene-kaart-vlak: 7%;
--scene-kaart-zweef: 13%;
--scene-kaart-rand: 32%;
/* Een vlak binnen een kaart, dus iets dieper dan de kaart zelf: het
bedieningsdeel van het muziekvak. Grijs zou vuil ogen in een gekleurde
kaart, dus dezelfde scene-kleur en alleen meer ervan. */
--scene-vlak-diep: 14%;
/* Algemene menging voor gekleurde meldingen. */
--menging-vlak: 14%;
--menging-donker: 80%;
--menging-rand: 26%;
/* --- Typografie ---------------------------------------------------- */
--sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* De rangorde in een opengeklapte kaart, van boven naar beneden:
kopje van een blok --tekst-l + gewicht-vet + navy
gewone tekst --tekst-m
toelichting --tekst-s + gedempt
Drie treden, en meer niet: aan de maat zie je of iets een kopje, tekst of
een toelichting is.
--tekst-s is de ondergrens: dat is de maat van de ondertitel in de
ingeklapte regel, en niets in de kaart hoort kleiner te zijn dan wat
daar staat. Het verschil tussen tekst en toelichting maakt de kleur.
--tekst-xs is daarmee alleen nog voor buiten de kaart. */
/* De basismaat van de letter. Els pakte op 30 september haar bril erbij;
sindsdien is gewone tekst 17 pixels in plaats van 16. Alles wat in rem
staat, letters en ruimte, schaalt mee, zodat de verhoudingen blijven. */
--basismaat: 106.25%;
/* Smaller dan dit wordt de lijst Uitvaarten niet; daaronder schuift hij in
zijn eigen vak. */
--breedte-uitvaartlijst-min: 56rem;
--tekst-xs: .75rem;
--tekst-s: .85rem;
--tekst-m: 1rem;
--tekst-l: 1.1rem;
--tekst-xl: 1.4rem;
--gewicht-normaal: 400;
--gewicht-half: 600;
--gewicht-vet: 800;
--regelhoogte: 1.5;
--regelhoogte-kop: 1.2;
--regelhoogte-strak: 1.25;
--letterspatie-kop: .01em;
/* De kijkcode wordt overgetypt en aan de telefoon voorgelezen; los van
elkaar staande letters lezen dan makkelijker. */
--letterspatie-code: .18em;
/* --- Vormtaal ------------------------------------------------------
Ronde hoeken, ruime witruimte tussen blokken, zachte achtergronden in
plaats van harde randen.
------------------------------------------------------------------ */
--radius: 13px; /* MR --radius. Kaarten en vlakken. */
--radius-knop: 10px; /* MR --knop-radius */
--radius-klein: 7px; /* velden */
--radius-rond: 999px; /* pillen */
--randdikte: 1px;
--balkrand: 4px; /* De kleurrand links van een onderdeelbalk. */
/* Hoe de kleur van een onderdeel getekend wordt: een streep bovenaan zijn
blok, een bolletje voor de kop, en een tint in de rand, de scheidslijn
en de knoppen. De kleuren zelf staan in de database. */
--onderdeel-streep: 3px;
--onderdeel-bolletje: .56rem;
--onderdeel-bolletje-zakken: .08em;
--onderdeel-rand: 30%;
--onderdeel-scheiding: 60%;
--onderdeel-knop: 16%;
--onderdeel-knop-zweef: 26%;
/* Het streepje voor Komend en Afgelopen. */
--sectie-streep-hoogte: .9em;
--sectie-streep-zakken: -.1em;
--breedte-telling: 5.5rem; /* Eén telpil in de kop van een uitvaart. */
/* De vier telpillen in de kop van een uitvaart, elk met zijn eigen vulling
en tekstkleur. Drie ervan zijn licht gevuld met verzadigde tekst; fout is
als enige omgekeerd, vol rood met wit erin. Daardoor springt fout eruit en
blijft de rest rustig. */
--telpil-klaar-vlak: #D6F5E7;
--telpil-klaar-tekst: #00875A;
--telpil-bezig-vlak: #FFE3D6;
--telpil-bezig-tekst: #E5542E;
--telpil-wachtend-vlak: #EDECE8;
--telpil-wachtend-tekst: #78766F;
--telpil-fout-vlak: #F0453A;
--telpil-fout-tekst: #FFFFFF;
--schaduw: 0 1px 2px rgba(30, 35, 60, .05), 0 7px 20px rgba(30, 35, 60, .06); /* MR --shadow */
--ruimte-xs: .25rem;
--ruimte-s: .5rem;
--ruimte-m: .75rem;
--ruimte-l: 1.25rem;
--ruimte-xl: 2rem;
--ruimte-blok: 2.5rem; /* tussen twee blokken op een pagina */
--icoon-maat: 1.25rem;
--icoon-maat-klein: .8rem;
--breedte-kaart: 15rem;
/* Inclusief de ruimte tussen de kaarten en de scheidslijn, zodat de
kaarten even breed blijven als daarvoor. */
--breedte-catalogus: 17.25rem;
/* Ingeklapt: net breed genoeg voor het knopje en de kop overeind.
Afgeleid van de knop zelf, zodat die er niet uit kan groeien. */
--breedte-catalogus-dicht: calc(var(--breedte-transportknop) + var(--ruimte-m));
--breedte-klok: 3.5rem;
--breedte-plek: 5.5rem;
/* De duurkolom: genoeg voor 1:02:03, zodat het icoon ernaast op elke regel
op dezelfde plek staat. */
--breedte-duur: 3.5rem;
/* Vaste hoogte van een ingeklapte regel: zo staan ze gelijk en weet je
hoeveel er op een scherm passen. */
--regel-hoogte: 3.4rem;
--bol: 1.6rem;
--vierkant: 1.9rem;
--lijndikte-doel: 3px;
/* Het venster met het verzoek aan de familie. Breed genoeg dat een
regel van de mailtekst niet halverwege afbreekt. */
--berichtvenster-breed: 46rem;
/* Het venster waarin het draaiboek op papier gelezen wordt. Een staand vel
op ware breedte, met de knoppen eronder nog in beeld. */
--papiervenster-breed: 58rem;
--papiervenster-hoog: 46rem;
--berichtvoorbeeld-hoog: 34rem;
--breedte-pagina-breed: 76rem;
/* Zoveel ruimte houdt de cataloguskolom over onder de kop. */
--hoogte-kolom: calc(100vh - 14rem);
--breedte-veld: 11rem;
/* Wat een telefoon van een armlengte afstand nodig heeft om de kijklink te
scannen. */
--breedte-qr: 9rem;
/* Beide kolomkoppen even hoog, anders beginnen de kaarten niet gelijk.
Ruim genoeg voor de hint links, die over twee regels loopt. */
--hoogte-kolomkop: 4.5rem;
--breedte-pagina: 60rem;
--breedte-formulier: 30rem;
--breedte-regelweg: 28rem; /* Verwijderen, opengeklapt in de lijst Uitvaarten */
--breedte-venster: 26rem;
--breedte-gegevensvenster: 44rem; /* Gegevens aanpassen, met label en veld naast elkaar. */
--breedte-speler: 28rem;
/* Vier letters met ruimte eromheen, en niet meer. */
--breedte-code: 9rem;
/* De labelkolom in het dossierscherm: breed genoeg voor "Naam
overledene" op één regel. */
--breedte-label: 11rem;
--breedte-kort-veld: 14rem;
/* Een veld waar maar een paar tekens in gaan: een huisnummer, een postcode.
Eén maat voor allebei, zodat ze naast elkaar even breed staan. */
--breedte-smal-veld: 8rem;
--maat-voorbeeld: 4rem;
/* --- De fototegel -------------------------------------------------
Een tegel is een voorproefje van de dia in de aula, en die schermen
zijn 16:9. De hele foto komt in beeld, er wordt niets bijgesneden;
wat overblijft wordt gevuld met dezelfde foto, uitvergroot,
gecentreerd, zwaar vervaagd en wat donkerder.
De vervaging staat in containereenheden, dus evenredig met de tegel:
zo oogt een tegel hetzelfde bij twee, vier en acht per rij. Zou hij
in pixels staan, dan was hij bij klein pap en bij groot te zwak, en
dan is het geen voorproefje meer.
De opschaling is nodig omdat blur() buiten de rand van het element
kijkt: daar is niets, dus schijnt door de vervaging heen wat áchter de
tegel ligt en loopt er een lichte waas langs de rand.
Die waas reikt ongeveer drie keer de vervaging naar binnen, dus eenentwintig
procent van de breedte. Op 1,25 bleef daar acht procent van over, en dat
was precies het enige waarin de tegel nog afweek van de dia die de set
krijgt: gemeten op een staande foto 5,74 van 255 over het hele vlak tegen
2,71 met die rand eraf. Op 1,45 valt de waas buiten beeld. Wat Els ziet
hoort te kloppen met wat er in de aula komt, dus trekt de tegel bij en
niet de dia.
Deze waarde hoort gelijk te blijven aan DIA_OPSCHALING in mediabeheer.py.
------------------------------------------------------------------ */
--tegel-verhouding: 16 / 9;
--tegel-vervaging: 7cqw;
--tegel-verdonkering: 0.7;
/* De zwarte achtergrond die Els per fotopresentatie kan kiezen, zoals op
het zaalscherm. */
--tegel-zwart: #000000;
/* Bijsnijden: het venster, het kader en zijn hoeken, en het waas over wat
buiten het kader valt. */
--breedte-snijvenster: 64rem;
--hoogte-snijvlak: 65vh;
/* De foto met het kader, en ernaast hoe hij op het scherm in de aula komt.
Past het niet naast elkaar, dan zakt het voorbeeld eronder. */
--breedte-snijkolom: 24rem;
--breedte-snijvoorbeeld: 20rem;
--snij-kader-rand: 2px;
--snij-hoek: 14px;
--snij-waas: rgba(0, 0, 0, .55);
/* De kalender van het portaal: de maat van een dag en van het laatje. */
--kalender-dag: 2.3rem;
--kalender-icoon: 1.1rem;
--tegel-opschaling: 1.45;
/* Hoeveel er weg mag vallen als de foto de tegel vult. Blijft het verlies
hieronder, dan vult de foto de tegel en is er geen achtergrond nodig;
erboven komt de hele foto in beeld met de vervaagde vulling erachter.
Een 3:2 uit een spiegelreflex verliest 15,6 procent en vult dus; een 4:3
verliest een kwart en houdt de achtergrond, net als staande foto's en
panorama's. Tussen die twee zit geen gangbaar formaat, dus deze waarde
ligt bewust in het midden en niet vlak naast een veelvoorkomende foto. */
--tegel-drempel: 0.2;
/* De voortgangsbalk bij het omzetten van een film. */
--hoogte-balk: 0.375rem;
--breedte-balk: 14rem;
/* De muziekkeuze: het logo van de ondernemer in het muziekoverzicht. */
--breedte-mini: 5rem;
/* De binnenmarge van het vlak met de waveform en de bediening. */
--vulling-bediening: var(--ruimte-m);
/* Net genoeg voor 1:02:03 en geen teken meer. Els had zelf al een stuk van
12:02 en bij klassiek kan het langer, dus afkappen mag niet. */
--breedte-tijdveld: 4.25rem;
/* Alle transportknoppen even breed; "«5" is het breedste wat erin staat. */
--breedte-transportknop: 2.75rem;
/* In de kaart staan er zes naast elkaar in een smalle kolom; daar mogen ze
kleiner. Als factor en niet als losse maat, zodat de breedte, de marge en
het teken samen krimpen en de verhouding blijft kloppen. De letter krimpt
niet mee: die zit al op --tekst-s, de ondergrens in de kaart. */
--krimp-transport: .8;
/* Een getalveld van hoogstens twee cijfers, met de pijltjes erbij. */
--breedte-smalveld: 4.5rem;
/* De eerste kolom van de keuzefase: elke stap begint met een label van
deze breedte, zodat wat erachter staat op één kantlijn begint. */
--breedte-muziekstap: 11.5rem;
--maat-xenoxlogo: 1.5rem;
/* De schakelaar Ken Burns: een pil met een knop die van links naar rechts
gaat. */
--breedte-schakelaar: 2.6rem;
--hoogte-schakelaar: 1.4rem;
--maat-schakelknop: 1rem;
/* De video van Ken Burns in de kaart: groot genoeg om te beoordelen, klein
genoeg om de kaart niet te vullen. */
--breedte-kenburnsvideo: 32rem;
/* Het upload-pijltje bij muziek die zelf is geüpload: kleiner dan het logo
van Xenox, want dat logo is het enige dat mag opvallen. */
--maat-uploadteken: 1rem;
--breedte-artiest: 13rem;
/* De waveform van het gekozen nummer: hoog genoeg om het verloop van het
geluid te zien, laag genoeg om de kaart niet lang te maken. */
--hoogte-waveform: 5rem;
/* Hoe sterk het deel buiten Inpunt en Uitpunt wegvalt. */
--waveform-gedimd: 72%;
--breedte-merk: .125rem;
/* Groot genoeg om met een muis te pakken. */
--breedte-greep: .7rem;
/* De ruimte voor de titel van het nummer, voor het artiestveld. */
--breedte-muzieknamen: 22.5rem;
--maat-teken: .8rem;
/* Het driehoekje voor een uitklap, en het vakje van een vinkje. */
--maat-pijl: .3rem;
--maat-vouwpijl: .45rem; /* De vouwdriehoek van een uitvaart. */
--maat-vinkje: .9rem;
/* Ruimte die altijd vrijgehouden wordt voor een melding, zodat er niets
verspringt als er een komt en weer gaat. */
--hoogte-melding: 1.4rem;
/* Vier voorbeelden per rij. Els kan dit zelf op twee of acht zetten;
die keuze blijft in haar browser staan. */
--media-kolommen: 4;
/* Het verduisterde vlak achter een bevestigingsvenster. */
--verduistering: color-mix(in srgb, var(--navy) 45%, transparent);
/* De reden van een mislukte muziekaanvraag in het beheeroverzicht. Die komt
van een dienst buiten de deur en kan elke lengte hebben; breder zou de
kolommen ernaast wegdrukken. */
--breedte-reden: 12rem;
/* Ruim genoeg voor de titel plus wat er gedempt onder staat: de artiest,
de uitvoering, de duur en de herkomst. */
--breedte-nummerkolom: 15rem;
/* De preview van een fotoreeks. Niet klein en ook niet paginavullend: rond
tweederde van het scherm, met het beeld in 16:9. De onderrand is de balk
met de bediening; die gaat van de hoogte af, anders zou het beeld op een
laag scherm onder de rand vallen. */
--preview-breedte: 66vw;
--preview-onderrand: 4rem;
/* De balk onder het beeld. Donkergrijs en niet navy: naast een familiefoto
leest een gekleurde balk mee met het beeld. Zo hoort hij bij de foto en
niet bij de pagina eromheen. Dit is de enige plek in het portaal met een
donker vlak, vandaar een eigen paar en geen huisstijlkleur. */
--preview-balk: #2a2a2e;
--preview-balk-inkt: #ffffff;
/* Hoe zacht de ene foto in de andere overgaat. Het ontwerpdocument noemt
een seconde als instelling voor later; zolang die er niet is, staat de
waarde hier en nergens anders. */
--preview-overvloeiing: 600ms;
--breedte-logo: 12rem;
/* Bescheiden formaat in de kop; past voor een liggend en een staand logo. */
--hoogte-logo-kop: 2.25rem;
--breedte-logo-kop: 9rem;
--hoogte-logo: 4rem;
/* Het logo in de greep van een uitklapper. Lager dan het logo bovenaan een
scherm: deze balk draagt een naam van één regel, en een logo dat hoger is
maakt van elke balk een blok. */
--hoogte-logo-balk: 1.75rem;
--breedte-logo-balk: 7rem;
}
/* =====================================================================
De negen draaiboekitems
Placeren, Binnenkomst, Spreker, Fotopresentatie, Optreden, Ritueel, Film,
Uitgeleide, Einde uitvaart. Elk item heeft een kleur en een icoon, zodat je
ze op een scherm uit elkaar houdt: een spreker krijgt een microfoon, muziek
krijgt een noot.
Dat drie items dezelfde kleur hebben en hetzelfde icoon is een gevolg, geen
indeling. Er hangt geen gedrag aan en er is geen tussenlaag.
Kleur en icoon staan per item in de database, want Mat beheert ze in
/beheer/scenecatalogus. Het icoon is daar bewust niet wijzigbaar: het wordt
rauw in de pagina gezet om een icoon te kunnen zijn, en alleen de migratie
schrijft erin.
Ritueel is wijnrood en blijft wijnrood. Dat is in MR een gemeten besluit: op
een lichte tint lag het oude wijnrood op dE 3,7 van het magenta, en dat is
met het blote oog hetzelfde.
===================================================================== */
* { box-sizing: border-box; }
html { font-size: var(--basismaat); }
body {
margin: 0;
font-family: var(--sans);
font-size: var(--tekst-m);
line-height: var(--regelhoogte);
color: var(--navy);
background: var(--creme);
-webkit-font-smoothing: antialiased;
}
/* Links, overal waar er geen eigen opmaak op staat.
*
* Zonder deze regel valt een link terug op wat de browser zelf doet: fel
* blauw, onderstreept, en paars zodra iemand er een keer geweest is. Dat stond
* zo op het planningscherm, op de overzichten en in het archief, en het viel
* op omdat een lijst met namen daardoor ongelijk werd: de ene naam paars en de
* andere blauw, en dat zegt niets over het dossier en alles over wie er
* toevallig achter de knoppen zat.
*
* Bezocht krijgt daarom dezelfde kleur als niet bezocht. Onderstrepen doet hij
* in rust niet; de kleur draagt het al, en in een tabel vol namen worden
* strepen onrustig.
*
* Wie een eigen klasse heeft houdt zijn eigen kleur, want een klasse wint van
* deze regel: de menuknoppen, de terugkoppeling bovenaan een scherm, de kaarten
* in de scenecatalogus, en de link in de voettekst. */
a {
color: var(--link);
text-decoration: none;
}
a:visited {
color: var(--link);
}
a:hover {
color: var(--link-zweef);
}
/* De balk blijft staan bij het scrollen. In een lang dossier ben je hem
anders kwijt op het moment dat je wilt wisselen.
De stapelvolgorde is de laagste die werkt: er staat verder nergens in dit
blad een z-index, en de twee vensters die over de pagina komen zijn
dialoogvensters. Die zet de browser sowieso bovenop, dus die raken hier
niet onder. */
header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ruimte-l);
padding: var(--ruimte-m) var(--ruimte-xl);
background: var(--vlak);
border-bottom: var(--randdikte) solid var(--lijn);
}
/* Het merk van de klant draagt de balk en krijgt daarom ruimte om zich heen.
Bij de ondernemer is dit het eerste wat ze ziet, en het hoort van haar te
zijn; in het managementportaal staat ons woordmerk op dezelfde plek en dat
is kleiner, dus daar valt die ruimte vanzelf weg. */
header .merk {
display: flex;
align-items: center;
gap: var(--ruimte-m);
min-width: 0;
padding: var(--ruimte-xs) var(--ruimte-s);
text-decoration: none;
color: inherit;
}
/* Het woordmerk wordt op hoogte gezet en houdt zijn verhouding. Het bestand
is 493 bij 96 en dus ruim boven wat hier getoond wordt; op een scherm met
dubbele pixeldichtheid staat het daarmee nog scherp. */
.merk-woordmerk {
height: var(--merk-hoogte);
width: auto;
display: block;
}
/* Naast het logo van de klant staat het onze klein en bescheiden: dit is
haar portaal, wij staan erbij. */
.merk-woordmerk.merk-klein {
height: var(--merk-hoogte-klein);
opacity: .75;
}
/* Het logo van de klant is van onbekende verhouding, staand of liggend, dus
allebei de maten begrensd. */
.merk-klant {
max-height: var(--merk-klant-hoogte);
max-width: var(--merk-klant-breedte);
width: auto;
display: block;
}
/* Heeft de organisatie nog geen logo, dan haar naam op die plek, even groot
en met dezelfde ruimte eromheen. Ook zonder logo hoort het portaal van haar
te voelen. */
.merk-klantnaam {
font-size: var(--tekst-xl);
font-weight: var(--gewicht-vet);
letter-spacing: var(--letterspatie-kop);
color: var(--navy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Eén rij, altijd. Wat er niet bij kan gaat achter Meer; het script verhuist
dat. Zonder nowrap brak het menu op een laptop naar een tweede rij en schoof
de hele pagina omlaag. */
header nav {
display: flex;
align-items: center;
gap: var(--ruimte-s);
flex-wrap: nowrap;
min-width: 0;
}
header nav form { margin: 0; }
.menu-rij {
display: flex;
align-items: center;
gap: var(--ruimte-s);
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
/* Rechthoeken met afgeronde hoeken, niet de ronde pillen: die staan goed als
twee filters naast elkaar, maar een rij van negen leest er goedkoop van. */
.menu-knop {
display: block;
padding: var(--ruimte-xs) var(--ruimte-m);
border-radius: var(--radius-knop);
font-size: var(--tekst-s);
text-decoration: none;
color: var(--menu-tekst);
white-space: nowrap;
cursor: pointer;
list-style: none;
transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}
.menu-knop::-webkit-details-marker { display: none; }
.menu-knop:hover {
background: var(--menu-zweef-vlak);
color: var(--menu-hier-tekst);
}
.menu-knop.actief {
background: var(--menu-hier-vlak);
color: var(--menu-hier-tekst);
font-weight: var(--gewicht-half);
}
/* Een knop met een laatje eronder: Meer, en de naam van wie er ingelogd is.
Het laatje zweeft over de pagina en duwt de balk dus niet uit elkaar. */
.menu-lade {
position: relative;
flex: none;
}
.menu-lade[open] > .menu-knop { background: var(--tint); color: var(--navy); }
.menu-uitklap {
position: absolute;
top: calc(100% + var(--ruimte-s));
right: 0;
z-index: 20;
display: flex;
flex-direction: column;
gap: var(--ruimte-xs);
min-width: var(--menu-lade-breedte);
padding: var(--ruimte-s);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
}
.menu-uitklap .menu-knop { text-align: left; }
.menu-uitklap button { width: 100%; }
/* Ons woordmerk onderaan de pagina, gecentreerd en vlak boven de voettekst.
Het stond naast de kop van de pagina en las daar als een tweede kop naast
Uitvaarten. Onderaan zegt het wat het moet zeggen zonder iets over te nemen,
en het geldt op elke pagina aan de klantzijde. */
.merk-onder {
display: block;
margin: var(--ruimte-blok) auto var(--ruimte-m);
height: var(--merk-onder-hoogte);
width: auto;
opacity: .7;
}
/* Staat het woordmerk er, dan sluit de voettekst er direct op aan; de ruimte
boven het geheel komt van het woordmerk zelf. */
.merk-onder + .voet { margin-top: 0; }
main {
max-width: var(--breedte-pagina);
margin: 0 auto;
padding: var(--ruimte-xl);
}
h1 {
font-size: var(--tekst-xl);
font-weight: var(--gewicht-half);
line-height: var(--regelhoogte-kop);
letter-spacing: var(--letterspatie-kop);
margin: 0 0 var(--ruimte-l);
}
h2 {
font-size: var(--tekst-l);
font-weight: var(--gewicht-half);
line-height: var(--regelhoogte-kop);
margin: var(--ruimte-blok) 0 var(--ruimte-s);
}
form.staand { max-width: var(--breedte-formulier); }
label {
display: block;
margin: var(--ruimte-m) 0 var(--ruimte-xs);
font-size: var(--tekst-s);
color: var(--gedempt);
}
input, select, textarea {
width: 100%;
padding: var(--ruimte-s) var(--ruimte-s);
font: inherit;
color: var(--navy);
background: var(--papier);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius-klein);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--koraal);
background: var(--vlak);
}
input[type="file"] { padding: var(--ruimte-xs) 0; border: 0; background: none; }
/* Een rondje of een vinkje is geen invulveld: de regel hierboven zou hem over
de volle breedte uitrekken. */
input[type="checkbox"],
input[type="radio"] {
width: auto;
margin-right: var(--ruimte-s);
vertical-align: middle;
}
/* Ook voor een label met .knopvorm. Een bestand kiezen kan alleen met een
, en dat ding is niet op te maken; een label eromheen wel.
Zo staat zo'n keuze in dezelfde vorm als de knoppen ernaast, zonder de vorm
een tweede keer op te schrijven. */
button,
label.knopvorm,
a.knopvorm {
padding: var(--ruimte-s) var(--ruimte-l);
font: inherit;
font-weight: var(--gewicht-half);
cursor: pointer;
color: var(--vlak);
background: var(--navy);
border: var(--randdikte) solid var(--navy);
border-radius: var(--radius-knop);
}
button:hover,
label.knopvorm:hover,
a.knopvorm:hover { background: var(--navy-zacht); border-color: var(--navy-zacht); }
button.kalm,
label.knopvorm.kalm,
a.knopvorm.kalm {
color: var(--navy);
background: var(--vlak);
border-color: var(--lijn);
}
button.kalm:hover,
label.knopvorm.kalm:hover,
a.knopvorm.kalm:hover { background: var(--tint); border-color: var(--lijn); }
/* Een link in dezelfde vorm, voor iets dat in een nieuw tabblad opent. De kleur
van een bezochte of aangewezen link mag de knop niet overschrijven. */
a.knopvorm { display: inline-block; }
a.knopvorm:visited,
a.knopvorm:hover { color: var(--vlak); }
a.knopvorm.kalm:visited,
a.knopvorm.kalm:hover { color: var(--navy); }
table {
width: 100%;
border-collapse: collapse;
margin-top: var(--ruimte-s);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
overflow: hidden;
}
th, td {
text-align: left;
padding: var(--ruimte-s) var(--ruimte-m);
border-bottom: var(--randdikte) solid var(--lijn);
}
tr:last-child td { border-bottom: 0; }
th {
font-size: var(--tekst-s);
font-weight: var(--gewicht-half);
color: var(--gedempt);
}
.melding {
padding: var(--ruimte-m) var(--ruimte-l);
border-radius: var(--radius);
margin-bottom: var(--ruimte-l);
border: var(--randdikte) solid transparent;
}
.melding.fout {
color: var(--rood);
background: color-mix(in srgb, var(--rood) var(--menging-vlak), var(--vlak));
border-color: color-mix(in srgb, var(--rood) var(--menging-rand), var(--lijn));
}
.melding.goed {
color: var(--groen);
background: color-mix(in srgb, var(--groen) var(--menging-vlak), var(--vlak));
border-color: color-mix(in srgb, var(--groen) var(--menging-rand), var(--lijn));
}
/* Een derde soort: het ging goed, maar er is iets om te weten. Koraal en niet
rood, want rood is voor wat er misging. */
.melding.let-op {
color: var(--koraal-diep);
background: color-mix(in srgb, var(--koraal) var(--menging-vlak), var(--vlak));
border-color: color-mix(in srgb, var(--koraal) var(--menging-rand), var(--lijn));
}
.leeg { color: var(--gedempt); font-style: italic; }
.knoppen {
display: flex;
gap: var(--ruimte-m);
align-items: center;
margin-top: var(--ruimte-l);
}
.logo { max-height: var(--hoogte-logo); max-width: var(--breedte-logo); }
/* Gegevens links, het logo rechts. Bovenaan het scherm van een ondernemer, en
in een uitklapper bij Opnames.
Past het naast elkaar niet meer, dan gaat het logo boven de gegevens staan en
niet eronder: het hoort bij wie dit is, en dat lees je eerst. Dat doet
wrap-reverse, dat de eerste regel onderaan zet; er is geen aparte regel voor
kleine schermen voor nodig. Op zo'n smalle regel staat het logo links, in
lijn met de gegevens eronder. */
.kopmetlogo {
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
align-items: center;
gap: var(--ruimte-l);
margin-bottom: var(--ruimte-l);
}
.kopmetlogo > :first-child { flex: 1 1 var(--breedte-veld); }
.kopmetlogo h1 { margin: 0; }
.kopmetlogo .uitleg,
.kopmetlogo .ondertitel { margin: var(--ruimte-xs) 0 0; }
.link-vak { display: flex; gap: var(--ruimte-s); margin-top: var(--ruimte-s); }
/* De naam voor de korte link, op dezelfde regel als het veld. */
.link-vak .link-label { align-self: center; white-space: nowrap; color: var(--gedempt); font-size: var(--tekst-s); margin: 0; }
.link-vak input {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--tekst-s);
}
/* De code direct onder de korte link. De twee namen even breed, zodat de
velden op dezelfde kantlijn beginnen; het codeveld houdt zijn eigen maat. */
[data-kijklinks] .link-vak .link-label { flex: 0 0 var(--breedte-mini); }
.link-vak.codevak { align-items: center; }
.link-vak.codevak .codeveld {
flex: 0 0 var(--breedte-code);
font-size: var(--tekst-l);
}
.planning-links { overflow-wrap: anywhere; }
.terug {
display: inline-block;
margin-bottom: var(--ruimte-l);
color: var(--gedempt);
}
p.uitleg { color: var(--gedempt); font-size: var(--tekst-s); }
/* Waar Mediamemoria is. Even gedempt als de terug-link: het is een mededeling
en geen waarschuwing, dus het mag niet om aandacht vragen. */
.meekijken {
color: var(--gedempt);
font-size: var(--tekst-s);
margin: 0 0 var(--ruimte-l);
}
/* --- De draaiboekitems ---------------------------------------------------
Elke kaart draagt de kleur van zijn item in --tc, gezet vanuit de database.
Vulling en rand worden daaruit gemengd. */
.scene-lijst {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--breedte-kaart), 1fr));
gap: var(--ruimte-l);
margin-top: var(--ruimte-l);
}
/* Het vlak en de rand volgen de standaard, tenzij een scene in de catalogus
een eigen menging heeft; die staat dan als gegeven bij de scene en komt via
--kaart-vlak en --kaart-rand binnen. Een eigen rand mengt met het vlak en
niet met de lijnkleur, zoals in de proef die Mat koos. */
.scene-kaart {
display: block;
padding: var(--ruimte-l);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
background: color-mix(in srgb, var(--tc) var(--kaart-vlak, var(--scene-kaart-vlak)), var(--vlak));
border: var(--randdikte) solid color-mix(in srgb, var(--tc) var(--kaart-rand, var(--scene-kaart-rand)), var(--kaart-rand-met, var(--lijn)));
}
.scene-kaart:hover {
background: color-mix(in srgb, var(--tc) calc(var(--kaart-vlak, var(--scene-kaart-vlak)) + var(--scene-kaart-zweef) - var(--scene-kaart-vlak)), var(--vlak));
}
.scene-kaart.gedempt { opacity: .55; }
.scene-kop {
display: flex;
align-items: center;
gap: var(--ruimte-s);
margin-bottom: var(--ruimte-s);
}
.scene-icoon {
width: var(--icoon-maat);
height: var(--icoon-maat);
flex: none;
color: var(--tc);
}
.scene-naam { font-weight: var(--gewicht-half); }
.scene-uitleg { font-size: var(--tekst-s); color: var(--gedempt); }
.scene-vlag {
display: inline-block;
margin-left: auto;
font-size: var(--tekst-xs);
color: var(--gedempt);
}
/* --- Formulieren met veel velden ---------------------------------------- */
.velden {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--breedte-veld), 1fr));
gap: 0 var(--ruimte-l);
}
.velden label { margin-top: var(--ruimte-m); }
.vinkjes { display: flex; flex-wrap: wrap; gap: var(--ruimte-l); align-items: center; }
.vinkje { display: inline-flex; align-items: center; gap: var(--ruimte-xs); }
.vinkje input { width: auto; }
.kleurkeuze { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); align-items: center; }
.kleurkeuze label {
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--ruimte-xs);
font-size: var(--tekst-xs);
}
.kleurkeuze input { width: auto; }
/* De bevestiging staat naast de kleuren zelf, want daar wordt geklikt. Hij
verdwijnt vanzelf: een melding die blijft staan wordt na twee keer niet meer
gelezen. */
.kleurmelding {
font-size: var(--tekst-xs);
color: var(--groen);
align-self: center;
}
.kleurmelding.mis { color: var(--rood); }
/* Eén rustige regel als een bestand klaar is. Geen wachtrij, geen tijden, geen
uitleg over omzetten: Els hoeft te weten dat haar bestand er staat. */
.media-voortgang.media-klaar { color: var(--groen); }
/* Wat er in dit vak mag, onder het vak zelf. Rustig: het is een naslagregel en
geen instructie. */
.vak-formaten { margin-top: var(--ruimte-xs); }
/* Twee weergaven naast elkaar, dezelfde knoppen als in het menu: waar je staat
is te zien aan dezelfde vorm als daar. */
.weergaven {
display: flex;
gap: var(--ruimte-s);
margin-bottom: var(--ruimte-l);
}
.staal {
display: inline-block;
width: var(--icoon-maat);
height: var(--icoon-maat);
border-radius: var(--radius-klein);
border: var(--randdikte) solid var(--lijn);
}
.vast {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--tekst-s);
color: var(--gedempt);
}
.blok {
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
padding: var(--ruimte-l);
margin-bottom: var(--ruimte-l);
}
.blok h3 {
font-size: var(--tekst-m);
font-weight: var(--gewicht-half);
margin: 0;
}
/* --- De draaiboek-builder ------------------------------------------------
Links de catalogus, rechts het draaiboek. Elke kaart draagt de kleur van
zijn scene-item in --tc. */
/* Twee kolommen die vanzelf onder elkaar schuiven als het te smal wordt.
Bewust met flex-wrap en geen mediaquery: een breekpunt zou een losse
pixelwaarde zijn, en @media kan geen var() lezen. */
.builder {
display: flex;
flex-wrap: wrap;
gap: var(--ruimte-xl);
align-items: flex-start;
}
/* De catalogus loopt mee en heeft zijn eigen schuifbalk, zodat hij de pagina
niet uitrekt: hoe lang het draaiboek is bepaalt hoe ver je scrolt. */
.kolom-catalogus {
flex: 1 1 var(--breedte-catalogus);
min-width: 0;
position: sticky;
top: var(--ruimte-l);
max-height: var(--hoogte-kolom);
overflow-y: auto;
/* Scheiding tussen de twee kolommen. De lijn hangt aan de meelopende
kolom, dus hij loopt altijd over de volle hoogte van wat je ziet. */
padding-right: var(--ruimte-l);
border-right: var(--randdikte) solid var(--navy);
}
.kolom-draaiboek { flex: 999 1 var(--breedte-kaart); min-width: 0; }
/* De catalogus in- en uitklappen.
------------------------------------------------------------------
Die kolom is alleen nodig bij het samenstellen; daarna wordt er vooral in
het draaiboek gewerkt. Ingeklapt krijgt het draaiboek de volle breedte.
Wat blijft staan is een smalle strook met de kop overeind en het knopje
erboven, plus dezelfde scheidingslijn als altijd. Zou de kolom helemaal
verdwijnen, dan is er niets meer om op terug te klikken en gaat Els zoeken.
De keuze blijft in de browser staan, net als de maat van de fotovoorbeelden
en het muziekblok. */
.kolom-catalogus .kolom-kop {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ruimte-s);
}
.kolom-catalogus .kolom-kop h2 { flex: 1 1 auto; }
.kolom-catalogus .kolom-kop .uitleg { flex: 1 1 100%; }
.kolom-vouw {
display: inline-flex;
align-items: center;
justify-content: center;
/* Zonder dit knijpt de zijkantruimte van een knop het teken plat. */
padding-left: 0;
padding-right: 0;
min-width: var(--breedte-transportknop);
}
.kolom-vouw-teken {
width: var(--maat-teken);
height: var(--maat-teken);
}
.kolom-vouw .kolom-vouw-openen { display: none; }
[data-catalogus-dicht] .kolom-catalogus {
flex: 0 0 auto;
width: var(--breedte-catalogus-dicht);
padding-right: var(--ruimte-s);
overflow: visible;
}
[data-catalogus-dicht] .kolom-catalogus .cat-lijst,
[data-catalogus-dicht] .kolom-catalogus .uitleg { display: none; }
[data-catalogus-dicht] .kolom-catalogus .kolom-kop {
flex-direction: column;
align-items: center;
gap: var(--ruimte-m);
}
/* De kop overeind, van onder naar boven, zoals op de rug van een boek. */
[data-catalogus-dicht] .kolom-catalogus .kolom-kop h2 {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
font-size: var(--tekst-s);
color: var(--gedempt);
}
[data-catalogus-dicht] .kolom-vouw-teken { transform: rotate(180deg); }
[data-catalogus-dicht] .kolom-vouw .kolom-vouw-sluiten { display: none; }
[data-catalogus-dicht] .kolom-vouw .kolom-vouw-openen { display: inline; }
/* Tekst die alleen de voorleessoftware hoort. Een knop met enkel een teken
erin heeft anders geen naam. */
.alleen-voorlezen {
position: absolute;
width: var(--randdikte);
height: var(--randdikte);
padding: 0;
margin: calc(var(--randdikte) * -1);
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* De builder heeft meer breedte nodig dan een gewone pagina. */
main:has(.builder) { max-width: var(--breedte-pagina-breed); }
.kolom-kop {
min-height: var(--hoogte-kolomkop);
margin-bottom: var(--ruimte-s);
}
.kolom-kop h2 { margin: 0; }
.kolom-kop .uitleg { margin: var(--ruimte-xs) 0 0; }
.kolom-catalogus form { margin-bottom: var(--ruimte-xs); }
.cat-kaart .scene-uitleg { font-size: var(--tekst-xs); }
.cat-kaart .scene-kop { margin-bottom: 0; }
.cat-kaart {
display: block;
width: 100%;
text-align: left;
cursor: pointer;
line-height: var(--regelhoogte-strak);
padding: var(--ruimte-s) var(--ruimte-m);
border-radius: var(--radius);
color: inherit;
font: inherit;
background: color-mix(in srgb, var(--tc) var(--scene-kaart-vlak), var(--vlak));
border: var(--randdikte) solid color-mix(in srgb, var(--tc) var(--scene-kaart-rand), var(--lijn));
}
.cat-kaart:hover:not(:disabled) {
background: color-mix(in srgb, var(--tc) var(--scene-kaart-zweef), var(--vlak));
}
/* Een haak die al in het draaiboek staat is niet nogmaals toe te voegen. */
.cat-kaart.gebruikt { opacity: .5; cursor: default; }
.ob-lijst { list-style: none; margin: 0; padding: 0; }
/* Ingeklapt is een onderdeel één regel; uitgeklapt komen de invulvelden en de
knoppen erbij. De server rendert ze open, zodat het scherm zonder
JavaScript bruikbaar blijft; het script klapt ze bij het laden dicht. */
.ob-kaart {
position: relative;
margin-bottom: var(--ruimte-s);
border-radius: var(--radius);
background: color-mix(in srgb, var(--tc) var(--scene-kaart-vlak), var(--vlak));
border: var(--randdikte) solid color-mix(in srgb, var(--tc) var(--scene-kaart-rand), var(--lijn));
}
.ob-kaart > details > summary::-webkit-details-marker { display: none; }
.ob-kaart > details > summary::marker { content: ""; }
/* Vaste kolommen, geen flexrij: volgnummer met tijd, het scene-item met zijn
ondertitel, de inhoud, de duur, het icoon.
Als rij schoof elke kolom mee met de lengte van wat ervoor stond, en dan
begint de titel van het nummer bij elk onderdeel ergens anders. Els moest
hem dus zoeken. In een raster staat hij overal op dezelfde plek.
De tekstkolom is iets breder dan de inhoud: bij de eerste scene staat
achter de naam dat die de basisslide bevat, en dat hoort op één regel. */
.ob-regel {
display: grid;
grid-template-columns:
var(--breedte-plek)
minmax(0, 1.1fr)
minmax(0, .9fr)
var(--breedte-duur)
var(--vierkant);
align-items: center;
gap: var(--ruimte-m);
min-height: var(--regel-hoogte);
padding: var(--ruimte-s) var(--ruimte-l);
line-height: var(--regelhoogte);
cursor: pointer;
list-style: none;
}
.ob-regel:hover {
background: color-mix(in srgb, var(--tc) var(--scene-kaart-zweef), transparent);
border-radius: var(--radius);
}
.ob-plek {
display: flex;
flex-direction: column;
align-items: center;
}
.ob-bol {
display: flex;
align-items: center;
justify-content: center;
width: var(--bol);
height: var(--bol);
border-radius: var(--radius-rond);
background: var(--tc);
color: var(--vlak);
font-size: var(--tekst-s);
font-weight: var(--gewicht-vet);
font-variant-numeric: tabular-nums;
}
.ob-tijd {
font-size: var(--tekst-s);
color: var(--gedempt);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ob-tekst { min-width: 0; }
/* De naam van de scene op een eigen regel, met bij de eerste scene het label
over de basisslide erachter. Het label staat buiten de naam zelf, zodat het
niet meeloopt waar de naam van een onderdeel wordt voorgelezen. */
.ob-tekst .scene-regel { display: block; }
.scene-aanduiding { font-weight: var(--gewicht-normaal); color: var(--gedempt); }
/* Het voorbeeld van de basisslide bij een scene zonder eigen beeld: zo breed
als één tegel in de strook, in dezelfde verhouding en met dezelfde hoeken. */
.basisslide-voorbeeld {
display: grid;
grid-template-columns: repeat(var(--media-kolommen), minmax(0, 1fr));
gap: var(--ruimte-xs) var(--ruimte-m);
margin: 0 0 var(--ruimte-m);
}
.basisslide-voorbeeld img {
display: block;
width: 100%;
aspect-ratio: var(--tegel-verhouding);
object-fit: cover;
border-radius: var(--radius-klein);
background: var(--tint);
}
.basisslide-voorbeeld figcaption { grid-column: 1 / -1; margin: 0; }
/* De ondertitel en de naam elk in hun eigen helft, en niet naast elkaar
geschoven. Was de ondertitel leeg, dan begon de naam op de plek waar die
ondertitel had gestaan: bij een spreker zonder ondertitel op 562, bij een
met een korte ondertitel op 720 en bij een lange op 799. Els leest deze
namen onder elkaar, en dan hoort er niets in te springen.
Past het niet, dan kapt het af in plaats van de regel hoger te maken of de
kolom ernaast te verschuiven — dezelfde regel als bij de inhoudkolom. */
.ob-onder {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--ruimte-s);
font-size: var(--tekst-s);
}
/* Kent dit scene-item geen naamveld, dan valt er niets uit te lijnen en mag de
ondertitel de hele breedte hebben. */
.ob-ondertitel:only-child { grid-column: 1 / -1; }
.ob-ondertitel,
.ob-wie {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ob-ondertitel { color: var(--gedempt); }
.ob-wie { color: var(--navy); }
/* Eerst wie er staat en dan tussen haakjes wat erbij hoort: "Jan (broer)".
Achter elkaar en niet in twee kolommen, anders staat het haakje los van de
naam. De haakjes staan er alleen als er iets tussen staat. */
.ob-onder.wie-eerst {
display: flex;
gap: var(--ruimte-xs);
}
.ob-onder.wie-eerst .ob-wie { flex: 0 1 auto; }
.ob-onder.wie-eerst .ob-ondertitel { flex: 0 1 auto; min-width: 0; }
.ob-onder.wie-eerst .ob-wie:empty { display: none; }
.ob-onder.wie-eerst .ob-ondertitel:not(:empty)::before { content: "("; }
.ob-onder.wie-eerst .ob-ondertitel:not(:empty)::after { content: ")"; }
/* De inhoudkolom: de titel van het nummer en het aantal foto's. Links
uitgelijnd en met een eigen kolom in het raster, dus bij elk onderdeel op
dezelfde plek. Past het niet, dan kapt hij af in plaats van de kolommen
ernaast te verschuiven. */
.ob-inhoud {
min-width: 0;
display: flex;
align-items: baseline;
gap: var(--ruimte-xs);
overflow: hidden;
white-space: nowrap;
}
/* De titel is waar Els het onderdeel aan herkent; die mag niet wegvallen
tegen het aantal foto's ernaast. */
.ob-nummer {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--tekst-m);
font-weight: var(--gewicht-half);
color: var(--navy);
}
.ob-tussen,
.ob-media {
flex: none;
font-size: var(--tekst-s);
color: var(--gedempt);
}
.ob-duur {
text-align: right;
font-variant-numeric: tabular-nums;
font-size: var(--tekst-s);
color: var(--gedempt);
}
.ob-vierkant {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--vierkant);
height: var(--vierkant);
border-radius: var(--radius-klein);
background: var(--tc);
color: var(--vlak);
}
.ob-vierkant svg { width: var(--icoon-maat); height: var(--icoon-maat); }
.ob-open {
padding: 0 var(--ruimte-m) var(--ruimte-m);
border-top: var(--randdikte) solid color-mix(in srgb, var(--tc) var(--scene-kaart-rand), var(--lijn));
}
/* Eén kolomindeling voor de hele kaart: links wat er staat, rechts twee
kolommen voor knoppen. Elke kolom is zo breed als de breedste tekst die erin
staat, over de blokken heen. Zo staat Door elkaar recht boven Verwijder
nummer en Preview recht boven Sluiten, en blijft dat zo als er een knop bij
komt of een tekst verandert, zonder dat er een maat per knop bestaat.
De blokken en rijen die knoppen in die kolommen zetten, nemen de indeling
van de kaart over. Al het andere loopt over de volle breedte, zoals het
stond. */
.ob-open {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content max-content;
column-gap: var(--ruimte-m);
}
.ob-open > *,
.ob-blok.media > *,
.ob-blok[data-muziekblok] > *,
.muziek > * { grid-column: 1 / -1; }
.ob-blok.media,
.ob-blok[data-muziekblok],
.muziek,
.media-onderrand,
.muziek-kop {
display: grid;
grid-template-columns: subgrid;
}
.ob-velden { max-width: none; }
.ob-velden label { margin-top: var(--ruimte-s); }
/* Gedempte toelichting onder een veld: de onderste trede van de rangorde.
Kleiner dan dit wordt niets in de kaart; dit is de maat van de ondertitel in
de ingeklapte regel, en die is de ondergrens. Het verschil met gewone tekst
maakt de kleur, niet nog een stapje kleiner. */
.veld-noot {
display: block;
margin-top: var(--ruimte-xs);
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* Achter de waarde in plaats van eronder. Eén regel per veld in plaats van
drie; onder elkaar namen vier velden een half scherm hoogte. */
.veld-noot.achter {
display: inline;
margin-top: 0;
}
/* Een veld met zijn toelichting ernaast, op één regel. */
.veld-met-noot {
display: flex;
align-items: baseline;
gap: var(--ruimte-s);
margin: 0;
}
/* Zo smal als de inhoud vraagt. Twee cijfers plus de pijltjes van het veld;
breder is alleen maar leegte. */
.veld-met-noot .smal {
width: var(--breedte-smalveld);
flex: none;
}
/* Een melding die komt en weer gaat mag de kaart niet laten verspringen: de
ruimte staat er altijd, ook als er niets staat. */
.ob-melding,
.media-voortgang {
min-height: var(--hoogte-melding);
}
.ob-melding[hidden],
.media-voortgang[hidden] {
display: block;
visibility: hidden;
}
.ob-melding {
margin: var(--ruimte-s) 0 0;
font-size: var(--tekst-s);
color: var(--rood);
}
.ob-melding.goed { color: var(--groen); }
/* De drie delen van een opengeklapte kaart: gegevens, foto's, muziek.
Een dun streepje in het oranje accent scheidt ze. Krap gehouden: met de
ruimte van een heel blok ertussen leest het als drie losse schermen onder
elkaar in plaats van als één kaart. */
.ob-blok + .ob-blok {
margin-top: var(--ruimte-m);
padding-top: var(--ruimte-m);
border-top: var(--randdikte) solid var(--koraal);
}
/* Het kopje links, wat erbij hoort rechts op dezelfde regel. */
.ob-blokkop {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ruimte-m);
}
/* Het kopje boven een blok in de kaart: foto's, muziek.
Zwaar en donker genoeg om in één oogopslag te zien waar een blok begint.
Gedempt en op de maat van een toelichting viel het weg tegen de rest, en
dan is de kaart één lange sliert.
In de letter van het werkscherm: het klassieke lettertype is van de kop bij
het logo en nergens anders. */
.ob-kopje {
margin: 0 0 var(--ruimte-s);
font-family: var(--sans);
font-size: var(--tekst-l);
font-weight: var(--gewicht-vet);
letter-spacing: var(--letterspatie-kop);
color: var(--navy);
}
/* Deze knoppen gaan over het hele onderdeel; de ruimte erboven komt van de
blokscheiding, net als bij de andere blokken. */
.ob-knoppen {
display: flex;
gap: var(--ruimte-s);
align-items: center;
}
.ob-knoppen form { margin: 0; }
/* Slepen: de lijn staat gecentreerd in de tussenruimte, precies waar het
onderdeel landt. Een gemarkeerde kaart zou alleen zeggen "deze", niet
"ervoor of erna".
Altijd navy: een indicatielijn is een hulpmiddel van het scherm en geen
eigenschap van een onderdeel, dus hij kleurt niet mee. */
.ob-kaart.sleept { opacity: .4; }
.ob-kaart.doel-boven::after,
.ob-kaart.doel-onder::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: var(--lijndikte-doel);
border-radius: var(--radius-rond);
background: var(--navy);
}
.ob-kaart.doel-boven::after {
top: calc(-1 * (var(--ruimte-s) + var(--lijndikte-doel)) / 2);
}
.ob-kaart.doel-onder::after {
bottom: calc(-1 * (var(--ruimte-s) + var(--lijndikte-doel)) / 2);
}
/* --- De strook bovenaan ------------------------------------------------- */
/* Dit werkscherm krijgt de zakelijke letter, niet de sierlijke. Alleen hier;
de variabelen zelf blijven wat ze zijn. */
main:has(.builder) h1,
main:has(.builder) h2 { font-family: var(--sans); font-weight: var(--gewicht-vet); }
main:has(.builder) h1 { margin: var(--ruimte-xs) 0 0; font-size: var(--tekst-l); }
main:has(.builder) { padding-top: var(--ruimte-m); }
main:has(.builder) .terug { margin-bottom: var(--ruimte-xs); }
main:has(.builder) h2 { margin-top: 0; }
.kop-datum { font-weight: var(--gewicht-normaal); color: var(--gedempt); }
.strook {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ruimte-s) var(--ruimte-l);
padding: var(--ruimte-s) var(--ruimte-l);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
}
/* De kop van de pagina: de uitvaart, met de tijd erin. Er is één tijd. */
.strook-uitvaart { align-items: center; margin: var(--ruimte-xs) 0 var(--ruimte-l); }
.strook-uitvaart h1 { margin: 0; }
/* Het logo van de uitvaartondernemer, rechts uitgelijnd. */
.strook-logo {
margin-left: auto;
max-height: var(--hoogte-logo-kop);
max-width: var(--breedte-logo-kop);
align-self: center;
}
.strook-veld { display: flex; align-items: center; gap: var(--ruimte-s); }
.strook-veld label { margin: 0; }
.strook-veld input { width: auto; }
.strook-cijfer {
font-size: var(--tekst-s);
color: var(--gedempt);
font-variant-numeric: tabular-nums;
}
.strook-cijfer b { color: var(--navy); font-weight: var(--gewicht-half); }
/* De locatie in de kop. Dezelfde rust als de datum, maar zonder tabelcijfers:
die zijn er voor getallen die onder elkaar moeten uitlijnen. */
.strook-plek { font-size: var(--tekst-s); color: var(--gedempt); }
/* De cijfers over de lijst staan bij de lijst, niet bij de uitvaart. */
.kolom-cijfers {
display: flex;
flex-wrap: wrap;
gap: var(--ruimte-xs) var(--ruimte-m);
margin: var(--ruimte-xs) 0 0;
font-size: var(--tekst-s);
color: var(--gedempt);
font-variant-numeric: tabular-nums;
}
.kolom-cijfers b { color: var(--navy); font-weight: var(--gewicht-half); }
.kolom-noot { font-size: var(--tekst-xs); }
.ob-totaal {
margin-top: var(--ruimte-l);
padding-top: var(--ruimte-m);
border-top: var(--randdikte) solid var(--lijn);
font-variant-numeric: tabular-nums;
}
/* --- Bevestigingsvenster -------------------------------------------------
Vervangt de ingebouwde confirm(): dat is een venster van het
besturingssysteem en niet op te maken. Zie statisch/bevestigen.js. */
.bevestiging {
max-width: var(--breedte-venster);
padding: var(--ruimte-xl);
color: var(--navy);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
}
/* Erft van het venster, dus de variabele lost hier op. */
.bevestiging::backdrop { background: var(--verduistering); }
.bevestiging-vraag {
margin: 0;
/* Dezelfde letter als de pagina eromheen; dit is een werkscherm. */
font-family: var(--sans);
font-size: var(--tekst-l);
line-height: var(--regelhoogte-kop);
}
.bevestiging-knoppen {
display: flex;
justify-content: flex-end;
gap: var(--ruimte-m);
margin-top: var(--ruimte-xl);
}
/* Een derde keuze, zoals Niet opslaan, staat links en apart van de andere twee. */
.bevestiging-knoppen .bevestiging-ander { margin-right: auto; }
/* De knop die iets onomkeerbaars doet. */
button.gevaarlijk {
color: var(--vlak);
background: var(--rood);
border-color: var(--rood);
}
button.gevaarlijk:hover {
background: color-mix(in srgb, var(--rood) var(--menging-donker), var(--navy));
border-color: color-mix(in srgb, var(--rood) var(--menging-donker), var(--navy));
}
/* Dezelfde knop als teruggaan de gewone keuze is: in rood te lezen, maar in
de vorm van een rustige knop, zodat hij niet de aandacht trekt. */
button.gevaarlijk.stil {
color: var(--rood);
background: var(--vlak);
border-color: var(--lijn);
}
button.gevaarlijk.stil:hover { background: var(--tint); border-color: var(--rood); }
/* De knop om terug te gaan, als dat de keuze is die we aanraden. */
button.voorop {
color: var(--vlak);
background: var(--koraal);
border-color: var(--koraal);
}
button.voorop:hover {
background: color-mix(in srgb, var(--koraal) var(--menging-donker), var(--navy));
border-color: color-mix(in srgb, var(--koraal) var(--menging-donker), var(--navy));
}
/* De weg om van de gelezen duur af te wijken. Stil gehouden: meestal klopt de
gelezen waarde en hoeft Els hier niets. Een uitklap en geen knop met een
script eraan, zodat het ook zonder JavaScript werkt. */
.duur-eigen > summary {
display: inline-flex;
align-items: center;
gap: var(--ruimte-xs);
margin-top: var(--ruimte-xs);
font-size: var(--tekst-s);
color: var(--navy);
cursor: pointer;
/* Het eigen driehoekje van de browser staat op een andere plek per browser
en is niet op te maken; hieronder staat er een die wel meedraait. */
list-style: none;
}
.duur-eigen > summary::-webkit-details-marker { display: none; }
/* Een driehoekje dat een kwartslag draait bij het openklappen: zo is te zien
dat er iets uitklapt en niet dat het een dood label is. */
.duur-eigen > summary::before {
content: "";
width: 0;
height: 0;
border-left: var(--maat-pijl) solid currentColor;
border-top: var(--maat-pijl) solid transparent;
border-bottom: var(--maat-pijl) solid transparent;
transition: transform 120ms ease-in-out;
}
.duur-eigen[open] > summary::before { transform: rotate(90deg); }
.duur-eigen > summary:hover { text-decoration: underline; }
.duur-eigen > input { margin-top: var(--ruimte-xs); }
/* De weg terug, naast de eigen waarde. Even klein als de toelichting ernaast:
het is geen handeling die om aandacht vraagt. */
.duur-terug {
margin-top: var(--ruimte-xs);
padding: 0 var(--ruimte-s);
font-size: var(--tekst-s);
}
/* Het vinkje voor herhalen, met zijn woord ernaast op één regel. */
/* Het vakje en zijn woord op één regel, tegen elkaar aan. Los van elkaar las
het als twee dingen. */
.aanvinken {
display: flex;
align-items: center;
gap: var(--ruimte-xs);
margin: 0;
white-space: nowrap;
cursor: pointer;
}
.aanvinken input {
width: var(--maat-vinkje);
height: var(--maat-vinkje);
margin: 0;
flex: none;
}
/* --- Media bij een onderdeel ---------------------------------------------
Media hoort bij elk onderdeel: er moet altijd iets op het zaalscherm staan. */
.media { margin-top: 0; }
/* Zes voorbeelden naast elkaar, daarna de volgende rij. Zo blijft een
fotopresentatie van dertig foto's te overzien zonder dat de kaart
onwerkbaar lang wordt. */
.media-lijst {
display: grid;
grid-template-columns: repeat(var(--media-kolommen), minmax(0, 1fr));
gap: var(--ruimte-m);
list-style: none;
margin: 0 0 var(--ruimte-m);
padding: 0;
}
/* position voor de doellijn hieronder; die hangt aan de tegel. */
.media-item { position: relative; min-width: 0; }
.media-item.sleept { opacity: .4; }
/* Waar de foto landt, met dezelfde lijn als bij de onderdelen.
------------------------------------------------------------------
Daar staan de kaarten onder elkaar en is de lijn liggend; hier staan de
tegels in een raster naast elkaar, dus staat hij overeind. Verder is het
dezelfde afspraak: navy, gecentreerd in de tussenruimte, en aan de kant
waar je loslaat.
Aan de tegel en niet aan de tussenruimte, want een raster heeft geen
element tussen twee cellen. Loopt de strook over meer rijen, dan valt de
lijn daarmee vanzelf goed: aan het begin van een rij is het de linkerkant
van de eerste tegel van die rij, aan het eind de rechterkant van de
laatste. */
.media-item.doel-links::after,
.media-item.doel-rechts::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--lijndikte-doel);
border-radius: var(--radius-rond);
background: var(--navy);
}
.media-item.doel-links::after {
left: calc(-1 * (var(--ruimte-m) + var(--lijndikte-doel)) / 2);
}
.media-item.doel-rechts::after {
right: calc(-1 * (var(--ruimte-m) + var(--lijndikte-doel)) / 2);
}
/* Video en muziek hebben geen voorbeeld; die krijgen de hele rij. */
.media-item.media-video,
.media-item.media-muziek { grid-column: 1 / -1; }
.media-vak {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: var(--radius-klein);
background: var(--tint);
}
/* Elke fototegel dezelfde verhouding als het zaalscherm, ongeacht de foto.
Daarmee zijn de rijen vanzelf recht en is elke tegel een voorproefje. */
.media-item.media-foto .media-vak {
aspect-ratio: var(--tegel-verhouding);
container-type: size;
}
/* Vullend of passend, met één drempel.
------------------------------------------------------------------
De tegel weet van de foto alleen zijn verhouding; die komt uit de
afmetingen die bij de bewerking zijn vastgelegd.
Het verlies is wat er bij vullend maken buiten de tegel valt. Het is
het verschil tussen de twee verhoudingen: een foto van 3:2 in een
kader van 16:9 verliest 15,6 procent van zijn hoogte.
Daarvan maakt clamp() een schakelaar: 1 als de foto vullend mag, 0 als
hij passend moet. Daartussen zit niets, want de vermenigvuldiging maakt
van elk verschil met de drempel meteen een heel getal.
Weet het scherm de verhouding niet, dan valt deze hele berekening weg
en krijgt de tegel de foto in zijn geheel te zien. Zonder maten valt
niet te zeggen wat er wegvalt, en dan snijden we liever niets. */
.media-item.media-foto {
--verlies: calc(1 - min(var(--foto-verhouding), var(--tegel-verhouding))
/ max(var(--foto-verhouding), var(--tegel-verhouding)));
--vullend: clamp(0, (var(--tegel-drempel) - var(--verlies)) * 10000, 1);
--getoonde-verhouding: calc(var(--foto-verhouding)
+ var(--vullend) * (var(--tegel-verhouding) - var(--foto-verhouding)));
}
/* De vervaagde vulling achter de foto. Gecentreerd in het midden en niet aan
de bovenkant: anders staat er een uitvergroot vaag gezicht achter het
scherpe gezicht. */
.media-achter {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
filter: blur(var(--tegel-vervaging)) brightness(var(--tegel-verdonkering));
transform: scale(var(--tegel-opschaling));
}
/* Zwart gekozen: de hele foto op zwart, zonder de vervaagde vulling. Op het
zaalscherm net zo. Geldt ook voor Bekijk de fotopresentatie. */
[data-achtergrond="zwart"] .media-achter { display: none; }
[data-achtergrond="zwart"] .media-item.media-foto .media-vak,
[data-achtergrond="zwart"].preview .preview-beeld { background: var(--tegel-zwart); }
.media-item.media-video .media-vak,
.media-item.media-muziek .media-vak {
aspect-ratio: auto;
min-height: var(--maat-voorbeeld);
background: none;
}
/* De ingebouwde speler van de browser, niet breder dan nodig. */
.media-speler { width: 100%; max-width: var(--breedte-speler); }
video.media-speler { border-radius: var(--radius-klein); background: var(--navy); }
/* Een waarde die gelezen is en niet ingevuld: zelfde plek als een veld,
maar zonder rand, zodat zichtbaar is dat er niets te typen valt. */
.gelezen {
margin: 0;
padding: var(--ruimte-s) 0;
color: var(--gedempt);
font-variant-numeric: tabular-nums;
}
/* --- De preview van een fotoreeks -----------------------------------------
Els kijkt of de reeks bij het nummer past voordat ze hem doorzet: de foto's
na elkaar, met de muziek eronder. Een venster over de pagina, het beeld in
16:9, en onderin de bediening met de speler ernaast. Zie statisch/muziek.js.
De foto's krijgen dezelfde klassen als de tegels in de strook. Daarmee geldt
hier vanzelf dezelfde regel voor vullend of passend, en staat die regel maar
op één plek. */
.preview {
/* Rond tweederde breed, maar nooit hoger dan het scherm: het beeld is 16:9
en de onderrand komt daar nog bij. */
width: min(var(--preview-breedte),
calc((92vh - var(--preview-onderrand)) * 16 / 9));
max-width: 92vw;
padding: 0;
color: var(--navy);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
overflow: visible; /* het kruisje hangt op de rand */
}
.preview::backdrop { background: var(--verduistering); }
.preview-beeld {
position: relative;
aspect-ratio: var(--tegel-verhouding);
width: 100%;
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
background: var(--tint);
}
/* Twee lagen over elkaar: de ene komt op terwijl de andere wegvalt. Daarom
staan ze er allebei en wordt er niet één hergebruikt. */
.preview-laag {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--preview-overvloeiing) ease-in-out;
}
.preview-laag.zichtbaar { opacity: 1; }
/* Het vak vult de laag; de verhouding zit al in het beeld eromheen. */
.preview-laag.media-foto .media-vak {
width: 100%;
height: 100%;
border-radius: 0;
background: none;
}
/* De foto zo groot als het beeld toelaat, ook als het bestand zelf kleiner is.
Een tegel is altijd kleiner dan zijn foto, dus daar volstaat een grens aan
de bovenkant. Dit venster kan op een groot scherm breder zijn dan de versie
van de foto die erin komt, en dan bleef hij op zijn eigen maat staan: te
klein, met een rand eromheen, en zonder dat er iets af ging. In de aula
vult dezelfde foto het scherm.
De breedte volgt daarom uit het vak en niet uit het bestand: de volle
breedte, of minder als de hoogte eerder op is. Zonder maten van de foto
vervalt deze regel en blijft het zoals bij een tegel. */
.preview-laag.media-foto .media-beeld {
width: min(100cqw, calc(100cqh * var(--getoonde-verhouding)));
height: auto;
}
/* Eén regel onder het beeld: links de knoppen, dan welk onderdeel je bekijkt,
en rechts de feiten. Donker, zodat de balk bij het beeld hoort.
Wrap staat aan als noodrem, maar de naam krimpt eerder dan dat de regel
breekt: die krijgt puntjes zodra hij niet past. */
.preview-onder {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ruimte-l);
padding: var(--ruimte-s) var(--ruimte-m);
color: var(--preview-balk-inkt);
background: var(--preview-balk);
border-radius: 0 0 var(--radius) var(--radius);
}
/* Klein en rustig: geen tijdbalk en geen snelheid, alleen wat je nodig hebt
om nog een keer te kijken. */
.preview-bediening {
display: flex;
align-items: center;
gap: var(--ruimte-s);
}
/* De zijmarge eraf, net als bij het transportdeel in de kaart. Blijft die
staan, dan knijpt de knop het teken tot een streepje: gemeten 2 pixels breed
in plaats van 13. Een knop met een onzichtbaar teken zegt niets.
Op de donkere balk kan de kalme vorm niet blijven: die tekent navy op navy.
Alleen hier, en alleen zolang deze balk de enige donkere plek is. */
.preview-bediening button {
min-width: var(--breedte-transportknop);
padding-left: 0;
padding-right: 0;
color: var(--preview-balk-inkt);
background: transparent;
border-color: color-mix(in srgb, var(--preview-balk-inkt) 45%, transparent);
}
.preview-bediening button:hover {
background: color-mix(in srgb, var(--preview-balk-inkt) 15%, transparent);
border-color: var(--preview-balk-inkt);
}
/* Welk onderdeel je bekijkt. Bij twee fotopresentaties in één uitvaart is dit
het enige waaraan je ze uit elkaar houdt, dus het staat vooraan en in de
volle kleur. Daarachter de opmerking: die krimpt als eerste met puntjes,
want de naam is het onmisbare deel. Past het dan nog niet, dan krimpt de
naam als tweede in plaats van dat de regel breekt. */
.preview-naam,
.preview-opmerking {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* De twee horen bij elkaar en staan dichter op elkaar dan op de rest.
Vanaf nul en niet vanaf hun eigen breedte: telde die mee, dan paste de regel
niet meer zodra de opmerking wat langer werd en zakten de feiten naar een
tweede regel. Nu krimpt deze kolom en blijft het één regel. */
.preview-wat {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: baseline;
gap: var(--ruimte-s);
}
.preview-naam { flex: 0 1 auto; }
.preview-opmerking {
flex: 1 1 0;
color: color-mix(in srgb, var(--preview-balk-inkt) 70%, var(--preview-balk));
}
/* De cijfers rechts, gedempt: ze horen erbij maar hoeven niet te roepen. */
.preview-feiten {
flex: none;
display: flex;
align-items: center;
gap: var(--ruimte-l);
white-space: nowrap;
font-size: var(--tekst-s);
color: color-mix(in srgb, var(--preview-balk-inkt) 70%, var(--preview-balk));
}
.preview-tijd,
.preview-teller { font-variant-numeric: tabular-nums; }
/* Een storing, geen oordeel over de reeks: dit gaat over de speler die niet op
gang komt. Op een eigen regel in de balk, want hij hoort bij de bediening
maar mag de knoppen en de tellers niet opzij duwen. */
.preview-melding {
flex: 0 0 100%;
margin: 0;
font-size: var(--tekst-s);
color: var(--preview-balk-inkt);
}
/* Het geluid van de preview. Een audio-element zonder bediening tekent niets;
de knoppen van het venster zijn de bediening. */
.preview-geluid { display: none; }
.preview-sluiten {
position: absolute;
top: calc(-1 * var(--ruimte-m));
right: calc(-1 * var(--ruimte-m));
width: var(--breedte-transportknop);
height: var(--breedte-transportknop);
padding: 0;
color: var(--navy);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: 50%;
font-size: var(--tekst-l);
line-height: 1;
cursor: pointer;
}
.preview-sluiten:hover { border-color: var(--navy); }
/* Zeven kolommen met een keuzelijst en een knop erin passen niet op de gewone
paginabreedte. Dit scherm krijgt de brede maat, net als het muziekoverzicht. */
main:has(.planning) { max-width: var(--breedte-pagina-breed); }
/* De kolommen liggen vast. Deden ze dat niet, dan bepaalde de langste tekst in
een rij hoe breed de rest werd, en dat ging mis bij een dienst zonder
livestream: de waarschuwing kneep het keuzemenu dicht tot twee letters.
Dezelfde fout als eerder op het bestandenscherm.
In een tabel met vaste kolommen bepaalt de eerste rij de verdeling, dus de
maten staan op de koppen. Ze tellen op tot honderd. Wat niet past kapt af en
staat voluit in de zweeftekst. */
.planning { table-layout: fixed; }
.planning th:nth-child(1) { width: 10%; } /* Datum */
.planning th:nth-child(2) { width: 6%; } /* Tijd */
.planning th:nth-child(3) { width: 16%; } /* Overledene */
.planning th:nth-child(4) { width: 15%; } /* Ondernemer */
.planning th:nth-child(5) { width: 13%; } /* Locatie */
.planning th:nth-child(6) { width: 28%; } /* Set en uitzending */
.planning th:nth-child(7) { width: 12%; } /* Opgehaald */
.planning td.afkappen {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* De waarschuwing staat in een eigen rij onder de dienst waar hij bij hoort.
De lijn ertussen valt weg, zodat het één blok blijft. */
.planning tr.zonder-stream td { border-bottom: 0; }
.planning tr.stream-rij td { padding-top: 0; }
/* De kijklink om te scannen. De code wordt in de pagina zelf getekend, dus
hij blijft scherp op elke maat; deze breedte is wat een telefoon van een
armlengte afstand nodig heeft. */
.kijk-qr { margin-top: var(--ruimte-m); }
.kijk-qr .qr {
display: block;
width: var(--breedte-qr);
height: auto;
background: var(--vlak);
padding: var(--ruimte-xs);
border-radius: var(--radius-klein);
}
.kijk-qr .veld-noot { margin-top: var(--ruimte-xs); }
/* De code onder de scanbare link, in dezelfde letter als het codeveld: wie hem
overneemt leest hem daar op dezelfde manier. */
.kijk-qr-code { margin: 0; font-size: var(--tekst-s); color: var(--gedempt); }
.kijk-qr-code b {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: var(--letterspatie-code);
text-transform: uppercase;
color: var(--navy);
}
/* Welke set je bijstelt, boven de mengtafelstand. Zo breed als een gewoon veld
en niet zo breed als de pagina: er staat één setnaam in. De ruimte eronder
scheidt de keuze van wat je daarmee te zien krijgt; zonder die ruimte leest
het keuzevak als een onderdeel van de uitklapper eronder. */
.setkeuze {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ruimte-s);
margin-bottom: var(--ruimte-blok);
}
.setkeuze label { margin: 0; }
.setkeuze select {
flex: 0 1 var(--breedte-veld);
width: var(--breedte-veld);
max-width: 100%;
}
/* De keuzelijst voor de set staat naast zijn eigen opslagknop; die knop
verdwijnt zodra JavaScript het overneemt. De knop houdt zijn eigen breedte
en de lijst krijgt wat er over is van de kolom. */
.planning-keuze { display: flex; gap: var(--ruimte-s); align-items: center; }
/* Even breed bij elke dienst, ook waar de knop verborgen is. Anders is de ene
lijst een derde breder dan de andere en staat de kolom scheef. */
.planning-keuze select { flex: 0 1 var(--breedte-veld); width: var(--breedte-veld); }
.planning-keuze button { flex: 0 0 auto; white-space: nowrap; }
/* De naam van een set is een veldje met een knop ernaast, want hernoemen moet
kunnen zonder een apart scherm. */
.set-naam { display: flex; gap: var(--ruimte-s); align-items: flex-end; }
.set-naam input { width: var(--breedte-veld); }
.set-naam label { margin-bottom: 0; }
/* Een set die zich al een week niet meldde. Een aandachtspunt en geen
waarschuwing: er hoeft niet elke week een dienst te zijn. */
.set-stil {
margin-left: var(--ruimte-xs);
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* --- Het muziekoverzicht van Mediamemoria --------------------------------
Een lijst waarop het bijzondere opvalt, en geen dashboard. Drie dingen
krijgen nadruk — een mislukking, een uitvaart die dichtbij is, en een
aanvraag die blijft hangen — en verder niets. Zou alles opvallen, dan valt
er niets meer op. */
.muziek-schakelaar {
margin: 0 0 var(--ruimte-m);
font-size: var(--tekst-s);
}
/* Zeven kolommen passen niet op de gewone paginabreedte. Dit scherm krijgt de
brede maat, net als het draaiboek. Past het dan nog niet, dan schuift de
tabel in zijn eigen vak in plaats van de pagina breder te maken. */
main:has(.beheer-muziek) { max-width: var(--breedte-pagina-breed); }
.beheer-muziek-vak { overflow-x: auto; }
/* Een mislukking is de enige die kleur krijgt; de rest is een licht vlak. */
.beheer-muziek .mv-mislukt td { background: color-mix(in srgb, var(--rood) 8%, var(--vlak)); }
.beheer-muziek .mv-let-op td { background: var(--tint); }
.beheer-muziek td { vertical-align: top; }
/* De reden van een mislukking staat in de database maar Els ziet hem niet.
Hier hoort hij wel te staan, want dit is het scherm waarop het opgelost
wordt. */
.mv-reden,
.mv-bij {
display: block;
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* De reden komt van een dienst buiten de deur en kan elke lengte hebben; die
mag dus wel afbreken, ook in een rij die verder op één regel staat. */
.mv-reden {
color: var(--rood);
white-space: normal;
max-width: var(--breedte-reden);
}
/* Een kort woord bij de kolom waar het over gaat, en geen bordje met een
uitroepteken: de regel valt al op door zijn vlak. */
.mv-merk {
margin-left: var(--ruimte-xs);
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* De naam van de ondernemer, de datum en de teller horen op één regel; het
nummer mag afbreken, dat is de enige kolom waar dat kan. */
.beheer-muziek th,
.beheer-muziek td { white-space: nowrap; }
/* Ruim genoeg voor een gewone titel op één regel; alleen een lange breekt af. */
.beheer-muziek .mv-nummer {
white-space: normal;
min-width: var(--breedte-nummerkolom);
}
/* Bij een mislukking staan er twee knoppen. Past dat niet naast elkaar, dan
zakt de tweede eronder in plaats van buiten de rand te vallen: een knop die
je niet ziet is geen knop. */
.mv-doen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ruimte-s);
}
.mv-doen form { margin: 0; }
.mv-kiezen { font-size: var(--tekst-s); padding: var(--ruimte-xs) var(--ruimte-m); }
.mv-kiezen input { display: none; }
.mv-melding { font-size: var(--tekst-s); color: var(--gedempt); }
/* Het logo van de uitvaartondernemer voor de naam, en dat van Xenox voor een
nummer uit de catalogus. */
.mv-ondernemer { display: inline-flex; align-items: center; gap: var(--ruimte-s); }
.mv-logo {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--breedte-mini);
height: var(--maat-xenoxlogo);
}
.mv-logo img { max-width: 100%; max-height: 100%; }
.mv-xenox { vertical-align: middle; margin-right: var(--ruimte-xs); }
/* Muziek die zelf is geüpload: een pijltje omhoog als lijntekening, in rustig
grijs en zonder rondje of vlak eromheen. Het is een herkomst en geen
melding, dus geen rood, oranje of geel en geen uitroepteken; en kleiner dan
het logo van Xenox, dat het enige in kleur blijft. */
.upload-teken {
width: var(--maat-uploadteken);
height: var(--maat-uploadteken);
margin-right: var(--ruimte-xs);
vertical-align: middle;
color: var(--gedempt);
}
/* Een kolomkop waarop te sorteren is: een verwijzing die eruitziet als de kop. */
.mv-sorteer { color: inherit; text-decoration: none; cursor: pointer; }
.mv-sorteer:hover { text-decoration: underline; }
.mv-sorteer.actief { color: var(--navy); }
.mv-melding.mis { color: var(--rood); }
/* --- Ken Burns ------------------------------------------------------------
De schakelaar bij een fotopresentatie en de stand van de video. Rustig:
één regel met de schakelaar, daaronder wat er met de video is. */
.kenburns-kop {
display: flex;
align-items: center;
gap: var(--ruimte-m);
}
.kenburns-kop form { margin: 0; }
.kenburns-uitleg { margin: var(--ruimte-xs) 0 0; }
/* Een schakelaar en geen vinkje: aan en uit zijn twee standen van hetzelfde
ding, en omzetten gebeurt meteen. */
.schakelaar {
display: inline-flex;
align-items: center;
gap: var(--ruimte-s);
padding: 0;
border: 0;
background: none;
color: var(--navy);
font: inherit;
cursor: pointer;
}
.schakelaar-knop {
position: relative;
flex: none;
width: var(--breedte-schakelaar);
height: var(--hoogte-schakelaar);
border-radius: var(--radius-rond);
background: var(--lijn);
transition: background .15s;
}
.schakelaar-knop::after {
content: "";
position: absolute;
top: calc((var(--hoogte-schakelaar) - var(--maat-schakelknop)) / 2);
left: calc((var(--hoogte-schakelaar) - var(--maat-schakelknop)) / 2);
width: var(--maat-schakelknop);
height: var(--maat-schakelknop);
border-radius: 50%;
background: var(--vlak);
transition: transform .15s;
}
.schakelaar[aria-checked="true"] .schakelaar-knop { background: var(--navy); }
.schakelaar[aria-checked="true"] .schakelaar-knop::after {
transform: translateX(calc(var(--breedte-schakelaar) - var(--hoogte-schakelaar)));
}
.kenburns-stand { margin-top: var(--ruimte-s); }
.kenburns-stand p { margin: 0 0 var(--ruimte-xs); }
.kenburns-regel {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ruimte-s);
}
.kenburns-procent { font-variant-numeric: tabular-nums; }
.kenburns-balk {
display: block;
width: min(100%, var(--breedte-balk));
height: var(--hoogte-balk);
margin: 0 0 var(--ruimte-s);
}
.kenburns-mislukt .kenburns-regel strong { color: var(--rood); }
.kenburns-opnieuw { margin: var(--ruimte-s) 0 0; }
.kenburns-video {
display: block;
width: min(100%, var(--breedte-kenburnsvideo));
margin-top: var(--ruimte-s);
aspect-ratio: 16 / 9;
border-radius: var(--radius-klein);
background: var(--tegel-zwart);
}
/* --- De muziekkeuze -----------------------------------------------------
Vier stappen onder elkaar in hetzelfde vak: plakken, zoeken, kiezen,
knippen. Rustig gehouden: het is een keuzehulp, geen dashboard. */
/* Wel voor een schermlezer, niet in beeld. */
.beeldloos {
position: absolute;
width: var(--randdikte);
height: var(--randdikte);
padding: 0;
margin: calc(-1 * var(--randdikte));
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.muziek { margin-top: 0; }
/* Compact en niet over de volle breedte: dit is wat Els zelf heeft ingevuld
en het hoort niet zwaarder te wegen dan de bediening eronder. */
/* Eén regel: de titel, het artiestveld, en rechts de knoppen. Stond eerst in
twee lagen met het veld eronder; met de foto's erboven werd de kaart
daarmee onwerkbaar lang. Titel en artiest staan zo boven de waveform. */
.muziek-kop {
align-items: center;
margin-bottom: var(--ruimte-m);
}
.muziek-kop-links {
grid-column: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ruimte-s) var(--ruimte-l);
min-width: 0;
}
/* De titel houdt een vaste breedte, zodat het artiestveld bij elk nummer op
dezelfde plek begint. Een lange titel breekt af binnen die breedte. */
.muziek-namen {
flex: 0 1 var(--breedte-muzieknamen);
min-width: 0;
}
/* Het veld vult wat er over is tot de knoppen. Vanaf nul en niet vanaf zijn eigen breedte: met twee knoppen
rechts telde die eigen breedte mee en kwam de regel acht pixels tekort,
waarna de knoppen naar een tweede regel zakten. */
.muziek-artiest { flex: 1 1 0; min-width: 0; }
/* Is de eerste kolom te smal voor een bruikbaar artiestveld, zoals op een
smal scherm, dan zakt het veld onder de namen in plaats van te krimpen tot
een streepje. */
.muziek-kop-links .muziek-artiest { flex-basis: var(--breedte-mini); }
.muziek-artiest input {
width: 100%;
max-width: var(--breedte-artiest);
}
/* Verwijderen hoort niet tegen het artiestveld aan, alsof het bij dat veld
hoort: het gooit de hele muziekkeuze weg. Daarom rechts en op afstand. */
/* De twee knoppen die over de gekozen muziek gaan, samen rechts op de
kopregel: eerst openen om eraan te werken, dan pas weghalen. */
.muziek-kopknoppen,
.muziek-verwijderrij { display: contents; }
.muziek-verwijderrij button { grid-column: 2; }
.muziek-vouw { grid-column: 3; }
/* De hoofdregel: de titel van het nummer. In de letter van het werkscherm,
net als de rest; het klassieke lettertype is van de kop bij het logo en
nergens anders. */
.muziek-titel {
margin: 0;
font-family: var(--sans);
font-size: var(--tekst-m);
font-weight: var(--gewicht-half);
color: var(--navy);
}
.muziek-artiest { margin: 0; }
.muziek-kop form { margin: 0; }
/* Rustig en klein: het is een mededeling waar Els niets mee hoeft. */
.muziek-onderweg { margin: 0; }
/* Eén raster van drie kolommen over de stappen heen: links wat het
is, in het midden waar het in komt, rechts wat het doet.
De formulieren eromheen tekenen niets, zodat hun velden rechtstreeks in dit
raster staan; anders lijnt elke regel alleen binnen zichzelf uit en beginnen
de velden op drie verschillende plekken. Dat was precies wat er stond.
De eerste kolom groeit mee met het langste label. De laatste kolom is zo breed
als de langste knop; die rekken allemaal mee, dus ze beginnen en eindigen
op dezelfde plek. */
.muziek-stappen {
display: grid;
grid-template-columns:
minmax(var(--breedte-muziekstap), max-content) 1fr max-content;
align-items: center;
gap: var(--ruimte-s) var(--ruimte-m);
}
.muziek-regel {
display: contents;
margin: 0;
}
.muziek-regel label,
.muziek-stapnaam { margin: 0; white-space: nowrap; }
.muziek-regel input { min-width: 0; }
/* De toelichting en de melding lopen over de volle breedte; het zijn geen
kolommen maar regels eronder. */
.muziek-staptoelichting,
.muziek-stappen .ob-melding {
grid-column: 1 / -1;
margin: 0;
}
/* Wat er gekozen is, om naar te kijken en niet om in te typen. Als veld en
niet als kale tekst: dan staat er in de middelste kolom overal hetzelfde. */
.muziek-bestandsnaam {
cursor: default;
color: var(--gedempt);
}
/* Een label dat eruitziet als een knop, met het invoerveld erin verstopt.
Zo staat het in dezelfde vorm als de knoppen ernaast en werkt het gewoon met
het toetsenbord; een knop met een script eraan doet dat laatste niet. */
.muziek-bestandknop {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
text-align: center;
}
.muziek-bestandknop input { display: none; }
.muziek-treffers {
list-style: none;
margin: var(--ruimte-m) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ruimte-s);
}
.muziek-treffer {
display: flex;
align-items: center;
gap: var(--ruimte-m);
}
.muziek-treffer form { margin: 0; }
/* De resultaten uit de muziekcatalogus staan in het raster van de zoekregels,
direct onder het zoekveld, en lopen over de volle breedte. */
/* De regel "Typ minimaal 4 tekens." staat er alleen als er te weinig staat.
Zonder dit wint de opmaak van de toelichting het van het verbergen. */
[data-xenoxwenk][hidden] { display: none; }
/* Het logo van de catalogus bij het zoekveld: rond en klein. */
.muziek-xenoxlabel {
display: inline-flex;
align-items: center;
gap: var(--ruimte-s);
}
.xenox-logo {
width: var(--maat-xenoxlogo);
height: var(--maat-xenoxlogo);
border-radius: 50%;
flex: none;
}
.muziek-stappen .muziek-xenoxtreffers {
grid-column: 1 / -1;
margin: 0;
}
.muziek-treffernaam {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.muziek-treffertitel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* De duur is een houvast bij het kiezen; die mag niet verspringen tussen
regels. Maar de duur alleen is niet genoeg: daarvoor is de luisterknop. */
.muziek-duur {
font-variant-numeric: tabular-nums;
color: var(--gedempt);
}
.muziek-luister {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Welke treffer klinkt, staat op de regel zelf: een zacht vlak in de
accentkleur, en de knop wisselt naar een pauzeteken. */
.muziek-treffer.speelt {
border-radius: var(--radius-klein);
background: color-mix(in srgb, var(--koraal) var(--menging-vlak), transparent);
}
.muziek-treffer.speelt .muziek-luister .muziek-teken-spelen { display: none; }
.muziek-treffer.speelt .muziek-luister .muziek-teken-pauze { display: block; }
/* Het muziekblok in- en uitklappen. Dicht blijft staan wat er gekozen is: de
titel, de artiest en de duur met de knippunten. Weg gaan de waveform en de
bediening, want die zijn klaar zodra de keuze staat.
De stand hangt aan het blok en niet aan het vak: dat vak wordt na elke stap
opnieuw opgehaald, en dan zou de stand elke keer terugspringen. */
[data-muziekdicht] .muziek-luisteren { display: none; }
.muziek-samenvatting { display: none; }
[data-muziekdicht] .muziek-samenvatting {
display: flex;
align-items: center;
gap: var(--ruimte-s);
margin: 0;
font-variant-numeric: tabular-nums;
}
/* Klein en rustig: dit is een controle naast de gegevens, geen bediening die
om aandacht vraagt. Dezelfde vorm als het transportdeel, een maat kleiner. */
.muziek-beluister {
flex: none;
min-width: auto;
padding: var(--ruimte-xs);
}
/* Het geluid bij die knop: een audio-element zonder bediening, dat niets
tekent. */
.muziek-dichtgeluid { display: none; }
/* De knop zegt wat er gebeurt als je hem indrukt, niet hoe het nu staat.
Staat het blok open, dan sluit je het; staat het dicht, dan ga je eraan
werken. "Tonen" en "Verbergen" gingen over het scherm; dit gaat over wat
Els doet. */
.muziek-vouw .muziek-vouw-bewerken { display: none; }
[data-muziekdicht] .muziek-vouw .muziek-vouw-sluiten { display: none; }
[data-muziekdicht] .muziek-vouw .muziek-vouw-bewerken { display: inline; }
/* Alles waar de ondernemer aan draait staat in één vlak: de waveform, de
knoppen, de punten en de uitkomst. Zonder kader zweefden ze los in de kaart
terwijl ze bij elkaar horen. De kop erboven blijft erbuiten; dat is
beschrijving en geen bediening.
Geen rand maar een vlak, in dezelfde scene-kleur als de kaart en alleen
iets dieper. Grijs zou vuil ogen in een gekleurde kaart.
Onder elkaar: de waveform over de volle breedte, daaronder de bediening. */
.muziek-luisteren {
display: flex;
flex-direction: column;
gap: var(--ruimte-m);
margin-top: var(--ruimte-m);
padding: var(--vulling-bediening);
border-radius: var(--radius);
background: color-mix(in srgb, var(--tc) var(--scene-vlak-diep), var(--vlak));
}
.muziek-bedieningkolom {
display: flex;
flex-direction: column;
gap: var(--ruimte-s);
min-width: 0;
}
/* De waveform: het nummer als tekening over de volle breedte. De handvatten
steken er aan de zijkant overheen, dus er mag hier niets afgesneden worden. */
.muziek-waveformvak {
display: flex;
flex-direction: column;
gap: var(--ruimte-xs);
min-width: 0;
}
.muziek-waveform {
position: relative;
width: 100%;
height: var(--hoogte-waveform);
border-radius: var(--radius-klein);
background: var(--vlak);
cursor: pointer;
}
/* De tekening zelf. De kleur van de balkjes leest het script hier af, zodat
hij op één plek staat en met de rest van het portaal meegaat. */
.muziek-waveformbeeld {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: var(--navy);
}
/* Het deel buiten Inpunt en Uitpunt is gedimd: een waas in de kleur van het
vlak eroverheen, zodat de tekening eronder zichtbaar blijft maar wegvalt
tegen het stuk dat straks klinkt. De klikken gaan er dwars doorheen naar
de waveform. */
.muziek-gedimd {
position: absolute;
top: 0;
bottom: 0;
background: color-mix(in srgb, var(--vlak) var(--waveform-gedimd), transparent);
pointer-events: none;
}
.muziek-gedimd-in {
left: 0;
width: calc(var(--in, 0) * 1%);
border-radius: var(--radius-klein) 0 0 var(--radius-klein);
}
.muziek-gedimd-uit {
left: calc(var(--uit, 100) * 1%);
right: 0;
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
/* De lijn die tijdens het afspelen over de waveform loopt. In de accentkleur,
zodat hij niet te verwarren is met de twee handvatten. */
.muziek-speelkop {
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--nu, 0) * 1%);
width: var(--breedte-merk);
margin-left: calc(-1 * var(--breedte-merk) / 2);
background: var(--koraal);
pointer-events: none;
}
/* Waar de ondernemer aan trekt: Inpunt en Uitpunt. Over de hele hoogte van de
waveform en een stukje erbuiten, groot genoeg om te pakken; touch-action
uit, anders scrolt de pagina mee in plaats van het handvat. */
.muziek-greep {
position: absolute;
top: calc(-1 * var(--ruimte-xs));
bottom: calc(-1 * var(--ruimte-xs));
width: var(--breedte-greep);
padding: 0;
transform: translateX(-50%);
border: var(--randdikte) solid var(--vlak);
border-radius: var(--radius-rond);
background: var(--navy);
cursor: ew-resize;
touch-action: none;
}
.muziek-greep-in { left: calc(var(--in, 0) * 1%); }
.muziek-greep-uit { left: calc(var(--uit, 100) * 1%); }
/* Links waar je bent, rechts hoe lang het nummer duurt, onder de waveform.
Cijfers van gelijke breedte: een teller die bij elke tik verspringt is niet
af te lezen. */
.muziek-tijden {
display: flex;
justify-content: space-between;
}
.muziek-positie,
.muziek-totaal {
font-size: var(--tekst-s);
font-variant-numeric: tabular-nums;
color: var(--gedempt);
}
/* Knoppen met een teken erop staan even hoog als die met een woord, anders
springt de rij. */
.muziek-spelen,
.muziek-teken-knop {
display: inline-flex;
align-items: center;
justify-content: center;
}
.muziek-teken {
width: var(--maat-teken);
height: var(--maat-teken);
fill: currentColor;
}
.muziek-teken-pauze { display: none; }
.muziek-spelen.speelt .muziek-teken-spelen { display: none; }
.muziek-spelen.speelt .muziek-teken-pauze { display: block; }
/* Zes knoppen in het midden. De groepering doet de ruimte, zonder lijnen of
kaders: naar begin los, de twee stappen terug tegen elkaar, de afspeelknop
los in het midden, de twee stappen vooruit tegen elkaar. */
.muziek-transport {
display: flex;
justify-content: center;
align-items: center;
gap: var(--ruimte-l);
}
.muziek-paar {
display: flex;
align-items: center;
gap: var(--ruimte-xs);
}
/* Allemaal even breed, ook die met twee tekens: anders zijn «5 en «1 breder
dan de rest en staat de rij scheef. */
.muziek-transport button {
min-width: calc(var(--breedte-transportknop) * var(--krimp-transport));
padding-left: 0;
padding-right: 0;
padding-top: calc(var(--ruimte-s) * var(--krimp-transport));
padding-bottom: calc(var(--ruimte-s) * var(--krimp-transport));
font-size: var(--tekst-s);
}
.muziek-transport .muziek-teken {
width: calc(var(--maat-teken) * var(--krimp-transport));
height: calc(var(--maat-teken) * var(--krimp-transport));
vertical-align: middle;
}
/* Even hoog als de knoppen met een woord ernaast. Een knop met een teken is
een flexvak en wordt zo hoog als het teken; een knop met tekst wordt zo hoog
als zijn regel. Dat scheelde 42 tegen 31, en op de kleinere maat 35 tegen
25 — zichtbaar ongelijk in een rij van zes. Als gewoon blok laat de regel
ook deze knop zijn hoogte bepalen. */
.muziek-transport .muziek-teken-knop { display: inline-block; }
/* De twee knoppen met een teken in plaats van een woord krijgen de
accentkleur: afspelen en naar begin. Zonder dat was naar begin het enige
icoon tussen vier tekstknoppen en viel het op de verkeerde manier op. Ze
vallen op door kleur en niet door maat; even breed als de rest. */
.muziek-transport .muziek-spelen,
.muziek-transport [data-spring] {
color: var(--vlak);
background: var(--koraal);
border-color: var(--koraal);
}
.muziek-transport .muziek-spelen:hover,
.muziek-transport [data-spring]:hover {
background: color-mix(in srgb, var(--koraal) var(--menging-donker), var(--navy));
border-color: color-mix(in srgb, var(--koraal) var(--menging-donker), var(--navy));
}
.muziek-punten {
display: flex;
flex-direction: column;
gap: var(--ruimte-s);
flex: 1 1 auto;
margin: 0;
}
/* De transportknoppen en de twee velden naast elkaar, gecentreerd onder de
waveform. Op een smal scherm zakken de velden onder de knoppen; de ruimte
tussen die twee rijen is dan klein. */
.muziek-rij {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--ruimte-s) var(--ruimte-xl);
}
/* De wisknop hoort bij deze twee velden en staat er direct achter. */
.muziek-veldrij {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--ruimte-s) var(--ruimte-m);
}
.muziek-veld { display: flex; align-items: center; gap: var(--ruimte-xs); }
.muziek-veld label { margin: 0; }
/* Smal, gecentreerd en tabulair: het ziet eruit als een tijd en niet als een
tekstregel. */
.muziek-veld input {
width: var(--breedte-tijdveld);
/* Krappere zijkanten dan een gewoon veld: de standaardruimte is er voor
tekst die kan doorlopen, en hier staat een tijd van hoogstens zeven
tekens. Dat scheelt meer breedte dan het veld zelf inleveren kan. */
padding-left: var(--ruimte-xs);
padding-right: var(--ruimte-xs);
text-align: center;
font-variant-numeric: tabular-nums;
}
.muziek-zetten { padding: 0 var(--ruimte-s); }
/* De slotregel: het fragment beluisteren en wat het duurt, in het midden
onder de knoppen. */
.muziek-slot {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: var(--ruimte-m);
}
.muziek-fragment { flex: none; }
/* De melding staat waar de handeling plaatsvindt en houdt zijn plek vrij. */
.muziek-punten .ob-melding { margin: 0; }
/* "Duurt 0:24" en "van 2:15" horen op één regel; als blok eronder lezen ze
als twee losse mededelingen. */
.muziek-uitkomst {
display: flex;
align-items: baseline;
gap: var(--ruimte-xs);
margin: 0;
}
.muziek-uitkomst strong { font-variant-numeric: tabular-nums; }
.muziek-van {
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* Wissen wordt zelden gebruikt: aanwezig, maar niet als knop in de bediening. */
/* Zelf kiezen hoe groot de voorbeelden staan: met een bril wil je er twee op
een rij, en wie snel wil kijken wil er acht. */
.media-maat {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ruimte-xs);
/* Staat in de kopregel naast "Foto's" en houdt daar geen eigen ruimte. */
margin: 0;
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* display: flex hierboven verslaat het hidden-attribuut van de browser, en
dan staan de knoppen er terwijl er geen foto is om groter te maken. */
.media-maat[hidden] { display: none; }
.media-maat button { padding: 0 var(--ruimte-s); font-size: var(--tekst-s); }
.media-maat button.actief {
color: var(--vlak);
background: var(--navy);
border-color: var(--navy);
}
/* De foto zelf, scherp, boven de vulling.
Het vak krijgt de verhouding uit de berekening hierboven. Is dat de
verhouding van de foto, dan snijdt cover niets weg en past hij binnen de
tegel; is het die van de tegel, dan vult hij hem en valt het verschil weg.
Zo doet één regel allebei de gevallen. */
.media-beeld {
position: relative;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
aspect-ratio: var(--getoonde-verhouding);
object-fit: cover;
}
/* Hoe ver het omzetten van een film is. Bescheiden: het is een mededeling,
geen actieknop, en hij staat er maar een paar minuten. */
.media-balk {
display: block;
width: var(--breedte-balk);
max-width: 100%;
height: var(--hoogte-balk);
margin: 0 auto var(--ruimte-xs);
border: none;
border-radius: var(--radius-klein);
background: var(--tint);
appearance: none;
}
.media-balk::-webkit-progress-bar {
background: var(--tint);
border-radius: var(--radius-klein);
}
.media-balk::-webkit-progress-value {
background: var(--navy);
border-radius: var(--radius-klein);
}
.media-balk::-moz-progress-bar {
background: var(--navy);
border-radius: var(--radius-klein);
}
.media-stand {
padding: var(--ruimte-xs);
text-align: center;
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* De pijltjes liggen over het voorbeeld en komen tevoorschijn als je erbij
bent, zodat de regel eronder vrij blijft voor de naam. */
.media-pijlen {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
padding: var(--ruimte-xs);
opacity: 0;
}
.media-item:hover .media-pijlen,
.media-item:focus-within .media-pijlen { opacity: 1; }
.media-pijlen form { margin: 0; }
/* Draaien, bovenin over de foto, en net als de pijlen pas zichtbaar als Els
erop wijst: de foto zelf blijft het belangrijkste. */
.media-draai {
position: absolute;
top: 0;
left: 0;
display: flex;
gap: var(--ruimte-xs);
padding: var(--ruimte-xs);
opacity: 0;
}
.media-item:hover .media-draai,
.media-item:focus-within .media-draai { opacity: 1; }
.media-draai form { margin: 0; }
.media-draai button { padding: 0 var(--ruimte-s); }
.media-pijlen button { padding: 0 var(--ruimte-s); }
.media-regel {
display: flex;
align-items: center;
gap: var(--ruimte-xs);
margin-top: var(--ruimte-xs);
}
.media-regel form { margin: 0; margin-left: auto; }
.media-regel button { padding: 0 var(--ruimte-s); }
.media-naam {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--gedempt);
font-size: var(--tekst-s);
}
.media-duur { color: var(--gedempt); font-variant-numeric: tabular-nums; }
/* De belangrijkste zin van dit blok: hoeveel foto's er passen en wat de reeks
duurt. Op de maat van de gewone tekst en niet die van een toelichting; als
toelichting viel hij weg tegen de tegels eronder. De getallen in de volle
kleur, de zin eromheen gedempt: Els zoekt hier vier getallen. */
.ob-reeks {
margin: 0 0 var(--ruimte-m);
font-size: var(--tekst-m);
color: var(--gedempt);
}
.ob-reeks-zin { display: block; }
.ob-reeks strong { color: var(--navy); }
.media-noot {
display: block;
margin-top: var(--ruimte-xs);
font-size: var(--tekst-s);
color: var(--gedempt);
}
.media-noot.media-mis { color: var(--rood); }
.media-toevoegen {
display: block;
margin: 0;
padding: var(--ruimte-m);
text-align: center;
cursor: pointer;
color: var(--gedempt);
font-size: var(--tekst-s);
background: var(--vlak);
border: var(--randdikte) dashed var(--lijn);
border-radius: var(--radius);
}
.media-toevoegen:hover, .media.sleep-erover .media-toevoegen {
border-color: var(--navy);
color: var(--navy);
}
/* Het hele mediavak neemt een sleep aan, dus laat ook het hele vak zien dat
het klaarstaat. Anders licht er iets op waar je niet kijkt. */
.media.sleep-erover {
outline: var(--randdikte) dashed var(--navy);
outline-offset: var(--ruimte-s);
border-radius: var(--radius);
}
.media-toevoegen input { display: none; }
/* Het sleepvlak en de previewknop naast elkaar, tweederde tegen eenderde en
even hoog. Staat de knop er niet, dan houdt het sleepvlak de hele breedte:
flex verdeelt wat er is. */
.media-onderrand { align-items: center; }
/* Het sleepvlak en de regel met wat erin mag, samen in de eerste kolom. Het
sleepvlak zo breed als een gewoon veld: breder drukte het de tekst en de
knoppen weg. De tekst krijgt de rest, op twee regels, foto's en films. */
.media-links {
grid-column: 1;
display: flex;
align-items: center;
gap: var(--ruimte-m);
min-width: 0;
}
.media-links .media-toevoegen {
flex: 0 1 var(--breedte-veld);
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
.media-links .media-formaten {
flex: 1 1 auto;
margin: 0;
}
.media-formaten span { display: block; }
/* In de gewone knopvorm en in de twee knopkolommen van de kaart: Door elkaar
boven Verwijder nummer, Preview boven Sluiten. Ze vullen hun kolom, net als
de knoppen van Muziek, zodat boven en onder dezelfde randen hebben. Als
nadrukknop over een derde van de regel trok Preview eerst alle aandacht, en
opgerekt tot het sleepvlak waren ze hoger dan elke andere knop. */
.media-door-elkaar { grid-column: 2; }
.media-preview { grid-column: 3; }
/* Verbergen wint van de flexverdeling; zonder foto's is er niets te bekijken. */
.media-preview[hidden],
.media-door-elkaar[hidden] { display: none; }
.media-voortgang {
margin: var(--ruimte-s) 0 0;
font-size: var(--tekst-s);
color: var(--gedempt);
font-variant-numeric: tabular-nums;
}
.media-voortgang.media-mis { color: var(--rood); }
.kolom-let-op { color: var(--rood); }
/* --- Op het planningscherm ------------------------------------------
De bevestiging is niet symmetrisch. De rustige regel is een mededeling en
mag niet om aandacht vragen; de waarschuwing moet gezien worden en is niet
weg te klikken.
-------------------------------------------------------------------- */
.stream-rustig {
margin: 0 0 var(--ruimte-s);
font-size: var(--tekst-s);
color: var(--gedempt);
}
.stream-let-op {
margin: 0 0 var(--ruimte-s);
font-size: var(--tekst-s);
color: var(--koraal-diep);
}
.stream-waarschuwing {
padding: var(--ruimte-m);
font-size: var(--tekst-s);
color: var(--rood);
background: color-mix(in srgb, var(--rood) var(--menging-vlak), var(--vlak));
border: var(--randdikte) solid
color-mix(in srgb, var(--rood) var(--menging-rand), var(--lijn));
border-radius: var(--radius-klein);
}
.stream-uitleg { margin: 0; }
.stream-waarschuwing .stream-vink {
display: block;
margin: var(--ruimte-m) 0 0;
font-size: var(--tekst-s);
color: var(--rood);
cursor: pointer;
}
/* Aangevinkt: gezien is gezien, en dan hoeft er niets meer te schreeuwen. De
uitleg gaat weg en het vlak wordt rustig. De regel met het vinkje blijft
staan, want dat is de weg terug. */
.stream-waarschuwing.bevestigd {
padding: 0;
color: var(--gedempt);
background: none;
border-color: transparent;
}
.stream-waarschuwing.bevestigd .stream-uitleg { display: none; }
.stream-waarschuwing.bevestigd .stream-vink {
margin: 0;
color: var(--gedempt);
}
/* --- De live input op /beheer/sets ----------------------------------- */
/* --- Het setbeheer ---------------------------------------------------
Eén set is een kaart en geen tabelregel. Een tabel dwingt alles op één
regel, en zo kwamen de twee handelingen die een set onbruikbaar maken naast
een naamveld te staan, zonder dat ergens stond wat ze doen.
De blokken staan onder elkaar, ook op een breed scherm. Naast elkaar is
precies hoe het knijpen begint: drie dingen die samen moeten passen. Dit is
een scherm dat je een paar keer per jaar opent, meestal omdat er iets aan de
hand is, en dan telt de leesvolgorde en niet hoeveel er op één beeld past.
-------------------------------------------------------------------- */
/* Elk blok een eigen kop en één zin die zegt waar het over gaat. De lijn
erboven scheidt ze zonder een kader om elk blok te hoeven zetten. */
.setblok {
padding-top: var(--ruimte-l);
margin-top: var(--ruimte-l);
border-top: var(--randdikte) solid var(--lijn);
}
.setblok h3,
.setgevaar h3 {
margin: 0 0 var(--ruimte-xs);
font-size: var(--tekst-l);
}
.setblok h4,
.setgevaar h4 {
margin: 0 0 var(--ruimte-xs);
font-size: var(--tekst-m);
}
.setblok form,
.setgevaar form { margin-top: var(--ruimte-m); }
.setregel {
display: flex;
align-items: center;
gap: var(--ruimte-m);
margin: var(--ruimte-m) 0 0;
}
.setregel form { margin-top: 0; }
.setstanden {
margin: var(--ruimte-s) 0 0;
padding-left: var(--ruimte-l);
font-size: var(--tekst-s);
color: var(--gedempt);
}
.setstanden li { margin-top: var(--ruimte-xs); }
/* Het id van de live input, 32 tekens. Voluit leesbaar en afbreekbaar, want
afkappen is precies wat er misging. */
.uid {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--tekst-s);
word-break: break-all;
}
/* Twee wegen onder elkaar, elk met een eigen kop. */
.setweg { margin-top: var(--ruimte-l); }
/* Het plakveld en het naamveld op volle breedte: je moet kunnen zien wat je
erin plakt of overtypt. */
.setplak input,
.setweg-naam input {
width: 100%;
max-width: var(--breedte-formulier);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Wat de set onbruikbaar maakt, zichtbaar apart van de rest. Een eigen kader
in de gevaarkleur, zodat je aan de vorm ziet dat je hier iets anders doet
dan hierboven. */
.setgevaar {
margin-top: var(--ruimte-xl);
padding: var(--ruimte-l);
background: color-mix(in srgb, var(--rood) var(--menging-vlak), var(--vlak));
border: var(--randdikte) solid
color-mix(in srgb, var(--rood) var(--menging-rand), var(--lijn));
border-radius: var(--radius);
}
.setgevaar h3 { color: var(--rood); }
/* --- Het dossierscherm ------------------------------------------------
Dit is het scherm waar Els het vaakst is, en het was meegegroeid met wat er
per stap bij kwam: een melding boven de terugkeerlink, een losse knop tussen
de naam en een kaart, en onderaan de gegevens van de dienst zonder kaart en
op halve breedte.
Nu leest hij van boven naar beneden in de volgorde waarin je hem gebruikt:
waar je vandaan komt, welk dossier je open hebt, het draaiboek, de dienst,
de stream, en helemaal onderaan het weggooien. Elk blok dezelfde kaart op
dezelfde breedte, met een eigen Opslaan achter een scheidingslijn.
Dit gaat over indeling. Kleuren en lettertypen komen in de opmaakronde;
wat hier staat gebruikt de variabelen die er al waren.
-------------------------------------------------------------------- */
.onderkop {
margin: var(--ruimte-xs) 0 var(--ruimte-xl);
color: var(--gedempt);
}
/* De kop van het dossier: wie het is en wanneer de dienst is, met rechtsonder
de knop om die gegevens aan te passen. Dezelfde kaart als een blok, maar
zonder kleur van een onderdeel. */
.dossierkop {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: var(--ruimte-m) var(--ruimte-l);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
padding: var(--ruimte-l);
margin: var(--ruimte-xs) 0 var(--ruimte-l);
}
.dossierkop h1 { margin: 0 0 var(--ruimte-xs); }
.dossierkop-regel {
margin: 0;
color: var(--gedempt);
font-size: var(--tekst-s);
}
.dossierkop-dienst { margin: var(--ruimte-s) 0 0; }
.dossierkop-knop {
display: flex;
align-items: center;
gap: var(--ruimte-m);
margin-left: auto;
}
.dossierkop-knop .blokmelding { margin: 0; }
/* Het venster Gegevens aanpassen: dezelfde velden die eerst in het blok De
dienst stonden, in hetzelfde raster. */
.gegevensvenster {
width: min(var(--breedte-gegevensvenster), calc(100% - 2 * var(--ruimte-l)));
max-width: none;
padding: var(--ruimte-xl);
color: var(--navy);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
}
.gegevensvenster::backdrop { background: var(--verduistering); }
.gegevensvenster h2 { margin: 0; font-size: var(--tekst-l); }
.gegevensvenster .inleiding {
margin: var(--ruimte-xs) 0 var(--ruimte-l);
font-size: var(--tekst-s);
color: var(--gedempt);
}
.gegevensvenster .blokmelding { display: block; margin: var(--ruimte-m) 0 0; }
.gegevensvenster .venstertussenkop { margin: var(--ruimte-l) 0 var(--ruimte-s); font-size: var(--tekst-m); }
.blok h2 {
font-size: var(--tekst-l);
font-weight: var(--gewicht-half);
margin: 0;
}
.blok .ondertitel {
margin: 0;
font-size: var(--tekst-s);
color: var(--gedempt);
}
.blok .inleiding {
margin: var(--ruimte-xs) 0 var(--ruimte-l);
max-width: var(--breedte-formulier);
font-size: var(--tekst-s);
color: var(--gedempt);
}
.blok .inleiding.doorlopend { max-width: none; }
/* Een veld dat getoond wordt maar niet te wijzigen is, zoals de naam van de
organisatie op Mijn gegevens. Zonder vulling, zodat het niet uitnodigt om
erin te typen. */
input.veld-vast {
background: transparent;
cursor: default;
}
input.veld-vast:focus { outline: none; }
/* Label links, veld rechts. Eén raster voor alle rijen, zodat de velden onder
elkaar uitlijnen ook als het ene label langer is dan het andere. */
.dossierrij {
display: grid;
grid-template-columns: var(--breedte-label) minmax(0, 1fr);
gap: var(--ruimte-s) var(--ruimte-l);
align-items: center;
margin-bottom: var(--ruimte-m);
}
.dossierrij label { margin: 0; }
.dossierrij input { width: 100%; }
.dossierrij input.kort { max-width: var(--breedte-kort-veld); }
/* Een vinkje in een rij is geen veld: niet over de hele breedte. */
.dossierrij .aanvinken input[type="checkbox"] { width: auto; }
.dossierrij label.aanvinken { font-size: var(--tekst-m); color: var(--navy); }
/* Het veld met zijn uitleg ernaast. In het veld zou de uitleg verdwijnen
zodra je begint te typen, en dat is precies het moment dat je hem nodig
hebt. */
.veldmethint {
display: flex;
align-items: center;
gap: var(--ruimte-m);
flex-wrap: wrap;
}
.veldmethint input { flex: 1 1 var(--breedte-kort-veld); }
.veldmethint input.codeveld { flex: 0 0 var(--breedte-code); }
/* Terugkijken: de keuze zo breed als de langste keuze, met het datumveld
ernaast in de maat van de andere korte velden. */
.terugkijkkeuze select { flex: 0 0 auto; width: auto; }
.terugkijkkeuze input[type="date"] { flex: 0 1 var(--breedte-kort-veld); max-width: var(--breedte-kort-veld); }
.dossierhint {
flex: 1 1 auto;
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* Een regel onder een veld, uitgelijnd met de veldkolom in plaats van met het
label. Naast het veld zou hij de locatie smal knijpen, en dat is het langste
van de vier. */
.dossierhint.onder-het-veld {
margin: 0 0 var(--ruimte-m);
margin-left: calc(var(--breedte-label) + var(--ruimte-l));
}
.codeveld {
max-width: var(--breedte-code);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--tekst-l);
letter-spacing: var(--letterspatie-code);
text-align: center;
text-transform: uppercase;
}
.dossierregel {
margin: var(--ruimte-s) 0 0;
font-size: var(--tekst-s);
color: var(--gedempt);
}
.dossierkeuze {
margin: var(--ruimte-l) 0 var(--ruimte-l);
padding: 0;
border: 0;
}
.dossierkeuze legend {
padding: 0;
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* Volle tekstkleur: twee volzinnen waaruit gekozen wordt, geen bijschrift. */
.dossierkeuze label {
display: block;
margin: var(--ruimte-s) 0 0;
font-size: var(--tekst-m);
color: var(--navy);
cursor: pointer;
}
/* Elk blok zijn eigen Opslaan, achter een lijn, met de melding ernaast. Die
hoort bij de knop die hem veroorzaakte en niet bovenaan de pagina. */
.dossiervoet {
display: flex;
align-items: center;
gap: var(--ruimte-m);
margin-top: var(--ruimte-l);
padding-top: var(--ruimte-l);
border-top: var(--randdikte) solid var(--lijn);
}
.blokmelding {
margin-left: auto;
font-size: var(--tekst-s);
color: var(--gedempt);
}
.blokmelding.mis { color: var(--rood); }
/* Weggooien staat apart, onderaan de pagina, in de kleur van zijn onderdeel;
zie hieronder. */
.dossierweg {
display: flex;
gap: var(--ruimte-m);
align-items: center;
flex-wrap: wrap;
}
.dossierweg input { max-width: var(--breedte-formulier); }
.blok.weg .blokmelding { display: block; margin: var(--ruimte-m) 0 0; }
/* --- Verwijderen vanaf het overzicht ---------------------------------
De regel klapt open in plaats van dat er een venster overheen komt, en het
werkt zonder JavaScript: een doet dat uit zichzelf.
Dat je de naam moet overtypen is de reden dat dit in een lijst mag staan.
Een knop die met één klik een dossier weggooit hoort niet in iets waar je
doorheen scrolt.
-------------------------------------------------------------------- */
.regelweg summary {
cursor: pointer;
font-size: var(--tekst-s);
color: var(--gedempt);
/* Het driehoekje blijft staan; het is de enige aanwijzing dat er iets
opengaat. */
list-style-position: inside;
}
.regelweg summary:hover { color: var(--rood); }
.regelweg[open] summary { color: var(--rood); }
.regelweg-inhoud {
margin-top: var(--ruimte-m);
padding: var(--ruimte-m);
background: color-mix(in srgb, var(--rood) var(--menging-vlak), var(--vlak));
border: var(--randdikte) solid
color-mix(in srgb, var(--rood) var(--menging-rand), var(--lijn));
border-radius: var(--radius-klein);
}
.regelweg-inhoud .uitleg { margin: 0 0 var(--ruimte-s); }
.regelweg-inhoud label { margin-top: 0; }
.regelweg-velden {
display: flex;
gap: var(--ruimte-m);
align-items: center;
flex-wrap: wrap;
}
.regelweg-velden input { max-width: var(--breedte-formulier); }
/* De lijst op het scherm Uitvaarten. Vaste breedtes, zodat Komend en
Afgelopen onder elkaar uitlijnen; de naam krijgt de meeste ruimte, zodat hij
niet over twee regels breekt. */
main:has(.uitvaartlijst) { max-width: var(--breedte-pagina-breed); }
.uitvaartlijst { table-layout: fixed; min-width: var(--breedte-uitvaartlijst-min); }
.uitvaartlijst-vak { overflow-x: auto; }
.uitvaartlijst td { vertical-align: top; }
.uitvaartlijst .kol-naam { width: 19%; }
.uitvaartlijst .kol-datum { width: 10%; }
.uitvaartlijst .kol-tijd { width: 6%; }
.uitvaartlijst .kol-locatie { width: 16%; }
.uitvaartlijst .kol-contact { width: 12%; }
.uitvaartlijst .kol-aangeleverd { width: 13%; }
.uitvaartlijst .kol-bezocht { width: 14%; }
.uitvaartlijst .kol-weg { width: 10%; }
/* Korte vaste teksten op één regel; ze zijn in één oogopslag te lezen en
blijven zichtbaar boven een opengeklapt Verwijderen. */
.uitvaartlijst .aanlever-stil { white-space: nowrap; }
/* De laatste kolom is smal. Klapt Verwijderen open, dan steekt het vak naar
links uit over de rest van de regel, zodat de uitleg en het veld niet in
een smalle kolom geperst worden. De regel wordt er hoger van; de tekst
bovenin de andere kolommen blijft leesbaar. */
.uitvaartlijst .regelweg-inhoud {
position: relative;
width: min(var(--breedte-regelweg), 80vw);
margin-left: calc(100% - min(var(--breedte-regelweg), 80vw));
}
/* --- Het opnamescherm -------------------------------------------------
Gereedschap voor als het vanzelf niet lukte. Dezelfde kaart als het
setbeheer, zodat het niet als een eigen product leest.
-------------------------------------------------------------------- */
.opnamestand { margin: var(--ruimte-m) 0; }
/* Een rustig label en geen uitroep: de stand staat er als woord, in dezelfde
maat als de zin erachter. */
.opnamestand strong { font-weight: var(--gewicht-half); }
.opnamestand.mis { color: var(--rood); }
.knippunt {
display: flex;
gap: var(--ruimte-m);
align-items: flex-end;
flex-wrap: wrap;
margin-top: var(--ruimte-l);
}
.knippunt label { margin: 0; }
.knippunt input {
width: var(--breedte-kort-veld);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* --- Het uitklappaneel bij een gebruiker ------------------------------
Onder de rij en over de volle breedte van de tabel, niet in de smalle
laatste kolom: daar werd het paneel twee schermen hoog en hingen de velden
verticaal gecentreerd in een leeg vlak.
Geen eigen achtergrond en geen eigen kader. Het hoort bij dit scherm en niet
bij een waarschuwing; alleen de knop die iets onomkeerbaars doet valt op.
-------------------------------------------------------------------- */
/* De rij zelf blijft onzichtbaar tot je hem opent, en houdt geen hoogte over. */
.uitklaprij > td {
padding-top: 0;
padding-bottom: 0;
}
.gebruikerpaneel summary {
cursor: pointer;
padding: var(--ruimte-xs) 0;
font-size: var(--tekst-s);
color: var(--gedempt);
list-style-position: inside;
}
.gebruikerpaneel summary:hover { color: var(--navy); }
.gebruikerpaneel[open] summary { color: var(--navy); }
.gebruikerpaneel-inhoud {
padding: var(--ruimte-m) 0 var(--ruimte-l);
max-width: var(--breedte-formulier);
}
.gebruikerpaneel-inhoud h4 {
margin: var(--ruimte-xl) 0 var(--ruimte-xs);
font-size: var(--tekst-m);
}
.gebruikerpaneel-inhoud form { margin-top: var(--ruimte-m); }
/* --- De balk met de uitnodigingslink ----------------------------------
Sluiten staat rechts in de kop, als gewone link. Sober: dit is een
mededeling met iets erin dat je overneemt, geen scherm op zich.
-------------------------------------------------------------------- */
.uitnodigingsbalk p { margin: var(--ruimte-s) 0 0; }
.uitnodigingsbalk .uitleg { margin-top: var(--ruimte-m); }
.balk-kop {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ruimte-l);
}
.balk-sluiten {
flex: 0 0 auto;
font-size: var(--tekst-s);
color: inherit;
}
/* Een geluidsbestand dat schade heeft. Koraal en niet rood: het speelt door,
maar er zit een gat in en dat hoort Els te weten. */
.muziek-schade {
margin: var(--ruimte-m) 0 0;
font-size: var(--tekst-s);
color: var(--koraal-diep);
}
/* Schade en wachten in de kop van een ingeklapt onderdeel. De kleur komt
erbij, hij draagt de betekenis niet: er staat tekst die het zegt. */
.ob-aandacht {
margin-left: var(--ruimte-s);
font-size: var(--tekst-s);
color: var(--rood);
}
.ob-bezig {
margin-left: var(--ruimte-s);
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* --- het scherm met de stand van bestanden -------------------------------- */
/* De kop en zijn ondertitel horen als één blok te lezen. Los van elkaar
houden ze allebei hun eigen marge en valt er een gat tussen twee regels die
bij elkaar horen; de ruimte hoort onder het blok en niet erbinnen. */
.bl-titel { margin-bottom: var(--ruimte-l); }
.bl-titel h1 { margin-bottom: var(--ruimte-xs); }
.bl-titel p { margin: 0; }
.bl-uitvaart {
margin-bottom: var(--ruimte-l);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
}
.bl-uitvaart > summary::-webkit-details-marker { display: none; }
.bl-uitvaart > summary::marker { content: ""; }
.bl-kop {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--ruimte-l);
padding: var(--ruimte-m) var(--ruimte-l);
cursor: pointer;
list-style: none;
}
.bl-kop::-webkit-details-marker { display: none; }
/* Een driehoekje dat een kwartslag draait bij het openklappen, hetzelfde als
bij de eigen duur onder een fotopresentatie. Zonder dat leest een kop als
een dood kopje en probeert niemand hem te openen. */
.bl-kop::before {
content: "";
width: 0;
height: 0;
border-left: var(--maat-vouwpijl) solid var(--hart);
border-top: var(--maat-vouwpijl) solid transparent;
border-bottom: var(--maat-vouwpijl) solid transparent;
transition: transform 120ms ease-in-out;
}
.bl-uitvaart[open] > .bl-kop::before { transform: rotate(90deg); }
.bl-kop:hover { background: var(--tint); border-radius: var(--radius); }
.bl-kop:hover::before {
border-left-color: color-mix(in srgb, var(--hart) 75%, var(--navy));
}
.bl-kop:hover .bl-naam { text-decoration: underline; }
/* Twee regels en niet meer: de naam boven, datum en organisatie eronder. Zou
een van de twee mogen afbreken, dan groeit de kop tot drie regels zodra er
een lange organisatienaam bij staat. */
.bl-wie { min-width: 0; }
.bl-naam,
.bl-bij {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bl-naam {
font-family: var(--sans);
font-size: var(--tekst-l);
font-weight: var(--gewicht-vet);
letter-spacing: var(--letterspatie-kop);
color: var(--navy);
}
.bl-bij { color: var(--navy-zacht); }
/* De stand in de kop, in vier vaste kolommen: klaar, bezig, wachtend, fout,
altijd in die volgorde en altijd even breed. Heeft een uitvaart niets in een
kolom, dan blijft die plek leeg en schuiven de andere niet op. Zo staat fout
bij elke uitvaart op dezelfde plek en lees je in één blik waar iets misgaat.
Een vaste breedte per kolom en geen inhoudsmaat: anders is de kolom bij de
ene uitvaart breder dan bij de andere en lopen ze alsnog uit de pas. Acht rem
is ruim genoeg voor "999 wachtend", het langste dat er kan staan. */
.bl-stand {
display: grid;
grid-template-columns: repeat(4, var(--breedte-telling));
gap: var(--ruimte-xs);
}
/* Klein en strak om de tekst heen: meer een stoplicht dan vier knoppen. De
ruimte die dat vrijmaakt gaat naar de naam en de datum links, want die
braken anders over drie regels. */
.bl-telling {
display: block;
padding: 0 var(--ruimte-s);
font-size: var(--tekst-s);
/* Ronde uiteinden en geen rand: een rand om een gevuld blokje is ruis. */
border-radius: var(--radius-rond);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--gewicht-normaal);
}
/* Het getal is waar je naar kijkt, het woord zegt alleen welk getal het is. */
.bl-telling b { font-weight: var(--gewicht-half); }
/* Gevuld en niet omlijnd: een dun lijntje om een woord valt weg zodra er vier
naast elkaar staan. De vulling is een rustige menging van de eigen kleur op
wit, zodat de tekst erin gewoon leesbaar blijft.
En ze wegen niet even zwaar. Wat fout is en wat loopt vraagt om een besluit,
wat klaar is vraagt niets meer. Dat verschil zit in de vulling en in het
gewicht van de letter, niet in de grootte en niet in grijs: dit scherm is om
te controleren en dan hoort alles even leesbaar te zijn. */
.bl-telling.klaar {
background: var(--telpil-klaar-vlak);
color: var(--telpil-klaar-tekst);
}
.bl-telling.bezig {
background: var(--telpil-bezig-vlak);
color: var(--telpil-bezig-tekst);
}
.bl-telling.wachtend {
background: var(--telpil-wachtend-vlak);
color: var(--telpil-wachtend-tekst);
}
.bl-telling.fout {
background: var(--telpil-fout-vlak);
color: var(--telpil-fout-tekst);
}
/* Een onderdeel begint met een balk over de volle breedte in zijn eigen
kleur. Dat is de scheiding tussen twee onderdelen, en in één blik zie je
waar je bent. Een menging op wit en geen volle kleur, want daar moeten het
nummer, het icoon en de naam in dezelfde kleur leesbaar op staan. */
.bl-onderdelen { padding: 0 var(--ruimte-l) var(--ruimte-m); }
.bl-onderdeel { margin-top: var(--ruimte-l); }
.bl-onderdeelkop {
display: flex;
align-items: center;
gap: var(--ruimte-m);
margin: 0 0 var(--ruimte-s);
padding: var(--ruimte-s) var(--ruimte-m);
border-radius: var(--radius-klein);
border-left: var(--balkrand) solid var(--tc);
background: color-mix(in srgb, var(--tc) var(--menging-vlak), var(--vlak));
font-family: var(--sans);
font-size: var(--tekst-m);
font-weight: var(--gewicht-vet);
color: var(--tc);
}
.bl-onderdeelkop .scene-icoon { color: var(--tc); }
.bl-bol {
display: flex;
align-items: center;
justify-content: center;
width: var(--bol);
height: var(--bol);
flex: none;
border-radius: var(--radius-rond);
background: var(--tc);
color: var(--vlak);
font-size: var(--tekst-s);
font-weight: var(--gewicht-vet);
font-variant-numeric: tabular-nums;
}
/* Eén bestand, in vijf kolommen die overal dezelfde breedte hebben: het
soorticoon, de naam, de stand, de labels van de versies en hun maten.
Percentages en geen inhoudsmaat, want anders rekent elk bestand zijn eigen
kolommen uit en staat de maat bij het ene bestand ergens anders dan bij het
andere. En geen tussenruimte op het raster: vijf percentages tellen op tot
precies honderd, en elke gap erbovenop duwt de rechterkolom buiten de kaart.
De lucht komt daarom uit padding binnen de cellen zelf. */
.bl-bestanden { list-style: none; margin: 0; padding: 0; }
.bl-bestand {
display: grid;
grid-template-columns: 10% 36% 26% 18% 10%;
align-items: start;
padding: var(--ruimte-s) 0;
border-bottom: var(--randdikte) solid var(--lijn);
}
.bl-bestand:last-child { border-bottom: 0; }
/* De twee handelingen staan onder de regel, over alle kolommen heen. In een
eigen kolom zouden ze de vijf kolommen hierboven uit elkaar duwen, en dat is
precies wat dit scherm niet moet doen. Klein en rustig: je hebt ze zelden
nodig, en dan gaat het om iets dat al misging. */
.bl-knoppen {
grid-column: 1 / -1;
display: flex;
gap: var(--ruimte-s);
margin-top: var(--ruimte-s);
}
.bl-knoppen button {
padding: var(--ruimte-xs) var(--ruimte-m);
font-size: var(--tekst-s);
}
.bl-soort { color: var(--tc); }
/* Een lange naam kapt af binnen zijn dertig procent in plaats van de kolommen
scheef te trekken; de volledige naam staat in de zweeftekst. */
.bl-bestandsnaam {
display: block;
min-width: 0;
padding-right: var(--ruimte-m);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--navy);
}
.bl-stand-bestand { padding-right: var(--ruimte-m); color: var(--navy); }
.bl-stand-bestand.fout { color: var(--rood); font-weight: var(--gewicht-half); }
.bl-sinds { display: block; color: var(--navy-zacht); }
/* Een aandachtspunt en geen fout: er loopt iets, het duurt alleen langer dan
het mag. Wie de kleur niet ziet leest het gewoon. */
.bl-merk { display: block; color: var(--koraal-diep); }
.bl-reden { display: block; color: var(--rood); }
/* De versies vullen samen de kolommen vier en vijf, dus veertig procent van
de breedte. Elke versie is een eigen regel, en die veertig procent wordt
binnen de regel verdeeld: achttien procent voor het label, links
uitgelijnd, en dertien voor de maat, rechts uitgelijnd. Zo staan de maten
onder elkaar en is 119 kB te vergelijken met 1,8 MB.
Binnen de regel splitsen en niet als twee kolommen over alle regels heen.
Dat laatste heb ik geprobeerd en het klapte de regels samen tot doorlopende
tekst: er stond "MBaula" en "kBcontactvel". Percentages houden de streep
overal op dezelfde plek, ook zonder gedeeld raster. */
.bl-versies {
grid-column: 4 / -1;
list-style: none;
margin: 0;
padding: 0;
}
/* Een vak in een raster is standaard nooit smaller dan zijn eigen inhoud. Een
tekst die niet mag afbreken duwt zijn kolom daardoor breder dan het
percentage voorschrijft, en dan tellen de vijf kolommen op tot meer dan
honderd en steekt de laatste buiten de kaart. Deze regel zegt dat het
percentage leidt: past de tekst er niet in, dan loopt hij over de lege
ruimte links van zich heen en blijft de kaart heel. */
.bl-bestand > *,
.bl-versies li > * { min-width: 0; }
.bl-versies li {
display: grid;
/* De lijst beslaat kolom vier en vijf samen, dus 28 procent van de regel.
Binnen de regel valt die 28 uiteen in 18 voor het label en 10 voor de
maat, wat neerkomt op deze twee delen. */
grid-template-columns: 64.2857% 35.7143%;
}
.bl-maat,
.bl-ontbreekt { text-align: right; }
.bl-versienaam {
padding-right: var(--ruimte-l);
color: var(--navy-zacht);
}
.bl-versienaam::after { content: ":"; }
/* Nooit afbreken, en nooit buiten de kolom. Een tekst die niet past wordt
afgekapt in plaats van over de rand van de kaart te lopen: bij rechts
uitlijnen loopt een te lange regel naar rechts weg, en dat is precies de
kant waar de kaart ophoudt. Dit is het slot op de deur voor wat er ooit
nog aan teksten bij komt. */
.bl-maat,
.bl-ontbreekt {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bl-maat { font-variant-numeric: tabular-nums; color: var(--navy); }
.bl-ontbreekt { color: var(--navy-zacht); }
.bl-ontbreekt.loopt { color: var(--koraal); }
/* Het merk van de organisatie boven het inlogscherm. Groot en met lucht
eromheen: dit is het eerste wat zij ziet, en als ze daar bij ons begint is
de rest van het portaal niet meer van haar. */
.inlogmerk {
margin-bottom: var(--ruimte-xl);
}
.inlogmerk img {
max-height: var(--inlogmerk-hoogte);
max-width: var(--merk-klant-breedte);
width: auto;
display: block;
}
.inlogmerk-naam {
font-size: var(--tekst-xl);
font-weight: var(--gewicht-vet);
letter-spacing: var(--letterspatie-kop);
color: var(--navy);
}
/* De voettekst, in allebei de portalen. Twee regels, gecentreerd, klein en
rustig: het hoort er te staan, het hoort geen aandacht te vragen. Sinds de
knop Contact uit de balk is, staat het telefoonnummer hier. */
.voet {
max-width: var(--breedte-pagina);
margin: var(--ruimte-blok) auto 0;
padding: var(--ruimte-l) var(--ruimte-xl) var(--ruimte-xl);
border-top: var(--randdikte) solid var(--lijn);
text-align: center;
font-size: var(--tekst-s);
color: var(--gedempt);
}
.voet p { margin: 0; }
.voet p + p { margin-top: var(--ruimte-xs); }
.voet a { color: inherit; }
.voet a:hover { color: var(--menu-hier-tekst); }
.voet-streep { padding: 0 var(--ruimte-xs); }
/* --- het verzoek aan de familie ---------------------------------------
*
* Een knop onder de strook met de uitvaart, en het venster waarin de tekst
* komt te staan. Het portaal verstuurt zelf geen mail; Els kopieert en
* verstuurt vanuit haar eigen programma.
*/
/* Drie knoppen van precies dezelfde breedte, zo breed als de langste tekst
vraagt. Dat kan met een raster van gelijke kolommen dat zich om zijn inhoud
sluit: elke kolom wordt even breed als de breedste, en de rij blijft samen
met wat erin staat in plaats van uit te lopen tot de rand van de kaart.
Van links naar rechts: het verzoek aan de familie en de twee knoppen die
papier leveren, met overal dezelfde ruimte ertussen. De basisslide en de
rouwkaart staan sinds 28 september in het dossier.
Op een smal venster krimpen de kolommen mee tot het langste woord en breekt
de tekst in de knop af; er valt niets buiten de kaart. */
.aanlevervraag {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: var(--ruimte-xl);
row-gap: var(--ruimte-xs);
width: fit-content;
max-width: 100%;
align-items: stretch;
margin: 0 0 var(--ruimte-m);
}
/* Alle drie dezelfde vorm, maat en uitlijning: zelfde hoogte, tekst gecentreerd,
en niet meebuigen met de lengte van hun eigen woorden. */
.aanlevervraag button,
.aanlevervraag .knopvorm {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: var(--regelhoogte);
/* Zonder dit houdt elke knop zijn langste woord als ondergrens, en op een
smal venster wordt de knop met het langste woord breder dan de andere twee.
Mag een woord afbreken, dan blijven ze ook daar precies even breed. */
overflow-wrap: anywhere;
}
/* De twee knoppen voor het draaiboek op papier staan zelf in het raster; het
omhulsel eromheen zit er alleen om ze in het sjabloon bij elkaar te houden.
Drie knoppen, drie kolommen, en overal dezelfde ruimte ertussen. */
.papierknoppen { display: contents; }
/* De twee knoppen voor de basisslide en de rouwkaart in het dossier: even
breed, naast elkaar. */
.ontwerpknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-s); width: fit-content; max-width: 100%; }
/* De uitleg hoort bij het verzoek; op een eigen regel eronder, zodat hij niet
achter de knoppen voor papier aan hangt. */
.aanlevervraag .veld-noot { grid-column: 1 / -1; margin: 0; }
/* Het vinkje voor de portretfoto onder de knop voor het verzoek: het hoort
bij dat verzoek, niet bij het papier ernaast. */
.aanlevervraag .portretvraag { grid-column: 1 / -1; margin: 0; }
/* De uitleg volgt de breedte van de knoppen en rekt ze niet op: zonder dit
maakt een lange reden de hele strook, en dus elke knop, breder. */
.aanlevervraag .veld-noot { width: 0; min-width: 100%; }
.berichtvenster {
width: min(var(--berichtvenster-breed), 92vw);
border: none;
border-radius: var(--radius);
padding: var(--ruimte-l);
background: var(--vlak);
color: var(--inkt);
}
.berichtvenster::backdrop { background: var(--verduistering); }
.berichtvenster h2 { margin: 0 0 var(--ruimte-xs); }
.berichtvenster .uitleg { margin: 0 0 var(--ruimte-s); }
/* Vast lettertype: dit is de tekst zoals hij straks in een mail staat, en met
de vaste breedte is te zien waar de regels afbreken. */
.berichtvenster textarea {
width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--tekst-s);
line-height: 1.5;
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius-klein);
padding: var(--ruimte-s);
background: var(--papier);
color: var(--inkt);
resize: vertical;
}
.berichtvenster .knoppen { margin-top: var(--ruimte-s); display: flex; gap: var(--ruimte-xs); }
/* De mail zoals de familie hem leest. Schuift in zichzelf als hij langer is
dan het venster. */
.berichtvenster .berichtvoorbeeld {
max-height: min(60vh, var(--berichtvoorbeeld-hoog));
overflow-y: auto;
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius-klein);
padding: var(--ruimte-s) var(--ruimte-m);
background: var(--papier);
color: var(--inkt);
font-size: var(--tekst-s);
}
.berichtvenster .berichtvoorbeeld p { margin: 0 0 var(--ruimte-s); }
/* Het draaiboek op papier, gelezen in een venster over de pagina heen. Breder
en hoger dan het venster met de mailtekst, want hier staat een vel papier in
en dat moet te lezen zijn zonder te schuiven. Op een klein scherm krimpt het
mee met het venster van de browser. */
.papiervenster { width: min(var(--papiervenster-breed), 94vw); }
.papiervel {
display: block;
width: 100%;
height: min(var(--papiervenster-hoog), 72vh);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius-klein);
background: var(--papier);
}
/* Wie het beeld bij een spreker aanlevert: twee standen met een naam.
*
* Beslaat de volle breedte van de veldenrij, want twee volzinnen passen niet in
* een kolom die op een invulveld is gemaakt. De kop staat erboven zoals bij de
* andere velden een label. */
.velden-breed { grid-column: 1 / -1; }
.velden-breed .veldkop {
display: block;
margin-top: var(--ruimte-m);
color: var(--gedempt);
font-size: var(--tekst-s);
}
.velden-breed .aanvinken { white-space: normal; margin-top: var(--ruimte-xs); }
/* De uitleg onder elke keuze, ingesprongen tot onder de tekst van de keuze. */
.beeldkeuze .veld-noot { display: block; margin: 0 0 var(--ruimte-xs) var(--ruimte-l); }
/* Lever slide aan: onder de eerste keuze, op de kantlijn van de uitleg. */
.beeldkeuze-knop { margin: 0 0 var(--ruimte-s) var(--ruimte-l); }
/* Wat de familie heeft aangeleverd, in het overzicht van de uitvaarten.
*
* Als tekst en niet als kleur alleen: wie het verschil in kleur niet ziet,
* leest hetzelfde. Het groen is er om te kunnen scannen, niet om iets te
* zeggen dat er niet ook staat. */
.aanlever-stil { color: var(--gedempt); }
.aanlever-af { color: var(--groen); }
.knopteksten { margin-top: var(--ruimte-xl); }
/* Een alinea uit het bericht aan de familie. De tekst loopt altijd door naar
de volgende regel, ook een lang adres zonder spaties; hij schuift nooit
rechts het vak uit. */
.alineavak {
white-space: pre-wrap;
overflow-wrap: anywhere;
overflow-x: hidden;
resize: vertical;
}
/* --- het locatieboek ------------------------------------------------------
*
* Twee dingen: een getalkolom in een tabel, en de lijst die tijdens het typen
* onder het zoekveld verschijnt. Alles met de bestaande variabelen; er staat
* hier geen losse kleur en geen losse pixelmaat.
*/
/* Een tabel die breder is dan het venster schuift in zichzelf in plaats van de
pagina breder te maken. Zelfde oplossing als bij het muziekscherm; er komt
geen breekpunt bij, want die kan geen variabele lezen. */
.tabelvak { overflow-x: auto; }
/* Getallen rechts en onder elkaar uitgelijnd; tekst blijft links, zoals th en
td dat standaard doen. */
td.getal, th.getal {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Het zoekveld met de knop ernaast, en de uitkomst eronder. */
.locatiezoek { position: relative; }
.locatiezoek .veldmethint { align-items: center; }
/* De lijst met wat er past hangt direct onder het veld, precies zo breed (dat
zet het script), en staat in de pagina zelf: wat eronder staat schuift op in
plaats van afgedekt te worden. Zweefde hij erboven, dan dekte hij op de
pagina Nieuwe uitvaart over de volle breedte de keuzelijst eronder af. */
.zoekuitkomst {
list-style: none;
margin: var(--ruimte-xs) 0 0;
padding: 0;
max-width: 100%;
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius-klein);
box-shadow: var(--schaduw);
overflow: hidden;
}
.zoekuitkomst li { margin: 0; }
.zoekuitkomst .zoekregel {
display: flex;
flex-wrap: wrap;
gap: var(--ruimte-xs) var(--ruimte-s);
align-items: baseline;
width: 100%;
padding: var(--ruimte-s) var(--ruimte-m);
background: none;
border: 0;
border-bottom: var(--randdikte) solid var(--lijn);
border-radius: 0;
text-align: left;
font: inherit;
color: var(--navy);
cursor: pointer;
}
.zoekuitkomst li:last-child .zoekregel { border-bottom: 0; }
.zoekuitkomst .zoekregel:hover,
.zoekuitkomst .zoekregel:focus-visible { background: var(--tint); }
.zoekuitkomst .zoeknaam { font-weight: var(--gewicht-half); }
.zoekuitkomst .zoekadres { font-size: var(--tekst-s); color: var(--gedempt); }
.zoekuitkomst .zoekstand { font-size: var(--tekst-s); color: var(--koraal-diep); }
.zoekuitkomst .zoekniets {
padding: var(--ruimte-s) var(--ruimte-m);
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* De gekozen locatie op het dossier: de naam met eronder het adres, en een
knop om hem los te laten. */
.locatiekeuze { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); align-items: baseline; }
.locatiekeuze .locatienaam { font-weight: var(--gewicht-half); }
.locatiekeuze .locatieadres { font-size: var(--tekst-s); color: var(--gedempt); }
.locatiekeuze { margin: 0; }
/* Wijzigen staat naast Bekijken en ziet er net zo uit: een woord om op te
klikken, geen knop die aandacht vraagt. */
.locatiekeuze .locatiewissel {
padding: 0;
background: none;
border: 0;
border-radius: 0;
font: inherit;
color: var(--navy);
cursor: pointer;
}
.locatiekeuze .locatiewissel:hover { background: none; text-decoration: underline; }
/* Het zoekveld en de keuzelijst zijn twee vakken, met lucht ertussen. De
uitkomst van het zoeken hangt onder het zoekveld, zo breed als het veld. */
.locatiekiezen { position: relative; }
[data-locatiezoek] select[data-locatiekeuze] { margin-top: var(--ruimte-s); }
.locatiekeuze:not([hidden]) + .locatiekiezen:not([hidden]) { margin-top: var(--ruimte-s); }
/* Een scheiding tussen twee groepen menuknoppen. Een dun streepje in de
bestaande lijnkleur, geen kop en geen ruimte eromheen die de rij uit elkaar
trekt. Past hij niet meer, dan verdwijnt hij; zie menu.js. */
.menu-streep {
flex: none;
width: var(--randdikte);
align-self: stretch;
margin: var(--ruimte-xs) var(--ruimte-xs);
border: 0;
background: var(--lijn);
}
/* Twee maten binnen het raster met velden. Het raster deelt zichzelf in
kolommen van minstens --breedte-veld; een breed veld neemt er twee en een
smal veld blijft er een, maar dan met een korter invoervak. Op een smal
venster wordt alles vanzelf één kolom, precies als de rest. */
.velden .veld-breed { grid-column: span 2; }
.velden .veld-smal input { max-width: var(--breedte-smal-veld); }
/* Twee korte velden die bij elkaar horen, in één vak van het raster en
onderling even breed: Huisnummer en Postcode. Los van elkaar deelt het raster
ze soms over twee regels, en dan staat de postcode onder de straat in plaats
van naast het huisnummer. */
.velden .veldpaar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--ruimte-m);
}
/* Velden die één gegeven vormen, over de volle breedte en op één rij: de
contactpersoon met zijn telefoonnummer en zijn mailadres. Dezelfde verdeling
als het raster eromheen, dus op een smal venster gaan ze alsnog onder elkaar
staan in plaats van buiten de kaart te vallen. */
.velden .veldgroep {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--breedte-veld), 1fr));
gap: 0 var(--ruimte-l);
}
/* Een blok dat in- en uitklapt. Zelfde kaart als .blok, met de kop als greep.
De driehoek van de browser blijft staan, net als bij de andere uitklappers
in het portaal; er komt geen eigen teken bij. */
.inklapblok > summary {
cursor: pointer;
list-style-position: outside;
margin-left: var(--ruimte-m);
}
.inklapblok > summary::-webkit-details-marker { color: var(--gedempt); }
.inklapblok > summary h3 { display: inline; }
.inklapblok > summary:hover h3 { color: var(--navy-zacht); }
.inklapblok > .inklapinhoud { margin-top: var(--ruimte-m); }
/* De greep van een uitklapper met een logo erin: de naam links, het logo
rechts. Als blok binnen de greep en niet als flexbox op de greep zelf: zet je
display op een , dan verdwijnt het driehoekje van de browser, en dan
ziet deze uitklapper er anders uit dan alle andere in het portaal. */
.balkrij {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ruimte-l);
}
/* Een vaste hoogte, altijd, ook als er geen logo is. Zonder die vaste hoogte is
de ene balk hoger dan de andere, want elk logo heeft zijn eigen vorm. En
omdat de plek er ook staat als hij leeg blijft, verspringt er niets: niet
tussen twee ondernemers, en niet bij het openen van de uitklapper. */
.balklogo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
height: var(--hoogte-logo-balk);
width: var(--breedte-logo-balk);
}
.balklogo img { max-height: 100%; max-width: 100%; }
/* --- De kleur van een onderdeel -------------------------------------------
Elk onderdeel van het portaal heeft een eigen kleur: Rouwkaart, Draaiboek,
Basisslide, Stream, en de rest. De kleuren staan in de database; bovenin
elke pagina zet het portaal ze klaar, en een element met het onderdeel
erop krijgt zijn kleur in --onderdeel. Hier staat alleen hoe die kleur
gebruikt wordt.
De kleur tekent en vult niet. Een streep bovenaan het blok en een bolletje
voor de kop in de volle kleur; de rand, de scheidslijn en het vlak van de
knoppen in een lichte tint. De tekst blijft marineblauw. Een blok krijgt de
kleur van zijn eigen onderdeel, of van de pagina waar het op staat.
------------------------------------------------------------------------ */
.blok[data-onderdeel],
[data-onderdeel] .blok {
border-color: color-mix(in srgb, var(--onderdeel) var(--onderdeel-rand), var(--lijn));
/* Binnen de rand en met de ronde hoeken mee, zonder dat er iets hoeft te
worden afgesneden. */
box-shadow: inset 0 var(--onderdeel-streep) 0 var(--onderdeel);
}
.blok[data-onderdeel] .dossiervoet,
[data-onderdeel] .blok .dossiervoet {
border-top-color: color-mix(in srgb, var(--onderdeel) var(--onderdeel-rand), var(--lijn));
}
/* Het bolletje voor de kop. */
.blok[data-onderdeel] > h2::before,
.blok[data-onderdeel] > .blokkop > h2::before,
main[data-onderdeel] > h1::before,
[data-onderdeel] .onderdeel-kop::before {
content: "";
display: inline-block;
width: var(--onderdeel-bolletje);
height: var(--onderdeel-bolletje);
margin-right: var(--ruimte-s);
border-radius: 50%;
background: var(--onderdeel);
vertical-align: var(--onderdeel-bolletje-zakken);
}
/* De knoppen in een blok: een lichte tint als vlak, zonder rand, marineblauwe
tekst. Ook Opslaan en Verwijderen. */
.blok[data-onderdeel] button,
.blok[data-onderdeel] a.knopvorm,
.blok[data-onderdeel] label.knopvorm,
[data-onderdeel] .blok button,
[data-onderdeel] .blok a.knopvorm,
[data-onderdeel] .blok label.knopvorm {
color: var(--navy);
background: color-mix(in srgb, var(--onderdeel) var(--onderdeel-knop), var(--vlak));
border-color: transparent;
}
.blok[data-onderdeel] button:hover,
.blok[data-onderdeel] a.knopvorm:hover,
.blok[data-onderdeel] label.knopvorm:hover,
[data-onderdeel] .blok button:hover,
[data-onderdeel] .blok a.knopvorm:hover,
[data-onderdeel] .blok label.knopvorm:hover {
color: var(--navy);
background: color-mix(in srgb, var(--onderdeel) var(--onderdeel-knop-zweef), var(--vlak));
border-color: transparent;
}
/* De kop van het draaiboek: alleen de streep; de rand blijft zoals hij was. */
.strook[data-onderdeel] {
box-shadow: inset 0 var(--onderdeel-streep) 0 var(--onderdeel);
}
/* De lijn tussen Onderdelen en Draaiboek. */
.builder[data-onderdeel] .kolom-catalogus {
border-right-color: color-mix(in srgb, var(--onderdeel) var(--onderdeel-scheiding), var(--lijn));
}
/* Een kop die een lijst opent, zoals Komend en Afgelopen: een klein streepje
ervoor, in het blauw van de tekst. */
h2.sectie::before {
content: "";
display: inline-block;
width: var(--onderdeel-streep);
height: var(--sectie-streep-hoogte);
margin-right: var(--ruimte-s);
border-radius: var(--randdikte);
background: var(--navy);
vertical-align: var(--sectie-streep-zakken);
}
/* --- Bijsnijden ------------------------------------------------------------
Een venster met de grote versie van de foto en een kader dat Els verschuift
en aan de hoeken groter of kleiner maakt. Wat buiten het kader valt, ligt
onder een waas. */
.snijvenster {
width: min(var(--breedte-snijvenster), calc(100% - 2 * var(--ruimte-l)));
max-width: none;
padding: var(--ruimte-xl);
color: var(--navy);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
}
.snijvenster::backdrop { background: var(--verduistering); }
.snijvenster h2 { margin: 0 0 var(--ruimte-xs); }
/* Links de foto met het kader, rechts het voorbeeld van het scherm in de
aula. Op een smal scherm zakt het voorbeeld onder de foto. */
.snijwerk {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 0 var(--ruimte-l);
}
.snijkolom { flex: 1 1 var(--breedte-snijkolom); min-width: 0; }
.snijvoorbeeld {
flex: 0 1 var(--breedte-snijvoorbeeld);
min-width: 0;
margin: var(--ruimte-l) 0;
}
.snijvoorbeeld figcaption {
margin-bottom: var(--ruimte-s);
color: var(--gedempt);
font-size: var(--tekst-s);
}
/* Het scherm in de aula is 16:9. Een uitsnede die dat niet vult, staat op
zwart: het vlak is zwart en het voorbeeld tekent er alleen de uitsnede in. */
.snijvoorbeeld canvas {
display: block;
width: 100%;
aspect-ratio: var(--tegel-verhouding);
background: var(--tegel-zwart);
}
.snijvlak {
position: relative;
width: fit-content;
margin: var(--ruimte-l) auto;
line-height: 0;
}
.snijvlak canvas {
display: block;
max-width: 100%;
max-height: var(--hoogte-snijvlak);
}
.snijkader {
position: absolute;
border: var(--snij-kader-rand) solid var(--vlak);
box-shadow: 0 0 0 100vmax var(--snij-waas);
cursor: move;
touch-action: none;
}
.snijvlak { overflow: hidden; }
.snijhoek {
position: absolute;
width: var(--snij-hoek);
height: var(--snij-hoek);
background: var(--vlak);
border-radius: 50%;
}
.snijhoek[data-hoek-greep="lb"] { left: calc(var(--snij-hoek) / -2); top: calc(var(--snij-hoek) / -2); cursor: nwse-resize; }
.snijhoek[data-hoek-greep="rb"] { right: calc(var(--snij-hoek) / -2); top: calc(var(--snij-hoek) / -2); cursor: nesw-resize; }
.snijhoek[data-hoek-greep="lo"] { left: calc(var(--snij-hoek) / -2); bottom: calc(var(--snij-hoek) / -2); cursor: nesw-resize; }
.snijhoek[data-hoek-greep="ro"] { right: calc(var(--snij-hoek) / -2); bottom: calc(var(--snij-hoek) / -2); cursor: nwse-resize; }
.snijmelding { color: var(--rood); }
/* De kwartslagen en de schuif Rechtzetten, boven de foto. */
.snijbediening {
display: flex;
align-items: center;
gap: var(--ruimte-m);
flex-wrap: wrap;
margin-top: var(--ruimte-m);
}
.snijschuif { display: flex; align-items: center; gap: var(--ruimte-s); margin: 0; }
.snijschuif input { width: var(--breedte-kort-veld); }
.snijvenster .knoppen { justify-content: flex-end; }
.snijvenster .snij-origineel { margin-right: auto; }
/* --- De kalender -----------------------------------------------------------
Eén kalender voor elk datumveld in het portaal van de ondernemer. Het veld
toont de datum, de knop ernaast opent een laatje met de maand eronder. */
.kalendervak {
position: relative;
display: inline-flex;
align-items: stretch;
gap: var(--ruimte-xs);
max-width: 100%;
}
.kalendervak[hidden] { display: none; }
.kalendervak input[type="text"] { flex: 1 1 auto; min-width: 0; }
.kalenderknop {
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: var(--ruimte-s);
padding-right: var(--ruimte-s);
}
.kalenderknop svg { width: var(--kalender-icoon); height: var(--kalender-icoon); }
.kalenderlade {
position: absolute;
top: calc(100% + var(--ruimte-xs));
left: 0;
z-index: 50;
padding: var(--ruimte-m);
background: var(--vlak);
border: var(--randdikte) solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
}
.kalenderkop {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ruimte-s);
margin-bottom: var(--ruimte-s);
}
.kalendertitel { font-weight: var(--gewicht-half); }
.kalenderrooster {
display: grid;
grid-template-columns: repeat(7, var(--kalender-dag));
gap: var(--ruimte-xs);
}
.kalenderdagnaam {
text-align: center;
font-size: var(--tekst-s);
color: var(--gedempt);
}
/* Overal dezelfde rustige kalender, ook in een blok met de kleur van een
onderdeel: vandaar de klasse van het laatje ervoor. */
.kalendervak .kalenderlade button {
color: var(--navy);
background: var(--vlak);
border-color: var(--lijn);
}
.kalendervak .kalenderlade button:hover { color: var(--navy); background: var(--tint); border-color: var(--lijn); }
.kalendervak .kalenderlade button.kalenderdag {
width: var(--kalender-dag);
height: var(--kalender-dag);
padding: 0;
border-color: transparent;
}
.kalendervak .kalenderlade button.kalenderdag.vandaag { border-color: var(--lijn); }
.kalendervak .kalenderlade button.kalenderdag.gekozen,
.kalendervak .kalenderlade button.kalenderdag.gekozen:hover { color: var(--vlak); background: var(--navy); border-color: var(--navy); }
.kalendervak .kalenderlade button.kalenderdag:disabled { color: var(--lijn); background: none; cursor: default; }