/* ============================================================================= ADR-Digitaal — admin styling In LogiDoc-stijl: donkere navy header, rode accentlijn, lichte grijze achtergrond met witte kaarten en gecategoriseerde secties. ============================================================================= */ :root { --c-navy: #1a2147; --c-navy-2: #232b58; --c-accent: #dc2626; --c-accent-2: #b91c1c; --c-bg: #f3f4f6; --c-card: #ffffff; --c-border: #e5e7eb; --c-border-2: #d1d5db; --c-text: #1f2937; --c-text-muted: #6b7280; --c-text-soft: #9ca3af; --c-link: #1e40af; --c-link-hover: #1d3578; --c-success-bg: #dcfce7; --c-success-bd: #86efac; --c-success-tx: #166534; --c-error-bg: #fee2e2; --c-error-bd: #fca5a5; --c-error-tx: #991b1b; /* Markering van definitietermen (anker-doel). Pas deze drie waarden aan om de kleur centraal te wijzigen — geldt voor admin én publiek. */ --c-def-bg: #fef3c7; --c-def-tx: inherit; --c-def-target: #fde68a; --radius: 6px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); } * { box-sizing: border-box; } /* body moet met de inhoud meegroeien, niet op één schermhoogte blijven staan: een position:sticky-element (de vastgezette bovenbalk) plakt alleen binnen de box van zijn ouder, en met height:100% eindigde die box na één scherm — dan liet de balk weer los. min-height houdt de volle-hoogte-layouts intact. */ html { height: 100%; } body { min-height: 100%; } body { margin: 0; font-family: var(--app-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); font-size: var(--app-fontsize, 15px); color: var(--c-text); background: var(--c-bg); line-height: 1.5; } a { color: var(--c-link); text-decoration: none; } a:hover { color: var(--c-link-hover); text-decoration: underline; } /* Verwijzingslinks (artikel, hoofdstuk, definitie) — vet en onderstreept zodat ze duidelijk opvallen tegen de gewone tekst; de kale link-kleur alleen was te moeilijk te zien. Geldt voor auto- én handmatige verwijzingen. */ a[data-art-ref], a[data-chap-ref], a[data-def-ref] { display: inline; background: transparent; color: var(--c-link); padding: 0; border-radius: 0; font-weight: 700; font-size: inherit; text-decoration: underline; } a[data-art-ref]:hover, a[data-chap-ref]:hover, a[data-def-ref]:hover { color: var(--c-link-hover); text-decoration: underline; } h1, h2, h3 { color: var(--c-navy); margin: 0 0 0.75rem; } h1 { font-size: 1.5rem; font-weight: 700; } h2 { font-size: 1.2rem; font-weight: 700; } /* ---------- Header ---------- */ .top { background: var(--c-navy); color: #fff; border-bottom: 3px solid var(--c-accent); } .top-inner { max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .top .brand { display: inline-flex; align-items: center; gap: 0.85rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; } .top .brand:hover { text-decoration: none; color: #fff; } .top .brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; } .top .brand .brand-mark svg, .top .brand .brand-mark img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } /* Bovenbalk vastzetten (opt-in per bezoeker, onthouden in localStorage door admin.js). Standaard scrollt de balk gewoon mee weg; wie 'm vastzet houdt de navigatie altijd in beeld zonder naar boven te scrollen. position: sticky geeft geen layout-shift. De klasse komt alleen op publieke pagina's op : de knop staat in de taakbalk, de admin krijgt de klasse nooit. z-index onder de modals/zwevende knoppen (8000+) maar boven de gewone paginainhoud. De eigen dropdowns van de balk (inhoudsopgave, versiekeuze) zitten binnen deze header en blijven dus vanzelf bovenop staan. */ body.header-sticky .top { position: sticky; top: 0; z-index: 900; } .top .admin-session { display: flex; align-items: center; gap: 1rem; } .top .admin-spring { display: inline-flex; align-items: center; gap: 0.35rem; } .top .admin-spring select, .top .admin-spring input { font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; } .top .admin-spring input { width: 11rem; } .top .admin-spring input::placeholder { color: rgba(255, 255, 255, 0.7); } .top .admin-spring select option { color: #1e293b; } .top .admin-spring input:focus, .top .admin-spring select:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; background: rgba(255, 255, 255, 0.2); } .top .admin-view-link { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; text-decoration: none; white-space: nowrap; } .top .admin-view-link:hover { color: #fff; text-decoration: none; } .top .session { display: flex; align-items: center; gap: 1rem; margin: 0; } .top .session .who { font-size: 0.9rem; color: rgba(255,255,255,0.85); } .top .session .who strong { color: #fff; font-weight: 600; } .top .session button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6); padding: 0.35rem 0.85rem; border-radius: var(--radius); font: inherit; font-size: 0.9rem; cursor: pointer; } .top .session button:hover { background: rgba(255,255,255,0.12); border-color: #fff; } /* ---------- Container ---------- */ .container { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; } /* ---------- Page header ---------- */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; } .page-header h1 { margin: 0; } /* ---------- Sectie-labels ---------- */ .section-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-soft); margin: 1.5rem 0 0.6rem; } .section-label:first-child { margin-top: 0; } /* ---------- Card grid (dashboard) ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .card-link { background: var(--c-card); border: 1px solid var(--c-border); border-left: 4px solid var(--c-navy); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; align-items: flex-start; gap: 0.9rem; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s; } .card-link:hover { border-color: var(--c-border-2); border-left-color: var(--c-accent); box-shadow: var(--shadow); text-decoration: none; color: inherit; transform: translateY(-1px); } .card-link .card-icon { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(26, 33, 71, 0.08); color: var(--c-navy); border-radius: var(--radius); } .card-link .card-icon svg { width: 20px; height: 20px; } .card-link .card-body { flex: 1; min-width: 0; } .card-link .card-title { display: block; font-weight: 700; color: var(--c-navy); margin-bottom: 0.1rem; } .card-link .card-desc { display: block; font-size: 0.88rem; color: var(--c-text-muted); } /* ---------- Generieke kaart-container ---------- */ .card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-padding { padding: 1.25rem 1.5rem; } /* ---------- Knoppen ---------- */ .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-disabled { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: var(--radius); font: inherit; font-size: 0.92rem; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent; line-height: 1.2; } .btn-primary, button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-link):not(.btn-link-danger) { background: var(--c-navy); color: #fff; border-color: var(--c-navy); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: var(--radius); font: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; line-height: 1.2; } .btn-primary:hover, button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-link):not(.btn-link-danger):hover { background: var(--c-navy-2); border-color: var(--c-navy-2); color: #fff; text-decoration: none; } /* Het hidden-attribuut moet altijd winnen. De knop-regels hierboven zetten een eigen display (inline-flex), en die sloeg anders het verbergen van bijvoorbeeld Opslaan en Verwijderen in de notitie-pop-up plat. */ [hidden] { display: none !important; } .btn-secondary { background: var(--c-card); color: var(--c-text); border-color: var(--c-border-2); } .btn-secondary:hover { border-color: var(--c-navy); color: var(--c-navy); text-decoration: none; } .btn-danger { background: transparent; color: var(--c-accent-2); border-color: var(--c-error-bd); } .btn-danger:hover { background: var(--c-error-bg); color: var(--c-accent-2); border-color: var(--c-accent); text-decoration: none; } /* ---------- Flash & error banners ---------- */ .flash { background: var(--c-success-bg); border: 1px solid var(--c-success-bd); color: var(--c-success-tx); padding: 0.7rem 0.9rem; border-radius: var(--radius); margin: 0 0 1rem; } .error { background: var(--c-error-bg); border: 1px solid var(--c-error-bd); color: var(--c-error-tx); padding: 0.7rem 0.9rem; border-radius: var(--radius); margin: 0 0 1rem; } /* ---------- Filter bar ---------- */ .filter { margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .filter label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--c-text-muted); font-size: 0.92rem; } /* Zelfde maatvoering als de publieke toolbar (.toolbar-inner): alle velden en knoppen even hoog, dezelfde afronding en tekstgrootte. Zonder dit kreeg een zoekveld de browserstandaard en stond het als een klein hokje naast een ruimere select. */ .filter select, .filter input[type="search"], .filter input[type="text"], .filter input[type="number"], .filter .btn-primary, .filter .btn-secondary { height: 2.5rem; box-sizing: border-box; font-size: 0.92rem; } .filter select, .filter input[type="search"], .filter input[type="text"], .filter input[type="number"] { padding: 0.4rem 0.85rem; border: 1px solid var(--c-border-2); border-radius: var(--radius); background: var(--c-card); font: inherit; font-size: 0.92rem; color: var(--c-text); } .filter input[type="search"] { width: 20rem; max-width: 100%; } .filter .btn-primary, .filter .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } /* ---------- Lijst-tabel ---------- */ .lijst-table { width: 100%; border-collapse: collapse; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .lijst-table th, .lijst-table td { padding: 0.7rem 0.95rem; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; } .lijst-table thead th { background: #f9fafb; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); font-weight: 600; } .lijst-table tbody tr:last-child td { border-bottom: 0; } .lijst-table tbody tr:hover { background: #fafbfc; } .lijst-table .nummer { font-weight: 600; color: var(--c-navy); white-space: nowrap; } .lijst-table .versie-pill { display: inline-block; background: rgba(26, 33, 71, 0.08); color: var(--c-navy); padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .lijst-table .preview { color: var(--c-text-muted); font-size: 0.92rem; } /* Niet-klikbare indicator dat een artikel een menu-titel heeft (in de navigatie staat). Zelfde knopvorm als de acties, maar grijs zodat duidelijk is dat het geen knop is. */ .btn-disabled { background: #f1f3f5; color: var(--c-text-muted); border-color: var(--c-border); cursor: default; } /* Volledige artikel-weergave in de admin-lijst: net als publiek, maar binnen de tabelcel gehouden zodat brede tabellen/afbeeldingen de layout niet breken. Geen grijze hover op de rij — leest als artikel, niet als klikbare lijstregel. */ /* Volledige artikel-weergave in de admin: identieke kaarten als publiek, met een actie-balk (nummer links, knoppen rechts) boven de inhoud. */ .admin-artikel .admin-artikel-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .admin-artikel .admin-artikel-bar h2 { margin: 0; } /* Tweede "+ Nieuw artikel"-knop onder de lijst, rechts uitgelijnd zoals de bovenste knop in de page-header. */ .lijst-footer-actie { margin-top: 1.25rem; display: flex; justify-content: flex-end; } .admin-artikel .admin-artikel-bar .acties { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .admin-artikel .admin-artikel-bar .acties form { margin: 0; } .admin-artikel .public-artikel-body img { max-width: 100%; height: auto; } .admin-artikel .public-artikel-body table { max-width: 100%; } .lijst-table .acties { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; white-space: nowrap; } .lijst-table .acties form { margin: 0; } .empty { background: var(--c-card); border: 1px dashed var(--c-border-2); padding: 1.5rem; border-radius: var(--radius); text-align: center; color: var(--c-text-muted); } /* ---------- Formulieren ---------- */ .form-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); } .form-card label { display: block; margin-bottom: 1rem; } .form-card label .lbl { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.92rem; color: var(--c-text); } .form-card select, .form-card input[type="text"], .form-card input[type="email"], .form-card input[type="search"], .form-card input[type="url"], .form-card input[type="number"], .form-card input[type="password"], .form-card textarea { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--c-border-2); border-radius: var(--radius); background: #fff; font: inherit; font-size: 0.95rem; color: var(--c-text); } .form-card select:focus, .form-card input:focus, .form-card textarea:focus { outline: 2px solid rgba(26, 33, 71, 0.25); outline-offset: 1px; border-color: var(--c-navy); } .form-card textarea { resize: vertical; min-height: 14rem; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.92rem; line-height: 1.55; } .form-card label.has-error select, .form-card label.has-error input, .form-card label.has-error textarea { border-color: var(--c-accent); background: #fff8f8; } .field-error { display: block; color: var(--c-error-tx); font-size: 0.85rem; margin-top: 0.35rem; } .field-hint { display: block; color: var(--c-text-muted); font-size: 0.85rem; margin-top: 0.35rem; } .form-card .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Knoppenbalk. Los van .form-card gedefinieerd, want hij komt ook buiten een formulier voor (resultaatschermen). Zonder de flex zakken een