:root{ --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#2a323d; --ink:#e6e8ea; --muted:#9aa4b2; --accent:#c8102e; --accent-ink:#fff; --ok:#2ea043; --err:#f85149; --radius:12px; } /* Thema volgt het systeem (licht/donker). data-theme op kan het vastzetten. */ :root{color-scheme:dark; --shadow:rgba(0,0,0,.35)} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ color-scheme:light; --bg:#f4f5f7; --panel:#fff; --panel2:#eef1f4; --line:#dfe3e8; --ink:#141a20; --muted:#5b6b7a; --accent:#c8102e; --ok:#1a7f37; --err:#cf222e; --shadow:rgba(20,26,32,.12); } } :root[data-theme="light"]{ color-scheme:light; --bg:#f4f5f7; --panel:#fff; --panel2:#eef1f4; --line:#dfe3e8; --ink:#141a20; --muted:#5b6b7a; --accent:#c8102e; --ok:#1a7f37; --err:#cf222e; --shadow:rgba(20,26,32,.12); } *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink); font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; min-height:100vh;display:flex;flex-direction:column} a{color:inherit} .top{display:flex;align-items:center;gap:18px;padding:12px 18px; background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5} .brand{font-weight:700;text-decoration:none;letter-spacing:.02em;display:flex;gap:8px;align-items:center} .brand .mark{color:var(--accent)} .nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap} .nav a{color:var(--muted);text-decoration:none;font-size:14px} .nav a:hover{color:var(--ink)} .wrap{width:100%;max-width:860px;margin:0 auto;padding:22px 16px;flex:1} .foot{color:var(--muted);text-align:center;font-size:12px;padding:20px} .flash{max-width:860px;margin:12px auto 0;padding:10px 14px;border-radius:10px; background:rgba(46,160,67,.12);border:1px solid var(--ok);color:var(--ink)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px} .card.narrow{max-width:420px;margin:6vh auto} h1{font-size:1.4rem;margin:.1em 0 .5em} .muted{color:var(--muted)} .small{font-size:13px} label{display:block;margin:14px 0 0;font-size:14px;color:var(--muted)} input,textarea,select{width:100%;margin-top:5px;padding:10px 12px;border-radius:10px; border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit} input:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent} .code-input{letter-spacing:.5em;text-align:center;font-size:1.4rem} button,.btn{margin-top:18px;padding:11px 16px;border:0;border-radius:10px;cursor:pointer; background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600} button.ghost,.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500} button:hover{filter:brightness(1.08)} .err{margin:12px 0;padding:10px 14px;border-radius:10px;background:rgba(248,81,73,.12);border:1px solid var(--err)} .ok{margin:12px 0;padding:10px 14px;border-radius:10px;background:rgba(46,160,67,.12);border:1px solid var(--ok)} .qr{display:flex;justify-content:center;margin:16px 0;background:#fff;padding:14px;border-radius:10px;width:max-content;margin-inline:auto} .qr img,.qr canvas{display:block} .secret{font-family:ui-monospace,monospace;font-size:1.1rem;background:var(--panel2); border:1px dashed var(--line);border-radius:10px;padding:10px 12px;text-align:center;word-break:break-all} /* lijsten */ .row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)} .row:last-child{border-bottom:0} .grow{flex:1;min-width:0} .trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pill{font-size:12px;color:var(--muted);background:var(--panel2);border:1px solid var(--line); border-radius:999px;padding:2px 9px} .section{margin-top:26px} .section h2{font-size:1.05rem;margin:0 0 8px} .iconbtn{background:transparent;border:0;color:var(--muted);cursor:pointer;margin:0;padding:6px;font-size:15px} .iconbtn:hover{color:var(--ink)} .done .trunc{text-decoration:line-through;color:var(--muted)} .addbar{display:flex;gap:8px;margin-bottom:8px} .addbar input{margin-top:0} .addbar button{margin-top:0} .drop{border:2px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;color:var(--muted); background:var(--panel)} .drop.hot{border-color:var(--accent);color:var(--ink)} .bar{height:6px;background:var(--panel2);border-radius:6px;overflow:hidden;margin-top:6px} .bar>i{display:block;height:100%;background:var(--accent);width:0} @media(max-width:560px){.card.narrow{margin:3vh auto}.wrap{padding:16px 12px}} /* werkgroepen */ .spaces{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px} .spaces a{font-size:14px;text-decoration:none;color:var(--muted);padding:6px 12px;border-radius:999px; border:1px solid var(--line);background:var(--panel);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spaces a:hover{color:var(--ink)} .spaces a.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)} .spaces a.add{border-style:dashed} .who{margin-top:1px} select.mv{width:auto;max-width:150px;margin:0;padding:4px 6px;font-size:13px;color:var(--muted)} .card.group{margin-top:16px} .ghead{display:flex;align-items:center;gap:10px} .ghead h2{margin:0;font-size:1.15rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .glinks{display:flex;gap:8px;margin:10px 0 4px} .glinks .btn{margin-top:0;text-decoration:none;padding:7px 14px} .card h3{font-size:.95rem;margin:18px 0 4px;color:var(--muted);font-weight:600} details summary{cursor:pointer;color:var(--muted);font-size:14px;margin-bottom:8px} @media(max-width:560px){select.mv{max-width:96px}.addbar{flex-wrap:wrap}.addbar button{flex:1}} /* hamburgermenu (pagina's) en accountmenu (poppetje): allebei een uitklapmenu */ .nav{align-items:center;gap:10px} .dropmenu{position:relative} .dropmenu summary{list-style:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;gap:6px; padding:3px;border-radius:999px;border:1px solid var(--line)} .dropmenu summary::-webkit-details-marker{display:none} .dropmenu summary:hover,.dropmenu[open] summary{color:var(--ink);border-color:var(--muted)} .navmenu summary{padding:3px 12px 3px 8px} .navmenu .here{font-size:14px} .dropmenu .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;max-width:260px; background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;z-index:10; box-shadow:0 8px 24px var(--shadow)} .dropmenu .menu .who{padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px} .dropmenu .menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:14px;text-decoration:none} .dropmenu .menu a:hover{background:var(--panel2)} .dropmenu .menu a.on{color:var(--accent);font-weight:600} /* taakdetail: links, bijlagen, opmerkingen */ .crumb{margin:0 0 10px;font-size:14px} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--ink)} .tasktitle{font-size:1.3rem;font-weight:700;margin-top:0} .tasktitle.isdone{text-decoration:line-through;color:var(--muted)} .taskedit textarea{resize:vertical} .card.section-card{margin-top:16px} .card h2{font-size:1.1rem;margin:0 0 8px} .small-drop{padding:16px;font-size:14px} .tlink{text-decoration:none} .tlink:hover{text-decoration:underline} .badges{font-size:12px;color:var(--muted);margin-left:6px;white-space:nowrap} .badges span{margin-right:6px} .linkadd input[name=label]{max-width:180px} .comment{padding:10px 0;border-bottom:1px solid var(--line)} .chead{display:flex;align-items:center;gap:8px} .chead form{margin-left:auto} .cbody,.mbody{margin-top:4px;overflow-wrap:anywhere} .cbody a,.mbody a,.who a{color:var(--accent)} /* groepschat */ .chatlog{height:min(60vh,520px);overflow-y:auto;padding:4px 2px;border:1px solid var(--line); border-radius:10px;background:var(--panel2);margin-top:8px} .msg{max-width:85%;margin:8px;padding:8px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)} .msg.mine{margin-left:auto;border-color:var(--accent)} .mhead{display:flex;align-items:center;gap:4px} .mhead .iconbtn{margin-left:auto;padding:0 2px;font-size:13px} .chatlog .empty{padding:12px} .chatform{display:flex;gap:8px;align-items:flex-end;margin-top:10px} .chatform textarea{margin-top:0;resize:none} .chatform button{margin-top:0} @media(max-width:560px){.linkadd input[name=label]{max-width:none}.msg{max-width:95%}} /* een afgekapte link moet een blok zijn, anders loopt hij over de knoppen ernaast */ a.trunc{display:block;max-width:100%} .msg{width:fit-content;min-width:45%} .msg.mine{background:color-mix(in srgb,var(--accent) 10%,var(--panel))} /* uitloggen is een formulier (POST + CSRF) dat eruitziet als een menu-item */ .dropmenu .menu form{margin:0} .dropmenu .menu .menulink{display:block;width:100%;text-align:left;margin:0;padding:8px 10px;border-radius:8px; background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:400} .dropmenu .menu .menulink:hover{background:var(--panel2);filter:none} /* 23 sep: titel loopt door over meerdere regels in plaats van weg te schuiven */ textarea.tasktitle{resize:none;overflow:hidden;line-height:1.3;min-height:0} .moveblock{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)} .moveblock h3{font-size:.95rem;margin:0 0 6px} .moveblock select{margin-top:0} @media(max-width:560px){ /* iOS zoomt in bij tekst onder 16px in een formulierveld */ select.mv,input,select,textarea{font-size:16px} select.mv{max-width:120px} /* taaktitels in de lijst lopen door in plaats van af te kappen */ #todo-list .trunc{white-space:normal;overflow-wrap:anywhere} } @media(max-width:560px){ /* telefoon: in de takenlijst geen keuzemenu (verplaatsen gaat via de taakpagina), zodat de titel ruimte heeft */ #todo-list select.mv{display:none} /* in de bestandenlijst op een eigen regel */ #file-list .row{flex-wrap:wrap} #file-list select.mv{order:5;flex-basis:100%;max-width:none} } /* laat zien dat een taaktitel naar de taakpagina gaat */ .tlink::after{content:" \203A";color:var(--muted)} /* 23 sep: ongelezen-bolletje, ⋯-menu per bestand, opmerking bewerken */ .badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--accent); color:var(--accent-ink);font-size:12px;font-weight:700;line-height:18px;text-align:center} .badge[hidden]{display:none} .rowmenu summary{padding:2px 10px;font-size:18px;line-height:1;letter-spacing:1px} .rowmenu .menu{min-width:220px} .rowmenu .menulink.danger{color:var(--err)} .cedit{margin-top:6px} .cedit summary{cursor:pointer;display:inline-block} .cedit textarea{margin-top:6px} .cedit button{margin-top:8px} /* smalle telefoon: alleen ☰ (+ bolletje), zodat logo, menu en poppetje op één regel passen */ @media(max-width:480px){.navmenu .here{display:none}.navmenu summary{padding:3px 8px}.top{gap:10px}}