/** * Blynckr ATS — Kandidaat-workspace v1 (achter feature flag candidate_action_workspace) * * Scoped op .cdv2-root/.aac-side: geen wijziging aan de globale --shadow-*- * tokens in style.css (die blijven op `none` staan voor de rest van de app -- * besloten, zie docs/ontwerp/design-spec-kandidaat-workspace.md §13.1). Deze * componenten krijgen hun eigen --ws-shadow-*-variant met de originele * REDESIGN.md-waarden, alleen geldig binnen deze scope. * * Twee onafhankelijke breekpuntensets bestaan hier naast elkaar (spec §10.2): * de bestaande app-brede 768px-sidebar-collapse (ongewijzigd, static/style.css) * en de eigen 1100/900/700px-set van dit scherm hieronder. */ /* * --sol-w moet zichtbaar zijn voor zowel .cdv2-root (kandidaatpagina) als * #wsShellRoot/.aac-side (gedeelde shell) -- twee onafhankelijke subtrees * onder , geen ouder/kind-relatie. Een custom property die alleen op * .cdv2-root staat, erft niet naar #wsShellRoot. Daarom hier op :root, * exact zoals de geverifieerde handoff-CSS (kandidaten.css:240-245) het zelf * ook doet -- dit is geen van de --shadow-*-tokens waar §13.1 een scoped * variant voor voorschrijft, dus geen conflict met dat besluit. */ :root { --sol-w: min(540px, 94vw); /* * Scoped animatie-tokens: de gedeelde --dur-slow/--ease-out uit style.css * zijn 400ms/cubic-bezier(0.2,0.8,0.2,1) (voor andere onderdelen), niet de * 350ms/cubic-bezier(0.22,0.68,0,1) die deze spec voorschrijft voor de * paneel-inschuifanimatie (§4.4/§12) -- geverifieerd via de visuele audit * (2026-08-03) als concreet afwijkende computed style. Eigen tokens i.p.v. * de gedeelde tokens wijzigen, want die gelden ook elders in de app. */ --ws-dur-slow: 350ms; --ws-ease-out: cubic-bezier(0.22, 0.68, 0, 1); } @media (max-width: 1100px) { :root { --sol-w: min(540px, 52vw); } } @media (max-width: 900px) { :root { --sol-w: min(480px, 94vw); } } @media (max-width: 700px) { :root { --sol-w: 100vw; } } .cdv2-root { --ws-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03); --ws-shadow-md: 0 3px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03); --ws-shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); --ws-shadow-xl: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow: hidden; display: none; } .cdv2-root.open { display: block; } /* * Eind-audit A2: de app-brede .mobile-header (52px, position:fixed, z-index 90) * ligt bóven deze fixed overlay, waardoor de kandidaatkop (terugknop, avatar, * naam) er op mobiel onder verdween. De hele workspace begint daarom onder de * balk zodra die zichtbaar is -- dat is het 768px-breekpunt van de balk zelf * (style.css), niet de eigen 700px van dit scherm: tussen 701 en 768px staat * de balk er ook en gold dezelfde overlap. */ @media (max-width: 768px) { .cdv2-root { top: 52px; } } /* * Eind-audit A1: focusring alleen bij toetsenbordbediening. * * Dit scherm verplaatst de focus programmatisch (de kop na het openen van een * dossier, de eerste knop in een paneel, de tab na activeren) -- gewenst voor * schermlezers (spec §10), maar zo'n .focus() telt in Chrome mee als * :focus-visible, waardoor de koperen ring óók bij elke muisklik verscheen. * `body.ws-pointer` (workspace-shell.js) markeert dat de laatste handeling met * muis/aanraking was; alleen dán onderdrukken we de ring, en uitsluitend binnen * de workspace -- de globale :focus-visible-regel in style.css blijft staan. */ body.ws-pointer .cdv2-root :focus-visible, body.ws-pointer .aac-side:focus-visible, body.ws-pointer .aac-side :focus-visible { outline: none; } /* Landingsdoelen met tabindex="-1" zijn nooit met Tab bereikbaar: daar is de focusverplaatsing zelf de a11y-winst, de ring heeft er geen functie. */ .cdv2-hero__name:focus, .aac-side:focus, .aac-side__hd-text b:focus { outline: none; } /* Hoofdcontent + composer schuiven/verkleinen mee als de shell in push-modus (>900px) open staat; op <=900px schakelt de shell zelf om naar overlay en blijven deze op right:0 (workspace-shell.js zet ws-mode-overlay/-push). */ body.sol-open.ws-mode-push .cdv2-main, body.sol-open.ws-mode-push .cdv2-composer { right: var(--sol-w); } body.sol-open.ws-mode-overlay .cdv2-main, body.sol-open.ws-mode-overlay .cdv2-composer { right: 0; } body.ws-scroll-lock { overflow: hidden; } .cdv2-main { position: absolute; inset: 0; overflow-y: auto; transition: right var(--ws-dur-slow) var(--ws-ease-out); } /* Handoff `v2-theme.css:146`: `padding: 32px 40px …` op desktop; de `20px 18px` staat daar in `@media(max-width:760px)`. De designmeting van 05-08 had die twee kolommen verwisseld, waardoor de vorige fixronde de MOBIELE waarde op desktop zette. Onderpadding blijft 230px i.p.v. de 150px uit de handoff: onze composer heeft een regel extra (moduschip + bestandsbadge) en zou met 150px de laatste inhoud afdekken. */ .cdv2-wrap { max-width: 1080px; margin: 0 auto; padding: 32px 40px 230px; } @media (max-width: 760px) { .cdv2-wrap { padding: 20px 18px 230px; } } /* ── Header/hero ─────────────────────────────────────────────────────── */ .cdv2-hero { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .cdv2-hero__main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } /* Eind-audit A16: "← Kandidaten" als tekstknop op een eigen regel bóven de kop, conform handoff -- was een rond icoonknopje links van de avatar. */ .cdv2-hero__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 0; background: none; border: none; font-family: var(--font-body); font-size: 13px; color: var(--fg-tertiary); cursor: pointer; } .cdv2-hero__back:hover { color: var(--fg-primary); } /* 64px, neutraal grijs (niet koper) -- audit A8, exact zoals handoff .cdv2-mono. */ .cdv2-hero__avatar { width: 64px; height: 64px; border-radius: 50%; background: #F3F4F6; color: #555555; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 20px; flex-shrink: 0; } /* 24px/700 (audit A9, was 22px/600). */ .cdv2-hero__name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--fg-primary); margin: 0; } .cdv2-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--fg-tertiary); margin-top: 4px; } .cdv2-hero__meta a { color: var(--fg-tertiary); text-decoration: none; } .cdv2-hero__meta a:hover { color: var(--koper); } /* Contactknoppencluster (audit A1): Bellen/WhatsApp/Mail/kebab, vierkante icoonknoppen rechts in de kop, conform handoff .cdv2-btn.ico. */ .cdv2-hero__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 2px; } .cdv2-hero__iconbtn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg-secondary); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.03); text-decoration: none; flex-shrink: 0; } .cdv2-hero__iconbtn:hover { border-color: #D4D4D8; color: var(--fg-primary); } .cdv2-hero__iconbtn--wa { background: var(--badge-green-bg); border-color: var(--badge-green-bg); color: var(--badge-green-fg); } .cdv2-hero__iconbtn--wa:hover { border-color: var(--badge-green-fg); } .cdv2-hero__kebab { position: relative; } .cdv2-hero__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--ws-shadow-lg, 0 8px 32px rgba(0,0,0,.12)); padding: 6px; min-width: 200px; } .cdv2-hero__menu[hidden] { display: none; } .cdv2-hero__menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; background: none; border: none; font-size: 13px; color: var(--fg-primary); cursor: pointer; } .cdv2-hero__menu button:hover { background: var(--surface-hover); } @media (max-width: 700px) { .cdv2-hero__avatar { width: 50px; height: 50px; font-size: 16px; } .cdv2-hero__name { font-size: 20px; } } /* ── Tabs (role=tablist, spec §10.1) ─────────────────────────────────── */ .cdv2-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border); margin-bottom: 30px; overflow-x: auto; } .cdv2-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0 0 11px; font-size: 13.5px; font-weight: 500; color: var(--fg-tertiary); cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .cdv2-tab:hover { color: var(--fg-primary); } /* Zwart/inkt (--fg-primary), niet koper -- audit A11, conform handoff (v2-theme.css .cdv2-tabs button.on{color:var(--cink)}). */ .cdv2-tab[aria-selected="true"] { color: var(--fg-primary); border-bottom-color: var(--fg-primary); font-weight: 600; } /* Onzichtbare bold-kopie van het label (data-label, zie tabsNavHtml): reserveert de breedte van de 600-variant zodat de tabbalk niet verspringt wanneer de actieve tab zwaarder gezet wordt. */ .cdv2-tab__label::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; } .cdv2-tab__count { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); border-radius: 10px; font-size: 11px; padding: 1px 6px; } .cdv2-tabpanel[hidden] { display: none; } /* ── Composer (spec §6.4: fixed, pointer-events-patroon, z-index-stack) ── */ .cdv2-composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; padding: 0 40px 22px; background: linear-gradient(to top, var(--bg) 55%, transparent); pointer-events: none; transition: right var(--ws-dur-slow) var(--ws-ease-out); } body.sol-open .cdv2-composer { z-index: 1295; } /* Handoff-waarden van `.cdv2-composer__box` (v2-theme.css r173-178). Wij houden het kader op `__inner` in plaats van een extra div: dezelfde verschijning, zonder de flex-layout van de knoppenrij te splitsen. De drie toestanden (rust / focus / drag) komen wél letterlijk uit de referentie -- zonder de drag-state wijst niets de gebruiker naar de plek waar een gesleept bestand landt. */ .cdv2-composer__inner { max-width: 1000px; margin: 0 auto; pointer-events: auto; background: #fff; border: 1px solid #e2e2e6; border-radius: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); padding: 14px 16px 10px; display: flex; align-items: flex-end; gap: 8px; transition: border-color 0.15s, box-shadow 0.15s; } .cdv2-composer__inner.is-focus { border-color: #f2c4a0; box-shadow: 0 0 0 4px rgba(217, 123, 61, 0.09), 0 8px 28px rgba(0, 0, 0, 0.08); } .cdv2-composer.drag .cdv2-composer__inner { border-color: #d97b3d; box-shadow: 0 0 0 4px rgba(217, 123, 61, 0.16), 0 8px 28px rgba(0, 0, 0, 0.08); } .cdv2-composer__textarea { flex: 1; border: none; outline: none; resize: none; max-height: 220px; /* Het veld groeit mee met de inhoud en breekt af op woordgrens: horizontaal valt er dus niets te scrollen. Zonder overflow-x: hidden tekende macOS met "toon schuifbalken: altijd" tóch een grijze balk onder de placeholder. De verticale balk verbergen we visueel (scrollen blijft werken) -- de globale 6px-thumb uit style.css r1700 is in een eenregelig invoerveld een streepje zonder betekenis. */ overflow-x: hidden; overflow-y: auto; scrollbar-width: none; font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--fg-primary); background: transparent; padding: 5px 0; } .cdv2-composer__textarea::-webkit-scrollbar { width: 0; height: 0; } .cdv2-composer__textarea::placeholder { color: var(--fg-quaternary); } .cdv2-composer__btn { background: none; border: none; color: var(--fg-tertiary); cursor: pointer; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); flex-shrink: 0; } .cdv2-composer__btn:hover { background: var(--surface-hover); color: var(--fg-primary); } /* Eind-audit A11: zwart-rond 32px conform handoff (.cdv2-send: 32×32, border-radius 99px, background var(--cink)) -- was koper en vierkant. */ .cdv2-composer__send { width: 32px; height: 32px; border-radius: 999px; background: var(--fg-primary); color: #fff; } .cdv2-composer__send:hover { background: #333; color: #fff; } @media (max-width: 700px) { .cdv2-composer { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); } /* iOS zoomt in bij focus op velden < 16px — en zoomt niet terug */ .cdv2-composer__textarea { font-size: 16px; } } /* ── Composer-resultaten in de gedeelde shell (S5) ───────────────────── */ .cdv2-composer-answer { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--fg-primary); } .cdv2-action-card { font-size: 14px; } /* ── Drop-zone-UI-voorbereiding (§6.3): visuele indicator, geen verwerking ── */ .cdv2-root.cdv2-dropzone-active::after { content: ''; position: fixed; inset: 0; z-index: 45; pointer-events: none; border: 2px dashed var(--koper); background: var(--koper); opacity: 0.06; } /* ── Gedeelde shell ("Action Workspace"), spec §4.4 ──────────────────── */ /* Altijd dezelfde lichte 5%-demping, ongeacht modus A/B: de zwaardere 25%- scrim in overlay-modus komt NIET van deze laag maar van .aac-side's eigen 100vmax-box-shadow hieronder (letterlijk de geverifieerde handoff-CSS, spec §4.2/§4.4) -- .ws-scrim zelf verandert nooit van dekking. */ .ws-scrim { position: fixed; inset: 0; z-index: 1290; background: rgba(21, 24, 30, 0.05); opacity: 0; pointer-events: none; transition: opacity var(--ws-dur-slow) var(--ws-ease-out); } body.sol-open .ws-scrim { opacity: 1; pointer-events: auto; } /* In push-modus is het paneel niet-modaal (zie de moduledoc van workspace-shell.js: geen focus-trap, geen inert) -- de pagina ernaast hoort gewoon bedienbaar te blijven. De scrim ving daar tóch elke klik af en sloot het paneel, waardoor een vervolgvraag in de composer onmogelijk was: je klik in het invoerveld landde op de scrim en het antwoord verdween. De demping blijft staan, alleen het afvangen gaat eraf. Sluiten kan met Escape en de sluitknop; in overlay-modus blijft de scrim wel modaal, want daar dekt het paneel de pagina af. */ body.sol-open.ws-mode-push .ws-scrim { pointer-events: none; } @media (max-width: 700px) { /* Paneel is 100vw op dit breekpunt en dekt toch alles (spec §4.2). */ .ws-scrim { display: none; } } .aac-side { position: fixed; top: 0; right: 0; bottom: 0; width: var(--sol-w, min(540px, 94vw)); z-index: 1300; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--ws-dur-slow) var(--ws-ease-out); } #wsShellRoot.open .aac-side { transform: translateX(0); } /* Breedte volgt --sol-w (al min(480px,94vw) op dit breekpunt); alleen de 25%-scrim-simulatie via box-shadow is hier nog mode-specifiek. */ body.ws-mode-overlay .aac-side { box-shadow: -8px 0 28px rgba(0, 0, 0, 0.06), 0 0 0 100vmax rgba(26, 26, 26, 0.25); } @media (max-width: 700px) { body.ws-mode-overlay .aac-side { box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .aac-side, .cdv2-main, .cdv2-composer { transition: none; } } .aac-side__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--border); } .aac-side__hd-text b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg-primary); } .aac-side__hd-text p { margin: 2px 0 0; font-size: 12.5px; color: var(--fg-tertiary); } .aac-side__close { background: none; border: none; color: var(--fg-tertiary); cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); flex-shrink: 0; } .aac-side__close:hover { background: var(--surface-hover); color: var(--fg-primary); } .aac-side__bd { flex: 1; overflow-y: auto; padding: 18px 20px; } .aac-side__foot { padding: 14px 20px; border-top: 1px solid var(--border); } .aac-side__foot:empty { display: none; } /* De toast staat rechtsonder (style.css: bottom/right 24px, z-index 2000) en dekte daar precies de knoppen van dit paneel af -- juist op het moment dat je iets wilt bevestigen of afwijzen. In push-modus is er ruimte naast het paneel, dus daar schuift hij mee naar links; in overlay-modus dekt het paneel de pagina en gaat hij boven de knoppenbalk staan. */ body.sol-open.ws-mode-push .toast { right: calc(var(--sol-w) + 24px); } body.sol-open.ws-mode-overlay .toast { bottom: 88px; } @media (max-width: 700px) { .aac-side__hd { padding: 52px 18px 14px; } .aac-side__bd { padding: 18px; } .aac-side__foot { padding: 14px 18px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); } } /* Skeleton (spec §4.3: laadstaat in het paneel zelf, nooit een fullscreen spinner) */ .aac-side .skeleton-list { padding: 4px 0; } /* ── Read-only detailweergaven binnen de shell (v1: sollicitatie/document) ── */ .ws-kv { display: flex; flex-direction: column; gap: 10px; } /* ── Matchonderbouwing bij een vacaturevoorstel ───────────────────────────── */ .ws-match { margin-top: 14px; padding: 13px 14px; border-radius: 10px; background: var(--surface-hover, rgba(0,0,0,0.015)); border: 1px solid var(--border); } .ws-match__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ws-match__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-tertiary); } .ws-match__score { font-size: 15px; font-weight: 650; color: var(--fg-primary); font-variant-numeric: tabular-nums; } .ws-match__balk { margin-top: 8px; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,0.07); } .ws-match__balk i { display: block; height: 100%; background: var(--koper); border-radius: 999px; } .ws-match__tekst { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-secondary); } .ws-match__lijst { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; } .ws-match__lijst li { font-size: 13px; line-height: 1.45; color: var(--fg-secondary); padding-left: 18px; position: relative; } .ws-match__lijst li::before { position: absolute; left: 2px; font-weight: 700; } .ws-match__lijst--plus li::before { content: "+"; color: var(--badge-green-fg, #1E7A4F); } .ws-match__lijst--min li::before { content: "−"; color: var(--koper); } .ws-kv__row { display: flex; flex-direction: column; gap: 2px; } .ws-kv__label { font-size: 11.5px; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .02em; } .ws-kv__value { font-size: 14px; color: var(--fg-primary); } .ws-doc-preview img { max-width: 100%; max-height: 60vh; display: block; margin: 0 auto; } /* `color-scheme: light` is hier geen cosmetiek maar de reden dat het document leesbaar is. De PDF-viewer van de browser draait in een eigen context en erft de color-scheme van :root niet; op een Mac in donkere modus rendert Safari het blad dan zwart-op-zwart -- het document laadt wél, je kunt het alleen niet lezen. Deze regel dwingt de lichte viewer af. */ .ws-doc-preview iframe { width: 100%; height: 60vh; border: none; display: block; color-scheme: light; background: #fff; } .ws-doc-preview__msg { padding: 24px; text-align: center; font-size: 13px; color: var(--fg-tertiary); } /* ── Procedurebalk onder de kop (audit A3) ────────────────────────────── */ .cdv2-proc { background: var(--surface); border: 1px solid #ececee; border-radius: var(--radius-lg); margin-bottom: 22px; } .cdv2-proc__row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font: inherit; } .cdv2-proc__row:last-child { border-bottom: none; } .cdv2-proc__row:hover { background: var(--surface-hover); } .cdv2-proc__row--empty { cursor: default; color: var(--fg-tertiary); font-size: 13px; } .cdv2-proc__row--empty:hover { background: none; } .cdv2-proc__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .cdv2-proc__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .cdv2-proc__head b { font: 600 14px var(--font-display); color: var(--fg-primary); } .cdv2-proc__where { font-size: 12.5px; color: var(--fg-tertiary); } /* Uitkomst van een afgeronde procedure: bij een lopende zaak zegt de fase-badge genoeg, bij een afgeronde is juist de afloop het interessante. */ .cdv2-proc__outcome { font-size: 12.5px; color: var(--fg-tertiary); margin-top: 2px; } .cdv2-proc__chev { display: inline-flex; color: var(--fg-quaternary); flex-shrink: 0; } .cdv2-proc__row:hover .cdv2-proc__chev { color: var(--fg-secondary); } /* ── Overzicht-tab: tweekoloms-layout (audit A2) ──────────────────────── */ /* Eind-audit A18: het grid bleef in de handoff tweekoloms tot 760px, bij ons klapte het al op 900px. De desktop-gap is 40px (`v2-theme.css:207`); de 30px hoort bij het mobiele blok -- ook hier had de designmeting de kolommen verwisseld en zette de vorige ronde de mobiele waarde op desktop. */ .cdv2-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; } @media (max-width: 760px) { .cdv2-grid { grid-template-columns: 1fr; gap: 30px; } } .cdv2-sum { background: var(--surface); border: 1px solid #ececee; border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.03); } .cdv2-sum__label { font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-quaternary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .cdv2-sum p { font-size: 14px; line-height: 1.6; color: var(--fg-primary); margin: 0; } .cdv2-side { background: var(--surface); border: 1px solid #ececee; border-radius: 14px; padding: 18px 20px; } .cdv2-side__title { font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-quaternary); margin-bottom: 4px; } .cdv2-fact { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); } .cdv2-fact:last-of-type { border-bottom: none; } .cdv2-fact svg { color: var(--fg-quaternary); flex-shrink: 0; } .cdv2-fact p { font-size: 11.5px; color: var(--fg-quaternary); margin: 0; } .cdv2-fact b { font: 500 14px var(--font-body); display: block; color: var(--fg-primary); } .cdv2-fact b.empty { color: var(--fg-quaternary); font-weight: 400; } .cdv2-side .cdv2-link-row { margin-top: 10px; } /* Laatste-activiteit-preview (Overzicht) + volledige Activiteit-tab, delen dezelfde iconische tijdlijnstijl (audit A7: gekleurde icoon-cirkel i.p.v. platte stippen). Taak 5 (tijdlijn-unificatie): deze `.cdv2-tl*`-klassen zijn GEDEELD -- static/modules/activity-timeline.js rendert ze voor candidate-workspace.js, client-workspace.js én contact-workspace.js. Hernoem de prefix niet: die raakt kandidaat-CSS die live op productie draait. candidate-workspace.css en client-workspace.css laden allebei globaal (static/index.html), dus deze stijl geldt overal zonder duplicatie. */ .cdv2-tl-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .cdv2-tl-title span { font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-quaternary); } .cdv2-tl { display: flex; gap: 12px; padding: 13px 0; position: relative; } .cdv2-tl::before { content: ''; position: absolute; left: 12.5px; top: 40px; bottom: -13px; width: 1.5px; background: var(--border); } .cdv2-tl:last-child::before { display: none; } .cdv2-tl__ic { width: 26px; height: 26px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg); } /* In het shell-paneel is de achtergrond --surface, niet --bg: zonder deze override tekent de halo rond het icoon daar een zichtbaar afwijkende ring. */ .aac-side .cdv2-tl__ic { box-shadow: 0 0 0 3px var(--surface); } .cdv2-tl__body { min-width: 0; flex: 1; } /* Eind-audit A7: gebeurtenis links, tijd uiterst rechts (handoff: `cdv2-row` met `justify-content: space-between`). Daarvoor plakte de tijd direct achter de titel, waardoor een tijdlijn van tien regels geen rechterkolom had om langs te scannen. */ .cdv2-tl__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } /* 600, niet 500: de kop is nu een korte gebeurtenisnaam met de inhoud eronder, en moet zich daarvan onderscheiden. Toen de kop nog de volledige tekst was, zou dat gewicht juist te zwaar hebben gestaan. */ .cdv2-tl__body b { font: 600 14px var(--font-body); color: var(--fg-primary); } .cdv2-tl__body span.t { font-size: 12px; color: var(--fg-quaternary); margin-left: 0; white-space: nowrap; flex-shrink: 0; } /* handoff `.cdv2-tl__kind`: `500 10.5px`, `letter-spacing .04em`, `margin-top 2px`, inline-block. Vier van de vijf waarden weken af in mijn eerste versie; in een pixel-perfect-ronde is dat precies wat de hermeting terugmeldt. */ .cdv2-tl__kind { display: inline-block; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-quaternary); margin-top: 2px; } .cdv2-tl__body p { font-size: 12.5px; color: var(--fg-secondary); margin: 3px 0 0; line-height: 1.55; } .cdv2-link-row { font: 500 13px var(--font-body); color: var(--koper); cursor: pointer; background: none; border: none; padding: 0; } .cdv2-link-row:hover { text-decoration: underline; } /* ── Gegevens-tab: gegroepeerde secties (audit A4) ────────────────────── */ .cdv2-gsec { margin-bottom: 24px; } .cdv2-gsec:last-child { margin-bottom: 0; } .cdv2-gsec__title { font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-quaternary); margin-bottom: 10px; } /* ── Sollicitaties-tab: Actief/Afgerond-groepering (audit A6) ─────────── */ .cdv2-solgroup { margin-bottom: 22px; } .cdv2-solgroup:last-child { margin-bottom: 0; } /* Eind-audit A13: kopregel met de groepstitel en direct daarnaast "+ Koppelen aan vacature" (handoff `.sol-histhd`: `justify-content: flex-start`, `gap: 0`, `margin-bottom: 12px`; de knop houdt zelf `margin-left: 12px`). Niet `space-between` -- dan schoof de knop naar de rechterrand van het scherm en stond hij niet meer bij de telling waar hij bij hoort. */ .cdv2-solgroup__head { display: flex; align-items: baseline; justify-content: flex-start; gap: 0; margin-bottom: 12px; } .cdv2-sol-add { font: 500 12.5px var(--font-body); color: var(--koper-700); background: none; border: none; padding: 0; margin-left: 12px; cursor: pointer; white-space: nowrap; letter-spacing: 0; text-transform: none; } .cdv2-sol-add:hover { color: #8f4c22; } /* handoff .sol-add:hover */ /* handoff `.sol-empty`: 13px, tertiaire kleur, 10px verticale ruimte. */ .cdv2-sol-empty { font-size: 13px; color: var(--fg-tertiary); padding: 10px 0; } /* Vacature zoeken in het koppelpaneel. Eén veld doorzoekt functie, klant en plaats; de resultaten staan als lijst onder elkaar in plaats van in een keuzelijst, zodat twee vacatures met dezelfde titel uit elkaar te houden zijn. */ .cdv2-vacz { position: relative; } .cdv2-vacz__ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--fg-quaternary); pointer-events: none; /* Boven het invoerveld: dat komt later in de DOM en zou het icoon anders afdekken. */ z-index: 1; } /* Twee klassen, niet één: `.geg-input` staat verderop in dit bestand en zet `padding: 6px 9px`. Met gelijke specificiteit won die van ons, waardoor de tekst over het vergrootglas heen begon. */ .cdv2-vacz .cdv2-vacz__in { padding-left: 34px; } .cdv2-vacz__telling { font-size: 12.5px; color: var(--fg-tertiary); margin: 9px 2px 6px; min-height: 1em; } .cdv2-vaclijst { max-height: 320px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } .cdv2-vaclijst__leeg { padding: 24px 10px; text-align: center; font-size: 14px; color: var(--fg-tertiary); } .cdv2-vacrij { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; } .cdv2-vacrij:hover { background: var(--surface-hover); } .cdv2-vacrij.on { background: #FBF1E9; border-color: #EBC9AC; } .cdv2-vacrij__h { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cdv2-vacrij__t { font: 600 14px var(--font-body); color: var(--fg-primary); } .cdv2-vacrij__m { font-size: 12.5px; color: var(--fg-tertiary); } /* Bezetting: alleen tonen als de vacature plekken heeft vastgelegd -- anders zou er "0 van 0 vrij" staan, wat niets zegt. */ .cdv2-vacrij__p { font: 620 11.5px var(--font-body); padding: 3px 9px; border-radius: 99px; background: #E9F3EE; color: #2F6B4F; white-space: nowrap; flex-shrink: 0; } .cdv2-vacrij__p.vol { background: var(--surface-hover); color: var(--fg-tertiary); } .cdv2-solgroup__title { display: flex; align-items: center; gap: 6px; font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-quaternary); } .cdv2-solgroup__count { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); border-radius: 10px; font-size: 10.5px; padding: 1px 6px; text-transform: none; letter-spacing: normal; } /* ── Sollicitatiepaneel: aanvullende read-only content (audit A5) ─────── */ .ws-sol__vaclink { font: 500 13px var(--font-body); color: var(--koper); background: none; border: none; cursor: pointer; padding: 0; margin-top: 2px; } .ws-sol__vaclink:hover { text-decoration: underline; } /* ── S4b: inline editors op de Gegevens-tab (spec §9) ─────────────────── */ /* Eind-audit A5 — Gegevens-tab volgens `.cdv2-dsec` / `.cdv2-drow` uit de handoff (v2-theme.css): een witte kaart met een scheidingslijn per rij, het label sentence-case in een vaste kolom van 150px links en de waarde op dezelfde regel. Bewust NIET via `.ws-kv`: die klasse deelt de capture-kaart in het zijpaneel en moet daar de bestaande vorm houden. */ .cdv2-dsec { background: var(--surface); border: 1px solid #ececee; border-radius: 12px; padding: 2px 0; } .cdv2-drow { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid #ececee; position: relative; } .cdv2-drow:last-child { border-bottom: none; } .cdv2-drow:hover { background: var(--bg); } .cdv2-drow__l { font-size: 13px; color: var(--fg-tertiary); width: 150px; flex-shrink: 0; } .cdv2-drow__v { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 500 13.5px var(--font-body); color: var(--fg-primary); background: none; border: none; border-radius: var(--radius-sm); text-align: left; padding: 0; cursor: pointer; } .cdv2-drow__txt { min-width: 0; overflow-wrap: anywhere; } .cdv2-drow__v--empty { color: var(--koper); } /* Het potlood is de affordance van de hele rij; alleen tonen bij hover of toetsenbordfocus, zoals `.cdv2-drow .pen` in de handoff. */ .cdv2-drow__pen { display: inline-flex; margin-left: auto; flex-shrink: 0; color: var(--fg-quaternary); opacity: 0; transition: opacity .12s; } .cdv2-drow:hover .cdv2-drow__pen, .cdv2-drow__v:focus-visible .cdv2-drow__pen { opacity: 1; } @media (max-width: 760px) { .cdv2-drow { flex-wrap: wrap; gap: 4px 14px; } .cdv2-drow__l { width: 100%; } /* Zonder hover is er op touch geen enkele aanwijzing dat de rij bewerkbaar is. De handoff zet het potlood daar vast rechtsboven in de rij (`@media(max-width:760px){.cdv2-drow .pen{position:absolute;right:14px; top:12px}}`) -- dus altijd zichtbaar. */ .cdv2-drow__pen { position: absolute; right: 14px; top: 12px; opacity: 1; margin-left: 0; } } /* Bewerkstand: het label blijft staan, de rij groeit met het formulier. */ .cdv2-drow.geg-row--editing { align-items: flex-start; flex-wrap: wrap; background: var(--surface-active); } .cdv2-drow.geg-row--editing .geg-edit { flex: 1; min-width: 0; margin-top: 0; } /* De foutregel is een derde flex-item in de rij; zonder eigen regel zou hij naast het invoerveld proberen te passen. */ .cdv2-drow.geg-row--editing .geg-edit__err { flex-basis: 100%; margin-left: 164px; } .geg-edit { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; } .geg-edit__ctl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .geg-edit__err { font-size: 12px; color: #DC2626; margin: 6px 0 0; } .geg-input { font: 400 13.5px var(--font-body); color: var(--fg-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 9px; width: 100%; box-sizing: border-box; } .geg-input:focus { outline: 2px solid var(--koper); outline-offset: -1px; } .geg-ok { display: flex; gap: 4px; flex-shrink: 0; } .geg-ok__btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-secondary); cursor: pointer; } .geg-ok__btn:hover { background: var(--surface-hover); color: var(--fg-primary); } .geg-ok__btn--save { border-color: var(--koper); color: var(--koper); } .geg-ok__btn[disabled] { opacity: .5; cursor: default; } /* Drieweg-segment "Per direct / In overleg / Vanaf datum…" (§9.4) */ .geg-seg { display: flex; flex-wrap: wrap; gap: 4px; } .geg-seg__btn { font: 500 12.5px var(--font-body); padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--fg-secondary); cursor: pointer; } .geg-seg__btn--on { background: var(--koper-subtle); border-color: var(--koper); color: var(--koper-700, var(--koper)); } /* Rijbewijscategorie-toggles (§9.5) */ .geg-cats { display: flex; flex-wrap: wrap; gap: 5px; } .geg-cat { min-width: 38px; font: 600 12.5px var(--font-body); padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-tertiary); cursor: pointer; } .geg-cat--on { background: var(--koper-subtle); border-color: var(--koper); color: var(--koper-700, var(--koper)); } .geg-check, .geg-other { display: flex; align-items: center; gap: 6px; font: 400 13px var(--font-body); color: var(--fg-secondary); cursor: pointer; } /* Label + keuzelijst op één regel (eigen vervoer, §9.5): de lijst krijgt de resterende breedte zodat "Geen vervoer" niet afkapt. */ .geg-check--field { gap: 8px; } .geg-check--field .geg-input { flex: 1; min-width: 0; } .geg-check__lbl { flex-shrink: 0; } .geg-range { display: flex; gap: 10px; flex-wrap: wrap; } .geg-range__lbl { display: flex; align-items: center; gap: 4px; font: 400 13px var(--font-body); color: var(--fg-tertiary); flex: 1; min-width: 110px; } /* Uitklap met de volledige profielvelden onder de kernvelden van de Gegevens-tab. Dicht bij het openen van de tab; de keuze wordt onthouden. */ .cdv2-alle { margin-top: 18px; } .cdv2-alle__btn { font: 600 13px var(--font-body); color: var(--fg-secondary); background: var(--surface-hover); border: 1px solid var(--border); border-radius: 99px; padding: 7px 14px; cursor: pointer; } .cdv2-alle__btn:hover { color: var(--fg-primary); } .cdv2-alle__body { margin-top: 14px; } .cdv2-alle__groep { font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-tertiary); margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } .cdv2-alle__acties { margin-top: 20px; } /* ── Uitklap in dezelfde vorm als de velden erboven ────────────────────── De uitklap hergebruikt het formulier uit candidate-detail.js. Dat is een tweekoloms raster met het label bóven het invoerveld -- prima op zichzelf, maar naast de strakke rijen van de Gegevens-tab (label links in een vaste kolom, waarde rechts, witte kaart met scheidingslijnen) leest het als een ander scherm. Het omvormen gebeurt hier in CSS en niet in de markup: diezelfde HTML voedt de kandidaatweergave die op productie draait, en die moet ongemoeid blijven. Alles hieronder is daarom gescopet op .cdv2-alle__body. */ .cdv2-alle__body .field-grid { display: block; background: var(--surface); border: 1px solid #ececee; border-radius: 12px; padding: 2px 0; margin-bottom: 14px; } .cdv2-alle__body .form-group { display: flex; align-items: center; gap: 14px; margin: 0; padding: 5px 16px; border-bottom: 1px solid var(--border); } .cdv2-alle__body .field-grid > .form-group:last-child { border-bottom: none; } .cdv2-alle__body .form-group > label { flex: 0 0 150px; margin: 0; font: 500 13px var(--font-body); color: var(--fg-secondary); } /* Compacter dan een gewoon formulierveld (15px tekst, 9px padding): zo'n veld maakt de rij bijna twintig pixels hoger dan de rijen erboven, waar de waarde als platte tekst staat. Met deze maten komt de regelhoogte overeen en leest de uitklap als hetzelfde scherm. */ .cdv2-alle__body .form-group > input, .cdv2-alle__body .form-group > select, .cdv2-alle__body .form-group > textarea { flex: 1; min-width: 0; font: 500 13.5px var(--font-body); padding: 5px 9px; } /* Een tekstblok (pitch, motivatie) hoort onder zijn label, niet ernaast: op één regel wordt de invoer een streepje breed. */ .cdv2-alle__body .form-group:has(> textarea) { display: block; } .cdv2-alle__body .form-group:has(> textarea) > label { margin-bottom: 6px; } /* Chips (rijbewijs, ploegen, branches) staan in een `.full`-groep met het label erboven; die houden hun eigen indeling maar krijgen wel de rijomlijsting. */ .cdv2-alle__body .form-group.full { display: block; } .cdv2-alle__body .form-group.full > label { margin-bottom: 7px; } /* Losse groepen buiten een raster (certificaten, skills) krijgen dezelfde kaart als de rasters, zodat er geen zwevende blokken tussen staan. */ .cdv2-alle__body > .form-group { background: var(--surface); border: 1px solid #ececee; border-radius: 12px; margin-bottom: 14px; padding: 12px 16px; } /* Verouderde notatie: leesbaar maar duidelijk niet-actief. */ .cdv2-alle__oud { font-size: 13px; color: var(--fg-tertiary); font-style: italic; } /* Eén uitleg boven de groep in plaats van achter elke regel: bij vier velden stond er anders vier keer dezelfde zin, en dat las als een foutmelding. */ .cdv2-alle__oudlead { font-size: 12.5px; color: var(--fg-tertiary); margin: -2px 0 8px; max-width: 60ch; } /* ── Undo-balk (spec §12: 6 s, toast-stijl + onderstreepte link) ──────── */ .cdv2-undo { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(8px); z-index: 960; display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-radius: var(--radius-md); background: var(--glass-toast, rgba(26, 26, 26, .92)); color: var(--white, #fff); font: 400 13px var(--font-body); box-shadow: var(--ws-shadow-lg, 0 8px 32px rgba(0, 0, 0, .18)); opacity: 0; transition: opacity var(--dur-base, 200ms) ease, transform var(--dur-base, 200ms) ease; } .cdv2-undo--in { opacity: 1; transform: translateX(-50%) translateY(0); } .cdv2-undo__btn { background: none; border: none; padding: 0; font: 500 13px var(--font-body); color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cdv2-undo { transition: none; } } /* ── S4b: mutatie-acties in het sollicitatiepaneel (spec §7) ──────────── */ .ws-sol__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .ws-sol__spacer { flex: 1; } .ws-sol__fase { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; font-family: var(--font-body); } .ws-sol__kebabwrap { position: relative; } .ws-sol__kebab { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; color: var(--fg-tertiary); cursor: pointer; } .ws-sol__kebab:hover { background: var(--surface-hover); color: var(--fg-primary); } .ws-sol__menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 5; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--ws-shadow-lg, 0 8px 32px rgba(0, 0, 0, .1)); padding: 5px; } .ws-sol__menu button { display: block; width: 100%; text-align: left; font: 400 13px var(--font-body); color: var(--fg-primary); background: none; border: none; cursor: pointer; padding: 7px 10px; border-radius: var(--radius-sm); } .ws-sol__menu button:hover { background: var(--surface-hover); } .ws-sol__menu--danger { color: #DC2626 !important; } /* De `display`-regel hieronder wint van het UA-`[hidden] { display: none }`, dus de ingeklapte staat heeft een eigen regel nodig -- zonder deze stond de volledige negen-fases-keuzelijst permanent onder de actiebalk (en deed de fase-pill visueel niets). Zelfde vangnet als .cdv2-hero__menu[hidden]. Het kebab-menu zet zelf geen `display` en werd dus wél verborgen; het krijgt de regel er toch bij zodat een latere display-toevoeging dit niet herhaalt. */ .ws-sol__faselist[hidden], .ws-sol__menu[hidden] { display: none; } .ws-sol__faselist { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-active); } .ws-sol__faselist button { background: none; border: none; padding: 0; cursor: pointer; } .ws-sol__faselist button[disabled] { opacity: .45; cursor: default; } /* Inline bevestiging binnen het paneel (§7.1 punt 7) */ .ws-confirm { border: 1px solid var(--koper); background: var(--koper-subtle); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px; } .ws-confirm__txt { margin: 0 0 10px; font-size: 13px; color: var(--fg-primary); line-height: 1.5; } .ws-confirm__btns { display: flex; gap: 8px; justify-content: flex-end; } /* ── S4b: documentenlijst + documentvoorbeeld (spec §8) ───────────────── */ /* Wit, niet de paginakleur: een document is een object dat je aanklikt, en dat hoort als kaart op de achtergrond te liggen -- zoals in het ontwerp. */ .cdv2-doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 13px; } /* Uploadzone onder de documentenlijst. De sleepstaat ligt op de héle lijst: met een bestand in je hand een klein doel raken is onnodig priegelwerk. */ .cdv2-docs { border-radius: var(--radius-sm); transition: background .12s, box-shadow .12s; } .cdv2-docs--sleep { background: var(--surface-hover); box-shadow: 0 0 0 2px var(--koper, #b87333) inset; } .cdv2-docs--bezig { opacity: .6; pointer-events: none; } .cdv2-docup { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .cdv2-docup__btn { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px var(--font-body); color: var(--fg-secondary); background: none; border: none; padding: 4px 0; cursor: pointer; } .cdv2-docup__btn:hover { color: var(--fg-primary); } .cdv2-docup__plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; line-height: 1; } .cdv2-docup__hint { font-size: 12.5px; color: var(--fg-quaternary); } /* De hele rij opent het voorbeeld; het moet er dus ook uitzien alsof je erop kunt klikken. Het menu erbinnen heeft zijn eigen positionering nodig. */ .cdv2-doc--klikbaar { cursor: pointer; } .cdv2-doc--klikbaar:hover { background: var(--surface-hover); border-color: var(--border-strong); } .cdv2-doc__kebabwrap { position: relative; cursor: default; } .cdv2-doc__kebab { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--radius-sm); color: var(--fg-tertiary); cursor: pointer; } .cdv2-doc__kebab:hover { background: var(--surface-hover); color: var(--fg-primary); } /* In de navigatiebalk van het voorbeeldpaneel staat de badge rechts (margin-left:auto); in de lijst hoort hij vóór de bestandsnaam. */ .cdv2-doc .ws-doc-nav__type { margin-left: 0; } .cdv2-doc__type { flex-shrink: 0; font: 600 10.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-sm); background: var(--koper-subtle); color: var(--koper-700, var(--koper)); } .cdv2-doc__main { flex: 1; min-width: 0; } .cdv2-doc__name { font-weight: 500; color: var(--fg-primary); overflow-wrap: anywhere; } .cdv2-doc__meta { font-size: 11.5px; color: var(--fg-tertiary); margin-top: 2px; } .cdv2-doc__btns { display: flex; gap: 4px; flex-shrink: 0; } @media (max-width: 700px) { .cdv2-doc { flex-wrap: wrap; } .cdv2-doc__btns { width: 100%; justify-content: flex-end; } } .ws-doc-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; font: 500 12.5px var(--font-body); color: var(--fg-tertiary); } .ws-doc-nav button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-secondary); cursor: pointer; } .ws-doc-nav button:hover:not([disabled]) { background: var(--surface-hover); color: var(--fg-primary); } .ws-doc-nav button[disabled] { opacity: .4; cursor: default; } .ws-doc-foot { display: flex; gap: 8px; justify-content: space-between; } /* A1 — moduschip en bestandsbadge in de composer. Beide zitten bóven het invoerveld zodat dat veld niet verspringt als ze verschijnen. * * Ze moeten `max-width`/centrering én `pointer-events` van .cdv2-composer__inner * overnemen: de composer-container is over de volle schermbreedte gespannen en * staat op `pointer-events: none` (hij is alleen een gradient-laag). Zonder * deze twee regels landde de chip linksonder in beeld i.p.v. boven het * invoerveld, en was hij bovendien niet klikbaar -- dan is er geen enkele * manier om de gekozen modus te corrigeren. Gemeten op staging 05-08: chip op * x=0 met pointer-events:none, invoerveld op x=626. */ .cdv2-composer__modes { display: flex; gap: 6px; padding: 0 4px 8px; max-width: 1000px; margin: 0 auto; pointer-events: auto; } .cdv2-mode { border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12)); background: transparent; color: var(--fg-tertiary); border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer; } .cdv2-mode:hover:not(:disabled) { color: var(--fg-primary); } .cdv2-mode:disabled { opacity: 0.45; cursor: default; } .cdv2-mode--actief { border-color: var(--koper); color: var(--koper); font-weight: 600; } .cdv2-composer__file { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; font-size: 12.5px; color: var(--fg-tertiary); max-width: 1000px; margin: 0 auto; pointer-events: auto; } .cdv2-composer__filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; } .cdv2-composer__fileclear { border: 0; background: transparent; color: var(--fg-tertiary); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .cdv2-composer__fileclear:hover { color: var(--koper); } /* De display-regels hierboven winnen van het UA-`[hidden] { display: none }` (class-selector slaat attribuutselector), dus zonder deze vangregel staan de moduschip en de bestandsbadge permanent in beeld. Zelfde val als bij .ws-sol__faselist / .cdv2-hero__menu. */ .cdv2-composer__modes[hidden], .cdv2-composer__file[hidden] { display: none; } /* A3 — vervolg-voorstellen onder het capture-paneel. */ .cdv2-followups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ececee; } .cdv2-followups__lead { font-size: 12.5px; color: var(--fg-tertiary); margin-right: 2px; } /* Handhaaft de handoff-chipknop (.cdv2-chipbtn, v2-theme.css r194). */ .cdv2-followup { font: 500 12px var(--font-body); color: var(--fg-tertiary); border: 1px solid var(--border); border-radius: 99px; padding: 5px 11px; background: #fff; cursor: pointer; white-space: nowrap; } .cdv2-followup:hover:not(:disabled) { border-color: #f2c4a0; color: var(--koper); background: #fff9f5; } .cdv2-followup:disabled { opacity: 0.5; cursor: default; } /* A4 — groepspaneel: genummerde stappen in de aanbevolen uitvoervolgorde. */ .cdv2-groep { margin: 14px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .cdv2-groep__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-primary); } .cdv2-groep__titel { flex: 1; min-width: 0; } .cdv2-groep__status { font-size: 11px; color: var(--fg-tertiary); white-space: nowrap; } .cdv2-groep__open { border: 1px solid #ececee; background: #fff; border-radius: 99px; padding: 3px 10px; font: 500 12px var(--font-body); color: var(--fg-tertiary); cursor: pointer; white-space: nowrap; } .cdv2-groep__open:hover { border-color: #f2c4a0; color: var(--koper); background: #fff9f5; } /* Eind-audit A12 — de read-only variant van de paneelrijen (geen potlood, geen hover-affordance). De Recruiter-rij krijgt deze klasse bewust NIET: daar zit een werkende keuzelijst in, en `cursor: default` + geen hover zou suggereren dat er niets te kiezen valt (review B1, bevinding 13). */ .cdv2-drow--ro { cursor: default; } .cdv2-drow--ro:hover { background: none; } .cdv2-drow__v--ro { justify-content: flex-end; text-align: right; cursor: default; } .cdv2-drow__sel { flex: 1; min-width: 0; font: 500 13.5px var(--font-body); color: var(--fg-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; } .cdv2-drow__sel:disabled { color: var(--fg-tertiary); cursor: default; } /* Eind-audit A6 — het documentvoorbeeld leest als een blad binnen onze eigen vormgeving in plaats van als een kaal browservenster (handoff `.dp-paper`). De browser-PDF-viewer zelf is met `#toolbar=0` ontdaan van zijn donkere balk; dit kader vervangt de rand die daarmee wegviel. */ .ws-doc-preview--paper { background: var(--surface); border: 1px solid #e9e7e3; border-radius: 4px; box-shadow: 0 1px 2px rgba(21, 24, 30, .05), 0 8px 22px rgba(21, 24, 30, .05); overflow: hidden; } .ws-doc-preview--paper img { padding: 12px; } /* Eind-audit C2 — bestandstype-badge rechts in de documentnavigatie (handoff `.dp-nav__type`: 600 10px, letter-spacing .06em, wit op een kleur per soort). De kleur staat inline omdat hij per bestandstype verschilt. */ .ws-doc-nav__type { margin-left: auto; font: 600 10px var(--font-body); letter-spacing: .06em; color: #fff; padding: 4px 7px; border-radius: 5px; flex-shrink: 0; } /* B2 — statuschip op de hero. Maten letterlijk uit de handoff (v2-theme.css r153-154: 500 12.5px, padding 3px 10px, radius 6, dot 6px). De kleur staat inline: hij verschilt per berekende toestand (candidate-workspace.js:: CAND_STATE_HEX), net zoals de bestaande .ws-doc-nav__type dat per bestandstype doet. Font-stack volgt dit bestand (--font-body), niet de --ui-variabele uit de prototype-CSS die hier niet bestaat. */ .cdv2-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font-body); padding: 3px 10px; border-radius: 6px; white-space: nowrap; vertical-align: middle; } .cdv2-chip .d { width: 6px; height: 6px; border-radius: 99px; background: currentColor; } /* B5a — vaardigheden-chips op de Gegevens-tab. Maten letterlijk uit de handoff: `.cdv2-tag` en `.cdv2-tag.add` uit v2-theme.css r251-252, het invoerveld en het kruisje uit kandidaten.css r351-359. */ .cdv2-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 4px 0; } .cdv2-tag { display: inline-flex; align-items: center; font: 500 12px var(--font-body); padding: 3px 9px; border-radius: 6px; background: #f3f4f6; color: var(--fg-secondary); } .cdv2-tag.add { background: none; border: 1px dashed #e2e2e6; color: #b0aca5; cursor: pointer; } .cdv2-tag .x { border: none; background: none; color: #b0aca5; cursor: pointer; font-size: 9px; margin-left: 6px; padding: 0; line-height: 1; } .cdv2-tag:hover .x { color: #1a1a1a; } .geg-skill { position: relative; display: inline-flex; align-items: center; gap: 6px; } .geg-skill > input { font: 400 12.5px var(--font-body); border: 1px solid #b5612e; border-radius: 99px; padding: 5px 11px; outline: none; width: 210px; } /* B3 — samenvatting. `--compact` haalt de kaartvorm weg: de handoff zet deze tekst plat op de achtergrond (kandidaten.css r40-49) en laat de acties pas bij hover/focus verschijnen, zodat de kaart in rust alleen tekst is. */ .cdv2-sum--compact { position: relative; background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 22px 0 30px; } .cdv2-sum__txt { font: 400 14.5px/1.7 var(--font-body); color: var(--fg-secondary); max-width: 64ch; } .cdv2-sum__txt--empty { color: var(--fg-quaternary); } .cdv2-sum__acts { display: flex; gap: 14px; align-items: center; margin-top: 8px; opacity: 0; transition: opacity .14s; } .cdv2-sum--compact:hover .cdv2-sum__acts, .cdv2-sum--compact:focus-within .cdv2-sum__acts { opacity: 1; } .cdv2-sum__acts button { font: 500 12.5px var(--font-body); color: var(--fg-tertiary); background: none; border: none; padding: 0; cursor: pointer; } .cdv2-sum__acts button:hover { color: var(--fg-primary); } .cdv2-sum__ta { width: 100%; font: 400 14.5px/1.7 var(--font-body); border: 1px solid #b5612e; border-radius: 10px; padding: 12px 14px; outline: none; resize: vertical; box-sizing: border-box; } /* Invulformulier onder een composer-antwoord (`form: 'missing_profile'`). Velden komen uit GET /candidates/{id}/missing-fields, gegroepeerd zoals de registry ze ordent -- bij een leeg profiel zijn dat er twintig, dus de groepskoppen zijn hier geen versiering maar de enige manier om de lijst scanbaar te houden. */ .mf { margin-top: 22px; padding-top: 18px; border-top: 1px solid #ececee; } .mf-groep { font: 600 10.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-quaternary); margin: 18px 0 8px; } .mf-groep:first-of-type { margin-top: 12px; } .mf-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .mf-row__l { font: 500 12px var(--font-body); color: var(--fg-secondary); } .mf-row__l em { font-style: normal; color: var(--fg-quaternary); } .mf-row input, .mf-row select, .mf-row textarea { font: 400 14px var(--font-body); color: var(--fg-primary); border: 1px solid #e2e2e6; border-radius: 9px; padding: 9px 12px; outline: none; background: var(--surface); width: 100%; box-sizing: border-box; } .mf-row textarea { resize: vertical; line-height: 1.5; } .mf-row input:focus, .mf-row select:focus, .mf-row textarea:focus { border-color: var(--fg-primary); } .mf-range { display: flex; align-items: center; gap: 7px; } .mf-range__pre, .mf-range__dash { color: var(--fg-tertiary); font-size: 13.5px; flex-shrink: 0; } .mf-note { font-size: 11.5px; color: var(--fg-quaternary); margin-top: 14px; line-height: 1.5; }