/* Oui bon! — stijl van de app, gebouwd op de ontwerpronde van 19-09-2026 (docs/prototypes/ontwerp.css). Zwitsers: wit, zwart, één rood. Rood alleen op de primaire actie, de lopende timer, ★ en een handvol subtiele accenten (Roy, punten 4/5/6/11/14/15). Compact en minimalistisch. Geen letterlijke kleur hier: alles via --s-… en --v-… uit thema.css en de maten/fonts uit tokens.css. De vormtaal (B/C), licht/donker en kleur worden met data-attributen op geschakeld; zie thema.js. */ @import url("tokens.css"); @import url("thema.css"); * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; height: 100%; } body { margin: 0; height: 100%; background: var(--s-achtergrond); color: var(--s-tekst); font: 400 14px/1.45 var(--font-sans); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } svg.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: var(--v-linecap); stroke-linejoin: miter; flex: none; } :root[data-vorm="c"] svg.ico { stroke-linejoin: round; } [hidden] { display: none !important; } /* Op een groot scherm: telefoonbreedte in het midden, lijnen ernaast. */ #app { height: 100%; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; position: relative; } @media (min-width: 560px) { #app { border-left: 1px solid var(--s-lijn-zacht); border-right: 1px solid var(--s-lijn-zacht); } } .schermvlak, .scherm { flex: 1; min-height: 0; display: flex; flex-direction: column; } .rol { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ---------- typografische hulpjes ---------- */ .kap { font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); } .kopje { font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); padding: var(--r4) var(--r5) var(--r2); } .kopje.rij { display: flex; align-items: center; gap: var(--r3); } .kopje .rechts { margin-left: auto; } .gedempt { color: var(--s-gedempt); } .vaag { color: var(--s-vaag); } .rood { color: var(--s-rood); } .hint { padding: var(--r3) var(--r5) 0; font-size: 11.5px; color: var(--s-vaag); } .hint.stil { padding: var(--r2) 0 0; } .fout { color: var(--s-rood); font-size: 13px; padding: var(--r3) var(--r5) 0; min-height: 1.4em; } .leeg { color: var(--s-vaag); padding: var(--r7) var(--r5); text-align: center; font-size: 13.5px; } .leeg .geit { display: block; margin: 0 auto var(--r4); width: 56px; height: 56px; color: var(--s-vaag); } /* ---------- kop van een scherm ---------- */ .kop { display: flex; align-items: center; gap: var(--r3); min-height: 54px; flex: none; padding: var(--r3) var(--r5); border-bottom: var(--v-sectie) solid var(--s-lijn); } .kop .merk { color: var(--s-tekst); flex: none; } .kop .titel { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .kop .telling { color: var(--s-gedempt); font-size: 11px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); margin-left: var(--r2); white-space: nowrap; } .kop .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r3); flex: none; } .kop .terug, .rkop .terug { width: 34px; height: 34px; padding: 0; font-size: 16px; flex: none; } .vierkant { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--v-knop-rand); background: var(--v-knop-achter); border-radius: var(--v-hoek); font-size: 12px; font-weight: 700; flex: none; color: var(--s-tekst); } /* Woordmerk: opzettelijk fout-Frans, het uitroepteken is het rode accent. */ .woordmerk { font-weight: 800; letter-spacing: -.03em; white-space: nowrap; } .woordmerk i { font-style: normal; color: var(--s-rood); } /* ---------- knoppen ---------- */ .knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--r2); height: 30px; padding: 0 12px; white-space: nowrap; border-radius: var(--v-hoek); font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); border: 1px solid var(--v-knop-rand); background: var(--v-knop-achter); color: var(--s-tekst); transition: opacity .12s; } :root[data-vorm="c"] .knop { font-size: 12.5px; } .knop:active { opacity: .7; } .knop.zwart { background: var(--s-lijn); color: var(--s-achtergrond); border-color: var(--s-lijn); } .knop.rood { background: var(--s-rood); color: var(--s-op-rood); border-color: var(--s-rood); } .knop.tekst { border-color: transparent; background: transparent; } .knop.klein { height: 26px; padding: 0 9px; font-size: 10.5px; } .knop.groot { height: 48px; font-size: 12px; } :root[data-vorm="c"] .knop.groot { font-size: 14px; } .knop.breed { width: 100%; } .knop.gevaar { color: var(--s-rood); } .knop.plus { width: 26px; padding: 0; font-size: 14px; } .knop[disabled] { opacity: .35; cursor: default; } .knop[aria-pressed="true"] { background: var(--s-lijn); color: var(--s-achtergrond); border-color: var(--s-lijn); } .knop[aria-pressed="true"] .ster { color: var(--s-rood); } :root[data-kleur="kleurloos"] .knop[aria-pressed="true"] .ster { color: var(--s-achtergrond); } /* ---------- markeringen ---------- */ .hart { color: var(--s-tekst); display: inline-flex; } .hart svg { width: 14px; height: 14px; stroke-width: 1.8; fill: currentColor; } .hart.leeg svg { fill: none; } .ster { color: var(--s-rood); font-size: 13px; line-height: 1; } .ster.leeg { color: var(--s-vaag); } .oordeel-slecht { font-size: 10px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-vaag); } /* ---------- lijst met letterbalk ---------- */ .index { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } .index .lijst-rol { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .index ol { list-style: none; margin: 0; padding: 0 30px 0 0; } .index.zonder-balk ol { padding-right: 0; } .index li { position: relative; display: flex; align-items: center; min-height: 43px; border-bottom: 1px solid var(--v-scheiding); background: var(--v-rij-achter); margin-bottom: var(--v-rij-gap); border-radius: var(--v-hoek); } :root[data-vorm="c"] .index ol { padding: var(--r2) 30px var(--r2) var(--r3); } :root[data-vorm="c"] .index.zonder-balk ol { padding-right: var(--r3); } .index .letter { width: 32px; flex: none; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--s-tekst); } .index .regel { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; min-height: 43px; padding: 5px 0; text-align: left; color: inherit; } .index .naam { font-size: 15px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index .bron { font-size: 12px; line-height: 15px; color: var(--s-vaag); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index .bron .versie { color: var(--s-gedempt); } .index .bevat { font-size: 12px; line-height: 15px; color: var(--s-vaag); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index .bevat b { font-weight: 600; color: var(--s-rood); } .index .merken { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 var(--r3); line-height: 1; } .index .merken .oordeel { font-size: 10px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-vaag); padding: 0; display: inline; } /* Status per regel (punt 1): een verticaal streepje links. niets = niet getest · grijs + gedempte naam = slecht · zwart = goed · rood = fantastisch */ .index li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: var(--v-hoek-klein); background: transparent; } :root[data-vorm="c"] .index li::before { left: 4px; } .index li[data-status="goed"]::before { background: var(--s-lijn); } .index li[data-status="ster"]::before { background: var(--s-rood); } .index li[data-status="slecht"]::before { background: var(--s-vaag); } .index li[data-status="slecht"] .naam { color: var(--s-gedempt); } .index li.concept .naam { color: var(--s-gedempt); font-style: italic; } /* Een recept zonder vertaling blijft Nederlands terwijl de app Engels of Frans staat. Dat is geen taalfout maar een gat, en dat zeggen we met een gedempte naam in plaats van het stil te laten (ontwerp 20-09-2026, punt 4). */ .index .naam.gedempt { color: var(--s-gedempt); } .letterbalk { position: absolute; right: 0; top: 0; bottom: 0; width: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--s-lijn-zacht); background: var(--s-achtergrond); font-size: 9.5px; line-height: 1; font-weight: 600; letter-spacing: .04em; color: var(--s-vaag); user-select: none; touch-action: none; } .letterbalk span { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; max-height: 22px; } :root[data-vorm="c"] .letterbalk { border-left: 0; } .letterbalk .heeft { color: var(--s-tekst); font-weight: 700; } .letterbalk .nu { color: var(--s-rood); } .kopregel { display: flex; align-items: baseline; gap: var(--r2); padding: var(--r4) var(--r5) var(--r3); font-size: 12.5px; color: var(--s-gedempt); border-bottom: 1px solid var(--v-scheiding); white-space: nowrap; overflow: hidden; flex: none; } .kopregel b { font-weight: 700; color: var(--s-tekst); } .kopregel .rest { margin-left: auto; overflow: hidden; text-overflow: ellipsis; } .zoekhint { margin: 0; padding: var(--r3) var(--r5) var(--r4); font-size: 11.5px; color: var(--s-vaag); } /* ---------- generieke lijstregels (menu's, leden, instellingen) ---------- */ .rijen { list-style: none; margin: 0; padding: 0 var(--r5); } :root[data-vorm="c"] .rijen { padding: 0 var(--r4); } .rijen li { display: flex; align-items: center; gap: var(--r4); min-height: 48px; padding: var(--r2) 0; border-bottom: 1px solid var(--v-scheiding); background: var(--v-rij-achter); margin-bottom: var(--v-rij-gap); border-radius: var(--v-hoek); } :root[data-vorm="c"] .rijen li { padding: var(--r2) var(--r4); } .rijen li.los { border-bottom: 0; background: transparent; padding-top: var(--r3); } .rijen .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; color: inherit; } .rijen .naam { font-size: 15px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rijen .sub { font-size: 12px; line-height: 15px; color: var(--s-vaag); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rijen .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r3); color: var(--s-gedempt); font-size: 12px; white-space: nowrap; flex: none; } .rijen .rechts .segment { color: var(--s-tekst); } .rijen .rechts .segment button { min-width: 0; padding: 0 10px; } .rijen .pijl { color: var(--s-vaag); font-size: 12px; } .rijen li.archief .naam { color: var(--s-gedempt); } .rijen li.archief .sub { color: var(--s-vaag); } .rijen li.nieuw .naam { font-size: 13px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); } .rijen .rechts .hart svg { width: 14px; height: 14px; } .greep { width: 18px; color: var(--s-vaag); font-size: 14px; letter-spacing: -2px; flex: none; cursor: grab; touch-action: none; padding: var(--r3) 0; } .rijen li.sleep { opacity: .4; } .rijen li.doel { box-shadow: inset 0 2px 0 var(--s-rood); } /* ---------- onderkant: zoekbalk + tabbalk ---------- */ .onder { margin-top: auto; flex: none; border-top: var(--v-sectie) solid var(--s-lijn); background: var(--s-achtergrond); padding-bottom: env(safe-area-inset-bottom); } .zoekrij { display: flex; gap: var(--r3); padding: var(--r4) var(--r5); align-items: center; border-bottom: 1px solid var(--v-scheiding); } :root[data-vorm="c"] .zoekrij { padding: var(--r3) var(--r4); } .zoek { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--r3); height: 44px; padding: 0 var(--r4); border: 1px solid var(--v-veld-rand); background: var(--v-veld-achter); border-radius: var(--v-hoek); color: var(--s-gedempt); font-size: 13.5px; } .zoek svg.ico { width: 18px; height: 18px; color: var(--s-tekst); } .zoek input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0; font-size: 15px; color: var(--s-tekst); caret-color: var(--s-rood); } .zoek input::placeholder { color: var(--s-gedempt); font-size: 13.5px; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .zoek.actief { border-color: var(--s-lijn); color: var(--s-tekst); } .zoek .wis { margin-left: auto; color: var(--s-gedempt); font-size: 14px; padding: var(--r2); } .filter { height: 44px; padding: 0 10px 0 14px; gap: var(--r3); } .filter .tel { width: 20px; height: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0; background: var(--s-rood); color: var(--s-op-rood); border-radius: var(--v-vink-hoek); display: inline-flex; align-items: center; justify-content: center; } .tabbalk { display: flex; padding: var(--r3) var(--r2) var(--r4); background: var(--v-rij-achter); } .tabbalk button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-vaag); padding: var(--r1) 0; } :root[data-vorm="c"] .tabbalk button { font-size: 11.5px; } .tabbalk button.aan { color: var(--s-tekst); } .tabbalk svg.ico { width: 22px; height: 22px; } .tabbalk .badge { position: absolute; margin-left: 26px; margin-top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--s-rood); } /* ---------- velden en chips ---------- */ .veld { display: flex; align-items: center; gap: var(--r3); height: 44px; padding: 0 var(--r4); border: 1px solid var(--v-veld-rand); background: var(--v-veld-achter); border-radius: var(--v-hoek); font-size: 14px; min-width: 0; } .veld:focus-within { border-color: var(--s-lijn); } .veld input, .veld select, .veld textarea { flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none; padding: 0; font-size: 14px; color: var(--s-tekst); } .veld input::placeholder, .veld textarea::placeholder { color: var(--s-vaag); } .veld.klein { height: 36px; font-size: 13px; padding: 0 var(--r3); } .veld.klein input { font-size: 13px; } .veld.getal input { text-align: right; font-variant-numeric: tabular-nums; } .veld.eenheid input { color: var(--s-gedempt); } .veld .lbl { font-size: 11px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); flex: none; } .veld.tekstvak { height: auto; min-height: 44px; padding: var(--r3) var(--r4); align-items: flex-start; } .veld.tekstvak textarea { resize: none; line-height: 1.4; min-height: 1.4em; font-family: inherit; } .veld.mono input { font-family: var(--font-mono); font-size: 12px; } .veldlabel { font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); margin: var(--r5) 0 var(--r2); } .veldlabel.rij { display: flex; align-items: center; } .veldlabel .rechts { margin-left: auto; } .chips { display: flex; flex-wrap: wrap; gap: var(--r2); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--v-knop-rand); background: var(--v-knop-achter); border-radius: var(--v-hoek); white-space: nowrap; color: var(--s-tekst); } .chip.aan { background: var(--s-lijn); color: var(--s-achtergrond); border-color: var(--s-lijn); } .chip .x { font-size: 11px; opacity: .8; } .chip.aan .x { color: var(--s-rood); opacity: 1; } :root[data-kleur="kleurloos"] .chip.aan .x { color: inherit; } .chip .n { font-size: 11px; font-weight: 600; opacity: .65; font-variant-numeric: tabular-nums; } .chip .ster { font-size: 12px; } .chip.aan .ster { color: var(--s-achtergrond); } .chip .hart svg { width: 13px; height: 13px; } /* Keuring van een boek (blok C, 20-09-2026): vijf streepjes, familie van het status-streepje links van een receptregel. Bewust géén sterren — ★ betekent in deze app al "fantastisch recept". Een vol streepje is de gewone lijn, niet rood: rood blijft voorbehouden aan de primaire actie, de lopende timer en ★. */ .keuring { display: inline-flex; align-items: center; gap: 2px; } .keuring .streep { display: inline-block; width: 3px; height: 11px; border-radius: var(--v-hoek-klein); background: var(--s-lijn-zacht); padding: 0; border: 0; } .keuring .streep.vol { background: var(--s-lijn); } .keuring.kiesbaar { gap: 4px; } .keuring.kiesbaar .streep { width: 8px; height: 22px; cursor: pointer; } .keuring .stemmen { margin-left: 4px; font-size: 11px; font-weight: 600; opacity: .65; font-variant-numeric: tabular-nums; } .chip.aan .keuring .streep { background: var(--s-achtergrond); opacity: .45; } .chip.aan .keuring .streep.vol { opacity: 1; } /* Keuring én afgeleid cijfer naast elkaar op één chip. */ .merken-chip { display: inline-flex; align-items: center; gap: 6px; } /* "Octaphilosophy staat uit in je account." — alleen te zien als je hier via een link of een gedeeld menu binnenkwam. */ .uitsluitregel { font-size: 12px; color: var(--s-gedempt); margin: 2px 0 0; } .uitsluitregel button { text-decoration: var(--v-onderstreep); color: inherit; font: inherit; } .uitsluitvak { padding: 0 var(--r5); } .uitsluitvak .veldlabel:first-of-type { margin-top: 0; } .uitsluitvak .hint { padding-left: 0; padding-right: 0; } .chip.aan .hart { color: var(--s-achtergrond); } .segment { display: inline-flex; border: 1px solid var(--v-knop-rand); background: var(--v-knop-achter); height: 30px; border-radius: var(--v-hoek); padding: var(--v-tabs-pad); } .segment button { min-width: 46px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; border-left: 1px solid var(--v-scheiding); border-radius: var(--v-hoek); color: var(--s-tekst); } .segment button:first-child { border-left: 0; } .segment button.aan { background: var(--s-lijn); color: var(--s-achtergrond); font-weight: 700; } .vrij { height: 30px; width: 64px; border: 1px solid var(--v-veld-rand); background: var(--v-veld-achter); border-radius: var(--v-hoek); display: inline-flex; align-items: center; padding: 0 8px; font-size: 13px; } .vrij input { width: 100%; border: 0; background: none; outline: none; padding: 0; font-variant-numeric: tabular-nums; text-align: center; } .vrij input::placeholder { font-size: 11px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-vaag); } .schakelaar { width: 40px; height: 22px; border: 1px solid var(--s-lijn); border-radius: var(--v-schakelaar-hoek); position: relative; flex: none; background: transparent; padding: 0; } .schakelaar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--s-lijn); border-radius: var(--v-vink-hoek); transition: left .12s; } .schakelaar[aria-checked="true"] { background: var(--s-lijn); } .schakelaar[aria-checked="true"]::after { left: 21px; background: var(--s-achtergrond); } .vink { width: 14px; height: 14px; border: 1px solid var(--s-lijn-zacht); border-radius: var(--v-vink-hoek); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--s-achtergrond); } .vink.aan { border-color: var(--s-lijn); background: var(--s-lijn); } :root[data-vorm="c"] .vink { width: 18px; height: 18px; border-color: var(--s-vaag); } /* ---------- recept ---------- */ .rkop { display: flex; align-items: center; gap: var(--r4); padding: var(--r3) var(--r5); border-bottom: var(--v-sectie) solid var(--s-lijn); flex: none; min-height: 54px; } .rkop .talen { margin-left: auto; display: flex; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--s-vaag); } .rkop .talen button { color: inherit; padding: var(--r2) 2px; } .rkop .talen button.aan { color: var(--s-tekst); font-weight: 700; } .rkop .talen button.leeg { text-decoration: underline dotted var(--s-vaag); text-underline-offset: 3px; } .rkop .merken { display: flex; align-items: center; gap: var(--r3); } .rkop .merken button { display: inline-flex; padding: var(--r2); } .rkop .merken .hart svg { width: 18px; height: 18px; } .rkop .merken .ster { font-size: 19px; } .titelblok { padding: var(--r5) var(--r5) 0; } h2 { font: 700 30px/1.05 var(--font-sans); margin: 0; letter-spacing: -.03em; } h3 { font: 700 20px/1.15 var(--font-sans); margin: 0; letter-spacing: -.02em; } .orig { margin: var(--r1) 0 0; font-size: 14px; color: var(--s-gedempt); font-style: italic; } .bronregel { margin: var(--r3) 0 0; font-size: 13px; color: var(--s-gedempt); } .bronregel .cijfer { color: var(--s-tekst); font-weight: 600; } .metaregel { margin: 2px 0 0; font-size: 12px; color: var(--s-vaag); } .vertaalregel { margin: var(--r3) 0 0; font-size: 12px; color: var(--s-gedempt); display: flex; align-items: center; gap: var(--r2); } .vertaalregel svg.ico { width: 15px; height: 15px; } .vertaalregel button { color: var(--s-tekst); font-weight: 600; } .oordeel { display: flex; align-items: center; gap: var(--r2); padding: var(--r4) var(--r5) 0; } .oordeel .anderen { margin-left: auto; font-size: 12px; color: var(--s-gedempt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .oordeel .anderen .ster { font-size: 12px; } .versies { display: flex; flex-wrap: wrap; gap: var(--r2); padding: var(--r3) var(--r5) var(--r4); } .tabs { display: flex; margin: 0; border-top: var(--v-sectie) solid var(--s-lijn); border-bottom: 1px solid var(--v-scheiding); background: var(--v-rij-achter); padding: var(--v-tabs-pad); flex: none; } :root[data-vorm="c"] .tabs { margin: 0 var(--r4); border-radius: var(--v-hoek); } .tabs button { flex: 1; text-align: center; padding: 10px 0; font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-vaag); border-left: 1px solid var(--v-scheiding); border-radius: var(--v-hoek); } :root[data-vorm="c"] .tabs button { font-size: 13px; color: var(--s-gedempt); } .tabs button:first-child { border-left: 0; } .tabs button.aan { color: var(--s-achtergrond); background: var(--s-lijn); } .schaal { display: flex; align-items: center; gap: var(--r3); padding: var(--r4) var(--r5); border-bottom: 1px solid var(--v-scheiding); } .schaal .nu { font-size: 12px; color: var(--s-rood); font-weight: 600; } .schaal .bewaar { margin-left: auto; } .ingr { list-style: none; margin: 0 var(--r5); padding: 0; } :root[data-vorm="c"] .ingr { margin: 0 var(--r4); } .ingr li { display: flex; align-items: center; gap: var(--r4); min-height: 41px; padding: var(--r2) 0; border-bottom: 1px solid var(--v-scheiding); background: var(--v-rij-achter); margin-bottom: var(--v-rij-gap); border-radius: var(--v-hoek); font-size: 14.5px; cursor: pointer; } :root[data-vorm="c"] .ingr li { padding: var(--r2) var(--r4); } .hoev { width: 68px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .hoev u, .hoev button { text-decoration: var(--v-onderstreep); text-decoration-color: var(--s-lijn); text-decoration-thickness: 1px; text-underline-offset: 3px; border: 1px solid var(--v-hoev-rand); background: var(--v-hoev-achter); padding: var(--v-hoev-pad); border-radius: var(--v-hoek-klein); font: inherit; color: inherit; } .hoev.smaak { font-weight: 400; color: var(--s-gedempt); font-size: 12.5px; } .hoev input { width: 100%; text-align: right; border: 1px solid var(--s-rood); background: var(--s-achtergrond); border-radius: var(--v-hoek-klein); padding: 1px 4px; font-size: 14px; outline: none; font-variant-numeric: tabular-nums; } .ingr li.af .naam { color: var(--s-vaag); text-decoration: line-through; text-decoration-color: var(--s-vaag); } .ingr li.af .hoev { color: var(--s-vaag); } .ingr .naam { flex: 1; min-width: 0; } .ingr .naam small { color: var(--s-vaag); font-size: 12.5px; } .ingr .naam .teken { color: var(--s-gedempt); font-size: 12px; margin-left: 4px; } .ingr li.deel { flex-wrap: wrap; cursor: default; } .ingr .deelinfo { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--s-gedempt); padding: 0 0 var(--r2) 82px; } :root[data-vorm="c"] .ingr .deelinfo { padding-left: 86px; } .ingr .deelinfo b { color: var(--s-tekst); font-weight: 600; } .ingr .deelinfo button { color: var(--s-tekst); font-weight: 600; font-size: 12px; } .ingr .deelrij { flex-basis: 100%; display: flex; align-items: center; gap: var(--r4); min-height: 26px; font-size: 13px; color: var(--s-vaag); padding-left: 14px; } .ingr .deelrij .hoev { font-weight: 400; color: var(--s-vaag); } .ingr .deelrij.meer { color: var(--s-gedempt); } .ingr .deelrij.meer button { color: var(--s-tekst); font-weight: 600; font-size: 12px; } /* Onderdelen van een gerecht ("Voor het houtskooldeeg", "Serveren"): een kopje boven elk blok ingrediënten of stappen. Het eerste blok sluit aan op wat erboven staat, de volgende krijgen lucht. */ .onderdeel > .onderdeelkop { padding-top: var(--r2); } /* In de ingrediëntenlade van de kookstand staat het kopje als rij in de lijst. */ .ingr li.onderdeelrij { display: block; min-height: 0; padding: 0; border: none; background: none; cursor: default; margin-bottom: 0; } /* In de editor is het kopje een eigen rij met een naamveld ervoor. */ .bewerk li.onderdeelrij, .stapbewerk li.onderdeelrij { display: flex; align-items: center; gap: var(--r3); padding: var(--r4) 0 var(--r2); border: none; } .bewerk li.onderdeelrij .veld, .stapbewerk li.onderdeelrij .veld { flex: 1; } .bewerk li.onderdeelrij input, .stapbewerk li.onderdeelrij input { font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); } .ingr li.onderdeelrij .onderdeelkop { padding: var(--r4) 0 var(--r2); } .onderdeel + .onderdeel > .onderdeelkop { padding-top: var(--r5); } .stappenlijst { list-style: none; margin: 0; padding: 0 var(--r5); } .stappenlijst li { display: grid; grid-template-columns: 26px 1fr; column-gap: var(--r3); padding: var(--r4) 0; border-bottom: 1px solid var(--v-scheiding); font-size: 14.5px; line-height: 1.45; } .stappenlijst .nr { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--s-gedempt); padding-top: 3px; } .stappenlijst b { font-weight: 700; } .stappenlijst .tijd { text-decoration: underline; text-decoration-color: var(--s-rood); text-underline-offset: 3px; } .stappenlijst .staptimer { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--v-knop-rand); background: var(--v-knop-achter); border-radius: var(--v-hoek); font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); vertical-align: 2px; color: var(--s-tekst); } .stappenlijst .stapnotitie { grid-column: 2; margin-top: var(--r2); padding: var(--r2) var(--r3); border-left: 2px solid var(--s-lijn); background: var(--v-rij-achter); font-size: 12.5px; color: var(--s-gedempt); border-radius: var(--v-hoek-klein); } .stappenlijst .stapnotitie b { color: var(--s-tekst); font-weight: 600; } .stappenlijst .stapnotitie.eigen { border-left-color: var(--s-rood); } .stappenlijst .notitieknop { grid-column: 2; margin-top: var(--r2); font-size: 11px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-vaag); text-align: left; } .stappenlijst .notitieveld { grid-column: 2; margin-top: var(--r2); } .stappenlijst li.onvertaald .txt { color: var(--s-gedempt); } .stappenlijst .vertaallabel { grid-column: 2; margin-top: var(--r2); font-size: 11px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-vaag); } .stappenlijst .vertaallabel button { color: var(--s-tekst); font-weight: 600; } .notitie { margin: var(--r4) var(--r5) 0; padding: var(--r3) var(--r4); border-left: 2px solid var(--s-lijn); background: var(--v-rij-achter); font-size: 13.5px; } .notitie .lbl { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); margin-bottom: 2px; } .notitie p { margin: 0 0 var(--r2); } .notitie p:last-child { margin-bottom: 0; } .actie { margin-top: auto; flex: none; border-top: var(--v-sectie) solid var(--s-lijn); padding: var(--r4) var(--r5); display: flex; flex-direction: column; gap: var(--r3); background: var(--s-achtergrond); padding-bottom: calc(var(--r4) + env(safe-area-inset-bottom)); } :root[data-vorm="c"] .actie { padding-top: var(--r3); } .actie .rij { display: flex; gap: var(--r3); } .actie .rij .knop { flex: 1; height: 32px; } .actie .kook { height: 48px; font-size: 12px; } :root[data-vorm="c"] .actie .kook { font-size: 14px; } .actie .wake { text-align: center; font-size: 10.5px; letter-spacing: .04em; color: var(--s-vaag); } .bvoet { margin-top: auto; flex: none; border-top: var(--v-sectie) solid var(--s-lijn); padding: var(--r4) var(--r3); display: flex; align-items: center; justify-content: space-between; background: var(--s-achtergrond); } /* Notities-tab */ .nkop { display: flex; align-items: center; gap: var(--r3); padding: var(--r4) var(--r5) var(--r1); } .nkop .kopje { padding: 0; } .nkop .rechts { margin-left: auto; font-size: 11px; color: var(--s-vaag); } .tekstveld { margin: 0 var(--r5); padding: var(--r2) var(--r4); min-height: 46px; border: 1px solid var(--v-veld-rand); background: var(--v-veld-achter); border-radius: var(--v-hoek); font-size: 14px; line-height: 1.45; display: block; width: calc(100% - 2 * var(--r5)); outline: none; resize: vertical; font-family: inherit; } .tekstveld:focus { border-color: var(--s-lijn); } :root[data-vorm="c"] .tekstveld { margin: 0 var(--r4); width: calc(100% - 2 * var(--r4)); } .nlijst { list-style: none; margin: 0; padding: 0 var(--r5); } :root[data-vorm="c"] .nlijst { padding: 0 var(--r4); } .nlijst li { display: flex; align-items: center; gap: var(--r3); min-height: 32px; padding: 2px 0; border-bottom: 1px solid var(--v-scheiding); background: var(--v-rij-achter); margin-bottom: var(--v-rij-gap); border-radius: var(--v-hoek); font-size: 14px; } :root[data-vorm="c"] .nlijst li { padding: 2px var(--r4); } .nlijst .personen { display: flex; flex-wrap: wrap; gap: var(--r3) var(--r5); flex: 1; } .nlijst .personen span { white-space: nowrap; } .nlijst .personen small { font-size: 12px; color: var(--s-gedempt); margin-left: 4px; } .nlijst .stapnr { width: 52px; flex: none; font-size: 11px; font-weight: 700; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); } .nlijst .tekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .nlijst .rechts { margin-left: auto; font-size: 12px; color: var(--s-gedempt); white-space: nowrap; } .nlijst .pijl { color: var(--s-vaag); font-size: 12px; } /* ---------- kookstand ---------- */ .kkop { display: flex; align-items: center; gap: var(--r3); padding: var(--r3) var(--r5); flex: none; border-bottom: var(--v-sectie) solid var(--s-lijn); min-height: 54px; } .kkop .waar { flex: 1; text-align: center; font-size: 12px; color: var(--s-gedempt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .kkop .waar b { color: var(--s-tekst); font-weight: 700; } .kkop .chip { font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: .02em; font-weight: 700; height: 30px; } .kkop .chip.klaar { animation: knipper 1s steps(2) infinite; } @keyframes knipper { to { opacity: .35; } } .stappen { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; padding: 0 var(--r6); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .stappen .vulling { height: 38vh; scroll-snap-align: none; } .st { display: grid; grid-template-columns: 30px 1fr; column-gap: var(--r3); align-items: baseline; scroll-snap-align: center; scroll-snap-stop: always; } .st p { margin: 0; } .st.vaag { color: var(--s-vaag); font-size: 13px; line-height: 1.4; margin: var(--r3) 0; padding: var(--r2) 0; } .st.vaag .nr { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--s-vaag); text-align: right; padding-right: 6px; } .st.nu { margin: var(--r5) 0; padding: var(--r5) 0; border-top: var(--v-sectie) solid var(--s-lijn); border-bottom: var(--v-sectie) solid var(--s-lijn); } :root[data-vorm="c"] .st.nu { background: var(--v-rij-achter); padding: var(--r5) var(--r4); margin: var(--r5) calc(-1 * var(--r3)); border-radius: var(--v-hoek-kaart); } .st.nu .nr { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--s-tekst); text-align: right; padding-right: 6px; } /* --kookmaat komt uit de instelling (punt 9): 1 · 1,25 · 1,5. */ .stappen { --kookmaat: 1; } .st.nu p { font-size: calc(25px * var(--kookmaat)); line-height: 1.25; letter-spacing: -.02em; font-weight: 400; } .st.vaag p { font-size: calc(13px * var(--kookmaat)); } .kkop .knop.maat { min-width: 34px; padding: 0 6px; } .kkop .knop.maat .maatteken { font-size: 15px; font-weight: 700; letter-spacing: -.02em; } .kkop .knop.maat.aan { background: var(--s-lijn); color: var(--s-achtergrond); } .st.nu p b { font-weight: 700; } .st .stapnotitie { grid-column: 2; margin-top: var(--r3); padding: var(--r2) var(--r3); border-left: 2px solid var(--s-lijn); background: var(--v-rij-achter); font-size: 13px; color: var(--s-gedempt); border-radius: var(--v-hoek-klein); } .st .stapnotitie b { color: var(--s-tekst); } .st .timerstart { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--r2); margin-top: var(--r4); } .timer { grid-column: 2; display: flex; align-items: center; gap: var(--r5); margin-top: var(--r5); } .ring { position: relative; width: 124px; height: 124px; flex: none; display: block; padding: 0; } .ring svg { width: 100%; height: 100%; display: block; } .ring .spoor { fill: none; stroke: var(--s-lijn-zacht); stroke-width: 8; } .ring .voortgang { fill: none; stroke: var(--s-rood); stroke-width: 8; stroke-linecap: var(--v-linecap); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .5s linear; } .ring .tijd { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring .tijd b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .ring .tijd small { font-size: 10px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); margin-top: 5px; white-space: nowrap; } .ring.groot { width: 240px; height: 240px; } .ring.groot .spoor, .ring.groot .voortgang { stroke-width: 10; } .ring.groot .tijd b { font-size: 52px; } .ring.groot .tijd small { font-size: 12px; margin-top: 8px; } .ring.klaar .voortgang { stroke: var(--s-rood); animation: knipper 1s steps(2) infinite; } .timerknoppen { display: flex; flex-direction: column; gap: var(--r2); } .timerknoppen .knop { width: 60px; } :root[data-vorm="c"] .st.nu .knop:not(.zwart):not(.rood), :root[data-vorm="c"] .timerknoppen .knop:not(.zwart):not(.rood) { background: var(--s-achtergrond); } .kvoet { margin-top: auto; flex: none; border-top: var(--v-sectie) solid var(--s-lijn); padding: var(--r4) var(--r5); display: flex; align-items: center; gap: var(--r3); background: var(--s-achtergrond); padding-bottom: calc(var(--r4) + env(safe-area-inset-bottom)); } .kvoet .ingrregel { flex: 1; font-size: 12px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); text-align: left; color: var(--s-tekst); } .kvoet .ingrregel small { font-weight: 400; color: var(--s-gedempt); letter-spacing: 0; text-transform: none; } .mic { width: 44px; height: 44px; padding: 0; } .mic.aan { background: var(--s-rood); color: var(--s-op-rood); border-color: var(--s-rood); } .luistert { flex: none; display: flex; align-items: center; gap: var(--r3); padding: var(--r3) var(--r5); border-top: 1px solid var(--s-lijn-zacht); font-size: 13px; color: var(--s-gedempt); background: var(--v-rij-achter); } .luistert b { color: var(--s-tekst); font-weight: 700; } .luistert .golf { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; } .luistert .golf i { width: 2px; background: var(--s-rood); border-radius: var(--v-hoek-klein); animation: golf .9s ease-in-out infinite alternate; } .luistert .golf i:nth-child(1) { height: 6px; } .luistert .golf i:nth-child(2) { height: 12px; animation-delay: .15s; } .luistert .golf i:nth-child(3) { height: 8px; animation-delay: .3s; } .luistert .golf i:nth-child(4) { height: 14px; animation-delay: .45s; } .luistert .golf i:nth-child(5) { height: 5px; animation-delay: .6s; } @keyframes golf { to { transform: scaleY(.4); } } .timervlak { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--r5); padding: var(--r5) var(--r6); overflow-y: auto; } .timervlak .waarvoor { font-size: 12px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); } .tgroot { display: flex; gap: var(--r3); margin-top: var(--r2); flex-wrap: wrap; justify-content: center; } .tgroot .knop { width: 78px; height: 56px; font-size: 19px; font-weight: 500; letter-spacing: 0; text-transform: none; } .tgroot .knop.zwart { font-size: 15px; } :root[data-vorm="c"] .tgroot .knop { background: var(--s-achtergrond); border-color: var(--s-lijn-zacht); } :root[data-vorm="c"] .tgroot .knop.zwart { background: var(--s-lijn); color: var(--s-achtergrond); border-color: var(--s-lijn); } .teigen { display: flex; align-items: center; gap: var(--r3); } .teigen .veld { width: 110px; height: 44px; } .teigen .veld input { font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; } .timers { flex: none; border-top: var(--v-sectie) solid var(--s-lijn); padding-bottom: var(--r3); } .timers li:last-child { border-bottom: 0; } .timers .tt { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; } .timers .kopje { min-height: 0; padding-left: 0; padding-right: 0; border: 0; } :root[data-vorm="c"] .timers .kopje { padding-left: var(--r4); } /* ---------- lade (bottom sheet) en dimlaag ---------- */ .dim { position: absolute; inset: 0; background: var(--s-dim); z-index: 30; } .lade { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%; z-index: 31; background: var(--s-achtergrond); color: var(--s-tekst); border-top: var(--v-sectie) solid var(--s-lijn); border-radius: var(--v-hoek-kaart) var(--v-hoek-kaart) 0 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); animation: omhoog .18s ease-out; } @keyframes omhoog { from { transform: translateY(24px); opacity: .6; } } :root[data-vorm="c"] .lade { box-shadow: var(--s-schaduw); } .lade.hoog { height: 82%; } .lade.half { height: 60%; max-height: 60%; } .lade .greepje { width: 36px; height: 3px; background: var(--s-lijn-zacht); margin: var(--r3) auto 0; border-radius: 2px; flex: none; } .lade .ladekop { display: flex; align-items: center; gap: var(--r3); padding: var(--r4) var(--r5); border-bottom: 1px solid var(--v-scheiding); flex: none; } .lade .ladekop .titel { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .lade .ladekop .actief { font-size: 12px; color: var(--s-gedempt); margin-left: var(--r1); } .lade .ladekop .rechts { margin-left: auto; font-size: 12px; color: var(--s-gedempt); } .lade .ladekop .rechts b { color: var(--s-tekst); font-weight: 600; } .lade .inhoud { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--r5); -webkit-overflow-scrolling: touch; } .lade .inhoud .veldlabel { margin: var(--r5) 0 var(--r3); } .lade .inhoud .chips { gap: var(--r3); } .lade .inhoud .chips:last-child { margin-bottom: var(--r5); } .lade .inhoud .rijen { padding: 0; } .lade .inhoud .rijen li:last-child { border-bottom: 0; } .lade .inhoud .ingr { margin: 0; } .lade .inhoud p { margin: var(--r4) 0 var(--r3); font-size: 13.5px; color: var(--s-gedempt); } .lade .inhoud .veld { margin-bottom: var(--r4); font-variant-numeric: tabular-nums; } .lade .ladevoet { padding: var(--r4) var(--r5) var(--r5); border-top: 1px solid var(--v-scheiding); flex: none; display: flex; align-items: center; gap: var(--r3); } .lade .ladevoet .hint { flex: 1; font-size: 12px; color: var(--s-vaag); padding: 0; } .lade .ladevoet .knop.breed { flex: 1; } .lade .zoekveld { margin: var(--r4) 0 0; } /* ---------- toegang (inloggen, uitnodiging) ---------- */ .toegang { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--r7) var(--r7); gap: var(--r3); overflow-y: auto; } .toegang .merkgroot { width: 56px; height: 56px; color: var(--s-tekst); margin-bottom: var(--r4); } .toegang .woordmerk { font-size: 44px; line-height: 1; margin-bottom: var(--r6); } .toegang h3 { margin-bottom: var(--r2); } .toegang .intro { margin: 0 0 var(--r5); font-size: 14px; color: var(--s-gedempt); } .toegang .veld { height: 48px; } .toegang .veld .lbl { width: 96px; } .toegang .knop.groot { margin-top: var(--r4); } .toegang .hint { font-size: 12px; color: var(--s-vaag); text-align: center; margin: var(--r3) 0 0; padding: 0; } .toegang .afzender { font-size: 11px; font-weight: 600; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); margin-bottom: var(--r3); } .toegang .fout { padding: 0; } .voet { margin-top: auto; flex: none; padding: var(--r4) var(--r5); border-top: 1px solid var(--v-scheiding); font-size: 11px; color: var(--s-vaag); display: flex; gap: var(--r3); align-items: center; padding-bottom: calc(var(--r4) + env(safe-area-inset-bottom)); } .voet button { color: var(--s-tekst); font-weight: 600; font-size: 11px; } .melding { flex: none; display: flex; align-items: center; gap: var(--r3); padding: var(--r2) var(--r5); background: var(--s-vlak); color: var(--s-tekst); font-size: 12.5px; line-height: 1.3; border-bottom: 1px solid var(--v-scheiding); } .melding b { font-weight: 600; } .melding svg.ico { width: 16px; height: 16px; } .melding .tel { margin-left: auto; color: var(--s-gedempt); white-space: nowrap; } .melding button { color: var(--s-tekst); font-weight: 600; font-size: 12px; } .toast { position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%); z-index: 40; background: var(--s-lijn); color: var(--s-achtergrond); border-radius: var(--v-hoek); padding: var(--r3) var(--r5); font-size: 12.5px; font-weight: 500; max-width: 90vw; } /* Met een weg-terug (punt 11) staat de knop naast de tekst, in dezelfde balk. */ .toast.metknop { display: flex; align-items: center; gap: var(--r4); } .toast.metknop .knop.tekst { color: var(--s-achtergrond); text-decoration: underline; font-size: 12.5px; padding: 0; height: auto; white-space: nowrap; } /* ---------- bewerken ---------- */ .bewerk { list-style: none; margin: 0; padding: var(--r4) var(--r5) 0; display: flex; flex-direction: column; gap: var(--r2); } :root[data-vorm="c"] .bewerk { padding: var(--r4) var(--r4) 0; } .bewerk li { display: grid; grid-template-columns: 62px 56px 1fr 26px; column-gap: var(--r2); align-items: center; } .bewerk .veld { padding: 0 var(--r3); min-width: 0; } .bewerk li.gewijzigd .veld.getal { font-weight: 700; border-color: var(--s-lijn); } .bewerk .x { width: 26px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--s-vaag); font-size: 13px; } .bewerk .wijzig { grid-column: 1 / -1; font-size: 11px; letter-spacing: var(--v-spatie); text-transform: var(--v-kap); color: var(--s-gedempt); padding: 1px 0 var(--r1) 2px; } .bewerk .wijzig b { font-weight: 700; color: var(--s-tekst); } .bewerk .koppel { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--r2); font-size: 11.5px; color: var(--s-gedempt); padding: 0 0 var(--r1) 2px; } .bewerk .koppel input { flex: 1; min-width: 0; border: 0; border-bottom: 1px dotted var(--s-vaag); background: none; outline: none; padding: 2px 0; font-size: 12px; } .toevoeg { display: flex; align-items: center; gap: var(--r3); padding: var(--r3) var(--r5) 0; flex-wrap: wrap; } :root[data-vorm="c"] .toevoeg { padding: var(--r3) var(--r4) 0; } .form { padding: 0 var(--r5) var(--r4); } :root[data-vorm="c"] .form { padding: 0 var(--r4) var(--r4); } .form .bewerk { padding: 0; } .form .toevoeg { padding: var(--r3) 0 0; } .form .twee { display: flex; gap: var(--r5); align-items: flex-start; } .form .twee > div { flex: 1; min-width: 0; } .form .twee > .vast { flex: none; } .form .twee .segment { height: 44px; } .stapbewerk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r2); } .stapbewerk li { display: grid; grid-template-columns: 26px 1fr 26px; column-gap: var(--r2); align-items: start; } .stapbewerk .nr { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--s-gedempt); padding-top: 13px; } .stapbewerk .x { width: 26px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--s-vaag); font-size: 13px; } .upload { border: 1px dashed var(--s-vaag); border-radius: var(--v-hoek); padding: var(--r5); text-align: center; color: var(--s-gedempt); font-size: 13px; display: flex; flex-direction: column; gap: var(--r3); align-items: center; } .upload input { display: none; } .upload .bestanden { display: flex; flex-wrap: wrap; gap: var(--r2); justify-content: center; } .upload .prent { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--s-lijn-zacht); border-radius: var(--v-hoek-klein); } .upload .pdf { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--s-lijn-zacht); border-radius: var(--v-hoek-klein); font-size: 11px; font-weight: 700; } /* ---------- mijn / instellingen ---------- */ .keuze { flex: none; padding: var(--r4) var(--r5) var(--r3); border-bottom: 1px solid var(--v-scheiding); } .onder .rijen li:last-child { border-bottom: 1px solid var(--v-scheiding); } .bronnen { padding: 0 var(--r5) var(--r4); } :root[data-vorm="c"] .bronnen { padding: 0 var(--r4) var(--r4); } .uitloggen { padding: var(--r5) var(--r4); border-top: 1px solid var(--v-scheiding); margin-top: var(--r3); } .stip { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--s-vaag); } .stip.aan { background: var(--s-tekst); } .stip.bezig { background: var(--s-rood); animation: knipper 1s steps(2) infinite; } .stip.fout { background: var(--s-rood); } .link code { display: block; word-break: break-all; font-family: var(--font-mono); font-size: 12px; } /* ---------- toetsenbord open: tabbalk weg ---------- */ .zoekt .tabbalk { display: none; } /* ---------- boodschappenlijst (punt 4) ---------- */ .rijen.boodschappen li .vink { margin-right: var(--r3); } .rijen.boodschappen li.af .naam { text-decoration: line-through; color: var(--s-vaag); } .rijen.boodschappen li.af .sub { color: var(--s-vaag); } .rijen.boodschappen li > .tekst { display: flex; flex-direction: column; min-width: 0; } .rijen.boodschappen button.tekst { display: flex; align-items: flex-start; gap: 0; width: 100%; text-align: left; } /* ---------- rondleiding (punt 15) ---------- */ .rondleiding { padding: var(--r4) 0 var(--r5); min-height: 96px; } .rondleiding h3 { margin: 0 0 var(--r3); font-size: 17px; letter-spacing: -.01em; } .rondleiding p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--s-gedempt); } .stippen { display: flex; gap: 6px; justify-content: center; padding-bottom: var(--r4); } .stippen span { width: 6px; height: 6px; border-radius: 50%; background: var(--s-lijn-zacht); } .stippen span.aan { background: var(--s-rood); } /* ---------- sorteren, in huis, zonder-filter (punten 7, 8, 10) ---------- */ .index li.boekkop { display: block; padding: 10px 16px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--s-gedempt); background: var(--s-achtergrond); border-bottom: var(--v-lijn) solid var(--s-lijn-zacht); } .index .mist { font-size: 11px; color: var(--s-gedempt); white-space: nowrap; padding-left: 6px; } .index .mist.alles { color: var(--s-rood); font-weight: 600; } /* ---------- laatst bekeken (punt 2) ---------- */ .recent { padding: 10px 16px 6px; border-bottom: var(--v-lijn) solid var(--s-lijn); } .recentkop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .recentkop .knop.tekst { font-size: 11px; color: var(--s-vaag); padding: 0; height: auto; } .recentrij { display: flex; gap: 8px; overflow-x: auto; margin-top: 6px; padding-bottom: 2px; scrollbar-width: none; } .recentrij::-webkit-scrollbar { display: none; } .recentrij li { flex: 0 0 auto; max-width: 62%; } .recentrij button { display: block; text-align: left; width: 100%; padding: 6px 10px; border: var(--v-lijn) solid var(--s-lijn); border-radius: var(--v-rond); background: var(--s-achtergrond); } .recentrij .naam { display: block; font-size: 13px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recentrij .bron { display: block; font-size: 11px; color: var(--s-vaag); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- printen (punt 14) ---------- */ .printblad { display: none; } @media print { .kop, .rkop, .onder, .actie, .kvoet, .tabbalk, .oordeel, .versies, .tabs, .schaal, .letterbalk, .dim, .lade, .toast, .melding { display: none !important; } .rol { overflow: visible; } #app { max-width: none; border: 0; } /* Met een printblad (de knop op het recept) drukken we dát af en niet het open tabblad: ingrediënten én bereiding samen, met de bron erbij. */ body.printen #app { display: none !important; } body.printen .printblad { display: block; color: #000; background: #fff; font-size: 10.5pt; line-height: 1.35; } .printblad h1 { font-size: 20pt; margin: 0 0 2mm; letter-spacing: -.02em; } .printblad h2 { font-size: 11pt; margin: 4mm 0 1.5mm; text-transform: uppercase; letter-spacing: .08em; } .printblad .bron { margin: 0 0 1mm; font-size: 9.5pt; color: #444; } .printblad .kolommen { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8mm; margin-top: 3mm; } .printblad ul, .printblad ol { margin: 0; padding-left: 5mm; } .printblad li { margin-bottom: 1.2mm; break-inside: avoid; } .printblad .voetregel { margin-top: 6mm; font-size: 8pt; color: #666; } @page { margin: 14mm; } }