JUSN/tickte-system
0
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Finanzen: Vorschau, Steuer und Abos ohne Karten, Container-Query auf Wrapper

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-10-06 14:38:00 +00:00
1 parent 6d015df6fa
commit bd1eccb4e3
4 files changed
+168 -175
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/global.css
+26 -42
View File
@@ -708,72 +708,56 @@ button.link-danger { background: none; border: 0; padding: 0; font: inherit; fon
/* Bloecke 3-5: Vorschau, Steuer, Abos */
/* Block 3: Vorschau (Tabelle; in einer schmalen Karte wird jede Zeile zweizeilig) */
.fin-forecast-card { container-type: inline-size; overflow: hidden; }
.fin-forecast th, .fin-forecast td { padding: 9px 10px; vertical-align: baseline; }
/* Block 3: Vorschau. Die Tabelle liegt in .fin-body (Container); schmal wird jede Zeile ein Raster. Zellen: Abstaende wie .table, nur oben und unten 9 px. */
.fin-forecast th, .fin-forecast td { vertical-align: baseline; }
.fin-forecast td { padding-block: 9px; }
.fin-forecast th.fin-amount { text-align: right; }
.fin-forecast th:first-child, .fin-forecast td:first-child { padding-left: var(--sp-4); }
.fin-forecast th:last-child, .fin-forecast td:last-child { padding-right: var(--sp-4); }
.fin-forecast tbody tr:last-child td { border-bottom: none; }
.fin-forecast-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-forecast-label { overflow-wrap: anywhere; }
.fin-forecast-foot { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.fin-forecast-foot .fin-hint svg { vertical-align: -2px; }
.fin-forecast-foot { display: grid; gap: 6px; margin-top: 12px; }
@container (max-width: 560px) {
.fin-forecast thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fin-forecast, .fin-forecast tbody { display: block; }
.fin-forecast tr {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 0; align-items: baseline;
grid-template-areas: "date date kind kind amount amount" "label label label label label label" "sicher sicher sicher erwartet erwartet erwartet";
padding: 10px var(--sp-4); border-bottom: 1px solid var(--border);
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.fin-forecast-nobal tr { grid-template-areas: "date date kind kind amount amount" "label label label label label label"; }
.fin-forecast tbody tr:last-child { border-bottom: none; }
.fin-forecast td, .fin-forecast td:first-child, .fin-forecast td:last-child { display: block; padding: 0; border: 0; min-width: 0; }
.fin-forecast tbody tr:hover td { background: transparent; }
.fin-forecast-date { grid-area: date; }
.fin-forecast-kind { grid-area: kind; }
.fin-forecast-amount { grid-area: amount; font-weight: 700; }
.fin-forecast-amount { grid-area: amount; font-weight: 600; }
.fin-forecast-label { grid-area: label; }
.fin-forecast td.fin-forecast-sicher, .fin-forecast td.fin-forecast-erwartet {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); font-size: 13px;
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 13px;
}
.fin-forecast-sicher { grid-area: sicher; }
.fin-forecast-erwartet { grid-area: erwartet; }
.fin-forecast td.fin-forecast-sicher { padding-right: var(--sp-3); }
.fin-forecast td.fin-forecast-erwartet { padding-left: var(--sp-3); }
.fin-forecast td.fin-forecast-sicher { padding-right: 12px; }
.fin-forecast td.fin-forecast-erwartet { padding-left: 12px; }
.fin-saldo { margin-left: auto; }
.fin-forecast td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.fin-forecast td[data-label]::before { content: attr(data-label); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
}
/* Block 4: Steuer */
.fin-facts { display: grid; gap: var(--sp-4); }
.fin-fact { display: grid; gap: 3px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.fin-fact:last-child { padding-bottom: 0; border-bottom: none; }
.fin-fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.fin-fact-label { color: var(--text-muted); font-size: 13px; }
.fin-fact-big { font-size: 24px; font-weight: 800; }
.fin-fact-strong { font-size: 16px; font-weight: 700; }
.fin-fact-value { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-fact-unknown { color: var(--warn); }
.fin-fact-sub { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
/* Block 4: Steuer (Liste mit Haarlinien; die Fussnote steht nach dem letzten Posten) */
.fin-facts { display: grid; gap: 16px; }
.fin-fact { display: grid; gap: 3px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fin-fact:last-of-type { padding-bottom: 0; border-bottom: 0; }
.fin-fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fin-fact-label { color: var(--text-2); font-size: 13px; }
.fin-fact-big { font-size: 22px; line-height: 30px; font-weight: 600; }
.fin-fact-strong { font-size: 16px; font-weight: 600; }
.fin-fact-value { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-fact-unknown { color: var(--orange-fg); }
.fin-fact-sub { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.fin-fact-sub-strong { color: var(--text); }
/* Block 5: Abos */
.fin-abo-card { overflow: hidden; }
.fin-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--sp-3); align-items: baseline; padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.fin-stat-value { font-size: 20px; font-weight: 800; }
.fin-stat-label { color: var(--text-muted); }
.fin-stat-label.fin-flag { color: var(--danger); }
.fin-stat-label svg { vertical-align: -2px; }
.fin-abos { list-style: none; margin: 0; padding: 0; }
.fin-abo {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3); align-items: baseline;
padding: 11px var(--sp-4); border-bottom: 1px solid var(--border);
}
.fin-abo:last-child { border-bottom: none; }
.fin-abo-customer { font-weight: 700; overflow-wrap: anywhere; }
.fin-abo-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); font-size: 13px; }
/* Block 5: Abos (Kennzahlen: .stats.fin-abo-stats ohne eigene Regel) */
.fin-abos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fin-abo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fin-abo-customer { font-weight: 600; overflow-wrap: anywhere; }
.fin-abo-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
/* Block 6 und 7: Rechnungen und Buchungen (Tabellen; in einer schmalen Karte wird jede Zeile ein Raster) */
.fin-invoices-card, .fin-tx-card { container-type: inline-size; overflow: hidden; }