| @@ -8,71 +8,8 @@ | ||
| 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 | - | |
| 75 | 12 | /* dompdf compatibility: the shared flex/grid containers become table layout */ |
| 76 | 13 | @page { margin: 9mm 9mm; } |
| 77 | 14 | body { margin: 0; } |
| 78 | 15 | /* The designs size everything in rem; a smaller root scales the whole sheet |
| @@ -80,18 +17,16 @@ | ||
| 80 | 17 | html { font-size: 13px; } |
| 81 | 18 | * { box-shadow: none !important; text-shadow: none !important; transition: none !important; animation: none !important; box-sizing: border-box; } |
| 82 | 19 | /* The designs are spaced for a screen; tighten the largest gaps so a short |
| 83 | 20 | invoice stays on one page. Proportions are kept, only the scale changes. */ |
| 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; } | |
| 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; } | |
| 94 | 29 | .invoice-title, .quote-title { margin-bottom: 8px !important; } |
| 95 | 30 | .invoice-header, .quote-header { display: table !important; width: 100%; table-layout: fixed; } |
| 96 | 31 | .invoice-header > *, .quote-header > * { display: table-cell !important; vertical-align: top; } |
| 97 | 32 | .invoice-header > .invoice-meta, .quote-header > .quote-meta { width: 42%; text-align: right; } |
| @@ -98,9 +33,9 @@ | ||
| 98 | 33 | .company-info { display: block !important; } |
| 99 | 34 | .company-info .company-logo { display: block; margin-bottom: 8px; } |
| 100 | 35 | .company-info .company-logo img { max-height: 60px; width: auto; } |
| 101 | 36 | .invoice-meta, .quote-meta { display: block !important; } |
| 102 | -.meta-item { display: table !important; width: 100%; margin-bottom: 3px; padding: 4px 8px !important; } | |
| 37 | +.meta-item { display: table !important; width: 100%; margin-bottom: 4px; } | |
| 103 | 38 | .meta-item > * { display: table-cell !important; vertical-align: middle; } |
| 104 | 39 | .meta-item > *:first-child { white-space: nowrap; padding-right: 10px; text-align: left; } |
| 105 | 40 | .meta-item > *:last-child { text-align: right; white-space: nowrap; } |
| 106 | 41 | .address-section { display: table !important; width: 100%; table-layout: fixed; } |
| @@ -111,17 +46,9 @@ | ||
| 111 | 46 | .invoice-total-row > *:last-child, .quote-total-row > *:last-child { text-align: right; white-space: nowrap; } |
| 112 | 47 | table.invoice-items, table.quote-items { width: 100%; border-collapse: collapse; page-break-inside: auto; } |
| 113 | 48 | table.invoice-items tr, table.quote-items tr { page-break-inside: avoid; } |
| 114 | 49 | table.invoice-items th, table.quote-items th { white-space: nowrap; } |
| 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; } | |
| 50 | +.invoice-footer, .quote-footer, .invoice-notes, .invoice-terms, .quote-notes, .quote-terms { page-break-inside: avoid; } | |
| 124 | 51 | .partial-payments-breakdown, .ei-signature-block { page-break-inside: avoid; } |
| 125 | 52 | /* Decorative pseudo elements: dompdf cannot position them, so the top accent bar |
| 126 | 53 | becomes a static strip and the small underline / stripe accents are dropped. */ |
| 127 | 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; } |
