grabowski
f272e74b84
Standalone expenses (date, description, category, amount) with the same equal/own/payer split machinery as entry costs, merged into the costs panel and settle-up as a single expense bucket. Self-fetching card with per-day grouping, client-side sorting, and quick-add. CSV export interleaves expenses with priced entries, one share column per member (UTF-8 BOM, RFC 4180, formula-injection guard on text cells). Also fixes trip deletion, which hit a foreign-key violation and rolled back for any trip with checklist items.
28 lines
1.5 KiB
CSS
28 lines
1.5 KiB
CSS
/* Expenses (daily spending log) card. Split out of styles.css — which is at
|
|
its 500-line cap — following the same per-feature stylesheet convention as
|
|
checklist.css. Reuses the shared palette/vocabulary rather than
|
|
re-declaring it: rows are `.entry-row`/`.entry-icon`/`.entry-body`/
|
|
`.entry-title-row`/`.entry-title`/`.entry-price`/`.entry-sub`/
|
|
`.entry-actions` (day editor), the total banner is `.costs-total` (costs
|
|
panel), and the add/edit form reuses `.cost-section`-era `.participants`/
|
|
`.part-item`/`.part-check` plus the generic `.form-row`/`.form-actions`. */
|
|
|
|
.expenses-section { display: flex; flex-direction: column; }
|
|
.expenses-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
|
|
.expenses-actions .btn { white-space: nowrap; }
|
|
.expenses-sort { min-width: 8.5rem; }
|
|
|
|
.expenses-total { margin-bottom: 1rem; }
|
|
|
|
.expenses-days { display: flex; flex-direction: column; gap: 1.1rem; }
|
|
.expenses-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
|
|
.expenses-day-total { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); padding: 0.1rem 0.5rem; border-radius: 999px; }
|
|
|
|
.expenses-flat { margin-top: 0.2rem; }
|
|
|
|
.expenses-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
|
|
|
|
@media (max-width: 480px) {
|
|
.expenses-actions { flex-wrap: wrap; }
|
|
}
|