FDS2610/Finanzmanager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix n.n.: Rahmen, Schatten und Tabs im Design – hellblauer Bereichsrand in beiden Themen

Browse source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
fds2610-bot 2026-10-01 10:45:43 +02:00
parent ae33420478
commit 39e28385f4
2 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Changes.md
View file

@ -1,5 +1,11 @@
# Änderungen
## Rahmen, Schatten und Tabs im Design (01.10.2026)
- Tabellen (`table.liste`), Kacheln und breite Formulare (`.formular.breit`, u. a. Einstellungen) erhalten in beiden Themen einen 1px breiten hellblauen Rand (`--bereichsrand`) und einen leichten Schatten (`--bereichsschatten`) für mehr Kontrast zwischen den Bereichen.
- Titelleiste und Tab-Leiste: Linie im Stil des Bereichsrands, dazu ein schmaler Schatten nach unten.
- Aktiver Tab und rechtsbündiger Tab („Kacheln wählen“, „Regeln“) haben im dunklen Thema einen abgesetzten blauen Rand (`--tabrand`).
## Automatische Buchungsnummer (01.10.2026)
- Neue Buchungen ohne Nummer erhalten beim Anlegen die nächste laufende Nummer ihres Kontos (höchste rein numerische Nummer + 1, `Buchung::naechsteNummer()`). Vorgegebene Nummern (QIF, CSV, Formular) bleiben, bestehende Buchungen werden nicht verändert; die interne ID bleibt verborgen.

39
public/static/app.css
View file

@ -31,6 +31,10 @@
--negativ: #c0392b;
--warnung: #9a6700;
--schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
--bereichsrand: 1px solid #a9c4ea;
--bereichsschatten: 0 0 10px 3px #c3cbd5;
--bereichsschatten-farbe: #c3cbd5;
--tabrand: var(--rand);
--radius: 6px;
--schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@ -59,6 +63,10 @@
--negativ: #f0705f;
--warnung: #d9a441;
--schatten: 0 1px 2px rgba(0, 0, 0, .4);
--bereichsrand: 1px solid #3f6cb0;
--bereichsschatten: 0 0 10px 3px #243b62;
--bereichsschatten-farbe: #243b62;
--tabrand: #345a94;
}
}
@ -83,6 +91,10 @@
--negativ: #f0705f;
--warnung: #d9a441;
--schatten: 0 1px 2px rgba(0, 0, 0, .4);
--bereichsrand: 1px solid #3f6cb0;
--bereichsschatten: 0 0 10px 3px #243b62;
--bereichsschatten-farbe: #243b62;
--tabrand: #345a94;
}
* { box-sizing: border-box; }
@ -235,7 +247,8 @@ code {
gap: 1rem;
padding: .85rem 1.5rem;
background: var(--flaeche);
border-bottom: 1px solid var(--rand);
border-bottom: var(--bereichsrand);
box-shadow: 0 4px 6px -3px var(--bereichsschatten-farbe);
position: sticky;
top: 0;
z-index: 10;
@ -316,7 +329,8 @@ form.inline { display: inline; margin: 0; }
.tableiste {
display: flex;
gap: .25rem;
border-bottom: 1px solid var(--rand);
border-bottom: var(--bereichsrand);
box-shadow: 0 3px 4px -3px var(--bereichsschatten-farbe);
margin-bottom: 1.25rem;
overflow-x: auto;
}
@ -335,11 +349,17 @@ form.inline { display: inline; margin: 0; }
/* Schiebt einen Eintrag ans andere Ende der Leiste – etwa „Kacheln wählen“, das
kein Register ist, sondern ein Weg hinaus. */
.tab.rechtsbuendig { margin-left: auto; }
.tab.rechtsbuendig {
margin-left: auto;
background: var(--flaeche);
border-color: var(--tabrand);
margin-bottom: -1px;
padding-bottom: calc(.5rem + 1px);
}
.tab.aktiv {
background: var(--flaeche);
border-color: var(--rand);
border-color: var(--tabrand);
color: var(--text);
font-weight: 500;
margin-bottom: -1px;
@ -356,9 +376,9 @@ form.inline { display: inline; margin: 0; }
.kachel {
background: var(--flaeche);
border: 1px solid var(--rand);
border: var(--bereichsrand);
border-radius: var(--radius);
box-shadow: var(--schatten);
box-shadow: var(--bereichsschatten);
padding: 1rem 1.15rem 1.25rem;
}
@ -744,8 +764,9 @@ table.liste {
width: 100%;
border-collapse: collapse;
background: var(--flaeche);
border: 1px solid var(--rand);
border: var(--bereichsrand);
border-radius: var(--radius);
box-shadow: var(--bereichsschatten);
overflow: hidden;
font-size: .92rem;
}
@ -1409,10 +1430,10 @@ table.liste th.bargeldspalte {
.formular.breit {
max-width: 620px;
background: var(--flaeche);
border: 1px solid var(--rand);
border: var(--bereichsrand);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: var(--schatten);
box-shadow: var(--bereichsschatten);
}
.formular label {