/** * GRIP - Print stylesheet * * Werkt samen met devices.js > printDeviceOverview(): die voegt een * .print-container direct onder in met een zelfgeschreven header * en een kloon van de devices-tabel. Tijdens @media print wordt alles * buiten die container verborgen. */ /* Op scherm volledig onzichtbaar (inclusief ruimte innemen). */ .print-container { display: none; } @media print { @page { size: A4; margin: 14mm 12mm 16mm 12mm; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } html, body { background: #fff !important; color: #000 !important; font-size: 10pt; margin: 0 !important; padding: 0 !important; } /* Tijdens print: alleen onze print-container tonen. */ body > *:not(.print-container) { display: none !important; } .print-container { display: block !important; width: 100%; margin: 0; padding: 0; } /* Conflict-mitigatie met mfa.css:539: die zet `body * { visibility: hidden }` voor de MFA-recovery-codes-print-flow. Dat raakt OOK de kinderen van onze .print-container, waardoor het devices-overzicht witte pagina's oplevert. Expliciet visibility terugzetten op alles binnen onze container. */ .print-container, .print-container * { visibility: visible !important; } .print-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6mm; border-bottom: 1pt solid #000; padding-bottom: 4mm; } .print-header-brand { display: flex; align-items: center; gap: 6mm; } .print-header-logo { height: 14mm; width: auto; } .print-header-title h1 { margin: 0 0 1mm 0; font-size: 14pt; font-weight: 600; } .print-header-title .print-subtitle { font-size: 10pt; color: #333 !important; } .print-header-meta { text-align: right; font-size: 9pt; line-height: 1.35; } .print-filter-summary { margin: 0 0 5mm 0; font-size: 9pt; color: #333 !important; } .print-filter-summary strong { color: #000 !important; } /* Tabel: pas in breedte, herhaal thead op elke pagina. */ .print-container table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt; } /* Override van .devices-overview-table (style.css:1300) — die forceert table-layout: fixed + width: max-content + nowrap voor de live grid. Op A4 levert dat content buiten de pagina op (witte pagina's). Voor print laten we de browser de kolommen schalen en lange waardes wrappen. */ .print-container table.devices-overview-table { table-layout: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .print-container table.devices-overview-table col { width: auto !important; } .print-container table.devices-overview-table th, .print-container table.devices-overview-table td { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; } .print-container table thead { display: table-header-group; } .print-container table tbody tr { page-break-inside: avoid; break-inside: avoid; } .print-container table th, .print-container table td { border: 0.5pt solid #666 !important; padding: 1.5mm 2mm !important; vertical-align: top; word-break: break-word; } .print-container table thead th { background: #eee !important; font-weight: 600; color: #000 !important; } /* Verberg selectie-kolom (eerste) en acties-kolom (laatste). */ .print-container table thead th:first-child, .print-container table tbody td:first-child, .print-container table thead th:last-child, .print-container table tbody td:last-child { display: none !important; } /* Sorteer-iconen in thead niet mee-printen. */ .print-container .sort-icon, .print-container .th-sort-icon { display: none !important; } /* Status-badges als outline i.p.v. fill — leesbaar in zwart-wit. */ .print-container .badge { border: 0.5pt solid #000 !important; background: transparent !important; color: #000 !important; padding: 0.5mm 1.5mm !important; font-weight: normal; } /* Inline actieknoppen per rij verbergen (acties-kolom is al verborgen, maar voor de zekerheid eventuele losse knop-inhoud ook). */ .print-container .btn, .print-container input[type="checkbox"] { display: none !important; } /* Voorkom dat links blauw worden afgedrukt. */ .print-container a, .print-container a:visited { color: #000 !important; text-decoration: none !important; } .print-footer { margin-top: 6mm; padding-top: 3mm; border-top: 0.5pt solid #666; font-size: 8pt; color: #666 !important; text-align: center; } }