/* * Global print stylesheet. * * The app is a single-page shell: #main holds the nav rails and #app-space, * and #app-space holds one #application-body- per app with only the * active one carrying .state-on. Printing that raw gives the whole chrome * plus, worse, ONE page — every shell container is a fixed-height * overflow:auto scroll box, and a scroll box prints only what's visible. * * So this sheet does three jobs, in order of how much they matter: * 1. unlock the scroll containers so a long document paginates at all; * 2. hide the chrome (nav, header, toolbars, modals, inactive app bodies); * 3. flatten the screen styling to something that reads on paper. * * Linked with media="print" from partials/kikaron_stylesheets.html, so it * costs a screen render nothing. * * Not covered here: a PDF preview. That's pdf.js canvases behind a * virtualiser, so only near-viewport pages exist in the DOM — the toolbar * Print button routes those to the real PDF instead (see pat-print.js). */ @media print { /* ---- 1. unlock the shell's scroll containers ------------------------ * * Named explicitly rather than with a universal selector: a blanket * position:static would also break the pdf.js .textLayer overlay and * every sticky/absolute thing inside the document body itself. */ html, body, #main, #app-space, .application-body, .app-content, .document-content, .document-body, [id^="document-body-"], [id^="document-content-"], .quaive-document, .kik-document, .quaive-page-modules, .page-module, .pat-well { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; position: static !important; display: block !important; float: none !important; transform: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* ---- 2. hide the chrome --------------------------------------------- */ /* Shell furniture. */ #global-header, #global-nav-side, .global-nav-side, .cloud-nav-rail, #mobile-menu, #kik-pac-launcher, #pat-modal-panel-space, .modal-space, #error-zone, #tabs-bar, .tabs-bar, .pat-tabs, .quaive-sidebar, .sidebar, .app-sidebar, .kik-dock, .pwa-install-banner, .push-subscribe, .offline-state, .ink-theme-suggest, .context-menu-popover, [popover] { display: none !important; } /* Only the app the user is actually looking at. * * ``.state-on`` is NOT that: the shell is multi-tasking, so EVERY app the * user has opened keeps it, and printing on that alone emits the current * document followed by a run of pages from whatever else is still open. * Which app is *active* lives on the parent — ``#app-space.active-app-`` * — and CSS can't match that class against a child's id. * * So pat-print.js resolves it on ``beforeprint`` and stamps the answer on * as ``data-kik-print``, with ``.kik-print-active`` on the one body * to keep. Enumerating all ~45 slugs in CSS instead would work today and * silently rot the next time an app is added. */ html[data-kik-print="app"] .application-body:not(.kik-print-active), html[data-kik-print="portal"] .application-body { display: none !important; } /* The dashboard sits behind the apps: drop it when an app is what's being * printed, keep it when it IS what's being printed. */ html[data-kik-print="app"] #portal { display: none !important; } /* No-JS fallback: without the stamp, fall back to hiding everything that * isn't even open. Worse than the real rule (open-but-inactive apps still * print) but far better than all 45 bodies. */ html:not([data-kik-print]) .application-body:not(.state-on) { display: none !important; } /* Toolbars: keep the title (the markdown and attachment viewers put the * document's name there and nowhere else), drop every control. */ .pat-toolbar { position: static !important; border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; } .pat-toolbar .toolbar-area.functions, .pat-toolbar .toolbar-section.navigation > *:not(.toolbar-title), .pat-toolbar .pat-assistive-element { display: none !important; } .toolbar-title { font-size: 1.6rem !important; font-weight: 700 !important; margin: 0 0 1rem !important; padding: 0 !important; text-align: left !important; } /* Interactive leftovers that carry no information on paper. */ .pat-button, .pat-button-bar, button, .pat-checklist-toggle, .comment-form, .pat-autosubmit, .breadcrumbs, .pat-breadcrumbs, .pagination, .pat-pager, .lazy-load, .pat-lazy-load, video, audio, iframe.collabora-editor-frame { display: none !important; } /* ---- 3. make it read on paper --------------------------------------- */ @page { margin: 15mm; } html, body { background: #fff !important; color: #000 !important; font-size: 11pt !important; line-height: 1.45 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* The shell sets user-select:none on the chrome; irrelevant on paper but * some engines dim non-selectable text. */ * { -webkit-user-select: auto !important; user-select: auto !important; } .pat-rich, .quaive-document, .kik-document { max-width: none !important; color: #000 !important; } .pat-rich a, .pat-rich a:visited { color: #000 !important; text-decoration: underline !important; } /* Spell out real destinations, but only for external links inside the * document body — in-app hrefs are opaque ids and just add noise. */ .pat-rich a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 85%; word-break: break-all; } img, svg, figure, .quaive-illustration { max-width: 100% !important; height: auto !important; page-break-inside: avoid; break-inside: avoid; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; break-after: avoid; color: #000 !important; } p, li, blockquote, tr, figure, pre { page-break-inside: avoid; break-inside: avoid; orphans: 3; widows: 3; } table { border-collapse: collapse !important; width: 100% !important; } th, td { border: 1px solid #999 !important; padding: 4px 6px !important; } thead { display: table-header-group; } pre, code { white-space: pre-wrap !important; word-wrap: break-word !important; border: 1px solid #ccc !important; background: #f6f6f6 !important; } /* A PDF preview reached by ⌘P rather than the Print button: give each * rasterised page its own sheet so what DID render is at least legible. * The text overlay is transparent glyphs — pure noise on paper. */ #pdf-preview canvas { width: 100% !important; height: auto !important; page-break-after: always; break-after: page; } #pdf-preview .textLayer, #pdf-preview .pdf-link-layer { display: none !important; } }