Last active
July 1, 2023 03:08
-
-
Save yemartin/98fbb32d1149f9c3f429ad2480274df5 to your computer and use it in GitHub Desktop.
CSS customization of the Easy invoice stylesheet in GnuCash 5.x
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h3, a, body, p, table, tr, td, th.column-heading-left, th.column-heading-center, th.column-heading-right, td.anchor-cell, td.number-cell, td.number-header, td.text-cell, td.total-number-cell, td.total-label-cell, td.centered-label-cell { font-family: "Hiragino Sans", "MS Gothic", "Meiryo", sans-serif; font-size: 14pt; } | |
table, thead, tbody, tfoot, tr, td { border-collapse: collapse; } | |
body > table, .main-table > table { width: 471pt; } | |
.div-align-right { float: right; } | |
.div-align-right .maybe-align-right { text-align: right } | |
.main-table > table > tbody > tr:first-child td::before { content: "Invoice Number: "; font-size: large; } .main-table > table > tbody > tr:first-child td { text-align: right; padding: 0; } | |
.invoice-title { font-size: large; display: inline-block; } | |
.invoice-title::first-letter { color: red !important; font-size: 0; } | |
.invoice-details-table { margin-right: -1px; } | |
.invoice-details-table > table * { padding: 0px; } | |
.invoice-details-table > table * { font-size: large; } | |
.invoice-details-table tbody tr td:first-child { text-align: right; } | |
.invoice-details-table tbody tr:nth-child(1) td:first-child { font-size: 0; } .invoice-details-table tbody tr:nth-child(1) td:first-child::before { content: "Invoice Date: "; font-size: large; } | |
.invoice-details-table tbody tr:nth-child(2) td:first-child { font-size: 0; } .invoice-details-table tbody tr:nth-child(2) td:first-child::before { content: "Due Date: "; font-size: large; } | |
.invoice-details-table tbody tr:nth-child(1)::after { content: "Invoice"; display: block; text-align: center; font-size: 32pt; font-weight: bold; position: absolute; top: 40pt; width: 100%; left: 0; } | |
/*.invoice-details-table tbody tr:nth-child(2) { display: none; } /* Hide due date */ | |
.client-table, .company-table { margin-top: 48pt; min-height: 90pt; } | |
.company-table > table * { padding: 0px; } | |
.company-name { font-size: 0; } | |
.company-name::after { content: "From: ACME, Inc."; font-size: large; } | |
.company-address { font-size: 0; } | |
.company-address::after { content: "1-2-3 Address line 1\ALine 2, Country"; white-space: pre; font-size: 14pt; } | |
.company-phone { font-size: 0; } | |
.company-phone::after { content: "TEL: +1.000-000-0000"; font-size: 14pt; } | |
.picture img { width: 51pt; margin-right: 12pt; -webkit-transform: rotate(-3deg); } | |
.client-table > table { margin-left: 0 !important; } | |
.client-table > table * { padding: 0px; } | |
.client-name { font-size: x-large; border-bottom: 2px solid #000; line-height: 20pt; margin-bottom: 10pt; } | |
.client-name::before { content: "To: " } | |
.client-address::before, .client-address::first-line { font-size: 16pt; } | |
/* .client-address::first-line { font-size: 0; line-height: 0; color: transparent; } /* Hide contact */ | |
.entries-table { margin-top: 90pt; margin-bottom: 20pt; } | |
.entries-table * { border-width: 1px; border-style: solid; } | |
.entries-table > table { width: 100% } | |
.entries-table th:nth-child(1) { font-size: 0; } .entries-table th:nth-child(1)::after { content: "Description"; font-size: 14pt; } | |
.entries-table th:nth-child(2) { font-size: 0; } .entries-table th:nth-child(2)::after { content: "Qty"; font-size: 14pt; } | |
.entries-table th:nth-child(3) { font-size: 0; } .entries-table th:nth-child(3)::after { content: "Unit Price"; font-size: 14pt; } | |
.entries-table th:nth-child(4) { font-size: 0; } .entries-table th:nth-child(4)::after { content: "Amount"; font-size: 14pt; } | |
.entries-table td:nth-child(1) { width: 29em; } /* 30em makes the table wider */ | |
.entries-table td:nth-child(2) { width: 2em; } | |
.entries-table td:nth-child(3) { width: 6em; } | |
.entries-table td:nth-child(4) { width: 6em; } | |
.entries-table tbody tr:nth-last-child(4) td:first-child { font-size: 0; } .entries-table tbody tr:nth-last-child(4) td:first-child::after { content: "Subtotal"; font-size: 14pt; display: block; text-align: right; } | |
.entries-table tbody tr:nth-last-child(3) td:first-child { font-size: 0; } .entries-table tbody tr:nth-last-child(3) td:first-child::after { content: "Sales Tax"; font-size: 14pt; display: block; text-align: right; } | |
.entries-table tbody tr:nth-last-child(2) td:first-child { font-size: 0; } .entries-table tbody tr:nth-last-child(2) td:first-child::after { content: "Total"; font-size: 14pt; display: block; text-align: right; } | |
/* Fixed height so empty rows show too. min-height did not work */ | |
.entries-table * { height: 16pt; } | |
/* Table footer */ | |
.entries-table thead, | |
.entries-table tbody tr:nth-last-child(4), | |
.entries-table tbody tr:nth-last-child(3), | |
.entries-table tbody tr:nth-last-child(2) { background-color: #ddd; } | |
.entries-table .total-number-cell { font-size: 14pt; } | |
/* Paddings and nowrap */ | |
.entries-table *, | |
.entries-table th:nth-child(3)::after, | |
.entries-table tbody tr:nth-last-child(4) td:first-child::after, | |
.entries-table tbody tr:nth-last-child(3) td:first-child::after, | |
.entries-table tbody tr:nth-last-child(2) td:first-child::after { padding: 0 0.5em; white-space: nowrap; } | |
/* Hack to move the amount due above the table */ | |
.entries-table tbody tr:nth-last-child(1) td:first-child { font-size: 0; } .entries-table tbody tr:nth-last-child(1) td:first-child::after { content: "Invoice Total"; font-size: 20pt; display: block; width: 180pt; } | |
.entries-table tbody tr:nth-last-child(1) { position: absolute; top: 290pt; background-color: transparent; height: 22pt; border: none; border-bottom: 2px solid #000; } | |
.entries-table tbody tr:nth-last-child(1) td { border: none; font-size: 20pt; } | |
.entries-table tbody tr:nth-last-child(1) .total-number-cell::after { content: " —"; } | |
table, tbody { border: none !important; } /* Fix leftover border inside GnuCash only (works in FF) */ | |
/* Invoice notes */ | |
.main-table tr:nth-child(6) .invoice-notes::before { content: "Description:"; } | |
.main-table tr:nth-child(6) .invoice-notes { font-size: 16pt; position: absolute; top: 230pt; font-weight: normal; } | |
/* .main-table tr:nth-child(6) .invoice-notes::after { content: "Invoice details:"; font-size: large; display: block; font-weight: normal; margin-top: 1em; } */ | |
/* Payment information */ | |
.main-table > table > tbody > tr:nth-child(7) > td { border: 1px solid #000; position: absolute; width: 468pt; } | |
.main-table tr:nth-child(7) .invoice-notes::before { content: "Payment Information"; display: block; font-weight: bold; margin-bottom: 1em; } | |
.main-table tr:nth-child(7) .invoice-notes { line-height: 1.6em; font-size: large; margin-left: 10pt; text-align: left; padding: 10pt; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment