diff --git a/src/main.jsx b/src/main.jsx index b178c21..ce54d96 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -129,7 +129,7 @@ function Dashboard({totals,onToggle}){
Periodische Kosten in Monats-Saldo einrechnenJährliche, halbjährliche und vierteljährliche Beträge werden auf einen Monatswert heruntergerechnet.
=0} negative={totals.balance<0} featured/>
{!totals.includePeriodic&&totals.periodicExpenseReserve>0&&
Periodische Ausgaben von rechnerisch {formatMoney(totals.periodicExpenseReserve)} / Monat sind derzeit nicht im Saldo enthalten.
} -

Saldo je Konto

Monatliche Fixwerte plus optional heruntergerechnete periodische Werte.

{totals.accounts.length===0?:
{totals.accounts.map(s=>

{s.account.name}

=0?'pill good':'pill bad'}>{s.balance>=0?'+':''}{formatMoney(s.balance)}
=0?'good-text':'bad-text'}`}>{formatMoney(s.balance)}
monatlicher Fix-Saldo
Eingänge+{formatMoney(s.income)}
Ausgänge−{formatMoney(s.expense)}
Transfers rein+{formatMoney(s.transferIn)}
Transfers raus−{formatMoney(s.transferOut)}
)}
}
+

Saldo je Konto

Monatliche Fixwerte plus optional heruntergerechnete periodische Werte.

{totals.accounts.length===0?:
{totals.accounts.map(s=>

{s.account.name}

monatlicher Fix-Saldo
=0?'good-text':'bad-text'}`}>{s.balance>=0?'+':''}{formatMoney(s.balance)}
Eingänge+{formatMoney(s.income)}
Ausgänge−{formatMoney(s.expense)}
Transfers rein+{formatMoney(s.transferIn)}
Transfers raus−{formatMoney(s.transferOut)}
)}
}
GESAMT

Monatlich nach Fixkosten übrig

Interne Transfers verändern den Gesamtsaldo nicht.

=0?'good-text':'bad-text'}`}>{formatMoney(totals.balance)}
; } diff --git a/src/styles.css b/src/styles.css index 101f743..223eb0f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -212,3 +212,78 @@ code { color:#b8c3ff; } @media (max-width: 760px) { .mobile-nav { grid-template-columns:repeat(7,minmax(50px,1fr)); } } + +/* v3.2: kompakte Kontosalden als Akkordeon */ +.account-balance-list { + display:grid; + gap:10px; +} +.account-balance-card { + background:#0d131c; + border:1px solid #29364a; + border-radius:14px; + overflow:hidden; +} +.account-balance-card[open] { + border-color:#46577a; + background:#0f1621; +} +.account-balance-card summary { + list-style:none; + cursor:pointer; + display:grid; + grid-template-columns:minmax(0,1fr) auto 22px; + gap:14px; + align-items:center; + min-height:68px; + padding:12px 15px; + user-select:none; +} +.account-balance-card summary::-webkit-details-marker { display:none; } +.account-balance-title { min-width:0; } +.account-balance-title h3 { + margin:0; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; +} +.account-balance-title span { + display:block; + margin-top:2px; + color:var(--muted); + font-size:11px; +} +.account-balance-value { + font-size:19px; + font-weight:850; + letter-spacing:-.035em; + white-space:nowrap; +} +.account-balance-card[open] .accordion-chevron { transform:rotate(180deg); } +.account-balance-details { + border-top:1px solid #202a39; + padding:0 15px 13px; +} +.account-balance-details .mini-grid { + margin-top:0; + padding-top:13px; +} + +@media (max-width:760px) { + .account-balance-list { gap:8px; } + .account-balance-card summary { + grid-template-columns:minmax(0,1fr) auto 18px; + gap:8px; + min-height:58px; + padding:9px 10px; + } + .account-balance-title h3 { font-size:14px; } + .account-balance-title span { font-size:9px; } + .account-balance-value { font-size:16px; } + .account-balance-card .accordion-chevron { font-size:17px; } + .account-balance-details { padding:0 10px 10px; } + .account-balance-details .mini-grid { + gap:8px; + padding-top:10px; + } +}