/* ============================================================ Taalmaatje - app-specifieke CSS Geladen NA css-framework/dist/core.min.css en themes/oase.css. Gebruikt uitsluitend framework-tokens (var(--color-*), var(--space-*), ...) zodat light/dark mode automatisch mee flipt. ============================================================ */ /* ─── Dyslexievriendelijk lettertype (toggle zet .dyslexia-font op ) ─── Bestand: assets/fonts/OpenDyslexic-Regular.woff2 (officiële repo, SIL OFL). Ontbreekt het, dan valt de toggle stil terug op de gewone sans-serif. */ @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } body.dyslexia-font { --font-body: 'OpenDyslexic', sans-serif; --font-accent: 'OpenDyslexic', sans-serif; } /* :not(.material-icons) zodat een eventueel icoon-font niet in letters verandert */ body.dyslexia-font :not(.material-icons) { font-family: 'OpenDyslexic', sans-serif !important; font-style: normal !important; } /* ─── Tekstgrootte-schaal voor chatinhoud (knoppen A / A+ / A++) ─── */ :root { --chat-font-scale: 1; } /* ─── Woordmerk (templates/partials/logo.php) ─── Em-gebaseerd zodat nav, login en printbladen één partial delen. De tweede stem is in beide thema's geel (keuze van Jolan, besluit 77), zodat het merk in licht en donker hetzelfde beeld geeft. Let op: #fde047 haalt op een lichte grond ongeveer 1,2 : 1 contrast, dus daar draagt de blauwe helft de vorm. */ .brand { display: inline-flex; align-items: center; gap: var(--space-sm); } .brand-mark { height: 1.5em; width: auto; flex-shrink: 0; --logo-spark: var(--color-secondary); } .brand-name { font-family: var(--font-accent); font-weight: 600; } /* ─── Chatpagina-layout (app-shell zorgt voor 100dvh + iOS-toetsenbord) ─── */ .chat-main { background: var(--color-surface-sunken); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-lg); } .chat-card { flex: 1; min-height: 0; /* laat .chat-messages intern scrollen */ width: 100%; max-width: 700px; display: flex; flex-direction: column; overflow: hidden; } /* Op desktop wordt .app-shell height:auto; geef de kaart dan een begrensde hoogte zodat het invoerveld vastgepind blijft en de berichten intern scrollen. */ @media (min-width: 1025px) { .chat-card { height: min(calc(100dvh - 8.5rem), 45rem); flex: none; } } .chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); } .chat-footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-surface); } .chat-form { display: flex; gap: var(--space-sm); align-items: flex-end; } .chat-form .input { flex: 1; } .chat-form .btn { flex-shrink: 0; } .char-count { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-xs); } .char-count.warning { color: var(--color-error); font-weight: 600; } .chat-footnote { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); } .transcript-note { white-space: nowrap; } /* Budget-teller: verschijnt pas wanneer het resterend aantal vragen laag wordt */ .credits-chip { margin-top: var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-warning-dark); background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface)); border-radius: var(--radius-sm); padding: 2px var(--space-md); } .credits-chip.depleted { color: var(--color-error-dark); background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); } /* ─── Chatbubbels - gedeeld door de leerlingchat én de admin-gespreksweergave ─── */ /* Eenvoudige verticale stapel (admin-gesprekdetail); de leerlingchat gebruikt .chat-messages */ .message-list { display: flex; flex-direction: column; gap: var(--space-sm); } .message { max-width: 80%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); line-height: 1.5; word-wrap: break-word; font-size: calc(var(--text-sm) * var(--chat-font-scale)); } .message-user { align-self: flex-end; background: var(--color-primary-100); color: var(--color-primary-900); border-bottom-right-radius: var(--radius-sm); } .message-bot { align-self: flex-start; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); } .message-error { align-self: center; background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); color: var(--color-error-dark); font-size: var(--text-xs); text-align: center; } /* Geblokkeerd bericht in het admin-dashboard (dark-mode-veilig via tokens) */ .message-blocked { border: 1px solid var(--color-error); } .message-meta { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-text-muted); } /* Markdown-typografie binnen een botbubbel */ .message-bot p { margin: 0 0 0.4em; } .message-bot p:last-child { margin-bottom: 0; } .message-bot ul, .message-bot ol { margin: 0.3em 0; padding-left: 1.4em; } .message-bot li { margin-bottom: 0.2em; } .message-bot strong { font-weight: 700; } .message-bot code { background: var(--color-primary-100); color: var(--color-primary-900); padding: 0.1em 0.3em; border-radius: var(--radius-sm); font-size: 0.9em; } .message-bot br { display: block; content: ""; margin-top: 0.3em; } /* ─── Typindicator ─── */ .typing-indicator { align-self: flex-start; display: flex; gap: 4px; padding: var(--space-sm) var(--space-md); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-sm); } .typing-dot { width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; animation: typingBounce 1.4s ease-in-out infinite; } .typing-dot:nth-child(2) { background: var(--color-accent-3); animation-delay: 0.2s; } .typing-dot:nth-child(3) { background: var(--color-accent-4); animation-delay: 0.4s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .typing-dot { animation: none; opacity: 0.6; } } /* ─── Welkomstblok ─── */ .welcome-message { text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); border-radius: var(--radius-md); } .welcome-message .brand-mark { height: 2.2rem; margin-bottom: var(--space-sm); } .welcome-message h2 { font-family: var(--font-accent); color: var(--color-primary-dark); margin-bottom: var(--space-sm); font-size: var(--text-xl); } .welcome-message p { font-size: calc(var(--text-base) * var(--chat-font-scale)); max-width: 420px; margin: 0 auto; line-height: 1.6; } /* ─── Tekstgrootte-knoppen in het navigatiemenu ─── */ .font-scale-control { display: inline-flex; align-items: center; gap: var(--space-xs); } .font-scale-control .flex { gap: var(--space-xs); } /* ─── Smalle leescontainer (bv. "Mijn woorden") ─── */ .container-narrow { max-width: 46rem; } /* ─── Admin: eenvoudige verticale staafgrafiek (activiteit per dag) ─── */ .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: var(--space-md); } .bar-chart-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .bar-chart-bar { width: 70%; min-height: 2px; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-400)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .bar-chart-col:hover .bar-chart-bar { background: var(--color-primary-600); } .bar-chart-day { font-size: 10px; color: var(--color-text-muted); line-height: 1; } /* ─── Admin: woordfrequentie (meest opgezochte woorden) ─── Cyclische accenttinten; tekst in de -dark variant zodat dark mode klopt */ .word-cloud { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .word-cloud .count { font-weight: 700; opacity: 0.7; } .word-cloud .chip:nth-child(4n+2) { background: color-mix(in srgb, var(--color-accent-2) 12%, var(--color-surface)); color: var(--color-accent-2-dark); } .word-cloud .chip:nth-child(4n+3) { background: color-mix(in srgb, var(--color-accent-3) 12%, var(--color-surface)); color: var(--color-accent-3-dark); } .word-cloud .chip:nth-child(4n) { background: color-mix(in srgb, var(--color-accent-4) 12%, var(--color-surface)); color: var(--color-accent-4-dark); } /* ─── Gecentreerde login-pagina's (leerlingcode, personeel, wachtwoord) ─── */ .login-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-surface-sunken); padding: var(--space-lg); } .login-card-wrap { width: 100%; max-width: 420px; } .login-title { font-family: var(--font-accent); font-size: var(--text-2xl); color: var(--color-primary-dark); } /* Leerlinglogin als merkmoment: gradient-rand rond de kaart (dubbele background: binnenvlak in padding-box, gradient in border-box) */ .login-card-brand { border: 2px solid transparent; background: linear-gradient(var(--color-surface-raised), var(--color-surface-raised)) padding-box, var(--gradient-brand) border-box; } /* Leerlingcode-invoer: groot, mono, gecentreerd */ .code-input { font-family: var(--font-mono); text-align: center; text-transform: uppercase; letter-spacing: 0.25em; font-size: var(--text-xl); } /* Navigatie-knop die eruitziet als een gewone nav-link (uitloggen via POST) */ .btn-as-link { background: none; border: 0; cursor: pointer; font: inherit; } /* ─── Codeblad: printbare kaartjes met leerlingcodes ─── */ .code-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); } .code-card { border: 2px dashed var(--color-border-strong); /* kniplijn */ border-radius: var(--radius-md); padding: var(--space-lg); text-align: center; break-inside: avoid; background: var(--color-surface-raised); } .code-card-school { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-sm); } .code-card-name { font-weight: 700; margin-bottom: var(--space-sm); } .code-card-code { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.15em; color: var(--color-primary-dark); margin-bottom: var(--space-sm); } .code-card-url { font-size: var(--text-xs); color: var(--color-text-secondary); } @media print { .code-sheet { grid-template-columns: repeat(2, 1fr); gap: 8mm; } .code-card { border-color: #999; print-color-adjust: exact; } } /* ─── Leerlingpagina: zelfstandigheidssignalen (richting, geen oordeel) ─── */ .trend-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); } .trend-row:last-of-type { border-bottom: 0; } .trend-label { font-size: var(--text-sm); } .trend-values { font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; } .trend-values strong { color: var(--color-text); } .trend-arrow { margin: 0 var(--space-xs); font-size: var(--text-xs); } .trend-up { color: var(--color-info); } .trend-down { color: var(--color-info); } .trend-flat { color: var(--color-text-muted); } /* ─── Printbare studeerlijst (retrieval practice: betekenis zelf invullen) ─── */ .study-sheet { max-width: 52rem; } .study-sheet-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-lg); border-bottom: 2px solid var(--color-primary-dark); padding-bottom: var(--space-md); margin-bottom: var(--space-lg); } .study-sheet-title { font-family: var(--font-accent); font-size: var(--text-2xl); } .study-table th:nth-child(1) { width: 30%; } .study-table th:nth-child(2) { width: 20%; } .study-table td { vertical-align: bottom; } .study-fill { min-height: 1.8rem; border-bottom: 1px dashed var(--color-border-strong); } .study-star { color: var(--color-warning-dark); margin-left: var(--space-xs); } @media print { .study-table th, .study-table td { border-color: #999 !important; } .study-fill { border-color: #999; } }