style(frontend): print styles for detail drawers (Cmd-P paper records)
This commit is contained in:
@@ -277,3 +277,85 @@
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------
|
||||
Print styles — a clean paper-record rendering of detail drawers.
|
||||
When an operator hits Cmd-P / Ctrl-P with the ClaimDrawer (or the
|
||||
future RemitDrawer) open, we strip the app chrome (sidebar, header,
|
||||
close button, skeletons, animations, dark theme), collapse the
|
||||
dialog to a static full-width block, and let its section headers +
|
||||
tables flow onto the page without internal scrolling or backdrop
|
||||
bleed. Result: a readable, ink-friendly paper trail of the claim.
|
||||
---------------------------------------------------------------------- */
|
||||
@media print {
|
||||
/* Hide the app chrome — only the drawer content matters on paper */
|
||||
aside, /* sidebar */
|
||||
header, /* app header within Layout */
|
||||
[data-print="hide"],
|
||||
button[aria-label^="Close"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Reset the dark theme for ink savings and readability */
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #000000;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #000000;
|
||||
--muted: #f5f5f5;
|
||||
--muted-foreground: #444444;
|
||||
--border: #cccccc;
|
||||
--accent: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Reset the page surface */
|
||||
body {
|
||||
background: #ffffff !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
/* Drawer becomes a static block at full width */
|
||||
[role="dialog"] {
|
||||
position: static !important;
|
||||
inset: auto !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
transform: none !important;
|
||||
background: #ffffff !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Strip backdrop + animations */
|
||||
[data-state="open"][data-radix-dialog-overlay],
|
||||
.animate-fade-in,
|
||||
.animate-shimmer,
|
||||
.animate-scan {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* Show the panel contents without internal scrolling */
|
||||
[role="dialog"] * {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Tables break gracefully */
|
||||
table {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Avoid splitting a section header from its content */
|
||||
section,
|
||||
h1, h2, h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
/* Honor reduced motion (also applies to print preview) */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user