diff --git a/VERSION b/VERSION index 7306e75..c6e4500 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.3.84-beta +0.3.85-beta diff --git a/public/css/teach.css b/public/css/teach.css index 07bf16a..15f31e6 100644 --- a/public/css/teach.css +++ b/public/css/teach.css @@ -1863,3 +1863,84 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo .sb-add input{flex-basis:100%} .bd-controls{grid-template-columns:1fr;max-height:180px} } + +/* ============================================================ + Zakelijk thema: Instellingen (#settingsModal) + Het bord blijft speels; het beheer is voor volwassenen. De ID-scope + verslaat alle .am- en .st-regels hierboven, dus dit blok kan alles + overschrijven zonder het bord of het ouderportaal te raken. + ============================================================ */ +#settingsModal{ + --control-h:32px; --radius:7px; --radius-s:6px; --radius-l:10px; + font-family:ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} +@media (pointer:coarse){ #settingsModal{--control-h:40px;} } +#settingsModal.st-modal{width:min(1100px,96vw);} +#settingsModal .st-head h2{font-size:16px; font-weight:650; letter-spacing:.2px;} +#settingsModal #stSearch{border-radius:var(--radius-s); background:var(--surface); font-size:13px;} +/* navigatie: neutraal, gedempte iconen, accent alleen als inzetlijn */ +#settingsModal .st-nav-btn{font-size:13.5px; font-weight:550; border-radius:var(--radius-s); padding:7px 10px;} +#settingsModal .st-nav-btn.active{background:var(--surface-3); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent);} +#settingsModal .st-nav-ico{filter:grayscale(1); opacity:.6; font-size:13px;} +#settingsModal .st-nav-btn.active .st-nav-ico{opacity:.9;} +#settingsModal .st-nav-group{font-size:10px; letter-spacing:.7px;} +#settingsModal .st-sec-title{font-size:15px; font-weight:650; display:flex; gap:8px; align-items:center;} +#settingsModal .st-sec-ico{filter:grayscale(1); opacity:.6; font-size:14px;} +#settingsModal .st-sec-sub{font-size:12px;} +#settingsModal .st-result{border-radius:var(--radius-s);} +/* platte rijen: scheidingslijnen i.p.v. losse pastel-pills - LET OP: geen + flex-direction hier, de bestaande mobiel-stack-regel moet blijven werken */ +#settingsModal .am-list{gap:0; border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; background:var(--surface);} +#settingsModal .am-row{ + background:transparent; border-radius:0; box-shadow:none; + border-bottom:1px solid var(--line); margin:0; padding:7px 10px; font-size:13.5px; +} +#settingsModal .am-list > .am-row:last-child, +#settingsModal .am-list > .am-add-wrap:last-child{border-bottom:none;} +#settingsModal .am-row:hover{background:var(--surface-2);} +#settingsModal .am-row-school{background:transparent; font-weight:600;} +#settingsModal .am-row-sub{border-left:none; border-radius:0; padding-left:30px; background:transparent;} +#settingsModal .am-name{font-size:13.5px; font-weight:600;} +#settingsModal .am-role{font-size:12.5px;} +/* groepskoppen: subtiele sticky sectierijen binnen de lijst */ +#settingsModal .am-group{ + position:sticky; top:0; z-index:2; margin:0; padding:7px 10px 5px; + background:var(--surface-2); border-bottom:1px solid var(--line); + font-size:11px; letter-spacing:.6px; color:var(--muted); +} +/* controls: vlak, omrand, compact */ +#settingsModal .am-inp, #settingsModal .am-sel, #settingsModal .am-pw{ + border-radius:var(--radius-s); font-size:13px; background:var(--surface); +} +#settingsModal .am-btn, #settingsModal .am-copy, #settingsModal .tbtn{ + border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); + font-size:12.5px; font-weight:550; box-shadow:none; padding:0 12px; +} +#settingsModal .am-btn:hover, #settingsModal .tbtn:hover{background:var(--surface-2);} +#settingsModal .am-btn.am-danger{background:transparent; border:1px solid var(--line); color:var(--red); font-weight:600;} +#settingsModal .am-btn.am-danger.armed{background:var(--red); border-color:var(--red); color:#fff;} +#settingsModal .am-edit{border:1px solid transparent; border-radius:var(--radius-s); font-size:12.5px; opacity:.75;} +#settingsModal .am-edit:hover{opacity:1; border-color:var(--line); background:var(--surface-2);} +#settingsModal .am-chip{border-radius:var(--radius-s); padding:3px 9px; font-size:12px;} +#settingsModal .am-result{ + background:transparent; border:1px solid var(--accent); color:var(--accent-ink); + border-radius:var(--radius-s); font-weight:600; padding:7px 11px; +} +#settingsModal .am-schoolbar{background:transparent; border:1px solid var(--line); border-radius:var(--radius-s); padding:6px 10px;} +#settingsModal .am-reset{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:none;} +#settingsModal .am-reset-row{background:transparent; border-radius:0; border-bottom:1px solid var(--line);} +#settingsModal .am-h3{font-size:12px; letter-spacing:.5px;} +#settingsModal .am-field-lbl{font-size:10px; letter-spacing:.5px;} +#settingsModal .am-add{border-radius:var(--radius-s);} +#settingsModal .am-add-wrap > .tbtn{border-style:dashed; color:var(--muted); font-weight:550;} +#settingsModal .am-add-wrap > .tbtn:hover{color:var(--ink);} +/* weergave-sectie: vlakke segmentknoppen */ +#settingsModal .seg{border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); padding:2px; box-shadow:none;} +#settingsModal .seg button{border-radius:5px; box-shadow:none; font-size:12.5px;} +#settingsModal .seg button.on{background:var(--surface-3); color:var(--ink); box-shadow:none;} +#settingsModal .vw-lbl{font-size:12.5px; font-weight:600;} +/* hoog contrast: de ID-scope verslaat de body.hc-regels, dus expliciet terug */ +body.hc #settingsModal .am-row{border-bottom:1.5px solid #000;} +body.hc #settingsModal .am-list, body.hc #settingsModal .am-reset, +body.hc #settingsModal .am-btn, body.hc #settingsModal .tbtn, +body.hc #settingsModal .am-inp, body.hc #settingsModal .am-sel{border-color:#000;} diff --git a/public/js/core.js b/public/js/core.js index 4a8a1da..f92ec3f 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -2,7 +2,7 @@ "use strict"; /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline). Kept in sync by hand with the VERSION file at the repo root on every release. */ -const VERSION = "0.3.84-beta"; +const VERSION = "0.3.85-beta"; (function(){ const tag = document.getElementById("verTag"); tag.textContent = "v"+VERSION; diff --git a/public/js/settings.js b/public/js/settings.js index e6a5e4b..b0b3315 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -90,7 +90,10 @@ function registerSettingsSection(sec){ ST_SECTIONS.push(sec); } searchInp.value = ""; nav.querySelectorAll(".st-nav-btn").forEach(b=>b.classList.toggle("active", b.dataset.section===id)); secHead.innerHTML = ""; - secHead.appendChild(el("div","st-sec-title", s.icon + " " + s.label())); + const title = el("div","st-sec-title"); + title.appendChild(el("span","st-sec-ico", s.icon)); + title.appendChild(el("span", null, s.label())); + secHead.appendChild(title); if(s.sub) secHead.appendChild(el("div","st-sec-sub", s.sub())); content.scrollTop = 0; await s.activate(payload);