# easy-invoice/2.4.2/assets/css/pdf-design.css

Easy Invoice – Invoice Generator, PDF Quotes & Payments, version 2.4.2. 80 lines.

- Page: https://pluginprobe.com/plugins/easy-invoice/2.4.2/code/assets/css/pdf-design.css
- Raw: https://pluginprobe.com/plugins/easy-invoice/2.4.2/raw/assets/css/pdf-design.css
- Modified: 2026-09-15T12:31:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/easy-invoice/2.4.2/code/assets/css/pdf-design.css#L10-L20`.

```css
/*
 * PDF rendering of the on-screen designs (templates/invoice-templates,
 * templates/quote-templates) through dompdf.
 *
 * dompdf implements CSS 2.1: no flexbox, no grid, no custom properties, no
 * positioned pseudo-elements. The designs share one DOM skeleton, so this
 * sheet maps the handful of flex/grid containers they all use onto table
 * layout, neutralises the decorations dompdf mishandles, and keeps blocks
 * from splitting across pages. Custom properties are resolved before the
 * markup reaches dompdf (PdfRenderer::resolveCssVariables()).
 */
/* dompdf compatibility: the shared flex/grid containers become table layout */
@page { margin: 9mm 9mm; }
body { margin: 0; }
/* The designs size everything in rem; a smaller root scales the whole sheet
   down evenly, the way print is set smaller than a screen. */
html { font-size: 13px; }
* { box-shadow: none !important; text-shadow: none !important; transition: none !important; animation: none !important; box-sizing: border-box; }
/* The designs are spaced for a screen; tighten the largest gaps so a short
   invoice stays on one page. Proportions are kept, only the scale changes. */
.template, [class*="template-"] { padding: 12px 14px !important; margin: 0 !important; max-width: none !important; width: auto !important; font-size: 13px; }
.invoice-header, .quote-header { margin-bottom: 16px !important; padding: 12px 14px !important; }
.address-section { margin: 12px 0 !important; }
.address-block { padding: 10px 12px !important; }
table.invoice-items, table.quote-items { margin: 12px 0 !important; }
table.invoice-items th, table.invoice-items td, table.quote-items th, table.quote-items td { padding: 7px 9px !important; }
.invoice-totals, .quote-totals { margin-top: 10px !important; padding: 10px 12px !important; }
.invoice-notes, .invoice-terms, .invoice-footer, .quote-notes, .quote-terms, .quote-footer { margin-top: 12px !important; padding: 10px 12px !important; }
.invoice-title, .quote-title { margin-bottom: 8px !important; }
.invoice-header, .quote-header { display: table !important; width: 100%; table-layout: fixed; }
.invoice-header > *, .quote-header > * { display: table-cell !important; vertical-align: top; }
.invoice-header > .invoice-meta, .quote-header > .quote-meta { width: 42%; text-align: right; }
.company-info { display: block !important; }
.company-info .company-logo { display: block; margin-bottom: 8px; }
.company-info .company-logo img { max-height: 60px; width: auto; }
.invoice-meta, .quote-meta { display: block !important; }
.meta-item { display: table !important; width: 100%; margin-bottom: 4px; }
.meta-item > * { display: table-cell !important; vertical-align: middle; }
.meta-item > *:first-child { white-space: nowrap; padding-right: 10px; text-align: left; }
.meta-item > *:last-child { text-align: right; white-space: nowrap; }
.address-section { display: table !important; width: 100%; table-layout: fixed; }
.address-section > * { display: table-cell !important; vertical-align: top; width: 50%; padding-right: 12px; }
.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; }
.invoice-total-row, .quote-total-row { display: table !important; width: 100%; }
.invoice-total-row > *, .quote-total-row > * { display: table-cell !important; vertical-align: middle; }
.invoice-total-row > *:last-child, .quote-total-row > *:last-child { text-align: right; white-space: nowrap; }
table.invoice-items, table.quote-items { width: 100%; border-collapse: collapse; page-break-inside: auto; }
table.invoice-items tr, table.quote-items tr { page-break-inside: avoid; }
table.invoice-items th, table.quote-items th { white-space: nowrap; }
.invoice-footer, .quote-footer, .invoice-notes, .invoice-terms, .quote-notes, .quote-terms { page-break-inside: avoid; }
.partial-payments-breakdown, .ei-signature-block { page-break-inside: avoid; }
/* Decorative pseudo elements: dompdf cannot position them, so the top accent bar
   becomes a static strip and the small underline / stripe accents are dropped. */
.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; }
.invoice-header::after, .quote-header::after, .invoice-header::before, .quote-header::before,
.invoice-meta::before, .quote-meta::before, .invoice-meta::after, .quote-meta::after,
.invoice-totals::before, .quote-totals::before, .invoice-totals::after, .quote-totals::after,
.address-block::before, .address-block::after, .company-info::before, .company-info::after,
.invoice-title::before, .invoice-title::after, .quote-title::before, .quote-title::after { display: none !important; content: none !important; }
.invoice-header, .quote-header, .invoice-meta, .quote-meta, .address-block { position: static !important; }
/* Totals: pushed right with a margin; floats behave unpredictably in dompdf */
.invoice-totals, .quote-totals { float: none !important; }
.invoice-notes, .invoice-terms, .invoice-footer, .quote-notes, .quote-terms, .quote-footer { clear: both; }
/* Cards around the whole document sometimes use overflow/transform tricks */
.template, [class*="template-"] { overflow: visible !important; transform: none !important; }
/* Gradients: dompdf paints none, so header cells fall back to the solid colour. */
.template-creative table.invoice-items th { background: var(--primary-color) !important; }
.template-modern table.quote-items th { background: var(--primary-color) !important; }
.template-corporate::before { display: none !important; }
/* The corporate masthead bleeds past the card on screen; on paper it sits inside the margin. */
.template-corporate .invoice-header { margin: 0 0 16px !important; padding: 14px 16px !important; }
.template-corporate .invoice-items th, .template-corporate .invoice-items td { padding-left: 0 !important; }
.template-elegant table.invoice-items th, .template-elegant table.invoice-items td { padding-left: 0 !important; }
.template-elegant table.invoice-items th:last-child, .template-elegant table.invoice-items td:last-child { padding-right: 0 !important; }
/* Payment position appended after the design when it does not print one */
.ei-pdf-paid { width: 55%; margin-left: 45%; margin-top: 6px; border-collapse: collapse; font-size: 13px; }
.ei-pdf-paid td { padding: 4px 8px; }
.ei-pdf-paid td.v { text-align: right; white-space: nowrap; }
.ei-pdf-paid tr.grand td { font-weight: bold; border-top: 1px solid #333; }

```