/* Alpine.js: verbergt elementen tot Alpine ze geïnitialiseerd heeft, zodat er geen onbewerkte {{ }}-achtige flits te zien is bij een trage verbinding. */ [x-cloak] { display: none !important; } :root { --page-plane: #0d0d0d; --surface-1: #1a1a19; --surface-2: #232322; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --border-hairline: rgba(255, 255, 255, 0.10); --gridline: #2c2c2a; --accent: #3987e5; --status-good: #0ca30c; --status-critical: #d03b3b; --status-warning: #fab219; /* Standaard hetzelfde systeemlettertype als hieronder bij body — theme_css.php (zie admin/theme.php) overschrijft dit als de eigenaar een ander lettertype kiest; zonder die keuze verandert er dus niets. */ --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--page-plane); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.5; } /* Sticky footer: alleen op pagina's die een .site-footer renderen (public.php, public_stream.php) — andere pagina's (dashboard.php, login.php, ...) delen dit stylesheet maar hebben geen footer, dus die blijven ongemoeid. De body wordt een kolom van minstens de volledige viewporthoogte; margin-top: auto op de footer duwt 'm naar beneden als de inhoud korter is dan het scherm, en laat 'm gewoon meestromen zodra de inhoud lang genoeg is. */ body:has(.site-footer) { display: flex; flex-direction: column; min-height: 100vh; } body:has(.site-footer) .site-footer { margin-top: auto; } /* StreamTop-merkbanner als vaste (fixed) paginaachtergrond — blijft zichtbaar achter de kaarten terwijl je scrolt, niet alleen bovenin. Kaarten (.public-card e.d.) hebben zelf een ondoorzichtige achtergrond, dus de leesbaarheid van de inhoud verandert niet; alleen de ruimte eromheen toont de foto. Gebruikt op public.php/public_stream.php/dashboard.php — zie hun . */ body.page-bg-banner { background: linear-gradient(180deg, rgba(8, 12, 22, 0.6) 0%, rgba(8, 12, 22, 0.75) 100%), url('img/header-banner.jpg') center top / cover no-repeat fixed; } a { color: var(--accent); } .container { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-hairline); background: var(--surface-1); } .topbar a { color: var(--text-primary); text-decoration: none; font-weight: 600; } .topbar nav a { color: var(--text-secondary); font-weight: 400; margin-left: 20px; } .topbar nav a:hover { color: var(--text-primary); } .brand-link { text-decoration: none; } /* Merkbeeld (icoon + wordmark), volledig in HTML/CSS — geen losse afbeelding */ .brand-mark { display: inline-flex; flex-direction: column; gap: 2px; } .brand-mark-row { display: flex; align-items: center; gap: 10px; } .brand-mark-icon { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #79bbff, #1c4e8c 75%); color: #fff; box-shadow: 0 2px 10px rgba(57, 135, 229, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5); flex-shrink: 0; } .brand-mark-text { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; line-height: 1; } .bm-stream { color: #fff; } .bm-pulse { background: linear-gradient(90deg, #6db8ff, #b79cf7); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-mark-sm .brand-mark-text { font-size: 17px; } .brand-mark-md .brand-mark-text { font-size: 23px; } .brand-mark-lg .brand-mark-text { font-size: 30px; } .brand-mark-tagline { font-family: 'Dancing Script', cursive; font-size: 17px; color: #a9cdf5; margin-left: 64px; margin-top: -4px; } .auth-brand { text-align: center; margin-bottom: 18px; } /* Glanzende rechthoekige nav-knoppen (bijv. Inloggen/Registreren op de publieke pagina) */ .nav-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 10px; font-weight: 700; font-size: 13px; font-family: inherit; text-decoration: none; color: #fff; border: 1px solid rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -8px 10px rgba(0, 0, 0, 0.2); transition: transform 0.12s ease, filter 0.12s ease; } .nav-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); pointer-events: none; } .nav-btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; } .nav-btn-primary { background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%); } .nav-btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.02)); color: #dce8fb; border-color: rgba(255, 255, 255, 0.3); } /* flex-wrap:wrap is bewust toegevoegd (was er niet): zonder wrap bleven alle knoppen in ÉÉN ononderbroken rij staan (white-space:nowrap op .nav-btn, en een flex-item krimpt standaard niet onder zijn eigen inhoud), wat op de gewone paginaheaders met maar 2-4 knoppen toevallig nooit opviel maar bij het beheerpaneel (adminNavHtml() in includes/functions.php, tot 11 knoppen) op een telefoon een eindeloze horizontaal scrollende rij veroorzaakte i.p.v. gewoon netjes af te breken naar een volgende regel. */ .header-auth { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } h1 { font-size: 22px; margin: 0 0 4px; } h2 { font-size: 17px; margin: 0 0 12px; } p.muted, .muted { color: var(--text-muted); font-size: 13px; } .card { background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 20px; margin-bottom: 16px; } /* width i.p.v. een vaste max-width: schaalt mee met (heel) brede schermen i.p.v. altijd hetzelfde aantal pixels te blijven, en blijft dankzij min()/94vw ook op een telefoon netjes binnen de rand. */ .auth-card { width: min(94vw, 720px); margin: 64px auto; padding: 48px; } /* Ruimere invoervelden dan de rest van de site (die delen dit stylesheet, bewust ongemoeid) — past beter bij deze bredere kaart. */ .auth-card .field input[type="text"], .auth-card .field input[type="email"], .auth-card .field input[type="password"] { padding: 14px 16px; font-size: 16px; } .auth-card .field label { font-size: 14px; } .auth-card button[type="submit"] { padding: 13px 20px; font-size: 15px; } /* Dun laadbalkje bovenaan zowat elke pagina — vult bij het laden van de pagina en opnieuw bij het versturen van een formulier (zie assets/page-progress.js, gedeeld door alle pagina's die dit gebruiken). Bewust nooit tot 100% bij versturen: de pagina navigeert normaal gesproken weg zodra de server klaar is. */ #page-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), #7c3aed); box-shadow: 0 0 8px rgba(57, 135, 229, 0.6); z-index: 9999; transition: width 0.25s ease, opacity 0.4s ease; } #page-progress.is-done { opacity: 0; } /* Wachtwoordsterkte-balk onder het wachtwoordveld op register.php. */ .password-strength { height: 5px; border-radius: 3px; background: var(--surface-2); margin-top: 8px; overflow: hidden; } .password-strength-fill { height: 100%; width: 0%; border-radius: 3px; transition: width 0.25s ease, background-color 0.25s ease; } .password-strength-label { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; min-height: 14px; } /* Kleinere kaarten naast elkaar in een grid i.p.v. onder elkaar (admin.php) — alleen grote kaarten (grafiek, grote tabellen) blijven los/vol-breed. */ .admin-card-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; } .admin-card-grid > .card { flex: 1 1 380px; min-width: 0; margin-bottom: 0; } .admin-card-grid > .card table { display: block; overflow-x: auto; } /* Gekleurde bovenrand per kaart (bijv. admin/analytics.php) — puur om elke sectie in één oogopslag uit elkaar te houden, zelfde kaart verder ongemoeid. Optioneel te gebruiken, dus geen effect op kaarten zonder deze klasse. */ .card-accent-blue { border-top: 3px solid #3987e5; } .card-accent-purple { border-top: 3px solid #7c3aed; } .card-accent-teal { border-top: 3px solid #17a398; } .card-accent-orange { border-top: 3px solid #e5822f; } .card-accent-pink { border-top: 3px solid #e5399e; } .card-accent-amber { border-top: 3px solid #d1a219; } .card-accent-green { border-top: 3px solid #0ca30c; } .card-accent-discord { border-top: 3px solid #5865f2; } /* KPI-blokken (admin/users.php, admin/analytics.php) — op verzoek van de eigenaar ("mooier met meerdere blokken"): de belangrijkste kerncijfers bovenaan een beheerpagina niet als platte tekst of een pil-vormige chip, maar als eigen kaartje met kleuraccent + icoon, zodat ze in één oogopslag uit elkaar te houden zijn — hergebruikt bewust .card/.card-accent-* hieronder (zelfde achtergrond/rand/radius als de rest van het beheerpaneel) plus het bolletje-icoon van .stat-icon, i.p.v. een compleet nieuwe stijl. */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; } .kpi-block { padding: 16px 18px; margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; } .kpi-block-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi-block-icon { width: 34px; height: 34px; } .kpi-block-icon svg { width: 16px; height: 16px; } .kpi-block-value { font-size: 25px; font-weight: 800; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; } .kpi-block-label { font-size: 12px; color: var(--text-muted); } /* Icoonkleur per kaart-accentkleur — zelfde 8 kleurverlopen als .stat-chip hierboven, nu gekoppeld aan de .card-accent-* klasse van het blok i.p.v. aan de n-de positie in de rij (zo blijft de kleur ook kloppen als een optioneel blok, bijv. "meeste bezoekers uit", er wel of niet bij staat). */ .card-accent-blue .kpi-block-icon { background: linear-gradient(180deg, #6bb3ff, #2f6fd6 55%, #1e4f8f); } .card-accent-purple .kpi-block-icon { background: linear-gradient(180deg, #c9a6ff, #7c3aed 55%, #4c1d95); } .card-accent-teal .kpi-block-icon { background: linear-gradient(180deg, #7de6e0, #17a398 55%, #0b6158); } .card-accent-orange .kpi-block-icon { background: linear-gradient(180deg, #ffbb66, #e5822f 55%, #a85416); } .card-accent-pink .kpi-block-icon { background: linear-gradient(180deg, #ff9ecf, #e5399e 55%, #921f66); } .card-accent-amber .kpi-block-icon { background: linear-gradient(180deg, #ffe27a, #d1a219 55%, #8a6c11); } .card-accent-green .kpi-block-icon { background: linear-gradient(180deg, #7de07d, #2fb02f 55%, #158715); } .card-accent-discord .kpi-block-icon { background: linear-gradient(180deg, #8b93ff, #5865f2 55%, #333aa8); } /* Subtiele zebra/hover op tabellen binnen een kaart — maakt rijen iets makkelijker te volgen zonder fel te worden ("netter" i.p.v. drukker). */ .card table.plain tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); } .card table.plain tbody tr:hover { background: rgba(255, 255, 255, 0.05); } .field { margin-bottom: 14px; } /* Twee .field's naast elkaar i.p.v. onder elkaar (bijv. verzoek-link + telefoonnummer) — flex-basis + wrap zorgt dat ze vanzelf weer onder elkaar vallen op een smal scherm, zonder aparte media query nodig te hebben. */ .field-row { display: flex; gap: 16px; flex-wrap: wrap; } .field-row > .field { flex: 1 1 220px; min-width: 0; } .field label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field select, .field textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--border-hairline); border-radius: 6px; font-size: 14px; background: var(--surface-2); color: var(--text-primary); } .field select { cursor: pointer; } .field textarea { resize: vertical; font-family: inherit; } .checkbox-field label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); } .checkbox-field input { width: auto; } /* Categorieën: checkbox-grid i.p.v. een