c86abcf794
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 32s
- Onzichtbare knoppen opgelost: .tbtn houdt standaard witte tekst (wit-op-blauw), maar in het beheer staat hij op een lichte achtergrond -> tekst was wit-op-wit. Nu expliciet donkere tekst; de primaire accentknop houdt bewust witte tekst - Systeemmanager kreeg standaard "alle scholen" waardoor klassen leeg leken en niet toe te voegen waren; er wordt nu meteen een concrete school gekozen (klassen/gebruikers direct gevuld). Contextbalk laat wisselen; "alle scholen" blijft een bewuste keuze - Lege school toont nu een duidelijke uitleg dat bestaande klassen bij een andere school kunnen horen, met verwijzing naar de schoolkeuze - Correcte gegevensregels: classes.school_id is NOT NULL met ON DELETE CASCADE, dus een klas kan niet "los" bestaan (die eerdere aanname is teruggedraaid). Een klas is nu te VERPLAATSEN naar een andere school (PATCH weigert null/ongeldig); een verwijderde school neemt zijn klassen mee (cascade) - dat verklaart verdwenen klassen - Bij een leerling naar een andere school koppelen blijft de klas behouden als die al bij de doelschool hoort - Verificatie uitgebreid met een echte kleurcontrast-scan (vangt wit-op-wit) over alle secties + de default-school-flow; alle 94 servertests en 8 Playwright-suites groen Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0149FgUQvuwxKKEdvQGmNngF
2082 lines
153 KiB
CSS
2082 lines
153 KiB
CSS
/* teach - alle opmaak
|
||
Ontwerptaal "teachus.today": minimalistisch, vlakke kleuren uit het uil-logo,
|
||
ronde typografie (Quicksand), dunne lijnen, uniforme control-hoogtes. */
|
||
@font-face{
|
||
font-family:"Quicksand";
|
||
src:url("../fonts/quicksand.woff2") format("woff2");
|
||
font-weight:300 700; font-display:swap;
|
||
}
|
||
:root{
|
||
/* logo-palet (vlakke kleuren, geen neon) */
|
||
--navy:#1d3461; --blue:#2f6fe4; --blue-d:#2456b8; --teal:#18c5c0;
|
||
--cyan:#3ac2e8; --pink:#e83e8c; --purple:#8b5cf6; --orange:#f28c38;
|
||
--red:#e0554d; --green:#3fae6a; --yellow:#f7c948;
|
||
--wood:#f6e7c9; --wood-d:#e8d2a4;
|
||
/* semantisch (licht thema) */
|
||
--bg:#f4f7fb; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e3e9f4;
|
||
--panel:var(--surface);
|
||
--ink:#1d3461; --muted:#71809b; --line:#e2e8f2;
|
||
--accent:var(--teal); --accent-ink:#0d6e6b; --accent-soft:#e2f8f7;
|
||
--red-soft:#fbe3e1;
|
||
/* glas-laag (bord/widgets) */
|
||
--glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.92);
|
||
--glass-line:rgba(255,255,255,.6);
|
||
/* maten: alle "vakken" even hoog */
|
||
--control-h:40px; --radius-s:8px; --radius:12px; --radius-l:18px;
|
||
--shadow-1:0 1px 3px rgba(29,52,97,.08); --shadow-2:0 12px 32px rgba(29,52,97,.16);
|
||
--shadow:var(--shadow-2);
|
||
--tbar:58px;
|
||
/* minimale tikzones voor touch (WCAG/iOS-richtlijn) */
|
||
--tap:44px; --tap-sm:36px;
|
||
}
|
||
/* donker thema: zelfde tokens, andere waarden (schakelbaar in Instellingen) */
|
||
body.dark{
|
||
--bg:#0f1626; --surface:#18213a; --surface-2:#202b49; --surface-3:#2a3757;
|
||
--ink:#e8edf7; --muted:#8fa0bf; --line:#2c3a5e;
|
||
--accent-ink:#7fe6e2; --accent-soft:#153a44; --red-soft:#4a2330;
|
||
--glass:rgba(24,33,58,.6); --glass-strong:rgba(24,33,58,.92);
|
||
--glass-line:rgba(255,255,255,.08);
|
||
--shadow-1:0 1px 3px rgba(0,0,0,.35); --shadow-2:0 12px 32px rgba(0,0,0,.5);
|
||
}
|
||
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
|
||
*::-webkit-scrollbar{width:8px; height:8px;}
|
||
*::-webkit-scrollbar-thumb{background:#c3cfde; border-radius:4px;}
|
||
body.dark ::-webkit-scrollbar-thumb{background:#3a4a70;}
|
||
*::-webkit-scrollbar-track{background:transparent;}
|
||
html,body{height:100%; margin:0; overflow:hidden;}
|
||
body{
|
||
font-family:"Quicksand","Segoe UI Rounded","Arial Rounded MT Bold",ui-rounded,"Segoe UI",Verdana,sans-serif;
|
||
background:var(--bg); color:var(--ink); user-select:none;
|
||
}
|
||
input,textarea{user-select:text;}
|
||
/* weergave-instelling "minder beweging" */
|
||
body.no-motion *,body.no-motion *::before,body.no-motion *::after{
|
||
transition-duration:0s !important; animation-duration:0s !important;
|
||
}
|
||
/* ---------- Menubalk ---------- */
|
||
#toolbar{
|
||
position:fixed; top:0; left:0; right:0; height:var(--tbar); z-index:5000;
|
||
background:var(--surface); border-bottom:1px solid var(--line);
|
||
display:flex; align-items:center; gap:8px; padding:0 14px;
|
||
overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
|
||
}
|
||
#toolbar::-webkit-scrollbar{display:none;}
|
||
#zoomPct{min-width:56px; padding:0 8px; font-size:13px; text-align:center;}
|
||
#zoomPct.on{background:var(--accent-soft); color:var(--accent-ink);}
|
||
#btnZoomIn:disabled,#btnZoomOut:disabled{opacity:.35; cursor:default;}
|
||
/* logo: uil (SVG) + woordmerk "teachus.today" in merk-kleuren */
|
||
.logo{display:flex; align-items:center; gap:9px; line-height:1; flex:none;}
|
||
.logo-owl{width:34px; height:30px; display:block;}
|
||
.logo-word{font-size:21px; font-weight:700; letter-spacing:.2px; white-space:nowrap;}
|
||
.logo-word .lw-teach{color:var(--ink);}
|
||
.logo-word .lw-us{color:var(--teal);}
|
||
.logo-word .lw-dot{color:var(--orange);}
|
||
.logo-word .lw-today{
|
||
background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink),var(--orange));
|
||
-webkit-background-clip:text; background-clip:text; color:transparent;
|
||
}
|
||
#verTag{font-size:10.5px; font-weight:700; color:var(--muted);}
|
||
#verTag.beta{color:#fff; background:var(--orange); padding:1px 7px; border-radius:var(--radius-s);}
|
||
#toolbar .spacer{flex:1;}
|
||
.tbtn{
|
||
border:none; border-radius:var(--radius); min-height:var(--control-h);
|
||
padding:0 14px; font:inherit; font-weight:700;
|
||
background:var(--accent); color:#fff; cursor:pointer; font-size:14.5px;
|
||
}
|
||
.tbtn:hover{filter:brightness(.94);}
|
||
.tbtn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
|
||
.tbtn.ghost:hover{background:var(--surface-3); filter:none;}
|
||
/* bewapende bevestigingsstap (reservekopie herstellen e.d.) */
|
||
.tbtn.danger{background:var(--red, #d33); color:#fff; border-color:transparent;}
|
||
/* in de menubalk zelf zijn ghost-knoppen transparant (rustiger beeld) */
|
||
#toolbar .tbtn.ghost{background:transparent; border:none;}
|
||
#toolbar .tbtn.ghost:hover{background:var(--surface-2);}
|
||
.tbtn:disabled{opacity:.55; cursor:default;}
|
||
#btnSave{min-width:150px; text-align:center;}
|
||
#btnSave.ok{background:var(--green); color:#fff;}
|
||
/* mislukte (auto)save: blijft rood staan tot een save wél lukt */
|
||
#toolbar #btnSave.err{background:var(--red); color:#fff;}
|
||
#btnUser.on{background:var(--accent-soft); color:var(--accent-ink);}
|
||
#langToggle{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
|
||
#langToggle button{
|
||
border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700;
|
||
cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px;
|
||
}
|
||
#langToggle button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
|
||
/* ---------- Board ---------- */
|
||
#board{position:absolute; inset:var(--tbar) 0 0 0; overflow:hidden;}
|
||
#board.bg-dots{
|
||
background-image:radial-gradient(circle,#c9d6e5 1.4px,transparent 1.4px);
|
||
background-size:26px 26px;
|
||
}
|
||
/* board background line options */
|
||
#board.bg-blank{background-image:none;}
|
||
#board.bg-lines{background-image:repeating-linear-gradient(#0000 0 39px, #b9cbe3 39px 40px);}
|
||
#board.bg-write{background-image:repeating-linear-gradient(
|
||
#0000 0 19px,#cddcf0 19px 20px,#0000 20px 39px,#8aa8cf 39px 40.5px,#0000 40.5px 59px,#cddcf0 59px 60px,#0000 60px 79px);}
|
||
#board.bg-grid-s{background-image:
|
||
repeating-linear-gradient(#0000 0 24px,#cddcf0 24px 25px),
|
||
repeating-linear-gradient(90deg,#0000 0 24px,#cddcf0 24px 25px);}
|
||
#board.bg-grid-b{background-image:
|
||
repeating-linear-gradient(#0000 0 49px,#b9cbe3 49px 50px),
|
||
repeating-linear-gradient(90deg,#0000 0 49px,#b9cbe3 49px 50px);}
|
||
/* drawing layer on the board: sits ABOVE widgets like a transparency sheet,
|
||
so you can annotate over everything; clicks pass through when pen is off */
|
||
#boardInk{position:absolute; inset:0; pointer-events:none; z-index:4000;}
|
||
/* live-laag van de markeerstift: dekkend getekend, doorschijnend getoond;
|
||
bij het loslaten wordt de haal in één keer op de inktlaag gezet */
|
||
#boardMark{position:absolute; inset:0; pointer-events:none; z-index:4000; opacity:.32;}
|
||
body.pen #boardInk{pointer-events:auto; cursor:crosshair; touch-action:none;}
|
||
body.pen.pen-text #boardInk{cursor:text;}
|
||
body.pen.pen-hand #boardInk{pointer-events:none;} /* hand tool: interact with everything */
|
||
/* ---------- Leerling-omgeving ---------- */
|
||
/* geen whiteboard/tekengereedschap voor leerlingen - alleen wat de leerkracht
|
||
heeft toegewezen, als vaste (niet-sleepbare) kaarten in speelmodus */
|
||
#pupilView{display:none;}
|
||
body.pupil-mode #board,body.pupil-mode #fab,body.pupil-mode #fabBoardsBtn,
|
||
body.pupil-mode #boardStrip,body.pupil-mode #fabmenu,
|
||
body.pupil-mode #hud,body.pupil-mode #btnFolders,body.pupil-mode #btnSave{display:none !important;}
|
||
body.pupil-mode #pupilView{
|
||
display:flex; flex-wrap:wrap; gap:18px; align-content:flex-start;
|
||
position:absolute; inset:var(--tbar) 0 0 0; overflow:auto; padding:18px; box-sizing:border-box;
|
||
}
|
||
#pupilView .pupil-card{
|
||
position:static; max-width:100%; box-shadow:0 6px 20px rgba(30,50,90,.12);
|
||
}
|
||
.pupil-card .widget-body{width:100%; height:100%;}
|
||
/* kijken-modus: alle interactie geblokkeerd (generiek, werkt voor elk
|
||
widgettype zonder eigen readonly-ondersteuning) + zichtbaar meekijk-label */
|
||
.pupil-card.watch{position:relative;}
|
||
.pupil-card.watch .widget-body{pointer-events:none; user-select:none;}
|
||
.pupil-watch-badge{
|
||
position:absolute; top:8px; right:10px; z-index:2; pointer-events:none;
|
||
font-size:12.5px; font-weight:700; color:var(--muted);
|
||
background:var(--panel, rgba(255,255,255,.85)); border-radius:999px; padding:3px 10px;
|
||
box-shadow:0 2px 8px rgba(30,50,90,.15);
|
||
}
|
||
.pupil-empty{margin:auto; color:var(--muted); font-size:16px; font-weight:600;}
|
||
/* ---------- Ouderportaal ---------- */
|
||
/* ouders zien geen whiteboard: alleen het portaal met hun kinderen */
|
||
#parentView{display:none;}
|
||
body.parent-mode #board,body.parent-mode #fab,body.parent-mode #fabBoardsBtn,
|
||
body.parent-mode #boardStrip,body.parent-mode #fabmenu,
|
||
body.parent-mode #hud,body.parent-mode #btnFolders,body.parent-mode #btnSave{display:none !important;}
|
||
body.parent-mode #parentView{
|
||
display:block; position:absolute; inset:var(--tbar) 0 0 0;
|
||
overflow:auto; padding:24px 18px; box-sizing:border-box;
|
||
}
|
||
.parent-inner{
|
||
max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px;
|
||
}
|
||
.parent-title{margin:0 0 4px; font-size:22px;}
|
||
.parent-inner .am-row{flex-wrap:wrap;}
|
||
.parent-inner .am-row-tools{flex-basis:100%; display:flex; flex-direction:column; gap:8px;}
|
||
.parent-inner .am-row-tools:empty{display:none;}
|
||
/* floating add-button (FAB) */
|
||
#fab{
|
||
position:fixed; right:24px; bottom:24px; z-index:5600; width:60px; height:60px;
|
||
border-radius:50%; border:none; background:var(--blue); color:#fff; font-size:28px;
|
||
cursor:pointer; box-shadow:0 8px 24px rgba(59,125,216,.45); opacity:.8;
|
||
transition:all .2s; line-height:1;
|
||
}
|
||
#fab:hover{opacity:1; transform:scale(1.1);}
|
||
#fab.open{transform:rotate(45deg); opacity:1;}
|
||
body.board-empty #fab{opacity:1; animation:fabpulse 2s infinite;}
|
||
@keyframes fabpulse{
|
||
0%,100%{box-shadow:0 8px 24px rgba(59,125,216,.45);}
|
||
50%{box-shadow:0 8px 38px rgba(59,125,216,.9); transform:scale(1.07);}
|
||
}
|
||
#fabmenu{
|
||
position:fixed; right:24px; bottom:96px; z-index:5600; display:none;
|
||
flex-direction:column; gap:10px; align-items:flex-end;
|
||
}
|
||
/* board quick-switch: hover strip with live previews */
|
||
#fabBoardsBtn{
|
||
position:fixed; right:96px; bottom:31px; z-index:5590; width:46px; height:46px;
|
||
border-radius:50%; border:none; background:var(--purple); color:#fff; font-size:19px;
|
||
cursor:pointer; box-shadow:0 6px 18px rgba(155,89,182,.45); opacity:.85;
|
||
transition:all .2s; line-height:1;
|
||
}
|
||
#fabBoardsBtn:hover{opacity:1; transform:scale(1.1);}
|
||
#boardStrip{
|
||
position:fixed; right:16px; bottom:92px; z-index:5590; display:none; gap:10px;
|
||
padding:10px; border-radius:16px; background:rgba(255,255,255,.93);
|
||
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
|
||
box-shadow:0 10px 28px rgba(30,50,90,.3); border:1px solid rgba(255,255,255,.7);
|
||
max-width:calc(100vw - 40px); overflow-x:auto; overflow-y:hidden;
|
||
}
|
||
#boardStrip.open{display:flex;}
|
||
.bs-card{
|
||
width:168px; flex:none; background:var(--surface); border-radius:12px;
|
||
border:2.5px solid var(--line); cursor:pointer; overflow:hidden;
|
||
}
|
||
.bs-card:hover{border-color:var(--blue);}
|
||
.bs-card.active{border-color:var(--accent);}
|
||
.bs-card canvas{display:block; width:168px; height:105px; background:var(--surface);}
|
||
.bs-name{
|
||
font-size:12px; font-weight:800; padding:5px 8px; display:flex;
|
||
justify-content:space-between; align-items:center; gap:6px;
|
||
}
|
||
.bs-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||
.bs-x{
|
||
border:none; background:var(--red-soft); color:var(--red); border-radius:7px;
|
||
min-width:26px; height:24px; font-size:11px; font-weight:900; cursor:pointer; flex:none;
|
||
}
|
||
.bs-x:hover{background:var(--red); color:#fff;}
|
||
.bs-x.arm{background:var(--red); color:#fff; animation:pop .3s;}
|
||
.bs-new{
|
||
display:flex; align-items:center; justify-content:center; font-size:30px;
|
||
color:#fff; background:var(--green); border-color:var(--green);
|
||
width:90px; min-height:130px; font-weight:900;
|
||
}
|
||
/* mappenverkenner (Windows-stijl, vervangt het oude mappenpaneel) */
|
||
.modal.explorer{width:min(860px,94vw);}
|
||
.ex-bar{display:flex; gap:10px; align-items:center; margin:10px 0 4px; flex-wrap:wrap;}
|
||
.ex-crumbs{display:flex; gap:4px; align-items:center; flex:1; min-width:0; flex-wrap:wrap;}
|
||
.ex-crumb{
|
||
border:none; background:var(--surface-2); border-radius:8px; padding:6px 10px;
|
||
cursor:pointer; font:inherit; font-weight:700; font-size:13.5px;
|
||
}
|
||
.ex-crumb:hover{background:var(--surface-3);}
|
||
.ex-sep{color:var(--muted); font-weight:800;}
|
||
.ex-tools{display:flex; gap:8px; flex-wrap:wrap;}
|
||
.ex-msg{min-height:18px; color:var(--red); font-size:13px; font-weight:700;}
|
||
.ex-msg.ok{color:var(--green, #2c8c4b);}
|
||
.ex-hint{font-size:11px; color:var(--muted); font-weight:600;}
|
||
.ex-grid{
|
||
display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
|
||
gap:12px; margin-top:8px;
|
||
}
|
||
.ex-tile{
|
||
border:1.5px solid var(--line); border-radius:14px; padding:10px; background:var(--surface);
|
||
display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
|
||
user-select:none; touch-action:none; min-height:110px; justify-content:center;
|
||
}
|
||
.ex-tile:hover{border-color:var(--blue);}
|
||
.ex-tile.sel{border-color:var(--blue); background:var(--accent-soft);}
|
||
.ex-tile.active-item{border-color:var(--accent); border-width:2.5px;}
|
||
.ex-tile .ex-ico{font-size:36px; line-height:1;}
|
||
.ex-tile canvas{max-width:100%; border-radius:8px; border:1px solid var(--line);}
|
||
.ex-name{font-weight:700; font-size:13.5px; text-align:center; word-break:break-word;}
|
||
.ex-count{font-size:12px; color:var(--muted); font-weight:700;}
|
||
.ex-tile input{
|
||
border:2px solid var(--blue); border-radius:8px; font:inherit; font-size:13.5px;
|
||
width:100%; outline:none; padding:4px 6px; text-align:center;
|
||
}
|
||
.ex-ghost{position:fixed; z-index:7000; opacity:.75; pointer-events:none; width:150px; left:-999px;}
|
||
.ex-drop{outline:3px solid var(--blue); outline-offset:2px;}
|
||
#fabmenu.open{display:flex;}
|
||
.fab-item{
|
||
display:flex; align-items:center; gap:10px; border:none;
|
||
background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
|
||
border-radius:14px; padding:11px 16px; font:inherit; font-weight:800; font-size:14px;
|
||
color:var(--ink); cursor:pointer; box-shadow:0 6px 18px rgba(30,50,90,.22);
|
||
}
|
||
.fab-item:hover{background:var(--surface); transform:translateX(-4px);}
|
||
.fab-item.on{background:var(--accent-soft); color:var(--accent-ink);}
|
||
.fab-item .fi{font-size:18px;}
|
||
/* pen palette (section inside #hud, always visible) */
|
||
#penbar{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
|
||
.pen-close{background:var(--surface-2) !important; color:var(--ink) !important;}
|
||
.pen-close.on{background:var(--accent-soft) !important; color:var(--accent-ink) !important;}
|
||
body:not(.pen) .pen-tools button.on{background:transparent; box-shadow:none;}
|
||
.pen-grip{cursor:grab; font-size:15px; color:var(--muted); padding:0 2px; touch-action:none;}
|
||
.pen-grip:active{cursor:grabbing;}
|
||
#penbar .wp-group{padding:2px;}
|
||
#penbar .wp-group button{width:28px; height:28px; font-size:14px;}
|
||
#penbar .wp-color i{width:15px; height:15px;}
|
||
#penbar .wp-bg i{width:17px; height:17px;}
|
||
#penbar .wp-clear{width:28px; height:28px; font-size:13px;}
|
||
/* images on the board */
|
||
.bimg{
|
||
position:absolute; z-index:0; border-radius:10px; touch-action:none; cursor:grab;
|
||
box-shadow:0 6px 18px rgba(30,50,90,.25);
|
||
}
|
||
.bimg:active{cursor:grabbing;}
|
||
.bimg img{width:100%; display:block; border-radius:10px; pointer-events:none;}
|
||
.bimg .dtool-x,.bimg .bimg-rs{opacity:0; transition:opacity .15s;}
|
||
.bimg:hover .dtool-x,.bimg:hover .bimg-rs{opacity:1;}
|
||
.bimg-rs{
|
||
position:absolute; right:-9px; bottom:-9px; width:20px; height:20px; border-radius:50%;
|
||
background:var(--blue); border:2.5px solid #fff; cursor:nwse-resize;
|
||
box-shadow:0 2px 6px rgba(0,0,0,.3);
|
||
}
|
||
body.pen .bimg{pointer-events:none;}
|
||
/* frameless (bare) widget for mindmap directly on the board */
|
||
.widget.bare{
|
||
background:transparent !important; border:none; box-shadow:none !important;
|
||
backdrop-filter:none; -webkit-backdrop-filter:none; resize:none; border-radius:0;
|
||
pointer-events:none; /* let clicks pass through to widgets/board below */
|
||
}
|
||
.widget.bare .widget-head,.widget.bare .mm-top,.widget.bare .mm-node,
|
||
.widget.bare .mm-pop{pointer-events:auto;}
|
||
.widget.bare .widget-head{
|
||
position:absolute; top:8px; right:8px; left:auto; width:auto; z-index:6;
|
||
background:rgba(255,255,255,.78); border:none; border-radius:12px; padding:5px 8px; gap:6px;
|
||
box-shadow:0 4px 12px rgba(30,50,90,.15);
|
||
}
|
||
.widget.bare .widget-head .wtitle{display:none;}
|
||
.widget.bare .widget-body,.widget.bare .mm-stage{background:transparent;}
|
||
/* mindmap node settings popover */
|
||
.mm-cog{
|
||
position:absolute; right:-11px; bottom:-11px; width:22px; height:22px; border-radius:50%;
|
||
border:none; background:var(--blue); color:#fff; font-size:11px; cursor:pointer;
|
||
line-height:1; display:none; padding:0;
|
||
}
|
||
.mm-node:hover .mm-cog{display:block;}
|
||
.mm-pop{
|
||
position:absolute; z-index:20; background:var(--surface); border-radius:12px; padding:9px 10px;
|
||
box-shadow:0 10px 26px rgba(30,50,90,.3); display:flex; flex-direction:column; gap:7px;
|
||
}
|
||
.mm-pop .mp-row{display:flex; gap:5px; align-items:center;}
|
||
.mm-pop .mp-lbl{font-size:11px; font-weight:800; color:var(--muted); width:16px; text-align:center;}
|
||
.mm-pop button{border:none; cursor:pointer; padding:0; background:transparent;}
|
||
.mm-pop .mp-sw{width:19px; height:19px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line);}
|
||
.mm-pop .mp-sw.on{box-shadow:0 0 0 2.5px var(--ink);}
|
||
.mm-pop .mp-fs{font-weight:900; color:var(--ink); width:24px; height:24px; border-radius:7px; background:var(--surface-2);}
|
||
.mm-pop .mp-fs.on{background:var(--accent-soft);}
|
||
.mm-pop .mp-ls{width:34px; height:24px; border-radius:7px; background:var(--surface-2); position:relative;}
|
||
.mm-pop .mp-ls.on{background:var(--accent-soft);}
|
||
.mm-pop .mp-ls i{display:block; border-top:2.5px solid var(--ink); width:24px; margin:0 auto;}
|
||
.mm-pop .mp-ls[data-ls=dash] i{border-top-style:dashed;}
|
||
.mm-pop .mp-ls[data-ls=dot] i{border-top-style:dotted;}
|
||
.mm-pop .mp-x{margin-left:auto; font-weight:900; color:var(--red); font-size:12px;}
|
||
/* physical tools: ruler, set square, magnifier */
|
||
/* boven de inktlaag (4000): net als een echte lat ligt het gereedschap óp
|
||
het bord - ook in penmodus te verplaatsen en in te stellen; tekenen
|
||
begint ernaast en kleeft aan de tekenrand */
|
||
.dtool{position:absolute; z-index:4200; touch-action:none; user-select:none; cursor:grab; left:120px; top:120px;}
|
||
.dtool:active{cursor:grabbing;}
|
||
.dtool .dtool-x{
|
||
position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%;
|
||
border:none; background:var(--red-soft); color:var(--red); font-weight:900; cursor:pointer;
|
||
font-size:12px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:2;
|
||
}
|
||
.dtool .dtool-rot{
|
||
position:absolute; bottom:-10px; right:-10px; width:26px; height:26px; border-radius:50%;
|
||
border:none; background:var(--blue); color:#fff; cursor:grab; font-size:13px;
|
||
line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:2;
|
||
}
|
||
.dtool-ruler{width:600px; height:76px;}
|
||
.dtool-geo{width:340px; height:184px;}
|
||
/* alleen de driehoek zelf is aan te raken - de lege hoeken van de
|
||
rechthoekige box laten aanrakingen door naar het bord, anders kon er
|
||
niet vlak naast de schuine randen getekend worden */
|
||
.dtool-geo{pointer-events:none;}
|
||
.dtool-geo svg polygon,.dtool-geo .dtool-opts,.dtool-geo .dtool-x,.dtool-geo .dtool-rot{pointer-events:auto;}
|
||
.dtool-opts{position:absolute; top:-12px; left:8px; display:flex; gap:5px;}
|
||
.dtool-opts button{
|
||
width:24px; height:24px; border-radius:50%; border:none; background:var(--surface);
|
||
color:var(--ink); font-size:12px; font-weight:900; cursor:pointer; line-height:1;
|
||
box-shadow:0 2px 6px rgba(0,0,0,.25);
|
||
}
|
||
.dtool-opts button:hover{background:var(--accent-soft);}
|
||
/* lengteknop toont de maat ("10 cm") en is dus breder dan een rond knopje */
|
||
.dtool-opts .do-wide{width:auto; min-width:48px; padding:0 9px; border-radius:12px;}
|
||
/* slot-knop kleurt mee zodra het gereedschap vaststaat */
|
||
.dtool-opts .do-lock.on{background:var(--accent-soft);}
|
||
/* ---------- CMS: banner, welkomstwoord en Inhoud-sectie ---------- */
|
||
.cms-banner{
|
||
position:fixed; top:var(--tbar); left:0; right:0; z-index:5800;
|
||
display:flex; gap:10px; align-items:center; justify-content:center;
|
||
padding:9px 44px 9px 14px; font-weight:700; font-size:14px; text-align:center;
|
||
background:var(--accent-soft); color:var(--accent-ink);
|
||
box-shadow:0 3px 10px rgba(30,50,90,.12);
|
||
}
|
||
.cms-banner.warn{background:var(--orange); color:#fff;}
|
||
.cms-banner-x{
|
||
position:absolute; right:8px; top:50%; transform:translateY(-50%);
|
||
width:28px; height:28px; border:none; border-radius:8px; cursor:pointer;
|
||
background:rgba(255,255,255,.35); color:inherit; font-weight:900; line-height:1;
|
||
}
|
||
#cmsWelcome{
|
||
margin:2px 0 12px; padding:10px 12px; border-radius:12px;
|
||
background:var(--accent-soft); color:var(--accent-ink);
|
||
font-size:13.5px; font-weight:600; line-height:1.45; white-space:pre-line;
|
||
}
|
||
.cms-block{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
|
||
.cms-field{display:flex; flex-direction:column; gap:3px; width:100%;}
|
||
.cms-ta{width:100%; min-height:64px; resize:vertical; font:inherit; padding:8px 10px;}
|
||
.cms-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
|
||
.cms-check{display:flex; align-items:center; gap:6px; font-weight:700; cursor:pointer;}
|
||
/* live hoek-uitlezing tijdens het draaien van liniaal/geodriehoek */
|
||
.dtool-deg{
|
||
display:none; position:absolute; left:50%; top:50%; margin:-16px 0 0 -24px;
|
||
width:48px; height:32px; line-height:32px; text-align:center; pointer-events:none;
|
||
background:rgba(30,50,90,.85); color:#fff; font-size:14px; font-weight:800;
|
||
border-radius:9px; z-index:3;
|
||
}
|
||
.dtool-deg.snapped{background:var(--green);}
|
||
.dtool-lens{z-index:4500;} /* the glass sits above the ink sheet */
|
||
.dtool-lens canvas{
|
||
border:5px solid #5a6c85; box-shadow:0 8px 22px rgba(0,0,0,.3);
|
||
background:var(--surface); display:block;
|
||
}
|
||
/* =========== Mindmap widget =========== */
|
||
.mm{flex:1; min-height:0; display:flex; flex-direction:column; position:relative;}
|
||
.mm-top{
|
||
position:absolute; top:8px; left:8px; z-index:7; display:flex; gap:8px; align-items:center;
|
||
padding:6px 8px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
|
||
border-radius:12px; box-shadow:0 4px 12px rgba(30,50,90,.15); cursor:default;
|
||
}
|
||
.mm-grip{cursor:grab; color:var(--muted); font-size:14px; padding:0 2px; touch-action:none; user-select:none;}
|
||
.mm-grip:active{cursor:grabbing;}
|
||
.mm-hint{font-size:12px; font-weight:700; color:var(--muted); max-width:180px;}
|
||
.mm-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface);}
|
||
.mm-stage svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
|
||
.mm-node{
|
||
position:absolute; transform:translate(-50%,-50%); background:var(--surface);
|
||
border:2.5px solid var(--blue); padding:8px 16px; font-weight:800; font-size:15px;
|
||
cursor:grab; touch-action:none; min-width:64px; text-align:center;
|
||
box-shadow:0 3px 10px rgba(30,50,90,.15); border-radius:50px;
|
||
}
|
||
.mm-node:active{cursor:grabbing;}
|
||
.mm-node span{outline:none; cursor:text; display:inline-block; min-width:34px; user-select:text;}
|
||
.mm-node span:empty::before{content:"…"; color:#c2cddc;}
|
||
.mm-node.root{background:var(--yellow); border-color:#d9a400; font-size:17px; z-index:2;}
|
||
.mm.tree .mm-node{border-radius:10px;}
|
||
.mm.web .mm-node{border-radius:16px; border-style:dashed;}
|
||
.mm-node .mm-add,.mm-node .mm-del{
|
||
position:absolute; width:22px; height:22px; border-radius:50%; border:none;
|
||
font-size:13px; font-weight:900; cursor:pointer; line-height:1; display:none; padding:0;
|
||
}
|
||
.mm-node:hover .mm-add,.mm-node:hover .mm-del{display:block;}
|
||
.mm-add{right:-11px; top:50%; transform:translateY(-50%); background:var(--green); color:#fff;}
|
||
.mm-del{left:-9px; top:-9px; background:var(--red-soft); color:var(--red);}
|
||
/* ---------- Widget windows ---------- */
|
||
.widget{
|
||
position:absolute; background:rgba(255,255,255,.55); border-radius:var(--radius);
|
||
backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
|
||
box-shadow:0 4px 14px rgba(30,50,90,.08); border:1px solid rgba(255,255,255,.6);
|
||
display:flex; flex-direction:column;
|
||
min-width:280px; min-height:200px; resize:none; overflow:hidden;
|
||
transition:background .2s, box-shadow .2s, border-color .2s;
|
||
}
|
||
.widget:hover,.widget:focus-within{
|
||
background:rgba(255,255,255,.92);
|
||
box-shadow:0 12px 30px rgba(30,50,90,.2);
|
||
border-color:rgba(255,255,255,.9);
|
||
}
|
||
.widget .wmin,.widget .wclose{opacity:.4; transition:opacity .15s;}
|
||
.widget:hover .wmin,.widget:hover .wclose,
|
||
.widget:focus-within .wmin,.widget:focus-within .wclose{opacity:1;}
|
||
/* eigen, groter aanraakbare resize-greep i.p.v. de piepkleine native
|
||
browser-grip (die met resize:none hierboven is uitgeschakeld) */
|
||
.widget-rs{
|
||
position:absolute; right:4px; bottom:4px; width:34px; height:34px;
|
||
border-radius:50%; background:var(--blue); border:3px solid #fff;
|
||
cursor:nwse-resize; box-shadow:0 2px 6px rgba(0,0,0,.3); touch-action:none;
|
||
opacity:0; transition:opacity .15s; z-index:2;
|
||
}
|
||
.widget:hover .widget-rs,.widget:focus-within .widget-rs{opacity:.6;}
|
||
.widget-rs:hover,.widget-rs:active{opacity:1 !important;}
|
||
.widget.bare .widget-rs,.widget[data-max="1"] .widget-rs{display:none;}
|
||
/* unified floating bar: pen palette + dock, draggable, combined when both active */
|
||
#hud{
|
||
position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:5500;
|
||
display:none; gap:8px; align-items:center; flex-wrap:wrap; max-width:94vw;
|
||
padding:5px 8px; border-radius:14px;
|
||
background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
|
||
box-shadow:0 6px 18px rgba(30,50,90,.18); border:1px solid rgba(255,255,255,.7);
|
||
}
|
||
#hud{display:flex;}
|
||
.hud-div{display:none; width:1.5px; height:26px; background:#c3cfde; border-radius:2px; flex:none;}
|
||
#hud.has-dock .hud-div{display:block;}
|
||
#dock{display:none; gap:8px; align-items:center; flex-wrap:wrap;}
|
||
#hud.has-dock #dock{display:flex;}
|
||
/* collapse + orientation */
|
||
.hud-btn{
|
||
border:none; background:var(--surface-2); border-radius:8px; width:26px; height:26px;
|
||
cursor:pointer; font-size:13px; line-height:1; padding:0; flex:none; font-weight:900; color:var(--ink);
|
||
}
|
||
.hud-btn:hover{background:var(--surface-3);}
|
||
#hud.min #penbar,#hud.min #dock,#hud.min .hud-div{display:none !important;}
|
||
#hud.vert{
|
||
flex-direction:column; align-items:center; flex-wrap:nowrap;
|
||
max-height:calc(100vh - var(--tbar) - 26px); overflow-y:auto; overflow-x:hidden;
|
||
max-width:none; width:92px;
|
||
}
|
||
#hud.vert #penbar{flex-direction:column; flex-wrap:nowrap; align-items:center;}
|
||
#hud.vert #penbar .wp-group{display:grid; grid-template-columns:repeat(2,30px); justify-items:center; align-items:center;}
|
||
#hud.vert .hud-div{width:26px; height:1.5px;}
|
||
#hud.vert #dock{flex-direction:column; flex-wrap:nowrap;}
|
||
.dock-item{
|
||
border:none; display:flex; align-items:center; gap:7px; background:var(--surface);
|
||
border-radius:10px; padding:6px 12px; font:inherit; font-weight:700; font-size:13px;
|
||
color:var(--ink); cursor:pointer; box-shadow:0 2px 6px rgba(30,50,90,.12);
|
||
}
|
||
.dock-item:hover{background:var(--surface-2); transform:translateY(-2px);}
|
||
.dock-item .di{font-size:16px; line-height:1;}
|
||
/* sluitknop op de dock-pil: geminimaliseerde widgets zijn direct te sluiten */
|
||
.dock-item .dock-close{
|
||
display:flex; align-items:center; justify-content:center;
|
||
width:20px; height:20px; margin:-2px -6px -2px 0; border-radius:7px;
|
||
font-size:11px; color:var(--muted); line-height:1;
|
||
}
|
||
.dock-item .dock-close:hover{background:var(--red-soft); color:var(--red);}
|
||
@media (pointer:coarse){
|
||
.dock-item .dock-close{width:28px; height:28px;}
|
||
}
|
||
.widget-head{
|
||
display:flex; align-items:center; gap:10px; padding:10px 14px;
|
||
background:rgba(255,255,255,.4); border-bottom:1px solid rgba(150,170,200,.28);
|
||
cursor:grab; flex:none;
|
||
}
|
||
.widget-head:active{cursor:grabbing;}
|
||
.widget-head .wicon{font-size:20px;}
|
||
.widget-head .wtitle{font-weight:800; font-size:15px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
|
||
.wclose{
|
||
border:none; background:var(--red-soft); color:var(--red); width:28px; height:28px;
|
||
border-radius:9px; font-weight:900; cursor:pointer; font-size:14px; line-height:1; flex:none;
|
||
}
|
||
.wclose:hover{background:var(--red); color:#fff;}
|
||
.wmin{
|
||
border:none; background:var(--surface-2); color:var(--ink); width:28px; height:28px;
|
||
border-radius:9px; font-weight:900; cursor:pointer; font-size:15px; line-height:1; flex:none;
|
||
}
|
||
.wmin:hover{background:var(--surface-3);}
|
||
.wz{font-size:10.5px; width:auto; min-width:30px; padding:0 5px;}
|
||
.wz.on{background:var(--accent-soft); color:var(--accent-ink);}
|
||
.widget-body{flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:0; container-type:inline-size; container-name:widget;}
|
||
/* ---------- Modals ---------- */
|
||
.modalwrap{
|
||
position:fixed; inset:0; z-index:6000; background:rgba(15,22,38,.4);
|
||
display:none; align-items:center; justify-content:center;
|
||
}
|
||
.modalwrap.open{display:flex;}
|
||
.modal{
|
||
background:var(--surface); border-radius:var(--radius-l); padding:24px 26px;
|
||
width:min(680px,92vw); max-height:88vh; overflow:auto;
|
||
box-shadow:var(--shadow-2); border:1px solid var(--line);
|
||
}
|
||
.modal h2{margin:0 0 14px; font-size:20px; font-weight:700;}
|
||
/* galerij: gelijke tegel-hoogtes (grid-rijen strekken mee, vaste inhoud-zones) */
|
||
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); grid-auto-rows:1fr; gap:12px;}
|
||
.gcard{
|
||
border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px;
|
||
text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s;
|
||
background:var(--surface); display:flex; flex-direction:column;
|
||
align-items:center; justify-content:flex-start; min-height:132px;
|
||
}
|
||
.gcard:hover{border-color:var(--accent); box-shadow:var(--shadow-1);}
|
||
.gcard .gi{font-size:36px; line-height:1;}
|
||
.gcard .gn{font-weight:700; margin-top:9px; font-size:15px;}
|
||
.gcard .gd{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35;}
|
||
/* login + instellingen modals */
|
||
#loginModal{width:min(400px,92vw);}
|
||
.login-logo{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 18px;}
|
||
.login-logo .logo-owl{width:46px; height:40px;}
|
||
.login-logo .logo-word{font-size:24px;}
|
||
/* instellingen is breder dan het inlogscherm: het beheerpaneel (tabblad) heeft
|
||
de ruimte nodig van wat vroeger een eigen, brede modal was (#adminModal) */
|
||
#settingsModal{width:min(760px,94vw); max-height:86vh; overflow:auto;}
|
||
.st-section[data-section="account"]{max-width:420px;}
|
||
.st-section[data-section="account"] .am-h3:first-of-type{margin-top:0;}
|
||
#loginModal input,#settingsModal input{
|
||
width:100%; border:1px solid var(--line); border-radius:var(--radius);
|
||
height:var(--control-h); padding:0 12px;
|
||
font:inherit; font-size:15px; outline:none; margin-bottom:10px;
|
||
background:var(--surface); color:var(--ink);
|
||
}
|
||
#loginModal input:focus,#settingsModal input:focus{border-color:var(--accent);}
|
||
.lrow{display:flex; gap:8px;}
|
||
.lrow .tbtn{flex:1;}
|
||
.lrow input{flex:1; min-width:0; margin-bottom:0;}
|
||
.lrow .pwtoggle{flex:0 0 auto; white-space:nowrap; padding-left:10px; padding-right:10px;}
|
||
.formMsg{min-height:20px; font-size:13.5px; font-weight:700; color:var(--red); margin:6px 0;}
|
||
.formMsg.ok{color:var(--green);}
|
||
.guestnote{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45;}
|
||
/* instellingen: neutrale kaarten per sectie (.am-reset, hergebruikt van het
|
||
beheerpaneel) i.p.v. het speelse bord-uiterlijk - dit scherm is voor volwassenen */
|
||
#settingsModal .am-reset .lrow{margin:0;}
|
||
#settingsModal .am-reset .guestnote{margin-top:2px;}
|
||
.st-footer{
|
||
display:flex; justify-content:space-between; align-items:center; gap:8px;
|
||
margin-top:12px; padding-top:12px; border-top:1.5px solid var(--line);
|
||
font-size:11px; color:var(--muted); flex:none;
|
||
}
|
||
#settingsModal .am-name{font-size:16px;}
|
||
/* ---------- Instellingen-schil: nav links, inhoud rechts, zoeken boven ----- */
|
||
.st-modal{
|
||
width:min(980px,96vw); height:min(700px,92vh); max-height:92vh;
|
||
display:flex; flex-direction:column; overflow:hidden; padding:18px 22px;
|
||
}
|
||
.st-head{display:flex; align-items:center; gap:14px; flex:none; padding-bottom:12px;}
|
||
.st-head h2{margin:0; font-size:19px;}
|
||
#stSearch{
|
||
flex:1; max-width:360px; margin-left:auto; min-width:120px;
|
||
height:var(--control-h); padding:0 12px; font-size:14px;
|
||
border:1.5px solid var(--line); border-radius:10px;
|
||
background:var(--surface-2); color:var(--ink); outline:none;
|
||
}
|
||
#stSearch:focus{border-color:var(--accent);}
|
||
.st-body{display:flex; flex:1; min-height:0; border-top:1.5px solid var(--line);}
|
||
#stNav{
|
||
width:200px; flex:none; overflow-y:auto; padding:12px 12px 12px 0;
|
||
border-right:1.5px solid var(--line);
|
||
display:flex; flex-direction:column; gap:2px; align-content:flex-start;
|
||
}
|
||
.st-nav-group{
|
||
font-size:10.5px; font-weight:800; color:var(--muted);
|
||
text-transform:uppercase; letter-spacing:.5px; margin:12px 6px 4px;
|
||
}
|
||
.st-nav-group:first-child{margin-top:0;}
|
||
.st-nav-btn{
|
||
display:flex; gap:9px; align-items:center; border:none; background:transparent;
|
||
padding:8px 10px; border-radius:9px; cursor:pointer; text-align:left;
|
||
font-size:14px; font-weight:650; color:var(--ink);
|
||
}
|
||
.st-nav-btn:hover{background:var(--surface-3);}
|
||
.st-nav-btn.active{background:var(--accent-soft); color:var(--accent-ink);}
|
||
.st-nav-ico{flex:none; width:20px; text-align:center;}
|
||
#stContent{flex:1; min-width:0; overflow-y:auto; padding:14px 4px 14px 18px;}
|
||
#stSecHead{margin-bottom:12px;}
|
||
#stSecHead:empty{display:none;}
|
||
.st-sec-title{font-size:17px; font-weight:800;}
|
||
.st-sec-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
|
||
/* zoekresultaten: gegroepeerd per sectie, klik = navigeren */
|
||
#stSearchResults{display:flex; flex-direction:column; gap:2px;}
|
||
.st-result{
|
||
display:flex; gap:9px; align-items:center; border:none; background:transparent;
|
||
padding:8px 10px; border-radius:9px; cursor:pointer; text-align:left;
|
||
font-size:14px; color:var(--ink); width:100%;
|
||
}
|
||
.st-result:hover{background:var(--surface-3);}
|
||
.st-result-lbl{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||
.st-result-sub{margin-left:auto; flex:none; font-size:12px; color:var(--muted);}
|
||
/* smal scherm: nav wordt een horizontale strook boven de inhoud */
|
||
@media (max-width:720px){
|
||
.st-modal{padding:14px;}
|
||
.st-body{flex-direction:column;}
|
||
#stNav{
|
||
width:auto; flex-direction:row; overflow-x:auto; overflow-y:hidden;
|
||
border-right:none; border-bottom:1.5px solid var(--line);
|
||
padding:8px 0; gap:4px;
|
||
}
|
||
.st-nav-group{display:none;}
|
||
.st-nav-btn{flex:none; padding:7px 10px;}
|
||
#stContent{padding:12px 2px;}
|
||
#stSearch{max-width:none;}
|
||
}
|
||
/* =========================================================
|
||
Letter game widget
|
||
==========================================================*/
|
||
.lg{display:flex; flex-direction:column; flex:1; min-height:0; padding:12px 14px; gap:10px;}
|
||
.lg-top{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
|
||
.lg-levels{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
|
||
.lg-levels button{
|
||
border:none; border-radius:999px; background:transparent; padding:6px 12px;
|
||
font:inherit; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer;
|
||
}
|
||
.lg-levels button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
|
||
.lg-cards{display:flex; gap:5px; flex-wrap:wrap;}
|
||
.lg-cards button{
|
||
border:1px solid var(--line); background:var(--surface); width:34px; height:34px; border-radius:10px;
|
||
font:inherit; font-weight:800; color:var(--muted); cursor:pointer; font-size:14px;
|
||
}
|
||
.lg-cards button.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
|
||
.lg-cards .lg-theme{
|
||
width:auto; padding:0 11px; max-width:120px; overflow:hidden;
|
||
text-overflow:ellipsis; white-space:nowrap;
|
||
}
|
||
.lg-num{
|
||
border:1px solid var(--line); border-radius:10px; height:34px; font:inherit;
|
||
font-weight:800; font-size:13px; color:var(--muted); background:var(--surface);
|
||
padding:0 4px; outline:none; cursor:pointer;
|
||
}
|
||
.lg-snd,.lg-mode{
|
||
border:1px solid var(--line); border-radius:10px; width:34px; height:34px;
|
||
background:var(--surface); cursor:pointer; font-size:15px; line-height:1; padding:0; flex:none;
|
||
}
|
||
.lg-snd.off{opacity:.55;}
|
||
/* small digit blocks/slots for the maths widgets */
|
||
.blok.sm{width:46px; height:74px; border-radius:10px; padding-top:4px;}
|
||
.blok.sm .bl{font-size:24px; height:30px; color:var(--purple);}
|
||
.blok.sm .dots,.slot.sm .dots{grid-template-columns:repeat(2,7px); grid-template-rows:repeat(3,7px); gap:2.5px;}
|
||
.blok.sm .dots i,.slot.sm .dots i{width:7px; height:7px;}
|
||
.blok.sm .blok-dots{margin-bottom:7px;}
|
||
.slot.sm{width:46px; height:74px; padding-top:4px;}
|
||
.slot.sm .ghost{font-size:22px; height:26px;}
|
||
.slot.sm .slot-dots{margin-bottom:6px;}
|
||
.slot.sm .dots i.off{width:6px; height:6px;}
|
||
.mt-slots{display:flex; gap:8px; justify-content:center;}
|
||
.mt-tray{gap:8px; padding:10px 8px; min-height:96px;}
|
||
.mt.blocks .mt-a,.mt.blocks .mt-pad{display:none;}
|
||
.mt:not(.blocks) .mt-slots,.mt:not(.blocks) .mt-tray{display:none;}
|
||
/* on-screen letter keyboard (letters widget, type mode) */
|
||
.lg-kbd{gap:6px; padding:10px;}
|
||
.lg-kbd button{
|
||
width:40px; height:46px; border-radius:10px; border:2px solid var(--wood-d);
|
||
background:linear-gradient(#fdf3dd,var(--wood)); font:inherit; font-weight:900;
|
||
font-size:20px; cursor:pointer; padding:0;
|
||
}
|
||
.lg-kbd button.v{color:var(--red);}
|
||
.lg-kbd button.c{color:var(--blue);}
|
||
.lg.typemode .lg-tray.blocks-tray{display:none;}
|
||
.lg:not(.typemode) .lg-kbd{display:none;}
|
||
.lg-ed-themerow{display:flex; gap:8px; align-items:center;}
|
||
.ed-theme-sel{
|
||
flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 10px;
|
||
font:inherit; font-weight:700; font-size:15px; outline:none; background:var(--surface); cursor:pointer;
|
||
}
|
||
.ed-theme-name, .ed-theme-folder{
|
||
border:2px solid var(--blue); border-radius:10px; padding:9px 10px;
|
||
font:inherit; font-size:15px; outline:none; width:180px;
|
||
}
|
||
.ed-theme-del{
|
||
border:none; background:var(--red-soft); color:var(--red); border-radius:10px;
|
||
width:40px; height:40px; cursor:pointer; font-size:15px; flex:none;
|
||
}
|
||
.ed-theme-del:hover{background:var(--red); color:#fff;}
|
||
.ed-theme-mv{
|
||
border:none; background:var(--surface-2, #eef); color:var(--ink); border-radius:10px;
|
||
width:40px; height:40px; cursor:pointer; font-size:15px; flex:none;
|
||
}
|
||
.lg-progress{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap;}
|
||
.lg-stars{color:#d9a400; font-size:14px; min-width:34px; text-align:right;}
|
||
.lg-instr{
|
||
background:var(--surface-2); border:1.5px dashed #bcd4f2;
|
||
border-radius:12px; padding:6px 14px; font-size:14.5px; font-weight:700; color:#37588a;
|
||
text-align:center; min-height:42px; display:flex; align-items:center; justify-content:center;
|
||
flex:none;
|
||
}
|
||
.lg-card{
|
||
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||
gap:16px; background:var(--surface); border:1px solid var(--line);
|
||
border-radius:18px; padding:12px; min-height:0; position:relative; overflow:hidden;
|
||
}
|
||
.lg-pic{font-size:64px; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));}
|
||
.lg-pic img{width:80px; height:80px; object-fit:contain; border-radius:12px; vertical-align:middle;}
|
||
.lg-slots{display:flex; gap:10px;}
|
||
.slot{
|
||
width:64px; height:98px; border-radius:12px; position:relative;
|
||
background:#e9eef5; border:2.5px dashed #b9c7d9;
|
||
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
|
||
padding-top:6px; transition:all .12s;
|
||
}
|
||
.slot.droptarget{border-color:var(--green); background:#e3f6ea; transform:scale(1.06);}
|
||
.slot .ghost{font-size:30px; font-weight:800; color:#c2cddc; height:40px; display:flex; align-items:center;}
|
||
.slot.filled{border-style:solid; border-color:transparent; background:transparent; padding:0;}
|
||
.slot.filled .ghost,.slot.filled .slot-dots{display:none;}
|
||
.slot.shake{animation:shake .35s;}
|
||
@keyframes shake{
|
||
0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);}
|
||
40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);}
|
||
}
|
||
.blok{
|
||
width:64px; height:98px; border-radius:12px; cursor:grab; touch-action:none;
|
||
display:flex; flex-direction:column; align-items:center; padding-top:6px;
|
||
background:linear-gradient(#fdf3dd,var(--wood)); border:2.5px solid var(--wood-d);
|
||
box-shadow:0 4px 0 var(--wood-d), 0 7px 14px rgba(60,40,0,.16);
|
||
position:relative; flex:none;
|
||
}
|
||
.blok:active{cursor:grabbing;}
|
||
.blok .bl{font-size:34px; font-weight:900; height:44px; display:flex; align-items:center;}
|
||
.blok.vowel .bl{color:var(--red);}
|
||
.blok.cons .bl{color:var(--blue);}
|
||
.blok .blok-dots{margin-top:auto; margin-bottom:10px;}
|
||
.blok.in-slot{cursor:pointer; animation:pop .3s;}
|
||
.blok.dragging{opacity:.25;}
|
||
@keyframes pop{0%{transform:scale(.6);} 60%{transform:scale(1.12);} 100%{transform:scale(1);}}
|
||
.slot .slot-dots{margin-top:auto; margin-bottom:9px;}
|
||
.dots{display:grid; grid-template-columns:repeat(2,9px); grid-template-rows:repeat(3,9px); gap:3px;}
|
||
.dots i{width:9px; height:9px; border-radius:50%; background:transparent;}
|
||
.blok .dots i.on{background:#b98a3c; box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.5);}
|
||
.blok .dots i.off{background:rgba(0,0,0,.05);}
|
||
.slot .dots i.on{background:#aebcce; box-shadow:inset 0 2px 3px rgba(30,50,80,.4);}
|
||
.slot .dots i.off{background:transparent; border:1px dotted #ccd7e4; width:7px; height:7px;}
|
||
.lg-tray{
|
||
display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
|
||
background:var(--surface-2); border-radius:16px; padding:14px 12px; min-height:130px; flex:none;
|
||
}
|
||
.lg-bottom{display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; flex:none;}
|
||
.lg-next{
|
||
border:none; border-radius:12px; padding:10px 22px; font:inherit; font-weight:800;
|
||
background:var(--green); color:#fff; cursor:pointer; font-size:15.5px; display:none;
|
||
}
|
||
.lg-next.show{display:inline-block; animation:pop .3s;}
|
||
.lg-done{
|
||
position:absolute; inset:0; border-radius:18px; display:none; align-items:center;
|
||
justify-content:center; flex-direction:column; gap:6px;
|
||
background:rgba(255,255,255,.88); backdrop-filter:blur(2px); z-index:5;
|
||
}
|
||
.lg-done.show{display:flex;}
|
||
.lg-done .dg{font-size:52px;}
|
||
.lg-done .dt{font-size:24px; font-weight:900; color:var(--green);}
|
||
.confetti{position:absolute; width:10px; height:10px; border-radius:3px; top:-12px; z-index:6; pointer-events:none; animation:fall linear forwards;}
|
||
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);}}
|
||
#dragClone{
|
||
position:fixed; z-index:9000; pointer-events:none; transform:translate(-50%,-60%) scale(1.08);
|
||
filter:drop-shadow(0 12px 16px rgba(0,0,0,.28));
|
||
}
|
||
/* ---------- custom words editor ---------- */
|
||
.lg-editor{
|
||
position:absolute; inset:0; z-index:20; background:var(--surface); display:none;
|
||
flex-direction:column; gap:10px; padding:14px 16px; overflow:auto;
|
||
}
|
||
.lg-editor.open{display:flex;}
|
||
.lg-ed-head{display:flex; align-items:center; justify-content:space-between;}
|
||
.lg-ed-head b{font-size:17px;}
|
||
.lg-ed-form{
|
||
display:flex; gap:10px; align-items:center; flex-wrap:wrap;
|
||
background:var(--surface-2); border-radius:14px; padding:12px;
|
||
}
|
||
.lg-ed-form input[type=text]{
|
||
border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit;
|
||
font-size:16px; outline:none;
|
||
}
|
||
.lg-ed-form input.ed-word{width:170px; text-transform:lowercase;}
|
||
.ed-preview{width:52px; height:52px; display:flex; align-items:center; justify-content:center;
|
||
font-size:34px; background:var(--surface); border-radius:10px; border:2px dashed var(--line); overflow:hidden; flex:none;}
|
||
.ed-preview img{width:100%; height:100%; object-fit:contain;}
|
||
.ed-add{border:none; border-radius:10px; padding:11px 20px; font:inherit; font-weight:800;
|
||
background:var(--green); color:#fff; cursor:pointer; font-size:14.5px;}
|
||
.ed-msg{width:100%; color:var(--red); font-weight:700; font-size:13.5px; min-height:16px;}
|
||
/* modern tabsysteem: underline-tabs die overlopen in hun paneel.
|
||
De tabbalk deelt de ondergrond met de inhoud; alleen een hairline scheidt ze
|
||
en de accentlijn van de actieve tab valt daaroverheen. */
|
||
.ed-tabs{
|
||
display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px;
|
||
overflow-x:auto; scrollbar-width:thin;
|
||
}
|
||
.ed-tabs button{
|
||
border:none; border-radius:0; padding:10px 15px 11px; font:inherit; font-weight:700;
|
||
font-size:14px; background:transparent; color:var(--muted); cursor:pointer;
|
||
position:relative; margin-bottom:-1px; flex:none;
|
||
}
|
||
.ed-tabs button:hover{color:var(--ink);}
|
||
.ed-tabs button.active{color:var(--ink);}
|
||
.ed-tabs button.active::after{
|
||
content:""; position:absolute; left:10px; right:10px; bottom:0;
|
||
height:2.5px; border-radius:2px; background:var(--accent);
|
||
}
|
||
.ed-pane{padding:2px 0 0; min-height:120px;}
|
||
/* uniforme segmented control (kleine keuzegroepen: taal, niveau, timer, chips) */
|
||
.ed-cats{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px;}
|
||
.ed-cats button{
|
||
border:none; background:var(--surface-2); border-radius:999px; padding:6px 12px; font:inherit;
|
||
font-weight:700; font-size:12.5px; color:var(--muted); cursor:pointer;
|
||
}
|
||
.ed-cats button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); outline:1.5px solid var(--accent);}
|
||
.ed-grid{display:flex; gap:4px; flex-wrap:wrap; max-height:170px; overflow:auto;}
|
||
.ed-grid button{
|
||
border:none; background:transparent; border-radius:9px; font-size:26px;
|
||
width:42px; height:42px; cursor:pointer; padding:0; line-height:1;
|
||
}
|
||
.ed-grid button:hover{background:#dbe8f8;}
|
||
.ed-grid button.sel{background:var(--accent-soft); outline:1.5px solid var(--accent);}
|
||
.ed-pictorow{display:flex; gap:8px; margin-bottom:10px;}
|
||
.ed-pictorow input{flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-size:15px; outline:none;}
|
||
.ed-pictorow .tbtn{flex:none;}
|
||
.ed-pgrid{display:flex; gap:8px; flex-wrap:wrap; max-height:180px; overflow:auto;}
|
||
.ed-pgrid button{
|
||
border:1px solid var(--line); background:var(--surface); border-radius:12px; width:74px; height:74px;
|
||
cursor:pointer; padding:5px;
|
||
}
|
||
.ed-pgrid button:hover{border-color:var(--blue);}
|
||
.ed-pgrid button.sel{border-color:var(--accent); background:var(--accent-soft);}
|
||
.ed-pgrid img{width:100%; height:100%; object-fit:contain;}
|
||
.ed-credit{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.4;}
|
||
.ed-credit a{color:var(--blue);}
|
||
.ed-status{font-size:13.5px; font-weight:700; color:var(--muted); padding:6px 0;}
|
||
.ed-upload{background:var(--surface-2); border-radius:10px; padding:11px 16px; font-weight:700;
|
||
font-size:14px; cursor:pointer; display:inline-block;}
|
||
.ed-upload input{display:none;}
|
||
.ed-uphint{font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.45;}
|
||
.ed-p-library{min-height:120px;padding:18px;border:1px dashed var(--accent);border-radius:14px;background:linear-gradient(135deg,var(--surface-2),var(--accent-soft));text-align:center;}
|
||
.ed-open-library{min-height:46px;font-weight:850;}
|
||
.ed-library-hint{max-width:520px;margin:10px auto 0;color:var(--muted);font-size:13px;line-height:1.5;}
|
||
.lg-ed-list{display:flex; flex-direction:column; gap:6px;}
|
||
.lg-ed-list .empty{color:var(--muted); font-weight:700; text-align:center; padding:18px 0;}
|
||
.ed-row{display:flex; align-items:center; gap:12px; background:var(--surface-2); border-radius:12px; padding:7px 12px;}
|
||
.ed-row .ep{width:40px; height:40px; font-size:28px; display:flex; align-items:center; justify-content:center;}
|
||
.ed-row .ep img{width:100%; height:100%; object-fit:contain; border-radius:8px;}
|
||
.ed-row .ew{font-weight:800; font-size:17px; letter-spacing:2px; flex:1;}
|
||
.ed-row .edel{border:none; background:var(--red-soft); color:var(--red); border-radius:8px;
|
||
width:30px; height:30px; cursor:pointer; font-weight:900;}
|
||
.ed-row .edel:hover{background:var(--red); color:#fff;}
|
||
.ed-row.base{opacity:.65;}
|
||
/* =========== Notes widget =========== */
|
||
.notes{flex:1; width:100%; min-height:0; border:none; resize:none; font:inherit; font-size:16px;
|
||
padding:16px; outline:none; background:transparent; color:#26354a; line-height:1.55;}
|
||
.notes.large{font-size:22px;}
|
||
/* =========== Writing pad widget =========== */
|
||
.wp{flex:1; min-height:0; display:flex; flex-direction:column;}
|
||
.wp-bar{
|
||
display:flex; gap:10px; padding:8px 10px; flex-wrap:wrap; align-items:center;
|
||
flex:none; background:var(--surface-2); border-bottom:1px solid var(--line);
|
||
}
|
||
.wp-group{display:flex; gap:4px; align-items:center; background:var(--surface-2); border-radius:10px; padding:3px;}
|
||
.wp-group button{
|
||
border:none; background:transparent; border-radius:8px; width:32px; height:32px;
|
||
cursor:pointer; font-size:16px; line-height:1; padding:0;
|
||
display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.wp-group button.on{background:var(--surface); box-shadow:0 1px 4px rgba(30,50,90,.2);}
|
||
.wp-color{border-radius:50% !important; position:relative;}
|
||
.wp-color i{width:18px; height:18px; border-radius:50%; display:block;}
|
||
.wp-color.on{outline:2.5px solid var(--ink); outline-offset:-3px;}
|
||
.wp-size i{border-radius:50%; background:var(--ink); display:block;}
|
||
.wp-bg{font-size:0 !important;}
|
||
.wp-bg i{
|
||
width:20px; height:20px; display:block; border-radius:4px; border:1.5px solid #9db6d8;
|
||
background-color:#fff; background-size:100% 25%;
|
||
}
|
||
.wp-bg[data-bg=blank] i{background-image:none;}
|
||
.wp-bg[data-bg=dots] i{background-image:radial-gradient(circle,#9db6d8 1px,transparent 1px); background-size:5px 5px;}
|
||
.wp-bg[data-bg=lines] i{background-image:repeating-linear-gradient(#0000 0 4px, #9db6d8 4px 5px);}
|
||
.wp-bg[data-bg=write] i{background-image:repeating-linear-gradient(#0000 0 2px, #c3d5ec 2px 3px, #0000 3px 5px, #6d92c4 5px 6px);}
|
||
.wp-bg[data-bg=grid-s] i{background-image:repeating-linear-gradient(#0000 0 4px, #9db6d8 4px 5px),repeating-linear-gradient(90deg,#0000 0 4px, #9db6d8 4px 5px);}
|
||
.wp-bg[data-bg=grid-b] i{background-image:repeating-linear-gradient(#0000 0 8px, #9db6d8 8px 9px),repeating-linear-gradient(90deg,#0000 0 8px, #9db6d8 8px 9px);}
|
||
.wp-clear{border:none; background:var(--red-soft); color:var(--red); border-radius:10px;
|
||
width:34px; height:34px; cursor:pointer; font-size:15px; margin-left:auto;}
|
||
.wp-clear:hover{background:var(--red); color:#fff;}
|
||
.wp-stage{flex:1; min-height:0; position:relative; background:var(--surface);}
|
||
.wp-stage canvas{position:absolute; inset:0; touch-action:none; cursor:crosshair;}
|
||
.wp-stage.t-text canvas{cursor:text;}
|
||
.wp-text-input{
|
||
position:absolute; z-index:5; background:rgba(255,255,255,.85);
|
||
border:1.5px dashed var(--blue); border-radius:6px; padding:2px 6px;
|
||
font-family:inherit; font-weight:700; outline:none; min-width:130px;
|
||
}
|
||
/* paper backgrounds (CSS, so the eraser only removes ink) */
|
||
.wp-stage.bg-lines{background-image:repeating-linear-gradient(#0000 0 31px, #aec5e4 31px 32px);}
|
||
.wp-stage.bg-write{background-image:repeating-linear-gradient(
|
||
#0000 0 15px, #c3d5ec 15px 16px, #0000 16px 31px, #6d92c4 31px 32.5px, #0000 32.5px 47px, #c3d5ec 47px 48px, #0000 48px 63px);}
|
||
.wp-stage.bg-grid-s{background-image:
|
||
repeating-linear-gradient(#0000 0 19px, #c9d9ee 19px 20px),
|
||
repeating-linear-gradient(90deg,#0000 0 19px, #c9d9ee 19px 20px);}
|
||
.wp-stage.bg-grid-b{background-image:
|
||
repeating-linear-gradient(#0000 0 39px, #aec5e4 39px 40px),
|
||
repeating-linear-gradient(90deg,#0000 0 39px, #aec5e4 39px 40px);}
|
||
/* =========== Media widget =========== */
|
||
.media{flex:1; min-height:0; display:flex; flex-direction:column;}
|
||
.media-bar{
|
||
display:flex; gap:8px; padding:8px 10px; flex:none;
|
||
background:var(--surface-2); border-bottom:1px solid var(--line);
|
||
}
|
||
.media-bar input{
|
||
flex:1; min-width:0; border:1px solid var(--line); border-radius:10px;
|
||
padding:8px 10px; font:inherit; font-size:14px; outline:none;
|
||
}
|
||
.media-bar input:focus{border-color:var(--blue);}
|
||
.media-stage{
|
||
flex:1; min-height:0; background:#141a24; display:flex;
|
||
align-items:center; justify-content:center; overflow:hidden;
|
||
}
|
||
.media-stage iframe{width:100%; height:100%; border:none;}
|
||
.media-stage img,.media-stage video{max-width:100%; max-height:100%;}
|
||
.media-msg{color:#93a4bd; font-weight:700; font-size:14px; text-align:center; padding:20px; line-height:1.5;}
|
||
.media-yt{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
|
||
.media-yt img{max-width:100%; max-height:100%;}
|
||
.media-play{
|
||
position:absolute; border:none; width:76px; height:54px; border-radius:14px;
|
||
background:rgba(224,60,50,.95); color:#fff; font-size:24px; cursor:pointer;
|
||
display:flex; align-items:center; justify-content:center;
|
||
box-shadow:0 6px 18px rgba(0,0,0,.4);
|
||
}
|
||
.media-play:hover{transform:scale(1.08);}
|
||
/* =========== Math widgets =========== */
|
||
.mt{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px 14px;}
|
||
.mt-top{display:flex; gap:8px; align-items:center; flex:none;}
|
||
.mt-score{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap;}
|
||
.mt-card{
|
||
flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
|
||
justify-content:center; gap:12px; background:var(--surface);
|
||
border:1px solid var(--line); border-radius:18px; position:relative; padding:10px; overflow:hidden;
|
||
}
|
||
.mt-q{font-size:40px; font-weight:900; letter-spacing:1px; text-align:center;}
|
||
.mt-a{
|
||
min-width:110px; height:56px; border-radius:14px; border:2.5px dashed #b9c7d9;
|
||
background:var(--surface-2); font-size:32px; font-weight:900; display:flex; align-items:center;
|
||
justify-content:center; color:var(--blue); padding:0 16px;
|
||
}
|
||
.mt-a.ok{border-style:solid; border-color:var(--green); background:#e3f6ea; color:var(--green);}
|
||
.mt-a.shake{animation:shake .35s;}
|
||
.mt-fb{min-height:24px; font-size:16px; font-weight:800; color:var(--green); text-align:center;}
|
||
.mt-fb.ans{color:var(--red);}
|
||
.mt-pad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:none;}
|
||
.mt-pad button{
|
||
border:none; border-radius:12px; background:var(--surface-2); font:inherit; font-weight:900;
|
||
font-size:22px; padding:12px 0; cursor:pointer; color:var(--ink);
|
||
}
|
||
.mt-pad button:hover{background:var(--surface-3);}
|
||
.mt-pad .ok{background:var(--green); color:#fff;}
|
||
.mt-done{
|
||
position:absolute; inset:0; border-radius:18px; display:none; flex-direction:column;
|
||
align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.9);
|
||
backdrop-filter:blur(2px); z-index:5;
|
||
}
|
||
.mt-done.show{display:flex;}
|
||
.mt-done .dg{font-size:46px;}
|
||
.mt-done .dt{font-size:22px; font-weight:900; color:var(--green);}
|
||
.mt-done .ds{font-size:16px; font-weight:800; color:var(--muted);}
|
||
.mt-again{
|
||
border:none; border-radius:12px; padding:10px 22px; background:var(--green);
|
||
color:#fff; font:inherit; font-weight:800; font-size:15px; cursor:pointer; margin-top:6px;
|
||
}
|
||
/* =========== high-contrast accessibility mode =========== */
|
||
/* wint óók van body.dark: hoog contrast is altijd zwart-op-wit */
|
||
body.hc,body.dark.hc{
|
||
--bg:#fff; --ink:#000; --muted:#2b2b2b; --blue:#0047ab; --red:#c40000;
|
||
--green:#006b2d; --yellow:#ffd400; --wood:#ffe9b0; --wood-d:#8a6a00;
|
||
--surface:#fff; --surface-2:#f2f2f2; --surface-3:#e2e2e2; --line:#000;
|
||
--accent:#0047ab; --accent-ink:#00306f; --accent-soft:#d6e4ff;
|
||
--red-soft:#ffd9d6;
|
||
--glass:#fff; --glass-strong:#fff; --glass-line:#000;
|
||
}
|
||
body.hc #board.bg-dots{background-image:radial-gradient(circle,#7d8ea3 1.7px,transparent 1.7px);}
|
||
body.hc .widget{background:var(--surface); border:2.5px solid #000; box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:none;}
|
||
body.hc .widget:hover,.body.hc .widget:focus-within{background:var(--surface);}
|
||
body.hc .widget .wmin,body.hc .widget .wclose{opacity:1;}
|
||
body.hc .widget-rs{opacity:1; border:3px solid #000;}
|
||
body.hc .widget-head{background:#f2f2f2; border-bottom:2px solid #000;}
|
||
body.hc .slot{border-color:#000; background:var(--surface);}
|
||
body.hc .slot .ghost{color:#666;}
|
||
body.hc .slot .dots i.on{background:#333;}
|
||
body.hc .blok .dots i.on{background:#6a4a00;}
|
||
body.hc .lg-instr{background:var(--surface); border-color:#000; color:#000;}
|
||
body.hc #hud,body.hc .dock-item,body.hc .fab-item,body.hc #penbar .wp-group{border:2px solid #000; background:var(--surface);}
|
||
body.hc #fab{background:#0047ab;}
|
||
body.hc :focus-visible{outline:3px solid #0047ab; outline-offset:2px;}
|
||
body.hc .mm-node{box-shadow:0 3px 10px rgba(0,0,0,.4); border-width:3px;}
|
||
/* high contrast inside every widget */
|
||
body.hc .lg-levels,body.hc .tseg{background:var(--surface); border:2px solid #000; border-radius:12px;}
|
||
body.hc .lg-levels button,body.hc .tseg button{color:#000;}
|
||
body.hc .lg-levels button.active{background:#006b2d; color:#fff;}
|
||
body.hc .lg-cards button,body.hc .lg-num,body.hc .fl-sel,body.hc .lg-snd,body.hc .lg-mode{
|
||
border-color:#000; color:#000; background:var(--surface);
|
||
}
|
||
body.hc .lg-cards button.active{background:#ffd400; border-color:#000; color:#000;}
|
||
body.hc .lg-tray{background:var(--surface); border:2px dashed #000;}
|
||
body.hc .lg-card,body.hc .mt-card{background:var(--surface); border-color:#000;}
|
||
body.hc .lg-progress,body.hc .mt-score,body.hc .mm-hint,body.hc .dc-sum{color:#000;}
|
||
body.hc .lg-stars{color:#7a5d00;}
|
||
body.hc .mt-a{border-color:#000; background:var(--surface);}
|
||
body.hc .mt-pad button{background:var(--surface); border:2px solid #000; color:#000;}
|
||
body.hc .mt-pad .ok{background:#006b2d; border-color:#006b2d; color:#fff;}
|
||
body.hc .mt-fb{color:#006b2d;}
|
||
body.hc .mt-fb.ans{color:#c40000;}
|
||
body.hc .lg-kbd button,body.hc .blok{border-color:#6a4a00;}
|
||
body.hc .fl-word.dim{color:#8a8a8a;}
|
||
body.hc .slot .dots i.off{border-color:#666;}
|
||
body.hc .np textarea,body.hc .media-bar input,body.hc .ed-theme-sel,
|
||
body.hc .lg-ed-form input[type=text],body.hc .ed-pictorow input{border-color:#000; color:#000;}
|
||
body.hc .np-result{background:#0047ab;}
|
||
body.hc .np-row label,body.hc .thint,body.hc .guestnote,body.hc .ed-credit,
|
||
body.hc .gcard .gd,body.hc .st-footer{color:#222;}
|
||
body.hc .gcard{border-color:#000; background:var(--surface);}
|
||
body.hc .gcat-title{color:#000;}
|
||
body.hc .tbtn.ghost{background:var(--surface); border:2px solid #000; color:#000;}
|
||
body.hc .wmin,body.hc .wclose{border:1.5px solid #000; background:var(--surface);}
|
||
body.hc .wclose{color:#c40000;}
|
||
body.hc .wz.on,body.hc #zoomPct.on{background:#ffd400; color:#000;}
|
||
body.hc .ed-tabs button,body.hc .ed-cats button{color:#000; background:var(--surface); border:1.5px solid #000;}
|
||
body.hc .ed-tabs button.active,body.hc .ed-cats button.active{background:#ffd400;}
|
||
body.hc .ed-pane{border-color:#000; background:var(--surface);}
|
||
body.hc .timer .presets button,body.hc .timer .main button,body.hc .ticon,
|
||
body.hc .hud-btn,body.hc .mm-seg button{background:var(--surface); border:1.5px solid #000; color:#000;}
|
||
body.hc .timer .main .bstart{background:#006b2d; border-color:#006b2d; color:#fff;}
|
||
body.hc .dock-item{color:#000;}
|
||
body.hc .media-msg{color:#ddd;}
|
||
/* =========== Flash words widget =========== */
|
||
.fl-word{font-size:58px; font-weight:900; letter-spacing:3px; min-height:70px; display:flex; align-items:center;}
|
||
.fl-word.dim{color:#c2cddc;}
|
||
.fl-pic{font-size:46px; min-height:56px; display:flex; align-items:center;}
|
||
.fl-pic img{width:56px; height:56px; object-fit:contain;}
|
||
.fl-sel{
|
||
border:1px solid var(--line); border-radius:10px; height:34px; font:inherit;
|
||
font-weight:800; font-size:13px; color:var(--muted); background:var(--surface);
|
||
padding:0 6px; outline:none; cursor:pointer;
|
||
}
|
||
/* =========== Chop & blend widget =========== */
|
||
.hk-word{min-height:70px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center;}
|
||
.hk-whole{font-size:52px; font-weight:900; letter-spacing:3px;}
|
||
.hk-l{font-size:46px; font-weight:900; animation:pop .4s both;}
|
||
.hk-l.v{color:var(--red);}
|
||
.hk-l.c{color:var(--blue);}
|
||
.hk-sep{font-size:30px; color:var(--muted); font-weight:700; margin:0 3px;}
|
||
/* =========== Balloon word widget =========== */
|
||
.bl-balloons{font-size:34px; letter-spacing:4px; min-height:44px;}
|
||
.bl-word{font-size:44px; font-weight:900; letter-spacing:6px; min-height:56px; display:flex; align-items:center;}
|
||
.bl-msg{min-height:26px; font-size:17px; font-weight:800;}
|
||
.bl-msg.win{color:var(--green);}
|
||
.bl-msg.lose{color:var(--red);}
|
||
.bl-kbd button:disabled{cursor:default;}
|
||
/* =========== Anchor words widget =========== */
|
||
.an{flex:1; min-height:0; display:flex; flex-direction:column;}
|
||
.an-hint{
|
||
flex:none; font-size:11.5px; font-weight:700; color:var(--muted);
|
||
padding:6px 10px; background:var(--surface-2); border-bottom:1px solid var(--line);
|
||
}
|
||
/* bibliotheekknoppen: bewaar (💾) en verkenner (🗂) rechtsboven op de stage */
|
||
.an{position:relative;}
|
||
.an-tools{position:absolute; top:34px; right:8px; z-index:3; display:flex; gap:6px;}
|
||
.an-tools button{
|
||
border:1px solid var(--line); background:var(--surface); border-radius:10px;
|
||
width:34px; height:34px; cursor:pointer; font-size:15px; opacity:.85;
|
||
}
|
||
.an-tools button:hover{opacity:1; border-color:var(--blue);}
|
||
.an-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface); cursor:grab; touch-action:none;}
|
||
.an-stage:active{cursor:grabbing;}
|
||
.an-layer{position:absolute; inset:0;}
|
||
.an-cell{
|
||
position:absolute; width:128px; height:56px; border-radius:12px; border:2px dashed #dbe4f0;
|
||
display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:15px;
|
||
color:var(--ink); padding:2px 8px; overflow:hidden; text-align:center; cursor:pointer;
|
||
}
|
||
.an-cell:hover{border-color:#b6c6dc;}
|
||
.an-cell.filled{border-style:solid; border-color:#cdd7e4; background:var(--surface); box-shadow:0 3px 8px rgba(30,50,90,.12);}
|
||
.an-cell.root{border:2.5px solid #d9a400; background:#fff8dd;}
|
||
.an-cell.root.filled{background:var(--yellow); font-size:16px;}
|
||
.an-cell input{width:100%; border:none; outline:none; font:inherit; text-align:center; background:transparent;}
|
||
.an-word{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
|
||
.an-pic{
|
||
flex:none; width:22px; height:22px; display:flex; align-items:center;
|
||
justify-content:center; font-size:16px; line-height:1;
|
||
}
|
||
.an-pic img{width:100%; height:100%; object-fit:contain;}
|
||
/* geen automatisch plaatje (nog) - lege, klikbare plek i.p.v. een nep-ankersymbool,
|
||
dient als snelkoppeling naar de plaatjeskiezer */
|
||
.an-pic-empty{
|
||
border:1.5px dashed #cdd7e4; border-radius:6px; cursor:pointer; opacity:.6;
|
||
transition:opacity .15s, border-color .15s;
|
||
}
|
||
.an-pic-empty:hover{opacity:1; border-color:var(--blue);}
|
||
.an-dot{
|
||
position:absolute; right:4px; bottom:4px; width:15px; height:15px; border-radius:50%;
|
||
border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer; padding:0;
|
||
opacity:.55; transition:opacity .15s;
|
||
}
|
||
.an-cell:hover .an-dot{opacity:1;}
|
||
body.hc .an-cell{border-color:#555; color:#000;}
|
||
/* =========== Dice widget =========== */
|
||
.dc{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; align-items:center;}
|
||
.dc-row{flex:1; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; cursor:pointer;}
|
||
.die{
|
||
width:92px; height:92px; background:var(--surface); border:3.5px solid var(--ink); border-radius:18px;
|
||
display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
|
||
padding:10px; box-shadow:0 5px 0 rgba(0,0,0,.15);
|
||
}
|
||
.die.rolling{animation:shake .3s infinite;}
|
||
.die i{width:16px; height:16px; border-radius:50%; background:var(--ink); place-self:center; visibility:hidden;}
|
||
.die i.on{visibility:visible;}
|
||
.dc-sum{font-size:22px; font-weight:900; min-height:28px;}
|
||
/* =========== Traffic light widget =========== */
|
||
.tl{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:14px;}
|
||
.tl-house{width:min(100%,390px); background:#22272f; border-radius:26px; padding:14px; display:flex; flex-direction:column; gap:9px; box-shadow:0 10px 26px rgba(0,0,0,.35);}
|
||
.tl-lamp{
|
||
width:70px; height:70px; flex:none; border-radius:50%; border:4px solid rgba(255,255,255,.13); cursor:pointer;
|
||
opacity:.22; transition:all .2s; padding:0;
|
||
}
|
||
.tl-lamp.red{background:#e33; color:#e33;}
|
||
.tl-lamp.orange{background:#f5a623; color:#f5a623;}
|
||
.tl-lamp.green{background:#2ecc71; color:#2ecc71;}
|
||
.tl-lamp.on{opacity:1; box-shadow:0 0 46px currentColor;}
|
||
.tl-option{display:flex;align-items:center;gap:15px;color:#fff}.tl-option>span{display:flex;flex-direction:column;gap:2px}.tl-option strong{font-size:18px}.tl-option small{color:#cbd3df;font-size:13px;font-weight:700}.tl-status{min-height:25px;color:var(--ink);font-size:17px;font-weight:900;text-align:center}
|
||
.tl-mini{padding:12px 10px; gap:10px; border-radius:20px;}
|
||
.tl-mini .tl-lamp{width:62px; height:62px;}
|
||
/* =========== Name picker widget =========== */
|
||
.np{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px;}
|
||
.np textarea{
|
||
flex:1; min-height:0; border:1px solid var(--line); border-radius:12px; padding:10px;
|
||
font:inherit; font-size:14.5px; resize:none; outline:none;
|
||
}
|
||
.np-result{
|
||
min-height:72px; display:flex; align-items:center; justify-content:center;
|
||
font-size:32px; font-weight:900; color:#fff; text-align:center; padding:8px 12px;
|
||
background:linear-gradient(135deg,var(--blue),var(--purple));
|
||
border-radius:18px; position:relative; overflow:hidden;
|
||
text-shadow:0 2px 6px rgba(0,0,0,.3); letter-spacing:1px;
|
||
}
|
||
.np-result.spin{animation:npspin .25s infinite; background:linear-gradient(135deg,var(--orange),var(--red));}
|
||
.np-result.winner{animation:pop .45s;}
|
||
@keyframes npspin{0%,100%{transform:scale(1) rotate(-1deg);} 50%{transform:scale(1.04) rotate(1deg);}}
|
||
.np-row{display:flex; gap:10px; align-items:center; flex:none;}
|
||
.np-row label{font-size:13px; font-weight:700; color:var(--muted); display:flex; gap:5px; align-items:center; margin-left:auto;}
|
||
.np-progress{margin:-3px 0;color:var(--muted);font-size:12px;font-weight:900;text-align:center}
|
||
/* gallery categories */
|
||
.gcat-title{font-size:13.5px; font-weight:800; color:var(--muted); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.5px;}
|
||
.gcat-title:first-child{margin-top:0;}
|
||
/* =========== Timer widget =========== */
|
||
.timer{display:flex; flex-direction:column; align-items:center; flex:1; min-height:0; gap:10px; padding:14px;}
|
||
.tstage{
|
||
flex:1; min-height:0; width:100%; display:flex; flex-direction:column;
|
||
align-items:center; justify-content:center; gap:8px;
|
||
}
|
||
.topts{display:flex; justify-content:space-between; align-items:center; width:100%; flex:none;}
|
||
.tseg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
|
||
.tseg button{border:none; border-radius:999px; background:transparent; padding:6px 12px; font-size:15px; cursor:pointer; line-height:1; color:var(--muted);}
|
||
.tseg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
|
||
.mm-seg button{font:inherit; font-weight:700; font-size:13px;}
|
||
.ticon{border:none; background:var(--surface-2); border-radius:var(--radius); padding:7px 11px; font-size:15px; cursor:pointer; line-height:1;}
|
||
.ticon.on{background:var(--accent-soft); color:var(--accent-ink);}
|
||
.timer .tpie{
|
||
flex:1 1 0; min-height:80px; aspect-ratio:1/1; width:auto; max-width:100%; max-height:220px;
|
||
display:none; cursor:grab; touch-action:none;
|
||
}
|
||
.timer .tpie:active{cursor:grabbing;}
|
||
.timer.m-pie .tpie,.timer.m-both .tpie{display:block;}
|
||
.timer .tdisp{font-size:46px; font-weight:900; font-variant-numeric:tabular-nums; flex:none;}
|
||
.timer.m-both .tdisp{font-size:26px;}
|
||
.timer.m-pie .tdisp{font-size:17px; color:var(--muted);}
|
||
.timer .tdisp.warn{color:var(--red); animation:blink 1s infinite;}
|
||
@keyframes blink{50%{opacity:.35;}}
|
||
.timer .trow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; flex:none;}
|
||
.thint{flex:none;}
|
||
.timer .presets button{
|
||
border:none; border-radius:999px; padding:6px 13px; background:var(--surface-2); font:inherit;
|
||
font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer;
|
||
}
|
||
.timer .presets button:hover{background:var(--surface-3); color:var(--ink);}
|
||
.timer .main button{
|
||
border:none; border-radius:12px; padding:10px 26px; font:inherit; font-weight:800;
|
||
font-size:15.5px; cursor:pointer; background:var(--surface-2); color:var(--ink);
|
||
}
|
||
.timer .main .bstart{background:var(--green); color:#fff; min-width:110px;}
|
||
.thint{font-size:11.5px; color:var(--muted); text-align:center; line-height:1.4;}
|
||
.timer.flash{animation:tflash .5s 4;}
|
||
@keyframes tflash{50%{background:#fdeaa0;}}
|
||
|
||
/* ---------- login-extra's (school, koppelcode) ---------- */
|
||
#liSchool{
|
||
width:100%; border:1px solid var(--line); border-radius:var(--radius);
|
||
height:var(--control-h); padding:0 12px; color:var(--ink);
|
||
font:inherit; font-size:15px; outline:none; margin-bottom:10px; background:var(--surface);
|
||
}
|
||
.lisub{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:8px;}
|
||
#ownPwBlock .lrow{margin-bottom:10px;}
|
||
#ownPwBlock input{flex:1; min-width:0;}
|
||
/* ---------- weergave-instellingen (tabblad "Weergave") ---------- */
|
||
.vw-row{
|
||
display:flex; align-items:center; justify-content:space-between; gap:12px;
|
||
min-height:var(--control-h); padding:7px 0; border-bottom:1px solid var(--line);
|
||
}
|
||
.vw-row:last-of-type{border-bottom:none;}
|
||
.vw-lbl{font-weight:700; font-size:14.5px;}
|
||
.seg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px; flex:none;}
|
||
.seg button{
|
||
border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700;
|
||
cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px;
|
||
}
|
||
.seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
|
||
/* ---------- beheerpaneel (tabblad "Beheer" binnen Instellingen) ----------
|
||
alle velden/knoppen in een rij zijn even hoog: var(--control-h) */
|
||
.am-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
|
||
.am-head h2{margin:0; font-size:20px;}
|
||
.am-h3{margin:14px 0 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
|
||
.am-msg{
|
||
min-height:20px; font-size:13.5px; font-weight:700; color:var(--green); margin:4px 0;
|
||
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
|
||
}
|
||
/* vaste schoolkiezer voor de systeemmanager, boven alle beheer-tabs */
|
||
.am-schoolbar{
|
||
display:flex; align-items:center; gap:8px; margin:0 0 10px;
|
||
padding:8px 10px; background:var(--surface-2); border-radius:12px;
|
||
}
|
||
.am-schoolbar-lbl{font-size:16px;}
|
||
.am-schoolbar .am-sel{flex:1; min-width:0;}
|
||
.am-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;}
|
||
.am-inp,.am-sel,.am-pw{
|
||
border:1px solid var(--line); border-radius:var(--radius); height:var(--control-h);
|
||
padding:0 11px; font:inherit; font-size:14px; outline:none;
|
||
background:var(--surface); color:var(--ink); min-width:0;
|
||
}
|
||
.am-inp:focus,.am-sel:focus,.am-pw:focus{border-color:var(--accent);}
|
||
/* de generieke settings-input-regel (width:100%/marge) geldt niet in het beheerpaneel:
|
||
daar bepalen de am-*-regels de maat, zodat alles in een rij gelijk uitlijnt */
|
||
#settingsModal #adminModal input{margin-bottom:0;}
|
||
.am-inp{flex:1; min-width:140px;}
|
||
.am-pw{width:120px;}
|
||
.am-list{display:flex; flex-direction:column; gap:5px;}
|
||
.am-group{font-weight:700; font-size:13px; margin-top:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
|
||
/* inklapbare groepskop (leerlingen per klas): klikbaar, pijltje in de tekst */
|
||
.am-group-toggle{cursor:pointer; user-select:none;}
|
||
.am-group-toggle:hover{color:var(--ink);}
|
||
/* formulier-fout direct bij het formulier zelf */
|
||
.am-form-err{width:100%; min-height:0; color:var(--red); font-size:13px; font-weight:700;}
|
||
/* Systeem-tab: schoolrij duidelijk zwaarder dan de beheerder-subrijen */
|
||
.am-row-school{background:var(--accent-soft);}
|
||
.am-row-school > .am-name{font-size:15px;}
|
||
.am-row-sub{
|
||
margin-left:22px; background:var(--surface);
|
||
border-left:3px solid var(--line); border-radius:var(--radius-s);
|
||
}
|
||
/* uitklapbaar gereedschapsblok per gebruikersrij (achter het ✏-knopje) */
|
||
.am-row-tools{
|
||
display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%;
|
||
margin-top:6px; padding-top:8px; border-top:1px dashed var(--line);
|
||
}
|
||
.am-edit{
|
||
border:none; background:transparent; border-radius:8px; cursor:pointer;
|
||
font-size:14px; padding:4px 8px; opacity:.6;
|
||
}
|
||
.am-edit:hover{opacity:1; background:var(--surface-3);}
|
||
.am-edit.on{opacity:1; background:var(--accent-soft);}
|
||
/* uniforme maat: álle knoppen en velden in het beheer op controlhoogte,
|
||
zodat formulieren en actieknoppen in elke rij gelijk uitlijnen */
|
||
#adminModal .tbtn{
|
||
min-height:var(--control-h); height:var(--control-h);
|
||
padding:0 14px; font-size:14px;
|
||
}
|
||
/* één interactiesysteem: mini-label boven elk veld/select/knopgroep */
|
||
.am-field{display:flex; flex-direction:column; gap:3px; min-width:0;}
|
||
.am-field-lbl{
|
||
font-size:10.5px; font-weight:800; color:var(--muted);
|
||
text-transform:uppercase; letter-spacing:.4px;
|
||
}
|
||
/* de rij-flexregels van .am-inp (flex-basis 0/100%) gelden binnen de
|
||
kolom-flex van het label verticaal en drukten het veld plat - binnenin
|
||
een veldlabel dus altijd de vaste controlhoogte, breedte via het label */
|
||
.am-field > .am-inp, .am-field > .am-sel, .am-field > .am-pw, .am-field > .am-inline,
|
||
.am-field > .am-classes, .am-field > .am-actions{flex:none; width:100%;}
|
||
.am-add .am-field{flex:1 1 100%;}
|
||
.am-row-tools .am-field{flex:0 1 auto; min-width:150px;}
|
||
.am-inline{display:flex; gap:6px; align-items:center;}
|
||
.am-inline > .am-inp, .am-inline > .am-pw{flex:1 1 auto; min-width:0;}
|
||
/* gevaarlijke acties: afwijkende kleur + tweede klik als bevestiging */
|
||
.am-btn.am-danger{background:var(--red-soft); color:var(--red); font-weight:800;}
|
||
.am-btn.am-danger.armed{background:var(--red); color:#fff;}
|
||
/* credential-resultaat direct bij de gebruikersrij */
|
||
.am-result{
|
||
display:flex; align-items:center; gap:8px; width:100%;
|
||
background:var(--accent-soft); color:var(--accent-ink);
|
||
border-radius:10px; padding:8px 12px; font-weight:800;
|
||
}
|
||
.am-result code{font-size:16px; letter-spacing:.5px;}
|
||
.am-row{
|
||
display:flex; gap:8px; align-items:center; background:var(--surface-2);
|
||
border-radius:var(--radius); padding:7px 10px; flex-wrap:wrap;
|
||
}
|
||
.am-name{font-weight:700; font-size:14px; flex:1; min-width:120px;}
|
||
.am-role{font-size:12px; font-weight:700; color:var(--muted);}
|
||
.am-code{font-size:12.5px; font-weight:700; color:var(--orange);}
|
||
.am-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
|
||
.am-btn,.am-copy{
|
||
background:var(--surface); border-radius:var(--radius);
|
||
height:var(--control-h); padding:0 12px; border:1px solid var(--line);
|
||
font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; color:var(--ink); line-height:1;
|
||
}
|
||
.am-btn:hover,.am-copy:hover{background:var(--surface-3);}
|
||
.am-del{
|
||
border:1px solid var(--line); background:var(--red-soft); border-radius:var(--radius);
|
||
width:var(--control-h); height:var(--control-h); cursor:pointer; font-size:13px; flex:none;
|
||
}
|
||
.am-del:hover{background:var(--red);}
|
||
.am-classes{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
|
||
.am-chip{
|
||
display:inline-flex; gap:6px; align-items:center; background:var(--surface);
|
||
border:1px solid var(--line); border-radius:999px; padding:5px 12px;
|
||
font-weight:700; font-size:13px;
|
||
}
|
||
button.am-chip{cursor:pointer; color:var(--muted);}
|
||
button.am-chip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
|
||
.am-chipx{border:none; background:transparent; color:var(--red); font-weight:900; cursor:pointer; padding:0; font-size:11px;}
|
||
.am-reset{
|
||
background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
|
||
padding:10px 12px; margin:6px 0; display:flex; flex-direction:column; gap:8px;
|
||
}
|
||
.am-reset-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
|
||
.am-reset-list{display:flex; flex-direction:column; gap:5px; max-height:260px; overflow:auto;}
|
||
.am-reset-row{
|
||
display:flex; gap:8px; align-items:center; background:var(--surface);
|
||
border-radius:8px; padding:5px 8px; flex-wrap:wrap;
|
||
}
|
||
.am-reset-pw{font-weight:800; font-family:monospace; font-size:13px; color:var(--green);}
|
||
body.hc .am-row,body.hc .am-chip{border:1.5px solid #000; background:var(--surface);}
|
||
body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:var(--surface);}
|
||
|
||
/* ============================================================
|
||
Mobiel & tablet: responsieve aanpassingen. Alles hieronder is
|
||
additief - de bovenstaande desktopstijl blijft de standaard.
|
||
============================================================ */
|
||
|
||
/* ---------- tablet (≤1024px) ---------- */
|
||
@media (max-width:1024px){
|
||
}
|
||
|
||
/* ---------- telefoon (≤600px) ---------- */
|
||
@media (max-width:600px){
|
||
#toolbar{padding:0 8px; gap:6px; overflow-x:auto;}
|
||
/* alleen de uil op kleine schermen, woordmerk verdwijnt */
|
||
.logo-word{display:none;}
|
||
.tbtn{padding:0 10px; font-size:13px;}
|
||
/* de balk moet écht passen: zonder dit vielen 💾 Opslaan en ⚙ Instellingen
|
||
buiten beeld en zat 🖼 (afbeeldingscatalogus) precies onder de duim -
|
||
elke mis-tik opende dan het schermvullende afbeeldingenscherm. De
|
||
tekstzoom (A−/A＋) is toegankelijkheid en blijft dus zichtbaar; alleen
|
||
het percentage, de catalogusknop (blijft via ＋-menu bereikbaar) en
|
||
volledig scherm verdwijnen, en opslaan toont alleen 💾. */
|
||
#zoomPct,#btnImages,#btnFs{display:none;}
|
||
#btnSave span{display:none;}
|
||
#btnSave{min-width:0;}
|
||
#userLbl{display:inline-block; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;}
|
||
/* tekenbalk en zwevende knoppen deelden op een telefoon de onderrand en
|
||
lagen over elkaar heen: wissen/sluiten op de tekenbalk raakten dan de
|
||
＋- of bordenknop, waardoor "steeds" het bordenpaneel of ＋-menu
|
||
(→ afbeeldingenscherm) opende. Nu ligt de tekenbalk in een eigen laag
|
||
bóven de knoppenrij (hij groeit omhoog, dus dit klopt bij elke
|
||
schermbreedte), en houden ＋ en borden de onderrand voor zichzelf.
|
||
Gecentreerd op inhoudsbreedte (geen vaste randen), zodat de balk
|
||
geminimaliseerd ook echt smal is. */
|
||
#hud{bottom:88px; max-width:calc(100vw - 16px);}
|
||
|
||
/* beheerpaneel: dichte rijen worden gestapeld i.p.v. verdrukt */
|
||
.am-row{flex-direction:column; align-items:stretch;}
|
||
.am-row .am-pw{width:100%;}
|
||
.am-row .am-actions{display:flex; flex-direction:row; justify-content:flex-end; gap:6px;}
|
||
.am-reset-row{flex-direction:column; align-items:stretch;}
|
||
.am-add .am-inp{flex:1 1 100%;}
|
||
}
|
||
|
||
/* ---------- aanraakschermen (los van breedte) ---------- */
|
||
@media (pointer:coarse){
|
||
/* alle controls (ook invoervelden) groeien mee naar tikformaat */
|
||
:root{--control-h:44px;}
|
||
.hud-btn{width:var(--tap-sm); height:var(--tap-sm); font-size:15px;}
|
||
#penbar .wp-group button{width:var(--tap-sm); height:var(--tap-sm);}
|
||
#hud.vert{width:104px;}
|
||
#hud.vert #penbar .wp-group{grid-template-columns:repeat(2,36px);}
|
||
.am-chip{padding:7px 14px;}
|
||
.am-chipx{padding:4px;}
|
||
/* geen hover op aanraakschermen: de greep moet altijd zichtbaar zijn */
|
||
.widget-rs{opacity:.7; width:38px; height:38px;}
|
||
}
|
||
|
||
/* ============================================================
|
||
Menubalk-positie: links of rechts (Weergave-instelling).
|
||
De balk wordt een verticale kolom; bord en zwevende elementen
|
||
schuiven mee via dezelfde body-class.
|
||
============================================================ */
|
||
body.tb-left #toolbar,body.tb-right #toolbar{
|
||
top:0; bottom:0; width:var(--tbar); height:auto;
|
||
flex-direction:column; padding:12px 0; gap:10px;
|
||
overflow-y:auto; overflow-x:hidden;
|
||
}
|
||
body.tb-left #toolbar{left:0; right:auto; border-right:1px solid var(--line); border-bottom:none;}
|
||
body.tb-right #toolbar{right:0; left:auto; border-left:1px solid var(--line); border-bottom:none;}
|
||
body.tb-left .logo-word,body.tb-right .logo-word,
|
||
body.tb-left #verTag,body.tb-right #verTag,
|
||
body.tb-left #btnSave span,body.tb-right #btnSave span,
|
||
body.tb-left #userLbl,body.tb-right #userLbl{display:none;}
|
||
body.tb-left #toolbar .tbtn,body.tb-right #toolbar .tbtn{padding:0; width:var(--control-h); min-width:0; flex:none;}
|
||
body.tb-left #btnSave,body.tb-right #btnSave{min-width:0;}
|
||
body.tb-left #zoomPct,body.tb-right #zoomPct{min-width:0; font-size:11.5px;}
|
||
body.tb-left #board,body.tb-left #pupilView{inset:0 0 0 var(--tbar);}
|
||
body.tb-right #board,body.tb-right #pupilView{inset:0 var(--tbar) 0 0;}
|
||
body.tb-right #fab{right:calc(var(--tbar) + 16px);}
|
||
body.tb-right #fabBoardsBtn{right:calc(var(--tbar) + 88px);}
|
||
body.tb-right #boardStrip{right:calc(var(--tbar) + 12px);}
|
||
body.tb-left #fabmenu{right:24px;}
|
||
body.tb-right #fabmenu{right:calc(var(--tbar) + 16px);}
|
||
|
||
/* ============================================================
|
||
Weergave-instelling "glas-effect uit": ondoorzichtige panelen
|
||
i.p.v. blur - rustiger en lichter voor oudere digiborden.
|
||
============================================================ */
|
||
body.no-glass .widget,body.no-glass #hud,body.no-glass .fab-item,
|
||
body.no-glass #boardStrip,body.no-glass .mm-top,
|
||
body.no-glass .widget.bare .widget-head{
|
||
backdrop-filter:none; -webkit-backdrop-filter:none;
|
||
background:var(--surface);
|
||
}
|
||
body.no-glass .widget-head{background:var(--surface-2);}
|
||
|
||
/* ============================================================
|
||
Donker thema: bord-achtergrondpatronen en glas-laag.
|
||
(De chrome-laag volgt automatisch via de tokens in body.dark.)
|
||
============================================================ */
|
||
body.dark #board.bg-dots{background-image:radial-gradient(circle,#2c3a5e 1.4px,transparent 1.4px);}
|
||
body.dark #board.bg-lines{background-image:repeating-linear-gradient(#0000 0 39px,#2c3a5e 39px 40px);}
|
||
body.dark #board.bg-write{background-image:repeating-linear-gradient(
|
||
#0000 0 19px,#243052 19px 20px,#0000 20px 39px,#3a4a70 39px 40.5px,#0000 40.5px 59px,#243052 59px 60px,#0000 60px 79px);}
|
||
body.dark #board.bg-grid-s{background-image:
|
||
repeating-linear-gradient(#0000 0 24px,#243052 24px 25px),
|
||
repeating-linear-gradient(90deg,#0000 0 24px,#243052 24px 25px);}
|
||
body.dark #board.bg-grid-b{background-image:
|
||
repeating-linear-gradient(#0000 0 49px,#2c3a5e 49px 50px),
|
||
repeating-linear-gradient(90deg,#0000 0 49px,#2c3a5e 49px 50px);}
|
||
body.dark .widget{background:var(--glass); border-color:var(--glass-line);}
|
||
body.dark .widget:hover,body.dark .widget:focus-within{background:var(--glass-strong); border-color:rgba(255,255,255,.14);}
|
||
body.dark .widget-head{background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.08);}
|
||
body.dark #hud{background:var(--glass); border-color:var(--glass-line);}
|
||
body.dark .fab-item{background:var(--glass-strong); color:var(--ink);}
|
||
body.dark .fab-item:hover{background:var(--surface-3);}
|
||
body.dark #boardStrip{background:var(--glass-strong); border-color:var(--glass-line);}
|
||
body.dark .widget.bare .widget-head{background:var(--glass-strong);}
|
||
body.dark .mm-top{background:var(--glass-strong);}
|
||
body.dark .mm-pop{background:var(--surface); box-shadow:var(--shadow-2);}
|
||
body.dark .dock-item{background:var(--surface-2); color:var(--ink);}
|
||
body.dark .dock-item:hover{background:var(--surface-3);}
|
||
body.dark .wp-group button.on{background:var(--surface-3); box-shadow:none;}
|
||
body.dark .lg-kbd button,body.dark .blok{filter:saturate(.9) brightness(.96);}
|
||
body.dark .bs-card canvas{background:#fff;} /* bord-preview blijft de echte (witte) bordkleur tonen */
|
||
|
||
|
||
/* ---------- compacte tekenwerkbalk met selectie-popovers ---------- */
|
||
#penbar{flex-wrap:nowrap; gap:4px; overflow:visible;}
|
||
.pen-picker{position:relative; flex:none;}
|
||
.pen-current{
|
||
width:42px; height:32px; padding:0 5px; border:1px solid transparent; border-radius:9px;
|
||
background:var(--surface-2); color:var(--ink); cursor:pointer; display:flex;
|
||
align-items:center; justify-content:center; gap:3px; font:inherit;
|
||
}
|
||
.pen-current:hover,.pen-picker.open .pen-current{background:var(--surface-3); border-color:var(--line);}
|
||
.pen-current-value{font-size:16px; line-height:1; min-width:18px; text-align:center;}
|
||
.pen-caret{font-size:8px; color:var(--muted); transform:rotate(0); transition:transform .15s;}
|
||
.pen-picker.open .pen-caret{transform:rotate(180deg);}
|
||
.pen-current-color{width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);}
|
||
.pen-current-size{display:block; border-radius:50%; background:var(--ink);}
|
||
.pen-current-bg{width:19px; height:19px; display:block; border:1.5px solid #9db6d8; border-radius:4px; background:#fff;}
|
||
.pen-current-bg.bg-dots{background-image:radial-gradient(circle,#9db6d8 1px,transparent 1px); background-size:5px 5px;}
|
||
.pen-current-bg.bg-lines{background-image:repeating-linear-gradient(#0000 0 4px,#9db6d8 4px 5px);}
|
||
.pen-current-bg.bg-write{background-image:repeating-linear-gradient(#0000 0 2px,#c3d5ec 2px 3px,#0000 3px 5px,#6d92c4 5px 6px);}
|
||
.pen-current-bg.bg-grid-s{background-image:repeating-linear-gradient(#0000 0 4px,#9db6d8 4px 5px),repeating-linear-gradient(90deg,#0000 0 4px,#9db6d8 4px 5px);}
|
||
.pen-current-bg.bg-grid-b{background-image:repeating-linear-gradient(#0000 0 8px,#9db6d8 8px 9px),repeating-linear-gradient(90deg,#0000 0 8px,#9db6d8 8px 9px);}
|
||
#penbar .pen-popover{
|
||
display:none; position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
|
||
z-index:20; width:max-content; max-width:min(300px,calc(100vw - 24px)); padding:7px;
|
||
background:var(--surface); border:1px solid var(--line); border-radius:12px;
|
||
box-shadow:var(--shadow-2); gap:5px;
|
||
}
|
||
#penbar .pen-picker.open>.pen-popover{display:flex;}
|
||
#penbar .pen-color-popover{width:210px; flex-direction:column; align-items:stretch;}
|
||
#penbar .pen-color-popover .wp-group{display:grid; grid-template-columns:repeat(6,28px); background:transparent; padding:0;}
|
||
.pen-pop-label{font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.45px; margin:2px 2px 0;}
|
||
.pen-custom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:3px; padding-top:7px; border-top:1px solid var(--line); font-size:12px; font-weight:700;}
|
||
.pen-custom input{width:34px; height:26px; padding:0; border:0; border-radius:7px; background:transparent; cursor:pointer;}
|
||
#hud.vert #penbar .pen-popover{left:calc(100% + 10px); bottom:auto; top:50%; transform:translateY(-50%);}
|
||
#hud.vert #penbar .pen-color-popover{display:none;}
|
||
#hud.vert #penbar .pen-picker.open>.pen-color-popover{display:flex;}
|
||
body.hc #penbar .pen-current,body.hc #penbar .pen-popover{border:2px solid #000;}
|
||
@media (max-width:600px),(pointer:coarse){
|
||
#penbar{gap:3px;}
|
||
.pen-current{width:40px; height:36px;}
|
||
#penbar .pen-popover{position:fixed; left:50%; bottom:70px; transform:translateX(-50%);}
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
Nieuwe widgets: verjaardagstaart, getallenlijn en zinsbouwer
|
||
============================================================ */
|
||
/* Verjaardagstaart */
|
||
.bd{height:100%; min-height:0; display:grid; grid-template-columns:minmax(180px,220px) 1fr; background:var(--surface);}
|
||
.bd-controls{padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; background:var(--surface-2); border-right:1px solid var(--line);}
|
||
.bd-controls input[type=text],.bd-controls input[type=number],.bd-controls select{
|
||
width:100%; height:36px; border:1px solid var(--line); border-radius:9px; padding:0 9px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px;
|
||
}
|
||
.bd-controls label{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:800; color:var(--muted);}
|
||
.bd-controls input[type=range]{width:96px;}.bd-color input{width:42px; height:30px; padding:1px; border:0; background:transparent; cursor:pointer;}
|
||
.bd-check{justify-content:flex-start !important;}.bd-party{margin-top:auto; min-height:38px;}
|
||
.bd-stage{min-width:0; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:54px 16px 34px; background:radial-gradient(circle at 50% 20%,#fff 0,var(--surface-2) 72%);}
|
||
.bd-title{position:absolute; top:16px; left:12px; right:12px; text-align:center; font-size:clamp(20px,4vw,34px); font-weight:900; color:var(--pink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
|
||
.bd-cake{width:min(100%,390px); display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 10px 10px rgba(29,52,97,.18)); z-index:2;}
|
||
.bd-layer{height:72px; position:relative; background:var(--cake); border-radius:20px 20px 12px 12px; border-bottom:8px solid color-mix(in srgb,var(--cake),#8b4b2b 18%); box-shadow:inset 0 13px 0 var(--icing); flex:none;}
|
||
.bd-layer-1{width:94%;}.bd-layer-2{width:76%;}.bd-layer-3{width:58%;}
|
||
.bd-deco{position:absolute; inset:16px 8px auto; text-align:center; color:#fff; font-weight:900; letter-spacing:5px; white-space:nowrap; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.25);}
|
||
.bd-deco.sprinkles{color:#fff5a5;}.bd-deco.stars{color:#fff0a8;font-size:18px}.bd-deco.fruit{font-size:17px;letter-spacing:2px;}
|
||
.bd-candle-row{position:absolute; left:8%; right:8%; top:-31px; height:34px; display:flex; justify-content:center; align-items:flex-end; gap:3px;}
|
||
.bd-candle{display:block; width:5px; height:25px; border-radius:2px; background:repeating-linear-gradient(45deg,#fff 0 3px,var(--blue) 3px 6px); position:relative;}
|
||
.bd-candle::before{content:""; position:absolute; width:8px; height:12px; left:-1.5px; top:-12px; border-radius:70% 30% 60% 40%; background:linear-gradient(#fff7a0,var(--orange)); box-shadow:0 0 8px var(--orange);}
|
||
.bd-age-badge{position:absolute; right:8%; top:20%; z-index:4; min-width:58px; height:58px; padding:0 10px; border-radius:20px; display:grid; place-items:center; color:#fff; font-size:29px; font-weight:900; transform:rotate(7deg); box-shadow:0 5px 12px rgba(0,0,0,.2); border:3px solid #fff;}
|
||
.bd-plate{width:min(94%,420px); height:30px; border-radius:50%; margin-top:-12px; box-shadow:0 8px 12px rgba(29,52,97,.22); z-index:1;}
|
||
/* Getallenlijn */
|
||
.nlw{height:100%; min-height:0; display:flex; flex-direction:column; gap:11px; padding:14px; background:var(--surface);}
|
||
.nlw-settings{display:flex; align-items:end; gap:8px; flex-wrap:wrap;}
|
||
.nlw-settings label{font-size:11px; font-weight:800; color:var(--muted); display:flex; flex-direction:column; gap:3px;}
|
||
.nlw-settings input,.nlw-settings select{width:72px; height:34px; border:1px solid var(--line); border-radius:9px; padding:0 8px; background:var(--surface); color:var(--ink); font:inherit;}
|
||
.nlw-new{margin-left:auto; min-height:34px;}.nlw-playtop{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.nlw-task{text-align:center; font-size:clamp(18px,3vw,27px); font-weight:900; color:var(--blue);}.nlw-score{padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:900}
|
||
.nlw-scroll{flex:1; min-height:115px; overflow-x:auto; overflow-y:hidden; border-radius:14px; background:var(--surface-2); padding:20px 18px 8px;}
|
||
.nlw-line{position:relative; min-width:max-content; height:88px; display:flex; align-items:center; padding:0 18px;}
|
||
.nlw-line::before{content:""; position:absolute; height:4px; left:18px; right:18px; top:38px; border-radius:4px; background:var(--ink);}
|
||
.nlw-tick{width:52px; height:76px; flex:none; border:0; background:transparent; color:var(--ink); position:relative; cursor:pointer; font:inherit; font-weight:800; padding:0;}
|
||
.nlw-tick i{position:absolute; width:3px; height:18px; background:var(--ink); top:31px; left:calc(50% - 1.5px);}
|
||
.nlw-tick span{position:absolute; top:53px; left:0; right:0; text-align:center; font-size:12px;}
|
||
.nlw-tick.selected::before{content:""; position:absolute; width:23px; height:23px; border-radius:50%; background:var(--pink); border:3px solid #fff; left:calc(50% - 14px); top:27px; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.25);}
|
||
.nlw-actions{display:flex; align-items:center; justify-content:center; gap:8px;}.nlw-value{min-width:76px; text-align:center; font-size:28px; font-weight:900; color:var(--pink);}
|
||
.nlw-feedback{min-height:24px; text-align:center; font-weight:800;}.nlw-feedback.ok{color:var(--green);}.nlw-feedback.bad{color:var(--red);}
|
||
/* Zinsbouwer */
|
||
.sb{height:100%; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; background:var(--surface);}
|
||
.sb-sentence{min-height:72px; border:2px dashed var(--line); border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; font-size:clamp(17px,3vw,25px); font-weight:900;}
|
||
.sb-sentence.empty{color:var(--muted); font-size:14px; font-weight:700;}.sb-part{padding:7px 11px; border-radius:10px;}.sb-part.who{background:#dce9ff;color:#174c9b}.sb-part.does{background:#dcf7e7;color:#176b3a}.sb-part.what{background:#fff0cf;color:#855b00}
|
||
.sb-banks{flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}.sb-bank{min-width:0; border-radius:12px; padding:9px; background:var(--surface-2);}.sb-bank h3{margin:0 0 7px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
|
||
.sb-chips{display:flex; flex-wrap:wrap; gap:6px;}.sb-chip-wrap{display:inline-flex;align-items:stretch}.sb-chip{border:0; border-radius:999px; padding:7px 10px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; text-align:left;}.sb-bank.who .sb-chip{background:#dce9ff;color:#174c9b}.sb-bank.does .sb-chip{background:#dcf7e7;color:#176b3a}.sb-bank.what .sb-chip{background:#fff0cf;color:#855b00}
|
||
.sb-chip-wrap .sb-chip{border-radius:999px 0 0 999px}.sb-chip-remove{border:0;border-radius:0 999px 999px 0;padding:0 7px;background:var(--surface-3);color:var(--muted);font-weight:900;cursor:pointer}.sb-chip-remove:hover{background:var(--red-soft);color:var(--red)}
|
||
.sb-add,.sb-actions{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}.sb-add select,.sb-add input{height:36px; border:1px solid var(--line); border-radius:9px; padding:0 9px; background:var(--surface); color:var(--ink); font:inherit;}.sb-add input{flex:1; min-width:150px;}.sb-actions{justify-content:flex-end;}.sb-back{font-size:20px;}
|
||
body.dark .bd-stage{background:radial-gradient(circle at 50% 20%,var(--surface-2),var(--surface));}
|
||
@media(max-width:600px){.bd{grid-template-columns:1fr}.bd-controls{max-height:155px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr)}.bd-party{margin-top:0}.sb-banks{grid-template-columns:1fr}.nlw-settings{gap:5px}}
|
||
|
||
/* Educatieve widgets en compacte widgetbibliotheek */
|
||
.gallery-head,.gallery-tools,.gallery-data{display:flex;align-items:center;gap:8px}.gallery-head h2{flex:1}.gallery-tools{position:sticky;top:-24px;z-index:2;background:var(--surface);padding:6px 0 10px}.gallery-tools input{flex:1;height:42px;border:1px solid var(--line);border-radius:12px;padding:0 13px;background:var(--surface);color:var(--ink);font:inherit}.gallery-data{margin:8px 0 14px;flex-wrap:wrap}#galleryTemplates{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px}.gcat-title{margin:18px 0 8px;font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase}.gcard{position:relative}.gstar{position:absolute;right:7px;top:7px;border:0;background:transparent;color:var(--orange);font-size:22px;cursor:pointer}.gallery-empty,.edu-empty{text-align:center;color:var(--muted);padding:28px}.widget.locked .widget-rs{display:none}.widget.locked{outline:2px solid var(--accent-soft)}.widget.preview .widget-head{position:absolute;z-index:4;width:100%;opacity:0}.widget.preview:hover .widget-head,.widget.preview:focus-within .widget-head{opacity:1}.widget.preview .widget-rs{display:none}.widget.preview{border-color:transparent;box-shadow:none}.wpreview.on{background:var(--accent-soft);color:var(--accent-ink)}
|
||
.edu{height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--ink)}.edu-settings{flex:none;background:var(--surface-2);border-bottom:1px solid var(--line)}.edu-settings summary{cursor:pointer;padding:9px 12px;font-weight:800;font-size:13px}.edu-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:0 12px 10px}.edu-controls label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:800;color:var(--muted)}.edu-controls input,.edu-controls select,.edu-controls textarea{min-height:34px;border:1px solid var(--line);border-radius:9px;padding:5px 8px;background:var(--surface);color:var(--ink);font:inherit}.edu-controls textarea{height:65px;resize:vertical}.edu-stage{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center}
|
||
.fraction-game{width:min(100%,620px);display:flex;flex-direction:column;align-items:center;gap:9px}.fraction-summary{min-height:34px;padding:5px 13px;border-radius:999px;background:var(--surface-2);color:var(--purple);font-size:18px;font-weight:950}.fraction-wall{width:100%;display:flex;flex-direction:column;gap:5px}.fraction-wall>div{display:flex;gap:4px}.fraction-piece{flex:1;min-height:38px;border:2px solid hsl(var(--fraction-hue) 55% 43%);border-radius:7px;background:hsl(var(--fraction-hue) 75% 90%);font-weight:800;color:#20304a;cursor:pointer;transition:transform .12s,filter .12s}.fraction-piece:hover{filter:brightness(.96);transform:translateY(-1px)}.fraction-piece.selected{background:hsl(var(--fraction-hue) 70% 55%);color:#fff}.fraction-clear{align-self:flex-end;min-height:34px}
|
||
.place-grid{display:grid;grid-template-columns:repeat(6,1fr);width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden}.place-grid div{text-align:center;border-right:1px solid var(--line)}.place-grid b{display:block;padding:8px;background:var(--surface-2);font-size:12px}.place-grid output{display:block;padding:18px 4px;font-size:clamp(25px,5vw,48px);font-weight:900;color:var(--blue)}
|
||
.money-app{width:100%;min-height:100%;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
|
||
.money-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 4px;background:var(--surface);border-bottom:1px solid var(--line)}.money-level-control{display:flex;align-items:center;gap:6px}.money-level-control>span{color:var(--muted);font-size:12px;font-weight:900}.money-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}.money-mode{width:36px;padding:0;font-size:18px}.money-score{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900}
|
||
.money-task-card{width:min(100%,650px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}.money-task-card h3{margin:0;text-align:center;font-size:clamp(19px,3vw,25px)}.money-level-hint{margin:-7px 0 0;text-align:center;color:var(--muted);font-size:12px;font-weight:800}
|
||
.money-target{width:100%;min-height:98px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px;border-radius:16px;background:var(--surface-2)}.money-target>span:first-child{flex-basis:100%;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.money-assignment{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center}.money-task-amount{font-size:clamp(45px,10vw,72px);line-height:1;font-weight:950;color:var(--green)}.money-task-words{flex-basis:100%;margin:0;font-size:clamp(21px,4vw,31px);line-height:1.15;font-weight:950;color:var(--purple)}.money-assignment.compact .money-task-amount{font-size:clamp(38px,8vw,58px)}.money-assignment.compact .money-task-words{font-size:clamp(19px,4vw,27px)}
|
||
.money-wallet{width:100%;min-height:112px;padding:10px;border:3px dashed var(--line);border-radius:18px;background:linear-gradient(145deg,var(--surface-2),var(--surface));transition:border-color .15s,background .15s,transform .15s}.money-wallet>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.money-wallet output{font-size:24px;font-weight:950;color:var(--green)}.money-wallet>p{margin:22px auto;color:var(--muted);font-weight:800;text-align:center}.money-wallet.droptarget{border-color:var(--green);background:#e4f6eb;transform:scale(1.01)}.money-wallet.money-remove-target{border-color:var(--red);background:#fff0ed;box-shadow:0 0 0 4px rgba(190,55,45,.1)}
|
||
.money-pile{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;min-height:58px}
|
||
.money-piece{position:relative;display:block;flex:none;overflow:hidden;padding:0;border:0;background:transparent;color:#26354a;filter:drop-shadow(0 3px 3px rgba(20,35,60,.28));user-select:none}.money-piece:is(button){appearance:none;cursor:grab;touch-action:none}.money-piece:is(button):active{cursor:grabbing}.money-piece:is(button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}.money-piece-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.money-piece-fallback{display:none;width:100%;height:100%;place-items:center;border:1px solid rgba(30,40,55,.35);background:var(--surface-2);font:900 12px/1 system-ui}.money-piece.image-missing .money-piece-image{display:none}.money-piece.image-missing .money-piece-fallback{display:grid}
|
||
.money-piece.coin{width:44px;height:44px;border-radius:50%}.money-piece.coin[data-value="1"]{width:36px;height:36px}.money-piece.coin[data-value="2"]{width:42px;height:42px}.money-piece.coin[data-value="5"]{width:47px;height:47px}.money-piece.coin[data-value="10"]{width:44px;height:44px}.money-piece.coin[data-value="20"]{width:49px;height:49px}.money-piece.coin[data-value="50"]{width:54px;height:54px}.money-piece.coin[data-value="100"]{width:52px;height:52px}.money-piece.coin[data-value="200"]{width:57px;height:57px}
|
||
.money-piece.note{height:43px;border-radius:2px}.money-piece.note .money-piece-fallback{border-radius:2px}.money-piece.note[data-value="500"]{width:82px;height:42px}.money-piece.note[data-value="1000"]{width:86px;height:45px}.money-piece.note[data-value="2000"]{width:89px;height:48px}.money-piece.note[data-value="5000"]{width:93px;height:51px}.money-drag-clone{opacity:.98}.money-drag-clone.from-wallet{opacity:.92;filter:drop-shadow(0 14px 18px rgba(160,45,45,.3))}
|
||
.money-tray-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.money-tray-wrap>b{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}.money-cash-tray{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:11px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
|
||
.money-count-task{width:100%;min-height:128px;display:grid;place-items:center;padding:14px;border-radius:17px;background:linear-gradient(145deg,#eef7e9,var(--surface-2));border:1px solid var(--line)}.money-count-task .money-piece{transform:rotate(var(--money-tilt,0deg))}
|
||
.money-shop-task{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.8fr);gap:12px}.money-product,.money-paid{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;border:1px solid var(--line);border-radius:17px;background:var(--surface-2)}.money-product-icon{font-size:clamp(52px,8vw,70px);line-height:1;filter:drop-shadow(0 5px 5px rgba(30,45,70,.2))}.money-product-name{max-width:100%;font-size:17px;font-weight:950;text-align:center}.money-product>b,.money-paid>b{color:var(--muted);font-size:12px;text-transform:uppercase}.money-product .money-task-amount{font-size:37px}.money-product .money-task-words{font-size:19px}.money-paid>output{font-size:31px;font-weight:950;color:var(--blue)}
|
||
.money-digit-answer,.money-type-answer{width:min(100%,300px);display:flex;flex-direction:column;align-items:center;gap:10px}.money-digit-answer>p,.money-type-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.money-answer-slots{display:flex;align-items:center;justify-content:center;gap:6px}.money-answer-slots>strong{font-size:29px}.money-digit-slot.slot.sm{width:43px;height:64px;padding-top:1px}.money-digit-slot.slot.sm .ghost{height:24px;font-size:20px}.money-digit-slot.slot.sm .slot-dots{margin-bottom:3px}.money-digit-slot.filled{padding:0}.money-digit-slot.fixed{border-style:solid;background:var(--surface-2);opacity:.72}.money-digit-block.blok{width:39px;height:58px;min-height:58px;padding-top:2px;cursor:default}.money-digit-block.blok .bl{height:28px;font-size:25px;color:var(--purple)}.money-digit-block.blok .blok-dots{margin-bottom:4px}.money-digit-tray.lg-tray{display:grid;grid-template-columns:repeat(5,39px);gap:7px;min-height:0;padding:11px 14px}.money-digit-tray .money-drag-digit{cursor:grab}.money-digit-tray .money-drag-digit:active{cursor:grabbing}.money-digit-slot.droptarget{border-color:var(--green);background:#e3f6ea;transform:scale(1.06)}
|
||
.money-type-display{min-width:190px;padding:9px 14px;border:3px dashed var(--line);border-radius:14px;background:var(--surface-2);font-size:34px;font-weight:950;letter-spacing:2px;color:var(--green)}.money-keypad{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.money-keypad .tbtn{min-width:0;padding:0;font-size:20px}
|
||
.money-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.money-feedback.ok{color:var(--green)}.money-feedback.bad{color:var(--red)}.money-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.money-actions .tbtn:not(.ghost){background:var(--green);color:#fff}
|
||
@media(max-width:520px){.money-task-card{gap:9px;padding:10px}.money-level-control>span{display:none}.money-top{top:-10px;gap:5px}.money-shop-task{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7px}.money-product,.money-paid{min-height:112px;padding:8px 6px;gap:4px}.money-product-icon{font-size:46px}.money-product-name{font-size:14px}.money-product .money-task-amount{font-size:32px}.money-product .money-task-words{font-size:16px}.money-paid>output{font-size:26px}.money-cash-tray{gap:6px;padding:9px}}
|
||
.wordtypes{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.wordtypes button{border:0;border-radius:10px;padding:10px 13px;font:inherit;font-weight:900;background:var(--surface-2)}.wordtypes button[data-type=noun]{background:#dce9ff;color:#174c9b}.wordtypes button[data-type=verb]{background:#dcf7e7;color:#176b3a}.wordtypes button[data-type=adjective]{background:#fff0cf;color:#855b00}.wordtypes p{flex-basis:100%;text-align:center;color:var(--muted);font-size:12px}
|
||
.schedule{width:min(100%,450px);display:flex;flex-direction:column;gap:7px}.schedule>div{display:flex;align-items:center;gap:12px;padding:9px;background:var(--surface-2);border-radius:12px;border-left:4px solid var(--widget-accent)}.schedule-icon{width:33px;height:33px;display:grid;place-items:center;flex:none;border-radius:10px;background:var(--surface);font-size:20px;font-style:normal}.schedule time{font-weight:900;color:var(--blue)}.schedule span{flex:1;font-weight:800}.schedule .tbtn{height:30px;min-height:30px;padding:0 9px}.class-total{flex-basis:100%;width:100%;margin:0 0 3px;color:var(--muted);font-size:12px;font-weight:900;text-align:center}.mood{display:flex;gap:8px;flex-wrap:wrap}.mood .tbtn{flex:1;min-width:62px;font-size:36px;height:auto;padding:12px;background:var(--surface);border:2px solid var(--line);color:var(--ink)}.mood span{display:block;font-size:14px}.poll{width:min(100%,440px);display:flex;flex-direction:column;gap:8px}.poll h3{margin-bottom:0;text-align:center}.poll .tbtn{position:relative;overflow:hidden;text-align:left}.poll .tbtn i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--widget-accent) 22%,var(--surface));z-index:0;transition:width .25s}.poll .tbtn span{position:relative;float:right;font-weight:900}.poll .tbtn{isolation:isolate}
|
||
@media(max-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gcard{min-height:120px;padding:13px 8px}.gcard .gd{display:none}.widget .wdup,.widget .wpreview{display:none}.edu-stage{padding:10px}.place-grid b{font-size:9px}.place-grid output{padding:12px 2px}}
|
||
|
||
/* Wereldoriëntatie: natuurherkenning en topografie */
|
||
.world-app{width:100%;min-height:100%;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
|
||
.world-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;padding:9px 4px;background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.world-top>strong{font-size:15px}.world-top>span{padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900;white-space:nowrap}
|
||
.world-task-card{width:min(100%,680px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:13px;padding:18px;border:1px solid color-mix(in srgb,var(--line) 80%,var(--accent));border-radius:24px;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-2) 68%,var(--surface)));box-shadow:0 18px 40px rgba(24,42,66,.12)}.world-task-card>h3{max-width:560px;margin:0;text-align:center;font-size:clamp(19px,4cqi,27px);line-height:1.2}.world-intro{width:100%;margin:0;padding:10px 14px;border-radius:14px;background:linear-gradient(120deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 55%,var(--surface)));color:var(--accent-ink);font-weight:850;line-height:1.4;text-align:center}
|
||
.world-visual{width:min(100%,460px);display:flex;align-items:flex-start;justify-content:center;gap:12px}.world-visual.mixed{width:min(100%,620px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.world-photo{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 75%,var(--ink));border-radius:19px;background:#152432;box-shadow:0 10px 24px rgba(20,36,52,.18)}.world-picture{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.world-photo-badge{position:absolute;left:9px;top:9px;padding:5px 9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(10,27,42,.78);color:#fff;font-size:10px;font-weight:950;letter-spacing:.45px;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.18);backdrop-filter:blur(6px)}.world-photo-credit{position:absolute;right:7px;bottom:7px;max-width:calc(100% - 14px);overflow:hidden;padding:4px 7px;border-radius:8px;background:rgba(10,27,42,.8);color:#fff!important;font-size:9px;font-weight:750;line-height:1.2;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(6px)}.world-photo-credit:hover,.world-photo-credit:focus-visible{text-decoration:underline;outline:2px solid #fff;outline-offset:1px}
|
||
.world-identity{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.world-identity h3{margin:0;font-size:18px;line-height:1.2}.world-identity em{color:var(--muted);font-size:12px;font-family:Georgia,serif;font-weight:650}
|
||
.world-answers{width:min(100%,560px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.world-answers .tbtn{min-width:0;min-height:48px;padding:8px 11px;border:1px solid var(--line);background:var(--surface);box-shadow:0 3px 8px rgba(20,36,52,.06)}.world-answers .tbtn:hover{border-color:var(--accent);background:var(--accent-soft)}.world-answers .tbtn.correct{background:var(--green);color:#fff;border-color:transparent}.world-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.world-feedback.ok{color:var(--green)}.world-feedback.bad{color:var(--red)}.world-actions{display:flex;justify-content:center}.world-fact{width:min(100%,560px);margin:0;padding:11px 14px;border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));border-radius:15px;background:#eef7e9;color:#2f6f3e;text-align:center}.world-fact .world-identity em{color:#527c5b}.world-fact p{margin:6px 0 0;font-weight:800;line-height:1.4}
|
||
.world-answers .tbtn.wrong{background:color-mix(in srgb,var(--red) 14%,var(--surface));color:var(--red);border-color:var(--red)}.world-clue{width:min(100%,560px);padding:18px 20px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px;background:linear-gradient(135deg,var(--accent-soft),var(--surface));color:var(--accent-ink);font-size:clamp(16px,3.2cqi,21px);font-weight:850;line-height:1.5;text-align:center}.world-clue-latin{font-family:Georgia,serif;font-size:clamp(23px,4.6cqi,34px);font-style:italic;font-weight:700}
|
||
.world-photo-answers{width:min(100%,640px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.world-photo-choice{position:relative;min-width:0;margin:0;overflow:hidden;border:3px solid transparent;border-radius:18px;background:#152432;box-shadow:0 8px 18px rgba(20,36,52,.16);transition:border-color .15s,transform .15s,box-shadow .15s}.world-image-button{display:block;width:100%;margin:0;padding:0;border:0;background:#152432;cursor:pointer}.world-image-button .world-picture{transition:transform .18s,filter .18s}.world-photo-choice:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(20,36,52,.2)}.world-image-button:hover .world-picture{transform:scale(1.025)}.world-image-button:focus-visible{outline:4px solid var(--accent);outline-offset:-4px}.world-choice-number{position:absolute;left:8px;top:8px;display:grid;width:28px;height:28px;place-items:center;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(10,27,42,.86);color:#fff;font-size:13px;font-weight:950;pointer-events:none}.world-photo-choice.correct{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent)}.world-photo-choice.wrong{border-color:var(--red)}.world-photo-choice.wrong .world-picture{filter:saturate(.65) brightness(.82)}
|
||
.world-gallery{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.world-specimen{min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:11px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,var(--surface),var(--surface-2));box-shadow:0 8px 22px rgba(20,36,52,.08)}.world-specimen .world-visual{width:100%}.world-specimen p{margin:0;padding:0 5px 3px;color:var(--muted);font-size:12px;font-weight:720;line-height:1.4;text-align:center}
|
||
.topo-card{width:min(100%,740px)}.topo-map-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;overflow:hidden;padding:10px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,#edf8fd,#dff2fb)}.topo-map{display:block;width:min(100%,510px);height:auto;max-height:590px;touch-action:manipulation;filter:drop-shadow(0 9px 13px rgba(29,60,76,.13))}.topo-water{fill:#dff3fb}.topo-province{stroke:#fff;stroke-width:4.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .15s,opacity .15s,fill .15s}.topo-province[role=button]{cursor:pointer}.topo-province[role=button]:hover,.topo-province[role=button]:focus{filter:brightness(.88) saturate(1.12);outline:none}.topo-province[role=button]:focus-visible{stroke:var(--navy);stroke-width:8}.topo-province.picked{fill:var(--red)!important}.topo-province.target{fill:var(--green)!important}.topo-label,.topo-city-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;font-size:18px;font-weight:950;text-anchor:middle;pointer-events:none}.topo-city-label{text-anchor:start;font-size:16px}.topo-city-label.left{text-anchor:end}.topo-marker{cursor:pointer}.topo-hit{fill:transparent}.topo-dot{fill:var(--navy);stroke:#fff;stroke-width:4;transition:fill .15s,stroke-width .15s}.topo-marker:hover .topo-dot,.topo-marker:focus .topo-dot{fill:var(--orange);outline:none}.topo-marker:focus-visible .topo-dot{stroke:var(--navy);stroke-width:8}.topo-marker.picked .topo-dot{fill:var(--red)}.topo-marker.target .topo-dot{fill:var(--green);stroke-width:7}.topo-source{align-self:flex-end;color:#3b657b;font-size:9px;font-weight:750;text-decoration:none}.topo-source:hover,.topo-source:focus-visible{text-decoration:underline}
|
||
.topo-province.inactive{opacity:.32}.topo-region[role=button],.topo-river[role=button],.world-continent[role=button]{cursor:pointer}.topo-region.picked .topo-province{fill:var(--red)!important}.topo-region.target .topo-province{fill:var(--green)!important}.topo-region:hover .topo-province,.topo-region:focus .topo-province{filter:brightness(.88) saturate(1.12)}.topo-region:focus-visible .topo-province{stroke:var(--navy);stroke-width:8}.topo-region-label{font-size:20px}
|
||
.topo-river.inactive{opacity:.22}.topo-river-hit,.topo-river-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.topo-river-hit{stroke:transparent;stroke-width:38;pointer-events:stroke}.topo-river-line{stroke:var(--river-color);stroke-width:10;pointer-events:none;transition:stroke .15s,stroke-width .15s}.topo-river:hover .topo-river-line,.topo-river:focus .topo-river-line{stroke-width:15}.topo-river:focus-visible .topo-river-line{stroke:var(--navy);stroke-width:18}.topo-river.picked .topo-river-line{stroke:var(--red)}.topo-river.target .topo-river-line{stroke:var(--green);stroke-width:16}.topo-river-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;font-size:20px;font-style:italic;font-weight:950;text-anchor:middle;pointer-events:none}
|
||
.world-map-wrap{padding:12px}.world-map{width:100%;max-width:680px;max-height:none}.world-continent{stroke:#fff;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .15s,opacity .15s,fill .15s}.world-continent.inactive{opacity:.28}.world-continent:hover,.world-continent:focus{filter:brightness(.88) saturate(1.12);outline:none}.world-continent:focus-visible{stroke:var(--navy);stroke-width:4}.world-continent.picked{fill:var(--red)!important}.world-continent.target{fill:var(--green)!important}.world-continent-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;font-size:14px;font-weight:950;text-anchor:middle;pointer-events:none}
|
||
.topo-world-legend{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.topo-world-legend span{display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:850}.topo-world-legend i{width:10px;height:10px;flex:none;border:1px solid rgba(24,50,78,.18);border-radius:50%}
|
||
body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .world-identity em{color:#a9e5b7}body.dark .topo-map-wrap{background:linear-gradient(155deg,#193446,#122c3e)}body.dark .topo-water{fill:#173145}body.dark .topo-label,body.dark .topo-city-label,body.dark .topo-river-label,body.dark .world-continent-label{fill:#f7fbff;stroke:#18324e}body.dark .topo-source{color:#a9cadb}
|
||
|
||
.clock-app{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
|
||
.clock-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 4px;background:var(--surface);border-bottom:1px solid var(--line)}.clock-level-control{display:flex;align-items:center;gap:6px}.clock-level-control>span{color:var(--muted);font-size:12px;font-weight:900}.clock-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}.clock-mode{width:36px;padding:0;font-size:18px}.clock-score{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900}
|
||
.clock-task-card{width:min(100%,620px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}
|
||
.clock-task-card h3{margin:0;text-align:center;font-size:clamp(18px,3vw,24px)}.clock-intro{max-width:440px;margin:0;text-align:center;color:var(--muted);font-weight:700;line-height:1.5}
|
||
.clock-target{width:100%;min-height:88px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px;border-radius:15px;background:var(--surface-2)}.clock-target>span:first-child{flex-basis:100%;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.clock-target-words{font-size:20px;color:var(--purple)}.clock-assignment{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}.clock-assignment.compact{width:100%}.clock-assignment.compact .clock-task-digital{font-size:44px}.clock-assignment.compact .clock-task-words{font-size:24px}.clock-task-digital{font-size:clamp(48px,10vw,78px);line-height:1;font-weight:950;letter-spacing:2px;color:var(--blue)}.clock-task-words{flex-basis:100%;margin:0;font-size:clamp(24px,5vw,36px);line-height:1.15;font-weight:950;color:var(--purple)}.clock-daypart{padding:6px 11px;border-radius:999px;background:var(--purple);color:#fff;font-size:14px;font-weight:900}.clock-target .clock-reference{--clock-size:112px;border-width:5px;box-shadow:inset 0 0 0 2px var(--line),0 4px 10px rgba(20,35,60,.12)}.clock-reference b{font-size:9px}.clock-reference .clock-pin{left:calc(50% - 6px);top:calc(50% - 6px);width:12px;height:12px;border-width:2px}
|
||
.clock-work{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.clock{--clock-size:min(230px,62vw);width:var(--clock-size);height:var(--clock-size);flex:none;position:relative;overflow:hidden;border:9px solid var(--ink);border-radius:50%;background:radial-gradient(circle at 50% 46%,var(--surface) 0 62%,var(--surface-2) 100%);box-shadow:inset 0 0 0 3px var(--line),0 8px 20px rgba(20,35,60,.14)}
|
||
.clock-set-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
|
||
.clock-period{display:flex;align-items:center;justify-content:center;gap:3px;padding:3px;border-radius:999px;background:var(--surface-2)}
|
||
.clock-period .tbtn{min-height:36px;padding:0 12px;border-radius:999px}
|
||
.clock-period .tbtn.active{background:var(--purple);color:#fff;border-color:transparent}
|
||
.clock-tick{position:absolute;z-index:1;border-radius:4px}.clock-tick.hour{left:calc(50% - 2px);top:3%;width:4px;height:5%;background:var(--blue);transform-origin:50% 940%}.clock-tick.minor{left:calc(50% - 1px);top:4%;width:2px;height:4%;background:var(--ink);opacity:.28;transform-origin:50% 1150%}
|
||
.clock b{position:absolute;z-index:2;left:calc(50% - 12px);top:calc(50% - 12px);width:24px;height:24px;display:grid;place-items:center;font-size:14px;transform:rotate(var(--clock-angle)) translateY(calc(var(--clock-size)*-.34)) rotate(calc(-1 * var(--clock-angle)))}
|
||
.clock-hand{position:absolute;z-index:4;left:calc(50% - 5px);bottom:50%;width:10px;border-radius:9px;transform-origin:50% 100%;background:var(--ink);cursor:grab;touch-action:none}.clock-hand:active{cursor:grabbing}.clock-hour{height:28%}.clock-min{left:calc(50% - 4px);width:8px;height:39%;background:var(--pink)}.clock-pin{position:absolute;z-index:5;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border:3px solid var(--surface);border-radius:50%;background:var(--pink);box-shadow:0 1px 4px rgba(0,0,0,.28)}
|
||
.clock.interactive{touch-action:none;user-select:none;outline:4px solid transparent;transition:outline-color .15s,transform .15s}.clock.interactive:hover,.clock.interactive:focus-within{outline-color:var(--accent-soft)}
|
||
.clock-time-blocks{display:flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:6px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:inherit}.clock-time-blocks:is(button){cursor:pointer}.clock-time-blocks:is(button):hover,.clock-time-blocks:is(button):focus-visible{background:var(--accent-soft);outline:2px solid var(--accent)}.clock-time-blocks>strong{font-size:30px}
|
||
.clock-digit-block.blok{width:42px;height:62px;min-height:62px;padding-top:3px;cursor:default}.clock-digit-block.blok .bl{height:31px;font-size:27px;color:var(--purple)}.clock-digit-block.blok .blok-dots{margin-bottom:5px}.clock-digit-block.blok .dots,.clock-digit-slot .dots{grid-template-columns:repeat(2,6px);grid-template-rows:repeat(3,6px);gap:2px}.clock-digit-block.blok .dots i,.clock-digit-slot .dots i{width:6px;height:6px}
|
||
.clock-live-answer{padding:6px 12px;border:2px dashed var(--line);border-radius:16px;background:var(--surface-2)}.clock-read-layout{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.clock-read-layout>.clock-assignment{flex:1;min-width:190px}.clock-read-layout .clock{--clock-size:180px}.clock-block-answer{width:min(100%,250px);display:flex;flex-direction:column;align-items:center;gap:10px}.clock-block-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.clock-answer-slots{display:flex;align-items:center;justify-content:center;gap:7px}.clock-digit-slot.slot.sm{width:46px;height:66px;padding-top:2px}.clock-digit-slot.slot.sm .ghost{height:25px;font-size:20px}.clock-digit-slot.slot.sm .slot-dots{margin-bottom:4px}.clock-digit-slot.filled{padding:0}.clock-slot-colon{font-size:30px;margin:0 2px}.clock-block-tray.lg-tray{display:grid;grid-template-columns:repeat(5,38px);gap:7px;min-height:0;padding:11px 14px}.clock-block-tray .clock-drag-block{width:38px;height:56px;min-height:56px;cursor:grab}.clock-block-tray .clock-drag-block:active{cursor:grabbing}.clock-block-tray .clock-drag-block:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.clock-digit-slot.droptarget{border-color:var(--green);background:#e3f6ea;transform:scale(1.06)}
|
||
.clock-choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.clock-choices.wood .clock-time-blocks{border:1px solid var(--line);background:var(--surface-2)}.clock-word-choice{min-height:48px;border:2px solid var(--wood-d)!important;background:linear-gradient(#fdf3dd,var(--wood))!important;color:var(--ink)!important;box-shadow:0 3px 0 var(--wood-d)}.clock-digital-choice{min-width:118px;min-height:58px;font-size:28px!important;color:var(--blue)!important}.clock-type-answer{width:min(100%,250px);display:flex;flex-direction:column;align-items:center;gap:9px}.clock-type-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.clock-type-display{min-width:180px;padding:9px 14px;border:3px dashed var(--line);border-radius:14px;background:var(--surface-2);font-size:34px;font-weight:950;letter-spacing:3px;color:var(--blue)}.clock-keypad{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.clock-keypad .tbtn{min-width:0;padding:0;font-size:20px}.clock-keypad .ok{background:var(--green);color:#fff}
|
||
.clock-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.clock-feedback.ok{color:var(--green)}.clock-feedback.bad{color:var(--red)}.clock-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.clock-actions .tbtn:not(.ghost){background:var(--green);color:#fff}.clock-drag-hint{color:var(--muted);font-weight:800;text-align:center}
|
||
@media(max-width:480px){.clock-task-card{padding:12px}.clock-level-control>span{display:none}.clock-top{gap:5px}.clock{--clock-size:min(210px,68vw)}.clock-target{min-height:72px}.clock-block-tray.lg-tray{gap:7px;padding:9px}}
|
||
|
||
/* ============================================================
|
||
Kindvriendelijke spel-laag
|
||
Eén accent, duidelijke missies en tastbare bediening voor elk widgettype.
|
||
============================================================ */
|
||
.widget{--widget-accent:var(--teal);--widget-soft:color-mix(in srgb,var(--widget-accent) 12%,var(--surface))}
|
||
.widget:is([data-widget="anchor"],[data-widget="letters"],[data-widget="flits"],[data-widget="hak"],[data-widget="ball"],[data-widget="sentence"],[data-widget="wordtypes"]){--widget-accent:var(--purple)}
|
||
.widget:is([data-widget="madd"],[data-widget="msub"],[data-widget="mmul"],[data-widget="mdiv"],[data-widget="mpct"],[data-widget="numberline"],[data-widget="fractions"],[data-widget="clock"],[data-widget="placevalue"],[data-widget="money"]){--widget-accent:var(--blue)}
|
||
.widget:is([data-widget="trees"],[data-widget="birds"],[data-widget="plants"],[data-widget="topography"]){--widget-accent:var(--green)}
|
||
.widget:is([data-widget="birthday"],[data-widget="schedule"],[data-widget="light"],[data-widget="mood"],[data-widget="poll"]){--widget-accent:var(--pink)}
|
||
.widget[data-widget="media"]{--widget-accent:var(--orange)}
|
||
.widget:not(.bare){border-top:4px solid var(--widget-accent)}
|
||
.widget:not(.bare) .widget-head .wicon{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:11px;background:var(--widget-soft);font-size:20px;transform:rotate(-3deg)}
|
||
.widget:not(.bare) .widget-head .wtitle{color:color-mix(in srgb,var(--widget-accent) 74%,var(--ink))}
|
||
.widget-body{background-image:radial-gradient(circle at 96% 4%,color-mix(in srgb,var(--widget-accent) 8%,transparent) 0 54px,transparent 55px)}
|
||
.widget-body .tbtn{transition:transform .12s,filter .12s,box-shadow .12s}.widget-body .tbtn:not(.ghost){background:var(--widget-accent);box-shadow:0 3px 0 color-mix(in srgb,var(--widget-accent) 72%,#18233a)}.widget-body .tbtn:active{transform:translateY(2px) scale(.985);box-shadow:none}.widget-body :is(button,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--widget-accent) 72%,#fff);outline-offset:2px}
|
||
.play-mission{width:min(100%,560px);margin:0 auto;padding:8px 12px;border:1px solid color-mix(in srgb,var(--widget-accent) 25%,var(--line));border-radius:13px;background:var(--widget-soft);color:color-mix(in srgb,var(--widget-accent) 68%,var(--ink));font-size:13px;font-weight:850;line-height:1.35;text-align:center}
|
||
.fl-reflect{width:100%;padding:8px 10px;border-radius:14px;background:var(--widget-soft);text-align:center}.fl-reflect p{margin:0 0 7px;font-weight:900}.fl-reflect>div{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.fl-reflect[hidden]{display:none}
|
||
.dc-history{min-height:28px;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.dc-history span{margin-right:3px;color:var(--muted);font-size:11px;font-weight:850}.dc-history b{min-width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--widget-soft);color:var(--widget-accent)}
|
||
.notes-app{height:100%;display:flex;flex-direction:column;background:#fff8cf;transition:background .15s}.notes-app[data-theme="mint"]{background:#e5f7df}.notes-app[data-theme="sky"]{background:#e2f3ff}.notes-app[data-theme="lilac"]{background:#f0e8ff}.notes-tools{min-height:42px;display:flex;align-items:center;gap:7px;padding:6px 8px;border-bottom:1px solid rgba(29,52,97,.12);color:#52627b;font-size:11px;font-weight:900}.notes-swatches{display:flex;gap:4px}.notes-swatches button{width:24px;height:24px;padding:0;border:2px solid rgba(29,52,97,.16);border-radius:50%;cursor:pointer}.notes-swatches button[data-theme="sun"]{background:#fff0a8}.notes-swatches button[data-theme="mint"]{background:#cdeebe}.notes-swatches button[data-theme="sky"]{background:#c6e9ff}.notes-swatches button[data-theme="lilac"]{background:#dfd0ff}.notes-swatches button.on{outline:2px solid var(--ink);outline-offset:1px}.notes-size{height:28px;padding:0 7px;border:1px solid rgba(29,52,97,.18);border-radius:8px;background:rgba(255,255,255,.5);color:#33445f;font-weight:900;cursor:pointer}.notes-size.on{background:#fff}.notes-count{margin-left:auto;white-space:nowrap}
|
||
.mt-card,.lg-card,.money-task-card,.clock-task-card,.world-task-card,.sb-sentence,.nlw-scroll{box-shadow:0 7px 20px rgba(29,52,97,.09)}
|
||
@media(pointer:coarse){.widget-body :is(.tbtn,.sb-chip,.nlw-tick,.fraction-piece,.tl-lamp){min-height:44px}}
|
||
@media(prefers-reduced-motion:reduce){.widget-body *,.widget-body *::before,.widget-body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
|
||
@container widget (max-width:520px){.play-mission{padding:6px 9px;font-size:12px}.tl{padding:8px}.tl-house{padding:9px}.tl-lamp{width:58px;height:58px}.tl-option{gap:11px}.tl-option strong{font-size:16px}.tl-option small{font-size:11px}.notes-color-label{display:none}.notes-tools{gap:5px}.notes-count{font-size:10px}.fraction-game{gap:6px}.fraction-piece{min-height:34px;font-size:11px}.dc-history span{flex-basis:100%;text-align:center}.sb-surprise{flex-basis:100%}}
|
||
|
||
/* ============================================================
|
||
Widgetinhoud op telefoonformaat
|
||
De widget-body is de container: dit werkt zowel op het bord als
|
||
in de leerlingweergave en ook wanneer een widget zelf smal is.
|
||
============================================================ */
|
||
@media(max-width:600px){
|
||
#pupilView{padding:8px;gap:12px}
|
||
#pupilView .pupil-card{width:100%!important;max-width:100%;min-width:0!important}
|
||
.widget:not(.bare){max-width:calc(100% - 8px)}
|
||
.widget-head{gap:4px;padding:6px 8px}
|
||
.widget-head .wicon{font-size:18px}
|
||
.wmin,.wclose{width:36px;height:36px;border-radius:10px}
|
||
.wz{min-width:36px;padding:0 4px}
|
||
}
|
||
@media(pointer:coarse){
|
||
.lg-levels button,.lg-cards button,.lg-snd,.lg-mode,.fl-sel,.tseg button,
|
||
.nlw-settings input,.nlw-settings select,.sb-add input,.sb-add select,
|
||
.edu-controls input,.edu-controls select{min-height:var(--tap-sm)}
|
||
.mm-node .mm-add,.mm-node .mm-del,.mm-node .mm-cog{display:block}
|
||
.an-tools button{width:var(--tap-sm);height:var(--tap-sm)}
|
||
}
|
||
|
||
@container widget (max-width:520px){
|
||
/* gedeelde taal-, reken- en gereedschapskaarten */
|
||
.lg,.mt,.dc,.np,.timer,.nlw,.sb{gap:8px;padding:8px}
|
||
.lg-top,.mt-top,.topts,.np-row,.nlw-settings{flex-wrap:wrap}
|
||
.lg-top>*,.mt-top>*{max-width:100%}
|
||
.lg-levels{max-width:100%;overflow-x:auto;scrollbar-width:thin}
|
||
.lg-levels button{padding:6px 9px}
|
||
.lg-progress,.mt-score{min-width:0;margin-left:0;flex:1;justify-content:flex-end;text-align:right}
|
||
.lg-card,.mt-card{gap:8px;padding:8px}
|
||
.lg-pic{font-size:clamp(42px,16cqi,60px)}
|
||
.lg-pic img{width:clamp(58px,20cqi,76px);height:clamp(58px,20cqi,76px)}
|
||
.lg-instr{padding:6px 8px;font-size:13px}
|
||
.lg-slots{width:100%;max-width:100%;justify-content:flex-start;gap:7px;overflow-x:auto;padding:3px 1px 8px}
|
||
.lg-tray{gap:7px;min-height:0;max-height:44%;overflow:auto;padding:8px}
|
||
.lg-kbd{gap:5px;padding:7px}
|
||
.lg-kbd button{width:36px;height:42px;font-size:18px}
|
||
.lg-ed-form{gap:7px;padding:9px}
|
||
.lg-ed-form input.ed-word,.ed-theme-name,.ed-theme-folder{width:min(100%,170px)}
|
||
.ed-pictorow{flex-wrap:wrap}
|
||
.fl-sel{min-width:0}
|
||
.fl-word{min-height:54px;font-size:clamp(30px,14cqi,48px);letter-spacing:2px;text-align:center}
|
||
.hk-word{min-height:54px}
|
||
.hk-whole{font-size:clamp(30px,13cqi,44px)}
|
||
.hk-l{font-size:clamp(27px,12cqi,40px)}
|
||
.hk-sep{font-size:22px;margin:0 1px}
|
||
.bl-balloons{font-size:clamp(24px,9cqi,32px);letter-spacing:2px}
|
||
.bl-word{min-height:45px;font-size:clamp(28px,12cqi,40px);letter-spacing:3px;text-align:center}
|
||
.mt-q{font-size:clamp(28px,12cqi,38px)}
|
||
.mt-a{min-width:90px;height:50px;font-size:28px}
|
||
.mt-pad{gap:6px}
|
||
.mt-pad button{min-height:44px;padding:8px 0}
|
||
|
||
/* schrijfblad, media, mindmap, anker, dobbelsteen, namen en timer */
|
||
.wp-bar{gap:4px;padding:5px;max-height:45%;overflow:auto}
|
||
.wp-group{gap:2px;padding:2px}
|
||
.wp-group button{width:30px;height:30px}
|
||
.wp-clear{width:34px;height:34px}
|
||
.media-bar{flex-wrap:wrap;padding:7px}
|
||
.media-bar input{flex-basis:190px}
|
||
.mm-top{max-width:calc(100% - 16px);gap:4px;padding:4px 6px}
|
||
.mm-hint{display:none}
|
||
.mm-seg button{padding:5px 8px;font-size:12px}
|
||
.mm-node{max-width:46%;padding:7px 10px}
|
||
.mm-pop{max-width:calc(100% - 8px)}
|
||
.an-hint{min-height:42px;padding:6px 92px 6px 8px}
|
||
.an-tools{top:4px;right:4px}
|
||
.an-cell{width:112px;height:52px;padding:2px 5px;font-size:13px}
|
||
.dc-row{gap:8px}
|
||
.die{width:clamp(64px,25cqi,84px);height:clamp(64px,25cqi,84px);padding:8px}
|
||
.die i{width:clamp(10px,4cqi,14px);height:clamp(10px,4cqi,14px)}
|
||
.np-result{min-height:62px;padding:7px;font-size:clamp(23px,9cqi,30px)}
|
||
.np-row{gap:7px}
|
||
.np-row .tbtn{flex:1}
|
||
.np-row label{margin-left:0}
|
||
.timer{gap:7px;padding:8px}
|
||
.timer .tpie{max-height:190px}
|
||
.timer .tdisp{font-size:clamp(36px,15cqi,46px)}
|
||
.timer .presets button{padding:7px 10px}
|
||
.timer .main button{padding:10px 16px}
|
||
.tseg button{padding:6px 9px}
|
||
|
||
/* verjaardag, getallenlijn en zinsbouwer */
|
||
.bd{grid-template-columns:1fr}
|
||
.bd-controls{max-height:165px;border-right:0;border-bottom:1px solid var(--line);
|
||
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
|
||
.bd-controls>*{min-width:0}
|
||
.bd-controls input[type=range]{width:min(96px,100%)}
|
||
.bd-party{margin-top:0}
|
||
.bd-stage{padding:48px 10px 25px}
|
||
.bd-layer{height:62px}
|
||
.bd-age-badge{min-width:48px;height:48px;font-size:24px}
|
||
.nlw-settings{align-items:end;gap:5px}
|
||
.nlw-settings label{flex:1;min-width:64px}
|
||
.nlw-settings input,.nlw-settings select{width:100%}
|
||
.nlw-new{margin-left:0}
|
||
.nlw-scroll{padding-inline:8px}
|
||
.nlw-actions{gap:5px;flex-wrap:wrap}
|
||
.nlw-value{min-width:58px;font-size:24px}
|
||
.sb-banks{grid-template-columns:1fr}
|
||
.sb-sentence{min-height:60px;padding:8px}
|
||
.sb-add{gap:5px}
|
||
.sb-add input{min-width:120px}
|
||
.sb-actions{gap:5px}
|
||
|
||
/* educatieve widgets: dezelfde compacte opbouw als de oefenklok */
|
||
.edu-stage{align-items:safe center;justify-content:safe center;padding:10px}
|
||
.edu-controls{gap:6px;padding:0 8px 8px}
|
||
.fraction-wall,.place-grid,.wordtypes,.schedule,.mood,.poll{align-self:center}
|
||
.place-grid b{padding:6px 2px;font-size:9px;overflow-wrap:anywhere}
|
||
.place-grid output{padding:12px 2px;font-size:clamp(22px,8cqi,36px)}
|
||
.wordtypes,.mood{width:100%;justify-content:center}
|
||
.schedule>div{gap:7px;padding:8px}
|
||
.schedule span{min-width:0;overflow-wrap:anywhere}
|
||
.mood .tbtn{font-size:30px;padding:9px}
|
||
.poll h3{margin:8px 0}
|
||
|
||
.money-task-card,.clock-task-card,.world-task-card{gap:9px;padding:10px}
|
||
.world-top{top:-10px;gap:5px}
|
||
.world-gallery{grid-template-columns:1fr}
|
||
.world-visual.mixed{gap:6px}
|
||
.world-photo-badge{left:6px;top:6px;padding:4px 7px;font-size:8px}
|
||
.world-photo-credit{right:5px;bottom:5px;max-width:calc(100% - 10px);font-size:8px}
|
||
.world-photo-answers{gap:6px}
|
||
.world-clue{padding:13px 12px}
|
||
.topo-map-wrap{padding:6px}
|
||
.topo-map{max-height:450px}
|
||
.world-map-wrap{padding:4px}
|
||
.world-map{max-height:none}
|
||
.world-continent-label{font-size:12px}
|
||
.topo-world-legend{gap:4px}
|
||
.topo-world-legend span{padding:4px 6px;font-size:10px}
|
||
.money-top,.clock-top{top:-10px;gap:5px}
|
||
.money-level-control>span,.clock-level-control>span{display:none}
|
||
.money-shop-task{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7px}
|
||
.money-product,.money-paid{min-height:112px;padding:8px 6px;gap:4px}
|
||
.money-product-icon{font-size:46px}
|
||
.money-product-name{font-size:14px}
|
||
.money-product .money-task-amount{font-size:32px}
|
||
.money-product .money-task-words{font-size:16px}
|
||
.money-paid>output{font-size:26px}
|
||
.money-cash-tray{gap:6px;padding:9px}
|
||
.clock{--clock-size:min(210px,68cqi)}
|
||
.clock-target{min-height:72px}
|
||
.clock-read-layout{gap:10px}
|
||
.clock-read-layout>.clock-assignment{min-width:0;flex-basis:100%}
|
||
.clock-block-tray.lg-tray{gap:7px;padding:9px}
|
||
}
|
||
|
||
@container widget (max-width:340px){
|
||
.lg,.mt,.dc,.np,.timer,.nlw,.sb{padding:6px}
|
||
.lg-cards{gap:3px}
|
||
.lg-cards button,.lg-snd,.lg-mode{width:32px;height:34px}
|
||
.lg .slot:not(.clock-digit-slot):not(.money-digit-slot),
|
||
.lg .blok:not(.clock-digit-block):not(.money-digit-block){width:52px;height:82px}
|
||
.clock-answer-slots,.money-answer-slots{gap:4px}
|
||
.clock-digit-slot.slot.sm,.money-digit-slot.slot.sm{width:39px;height:60px}
|
||
.clock-digit-block.blok,.money-digit-block.blok{width:34px;height:52px;min-height:52px}
|
||
.clock-block-tray.lg-tray,.money-digit-tray.lg-tray{
|
||
grid-template-columns:repeat(5,34px);gap:4px;padding:7px}
|
||
.clock-block-tray .clock-drag-block{width:34px;height:52px;min-height:52px}
|
||
.clock-type-display,.money-type-display{min-width:0;width:100%;font-size:30px}
|
||
.world-answers{grid-template-columns:1fr}
|
||
.world-visual.mixed{gap:5px}
|
||
.schedule>div{flex-wrap:wrap}
|
||
.schedule span{flex-basis:calc(100% - 70px)}
|
||
.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);
|
||
color:var(--ink); /* .tbtn is standaard wit-op-blauw; hier wit-op-wit dus overschrijven */
|
||
font-size:12.5px; font-weight:550; box-shadow:none; padding:0 12px;
|
||
}
|
||
#settingsModal .am-btn:hover, #settingsModal .tbtn:hover{background:var(--surface-2);}
|
||
/* de primaire knop (accent) houdt bewust witte tekst */
|
||
#settingsModal .am-btn.am-primary, #settingsModal .tbtn.am-primary{color:#fff;}
|
||
#settingsModal .tbtn:disabled{opacity:.5;}
|
||
#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;}
|
||
|
||
/* ---- gebruikers: master-detail (tabel links, bewerkpaneel rechts) ---- */
|
||
#settingsModal .am-toolbar{display:flex; gap:8px; margin:0 0 10px; align-items:center;}
|
||
#settingsModal .am-toolbar .am-filter{flex:1; min-width:0;}
|
||
#settingsModal .am-btn.am-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
|
||
#settingsModal .am-btn.am-primary:hover{background:var(--accent); opacity:.9;}
|
||
#settingsModal .am-split{display:flex; align-items:flex-start;}
|
||
#settingsModal .am-master{flex:1; min-width:0;}
|
||
#settingsModal .am-detail{
|
||
width:330px; flex:none; position:sticky; top:0; margin-left:16px; padding-left:16px;
|
||
border-left:1px solid var(--line); display:flex; flex-direction:column; gap:10px;
|
||
max-height:calc(min(700px,92vh) - 220px); overflow-y:auto;
|
||
}
|
||
#settingsModal .am-detail .am-field{width:100%;}
|
||
#settingsModal .am-detail .am-tools{display:flex; flex-direction:column; gap:10px; width:100%;}
|
||
#settingsModal .am-detail-empty{color:var(--muted); font-size:12.5px; line-height:1.55; padding:10px 2px;}
|
||
#settingsModal .am-detail-head{display:flex; gap:10px; align-items:center;}
|
||
#settingsModal .am-detail-head h4{margin:0; font-size:13.5px; font-weight:650;}
|
||
#settingsModal .am-detail-head .am-role{display:block; font-size:11.5px;}
|
||
#settingsModal .am-detail-title{min-width:0; flex:1;}
|
||
#settingsModal .am-detail-close{flex:none;}
|
||
/* de tabel: per-rij grid met vaste kolomverhoudingen lijnt over rijen heen uit */
|
||
#settingsModal .am-tr{
|
||
display:grid; grid-template-columns:minmax(0,1.8fr) .9fr 1fr .9fr;
|
||
gap:10px; align-items:center; cursor:pointer;
|
||
}
|
||
#settingsModal .am-thead{
|
||
display:grid; grid-template-columns:minmax(0,1.8fr) .9fr 1fr .9fr; gap:10px;
|
||
padding:0 10px 5px; font-size:10px; font-weight:700; letter-spacing:.6px;
|
||
text-transform:uppercase; color:var(--muted);
|
||
}
|
||
#settingsModal .am-tr.sel{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--accent);}
|
||
#settingsModal .am-tr .am-name{display:flex; gap:8px; align-items:center; min-width:0;}
|
||
#settingsModal .am-name-txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||
#settingsModal .am-username{color:var(--muted); font-weight:500; font-size:11px;}
|
||
#settingsModal .am-cell{
|
||
font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||
}
|
||
#settingsModal .am-avatar{
|
||
width:24px; height:24px; border-radius:50%; flex:none;
|
||
background:var(--surface-3); color:var(--muted); font-size:10px; font-weight:700;
|
||
display:inline-flex; align-items:center; justify-content:center; letter-spacing:.3px;
|
||
}
|
||
#settingsModal .am-avatar.big{width:34px; height:34px; font-size:12.5px;}
|
||
#settingsModal .am-status .am-chip{background:transparent; border:1px solid var(--line); color:var(--muted); font-size:11px;}
|
||
#settingsModal .am-status .am-chip.on{border-color:var(--accent); color:var(--accent-ink);}
|
||
/* smal scherm: het detailpaneel wordt een overlay óver de tabel (onder de
|
||
tabel stapelen betekent bij grote scholen eindeloos scrollen) */
|
||
@media (max-width:760px){
|
||
#settingsModal .am-thead{display:none;}
|
||
#settingsModal .am-tr{grid-template-columns:minmax(0,1fr) auto;}
|
||
#settingsModal .am-tr .am-cell{display:none;}
|
||
#settingsModal .am-tr .am-cell:nth-of-type(2){display:block; text-align:right;}
|
||
#settingsModal .am-detail{display:none;}
|
||
#settingsModal .am-split.has-sel .am-detail{
|
||
display:flex; position:fixed; inset:10% 4% 4%; z-index:6500; margin:0;
|
||
background:var(--surface); border:1px solid var(--line); border-radius:10px;
|
||
padding:14px; max-height:none; box-shadow:var(--shadow-2);
|
||
}
|
||
}
|
||
|
||
/* ---- groepskaart: één kader om items die bij elkaar horen ---- */
|
||
#settingsModal .am-card{
|
||
border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface);
|
||
overflow:hidden; margin-bottom:10px;
|
||
}
|
||
#settingsModal .am-card-head{
|
||
display:flex; gap:9px; align-items:center; padding:9px 12px;
|
||
background:var(--surface-2); border-bottom:1px solid var(--line);
|
||
}
|
||
#settingsModal .am-card:has(.am-card-subs[style*="none"]):not(:has(.am-card-tools:not([style*="none"]))) .am-card-head{border-bottom:none;}
|
||
#settingsModal .am-ico{filter:grayscale(1); opacity:.55; font-size:13px; flex:none;}
|
||
#settingsModal .am-card-title{font-weight:650; font-size:13.5px; flex:1; min-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||
#settingsModal .am-card-sum{margin-left:auto; flex:0 1 auto; min-width:0; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||
#settingsModal .am-card-toggle{cursor:pointer; user-select:none; padding:4px 6px; border-radius:5px;}
|
||
#settingsModal .am-card-toggle:hover{background:var(--surface-3); color:var(--ink);}
|
||
#settingsModal .am-card-tools{padding:10px 12px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px;}
|
||
#settingsModal .am-card-subs > .am-row{border-bottom:1px solid var(--line);}
|
||
#settingsModal .am-card-subs > .am-row:last-child{border-bottom:none;}
|
||
/* compacte subrij binnen een kaart */
|
||
#settingsModal .am-card-sub{font-size:12.5px; padding:5px 12px 5px 30px; flex-wrap:wrap;}
|
||
#settingsModal .am-card-sub .am-name{font-size:12.5px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||
#settingsModal .am-card-sub .am-role{font-size:11.5px; margin-left:auto;}
|
||
#settingsModal .am-card-sub .am-edit{flex:none;}
|
||
#settingsModal .am-card-sub .am-row-tools{width:100%;}
|
||
#settingsModal .img-quota-pick{margin-bottom:8px; max-width:420px;}
|
||
/* status-glyph (● actief / ○ wacht) met uitleg via title */
|
||
#settingsModal .am-glyph{flex:none; font-size:10px; color:var(--muted); cursor:default;}
|
||
#settingsModal .am-glyph.ok{color:var(--green);}
|
||
/* mobiel: rijen binnen het beheer niet meer verticaal stapelen - de generieke
|
||
stapelregel maakte school en subrij ononderscheidbaar; wrap vangt overloop */
|
||
@media (max-width:600px){
|
||
#settingsModal .am-row{flex-direction:row; align-items:center; flex-wrap:wrap;}
|
||
/* kaartkop mag wrappen: titel houdt regel 1, samenvatting+Bewerken eronder */
|
||
#settingsModal .am-card-head{flex-wrap:wrap;}
|
||
/* compacte subrij op telefoon: naam + Bewerken op regel 1, verbruik eronder */
|
||
#settingsModal .am-card-sub .am-role{order:3; flex-basis:100%; margin-left:0;}
|
||
#settingsModal .am-card-sub .am-edit{margin-left:auto;}
|
||
}
|
||
|
||
/* ---- inklapbare koppen: wachtwoordblok (Account) en Inhoud-kaarten ---- */
|
||
#settingsModal .am-h3-toggle{cursor:pointer; user-select:none;}
|
||
#settingsModal .am-h3-toggle::after{content:" ▸";}
|
||
#settingsModal .am-h3-toggle.open::after{content:" ▾";}
|
||
#settingsModal .am-h3-toggle:hover{color:var(--ink);}
|
||
#settingsModal #ownPwBlock{display:none;}
|
||
#settingsModal #ownPwBlock.open{display:flex;}
|
||
#settingsModal .am-card-head.am-card-toggle{cursor:pointer;}
|
||
#settingsModal .cms-card-body{padding:10px 12px;}
|
||
#settingsModal .cms-card-body .am-reset{border:none; padding:0; background:transparent;}
|
||
|
||
/* ---- uniforme control-maat: elk veld/knop in het beheer even hoog ---- */
|
||
#settingsModal .am-btn,
|
||
#settingsModal .am-copy,
|
||
#settingsModal .tbtn,
|
||
#settingsModal .am-edit,
|
||
#settingsModal .am-inp,
|
||
#settingsModal .am-sel,
|
||
#settingsModal .am-pw,
|
||
#settingsModal input[type="search"],
|
||
#settingsModal input[type="number"],
|
||
#settingsModal input[type="password"],
|
||
#settingsModal input[type="text"]{
|
||
height:var(--control-h); min-height:var(--control-h); box-sizing:border-box;
|
||
font-size:13px; line-height:1;
|
||
}
|
||
#settingsModal .am-edit{padding:0 12px; opacity:.75;}
|
||
#settingsModal .am-edit:hover{opacity:1;}
|
||
/* textarea's (CMS) mogen hoger; niet vastpinnen */
|
||
#settingsModal textarea.am-inp, #settingsModal .cms-ta{height:auto; min-height:64px;}
|
||
/* labels boven de velden even breed als hun veld zodat rijen uitlijnen */
|
||
#settingsModal .am-field{gap:4px;}
|