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

Finanzen: Seitenkopf, Statuszeile, Kennzahlen und Aufgaben ohne Karten; Kpi entfernt

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 e1932a2a48
commit 6d015df6fa
7 files changed
+96 -112
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/global.css
+54 -51
View File
@@ -633,14 +633,40 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
.legal-contracts { display: block; overflow-x: auto; }
}
/* ===== FINANZEN (P7) ===== */
/* --- Finanzen --- */
button.link-danger { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
/* Allgemein: Seitengeruest, Betraege, Meldungen, Spalten. Rot gilt fuer einen Betrag, dessen Text mit dem Minuszeichen beginnt. */
.fin-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.fin-stack .kpi-grid { margin-bottom: 0; }
.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fin-neg, .fin-flag { color: var(--red-fg); }
.fin-flag { font-weight: 600; }
.fin-stack > * + * { margin-top: 36px; }
.fin-top { display: flex; flex-direction: column; gap: 20px; }
.fin-block { scroll-margin-top: 16px; }
.fin-body { container-type: inline-size; }
.fin-table-wrap { overflow-x: auto; }
.fin-notice, .fin-page-notice { margin: 0 0 8px; }
.fin-page-notice { margin-bottom: 16px; }
.fin-load-error { display: grid; gap: 12px; justify-items: start; padding: 16px 0; }
/* Die einspaltige Reihe bekommt ihren Zeilenabstand vom Abschnittsabstand (36 px). Die Regel steht mit hoeherer Spezifitaet hier, weil KOMPAT */
/* .fin-cols > section + section auf 0 setzt; ab 1100 px stehen die Spalten nebeneinander und beginnen auf gleicher Hoehe. */
.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; align-items: start; }
.fin-stack .fin-cols > section + section { margin-top: 36px; }
@media (min-width: 1100px) {
.fin-cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.fin-cols-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-stack .fin-cols > section + section { margin-top: 0; }
}
@media (max-width: 860px) {
.fin-block { scroll-margin-top: 68px; } /* unter der 52 px hohen Mobil-Leiste 16 px Luft */
}
/* Uebergang: diese Regeln fallen, sobald keine Datei mehr die Klassen benutzt (Hinweis, Drehknopf, Textknopf der Tabellen und Formulare) */
.fin-spin { animation: spin 1s linear infinite; }
.fin-hint { margin: 0; font-size: 13px; color: var(--text-muted); }
.fin-hint-warn { color: var(--warn); }
.fin-flag { color: var(--danger); font-weight: 700; }
.fin-link {
background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
@@ -648,61 +674,42 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
}
.fin-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Block 0: Statuszeile */
.fin-status-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.fin-status {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
padding: 10px 14px; font-size: 13px; color: var(--text-muted);
background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
}
.fin-status-items { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); min-width: 0; }
.fin-status-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.fin-status-warn { color: var(--warn); font-weight: 600; }
/* Block 0: Statuszeile (ohne Kasten) */
.fin-status-wrap > .fin-notice { margin: 8px 0 0; }
.fin-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--text-2); }
.fin-status-items { display: flex; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
.fin-status-item { min-width: 0; overflow-wrap: anywhere; }
.fin-status-warn { color: var(--orange-fg); font-weight: 600; }
/* Block 1: Liquiditaetskopf */
.fin-head .kpi-value { font-variant-numeric: tabular-nums; }
.fin-breakdown { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 4px; color: var(--text-muted); }
.fin-breakdown li { display: flex; justify-content: space-between; gap: var(--sp-3); }
/* Block 1: Liquiditaetskopf. Die Doppelklasse schlaegt die Handy-Regel von .stats (3 Spalten wuerden die breite dritte Kennzahl abschneiden). */
.stats.fin-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 48px; margin: 0; }
.stats.fin-head .sub { font-size: 13px; line-height: 20px; color: var(--text-2); }
.fin-breakdown { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.fin-breakdown li { display: flex; justify-content: space-between; gap: 12px; }
.fin-breakdown .fin-amount { color: var(--text); }
.fin-breakdown-total { border-top: 1px solid var(--border-strong); padding-top: 4px; font-weight: 700; color: var(--text); }
.fin-lows { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 10px; align-items: baseline; font-size: 14px; font-weight: 600; }
.fin-breakdown-total { border-top: 1px solid var(--line); padding-top: 4px; font-weight: 600; color: var(--text); }
.fin-lows { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.fin-low { display: contents; }
.fin-low-label { color: var(--text-muted); }
.fin-low .fin-amount { font-size: 20px; font-weight: 800; }
.fin-low-when { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.fin-low-label, .fin-low-when { font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.fin-low .fin-amount { font-size: 18px; line-height: 26px; font-weight: 600; }
/* Block 2: Zu erledigen */
.fin-todo-card { overflow: hidden; }
.fin-todos { list-style: none; margin: 0; padding: 0; }
.fin-todo {
display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
padding: 12px var(--sp-4); border-bottom: 1px solid var(--border); border-left: 3px solid var(--border);
}
.fin-todo:last-child { border-bottom: none; }
.fin-todo-hoch { border-left-color: var(--danger); }
.fin-todo-mittel { border-left-color: var(--warn); }
.fin-todos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fin-todo { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fin-todo .badge { justify-self: start; }
.fin-todo-title { font-weight: 700; }
.fin-todo .link { justify-self: end; white-space: nowrap; }
.fin-todo-title { font-weight: 600; }
.fin-todo-text { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.fin-todo .fin-hint { margin-top: 6px; }
.fin-todos-more { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
@media (max-width: 720px) {
.fin-todo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.fin-todo .ui-btn { justify-self: start; }
.fin-todo .msg { margin-top: 6px; }
@media (max-width: 860px) {
.fin-todo { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fin-todo .link { justify-self: start; }
}
/* Bloecke 3-5: Vorschau, Steuer, Abos */
.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fin-neg { color: var(--danger); }
.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (min-width: 1100px) {
.fin-cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.fin-cols-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Block 3: Vorschau (Tabelle; in einer schmalen Karte wird jede Zeile zweizeilig) */
.fin-forecast-card { container-type: inline-size; overflow: hidden; }
.fin-table-wrap { overflow-x: auto; }
.fin-forecast th, .fin-forecast td { padding: 9px 10px; vertical-align: baseline; }
.fin-forecast th.fin-amount { text-align: right; }
.fin-forecast th:first-child, .fin-forecast td:first-child { padding-left: var(--sp-4); }
@@ -769,13 +776,9 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
.fin-abo-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); font-size: 13px; }
/* Block 6 und 7: Rechnungen und Buchungen (Tabellen; in einer schmalen Karte wird jede Zeile ein Raster) */
.fin-block { scroll-margin-top: var(--sp-4); }
.fin-invoices-card, .fin-tx-card { container-type: inline-size; overflow: hidden; }
.fin-toolbar { padding: var(--sp-3) var(--sp-4); }
.fin-toolbar .seg { flex-wrap: wrap; max-width: 100%; }
.fin-notice { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.fin-load-error { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-4); }
.fin-page-notice { margin-bottom: var(--sp-4); }
.fin-ages {
list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3);
@@ -954,6 +957,8 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
.fin-bank-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* ===== ENDE FINANZEN ===== */
/* ===== Tickets (P2) ===== */
/* Arbeitsblatt-Zeilen, Zeilenlinks, Nachladen und Unterstuetzungs-Zeile. Steht direkt vor KOMPAT: gewinnt ueber die Bausteinregeln */
/* oberhalb durch die Reihenfolge, nie durch eine Erzwingung. */
@@ -1340,6 +1345,4 @@ div.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.page .field { margin-bottom: 12px; }
.dialog-body .field, .field-row .field, .field-row-3 .field, .kv .field { margin-bottom: 0; }
/* Kennzahlen nebeneinander (LiquidityHead), bis P7 sie ersetzt */
.kpi-grid { display: flex; flex-wrap: wrap; gap: 48px; }
/* ===== ENDE KOMPAT ===== */