diff --git a/public/style.css b/public/style.css index 7fa3ef0..5bdd1d9 100644 --- a/public/style.css +++ b/public/style.css @@ -498,7 +498,20 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; } color: var(--text-strong); border-color: var(--text-ghost); } -.invoice-form select { +.invoice-form .field { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 6px; + margin-bottom: 16px; +} +.invoice-form label { + color: var(--text-dim); + font-size: 0.85rem; +} +.invoice-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), +.invoice-form select, +.invoice-form textarea { width: 100%; box-sizing: border-box; background: var(--surface); @@ -508,18 +521,55 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; } padding: 8px 10px; font-family: inherit; font-size: 0.95rem; + color-scheme: dark; } -.invoice-form input[type="date"] { - width: 100%; - box-sizing: border-box; - background: var(--surface); - color: var(--text-strong); - border: 1px solid var(--border); - border-radius: 3px; - padding: 8px 10px; +.invoice-form input[type="date"], +.invoice-form input[inputmode="decimal"] { font-family: var(--font-mono); font-size: 0.92rem; - color-scheme: dark; +} +.invoice-form textarea { + resize: vertical; + min-height: 72px; +} +.invoice-form input::placeholder, +.invoice-form textarea::placeholder { + color: var(--text-ghost); +} +.invoice-form input:focus, +.invoice-form select:focus, +.invoice-form textarea:focus { + outline: none; + border-color: var(--text-ghost); + background: var(--surface-alt); +} +.invoice-form input[type="file"] { + padding: 6px; + color: var(--text-dim); +} +.invoice-form label:has(> input[type="checkbox"]) { + display: flex; + gap: 8px; + align-items: center; + color: var(--text-strong); +} +.invoice-form .field .link-button { + align-self: flex-start; + margin: 2px 0 0; +} +.invoice-form h2 { + margin-top: 32px; +} +.invoice-form fieldset[disabled] input, +.invoice-form fieldset[disabled] select, +.invoice-form fieldset[disabled] textarea { + opacity: 0.7; +} +.invoice-form > .download-button, +.invoice-form fieldset > .download-button { + margin-top: 8px; + cursor: pointer; + font-family: inherit; } .download-button { display: inline-block; @@ -538,6 +588,9 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; } } @media (max-width: 560px) { + .invoice-grid { + grid-template-columns: 1fr; + } dl.kv { grid-template-columns: 1fr; gap: 2px 0; diff --git a/views/admin/invoices/new.erb b/views/admin/invoices/new.erb index 2c65bb6..7279592 100644 --- a/views/admin/invoices/new.erb +++ b/views/admin/invoices/new.erb @@ -12,7 +12,7 @@ <% end %>
-
+

Client

@@ -117,7 +117,7 @@ - +