# easy-invoice/trunk/assets/css/document.css

Easy Invoice – Invoice Generator, PDF Quotes & Payments, version trunk. 597 lines.

- Page: https://pluginprobe.com/plugins/easy-invoice/trunk/code/assets/css/document.css
- Raw: https://pluginprobe.com/plugins/easy-invoice/trunk/raw/assets/css/document.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/trunk/code/assets/css/document.css#L10-L20`.

```css
/*
 * Public invoice / quote page — the frame around the design template.
 *
 * The design (templates/invoice-templates/*.php) carries its own styles.
 * Everything here is the chrome: action bar, panels, modal, print rules.
 */

body.easy-invoice-document {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #eaeaea;
    color: #222;
}

.ei-document {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.ei-document h1,
.ei-document h2,
.ei-document h3 {
    margin-top: 0;
}

/* ---- Notice above the actions (quote accept description) ---- */
.ei-document__notice {
    max-width: 800px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-left: 4px solid #007cba;
    border-radius: 4px;
    font-size: 0.9em;
    color: #555;
}
.ei-document__notice--expired,
.ei-document__notice--declined {
    background: #fdf3f2;
    border-left-color: #c0392b;
    color: #7a271a;
}

.ei-document__notice--accepted {
    background: #eef8f1;
    border-left-color: #1f8a4c;
    color: #14532d;
}

/* ---- Action bar ---- */
.ei-document__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.ei-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #6366f1;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.ei-btn:hover,
.ei-btn:focus-visible {
    filter: brightness(0.92);
    color: #fff;
    outline: none;
}

.ei-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

.ei-btn[disabled] {
    opacity: 0.7;
    cursor: wait;
}

.ei-btn--accept { background: #28a745; }
.ei-btn--decline { background: #dc3545; }
.ei-btn--print { background: #10b981; }
.ei-btn--pdf { background: #f59e0b; }
.ei-btn--email { background: #8b5cf6; }
.ei-btn--pay { background: #27ae60; }
.ei-btn--pay.is-open { background: #6c757d; }

.ei-btn__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ei-spin 0.8s linear infinite;
}

@keyframes ei-spin {
    to { transform: rotate(360deg); }
}

/* ---- Layout: document plus (optional) payment panel ---- */
.ei-document__layout {
    display: flex;
    gap: 32px;
}

.ei-document__content {
    flex: 1;
    min-width: 0;
    position: relative;
}

/*
 * The design is an A4 sheet: 210 × 297 mm at CSS resolution (794 × 1123 px),
 * centred, growing taller only when the document needs more than one page.
 * "Download as PDF" captures this sheet edge to edge, so the PDF page and the
 * sheet on screen are the same thing. Narrow screens let it shrink.
 */
.ei-document__content > .template,
.ei-document__content > [class*="template-"] {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ---- Designs on narrow screens ----
   The designs are laid out for an A4 sheet. Below tablet width the header
   and address grids stack, the line-item table scrolls sideways instead of
   pushing the page wider, and the totals block takes the full width. */
@media (max-width: 640px) {
    .ei-document__content .invoice-header,
    .ei-document__content .quote-header,
    .ei-document__content .address-section,
    .ei-document__content .company-info,
    .ei-document__content .invoice-title-section,
    .ei-document__content .quote-title-section {
        display: block !important;
    }
    .ei-document__content .invoice-header > *,
    .ei-document__content .quote-header > *,
    .ei-document__content .address-section > * {
        width: auto !important;
        max-width: none !important;
        margin-bottom: 16px;
        text-align: left !important;
    }
    .ei-document__content .invoice-meta,
    .ei-document__content .quote-meta {
        position: static !important;
    }
    .ei-document__content table.invoice-items,
    .ei-document__content table.quote-items {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ei-document__content table.invoice-items th,
    .ei-document__content table.quote-items th,
    .ei-document__content .item-quantity,
    .ei-document__content .item-price,
    .ei-document__content .item-total {
        white-space: nowrap;
    }
    .ei-document__content .item-title {
        white-space: normal; /* the name column gives way, the figures never break */
    }
    /* The sheet's 32-40px margins are A4 proportions; a phone needs the room for the columns. */
    .ei-document__content [class^="template-"],
    .ei-document__content [class*=" template-"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Tighter cells so a four-column table fits a phone without scrolling. */
    .ei-document__content table.invoice-items th,
    .ei-document__content table.invoice-items td,
    .ei-document__content table.quote-items th,
    .ei-document__content table.quote-items td {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 13px;
    }
    .ei-document__content table.invoice-items th:first-child,
    .ei-document__content table.invoice-items td:first-child,
    .ei-document__content table.quote-items th:first-child,
    .ei-document__content table.quote-items td:first-child {
        padding-left: 0;
    }
    .ei-document__content table.invoice-items th:last-child,
    .ei-document__content table.invoice-items td:last-child,
    .ei-document__content table.quote-items th:last-child,
    .ei-document__content table.quote-items td:last-child {
        padding-right: 0;
    }
    .ei-document__content .item-description {
        font-size: 12px;
    }
    .ei-document__content .invoice-totals,
    .ei-document__content .quote-totals {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        box-sizing: border-box; /* padded designs otherwise overflow the sheet */
    }
}

/* ---- Payment panel: slides in from the right ---- */
.ei-payment-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 450px;
    max-width: 100vw;
    height: 100vh;
    z-index: 1000;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.ei-payment-panel.is-open {
    transform: translateX(0);
}

.ei-payment-panel__close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: #333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

/* ---- Per-document CSS editor (administrators) ---- */
.ei-css-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: #fff;
    font: 600 13px/1 monospace;
    cursor: pointer;
    z-index: 2;
}

.ei-css-toggle.has-css {
    background: #10b981;
}

.ei-css-toggle.has-css::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
}

.ei-css-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    overflow-y: auto;
    box-sizing: border-box;
}

.ei-css-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.ei-css-panel__header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.ei-css-panel__close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}

.ei-css-panel__body {
    padding: 20px;
}

.ei-css-panel__body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
}

.ei-css-panel__body textarea {
    width: 100%;
    height: 300px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    box-sizing: border-box;
    resize: vertical;
}

.ei-css-panel__actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.ei-css-panel__status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.9em;
}

.ei-css-panel__status.is-success { background: #d1fae5; color: #065f46; }
.ei-css-panel__status.is-error { background: #fee2e2; color: #991b1b; }

.ei-css-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* ---- Modal (confirmations, results) ---- */
.ei-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ei-modal-overlay.show { opacity: 1; }

.ei-modal {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.ei-modal.show { transform: scale(1); }

.ei-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 0;
}

.ei-modal-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
}

.ei-modal-icon.info { background: #dbeafe; color: #1d4ed8; }
.ei-modal-icon.danger { background: #fee2e2; color: #b91c1c; }
.ei-modal-icon.success { background: #d1fae5; color: #047857; }
.ei-modal-icon.error { background: #fee2e2; color: #b91c1c; }

.ei-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.ei-modal-body {
    padding: 16px 24px 24px;
}

.ei-modal-message {
    margin: 0;
    color: #4b5563;
    line-height: 1.5;
    white-space: pre-line;
}

.ei-modal-label {
    display: block;
    margin: 16px 0 6px;
    font-weight: 500;
    color: #374151;
}

.ei-modal-textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}

.ei-modal-textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.ei-modal-textarea.error { border-color: #dc3545; }

.ei-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 24px 24px;
}

.ei-modal-btn {
    padding: 9px 18px;
    border: none;
    border-radius: 6px;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.ei-modal-btn-primary { background: #6366f1; color: #fff; }
.ei-modal-btn-danger { background: #dc3545; color: #fff; }
.ei-modal-btn-secondary { background: #f3f4f6; color: #374151; }
.ei-modal-btn[disabled] { opacity: 0.7; cursor: wait; }

/* ---- Signature pad inside the accept modal ---- */
.ei-modal-input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}
.ei-modal-input.error { border-color: #dc3545; }
.ei-signature__pad {
    display: block;
    width: 100%;
    height: 140px;
    border: 1px dashed #9ca3af;
    border-radius: 6px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}
.ei-signature__pad.error { border-color: #dc3545; }
.ei-signature__tools { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ei-signature__hint { font-size: 0.8rem; color: #6b7280; }

/* ---- Fallback rendering when the design is missing ---- */
.ei-fallback {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ei-fallback__notice {
    margin-bottom: 24px;
    padding: 10px 14px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    font-size: 0.9em;
}

.ei-fallback__header { margin-bottom: 24px; }
.ei-fallback__header address { margin-top: 12px; font-style: normal; }

.ei-fallback__status {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.5em;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ei-fallback__status.status-paid,
.ei-fallback__status.status-accepted { background: #d1fae5; color: #065f46; }
.ei-fallback__status.status-unpaid,
.ei-fallback__status.status-available,
.ei-fallback__status.status-sent { background: #fef3c7; color: #92400e; }
.ei-fallback__status.status-declined,
.ei-fallback__status.status-overdue { background: #fee2e2; color: #991b1b; }

.ei-fallback__notes { margin-bottom: 24px; color: #555; }

.ei-fallback__items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.ei-fallback__items th,
.ei-fallback__items td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.ei-fallback__items th { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.ei-fallback__items th:nth-child(n+3),
.ei-fallback__items td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }

.ei-fallback__summary { text-align: right; line-height: 1.8; }
.ei-fallback__total { margin-top: 8px; font-size: 1.2em; }

/* ---- Small screens ---- */
@media (max-width: 640px) {
    .ei-document { margin: 16px auto; }
}

/* ---- Print: only the document itself ---- */
@media print {
    body.easy-invoice-document { background: #fff; }
    .ei-document { margin: 0; padding: 0; max-width: none; }
    .ei-document__notice,
    .ei-document__actions,
    .ei-payment-panel,
    .ei-css-toggle,
    .ei-css-panel,
    .ei-css-overlay,
    .ei-modal-overlay,
    #wpadminbar { display: none !important; }
    .ei-document__layout { display: block; }
    .ei-document__content { position: static; }
}

```