rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Ausgaben-Formular redesigned — Kategorie-Kacheln, €-Prefix, Wiederholungs-Toggle, SW by-v607

Browse source
This commit is contained in:
rene 2026-05-02 10:58:47 +02:00
parent c96e98917c
commit dfd68f2a07
4 changed files with 173 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

81
backend/static/css/components.css
View file

@ -7435,3 +7435,84 @@ svg.empty-state-icon {
}
.exp-icon-btn:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.exp-icon-btn--danger:hover { color: var(--c-danger); border-color: var(--c-danger); }
/* Ausgaben-Formular — Kategorie-Kacheln */
.exp-kat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
}
.exp-kat-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: var(--space-3) var(--space-2);
border: 1.5px solid var(--c-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color .15s, background .15s;
background: var(--c-surface);
user-select: none;
}
.exp-kat-tile:hover { border-color: var(--c-primary); }
.exp-kat-tile--sel {
border-color: var(--c-primary);
background: var(--c-primary-subtle);
}
.exp-kat-tile-icon { font-size: 1.4rem; line-height: 1; }
.exp-kat-tile-label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--c-text-secondary);
text-align: center;
}
.exp-kat-tile--sel .exp-kat-tile-label { color: var(--c-primary); }
/* Betrag-Feld mit €-Prefix */
.exp-betrag-wrap {
position: relative;
display: flex;
align-items: center;
}
.exp-betrag-prefix {
position: absolute;
left: var(--space-3);
color: var(--c-text-muted);
font-weight: var(--weight-semibold);
pointer-events: none;
}
.exp-betrag-input { padding-left: calc(var(--space-3) + 14px + var(--space-2)) !important; }
/* Form-Label Hint */
.form-label-hint { color: var(--c-text-muted); font-weight: normal; font-size: var(--text-xs); }
/* Wiederholungs-Sektion */
.exp-repeat-section {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--c-border-light);
}
.exp-repeat-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--c-text);
user-select: none;
}
.exp-repeat-toggle-box {
width: 18px;
height: 18px;
border: 1.5px solid var(--c-border);
border-radius: var(--radius-sm);
background: var(--c-surface);
flex-shrink: 0;
transition: background .15s, border-color .15s;
}
.exp-repeat-toggle input:checked ~ .exp-repeat-toggle-box {
background: var(--c-primary);
border-color: var(--c-primary);
}