/* ========================================================================== Thema's -- licht & donker, Claude-achtige warme kleuren met #72b280 als accent. Het thema wordt gezet via data-theme op (zie theme.js), bewaard in localStorage, met een fallback op prefers-color-scheme. Foto-overlays (badges, lightbox, detail-nav, ...) gebruiken een vaste "scrim" i.p.v. het thema, want ze liggen bovenop foto's van wisselende helderheid, niet op de paginakleur. ========================================================================== */ :root, [data-theme="light"] { --bg: #faf9f5; --bg-rgb: 250, 249, 245; --fg: #2b2a27; --muted: #8a8778; --card-bg: #ffffff; --border: #e8e6da; --input-bg: #f4f2ea; --shadow: rgba(61, 58, 47, 0.08); --shadow-strong: rgba(61, 58, 47, 0.18); --accent: #72b280; --accent-hover: #5f9e6d; --accent-fg: #ffffff; --accent-soft: rgba(114, 178, 128, 0.14); --accent-gradient: linear-gradient(135deg, #8bc39a 0%, #72b280 100%); } [data-theme="dark"] { /* Neutraal grijs (R=G=B) i.p.v. de warme, licht groenige ondertoon van hiervoor -- belangrijk om foto's kleurzuiver te kunnen beoordelen, zonder dat de omringende interface de perceptie beïnvloedt. */ --bg: #18181a; --bg-rgb: 24, 24, 26; --fg: #f0f0f0; --muted: #9a9a9a; --card-bg: #212123; --border: #3a3a3d; --input-bg: #121213; --shadow: rgba(0, 0, 0, 0.4); --shadow-strong: rgba(0, 0, 0, 0.6); --accent: #72b280; --accent-hover: #83bd90; --accent-fg: #17231a; --accent-soft: rgba(114, 178, 128, 0.2); --accent-gradient: linear-gradient(135deg, #7ebb8b 0%, #67a675 100%); } /* Vaste, thema-onafhankelijke schrim voor bedieningselementen boven foto's -- ook neutraal grijs (i.p.v. warm) zodat deze bediening, die rechtstreeks over de foto ligt, de kleurbeoordeling niet beïnvloedt. */ :root { --scrim: rgba(24, 24, 24, 0.55); --scrim-strong: rgba(16, 16, 16, 0.9); --on-scrim: #f5f5f5; } @font-face { font-family: "Stack Sans Headline"; src: url("/fonts/StackSansHeadline-Variable.woff2") format("woff2-variations"), url("/fonts/StackSansHeadline-Variable.ttf") format("truetype-variations"); font-weight: 200 700; font-style: normal; font-display: swap; } @font-face { font-family: "Stack Sans Text"; src: url("/fonts/StackSansText-Variable.woff2") format("woff2-variations"), url("/fonts/StackSansText-Variable.ttf") format("truetype-variations"); font-weight: 200 700; font-style: normal; font-display: swap; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: "Stack Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--fg); transition: background 0.2s ease, color 0.2s ease; } /* Duwt de footer altijd tegen de onderkant van het venster, ook als de inhoud (login-scherm, lege galerij, ...) niet de hele hoogte vult -- in plaats van meteen onder de laatste foto/rij te plakken. */ .center-screen, #gallery, #admin-app, #review-app { flex: 1 0 auto; } h1, h2, h3, .header-overlay h1 { font-family: "Stack Sans Headline", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 700; } /* --- Zachte lijn-iconen --- */ .icon { width: 20px; height: 20px; display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon-sm { width: 16px; height: 16px; } /* --- Laad-icoontje voor knoppen tijdens een fetch/await (bv. inloggen) --- */ @keyframes icon-spin-rotate { to { transform: rotate(360deg); } } .icon-spin { animation: icon-spin-rotate 0.7s linear infinite; transform-origin: center; } .is-loading { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; cursor: default; opacity: 0.85; } .with-icon { display: inline-flex; align-items: center; gap: 6px; } button, .btn { font-family: inherit; } /* --- Thema-toggle (licht/donker) --- */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } .theme-toggle-corner { position: fixed; top: 16px; right: 16px; z-index: 20; } .center-screen { /* Bewust GEEN eigen min-height:100vh -- .center-screen is al een flex:1 0 auto kind van (die zelf min-height:100vh heeft), dus hij vult vanzelf de volledige resterende hoogte NA de footer. Met een eigen 100vh erbovenop werd de pagina altijd hoger dan het venster en stond de footer pas zichtbaar na scrollen. */ display: flex; align-items: center; justify-content: center; padding: 24px; } /* Enkel op de homepage: kaart links uitlijnen i.p.v. gecentreerd, zodat het midden van de achtergrondfoto's (waar meestal het onderwerp staat) niet achter de kaart verdwijnt. Andere .center-screen-schermen (admin/review- login) blijven gewoon gecentreerd. */ .center-screen-left { justify-content: flex-start; padding-left: 8vw; } @media (max-width: 700px) { /* Op een smal scherm is er toch geen ruimte om ernaast nog iets van de foto te tonen -- dan gewoon terug centreren zoals overal elders. */ .center-screen-left { justify-content: center; padding-left: 24px; } } /* --- Homepage: afwisselende achtergrondfoto's (zoals WeTransfer), uit een vaste Dropbox-map -- puur decoratief, dus altijd volledig achter de inhoud en met een donkere schrim voor voldoende contrast met de kaart. --- */ .bg-slideshow { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #111214; } .bg-slideshow::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 14, 0.45); } .bg-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; } .bg-slide.active { opacity: 1; } .login-box { position: relative; background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 8px 28px var(--shadow); padding: 40px; border-radius: 20px; max-width: 380px; width: 100%; text-align: center; } /* --- Account-overlay: enkel getoond wanneer nodig (beoordelen, reageren, downloaden) i.p.v. een verplichte landingspagina -- de galerij zelf is altijd meteen zichtbaar zonder account. --- */ .account-overlay { position: fixed; inset: 0; background: var(--scrim-strong); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 400; overflow-y: auto; } .account-overlay.open { display: flex; } /* .login-box button { width:100%; border-radius:10px; ... } heeft hogere specificiteit (0,1,1) dan .detail-close (0,1,0) en zou die anders overal overschrijven -- twee klassen samen (0,2,0) winnen alsnog, zonder !important nodig te hebben. */ .login-box .account-modal-close { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--scrim); border: 1px solid rgba(251, 250, 246, 0.3); color: var(--on-scrim); } .login-box .account-modal-close:hover { background: var(--scrim-strong); } .link-btn { background: none; border: none; padding: 0; color: var(--accent); font-size: inherit; font-family: inherit; cursor: pointer; text-decoration: underline; } .personal-link-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left; } .personal-link-panel p { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; } .personal-link-row { display: flex; gap: 8px; margin-bottom: 14px; } #personal-link-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.8rem; } #personal-link-copy { width: auto; /* .login-box button zet width:100%, dat verdrukt anders het link-veld ernaast */ padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-weight: 600; cursor: pointer; flex-shrink: 0; } #personal-link-copy:hover { border-color: var(--accent); color: var(--accent); } #personal-link-done { width: 100%; padding: 12px 14px; border-radius: 10px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-size: 1rem; font-weight: 600; cursor: pointer; } .login-box h1 { font-size: 1.3rem; margin-bottom: 8px; } #invite-title { margin-bottom: 22px; } .login-box p { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; } /* --- Merknaam "Klik-klik" boven het onboardingscherm --- */ .brand-wordmark { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: "Stack Sans Headline", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--fg); margin-bottom: 18px; } .brand-icon { width: 40px; height: 40px; display: block; } /* Op de homepage staat enkel het logo (geen "Klik-klik"-tekst ernaast) -- iets groter zodat het als volwaardig merkteken op zichzelf staat. */ .brand-wordmark-solo { margin-bottom: 22px; } .brand-icon-lg { width: 56px; height: 56px; } .brand-by { font-family: "Stack Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 0.75rem; color: var(--muted); } .login-box form { text-align: left; } .field-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; } .login-box input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 1rem; margin-bottom: 14px; } .login-box button { width: 100%; padding: 12px 14px; border-radius: 10px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-size: 1rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s ease; } .login-box button:hover:not(:disabled) { opacity: 0.92; } .login-box button:disabled { opacity: 0.6; cursor: default; } .error-msg { color: #c9564f; font-size: 0.85rem; margin-top: 10px; min-height: 1em; } /* Drie kolommen: Beoordeling (label / knoppen / telling, onder elkaar), Tags (label + knoppen samen op één regel, wrapt als één geheel) en Selecteren/downloaden + thema-knop. Alle drie kolommen staan gewoon in de normale flex-volgorde (geen margin-left:auto of position:absolute meer) zodat ze bij het verkleinen van het venster netjes links uitgelijnd onder elkaar wrappen i.p.v. dat de laatste kolom los aan de rechterkant blijft hangen. */ header.gallery-header { position: sticky; top: 0; z-index: 10; background: rgba(var(--bg-rgb), 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px 24px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px 32px; border-bottom: 1px solid var(--border); } header.gallery-header h1 { font-size: 1.05rem; margin: 0; } .header-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .header-col-tags { padding-top: 1px; /* optisch uitlijnen met het label van de Beoordeling-kolom */ } /* Onderaan uitgelijnd (i.p.v. bovenaan) zodat de knoppen hier op dezelfde lijn staan als de filter-/tagknoppen van de andere kolommen, die zelf onder een label staan en dus pas in hun tweede rij beginnen. Op volle breedte (desktop) duwt margin-left:auto deze kolom naar de rechterrand van de balk, los van Beoordeling/Tags. */ .header-col-actions { flex-direction: row; align-items: center; gap: 12px; align-self: flex-end; margin-left: auto; } .header-filters-label { color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Label + telling ("X/Y foto's beoordeeld") samen op één lijn boven de filterknoppen van de Beoordeling-kolom. */ .header-col-label-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } /* Thema-knop staat nu gewoon mee in de knoppenrij van de Selecteren/ downloaden-kolom i.p.v. los in de hoek -- blijft wel even groot als elders (36px cirkel), maar zonder eigen position:absolute. */ .theme-toggle-header { flex-shrink: 0; } header.gallery-header .count { color: var(--muted); font-size: 0.85rem; font-weight: 200; } .gallery-header-body { display: flex; flex-wrap: wrap; gap: 20px 32px; width: 100%; } /* Op mobiel neemt Beoordelen/Tags/Selecteren samen al gauw drie volle rijen in -- dat drukt de eerste foto's ver naar onder. De toggle-knop blijft altijd zichtbaar (staat er bewust bovenaan), de rest klapt standaard dicht en is met één tik weer open. Op een breder scherm blijft alles gewoon zoals voorheen. */ .header-collapse-toggle { display: none; } @media (max-width: 700px) { header.gallery-header { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px; } .header-collapse-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 8px 2px; font-size: 0.85rem; font-weight: 600; color: var(--fg); cursor: pointer; } .header-collapse-toggle .chevron { color: var(--muted); transition: transform 0.15s ease; } .header-collapse-toggle.open .chevron { transform: rotate(180deg); } .gallery-header-body { display: none; flex-direction: column; gap: 16px; padding: 4px 2px 12px; } .gallery-header-body.open { display: flex; } /* In de gestapelde mobiele weergave staat elke kolom onder elkaar -- de rechts-uitlijning (margin-left:auto) is dan enkel voor volle breedte bedoeld en zou hier een rare inspringing geven. */ .header-col-actions { align-self: flex-start; margin-left: 0; } } /* --- Feedback-overzicht: Notion-achtige tabel -- elke foto is een rij, status/tags zijn rechtstreeks in de tabel aanpasbaar, kolommen zijn sorteerbaar en er kan gegroepeerd worden op status of tag. Een foto openen (thumbnail of reacties-cel) toont de grote foto + alle details (status, tags, volledige reactiegeschiedenis) in een zijpaneel. --- */ #review-app.admin-wrap { max-width: 1200px; } /* --- "Branding bewerken" en "Bekijk feedback" zijn nu één pagina: deze sectie bovenaan toont + laat bewerken wat de klant in de gallerij te zien krijgt (klantnaam, projectnaam, datum, header-afbeelding, logo). --- */ .branding-section { padding: 24px 24px 28px; border-bottom: 1px solid var(--border); } .branding-header-preview { position: relative; width: 100%; min-height: 140px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #2a2a2e, #18181a) center/cover no-repeat; margin-bottom: 20px; display: flex; align-items: flex-end; } /* Altijd een donkere schrim, ongeacht of er al een echte foto ingesteld is -- zo blijft de tekst in beide gevallen zonder extra logica leesbaar. */ .branding-header-preview::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); } .branding-header-overlay { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: #fff; } .branding-header-overlay h1 { margin: 0; font-size: 1.3rem; } .branding-header-overlay .muted { color: rgba(255, 255, 255, 0.75); } .branding-logo-preview { max-height: 44px; max-width: 130px; object-fit: contain; background: #fff; padding: 5px 10px; border-radius: 8px; flex-shrink: 0; } .branding-form { max-width: 640px; } .branding-form input[type="file"] { padding: 8px 0; border: none; background: none; } /* --- Filtermenu: Beoordeling en Tags elk op een eigen rij (i.p.v. door elkaar/naast elkaar), met duidelijke ruimte ertussen -- rustiger dan de 3-koloms indeling van de klantgalerij, en past beter bij een tabel met veel foto's eronder. --- */ header.gallery-header.review-filters-header { flex-direction: column; align-items: stretch; gap: 18px; } .review-filter-row { display: flex; flex-direction: column; gap: 8px; } .review-toolbar { display: flex; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 24px 10px; } .review-select-all { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--muted); cursor: pointer; } .review-select-all input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; } .review-group-control { display: flex; align-items: center; gap: 8px; } .review-group-control select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.82rem; cursor: pointer; } .review-count { margin-left: auto; } .review-table-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 100px; overflow-x: auto; } .review-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .review-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--bg); z-index: 1; } .review-table th.sortable { cursor: pointer; user-select: none; } .review-table th.sortable:hover { color: var(--fg); } .review-table th.sortable .sort-arrow { margin-left: 3px; opacity: 0.7; } .review-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .review-table tr.review-tr:hover td { background: var(--input-bg); } .review-table tr.review-tr.selected td { background: rgba(74, 144, 217, 0.08); } .review-table .col-check { width: 34px; } .review-table .col-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; } .review-table .col-thumb { width: 56px; } .review-table-thumb { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--input-bg); display: block; } .review-table-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .review-table-thumb:hover img { transform: scale(1.08); } .review-table .col-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .review-table .col-comments { white-space: nowrap; } .comments-cell-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--fg); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .comments-cell-btn:hover { background: var(--card-bg); } .comments-cell-btn.empty { color: var(--muted); font-weight: 400; } .comments-cell-btn .icon { width: 14px; height: 14px; } /* Groepskop-rij (bv. "Afgewerkt (6)") wanneer er gegroepeerd wordt op status of tags -- overspant alle kolommen. */ .review-group-row td { background: var(--input-bg); font-weight: 600; font-size: 0.8rem; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } /* Tags-cel: bestaande tags als kleine chips + een popover (hergebruikt het .tag-dropdown-patroon van de bulkbalk) om ze per foto aan/uit te vinken zonder een aparte rij te hoeven openen. */ .table-tag-dropdown { position: relative; } .table-tags-btn { display: flex; flex-wrap: wrap; gap: 4px; background: none; border: none; padding: 2px; cursor: pointer; text-align: left; max-width: 220px; } .reviewer-chip.tag-chip.small { font-size: 0.75rem; padding: 2px 8px; } /* Eén blok per reviewer (met een verwijderknop voor al zijn/haar feedback op deze foto), met daarbinnen elke actie (reactie of beoordelings- wijziging) als eigen regel. Wordt nu getoond in het lightbox-zijpaneel i.p.v. inline onder een rij. */ .feed-item + .feed-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .feed-meta { font-size: 0.85rem; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } .feed-body { min-width: 0; } .feed-log-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; } .feed-log-line p { margin: 0; font-size: 0.85rem; word-wrap: break-word; } .feed-log-line .muted { flex-shrink: 0; white-space: nowrap; } .feed-delete { margin-left: 4px; display: inline-flex; vertical-align: middle; background: none; border: none; color: var(--muted); cursor: pointer; } .feed-delete:hover { color: #c9564f; } @media (max-width: 720px) { .review-table .col-name { max-width: 120px; } .review-toolbar { flex-wrap: wrap; } .review-count { margin-left: 0; } } .heart { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--scrim); color: var(--on-scrim); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; user-select: none; } .heart.active { background: var(--accent-gradient); } /* --- Filterbalk --- */ .filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .filter-bar button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.8rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .filter-bar button:hover { border-color: var(--accent); } .filter-bar button.active { background: var(--accent-gradient); border-color: var(--accent); color: var(--accent-fg); } /* --- Sterren + commentaar op een foto --- */ .stars { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 1px; background: var(--scrim); border-radius: 8px; padding: 4px 6px; } .star { font-size: 1rem; color: rgba(251, 250, 246, 0.4); cursor: pointer; line-height: 1; } .star.filled { color: #ffc93c; } .avg-badge { position: absolute; top: 8px; left: 8px; background: var(--scrim); color: #ffc93c; font-size: 0.75rem; padding: 3px 7px; border-radius: 8px; } .comment-btn { position: absolute; bottom: 8px; right: 8px; background: var(--scrim); color: var(--on-scrim); font-size: 0.8rem; padding: 4px 8px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 4px; } /* --- Reactie-modal --- */ .modal-overlay { position: fixed; inset: 0; background: var(--scrim-strong); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 460px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; position: relative; box-shadow: 0 12px 40px var(--shadow-strong); } .modal-box h2 { margin: 0 0 12px; font-size: 1.1rem; } .modal-close { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: none; border: none; color: var(--muted); cursor: pointer; } .modal-close:hover { color: var(--fg); background: var(--input-bg); } .comment-list { overflow-y: auto; margin-bottom: 14px; flex: 1; } .comment-item { border-bottom: 1px solid var(--border); padding: 10px 0; } .comment-item p { margin: 4px 0 0; font-size: 0.9rem; } #comment-input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-family: inherit; font-size: 0.9rem; margin-bottom: 10px; resize: vertical; } #comment-save-btn { padding: 10px 14px; border-radius: 10px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-weight: 600; cursor: pointer; } .lightbox { position: fixed; inset: 0; background: var(--scrim-strong); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; } /* Zijpaneel naast de grote foto: "de rij openen" zoals een Notion-record -- status/tags rechtstreeks aanpasbaar + volledige reactiegeschiedenis, i.p.v. dat enkel de foto op groot formaat te zien is. */ .lightbox-body { display: flex; align-items: stretch; gap: 20px; max-width: 1100px; width: 100%; max-height: 88vh; } .lightbox-image-wrap { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; } .lightbox-panel { width: 320px; flex-shrink: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; overflow-y: auto; max-height: 88vh; color: var(--fg); display: flex; flex-direction: column; gap: 14px; } .lightbox-panel:empty { display: none; } .lightbox-panel-name { font-size: 0.9rem; font-weight: 600; word-break: break-all; } .lightbox-panel-section { display: flex; flex-direction: column; gap: 8px; } .lightbox-panel-feed { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 860px) { .lightbox-body { flex-direction: column; overflow-y: auto; max-height: 92vh; } .lightbox-image-wrap img { max-height: 50vh; } .lightbox-panel { width: 100%; max-height: none; } } .lightbox .close, .lightbox .nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--on-scrim); cursor: pointer; background: rgba(251, 250, 246, 0.1); border: none; transition: background 0.15s ease; } .lightbox .close:hover, .lightbox .nav:hover { background: rgba(251, 250, 246, 0.2); } .lightbox .close { top: 16px; right: 24px; } .lightbox .nav.prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox .nav.next { right: 16px; top: 50%; transform: translateY(-50%); } .hidden { display: none !important; } /* --- Subtiele footer, plakt tegen de onderkant van het venster (zie de flex-regels op body hierboven) i.p.v. tegen de laatste rij inhoud --- */ .site-footer { flex-shrink: 0; text-align: center; padding: 20px 16px; font-size: 0.78rem; font-weight: 200; color: var(--muted); } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--accent); } .spinner { border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; width: 28px; height: 28px; animation: spin 0.8s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Admin --- */ .admin-wrap { max-width: 860px; margin: 0 auto; padding: 0 16px 60px; } /* Merkbalk bovenaan: logo + "Klik-klik / Beheer" links, uitloggen rechts -- geeft het beheer meteen hetzelfde herkenbare uiterlijk als de rest van de site i.p.v. een kale "Shoots beheren"-titel. */ .admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 4px 18px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .admin-topbar-brand { display: flex; align-items: center; gap: 12px; } .admin-topbar-logo { width: 34px; height: 34px; display: block; } .admin-topbar-titles { display: flex; flex-direction: column; line-height: 1.3; } .admin-topbar-titles strong { font-family: "Stack Sans Headline", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.05rem; } /* Tabs: Shoots / Gebruikers -- vervangt de losse "Gebruikers beheren"-knop door een duidelijke, herkenbare navigatie tussen de twee hoofdweergaven. */ .admin-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .admin-tab { padding: 10px 4px; margin-right: 20px; border: none; background: none; color: var(--muted); font-size: 0.92rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transform: translateY(1px); } .admin-tab:hover { color: var(--fg); } .admin-tab.active { color: var(--fg); border-bottom-color: var(--accent); } .admin-section { margin-top: 32px; } .admin-section h2 { font-size: 1.05rem; margin-bottom: 12px; } .admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .admin-section-head h2 { margin-bottom: 0; } .admin-section-head-actions { display: flex; gap: 8px; flex-wrap: wrap; } #new-shoot-btn { padding: 8px 14px; border-radius: 10px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-weight: 600; cursor: pointer; } /* Aanmaakformulier als net 2-koloms rooster i.p.v. één lange kolom velden -- Klantnaam en de "Shoot aanmaken"-knop nemen de volle breedte. */ .admin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; max-width: 560px; } .admin-form .full-row, .admin-form > button.full-row { grid-column: 1 / -1; } @media (max-width: 560px) { .admin-form { grid-template-columns: 1fr; } } .admin-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--muted); } .admin-form input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 1rem; } .pw-row { display: flex; gap: 8px; } .pw-row input { flex: 1; } .pw-row button, .admin-form > button { padding: 10px 14px; border-radius: 10px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-weight: 600; cursor: pointer; } .create-result { margin-top: 16px; background: var(--card-bg); border: 1px solid var(--border); padding: 16px; border-radius: 12px; font-size: 0.9rem; } .create-result code { background: var(--input-bg); padding: 2px 6px; border-radius: 4px; } .shoot-row { display: flex; justify-content: space-between; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); padding: 16px 18px; border-radius: 14px; margin-bottom: 10px; flex-wrap: wrap; gap: 12px; box-shadow: 0 2px 10px var(--shadow); } .shoot-row-main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; flex: 1; } .shoot-row-main .avatar { width: 42px; height: 42px; font-size: 0.85rem; margin-top: 2px; } .shoot-row-info { min-width: 0; flex: 1; } .shoot-row-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .shoot-row-title strong { font-size: 1rem; } .shoot-row-project { color: var(--muted); font-size: 0.9rem; } .shoot-row-link { margin-top: 2px; word-break: break-all; } .shoot-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } .muted { color: var(--muted); } .small { font-size: 0.8rem; } /* --- Gebruikers-overzicht (admin) --- */ .user-row { display: flex; justify-content: space-between; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); padding: 16px 18px; border-radius: 14px; margin-bottom: 10px; flex-wrap: wrap; gap: 12px; box-shadow: 0 2px 10px var(--shadow); } .user-row-main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; flex: 1; } .user-row-main .avatar { width: 42px; height: 42px; font-size: 0.85rem; margin-top: 2px; } .user-row-info { min-width: 0; flex: 1; } .user-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } .user-actions button { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.8rem; font-weight: 600; cursor: pointer; } .user-actions button:hover { border-color: var(--accent); } .user-actions button.danger { color: #c9564f; } /* --- Wie heeft de galerij al bekeken (per shoot, admin-only) --- */ .viewers-block { margin-top: 8px; } .viewers-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; } /* --- Generiek dropdown-menu (bv. de acties per shoot in het beheer) --- */ .dropdown { position: relative; display: inline-block; } .dropdown-toggle { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.8rem; font-weight: 600; cursor: pointer; } .dropdown-toggle:hover { border-color: var(--accent); } .dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; min-width: 200px; box-shadow: 0 6px 24px var(--shadow-strong); z-index: 60; } .dropdown-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: none; background: none; color: var(--fg); font-size: 0.85rem; font-family: inherit; cursor: pointer; text-decoration: none; } .dropdown-item:hover { background: var(--input-bg); } .dropdown-item.danger { color: #c9564f; } .reviewer-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; min-height: 30px; } .reviewer-chip { background: var(--input-bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: 0.7rem; color: var(--fg); } .reviewer-chip.muted { color: var(--muted); border-style: dashed; } .tag-chip { background: var(--accent-gradient); color: var(--accent-fg); border-color: var(--accent); display: inline-flex; align-items: center; gap: 4px; } .tag-editor { margin-bottom: 14px; } .tag-editor .pw-row { margin-top: 8px; } .tag-remove { margin-left: 2px; cursor: pointer; display: inline-flex; } .tag-remove .icon { width: 13px; height: 13px; } /* --- Vooraf gedefinieerde tag-lijst (Notion-achtige multiselect) -- eigen "balk" onder het filtermenu, met ruim wat ademruimte en links uitgelijnd op dezelfde positie als de Beoordeling-/Tags-labels erboven (zelfde 24px horizontale padding als .review-filters-header). --- */ .tags-instellen-row { padding: 22px 24px 26px; gap: 12px; } .tag-manager-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .tag-manager-body .reviewer-chips { padding: 0; min-height: 0; } .tag-manager-body .pw-row { max-width: 360px; } .tag-checklist { display: flex; flex-wrap: wrap; gap: 6px; } .tag-chip-toggle { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .tag-chip-toggle.active { background: var(--accent-gradient); border-color: var(--accent); color: var(--accent-fg); } /* --- Meerdere foto's selecteren + bulk taggen --- */ .select-mode-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.8rem; cursor: pointer; } .select-mode-btn.active { background: var(--accent-gradient); border-color: var(--accent); color: var(--accent-fg); } .review-thumb.selectable { cursor: pointer; } .review-thumb.selected { outline: 2px solid var(--accent); outline-offset: -2px; } .select-checkbox { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 8px; background: var(--scrim); border: 1px solid rgba(251, 250, 246, 0.5); color: #ffc93c; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .select-checkbox .icon { width: 14px; height: 14px; stroke: var(--on-scrim); } .bulk-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 14px 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 24px var(--shadow-strong); z-index: 150; flex-wrap: wrap; justify-content: center; } /* Op mobiel is de .bulk-bar standaard net breed genoeg voor haar inhoud -- te smal om de twee downloadknoppen (Web/HD) naast elkaar te laten staan, dus wrapten ze onder elkaar. Breder maken (dicht tegen de schermbreedte) geeft ze wel de ruimte, met het label op zijn eigen regel erboven. */ @media (max-width: 560px) { .bulk-bar { width: calc(100vw - 32px); max-width: 420px; } .bulk-download-label { flex-basis: 100%; text-align: center; } } /* Elke rij (selectie-acties / downloads) neemt de volle breedte van de .bulk-bar in, zodat ze onder elkaar staan i.p.v. door elkaar te wrappen -- zonder de flex-layout van .bulk-bar zelf aan te passen (die wordt ook op review.html hergebruikt voor een ander, één-rij menu). */ .bulk-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; flex-basis: 100%; } .bulk-bar-close { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--card-bg); color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px var(--shadow); } .bulk-bar-close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } #bulk-count { font-size: 0.85rem; color: var(--muted); } .bulk-download-label { font-size: 0.8rem; color: var(--muted); } /* Basisstijl voor knoppen in de bulk-bar (bv. "Tags toevoegen" op review.html) -- op gallery.html wordt dit specifieker overschreven door .bulk-download-btn / .select-mode-btn hieronder. */ .bulk-bar button { padding: 8px 14px; border-radius: 999px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } /* Bewust duidelijk anders dan Selectie wissen/Alles selecteren (die de neutrale .select-mode-btn stijl hergebruiken): dit zijn de knoppen die echt iets downloaden, dus zwart/opvallend met downloadicoon. */ .bulk-bar .bulk-download-btn { padding: 9px 16px; border-radius: 999px; border: none; background: #17161a; color: #fbfaf6; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .bulk-bar .bulk-download-btn:hover { opacity: 0.88; } .bulk-bar .bulk-download-btn:disabled { opacity: 0.4; cursor: not-allowed; } .bulk-bar .select-mode-btn { background: var(--input-bg); color: var(--fg); border: 1px solid var(--border); } .tag-dropdown { position: relative; } .tag-dropdown-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 220px; max-width: 280px; box-shadow: 0 6px 24px var(--shadow-strong); } .tag-dropdown-checklist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; } .tag-dropdown-apply { padding: 9px 12px; border-radius: 8px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-weight: 600; font-size: 0.85rem; cursor: pointer; } .tag-dropdown-apply:disabled { opacity: 0.5; cursor: default; } /* --- Header-banner (per-project titelfoto + logo) --- */ .header-banner { position: relative; width: 100%; height: 280px; overflow: hidden; } .header-banner img#header-img { width: 100%; height: 100%; object-fit: cover; display: block; } .header-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 32px; gap: 10px; } /* --- Klik-klik logo, linksboven op de headerfoto zelf --- */ .header-brand-corner { position: absolute; top: 16px; left: 20px; z-index: 2; } .header-brand-corner img { height: 26px; width: auto; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)); } .header-overlay h1 { color: white; font-size: 2rem; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .header-subtitle { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin: -6px 0 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .header-copyright { color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } .header-logo { max-height: 56px; max-width: 200px; object-fit: contain; } /* --- Fotogrid: echte Pinterest-achtige masonry (kolommen), geen witruimte onder kortere foto's. Elke foto valt in de eerstvolgende open plek in zijn kolom -- de browser regelt dit zelf via CSS-kolommen. --- */ .masonry { columns: 220px; column-gap: 12px; padding: 16px; } .masonry-item { position: relative; break-inside: avoid; margin-bottom: 12px; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--card-bg); } .masonry-item img { width: 100%; height: auto; display: block; transition: transform 0.2s ease; } .masonry-item:hover img { transform: scale(1.02); } /* --- Laadscherm terwijl de foto's (met tijdelijke Dropbox-links) worden opgehaald -- zonder dit stond de pagina er tot dan toe kaal bij. --- */ .grid-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 80px 16px; color: var(--muted); font-size: 0.9rem; } .grid-loading .icon { width: 32px; height: 32px; color: var(--accent); } /* --- Detail-overlay: foto bovenaan, sterren/tags/reacties eronder. .detail-scroll (niet dit element) is de scrollbare laag -- zo blijft de feed/reactie-invoer altijd bereikbaar, ook op een klein scherm. --- */ .detail-overlay { position: fixed; inset: 0; background: var(--scrim-strong); display: none; z-index: 300; } .detail-overlay.open { display: block; } .detail-scroll { height: 100%; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; padding: 64px 20px 40px; box-sizing: border-box; } .detail-image-wrap { position: relative; width: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--card-bg); min-width: 0; padding: 20px 20px 0; box-sizing: border-box; } .detail-image-wrap img { max-width: 100%; max-height: 50vh; object-fit: contain; display: block; } .detail-downloads { display: flex; gap: 10px; } .detail-downloads a { background: var(--input-bg); border: 1px solid var(--border); color: var(--fg); padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .detail-downloads a:hover { border-color: var(--accent); color: var(--accent); } .detail-tags { display: flex; flex-wrap: wrap; gap: 6px; } .detail-info { width: 100%; max-width: 820px; /* KERN VAN DE COMMENTS-BUG: .detail-info is een flex-item van .detail-scroll, dat een vaste hoogte heeft (100dvh) + overflow-y:auto. Flex-items mogen standaard KRIMPEN (flex-shrink:1) om binnen die vaste hoogte te passen -- en omdat .detail-info hieronder overflow:hidden heeft (nodig om de foto-hoeken af te ronden), werd alles wat niet meer paste stilzwijgend WEGGEKNIPT i.p.v. dat .detail-scroll erover kon scrollen. flex-shrink:0 dwingt .detail-info om zijn volledige, natuurlijke inhoudshoogte te behouden, zodat de reactie-feed altijd volledig aanwezig is en bereikbaar blijft via scrollen. */ flex-shrink: 0; background: var(--card-bg); border: 1px solid var(--border); color: var(--fg); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .detail-body { display: flex; flex-direction: column; gap: 14px; padding: 20px; } .detail-stars { display: flex; gap: 2px; } .avg-score { font-size: 0.85rem; color: var(--muted); font-weight: 600; } /* --- Onder de foto: 3 kolommen, consequent met de gallerij-header (Beoordeling / Tags / Downloaden) -- per kolom het label op één lijn, de knoppen/pills op de lijn eronder. --- */ .detail-action-cols { display: flex; gap: 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .detail-action-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 130px; } .detail-action-col .detail-tags:empty::after { content: "Geen tags"; font-size: 0.85rem; color: var(--muted); } /* Op een smal scherm is er geen ruimte voor 3 kolommen naast elkaar zonder dat ze rommelig door elkaar wrappen -- Beoordeling/Tags/Downloaden komen dan gewoon na elkaar onder elkaar te staan, in dezelfde volgorde. */ @media (max-width: 700px) { .detail-action-cols { flex-direction: column; gap: 16px; } .detail-action-col { min-width: 0; } } .detail-feed-section { display: flex; flex-direction: column; gap: 14px; } /* --- Goedkeuren / afkeuren / favoriet: drie onafhankelijke knoppen met aantal reviewers erbij, i.p.v. één 1-5 sterrenrating --- */ .rate-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .rate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--input-bg); color: var(--muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .rate-btn .icon { width: 16px; height: 16px; } .rate-btn.approve.active { background: rgba(47, 165, 113, 0.15); border-color: #2fa571; color: #2fa571; } .rate-btn.reject.active { background: rgba(201, 86, 79, 0.15); border-color: #c9564f; color: #c9564f; } .rate-btn.favorite.active { background: rgba(255, 201, 60, 0.18); border-color: #d9a419; color: #d9a419; } .rate-btn.favorite.active .icon { fill: #d9a419; } /* --- Badges op thumbnails: hoeveel reviewers goedgekeurd/afgekeurd/ favoriet hebben aangeduid --- */ .rate-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; } .rate-badge { display: flex; align-items: center; gap: 3px; background: var(--scrim); color: var(--on-scrim); font-size: 0.75rem; font-weight: 600; padding: 3px 7px; border-radius: 8px; } .rate-badge .icon { width: 12px; height: 12px; } .rate-badge.approve { color: #6fd9a0; } .rate-badge.reject { color: #e8918c; } .rate-badge.favorite { color: #ffc93c; } .rate-badge.favorite .icon { fill: #ffc93c; } /* Zelfde badges, maar dan inline in het admin-overzicht (tabelcel, feed-regel, lightbox-paneel) -- geen scrim/overlay nodig, staat niet op de foto zelf. */ .rate-badges.inline .rate-badge { background: var(--input-bg); border: 1px solid var(--border); } .rate-badges.inline .rate-badge.approve { color: #2fa571; } .rate-badges.inline .rate-badge.reject { color: #c9564f; } .rate-badges.inline .rate-badge.favorite { color: #d9a419; } .rate-badges.inline .rate-badge.favorite .icon { fill: #d9a419; } .rate-badges.inline:empty::after { content: "Nog geen reacties"; font-size: 0.8rem; color: var(--muted); font-weight: 400; } /* Zelfde badges, maar inline in de tekst (bv. in een feed-item naast de naam van de reviewer) i.p.v. als overlay op een foto */ .rate-badges.inline { position: static; display: inline-flex; vertical-align: middle; margin-left: 6px; } /* --- Productiestatus per foto (admin-only) --- */ .status-select { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 0.78rem; cursor: pointer; } .status-select.set-eerste_versie { border-color: #c98a2d; color: #c98a2d; } .status-select.set-afgewerkt { border-color: #2fa571; color: #2fa571; } /* Bewust GEEN eigen max-height/overflow hier: dat gaf een geneste scroll-regio binnen .detail-scroll, en op sommige (vooral mobiele) browsers "vangt" de binnenste scroll de swipe-gebaren weg zonder door te geven aan de buitenste -- daardoor leek de reactie-feed onbereikbaar/ verdwenen. De feed groeit nu gewoon mee met de rest van het paneel en scrollt samen met de hele detailweergave. */ .detail-feed { min-height: 40px; } /* Activiteitenlog: reacties EN beoordelingswijzigingen als aparte, chronologische regels (i.p.v. gegroepeerd per reviewer), met telkens een lijntje ertussen -- zoals een chatgeschiedenis. */ .feed-line { padding: 12px 0; border-bottom: 1px solid var(--border); } .feed-line:last-child { border-bottom: none; } .feed-line-head { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; margin-bottom: 4px; } .feed-line p { margin: 0; font-size: 0.9rem; word-wrap: break-word; } /* Kruisje om een EIGEN reactie terug te verwijderen -- staat enkel op regels die van de ingelogde reviewer zelf zijn (zie gallery.js). */ .feed-line-delete { margin-left: auto; display: inline-flex; flex-shrink: 0; background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; } .feed-line-delete:hover { color: #c9564f; } .feed-line-delete .icon { width: 14px; height: 14px; } /* Klein badge-label (icoon + tekst) om ergens middenin een zin een beoordeling aan te duiden, bv. "Gaf de beoordeling '✓ Goedgekeurd' aan deze foto." */ .log-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; vertical-align: -3px; } .log-badge .icon { width: 14px; height: 14px; } .log-badge.approved { background: rgba(47, 165, 113, 0.15); color: #2fa571; } .log-badge.rejected { background: rgba(201, 86, 79, 0.15); color: #c9564f; } .log-badge.favorite { background: rgba(255, 201, 60, 0.18); color: #d9a419; } .log-badge.favorite .icon { fill: #d9a419; } #detail-comment-input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-family: inherit; font-size: 0.9rem; margin-bottom: 10px; resize: vertical; } #detail-comment-save { padding: 10px 14px; border-radius: 10px; border: none; background: var(--accent-gradient); color: var(--accent-fg); font-weight: 600; cursor: pointer; } .detail-close { /* Zit nu bovenop de foto/kaart (var(--card-bg), kan wit zijn) i.p.v. op de donkere volledige-scherm-schrim -- daarom een echte (deels doorzichtige) donkere achtergrond nodig i.p.v. het bijna-onzichtbare "wit op wit" van daarvoor. */ position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--on-scrim); cursor: pointer; background: var(--scrim); border: 1px solid rgba(251, 250, 246, 0.3); z-index: 5; transition: background 0.15s ease; } .detail-close:hover { background: var(--scrim-strong); } /* Vroeger position:fixed t.o.v. het venster (top:50vh) -- dat lijkt op een lang scherm netjes naast de foto te staan, maar zodra de kaart hoger is dan de viewport (zeker op mobiel, met de acties/reacties eronder) klopt "50% van het venster" niet meer met waar de foto zelf staat. Nu gewoon absoluut binnen .detail-image-wrap (die position:relative heeft) -- staat daardoor altijd écht naast de foto, ook bij scrollen. Zelfde schrim-achtergrond als .detail-close voor voldoende contrast. */ .detail-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--on-scrim); cursor: pointer; background: var(--scrim); border: 1px solid rgba(251, 250, 246, 0.3); transition: background 0.15s ease; z-index: 5; } .detail-nav.prev { left: 12px; } .detail-nav.next { right: 12px; } .detail-nav:hover { background: var(--scrim-strong); } /* --- Avatar met initialen --- */ .avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 700; }