/* Full-bleed: de editor benut de volle breedte i.p.v. de smalle kolom. */ body.pt-fullbleed .pt-shell{ max-width:none; padding:0 18px; } body.pt-fullbleed .pt-card{ padding:1.1rem 1.2rem; } @media (min-width:761px){ body.pt-fullbleed .pt-card{ padding:0.9rem 1.2rem 0.4rem; } } /* minder bodempadding: statusbalk dichter tegen de onderkant */ /* App-layout: de editor vult het venster als flex-kolom -> ALLEEN de PDF-stage scrollt (geen dubbele scrollbar: pagina-scroll uit, één scroll binnen de stage). Alleen desktop. */ @media (min-width:761px){ body.pt-fullbleed{ overflow:hidden; } body.pt-fullbleed .pt-shell{ height:100vh; display:flex; flex-direction:column; min-height:0; } body.pt-fullbleed .pt-sub{ display:none; } /* lange uitleg weg in de app-layout -> meer ruimte voor de editor */ body.pt-fullbleed .pt-top{ margin-bottom:.5rem; } body.pt-fullbleed .pt-card{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; } body.pt-fullbleed #edWork:not(.pt-hidden){ flex:1; min-height:0; display:flex; flex-direction:column; } /* stretch (niet flex-start) + overflow-clip: zo vult de stage-kolom exact de beschikbare hoogte en scrollt de PDF binnen #edStageWrap i.p.v. onder #edMain door over de statusbalk te lopen (bij grote/landschap-pagina's). */ body.pt-fullbleed #edMain{ flex:1; min-height:0; align-items:stretch; overflow:hidden; } body.pt-fullbleed #edMain > div[style*="flex:1"]{ display:flex; flex-direction:column; min-height:0; } body.pt-fullbleed #edStageWrap{ flex:1; max-height:none; min-height:0; } body.pt-fullbleed #edSidebar, body.pt-fullbleed #edInspect, body.pt-fullbleed #edComments, body.pt-fullbleed #edBookmarks{ max-height:none; } body.pt-fullbleed #edMain > div[style*="flex:1"] > .pt-note{ flex:none; } } /* ======================= APP-MODUS (volledig scherm) ===================== Dit ging via requestFullscreen op #edWork alleen. Dat maakte dat ene blok schermvullend, maar er bleef een kader met marges omheen staan en de ruimte werd nauwelijks groter (gebruikersmelding 09-08-2026: "de balk rondom moet weg bij full screen"). Word en Excel doen het anders: de gedeelde include zet de klasse vs-vol op en de editor loopt van rand tot rand, met alleen het lint en het document in beeld. Nu hier hetzelfde. */ html.vs-vol, html.vs-vol body{ height:100%; overflow:hidden; } html.vs-vol .pt-shell{ max-width:none; margin:0; padding:0; height:100vh; display:flex; flex-direction:column; } html.vs-vol .pt-top, html.vs-vol .pt-sub, html.vs-vol .pt-note, html.vs-vol .pt-privacy, html.vs-vol .pt-hubnav, html.vs-vol .pt-footer, html.vs-vol .vz-balk, html.vs-vol .pt-related, /* De statusregel en de bus-container bleven onder de editor staan als een lege witte strook over de volle breedte (gebruikersmelding 09-08-2026: "er zit nog een witregel onder"). In deze modus is er geen plek voor. */ html.vs-vol .pt-status, html.vs-vol #edStatus, html.vs-vol #edBusNext{ display:none !important; } html.vs-vol .pt-card{ flex:1 1 auto; min-height:0; margin:0; border:0; border-radius:0; padding:8px 10px; display:flex; flex-direction:column; box-shadow:none; } html.vs-vol #edWork{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } /* De balken mogen NOOIT meekrimpen. In een flexkolom is shrink standaard 1: zoomde je de PDF in, dan werd de inhoud te hoog en drukte de browser het lint plat — knoppen half afgesneden, tabbladen onleesbaar (melding eigenaar, 09-08-2026: "de lint moet niet aanpassen als je de pdf inzoomt of uitzoomt"). Alleen het werkvlak geeft mee, en dat scrollt. */ html.vs-vol #edRibbon, html.vs-vol #edToolbar, html.vs-vol #edProps, html.vs-vol #edStatusbar{ flex:0 0 auto; } /* Geen gekleurde kaders om de balken en om het werkvlak: een editor is geen verzameling kaartjes maar één scherm (verzoek eigenaar, 09-08-2026 — "er moeten geen kaders rondom zitten met kleuren"). Alleen een dunne scheidingslijn waar twee gebieden elkaar raken. */ html.vs-vol #edRibbon, html.vs-vol #edToolbar, html.vs-vol #edProps, html.vs-vol #edStatusbar, html.vs-vol #edStageWrap, html.vs-vol #edDock, html.vs-vol #edSidebar{ border:0; border-radius:0; box-shadow:none; } html.vs-vol #edToolbar, html.vs-vol #edProps, html.vs-vol #edStatusbar{ border-bottom:1px solid #e5e9f0; } html.vs-vol #edDock{ border-left:1px solid #e5e9f0; } html.vs-vol #edSidebar{ border-right:1px solid #e5e9f0; } html.vs-vol .pt-card{ padding:0; background:#fff; } html.vs-vol #edMain{ gap:0; } html.vs-vol #edStageWrap{ background:#eef2f7; padding:14px 10px; } html.vs-vol #edMain{ flex:1 1 auto; min-height:0; align-items:stretch; overflow:hidden; } html.vs-vol #edMain > div[style*="flex:1"]{ display:flex; flex-direction:column; min-height:0; } html.vs-vol #edStageWrap{ flex:1 1 auto; max-height:none; min-height:0; } html.vs-vol #edSidebar, html.vs-vol #edDock{ max-height:none; } /* De melding van de browser ("… press Esc") legt zich de eerste seconden over het lint; zelfde oplossing als in Word en Excel. */ html.vs-vol #edRibbon{ transition:margin-top .25s ease; } html.vs-vol.vs-melding #edRibbon{ margin-top:52px; } /* De oude weg blijft werken voor wie hem al gebruikte. */ #edWork:fullscreen{ background:#f1f5f9; overflow:auto; padding:16px 20px; } #edWork:-webkit-full-screen{ background:#f1f5f9; overflow:auto; padding:16px 20px; } #edWork:fullscreen #edSidebar, #edWork:fullscreen #edDock{ max-height:calc(100vh - 190px); } #edWork:fullscreen #edStageWrap{ max-height:calc(100vh - 150px); } /* Rechtermuisknop-menu op de miniaturenbalk. */ #edCtx{ position:fixed; z-index:9000; min-width:210px; background:#fff; border:1px solid #e2e6ec; border-radius:11px; box-shadow:0 20px 48px -16px rgba(15,23,42,.4); padding:5px; display:none; } #edCtx.open{ display:block; } #edCtx button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:transparent; color:#1f2937; font:inherit; font-size:.85rem; padding:8px 11px; border-radius:7px; cursor:pointer; } #edCtx button:hover{ background:#f1f5f9; } #edCtx button.danger{ color:#b91c1c; } #edCtx button.danger:hover{ background:#fef2f2; } #edCtx .ed-ctx-sep{ height:1px; background:#eef2f7; margin:4px 6px; } #edCtx .ed-ctx-hd{ font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#94a3b8; padding:5px 11px 3px; } /* Handtekening-venster */ #edSigModal{ position:fixed; inset:0; z-index:9500; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; padding:16px; } #edSigModal.pt-hidden{ display:none !important; } .ed-sig-box{ background:#fff; border-radius:14px; box-shadow:0 30px 70px -20px rgba(15,23,42,.55); width:560px; max-width:100%; padding:16px 18px; } .ed-sig-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .ed-sig-x{ border:none; background:transparent; font-size:22px; line-height:1; color:#64748b; cursor:pointer; padding:0 4px; } .ed-sig-tabs{ display:inline-flex; background:#eef2f7; border-radius:9px; padding:3px; gap:2px; margin-bottom:12px; } .ed-sig-tabs button{ border:none; background:transparent; padding:6px 14px; border-radius:7px; font:inherit; font-size:.85rem; font-weight:600; color:#475569; cursor:pointer; } .ed-sig-tabs button.active{ background:#fff; color:#1e5a9e; box-shadow:0 2px 6px -3px rgba(15,23,42,.3); } #edSigPad{ width:100%; height:auto; aspect-ratio:520/180; border:1px dashed #cbd5e1; border-radius:10px; background:#fff; touch-action:none; cursor:crosshair; display:block; } .ed-sig-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; } .ed-sig-prev{ min-height:70px; display:flex; align-items:center; padding:6px 10px; margin-top:8px; border:1px solid #eef2f7; border-radius:10px; background:#f8fafc; font-family:'Fraunces',cursive,serif; font-style:italic; font-size:2.2rem; color:#0b2a4a; overflow:hidden; } .ed-sig-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; } /* ---- Ribbon-layout (PDF-XChange-achtig): gegroepeerde tool-secties ---- */ /* ---- lintbalk: Bestand + tabbladen, zoals in Word en Excel ---- */ #edRibbon{ display:flex; align-items:stretch; gap:2px; background:#f8fafc; border:1px solid #e5e9f0; border-bottom:0; border-radius:10px 10px 0 0; padding:0 4px; overflow-x:auto; scrollbar-width:none; } #edRibbon::-webkit-scrollbar{ display:none; } #edRibbon > *{ flex:0 0 auto; } .edrb-terug{ align-self:center; margin:0 8px 0 4px; padding:.35rem .7rem; border-radius:7px; background:#eef2f7; color:#475569; font-size:.8rem; font-weight:600; text-decoration:none; white-space:nowrap; } .edrb-terug:hover{ background:#e2e8f0; color:#1e5a9e; } .edrb-file{ border:0; background:#1e5a9e; color:#fff; font:inherit; font-size:.84rem; font-weight:650; padding:.5rem 1rem; margin:4px 6px 4px 0; border-radius:7px; cursor:pointer; } .edrb-file:hover{ background:#174a83; } .edrb-tab{ border:0; background:none; font:inherit; font-size:.84rem; color:#475569; padding:.55rem .95rem; margin:4px 0; border-radius:7px 7px 0 0; cursor:pointer; border-bottom:2px solid transparent; } .edrb-tab:hover{ color:#1e5a9e; } .edrb-tab.actief{ color:#1e5a9e; font-weight:650; background:#fff; border-bottom-color:#1e5a9e; } .edrb-doc{ margin-left:auto; align-self:center; padding:0 10px; font-size:.78rem; color:#64748b; max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .edrb-paneel{ display:none; align-items:stretch; } .edrb-paneel.actief{ display:flex; } .edrb-menu{ position:absolute; z-index:70; min-width:250px; background:#fff; border:1px solid #dbe2ea; border-radius:10px; box-shadow:0 18px 40px rgba(15,23,42,.16); padding:6px; display:none; } .edrb-menu.open{ display:block; } .edrb-menu button{ display:flex; align-items:center; gap:9px; width:100%; border:0; background:none; font:inherit; font-size:.86rem; color:#0f172a; text-align:left; padding:.5rem .6rem; border-radius:7px; cursor:pointer; } .edrb-menu button:hover{ background:#eef4fd; } .edrb-menu hr{ border:0; border-top:1px solid #eef2f7; margin:5px 2px; } .edrb-menu .snel{ margin-left:auto; font-size:.72rem; color:#94a3b8; } #edToolbar{ display:flex; align-items:stretch; gap:0; margin-bottom:0; padding:6px 4px; background:#fff; border:1px solid #e5e9f0; border-bottom:0; border-radius:0; overflow-x:auto; } #edToolbar .ed-grp{ display:flex; flex-direction:column; align-items:center; padding:0 9px; position:relative; } #edToolbar .ed-grp + .ed-grp::before{ content:""; position:absolute; left:0; top:5px; bottom:17px; width:1px; background:#eef2f7; } #edToolbar .ed-grp-tools{ display:flex; gap:2px; align-items:flex-start; } #edToolbar .ed-grp-lbl{ margin-top:4px; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:#94a3b8; font-weight:700; white-space:nowrap; } #edToolbar .ed-tool, #edToolbar .ed-rbtn{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:3px; width:54px; padding:6px 2px 5px; border:1px solid transparent; border-radius:8px; background:transparent; color:#475569; font:inherit; font-size:10px; font-weight:600; line-height:1.12; cursor:pointer; text-align:center; } #edToolbar .ed-tool svg, #edToolbar .ed-rbtn svg{ width:19px; height:19px; flex-shrink:0; } #edToolbar .ed-tool:hover, #edToolbar .ed-rbtn:hover:not(:disabled){ background:#f5f7fb; border-color:#e5e9f0; color:#1f2937; } #edToolbar .ed-tool.active{ background:#e8f0fc; border-color:#bcd3ee; color:#1e5a9e; } #edToolbar .ed-tool.danger.active{ background:#fdecec; border-color:#f2b8b8; color:#dc2626; } #edToolbar .ed-rbtn:disabled{ opacity:.45; cursor:default; } #edToolbar .ed-rsel{ align-self:center; padding:4px 5px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-size:.72rem; background:#fff; color:#334155; cursor:pointer; } #edToolbar .ed-rchk{ align-self:center; display:inline-flex; gap:4px; align-items:center; font-size:.72rem; color:#475569; cursor:pointer; white-space:nowrap; } #edFindBar{ position:fixed; top:74px; right:26px; z-index:40; display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #d7deea; border-radius:10px; padding:6px 9px; box-shadow:0 12px 34px -12px rgba(15,23,42,.4); color:#334155; } #edFindBar.pt-hidden{ display:none; } #edFindInput{ width:190px; max-width:44vw; padding:4px 8px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; font-size:.85rem; } #edFindInput:focus{ outline:none; border-color:#1e5a9e; } #edFindCount{ font-size:.74rem; color:#64748b; font-variant-numeric:tabular-nums; min-width:44px; text-align:center; } .ed-find-hi{ position:absolute; background:rgba(245,158,11,.38); outline:2px solid #f59e0b; border-radius:2px; pointer-events:none; z-index:6; } #edRestoreBar{ position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:41; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #d7deea; border-radius:10px; padding:8px 12px; box-shadow:0 12px 34px -12px rgba(15,23,42,.4); color:#334155; font-size:.85rem; max-width:92vw; } #edRestoreBar.pt-hidden{ display:none; } #edRestoreBar svg{ color:#1e5a9e; flex-shrink:0; } .ed-sc-h{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; margin:0 0 6px; } .ed-sc{ display:flex; align-items:baseline; gap:8px; font-size:.82rem; color:#475569; padding:2px 0; } .ed-sc span{ flex:1; } .ed-sc kbd{ display:inline-block; min-width:16px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:.72rem; background:#f5f7fb; border:1px solid #cbd5e1; border-bottom-width:2px; border-radius:5px; padding:1px 5px; color:#334155; } #edProps{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:0; padding:7px 12px; background:#f8fafc; border:1px solid #eef2f7; border-radius:9px; font-size:.8rem; color:#475569; } #edProps label{ display:inline-flex; gap:6px; align-items:center; } #edProps input[type=color]{ width:34px; height:26px; padding:1px; border:1px solid #cbd5e1; border-radius:6px; } /* statusbalk onderaan */ /* Derde rij van het lint (stond tot 09-08-2026 onderaan het scherm; daar werd hij te vol en keek je steeds omlaag voor iets wat bij de werkbalk hoort). */ #edStatusbar{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 8px; padding:4px 8px; background:#fff; border:1px solid #e5e9f0; border-top:0; border-radius:0 0 9px 9px; font-size:.76rem; color:#475569; } /* #edProps zit ertussen en sluit nu aan op de rij erboven. */ #edProps{ border-radius:0; } #edStatusbar .ed-sgrp{ display:inline-flex; align-items:center; gap:4px; } #edStatusbar .pt-btn{ padding:3px 9px; font-size:.75rem; border-radius:6px; } #edStatusbar .pt-btn.primary{ padding:4px 13px; } #edStatusbar .pt-note{ font-size:.74rem; } #edStatusbar .ed-sgrp.right{ margin-left:auto; } #edStatusbar #edZoomLbl, #edStatusbar #edPageLbl{ font-variant-numeric:tabular-nums; min-width:52px; text-align:center; } /* GEEN max-width hier: de stage moet exact om het canvas passen zodat de annotatielaag (#edLayer, inset op de stage) altijd 1:1 met het canvas schaalt. Bij max-width:100% klemde de stage terwijl het canvas (max-width:none) doorgroeide -> laag < canvas -> annotaties driften bij inzoomen. Horizontaal scrollen van een grote pagina regelt #edStageWrap (overflow:auto). */ #edStage{ position:relative; display:inline-block; flex:0 0 auto; line-height:0; box-shadow:0 6px 24px -16px rgba(15,23,42,.5); border-radius:6px; } /* Hoofdweergave: pagina horizontaal gecentreerd; 'safe center' laat links niet wegvallen als de pagina breder is dan het venster (dan gewoon scrollen). */ #edStageWrap{ max-width:100%; max-height:72vh; overflow:auto; padding:4px; background:#eef1f6; border-radius:8px; display:flex; justify-content:safe center; } #edCanvas{ max-width:none; display:block; border:1px solid #e5e9f0; border-radius:6px; background:#fff; } /* 1px inset = exact over het TEKENvlak van het canvas (dat een 1px rand heeft), zodat annotatie-fracties pixel-nauwkeurig op de PDF blijven bij elke zoom. */ #edLayer{ position:absolute; left:1px; top:1px; right:1px; bottom:1px; cursor:crosshair; touch-action:none; } #edLayer.sel{ cursor:default; touch-action:pan-x pan-y; } #edVec{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; overflow:visible; } #edStage.ed-cont{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 0; line-height:normal; box-shadow:none; background:transparent; } #edStage.ed-cont .ed-slot{ position:relative; } #edStage.ed-cont .ed-slot.cur{ outline:2px solid #1e5a9e; outline-offset:3px; border-radius:6px; } #edStage.ed-cont .ed-prev{ display:block; border:1px solid #e5e9f0; border-radius:6px; background:#fff; box-shadow:0 5px 18px -12px rgba(15,23,42,.5); cursor:pointer; } #edStage.ed-cont .ed-prev:hover{ outline:2px solid #bcd3ee; outline-offset:2px; } #edVec .ed-hit{ pointer-events:stroke; stroke:transparent; fill:none; cursor:move; } .ed-el{ position:absolute; box-sizing:border-box; } .ed-el.ed-text{ font-weight:600; white-space:pre-wrap; padding:0 2px; cursor:move; min-width:10px; line-height:1.12; } .ed-el.ed-rect{ cursor:move; } /* Tekstvak: een blok met achtergrond en rand. De maten komen uit styleEl (die schalen mee met de zoom); hier alleen wat voor élk tekstvak geldt. */ .ed-el.ed-textbox{ cursor:move; box-sizing:border-box; overflow:hidden; white-space:pre-wrap; word-break:break-word; } .ed-el.ed-textbox[contenteditable="true"]{ cursor:text; } .ed-el.ed-ellipse{ cursor:move; border-radius:50%; } .ed-el.ed-highlight{ cursor:move; } /* Redact in de EDITOR doorzichtig (rood gearceerd) zodat je de tekst eronder kunt controleren; bij Downloaden wordt 'ie pas echt zwart (rasterisatie). */ .ed-el.ed-redact{ cursor:move; box-sizing:border-box; border:1.5px solid #dc2626; background:repeating-linear-gradient(45deg, rgba(220,38,38,.14), rgba(220,38,38,.14) 6px, rgba(220,38,38,.30) 6px, rgba(220,38,38,.30) 12px); } .ed-el.ed-redact.ed-auto{ border-style:dashed; } .ed-el.ed-redact::after{ content:"redact"; position:absolute; top:0; left:2px; font-size:8px; line-height:1.4; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#b91c1c; pointer-events:none; white-space:nowrap; } .ed-el.ed-redact.ed-auto[data-pii]::after{ content:attr(data-pii); } .ed-el.ed-note{ background:#fff7cc; border:1px solid #e6c65a; border-radius:3px; color:#5b4a08; padding:4px 6px; font-size:12px; cursor:move; box-shadow:0 2px 6px -3px rgba(0,0,0,.35); overflow:hidden; white-space:pre-wrap; } .ed-el.ed-stamp{ display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.03em; text-transform:uppercase; cursor:move; border-radius:6px; } .ed-el.ed-image{ cursor:move; background-size:100% 100%; background-repeat:no-repeat; } .ed-el.ed-selected{ outline:1.5px solid #1e5a9e; outline-offset:1px; } .ed-h{ position:absolute; width:11px; height:11px; background:#fff; border:2px solid #1e5a9e; border-radius:2px; box-sizing:border-box; z-index:6; } .ed-h.ed-hend{ border-radius:50%; } /* Knoop van een veelhoek/lijn: iets voller zodat je ziet dat je 'm kunt pakken. */ .ed-h.ed-hnode{ background:#1e5a9e; border-color:#fff; box-shadow:0 0 0 1px #1e5a9e; } /* Tussen-plusje om een hoek toe te voegen. */ .ed-h.ed-hadd{ width:9px; height:9px; background:#fff; border:1px dashed #1e5a9e; opacity:.75; cursor:copy; } /* Snapshot-kader: blijft staan na het slepen, met grepen op de hoeken en zijden en een knoppenbalk eronder — zoals in PDF-XChange. */ /* GEEN verduistering van de rest van de pagina meer: die maakte precies datgene onleesbaar waar je een uitsnede van wilde maken (melding eigenaar, 09-08-2026: "als je een snapshot maakt, moet het beeld niet grijs worden"). Het kader zelf is genoeg om te zien wat je pakt. */ .ed-snapsel{ position:absolute; z-index:62; border:1.5px dashed #2563eb; background:rgba(37,99,235,.06); cursor:move; } .ed-snaph{ position:absolute; width:11px; height:11px; margin:-6px 0 0 -6px; background:#fff; border:1.5px solid #2563eb; border-radius:2px; z-index:63; } .ed-snaph-nw, .ed-snaph-se{ cursor:nwse-resize; } .ed-snaph-ne, .ed-snaph-sw{ cursor:nesw-resize; } .ed-snaph-n, .ed-snaph-s{ cursor:ns-resize; } .ed-snaph-e, .ed-snaph-w{ cursor:ew-resize; } .ed-snapbar{ position:absolute; z-index:64; display:flex; align-items:center; gap:6px; background:#0f172a; color:#fff; border-radius:9px; padding:5px 8px; box-shadow:0 10px 26px rgba(15,23,42,.32); font-size:.78rem; white-space:nowrap; } .ed-snapbar .maat{ color:#cbd5e1; font-variant-numeric:tabular-nums; padding-right:2px; } .ed-snapbar button{ border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; border-radius:6px; padding:3px 9px; font:inherit; font-size:.78rem; cursor:pointer; } .ed-snapbar button:hover{ background:rgba(255,255,255,.18); } .ed-snapbar button.prim{ background:#2563eb; border-color:#2563eb; font-weight:600; } .ed-snapbar button.prim:hover{ background:#1d4ed8; } .ed-h.ed-hadd:hover{ opacity:1; background:#e8f1fb; } #edMain{ display:flex; gap:12px; align-items:flex-start; } /* Het vaste dok rechts. Één breedte, altijd aanwezig — daar zit het hele punt: het werkvlak ernaast verandert nooit meer van maat, dus de PDF herschaalt niet en je muis blijft op dezelfde plek staan. */ #edDock{ width:258px; flex-shrink:0; max-height:660px; display:flex; flex-direction:row; border:1px solid #e5e9f0; border-radius:9px; background:#fbfcfe; overflow:hidden; } /* Verticale strip: de drie namen naast elkaar pasten niet in 258 pixels. */ #edDockTabs{ display:flex; flex-direction:column; flex:none; border-right:1px solid #eef2f7; background:#f5f7fb; padding:4px 0; gap:2px; } .ed-dtab{ position:relative; border:0; background:none; color:#64748b; width:38px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-left:2px solid transparent; } .ed-dtab svg{ width:18px; height:18px; } .ed-dtab:hover{ color:#1e5a9e; } .ed-dtab.actief{ color:#1e5a9e; background:#fff; border-left-color:#1e5a9e; } .ed-dtab-n{ position:absolute; top:2px; right:2px; background:#1e5a9e; color:#fff; border-radius:999px; padding:0 4px; font-size:.6rem; line-height:1.5; font-weight:700; min-width:14px; } .ed-dtab-n.leeg{ display:none; } /* De panelen staan nu NAAST de strip in plaats van eronder. */ #edDockPanelen{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow:hidden; } /* De panelen zaten los in #edMain met een eigen rand en breedte; binnen het dok vullen ze de ruimte en tekenen ze geen tweede kader. */ #edDockPanelen > #edInspect, #edDockPanelen > #edComments, #edDockPanelen > #edBookmarks{ width:auto; flex:1 1 auto; min-height:0; max-height:none; border:0; border-radius:0; background:transparent; } #edSidebar{ width:150px; flex-shrink:0; max-height:660px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:2px; } /* flex-shrink:0 -> miniaturen behouden hun grootte bij veel pagina's (niet indrukken); de balk scrollt in plaats van te krimpen. min-height reserveert ruimte voor lazy-render. */ .ed-thumb{ position:relative; flex:0 0 auto; min-height:120px; border:2px solid #e5e9f0; border-radius:6px; overflow:hidden; cursor:pointer; background:#fff; line-height:0; } .ed-thumb.active{ border-color:#1e5a9e; box-shadow:0 0 0 2px rgba(30,90,158,.2); } .ed-thumb.ed-sel{ border-color:#1e5a9e; box-shadow:0 0 0 3px rgba(30,90,158,.4); } .ed-thumb.ed-sel::after{ content:"✓"; position:absolute; top:3px; left:4px; z-index:2; width:18px; height:18px; border-radius:4px; background:#1e5a9e; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; } .ed-thumb canvas{ width:100%; display:block; } .ed-thumb .ed-tnum{ position:absolute; bottom:2px; left:4px; font-size:10px; color:#334155; background:rgba(255,255,255,.85); padding:0 4px; border-radius:3px; line-height:1.4; } /* Verwijder-/roteer-knoppen ALTIJD zichtbaar (klikbaar op desktop én touch); subtiel tot hover/actief. Voorheen alleen op hover -> onbereikbaar op touch/ingedrukte thumbs. */ .ed-thumb .ed-tdel, .ed-thumb .ed-trot{ position:absolute; top:3px; width:22px; height:22px; border:none; border-radius:5px; background:rgba(15,23,42,.72); color:#fff; font-size:12px; cursor:pointer; display:flex; opacity:.5; transition:opacity .12s; align-items:center; justify-content:center; z-index:2; } .ed-thumb .ed-tdel{ right:3px; } .ed-thumb .ed-trot{ right:29px; } .ed-thumb:hover .ed-tdel, .ed-thumb:hover .ed-trot, .ed-thumb.active .ed-tdel, .ed-thumb.active .ed-trot{ opacity:1; } .ed-thumb .ed-tdel:hover{ background:#dc2626; } /* Popover voor 'nieuwe blanco pagina' (formaat/richting pas ná klik). */ .ed-blankpop{ position:absolute; top:100%; left:0; z-index:45; margin-top:6px; background:#fff; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 14px 34px -14px rgba(15,23,42,.45); padding:10px 12px; min-width:190px; } .ed-blankpop:not(.pt-hidden){ display:flex; flex-direction:column; gap:8px; } .ed-blankpop .ed-bp-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.8rem; color:#334155; } #edProps select.ed-fsel{ padding:3px 6px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-size:.8rem; background:#fff; } /* Multi-document tabs (à la PDF-XChange) */ #edTabs{ display:flex; align-items:flex-end; gap:3px; flex-wrap:wrap; padding:4px 2px 0; border-bottom:1px solid #e5e9f0; margin-bottom:8px; } .ed-tab{ display:inline-flex; align-items:center; gap:6px; max-width:210px; padding:6px 10px; border:1px solid #e5e9f0; border-bottom:none; border-radius:8px 8px 0 0; background:#f1f5f9; color:#475569; font-size:.82rem; font-weight:600; cursor:pointer; } .ed-tab.active{ background:#fff; color:#1e5a9e; box-shadow:0 -2px 0 #1e5a9e inset; } .ed-tab-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; } .ed-tab-x{ border:none; background:transparent; color:#94a3b8; font-size:15px; line-height:1; cursor:pointer; padding:0 2px; border-radius:4px; } .ed-tab-x:hover{ background:#e2e8f0; color:#dc2626; } .ed-tab-add{ border:1px dashed #cbd5e1; background:#fff; color:#475569; font-size:16px; font-weight:700; width:30px; height:30px; border-radius:8px; cursor:pointer; flex-shrink:0; } .ed-tab-add:hover{ border-color:#1e5a9e; color:#1e5a9e; } .ed-thumb.ed-drag{ opacity:.4; } .ed-thumb.ed-over{ border-color:#1e5a9e; } @media (max-width:760px){ #edMain{ flex-direction:column; } #edSidebar{ width:100%; flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden; } .ed-thumb{ width:104px; flex-shrink:0; } #edComments, #edInspect, #edBookmarks{ width:100%!important; max-height:none!important; } #edDock{ width:100%; max-height:none; } } /* ---- Telefoon ---- De opmaak-rijen stonden met justify-content:space-between op een smal scherm ver uit elkaar, met halve invoervelden ertussen, en de knoppenbalk eronder viel per knop uiteen (gebruikersmelding 08-08-2026). Label boven het veld, velden op volle breedte, knoppen in een net raster. */ @media (max-width:640px){ .ed-fmt-row{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 10px; justify-content:stretch; } .ed-fmt-row select, .ed-fmt-row input[type=text]{ max-width:none !important; width:100%; } .ed-fmt-rng input[type=range]{ max-width:none !important; width:100%; } #edNav{ display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:6px; align-items:stretch; } #edNav > *{ min-width:0; } #edNav button, #edNav .pt-btn{ width:100%; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #edSidebar{ gap:6px; padding-bottom:6px; } .ed-thumb{ width:84px; min-height:96px; } } #edNav{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; } /* Opmerkingen-paneel (increment 3) */ #edComments{ width:250px; flex-shrink:0; max-height:660px; display:flex; flex-direction:column; border:1px solid #e5e9f0; border-radius:9px; background:#fbfcfe; overflow:hidden; } #edCmHead{ display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-bottom:1px solid #eef2f7; font-size:.84rem; color:#334155; } .ed-cm-hrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; } #edCmHead #edCmCount{ display:inline-block; background:#1e5a9e; color:#fff; border-radius:999px; padding:0 6px; font-size:.7rem; line-height:1.5; vertical-align:1px; } #edCmAuthor{ width:100%; box-sizing:border-box; padding:4px 7px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-size:.76rem; } .ed-cm-titel{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ed-cm-exp{ flex:0 0 auto; padding:2px 6px; font-size:.72rem; } #edCmSearch{ width:100%; box-sizing:border-box; padding:5px 8px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; font-size:.78rem; } #edCmSearch:focus, #edCmAuthor:focus{ outline:none; border-color:#1e5a9e; } #edCmHead select{ flex:1; min-width:0; padding:3px 5px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-size:.76rem; background:#fff; } .ed-cm-sw{ width:11px; height:11px; border-radius:3px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); } .ed-cm-meta{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:.7rem; color:#94a3b8; margin:0 1px 4px; } .ed-cm-au{ font-weight:600; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ed-cm-dt{ flex-shrink:0; font-variant-numeric:tabular-nums; } .ed-cm-st{ font-size:.64rem; font-weight:700; color:#fff; border-radius:4px; padding:0 5px; letter-spacing:.02em; } .ed-cm-reps{ margin:5px 0 0; display:flex; flex-direction:column; gap:4px; } .ed-cm-rep{ background:#f1f5fb; border:1px solid #e5e9f0; border-radius:6px; padding:4px 7px; } .ed-cm-rep-h{ display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:.68rem; color:#94a3b8; margin-bottom:2px; } .ed-cm-rep-h span:first-child{ font-weight:600; color:#475569; } .ed-cm-repx{ border:none; background:none; color:#cbd5e1; cursor:pointer; font-size:.9rem; line-height:1; padding:0 2px; } .ed-cm-repx:hover{ color:#e11d48; } .ed-cm-rep-t{ font-size:.78rem; color:#1f2937; white-space:pre-wrap; word-break:break-word; } .ed-cm-foot{ display:flex; gap:6px; align-items:center; margin-top:6px; } .ed-cm-status{ flex-shrink:0; padding:3px 5px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-size:.72rem; background:#fff; } .ed-cm-reply{ flex:1; min-width:0; box-sizing:border-box; padding:4px 7px; border:1px solid #e5e9f0; border-radius:6px; font:inherit; font-size:.76rem; } .ed-cm-reply:focus, .ed-cm-status:focus{ outline:none; border-color:#1e5a9e; } #edCmList{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:6px; } .ed-cm{ border:1px solid #e5e9f0; border-radius:7px; background:#fff; padding:6px 7px; cursor:pointer; } .ed-cm:hover{ border-color:#c7d4e6; } .ed-cm.sel{ border-color:#1e5a9e; box-shadow:0 0 0 2px rgba(30,90,158,.16); } .ed-cm.multisel{ background:#eaf1fb; box-shadow:inset 3px 0 0 #1e5a9e; } .ed-cm-bulk{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#1e5a9e; color:#fff; border-radius:7px; padding:6px 9px; font-size:.78rem; font-weight:600; margin-bottom:4px; } .ed-cm-bulk select{ padding:2px 5px; border-radius:6px; border:none; font:inherit; font-size:.72rem; } .ed-cm-h{ display:flex; align-items:center; gap:6px; font-size:.74rem; color:#64748b; margin-bottom:4px; flex-wrap:wrap; } .ed-cm-pg{ font-weight:700; color:#1e5a9e; } .ed-cm-ty{ text-transform:uppercase; letter-spacing:.03em; font-weight:600; } .ed-cm-ai{ background:#e8f0fc; color:#1e5a9e; border-radius:4px; padding:0 5px; font-weight:700; } .ed-cm-sev{ width:9px; height:9px; border-radius:50%; display:inline-block; } .ed-cm-sev.high{ background:#e11d48; } .ed-cm-sev.medium{ background:#f59e0b; } .ed-cm-sev.low{ background:#94a3b8; } .ed-cm-txt{ width:100%; box-sizing:border-box; border:1px solid #e5e9f0; border-radius:6px; padding:5px 6px; font:inherit; font-size:.8rem; color:#1f2937; resize:vertical; min-height:34px; } .ed-cm-txt:focus{ outline:none; border-color:#1e5a9e; } .ed-cm-ic{ width:16px; height:16px; flex-shrink:0; } /* Compacte kaart voor vormen/lijnen/figuren zonder tekst: alleen de kop (+symbool); tekstveld, auteur/datum en de voet verschijnen pas bij hover of selectie. */ .ed-cm.compact{ padding:4px 8px; } .ed-cm.compact .ed-cm-h{ margin-bottom:0; } .ed-cm.compact .ed-cm-txt{ margin-top:5px; min-height:30px; } /* :focus-within: het veld mag NIET verdwijnen terwijl je erin typt maar de muis net buiten de kaart schuift (anders verliest de textarea focus midden in een zin). */ .ed-cm.compact:not(.sel):not(:hover):not(:focus-within) > .ed-cm-meta, .ed-cm.compact:not(.sel):not(:hover):not(:focus-within) > .ed-cm-txt, .ed-cm.compact:not(.sel):not(:hover):not(:focus-within) > .ed-cm-foot{ display:none; } .ed-el.ed-flash{ animation:edFlash 1.3s ease-out; } @keyframes edFlash{ 0%,100%{ box-shadow:0 0 0 0 rgba(30,90,158,0); } 25%{ box-shadow:0 0 0 4px rgba(30,90,158,.55); } 60%{ box-shadow:0 0 0 3px rgba(30,90,158,.3); } } /* Eigenschappen-/geometrie-inspector (PDF-XChange-achtige Properties-pane) */ /* Editor is een LICHT thema — forceer lichte UA-formulierbesturing zodat inputs/ selects/color-pickers in OS-dark-mode niet zwart-op-zwart renderen. */ #edWork, #edDrop{ color-scheme:light; } /* Zonder document: alleen het sleepvak in het werkgebied, geen leeg canvas en geen lege miniaturenkolom. */ #edWork.leeg #edStageWrap, #edWork.leeg #edSidebar, #edWork.leeg #edInspect, #edWork.leeg #edTabs{ display:none !important; } #edWork.leeg #edDrop{ margin:26px auto; max-width:640px; } #edWork:not(.leeg) #edDrop{ display:none; } /* Zonder document is er niets om op toe te passen. De werkbalk blijft staan — je ziet meteen wat de tool kan — maar hij is inert, want een knop die je kunt indrukken en die niets doet is erger dan een knop die duidelijk nog niet aan de beurt is. */ #edWork.leeg #edToolbar{ opacity:.45; pointer-events:none; user-select:none; } #edInspect{ width:230px; flex-shrink:0; max-height:660px; display:flex; flex-direction:column; border:1px solid #e5e9f0; border-radius:9px; background:#fbfcfe; overflow:hidden; } #edBookmarks{ width:230px; flex-shrink:0; max-height:660px; display:flex; flex-direction:column; border:1px solid #e5e9f0; border-radius:9px; background:#fbfcfe; overflow:hidden; } #edBmHead{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; border-bottom:1px solid #eef2f7; font-size:.84rem; color:#334155; } #edBmHead #edBmCount{ background:#1e5a9e; color:#fff; border-radius:999px; padding:0 7px; font-size:.72rem; } #edBmAdd{ padding:2px 7px; font-size:.72rem; } #edBmList{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:4px; } #edBmList .ed-bm-empty{ padding:14px 8px; text-align:center; color:#94a3b8; font-size:.78rem; } .ed-bm{ display:flex; align-items:center; gap:6px; padding:5px 7px; background:#fff; border:1px solid #eef2f7; border-radius:7px; } .ed-bm:hover{ border-color:#bcd3ee; background:#f5f9ff; } .ed-bm .ed-bm-t{ flex:1; min-width:0; font-size:.8rem; color:#0f172a; border:0; background:transparent; font:inherit; padding:1px 2px; cursor:pointer; } .ed-bm .ed-bm-t:focus{ outline:1px solid #bcd3ee; border-radius:4px; background:#fff; cursor:text; } .ed-bm .ed-bm-pg{ font-size:.72rem; color:#64748b; white-space:nowrap; cursor:pointer; } .ed-bm .ed-bm-del{ border:0; background:transparent; color:#94a3b8; cursor:pointer; font-size:15px; line-height:1; padding:0 2px; } .ed-bm .ed-bm-del:hover{ color:#e11d48; } #edInsHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid #eef2f7; font-size:.84rem; color:#334155; } #edInsBody{ padding:10px; overflow-y:auto; } .ed-ins-sec{ font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#94a3b8; margin:0 0 8px; display:flex; justify-content:space-between; } .ed-ins-unit{ color:#cbd5e1; } .ed-ins-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .ed-ins-grid label{ display:flex; flex-direction:column; gap:3px; font-size:.72rem; color:#64748b; } .ed-ins-grid input{ width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:6px; padding:5px 6px; font:inherit; font-size:.82rem; color:#1f2937; background:#fff; } .ed-ins-grid input:focus{ outline:none; border-color:#1e5a9e; } /* Opmaak-sectie (PDF-XChange-achtige Format-pane per annotatie) */ .ed-fmt-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 7px; font-size:.74rem; color:#475569; } .ed-fmt-lab{ flex:0 0 auto; } .ed-fmt-row input[type=color]{ width:36px; height:24px; padding:0; border:1px solid #cbd5e1; border-radius:5px; background:#fff; cursor:pointer; } .ed-fmt-row select{ font:inherit; font-size:.78rem; padding:3px 6px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#1f2937; max-width:120px; } .ed-fmt-row input[type=checkbox]{ width:16px; height:16px; accent-color:#1e5a9e; } .ed-fmt-rng{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; justify-content:flex-end; } .ed-fmt-rng input[type=range]{ flex:1; min-width:44px; max-width:104px; accent-color:#1e5a9e; } .ed-fmt-val{ font-variant-numeric:tabular-nums; min-width:28px; text-align:right; color:#334155; } .ed-el.ed-underline, .ed-el.ed-strikeout{ cursor:move; }