285 lines
6.2 KiB
CSS
285 lines
6.2 KiB
CSS
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
color: #222;
|
|
background: #fff;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
row-gap: 0.4rem;
|
|
align-items: center;
|
|
border-bottom: 1px solid #ccc;
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: #fff;
|
|
}
|
|
|
|
nav a {
|
|
text-decoration: none;
|
|
color: #06c;
|
|
}
|
|
|
|
nav form {
|
|
margin-left: auto;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #ddd;
|
|
padding: 0.4rem 0.6rem;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background: #fafafa;
|
|
}
|
|
|
|
.neg {
|
|
color: #b00;
|
|
}
|
|
|
|
.amount {
|
|
text-align: right;
|
|
}
|
|
|
|
td.account {
|
|
word-break: break-all;
|
|
max-width: 12rem;
|
|
}
|
|
|
|
.warning {
|
|
background: #fff3cd;
|
|
border: 1px solid #e0c26b;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.success {
|
|
background: #d4edda;
|
|
border: 1px solid #7bc088;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.total-balance {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
fieldset {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
form.filter-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: end;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
form.filter-form label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
iframe.grafana {
|
|
width: 100%;
|
|
height: 480px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.15rem 0.6rem;
|
|
border-radius: 999px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.badge-warning {
|
|
background: #fff3cd;
|
|
color: #7a5c00;
|
|
}
|
|
|
|
.badge-error {
|
|
background: #fdecea;
|
|
color: #b00020;
|
|
}
|
|
|
|
.badge-ok {
|
|
background: #e6f4ea;
|
|
color: #1e7e34;
|
|
}
|
|
|
|
#dropzone {
|
|
border: 2px dashed #999;
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-bottom: 0.5rem;
|
|
color: #555;
|
|
}
|
|
|
|
#dropzone.dragover {
|
|
background: #f0f6ff;
|
|
border-color: #06c;
|
|
}
|
|
|
|
.inline-form {
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.muted {
|
|
color: #888;
|
|
}
|
|
|
|
section.planning-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
section.planning-section fieldset {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.version {
|
|
margin-top: 2rem;
|
|
color: #888;
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Ausbaustufe 7: Formular-Paare als Einheit, gesperrte Felder erkennbar. */
|
|
.entry-form label,
|
|
.planning-section form label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin: 0 1.25rem 0.6rem 0;
|
|
white-space: nowrap;
|
|
}
|
|
.entry-form select,
|
|
.planning-section form select {
|
|
max-width: 14rem;
|
|
}
|
|
.entry-form .entry-art {
|
|
display: block;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.entry-form .entry-art > label { font-weight: bold; }
|
|
.entry-form .entry-art .muted { margin-left: 0.5rem; }
|
|
input:disabled, select:disabled {
|
|
background: #e3e3e3;
|
|
color: #8a8a8a;
|
|
cursor: not-allowed;
|
|
}
|
|
label:has(input:disabled), label:has(select:disabled) {
|
|
opacity: 0.55;
|
|
}
|
|
.project-block {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Sortier-Buttons in Spaltenköpfen (Ausbaustufe 11, static/sort.js). */
|
|
.sort-btn {
|
|
border: none;
|
|
background: none;
|
|
padding: 0 0.2rem;
|
|
margin: 0;
|
|
font-size: 0.8em;
|
|
color: #888;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.sort-btn.active {
|
|
color: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Doppelzählung Kredit/Fixposten (Ausbaustufe 12). */
|
|
.warn-hint {
|
|
display: block;
|
|
font-size: 0.8em;
|
|
color: #b45309;
|
|
}
|
|
#doppelzaehlung-dialog {
|
|
max-width: 32rem;
|
|
}
|
|
|
|
/* Aufteilung (Ausbaustufe 13). Tortenfarben: dataviz-Referenzpalette,
|
|
Slots 1-8 (Nachbarpaare inkl. Kreisschluss und Grautöne CVD-validiert auf
|
|
weißem Grund); Übrige/Frei neutral. Max. 8 benannte + Übrige + Frei. */
|
|
.aufteilung {
|
|
--seg-1: #2a78d6; --seg-2: #eb6834; --seg-3: #1baf7a; --seg-4: #eda100;
|
|
--seg-5: #e87ba4; --seg-6: #008300; --seg-7: #4a3aa7; --seg-8: #e34948;
|
|
--seg-uebrige: #8a8984; --seg-frei: #d6d5cf;
|
|
}
|
|
.kennzahlen { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; }
|
|
.kennzahlen div { display: flex; flex-direction: column; }
|
|
.kennzahlen strong { font-size: 1.25rem; }
|
|
.tabelle-scroll { overflow-x: auto; }
|
|
/* Torte: schmal untereinander, breit SVG neben Legende */
|
|
.torte { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
|
|
@media (min-width: 700px) {
|
|
.torte { grid-template-columns: 280px minmax(0, 1fr); }
|
|
.torte figcaption { grid-column: 1 / -1; }
|
|
}
|
|
.torte figcaption { font-weight: bold; margin-bottom: 0.5rem; }
|
|
.torte-svg { width: 100%; max-width: 280px; display: block; margin: 0 auto; }
|
|
.torte-svg .seg { stroke: #fff; stroke-width: 0.02; }
|
|
.seg.s1 { fill: var(--seg-1); } .swatch.s1 { background: var(--seg-1); }
|
|
.seg.s2 { fill: var(--seg-2); } .swatch.s2 { background: var(--seg-2); }
|
|
.seg.s3 { fill: var(--seg-3); } .swatch.s3 { background: var(--seg-3); }
|
|
.seg.s4 { fill: var(--seg-4); } .swatch.s4 { background: var(--seg-4); }
|
|
.seg.s5 { fill: var(--seg-5); } .swatch.s5 { background: var(--seg-5); }
|
|
.seg.s6 { fill: var(--seg-6); } .swatch.s6 { background: var(--seg-6); }
|
|
.seg.s7 { fill: var(--seg-7); } .swatch.s7 { background: var(--seg-7); }
|
|
.seg.s8 { fill: var(--seg-8); } .swatch.s8 { background: var(--seg-8); }
|
|
.seg.uebrige { fill: var(--seg-uebrige); } .swatch.uebrige { background: var(--seg-uebrige); }
|
|
.seg.frei { fill: var(--seg-frei); } .swatch.frei { background: var(--seg-frei); box-shadow: inset 0 0 0 1px #aaa; }
|
|
.legende { list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: 0.9rem; }
|
|
.legende li { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; padding: 0.15rem 0; }
|
|
.swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; flex: none; }
|
|
.legende-wert { margin-left: auto; color: #555; white-space: nowrap; }
|
|
.hinweis-klein { font-size: 0.85rem; color: #555; }
|
|
|
|
.torte-svg .seg.klickbar { cursor: pointer; }
|
|
.torte-svg .seg.klickbar:hover { opacity: 0.85; }
|
|
.torte-svg .seg.gewaehlt { stroke: #222; stroke-width: 0.05; }
|
|
.legende li.gewaehlt { font-weight: bold; }
|
|
.legende-zusatz { font-weight: normal; color: #666; }
|
|
#aufteilung-kategorie h2 { font-size: 1.1rem; margin-top: 1.5rem; }
|