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

Easy Invoice – Invoice Generator, PDF Quotes & Payments, version 2.4.3. 153 lines.

- Page: https://pluginprobe.com/plugins/easy-invoice/2.4.3/code/assets/css/pdf-design.css
- Raw: https://pluginprobe.com/plugins/easy-invoice/2.4.3/raw/assets/css/pdf-design.css
- Modified: 2026-09-29T06:14:16+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.3/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()).
 */
/* Six of the nine designs lay themselves out on one rem spacing scale, sized
   for a screen: three steps of --spacing-12 alone is 117px of air. The scale
   is redeclared here for print — the resolver takes the last :root wins, and
   this sheet is appended after the design — so every gap shrinks in
   proportion instead of each design being hand-tuned. A six-line invoice then
   ends on the page it started on. */
:root {
    --spacing-1: 0.2rem;
    --spacing-2: 0.35rem;
    --spacing-3: 0.5rem;
    --spacing-4: 0.62rem;
    --spacing-5: 0.72rem;
    --spacing-6: 0.85rem;
    --spacing-8: 1.05rem;
    --spacing-10: 1.2rem;
    --spacing-12: 1.35rem;
    --spacing-16: 1.6rem;
    --spacing-20: 1.8rem;

    /* Display sizes are set for a screen too: the largest heading is 2.25rem
       before its line box. Compressed from the top down, so the hierarchy
       survives but the masthead stops eating an inch of the page. */
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 0.92rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.08rem;
    --font-size-2xl: 1.2rem;
    --font-size-3xl: 1.4rem;
    --font-size-4xl: 1.6rem;
}

/* Screen line spacing is generous; paper does not need it. A Template
   Builder canvas positions every element itself, so it keeps its own. */
.template, [class*="template-"] { line-height: 1.38 !important; }
body.easy-invoice-pdf--canvas .template, body.easy-invoice-pdf--canvas .canvas-element,
body.easy-invoice-pdf--canvas .canvas-element * { line-height: normal !important; }
table.invoice-items, table.quote-items, .invoice-totals, .quote-totals { line-height: 1.3 !important; }

/* Headings carry screen-sized margins of their own on top of the block gaps. */
.template h1, .template h2, .template h3, .template h4,
[class*="template-"] h1, [class*="template-"] h2, [class*="template-"] h3, [class*="template-"] h4 { margin-top: 0 !important; margin-bottom: 5px !important; }
[class*="template-"] p { margin-top: 0 !important; margin-bottom: 5px !important; }

/* legacy sizes itself in pixels rather than the shared scale. */
.template-legacy .invoice-header, .template-legacy .quote-header { padding: 10px 12px !important; }
.template-legacy .invoice-notes, .template-legacy .invoice-terms,
.template-legacy .quote-notes, .template-legacy .quote-terms { padding: 8px 10px !important; }
.template-legacy .address-block { padding: 8px 10px !important; margin-bottom: 6px !important; }
.template-legacy .address-section { margin-bottom: 8px !important; }
/* The inner wrappers the designs use between those blocks carry their own
   screen margins; on paper the block gap above is enough. */
.company-address, .invoice-title-section, .quote-title-section, .address-content,
.client-address, .terms-content, .notes-content, .description-content { margin-top: 0 !important; margin-bottom: 0 !important; }

/* legacy sets its type in pixels, so the rem scale above does not reach it. */
.template-legacy { font-size: 12px !important; }
.template-legacy table.invoice-items th, .template-legacy table.invoice-items td,
.template-legacy table.quote-items th, .template-legacy table.quote-items td { padding: 4px 7px !important; }
.template-legacy .invoice-items, .template-legacy .quote-items,
.template-legacy .invoice-totals, .template-legacy .quote-totals,
.template-legacy .invoice-notes, .template-legacy .invoice-terms { margin-top: 8px !important; }

/* 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: 10px 12px !important; margin: 0 !important; max-width: none !important; width: auto !important; font-size: 13px; }
.invoice-header, .quote-header { margin-bottom: 10px !important; padding: 10px 12px !important; }
.address-section { margin: 8px 0 !important; }
.address-block { padding: 8px 10px !important; }
table.invoice-items, table.quote-items { margin: 8px 0 !important; }
table.invoice-items th, table.invoice-items td, table.quote-items th, table.quote-items td { padding: 5px 8px !important; }
.invoice-totals, .quote-totals { margin-top: 8px !important; padding: 8px 10px !important; }
.invoice-notes, .invoice-terms, .invoice-footer, .quote-notes, .quote-terms, .quote-footer,
.notes-section, .terms-section, .description-section { margin-top: 8px !important; margin-bottom: 8px !important; padding: 8px 10px !important; }
.terms-section, .description-section { padding-left: 0 !important; padding-right: 0 !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: 3px; padding: 4px 8px !important; }
.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; }
/* Notes, terms and the footer are prose: keeping them atomic pushed the whole
   block to a second page whenever it did not fit in what was left, leaving a
   third of page one empty. They may break; a couple of lines are kept
   together at each edge so a heading never ends a page on its own. */
.invoice-footer, .quote-footer, .invoice-notes, .invoice-terms, .quote-notes, .quote-terms { page-break-inside: auto; orphans: 2; widows: 2; }
.invoice-notes h1, .invoice-notes h2, .invoice-notes h3, .invoice-notes h4,
.invoice-terms h1, .invoice-terms h2, .invoice-terms h3, .invoice-terms h4,
.quote-notes h1, .quote-notes h2, .quote-notes h3, .quote-notes h4,
.quote-terms h1, .quote-terms h2, .quote-terms h3, .quote-terms h4 { page-break-after: 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; }

```