/** * COB PDF-viewer — styling voor de PDF.js-preview + leesweergave op * documentpagina's. Klassen die pas na JS-render bestaan staan in de * WP Rocket RUCSS-safelist (functions/fix/wp-rocket-pdfjs.php). */ .cob-pdf-viewer-active { display: flex; flex-direction: column; height: 800px; background: #f3f4f6; } /* ====== Leesweergave: schermvullend BINNEN de site ====== Container wordt via JS naar verplaatst (portal) met z-index onder --cob-z-chatbot: COBot blijft rechtsonder bruikbaar. Esc of de knop sluit. Het hoofdmenu (#mega-menu, sticky 72px) blijft zichtbaar: JS zet --cob-pdf-reader-top op de gemeten menuhoogte zodat de leesweergave er precies onder aansluit (0 als het menu er niet is). */ .cob-pdf-viewer-active.cob-pdf-reader { position: fixed; inset: 0; top: var(--cob-pdf-reader-top, 0px); height: calc(100vh - var(--cob-pdf-reader-top, 0px)); height: calc(100dvh - var(--cob-pdf-reader-top, 0px)); border-radius: 0; background: #e8eae6; } body.cob-pdf-noscroll { overflow: hidden; } /* Chat-dock: chatvenster open op breed scherm → PDF schuift mee naar links */ .cob-pdf-viewer-active.cob-pdf-reader.cob-pdf-chat-open .cob-pdf-scroll { padding-right: 460px; } /* ====== Toolbar / kopbalk ====== */ .cob-pdf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #ffffff; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; position: relative; /* anker voor de uitklappende zoekbalk (mobiel) */ } .cob-pdf-reader .cob-pdf-toolbar { padding: 0.625rem 1rem; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); } .cob-pdf-toolbar-group { display: flex; align-items: center; gap: 0.375rem; min-width: 0; } .cob-pdf-toolbar-left { flex: 1 1 auto; gap: 0.75rem; } /* Documenttitel: alleen zichtbaar in de leesweergave */ .cob-pdf-viewer-active .cob-pdf-title { display: none; font-weight: 600; color: #1f2937; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; border-left: 3px solid #9bbe32; /* COB-groen accent */ padding-left: 0.625rem; } .cob-pdf-viewer-active.cob-pdf-reader .cob-pdf-title { display: block; } .cob-pdf-viewer-active .cob-pdf-toolbar-sep { width: 1px; height: 1.25rem; background: #e5e7eb; margin: 0 0.25rem; } .cob-pdf-viewer-active .cob-pdf-pageinfo { font-size: 0.875rem; color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap; } .cob-pdf-viewer-active .cob-pdf-zoom-pct { font-size: 0.8125rem; color: #6b7280; min-width: 3em; text-align: center; font-variant-numeric: tabular-nums; } .cob-pdf-viewer-active .cob-pdf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.125rem; height: 2.125rem; padding: 0 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background: #ffffff; color: #374151; font-size: 0.8125rem; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .cob-pdf-viewer-active .cob-pdf-btn svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; } .cob-pdf-viewer-active .cob-pdf-btn:hover { background: #f3f4f6; color: #111827; } /* Leesweergave-/sluitknop: dezelfde merkkleur als de downloadknop ernaast (tw-bg-cob-brand = brand.DEFAULT), zodat de twee knoppen op de documentpagina één geheel vormen. De rest van de chatbot houdt bewust het eigen, donkerder groen. */ .cob-pdf-viewer-active .cob-pdf-reader-btn { background: #8dc63f; border-color: #8dc63f; color: #ffffff; font-weight: 600; } .cob-pdf-viewer-active .cob-pdf-reader-btn:hover { background: #78b032; /* brand.500 — donkerder, zodat hover zichtbaar blijft */ border-color: #78b032; color: #ffffff; } .cob-pdf-viewer-active .cob-pdf-btn-label { display: none; } @media (min-width: 640px) { .cob-pdf-viewer-active .cob-pdf-btn-label { display: inline; } } /* ====== Zoeken in document (alleen leesweergave) ====== Desktop (>900px): permanent invulveld als "pill" in de kopbalk, loepje ín het veld — géén losse loep-knop naast de zoomknoppen (verwarrend). Smal (≤900px): loep-knop die een volle-breedte zoekbalk onder de kopbalk uitklapt. */ .cob-pdf-search { display: none; align-items: center; } .cob-pdf-reader .cob-pdf-search { display: flex; margin-right: 0.625rem; /* ademruimte t.o.v. de zoomknoppen */ } .cob-pdf-search-bar { display: none; align-items: center; gap: 0.125rem; height: 2.125rem; padding: 0 0.25rem 0 0.625rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .cob-pdf-search-bar:focus-within { border-color: #9bbe32; box-shadow: 0 0 0 2px rgba(155, 190, 50, 0.35); } .cob-pdf-viewer-active .cob-pdf-search-icon { display: inline-flex; color: #9ca3af; flex: 0 0 auto; } .cob-pdf-viewer-active .cob-pdf-search-icon svg { width: 1rem; height: 1rem; } .cob-pdf-viewer-active .cob-pdf-search-input { width: 11rem; height: 100%; padding: 0 0.5rem 0 0.375rem; border: 0; outline: none; font-size: 0.875rem; color: #111827; background: transparent; transition: width 0.15s ease; } .cob-pdf-search.cob-pdf-search-active .cob-pdf-search-input, .cob-pdf-viewer-active .cob-pdf-search-input:focus { width: 13rem; } /* Native wis-kruisje van type=search uit: we hebben een eigen wisknop */ .cob-pdf-viewer-active .cob-pdf-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .cob-pdf-viewer-active .cob-pdf-search-count { font-size: 0.8125rem; color: #6b7280; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0.25rem; } /* Nav-/wisknoppen: ghost-stijl bínnen de pill, pas zichtbaar bij een zoekterm */ .cob-pdf-viewer-active .cob-pdf-search-navbtn { display: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 0.375rem; background: transparent; color: #6b7280; cursor: pointer; padding: 0; } .cob-pdf-viewer-active .cob-pdf-search-navbtn svg { width: 1rem; height: 1rem; } .cob-pdf-viewer-active .cob-pdf-search-navbtn:hover { background: #f3f4f6; color: #111827; } .cob-pdf-search.cob-pdf-search-active .cob-pdf-search-prev, .cob-pdf-search.cob-pdf-search-active .cob-pdf-search-next, .cob-pdf-search.cob-pdf-search-active .cob-pdf-search-close, .cob-pdf-search.cob-pdf-search-hasterm .cob-pdf-search-close { display: inline-flex; } /* Trefferhighlights in de tekstlaag (tekst zelf blijft transparant boven het canvas) */ .cob-pdf-page .textLayer .cob-pdf-search-hit { background: rgba(255, 213, 79, 0.5); border-radius: 2px; color: transparent; } .cob-pdf-page .textLayer .cob-pdf-search-current { background: rgba(155, 190, 50, 0.65); box-shadow: 0 0 0 2px rgba(129, 162, 8, 0.55); } /* Desktop: permanent invulveld, geen losse loep-knop */ @media (min-width: 901px) { .cob-pdf-reader .cob-pdf-search .cob-pdf-search-toggle { display: none; } .cob-pdf-reader .cob-pdf-search .cob-pdf-search-bar { display: flex; } } /* Smal: loep-knop klapt volle-breedte zoekbalk onder de kopbalk uit */ @media (max-width: 900px) { .cob-pdf-search.cob-pdf-search-open .cob-pdf-search-toggle { display: none; } .cob-pdf-search.cob-pdf-search-open .cob-pdf-search-bar { display: flex; position: absolute; left: 0; right: 0; top: 100%; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; height: 2.5rem; padding: 0 0.5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); z-index: 5; } .cob-pdf-search.cob-pdf-search-open .cob-pdf-search-input { flex: 1 1 auto; width: auto; } /* Smal + open: wisknop altijd tonen (sluit tevens de balk) */ .cob-pdf-search.cob-pdf-search-open .cob-pdf-search-close { display: inline-flex; } } /* ====== Scroll-gebied en pagina's ====== */ .cob-pdf-scroll { flex: 1 1 auto; overflow-y: auto; /* Horizontaal alleen scrollen bij inzoomen (.cob-pdf-zoomed via JS): op fit-width kan een klassieke verticale scrollbalk anders een paar pixels horizontale overflow veroorzaken. */ overflow-x: hidden; scrollbar-gutter: stable; padding: 0.75rem; } .cob-pdf-scroll.cob-pdf-zoomed { overflow-x: auto; } .cob-pdf-reader .cob-pdf-scroll { padding: 1.25rem; } /* Maat (width/height) wordt per pagina in pixels gezet door cob-pdf-viewer.js — exact gelijk aan canvas én tekstlaag, anders drijft tekstselectie af. */ .cob-pdf-page { position: relative; margin: 0 auto 0.75rem; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .cob-pdf-reader .cob-pdf-page { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); margin-bottom: 1rem; } .cob-pdf-page canvas { display: block; } .cob-pdf-page-highlight { outline: 3px solid #9bbe32; /* COB-groen */ outline-offset: 2px; transition: outline-color 0.3s ease; } /* Sectiekop-highlight: korte pulse-animatie over de gevonden kopregel */ .cob-pdf-sec-flash { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 4; border-radius: 4px; animation: cobPdfSecFlash 3.2s ease-out forwards; } @keyframes cobPdfSecFlash { 0% { background: rgba(155, 190, 50, 0); box-shadow: none; } 12% { background: rgba(155, 190, 50, 0.45); box-shadow: 0 0 0 4px rgba(155, 190, 50, 0.25); } 45% { background: rgba(155, 190, 50, 0.35); box-shadow: 0 0 0 4px rgba(155, 190, 50, 0.18); } 100% { background: rgba(155, 190, 50, 0); box-shadow: none; } } .cob-pdf-fallback-iframe { width: 100%; height: 100%; border: 0; } /* ====== PDF.js-tekstlaag (selecteerbare tekst over het canvas) ====== */ .cob-pdf-page .textLayer { position: absolute; left: 0; top: 0; overflow: hidden; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; } .cob-pdf-page .textLayer span, .cob-pdf-page .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; } .cob-pdf-page .textLayer ::selection { background: rgba(155, 190, 50, 0.35); } /* Auto-gedetecteerde URL's in de tekstlaag (klikbaar, glyphs komen van het canvas) */ .cob-pdf-page .textLayer .cob-pdf-textlink { color: transparent; cursor: pointer; pointer-events: auto; } .cob-pdf-page .textLayer .cob-pdf-textlink:hover { background: rgba(155, 190, 50, 0.18); box-shadow: 0 2px 0 rgba(155, 190, 50, 0.6); } /* ====== Linklaag: klikbare gebieden uit de PDF-annotaties ====== */ .cob-pdf-linklayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .cob-pdf-link { position: absolute; display: block; pointer-events: auto; border-radius: 2px; } .cob-pdf-link:hover { background: rgba(155, 190, 50, 0.18); box-shadow: 0 0 0 2px rgba(155, 190, 50, 0.35); } /* ====== Responsive (tablet/mobiel): PDF vult de volle breedte ====== */ @media (max-width: 900px) { .cob-pdf-viewer-active.cob-pdf-reader .cob-pdf-scroll { padding: 0.5rem 0.375rem; } .cob-pdf-reader .cob-pdf-page { margin-bottom: 0.5rem; } } @media (max-width: 640px) { .cob-pdf-toolbar { padding: 0.375rem 0.5rem; gap: 0.25rem; } .cob-pdf-viewer-active .cob-pdf-title { font-size: 0.8125rem; border-left-width: 2px; padding-left: 0.375rem; } .cob-pdf-viewer-active .cob-pdf-pageinfo { font-size: 0.75rem; } .cob-pdf-viewer-active .cob-pdf-zoom-pct { display: none; /* zoomen kan nog; het percentage is op mobiel ruis */ } .cob-pdf-toolbar-left { flex: 1 1 0; overflow: hidden; gap: 0.375rem; } .cob-pdf-viewer-active .cob-pdf-title { max-width: 40vw; } .cob-pdf-viewer-active .cob-pdf-btn { min-width: 2rem; height: 2rem; padding: 0 0.375rem; } .cob-pdf-viewer-active .cob-pdf-toolbar-sep { display: none; } .cob-pdf-scroll { padding: 0.375rem; } .cob-pdf-viewer-active { height: 70vh; min-height: 420px; /* ingebedde preview niet schermvullend op mobiel */ } .cob-pdf-viewer-active.cob-pdf-reader { height: 100vh; height: 100dvh; min-height: 0; } }