| @@ -8,8 +8,71 @@ | ||
| 8 | 8 | * layout, neutralises the decorations dompdf mishandles, and keeps blocks |
| 9 | 9 | * from splitting across pages. Custom properties are resolved before the |
| 10 | 10 | * markup reaches dompdf (PdfRenderer::resolveCssVariables()). |
| 11 | 11 | */ |
| 12 | +/* Six of the nine designs lay themselves out on one rem spacing scale, sized | |
| 13 | + for a screen: three steps of --spacing-12 alone is 117px of air. The scale | |
| 14 | + is redeclared here for print — the resolver takes the last :root wins, and | |
| 15 | + this sheet is appended after the design — so every gap shrinks in | |
| 16 | + proportion instead of each design being hand-tuned. A six-line invoice then | |
| 17 | + ends on the page it started on. */ | |
| 18 | +:root { | |
| 19 | + --spacing-1: 0.2rem; | |
| 20 | + --spacing-2: 0.35rem; | |
| 21 | + --spacing-3: 0.5rem; | |
| 22 | + --spacing-4: 0.62rem; | |
| 23 | + --spacing-5: 0.72rem; | |
| 24 | + --spacing-6: 0.85rem; | |
| 25 | + --spacing-8: 1.05rem; | |
| 26 | + --spacing-10: 1.2rem; | |
| 27 | + --spacing-12: 1.35rem; | |
| 28 | + --spacing-16: 1.6rem; | |
| 29 | + --spacing-20: 1.8rem; | |
| 30 | + | |
| 31 | + /* Display sizes are set for a screen too: the largest heading is 2.25rem | |
| 32 | + before its line box. Compressed from the top down, so the hierarchy | |
| 33 | + survives but the masthead stops eating an inch of the page. */ | |
| 34 | + --font-size-xs: 0.7rem; | |
| 35 | + --font-size-sm: 0.8rem; | |
| 36 | + --font-size-base: 0.92rem; | |
| 37 | + --font-size-lg: 1rem; | |
| 38 | + --font-size-xl: 1.08rem; | |
| 39 | + --font-size-2xl: 1.2rem; | |
| 40 | + --font-size-3xl: 1.4rem; | |
| 41 | + --font-size-4xl: 1.6rem; | |
| 42 | +} | |
| 43 | + | |
| 44 | +/* Screen line spacing is generous; paper does not need it. A Template | |
| 45 | + Builder canvas positions every element itself, so it keeps its own. */ | |
| 46 | +.template, [class*="template-"] { line-height: 1.38 !important; } | |
| 47 | +body.easy-invoice-pdf--canvas .template, body.easy-invoice-pdf--canvas .canvas-element, | |
| 48 | +body.easy-invoice-pdf--canvas .canvas-element * { line-height: normal !important; } | |
| 49 | +table.invoice-items, table.quote-items, .invoice-totals, .quote-totals { line-height: 1.3 !important; } | |
| 50 | + | |
| 51 | +/* Headings carry screen-sized margins of their own on top of the block gaps. */ | |
| 52 | +.template h1, .template h2, .template h3, .template h4, | |
| 53 | +[class*="template-"] h1, [class*="template-"] h2, [class*="template-"] h3, [class*="template-"] h4 { margin-top: 0 !important; margin-bottom: 5px !important; } | |
| 54 | +[class*="template-"] p { margin-top: 0 !important; margin-bottom: 5px !important; } | |
| 55 | + | |
| 56 | +/* legacy sizes itself in pixels rather than the shared scale. */ | |
| 57 | +.template-legacy .invoice-header, .template-legacy .quote-header { padding: 10px 12px !important; } | |
| 58 | +.template-legacy .invoice-notes, .template-legacy .invoice-terms, | |
| 59 | +.template-legacy .quote-notes, .template-legacy .quote-terms { padding: 8px 10px !important; } | |
| 60 | +.template-legacy .address-block { padding: 8px 10px !important; margin-bottom: 6px !important; } | |
| 61 | +.template-legacy .address-section { margin-bottom: 8px !important; } | |
| 62 | +/* The inner wrappers the designs use between those blocks carry their own | |
| 63 | + screen margins; on paper the block gap above is enough. */ | |
| 64 | +.company-address, .invoice-title-section, .quote-title-section, .address-content, | |
| 65 | +.client-address, .terms-content, .notes-content, .description-content { margin-top: 0 !important; margin-bottom: 0 !important; } | |
| 66 | + | |
| 67 | +/* legacy sets its type in pixels, so the rem scale above does not reach it. */ | |
| 68 | +.template-legacy { font-size: 12px !important; } | |
| 69 | +.template-legacy table.invoice-items th, .template-legacy table.invoice-items td, | |
| 70 | +.template-legacy table.quote-items th, .template-legacy table.quote-items td { padding: 4px 7px !important; } | |
| 71 | +.template-legacy .invoice-items, .template-legacy .quote-items, | |
| 72 | +.template-legacy .invoice-totals, .template-legacy .quote-totals, | |
| 73 | +.template-legacy .invoice-notes, .template-legacy .invoice-terms { margin-top: 8px !important; } | |
| 74 | + | |
| 12 | 75 | /* dompdf compatibility: the shared flex/grid containers become table layout */ |
| 13 | 76 | @page { margin: 9mm 9mm; } |
| 14 | 77 | body { margin: 0; } |
| 15 | 78 | /* The designs size everything in rem; a smaller root scales the whole sheet |
| @@ -17,16 +80,18 @@ | ||
| 17 | 80 | html { font-size: 13px; } |
| 18 | 81 | * { box-shadow: none !important; text-shadow: none !important; transition: none !important; animation: none !important; box-sizing: border-box; } |
| 19 | 82 | /* The designs are spaced for a screen; tighten the largest gaps so a short |
| 20 | 83 | 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; } | |
| 84 | +.template, [class*="template-"] { padding: 10px 12px !important; margin: 0 !important; max-width: none !important; width: auto !important; font-size: 13px; } | |
| 85 | +.invoice-header, .quote-header { margin-bottom: 10px !important; padding: 10px 12px !important; } | |
| 86 | +.address-section { margin: 8px 0 !important; } | |
| 87 | +.address-block { padding: 8px 10px !important; } | |
| 88 | +table.invoice-items, table.quote-items { margin: 8px 0 !important; } | |
| 89 | +table.invoice-items th, table.invoice-items td, table.quote-items th, table.quote-items td { padding: 5px 8px !important; } | |
| 90 | +.invoice-totals, .quote-totals { margin-top: 8px !important; padding: 8px 10px !important; } | |
| 91 | +.invoice-notes, .invoice-terms, .invoice-footer, .quote-notes, .quote-terms, .quote-footer, | |
| 92 | +.notes-section, .terms-section, .description-section { margin-top: 8px !important; margin-bottom: 8px !important; padding: 8px 10px !important; } | |
| 93 | +.terms-section, .description-section { padding-left: 0 !important; padding-right: 0 !important; } | |
| 29 | 94 | .invoice-title, .quote-title { margin-bottom: 8px !important; } |
| 30 | 95 | .invoice-header, .quote-header { display: table !important; width: 100%; table-layout: fixed; } |
| 31 | 96 | .invoice-header > *, .quote-header > * { display: table-cell !important; vertical-align: top; } |
| 32 | 97 | .invoice-header > .invoice-meta, .quote-header > .quote-meta { width: 42%; text-align: right; } |
| @@ -33,9 +98,9 @@ | ||
| 33 | 98 | .company-info { display: block !important; } |
| 34 | 99 | .company-info .company-logo { display: block; margin-bottom: 8px; } |
| 35 | 100 | .company-info .company-logo img { max-height: 60px; width: auto; } |
| 36 | 101 | .invoice-meta, .quote-meta { display: block !important; } |
| 37 | -.meta-item { display: table !important; width: 100%; margin-bottom: 4px; } | |
| 102 | +.meta-item { display: table !important; width: 100%; margin-bottom: 3px; padding: 4px 8px !important; } | |
| 38 | 103 | .meta-item > * { display: table-cell !important; vertical-align: middle; } |
| 39 | 104 | .meta-item > *:first-child { white-space: nowrap; padding-right: 10px; text-align: left; } |
| 40 | 105 | .meta-item > *:last-child { text-align: right; white-space: nowrap; } |
| 41 | 106 | .address-section { display: table !important; width: 100%; table-layout: fixed; } |
| @@ -46,9 +111,17 @@ | ||
| 46 | 111 | .invoice-total-row > *:last-child, .quote-total-row > *:last-child { text-align: right; white-space: nowrap; } |
| 47 | 112 | table.invoice-items, table.quote-items { width: 100%; border-collapse: collapse; page-break-inside: auto; } |
| 48 | 113 | table.invoice-items tr, table.quote-items tr { page-break-inside: avoid; } |
| 49 | 114 | 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; } | |
| 115 | +/* Notes, terms and the footer are prose: keeping them atomic pushed the whole | |
| 116 | + block to a second page whenever it did not fit in what was left, leaving a | |
| 117 | + third of page one empty. They may break; a couple of lines are kept | |
| 118 | + together at each edge so a heading never ends a page on its own. */ | |
| 119 | +.invoice-footer, .quote-footer, .invoice-notes, .invoice-terms, .quote-notes, .quote-terms { page-break-inside: auto; orphans: 2; widows: 2; } | |
| 120 | +.invoice-notes h1, .invoice-notes h2, .invoice-notes h3, .invoice-notes h4, | |
| 121 | +.invoice-terms h1, .invoice-terms h2, .invoice-terms h3, .invoice-terms h4, | |
| 122 | +.quote-notes h1, .quote-notes h2, .quote-notes h3, .quote-notes h4, | |
| 123 | +.quote-terms h1, .quote-terms h2, .quote-terms h3, .quote-terms h4 { page-break-after: avoid; } | |
| 51 | 124 | .partial-payments-breakdown, .ei-signature-block { page-break-inside: avoid; } |
| 52 | 125 | /* Decorative pseudo elements: dompdf cannot position them, so the top accent bar |
| 53 | 126 | becomes a static strip and the small underline / stripe accents are dropped. */ |
| 54 | 127 | .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; } |
