Update 1.html
This commit is contained in:
parent
6dfc67e8b3
commit
9a1ea38e7f
99
1.html
99
1.html
@ -14,10 +14,10 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
padding: 40px;
|
padding: 20px 30px; /* reduced padding for PDF */
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
line-height: 1.6;
|
line-height: 1.5; /* slightly reduced line-height */
|
||||||
max-width: 900px;
|
max-width: 800px; /* reduced width for PDF */
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
@ -26,8 +26,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 32px;
|
||||||
padding-bottom: 24px;
|
padding-bottom: 16px;
|
||||||
border-bottom: 3px solid #002366; /* navy blue */
|
border-bottom: 3px solid #002366; /* navy blue */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,16 +36,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.company-name {
|
.company-name {
|
||||||
font-size: 28px;
|
font-size: 26px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #002366;
|
color: #002366;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.company-details {
|
.company-details {
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 1.8;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invoice-title {
|
.invoice-title {
|
||||||
@ -55,14 +55,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.invoice-title h1 {
|
.invoice-title h1 {
|
||||||
font-size: 32px; /* slightly smaller than before */
|
font-size: 30px; /* smaller */
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #002366;
|
color: #002366;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invoice-number {
|
.invoice-number {
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -70,8 +70,8 @@
|
|||||||
.invoice-meta {
|
.invoice-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 24px;
|
||||||
gap: 24px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-section {
|
.meta-section {
|
||||||
@ -79,28 +79,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.meta-section h3 {
|
.meta-section h3 {
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-content {
|
.meta-content {
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-content div {
|
.meta-content div {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customer-name {
|
.customer-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dates-section {
|
.dates-section {
|
||||||
@ -108,18 +108,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.date-item {
|
.date-item {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-label {
|
.date-label {
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
color: #999;
|
color: #999;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-value {
|
.date-value {
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: capitalize; /* titlecase for status */
|
text-transform: capitalize; /* titlecase for status */
|
||||||
@ -128,22 +128,22 @@
|
|||||||
.items-table {
|
.items-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 24px; /* reduced margin */
|
||||||
}
|
}
|
||||||
|
|
||||||
.items-table thead {
|
.items-table thead {
|
||||||
background-color: #e6f0ff; /* lighter navy */
|
background-color: #e6f0ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.items-table th {
|
.items-table th {
|
||||||
padding: 14px 12px;
|
padding: 10px 8px; /* smaller padding */
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-bottom: 2px solid #002366;
|
border-bottom: 1px solid #002366;
|
||||||
}
|
}
|
||||||
|
|
||||||
.items-table th:last-child,
|
.items-table th:last-child,
|
||||||
@ -160,8 +160,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.items-table td {
|
.items-table td {
|
||||||
padding: 16px 12px;
|
padding: 12px 8px; /* smaller padding */
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -172,17 +172,17 @@
|
|||||||
|
|
||||||
.totals-section {
|
.totals-section {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
width: 350px;
|
width: 300px; /* smaller width for PDF */
|
||||||
padding: 24px;
|
padding: 16px;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-row {
|
.total-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 10px 0;
|
padding: 6px 0;
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-row.subtotal {
|
.total-row.subtotal {
|
||||||
@ -191,49 +191,52 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.total-row.grand-total {
|
.total-row.grand-total {
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #002366;
|
color: #002366;
|
||||||
border-top: 2px solid #002366;
|
border-top: 2px solid #002366;
|
||||||
padding-top: 16px;
|
padding-top: 12px;
|
||||||
margin-top: 8px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: 48px;
|
margin-top: 32px;
|
||||||
padding-top: 24px;
|
padding-top: 16px;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: #999;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes-section {
|
.notes-section {
|
||||||
margin-top: 32px;
|
margin-top: 24px;
|
||||||
padding: 20px;
|
padding: 16px;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
border-left: 4px solid #002366;
|
border-left: 4px solid #002366;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes-section h3 {
|
.notes-section h3 {
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 6px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes-section p {
|
.notes-section p {
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
color: #555;
|
color: #555;
|
||||||
line-height: 1.7;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
body {
|
body {
|
||||||
padding: 20px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.items-table tbody tr:hover {
|
.items-table tbody tr:hover {
|
||||||
@ -346,8 +349,8 @@
|
|||||||
{{/notes}}
|
{{/notes}}
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<p>Thank you for your business!</p>
|
<div>Thank you for your business!</div>
|
||||||
<p>{{companyName}} Generated on {{issueDate}}</p>
|
<div>{{companyName}} Generated on {{issueDate}}</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user