/* This file controls how the page looks when printed */ @media print { /* 1. Use visibility:hidden, not display:none. This allows children to be "re-shown". */ body * { visibility: hidden; } /* 2. Explicitly "un-hide" the printable area AND ALL ITS PARENT CONTAINERS. */ /* This un-hides the chain from up to your content. */ #app, .modal-overlay, .share-modal-content, .share-modal-content fieldset, #printable-qr-area, #printable-qr-area * { visibility: visible; display: block; /* Ensure they are all block-level */ } /* 3. Reset all positioning and styling to create a clean print page */ body, #app { background: #fff !important; /* Ensure white background */ } .modal-overlay { position: static; background: none; padding: 0; } .modal-content, .share-modal-content { box-shadow: none; border: none; width: 100%; max-width: 100%; padding: 0; } /* 4. Position the printable area at the top */ #printable-qr-area { position: absolute; left: 0; top: 0; width: 100%; padding: 20px; color: #000; text-align: center; /* Center all content */ } /* 5. Hide the elements inside the modal that we DON'T want to print */ .share-warning, .modal-actions, .qr-actions, .share-link-group .btn-copy { visibility: hidden !important; /* Hide buttons and warnings */ display: none !important; /* Also remove from layout */ } /* 6. Style the elements we DO want to print */ #printable-qr-area h2, #printable-qr-area .share-info { text-align: center; color: #000; } #printable-qr-area #qr-code-container { padding: 0; margin-top: 1rem; margin-bottom: 1rem; } #printable-qr-area #qr-code-container img { width: 250px; /* Make QR code larger for printing */ height: 250px; padding: 0; border-radius: 0; margin: 0 auto; /* Center the QR code */ } #printable-qr-area .share-link-group input { border: none; width: 100%; font-size: 1rem; color: #000; text-align: center; /* Center the link text */ } }