PluginProbe
Easy Invoice – Invoice Generator, PDF Quotes & Payments / trunk
Easy Invoice – Invoice Generator, PDF Quotes & Payments vtrunk
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 2.1.15 2.1.16 2.1.2 All 57 releases
easy-invoice / assets / css / document.css

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

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