CSS customization of the Easy invoice stylesheet in GnuCash 5.x

gnucash_easy_stylesheet_custom.css

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; }