css: invoice list, badges, item form, download button
Extends the existing dark palette to cover the invoicing UI: - .invoice-list: zebra-free table with right-aligned totals. - .badge / .badge-pending / .badge-paid: small status chip. - .items-table: per-row inputs for description/qty/unit price, .remove-row button styling. - .invoice-grid: two-column layout for the terms block (issued/due, currency/GEL rate). - .link-button: subdued "+ add line" affordance. - .download-button: the prominent CTA on the public landing page. - color-scheme: dark on date inputs so the native picker matches the rest of the page. No changes to existing rules.
This commit is contained in:
parent
226ccb8192
commit
96a0f55741
1 changed files with 157 additions and 0 deletions
157
public/style.css
157
public/style.css
|
|
@ -263,6 +263,163 @@ a:hover {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Invoices */
|
||||||
|
.invoice-list {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
.invoice-list th,
|
||||||
|
.invoice-list td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-bottom: 1px solid #1E1E1E;
|
||||||
|
}
|
||||||
|
.invoice-list th {
|
||||||
|
color: #777777;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
.invoice-list td.num,
|
||||||
|
.invoice-list th.num {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.invoice-list td.actions {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
.badge-pending {
|
||||||
|
color: #C9A86A;
|
||||||
|
border-color: #4A3E1F;
|
||||||
|
background: #2A2414;
|
||||||
|
}
|
||||||
|
.badge-paid {
|
||||||
|
color: #7AB97A;
|
||||||
|
border-color: #234A23;
|
||||||
|
background: #142A14;
|
||||||
|
}
|
||||||
|
.invoice-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 0 16px;
|
||||||
|
}
|
||||||
|
.items-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 8px 0 12px;
|
||||||
|
}
|
||||||
|
.items-table th,
|
||||||
|
.items-table td {
|
||||||
|
padding: 4px;
|
||||||
|
border: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.items-table th {
|
||||||
|
color: #777777;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.items-table th.num {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.items-table input {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #1A1A1A;
|
||||||
|
color: #DDDDDD;
|
||||||
|
border: 1px solid #2A2A2A;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.items-table td.num input {
|
||||||
|
text-align: right;
|
||||||
|
font-family: 'Hack', monospace;
|
||||||
|
}
|
||||||
|
.items-table td.actions {
|
||||||
|
width: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.items-table .remove-row {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #2A2A2A;
|
||||||
|
color: #777777;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.items-table .remove-row:hover {
|
||||||
|
color: #C97070;
|
||||||
|
border-color: #4A1F1F;
|
||||||
|
}
|
||||||
|
.link-button {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px dashed #2A2A2A;
|
||||||
|
color: #888888;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.link-button:hover {
|
||||||
|
color: #DDDDDD;
|
||||||
|
border-color: #555555;
|
||||||
|
}
|
||||||
|
.invoice-form select {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #1A1A1A;
|
||||||
|
color: #DDDDDD;
|
||||||
|
border: 1px solid #2A2A2A;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.invoice-form input[type="date"] {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #1A1A1A;
|
||||||
|
color: #DDDDDD;
|
||||||
|
border: 1px solid #2A2A2A;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-family: 'Hack', monospace;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
.download-button {
|
||||||
|
display: inline-block;
|
||||||
|
background: #2A2A2A;
|
||||||
|
color: #DDDDDD;
|
||||||
|
border: 1px solid #3A3A3A;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 12px 32px;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.download-button:hover {
|
||||||
|
background: #333333;
|
||||||
|
border-color: #555555;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
@media (max-width: 560px) {
|
||||||
ul.services {
|
ul.services {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue