gsadmin/pad
1
0
Fork 0
mirror of https://github.com/PerpetualSoftware/pad.git synced 2026-09-21 18:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): add base @media print stylesheet for workspace layout (TASK-621) (#152)

Browse Source 
Tune Ctrl/Cmd+P output so Pad pages can be saved as clean PDFs. This is the
first of four tasks under PLAN-620 (Print-friendly item detail pages) and
handles the layout-level chrome: hides the sidebar, top bar, floating expand
toggles, toasts, command palette, modals, and any [data-print-hide] opt-in
element; unlocks the 100vh / overflow:hidden app shell so content flows
across pages; forces a light color palette regardless of theme; strips
shadows and background images; sets a default 0.75in @page margin.

Item-level formatting (title, properties, markdown body), the rendered
print header / footer, and the child-item checklist ship in TASK-622,
TASK-623, and TASK-624 respectively.

Parent: PLAN-620.
This commit is contained in:
xarmian
2026-04-18 14:59:08 -04:00
committed by GitHub
parent f6aa70efb3
commit e81da7a24f
1 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app.css
+98
View File
@@ -275,3 +275,101 @@ input:focus, textarea:focus {
}
}
/* ============================================================================
Print styles (PLAN-620 / TASK-621).
Tune Ctrl/Cmd+P output so users can save any Pad page as a clean PDF.
This file handles LAYOUT-LEVEL concerns:
- hide the workspace chrome (sidebar, top bar, modals, floating UI)
- force a light color palette regardless of the active theme
- unlock the fixed 100vh / overflow:hidden app shell so content flows
across pages in the print preview
Item-level formatting (title, properties block, markdown body, header /
footer rules, child-item checklist) is layered on top in tasks 622–624.
============================================================================ */
@media print {
/* Force a light color palette for print regardless of the active theme.
We only need to pin the color variables; spacing / radii stay. */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #ffffff;
--bg-tertiary: #f5f5f5;
--bg-hover: transparent;
--bg-active: transparent;
--text-primary: #000000;
--text-secondary: #222222;
--text-muted: #555555;
--border: #cccccc;
--border-subtle: #dddddd;
}
html, body {
height: auto;
background: #ffffff !important;
color: #000000 !important;
font-size: 11pt;
}
/* Unlock the screen shell — it uses height: 100vh / overflow: hidden
to keep the sidebar + main column pinned. In print we need the
content to flow naturally across pages. */
.app-layout,
.app-shell {
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.main-content {
flex: none !important;
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}
/* Hide the workspace chrome. */
.sidebar,
.topbar,
.sidebar-expand-btn,
.topbar-expand-btn,
.mobile-header,
.hamburger,
.toast-container,
.overlay,
.palette,
.modal,
.modal-backdrop {
display: none !important;
}
/* Modals / dialogs / tooltips. Most KeyboardShortcuts-style overlays
carry role="dialog" on the backdrop. */
[role="dialog"],
[role="tooltip"],
[role="menu"] {
display: none !important;
}
/* Opt-in: any element tagged with data-print-hide disappears in print.
Components can use this to strip interactive affordances (edit buttons,
status pickers, hover cards, etc.) without needing a new CSS rule. */
[data-print-hide] {
display: none !important;
}
/* Strip decorative shadows, gradients, and background images. */
* {
box-shadow: none !important;
text-shadow: none !important;
background-image: none !important;
}
/* Sensible default page margins. Task 623 refines this with @page
at-rules + a rendered header / footer. */
@page {
margin: 0.75in;
}
}