| 1 |
/* |
| 2 |
* PDF rendering of the on-screen designs (templates/invoice-templates, |
| 3 |
* templates/quote-templates) through dompdf. |
| 4 |
* |
| 5 |
* dompdf implements CSS 2.1: no flexbox, no grid, no custom properties, no |
| 6 |
* positioned pseudo-elements. The designs share one DOM skeleton, so this |
| 7 |
* sheet maps the handful of flex/grid containers they all use onto table |
| 8 |
* layout, neutralises the decorations dompdf mishandles, and keeps blocks |
| 9 |
* from splitting across pages. Custom properties are resolved before the |
| 10 |
* markup reaches dompdf (PdfRenderer::resolveCssVariables()). |
| 11 |
*/ |
| 12 |
/* dompdf compatibility: the shared flex/grid containers become table layout */ |
| 13 |
@page { { margin: 9mm 9mm; } |
| 14 |
body { margin: 0; } |
| 15 |
/* The designs size everything in rem; a smaller root scales the whole sheet |
| 16 |
down evenly, the way print is set smaller than a screen. */ |
| 17 |
html { font-size: 13px; } |
| 18 |
* { box-shadow: none !important; text-shadow: none !important; transition: none !important; animation: none !important; box-sizing: border-box; } |
| 19 |
/* The designs are spaced for a screen; tighten the largest gaps so a short |
| 20 |
invoice stays on one page. Proportions are kept, only the scale changes. */ |
| 21 |
.template, [class*="template-"] { padding: 12px 14px !important; margin: 0 !important; max-width: none !important; width: auto !important; font-size: 13px; } |
| 22 |
.invoice-header, .quote-header { margin-bottom: 16px !important; padding: 12px 14px !important; } |
| 23 |
.address-section { margin: 12px 0 !important; } |
| 24 |
.address-block { padding: 10px 12px !important; } |
| 25 |
table.invoice-items, table.quote-items { margin: 12px 0 !important; } |
| 26 |
table.invoice-items th, table.invoice-items td, table.quote-items th, table.quote-items td { padding: 7px 9px !important; } |
| 27 |
.invoice-totals, .quote-totals { margin-top: 10px !important; padding: 10px 12px !important; } |
| 28 |
.invoice-notes, .invoice-terms, .invoice-footer, .quote-notes, .quote-terms, .quote-footer { margin-top: 12px !important; padding: 10px 12px !important; } |
| 29 |
.invoice-title, .quote-title { margin-bottom: 8px !important; } |
| 30 |
.invoice-header, .quote-header { display: table !important; width: 100%; table-layout: fixed; } |
| 31 |
.invoice-header > *, .quote-header > * { display: table-cell !important; vertical-align: top; } |
| 32 |
.invoice-header > .invoice-meta, .quote-header > .quote-meta { width: 42%; text-align: right; } |
| 33 |
.company-info { display: block !important; } |
| 34 |
.company-info .company-logo { display: block; margin-bottom: 8px; } |
| 35 |
.company-info .company-logo img { max-height: 60px; width: auto; } |
| 36 |
.invoice-meta, .quote-meta { display: block !important; } |
| 37 |
.meta-item { display: table !important; width: 100%; margin-bottom: 4px; } |
| 38 |
.meta-item > * { display: table-cell !important; vertical-align: middle; } |
| 39 |
.meta-item > *:first-child { white-space: nowrap; padding-right: 10px; text-align: left; } |
| 40 |
.meta-item > *:last-child { text-align: right; white-space: nowrap; } |
| 41 |
.address-section { display: table !important; width: 100%; table-layout: fixed; } |
| 42 |
.address-section > * { display: table-cell !important; vertical-align: top; width: 50%; padding-right: 12px; } |
| 43 |
.invoice-totals, .quote-totals { display: table !important; width: 55% !important; margin-left: 45% !important; margin-right: 0 !important; position: static !important; page-break-inside: avoid; } |
| 44 |
.invoice-total-row, .quote-total-row { display: table !important; width: 100%; } |
| 45 |
.invoice-total-row > *, .quote-total-row > * { display: table-cell !important; vertical-align: middle; } |
| 46 |
.invoice-total-row > *:last-child, .quote-total-row > *:last-child { text-align: right; white-space: nowrap; } |
| 47 |
table.invoice-items, table.quote-items { width: 100%; border-collapse: collapse; page-break-inside: auto; } |
| 48 |
table.invoice-items tr, table.quote-items tr { page-break-inside: avoid; } |
| 49 |
table.invoice-items th, table.quote-items th { white-space: nowrap; } |
| 50 |
.invoice-footer, .quote-footer, .invoice-notes, .invoice-terms, .quote-notes, .quote-terms { page-break-inside: avoid; } |
| 51 |
.partial-payments-breakdown, .ei-signature-block { page-break-inside: avoid; } |
| 52 |
/* Decorative pseudo elements: dompdf cannot position them, so the top accent bar |
| 53 |
becomes a static strip and the small underline / stripe accents are dropped. */ |
| 54 |
.template::before, [class*="template-"]::before { position: static !important; display: block !important; width: auto !important; left: auto !important; right: auto !important; top: auto !important; margin: 0 0 10px 0; border-radius: 0; } |
| 55 |
.invoice-header::after, .quote-header::after, .invoice-header::before, .quote-header::before, |
| 56 |
.invoice-meta::before, .quote-meta::before, .invoice-meta::after, .quote-meta::after, |
| 57 |
.invoice-totals::before, .quote-totals::before, .invoice-totals::after, .quote-totals::after, |
| 58 |
.address-block::before, .address-block::after, .company-info::before, .company-info::after, |
| 59 |
.invoice-title::before, .invoice-title::after, .quote-title::before, .quote-title::after { display: none !important; content: none !important; } |
| 60 |
.invoice-header, .quote-header, .invoice-meta, .quote-meta, .address-block { position: static !important; } |
| 61 |
/* Totals: pushed right with a margin; floats behave unpredictably in dompdf */ |
| 62 |
.invoice-totals, .quote-totals { float: none !important; } |
| 63 |
.invoice-notes, .invoice-terms, .invoice-footer, .quote-notes, .quote-terms, .quote-footer { clear: both; } |
| 64 |
/* Cards around the whole document sometimes use overflow/transform tricks */ |
| 65 |
.template, [class*="template-"] { overflow: visible !important; transform: none !important; } |
| 66 |
/* Gradients: dompdf paints none, so header cells fall back to the solid colour. */ |
| 67 |
.template-creative table.invoice-items th { background: var(--primary-color) !important; } |
| 68 |
.template-modern table.quote-items th { background: var(--primary-color) !important; } |
| 69 |
.template-corporate::before { display: none !important; } |
| 70 |
/* The corporate masthead bleeds past the card on screen; on paper it sits inside the margin. */ |
| 71 |
.template-corporate .invoice-header { margin: 0 0 16px !important; padding: 14px 16px !important; } |
| 72 |
.template-corporate .invoice-items th, .template-corporate .invoice-items td { padding-left: 0 !important; } |
| 73 |
.template-elegant table.invoice-items th, .template-elegant table.invoice-items td { padding-left: 0 !important; } |
| 74 |
.template-elegant table.invoice-items th:last-child, .template-elegant table.invoice-items td:last-child { padding-right: 0 !important; } |
| 75 |
/* Payment position appended after the design when it does not print one */ |
| 76 |
.ei-pdf-paid { width: 55%; margin-left: 45%; margin-top: 6px; border-collapse: collapse; font-size: 13px; } |
| 77 |
.ei-pdf-paid td { padding: 4px 8px; } |
| 78 |
.ei-pdf-paid td.v { text-align: right; white-space: nowrap; } |
| 79 |
.ei-pdf-paid tr.grand td { font-weight: bold; border-top: 1px solid #333; } |
| 80 |
|
