PluginProbe
Easy Invoice – Invoice Generator, PDF Quotes & Payments / 2.4.3
Easy Invoice – Invoice Generator, PDF Quotes & Payments v2.4.3
2.4.3 2.4.4 2.4.2 2.4.0 2.4.1 2.3.8 2.3.7 2.3.6 2.3.5 2.3.4 2.3.3 2.3.2 2.3.1 2.2.0 2.1.21 2.1.20 2.1.19 2.1.18 2.1.0 2.1.1 2.1.10 2.1.11 2.1.12 2.1.13 2.1.14 All 60 releases
easy-invoice / assets / css / document.css

document.css in Easy Invoice – Invoice Generator, PDF Quotes & Payments 2.4.3, at assets/css/document.css

603 lines 14.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 * Public invoice / quote page — the frame around the design template.
3 *
4 * The design (templates/invoice-templates/*.php) carries its own styles.
5 * Everything here is the chrome: action bar, panels, modal, print rules.
6 */
7
8 body.easy-invoice-document {
9 margin: 0;
10 padding: 0;
11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12 background: #eaeaea;
13 color: #222;
14 }
15
16 .ei-document {
17 max-width: 1200px;
18 margin: 40px auto;
19 padding: 0 16px;
20 box-sizing: border-box;
21 }
22
23 .ei-document h1,
24 .ei-document h2,
25 .ei-document h3 {
26 margin-top: 0;
27 }
28
29 /* ---- Notice above the actions (quote accept description) ---- */
30 .ei-document__notice {
31 max-width: 800px;
32 margin: 0 auto 16px;
33 padding: 12px 16px;
34 background: #f8f9fa;
35 border-left: 4px solid #007cba;
36 border-radius: 4px;
37 font-size: 0.9em;
38 color: #555;
39 }
40 .ei-document__notice--expired,
41 .ei-document__notice--declined {
42 background: #fdf3f2;
43 border-left-color: #c0392b;
44 color: #7a271a;
45 }
46
47 .ei-document__notice--accepted {
48 background: #eef8f1;
49 border-left-color: #1f8a4c;
50 color: #14532d;
51 }
52
53 .ei-document__notice--pending {
54 background: #fff8e6;
55 border-left-color: #b7791f;
56 color: #6b4b0c;
57 }
58
59 /* ---- Action bar ---- */
60 .ei-document__actions {
61 display: flex;
62 flex-wrap: wrap;
63 justify-content: center;
64 gap: 10px;
65 margin-bottom: 32px;
66 }
67
68 .ei-btn {
69 display: inline-flex;
70 align-items: center;
71 justify-content: center;
72 gap: 8px;
73 padding: 10px 20px;
74 border: none;
75 border-radius: 4px;
76 background: #6366f1;
77 color: #fff;
78 font: inherit;
79 font-size: 0.95rem;
80 font-weight: 500;
81 line-height: 1.2;
82 cursor: pointer;
83 text-decoration: none;
84 transition: filter 0.15s ease, opacity 0.15s ease;
85 }
86
87 .ei-btn:hover,
88 .ei-btn:focus-visible {
89 filter: brightness(0.92);
90 color: #fff;
91 outline: none;
92 }
93
94 .ei-btn:focus-visible {
95 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
96 }
97
98 .ei-btn[disabled] {
99 opacity: 0.7;
100 cursor: wait;
101 }
102
103 .ei-btn--accept { background: #28a745; }
104 .ei-btn--decline { background: #dc3545; }
105 .ei-btn--print { background: #10b981; }
106 .ei-btn--pdf { background: #f59e0b; }
107 .ei-btn--email { background: #8b5cf6; }
108 .ei-btn--pay { background: #27ae60; }
109 .ei-btn--pay.is-open { background: #6c757d; }
110
111 .ei-btn__spinner {
112 width: 16px;
113 height: 16px;
114 border: 2px solid rgba(255, 255, 255, 0.4);
115 border-top-color: #fff;
116 border-radius: 50%;
117 animation: ei-spin 0.8s linear infinite;
118 }
119
120 @keyframes ei-spin {
121 to { transform: rotate(360deg); }
122 }
123
124 /* ---- Layout: document plus (optional) payment panel ---- */
125 .ei-document__layout {
126 display: flex;
127 gap: 32px;
128 }
129
130 .ei-document__content {
131 flex: 1;
132 min-width: 0;
133 position: relative;
134 }
135
136 /*
137 * The design is an A4 sheet: 210 × 297 mm at CSS resolution (794 × 1123 px),
138 * centred, growing taller only when the document needs more than one page.
139 * "Download as PDF" captures this sheet edge to edge, so the PDF page and the
140 * sheet on screen are the same thing. Narrow screens let it shrink.
141 */
142 .ei-document__content > .template,
143 .ei-document__content > [class*="template-"] {
144 width: 210mm;
145 max-width: 100%;
146 min-height: 297mm;
147 margin-left: auto;
148 margin-right: auto;
149 box-sizing: border-box;
150 }
151
152 /* ---- Designs on narrow screens ----
153 The designs are laid out for an A4 sheet. Below tablet width the header
154 and address grids stack, the line-item table scrolls sideways instead of
155 pushing the page wider, and the totals block takes the full width. */
156 @media (max-width: 640px) {
157 .ei-document__content .invoice-header,
158 .ei-document__content .quote-header,
159 .ei-document__content .address-section,
160 .ei-document__content .company-info,
161 .ei-document__content .invoice-title-section,
162 .ei-document__content .quote-title-section {
163 display: block !important;
164 }
165 .ei-document__content .invoice-header > *,
166 .ei-document__content .quote-header > *,
167 .ei-document__content .address-section > * {
168 width: auto !important;
169 max-width: none !important;
170 margin-bottom: 16px;
171 text-align: left !important;
172 }
173 .ei-document__content .invoice-meta,
174 .ei-document__content .quote-meta {
175 position: static !important;
176 }
177 .ei-document__content table.invoice-items,
178 .ei-document__content table.quote-items {
179 display: block;
180 overflow-x: auto;
181 -webkit-overflow-scrolling: touch;
182 }
183 .ei-document__content table.invoice-items th,
184 .ei-document__content table.quote-items th,
185 .ei-document__content .item-quantity,
186 .ei-document__content .item-price,
187 .ei-document__content .item-total {
188 white-space: nowrap;
189 }
190 .ei-document__content .item-title {
191 white-space: normal; /* the name column gives way, the figures never break */
192 }
193 /* The sheet's 32-40px margins are A4 proportions; a phone needs the room for the columns. */
194 .ei-document__content [class^="template-"],
195 .ei-document__content [class*=" template-"] {
196 padding-left: 16px !important;
197 padding-right: 16px !important;
198 }
199 /* Tighter cells so a four-column table fits a phone without scrolling. */
200 .ei-document__content table.invoice-items th,
201 .ei-document__content table.invoice-items td,
202 .ei-document__content table.quote-items th,
203 .ei-document__content table.quote-items td {
204 padding-left: 6px;
205 padding-right: 6px;
206 font-size: 13px;
207 }
208 .ei-document__content table.invoice-items th:first-child,
209 .ei-document__content table.invoice-items td:first-child,
210 .ei-document__content table.quote-items th:first-child,
211 .ei-document__content table.quote-items td:first-child {
212 padding-left: 0;
213 }
214 .ei-document__content table.invoice-items th:last-child,
215 .ei-document__content table.invoice-items td:last-child,
216 .ei-document__content table.quote-items th:last-child,
217 .ei-document__content table.quote-items td:last-child {
218 padding-right: 0;
219 }
220 .ei-document__content .item-description {
221 font-size: 12px;
222 }
223 .ei-document__content .invoice-totals,
224 .ei-document__content .quote-totals {
225 width: 100% !important;
226 max-width: none !important;
227 margin-left: 0 !important;
228 box-sizing: border-box; /* padded designs otherwise overflow the sheet */
229 }
230 }
231
232 /* ---- Payment panel: slides in from the right ---- */
233 .ei-payment-panel {
234 position: fixed;
235 top: 0;
236 right: 0;
237 width: 450px;
238 max-width: 100vw;
239 height: 100vh;
240 z-index: 1000;
241 background: #fff;
242 box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
243 overflow-y: auto;
244 transform: translateX(100%);
245 transition: transform 0.3s ease;
246 }
247
248 .ei-payment-panel.is-open {
249 transform: translateX(0);
250 }
251
252 .ei-payment-panel__close {
253 position: absolute;
254 top: 15px;
255 right: 15px;
256 width: 35px;
257 height: 35px;
258 border: none;
259 border-radius: 50%;
260 background: rgba(0, 0, 0, 0.08);
261 color: #333;
262 font-size: 22px;
263 line-height: 1;
264 cursor: pointer;
265 z-index: 1;
266 }
267
268 /* ---- Per-document CSS editor (administrators) ---- */
269 .ei-css-toggle {
270 position: fixed;
271 top: 16px;
272 left: 16px;
273 width: 36px;
274 height: 36px;
275 border: none;
276 border-radius: 6px;
277 background: #3b82f6;
278 color: #fff;
279 font: 600 13px/1 monospace;
280 cursor: pointer;
281 z-index: 2;
282 }
283
284 .ei-css-toggle.has-css {
285 background: #10b981;
286 }
287
288 .ei-css-toggle.has-css::after {
289 content: "";
290 position: absolute;
291 top: -4px;
292 right: -4px;
293 width: 10px;
294 height: 10px;
295 border-radius: 50%;
296 background: #ef4444;
297 }
298
299 .ei-css-panel {
300 position: fixed;
301 top: 0;
302 left: 0;
303 width: 400px;
304 max-width: 100vw;
305 height: 100vh;
306 background: #fff;
307 box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
308 z-index: 1001;
309 overflow-y: auto;
310 box-sizing: border-box;
311 }
312
313 .ei-css-panel__header {
314 display: flex;
315 justify-content: space-between;
316 align-items: center;
317 padding: 20px;
318 border-bottom: 1px solid #e5e7eb;
319 }
320
321 .ei-css-panel__header h3 {
322 margin: 0;
323 font-size: 18px;
324 font-weight: 600;
325 }
326
327 .ei-css-panel__close {
328 background: none;
329 border: none;
330 font-size: 24px;
331 line-height: 1;
332 cursor: pointer;
333 color: #6b7280;
334 }
335
336 .ei-css-panel__body {
337 padding: 20px;
338 }
339
340 .ei-css-panel__body label {
341 display: block;
342 margin-bottom: 8px;
343 font-weight: 500;
344 color: #374151;
345 }
346
347 .ei-css-panel__body textarea {
348 width: 100%;
349 height: 300px;
350 padding: 12px;
351 border: 1px solid #d1d5db;
352 border-radius: 6px;
353 font-family: Menlo, Monaco, Consolas, monospace;
354 font-size: 13px;
355 box-sizing: border-box;
356 resize: vertical;
357 }
358
359 .ei-css-panel__actions {
360 display: flex;
361 gap: 10px;
362 margin-top: 15px;
363 }
364
365 .ei-css-panel__status {
366 margin-top: 15px;
367 padding: 10px;
368 border-radius: 4px;
369 font-size: 0.9em;
370 }
371
372 .ei-css-panel__status.is-success { background: #d1fae5; color: #065f46; }
373 .ei-css-panel__status.is-error { background: #fee2e2; color: #991b1b; }
374
375 .ei-css-overlay {
376 position: fixed;
377 inset: 0;
378 background: rgba(0, 0, 0, 0.5);
379 z-index: 1000;
380 }
381
382 /* ---- Modal (confirmations, results) ---- */
383 .ei-modal-overlay {
384 position: fixed;
385 inset: 0;
386 display: flex;
387 align-items: center;
388 justify-content: center;
389 background: rgba(0, 0, 0, 0.5);
390 z-index: 9999;
391 opacity: 0;
392 transition: opacity 0.2s ease;
393 }
394
395 .ei-modal-overlay.show { opacity: 1; }
396
397 .ei-modal {
398 width: 90%;
399 max-width: 500px;
400 max-height: 80vh;
401 overflow-y: auto;
402 background: #fff;
403 border-radius: 8px;
404 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
405 transform: scale(0.95);
406 transition: transform 0.2s ease;
407 }
408
409 .ei-modal.show { transform: scale(1); }
410
411 .ei-modal-header {
412 display: flex;
413 align-items: center;
414 gap: 12px;
415 padding: 20px 24px 0;
416 }
417
418 .ei-modal-icon {
419 flex-shrink: 0;
420 display: flex;
421 align-items: center;
422 justify-content: center;
423 width: 40px;
424 height: 40px;
425 border-radius: 50%;
426 font-size: 20px;
427 }
428
429 .ei-modal-icon.info { background: #dbeafe; color: #1d4ed8; }
430 .ei-modal-icon.danger { background: #fee2e2; color: #b91c1c; }
431 .ei-modal-icon.success { background: #d1fae5; color: #047857; }
432 .ei-modal-icon.error { background: #fee2e2; color: #b91c1c; }
433
434 .ei-modal-title {
435 margin: 0;
436 font-size: 18px;
437 font-weight: 600;
438 color: #111827;
439 }
440
441 .ei-modal-body {
442 padding: 16px 24px 24px;
443 }
444
445 .ei-modal-message {
446 margin: 0;
447 color: #4b5563;
448 line-height: 1.5;
449 white-space: pre-line;
450 }
451
452 .ei-modal-label {
453 display: block;
454 margin: 16px 0 6px;
455 font-weight: 500;
456 color: #374151;
457 }
458
459 .ei-modal-textarea {
460 width: 100%;
461 min-height: 90px;
462 padding: 10px;
463 border: 1px solid #d1d5db;
464 border-radius: 6px;
465 font: inherit;
466 box-sizing: border-box;
467 }
468
469 .ei-modal-textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
470 .ei-modal-textarea.error { border-color: #dc3545; }
471
472 .ei-modal-actions {
473 display: flex;
474 justify-content: flex-end;
475 gap: 10px;
476 padding: 0 24px 24px;
477 }
478
479 .ei-modal-btn {
480 padding: 9px 18px;
481 border: none;
482 border-radius: 6px;
483 font: inherit;
484 font-weight: 500;
485 cursor: pointer;
486 }
487
488 .ei-modal-btn-primary { background: #6366f1; color: #fff; }
489 .ei-modal-btn-danger { background: #dc3545; color: #fff; }
490 .ei-modal-btn-secondary { background: #f3f4f6; color: #374151; }
491 .ei-modal-btn[disabled] { opacity: 0.7; cursor: wait; }
492
493 /* ---- Signature pad inside the accept modal ---- */
494 .ei-modal-input {
495 width: 100%;
496 padding: 9px 10px;
497 border: 1px solid #d1d5db;
498 border-radius: 6px;
499 font: inherit;
500 box-sizing: border-box;
501 }
502 .ei-modal-input.error { border-color: #dc3545; }
503 .ei-signature__pad {
504 display: block;
505 width: 100%;
506 height: 140px;
507 border: 1px dashed #9ca3af;
508 border-radius: 6px;
509 background: #fff;
510 touch-action: none;
511 cursor: crosshair;
512 }
513 .ei-signature__pad.error { border-color: #dc3545; }
514 .ei-signature__tools { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
515 .ei-signature__hint { font-size: 0.8rem; color: #6b7280; }
516
517 /* ---- Fallback rendering when the design is missing ---- */
518 .ei-fallback {
519 max-width: 800px;
520 margin: 0 auto;
521 padding: 32px;
522 background: #fff;
523 border-radius: 8px;
524 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
525 }
526
527 .ei-fallback__notice {
528 margin-bottom: 24px;
529 padding: 10px 14px;
530 background: #fef3c7;
531 color: #92400e;
532 border-radius: 4px;
533 font-size: 0.9em;
534 }
535
536 .ei-fallback__header { margin-bottom: 24px; }
537 .ei-fallback__header address { margin-top: 12px; font-style: normal; }
538
539 .ei-fallback__status {
540 display: inline-block;
541 margin-left: 10px;
542 padding: 2px 10px;
543 border-radius: 999px;
544 background: #e5e7eb;
545 color: #374151;
546 font-size: 0.5em;
547 vertical-align: middle;
548 text-transform: uppercase;
549 letter-spacing: 0.04em;
550 }
551
552 .ei-fallback__status.status-paid,
553 .ei-fallback__status.status-accepted { background: #d1fae5; color: #065f46; }
554 .ei-fallback__status.status-unpaid,
555 .ei-fallback__status.status-available,
556 .ei-fallback__status.status-sent { background: #fef3c7; color: #92400e; }
557 .ei-fallback__status.status-declined,
558 .ei-fallback__status.status-overdue { background: #fee2e2; color: #991b1b; }
559
560 .ei-fallback__notes { margin-bottom: 24px; color: #555; }
561
562 .ei-fallback__items {
563 width: 100%;
564 border-collapse: collapse;
565 margin-bottom: 24px;
566 }
567
568 .ei-fallback__items th,
569 .ei-fallback__items td {
570 padding: 8px 10px;
571 border-bottom: 1px solid #e5e7eb;
572 text-align: left;
573 vertical-align: top;
574 }
575
576 .ei-fallback__items th { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
577 .ei-fallback__items th:nth-child(n+3),
578 .ei-fallback__items td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
579
580 .ei-fallback__summary { text-align: right; line-height: 1.8; }
581 .ei-fallback__total { margin-top: 8px; font-size: 1.2em; }
582
583 /* ---- Small screens ---- */
584 @media (max-width: 640px) {
585 .ei-document { margin: 16px auto; }
586 }
587
588 /* ---- Print: only the document itself ---- */
589 @media print {
590 body.easy-invoice-document { background: #fff; }
591 .ei-document { margin: 0; padding: 0; max-width: none; }
592 .ei-document__notice,
593 .ei-document__actions,
594 .ei-payment-panel,
595 .ei-css-toggle,
596 .ei-css-panel,
597 .ei-css-overlay,
598 .ei-modal-overlay,
599 #wpadminbar { display: none !important; }
600 .ei-document__layout { display: block; }
601 .ei-document__content { position: static; }
602 }
603