/* ============================================================ Finance Manager – Design-Theme (Light + Dark) Zentrale Design-Tokens + Restyling von Bootstrap + neue Komponentenklassen aus dem UI-Redesign. Dark Mode wird über aktiviert (siehe wwwroot/js/theme.js). ============================================================ */ /* ---------- Tokens: Light (Default) ---------- */ :root { --fm-surface-0: #f4f3ef; /* Seitenhintergrund */ --fm-surface-1: #ecebe5; /* App-Chrome / gedämpfte Fläche */ --fm-surface-2: #ffffff; /* Karte */ --fm-text-primary: #1d1d1b; --fm-text-secondary: #5f5e59; --fm-text-muted: #8b8a84; --fm-border: rgba(0, 0, 0, 0.09); --fm-border-strong: rgba(0, 0, 0, 0.16); --fm-accent: #2f6fe0; --fm-accent-rgb: 47, 111, 224; --fm-accent-text: #185fa5; --fm-accent-text-rgb: 24, 95, 165; --fm-accent-bg: #e6f1fb; --fm-accent-border: #b5d4f4; --fm-success-text: #0f6e56; --fm-success-bg: #e1f5ee; --fm-success-border: #9fe1cb; --fm-danger-text: #a32d2d; --fm-danger-bg: #fbeaea; --fm-danger-border: #f0a0a0; --fm-warning-text: #8a5209; --fm-warning-bg: #faeeda; --fm-warning-border: #f3d29a; --fm-radius: 8px; --fm-radius-card: 12px; --fm-radius-pill: 20px; --fm-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fm-overlay: rgba(0, 0, 0, 0.58); --fm-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12); --fm-shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.18); } /* ---------- Tokens: Dark ---------- */ [data-bs-theme="dark"] { --fm-surface-0: #15151a; --fm-surface-1: #1e1e25; --fm-surface-2: #26262e; --fm-text-primary: #f1f0ec; --fm-text-secondary: #a9a8a2; --fm-text-muted: #78776f; --fm-border: rgba(255, 255, 255, 0.11); --fm-border-strong: rgba(255, 255, 255, 0.18); --fm-accent: #4f8ef0; --fm-accent-rgb: 79, 142, 240; --fm-accent-text: #85b7eb; --fm-accent-text-rgb: 133, 183, 235; --fm-accent-bg: #16324f; --fm-accent-border: #24507c; --fm-success-text: #5dcaa5; --fm-success-bg: #0f3d31; --fm-success-border: #1a5a48; --fm-danger-text: #f09595; --fm-danger-bg: #48191a; --fm-danger-border: #79322f; --fm-warning-text: #efb35a; --fm-warning-bg: #3d2a0a; --fm-warning-border: #6a4a12; --fm-overlay: rgba(0, 0, 0, 0.72); --fm-shadow-popover: 0 8px 28px rgba(0, 0, 0, 0.38); --fm-shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.45); } /* ---------- Bootstrap-Variablen an unsere Tokens koppeln ---------- */ :root, [data-bs-theme="dark"] { --bs-body-bg: var(--fm-surface-0); --bs-body-color: var(--fm-text-primary); --bs-secondary-color: var(--fm-text-secondary); --bs-tertiary-color: var(--fm-text-muted); --bs-border-color: var(--fm-border); --bs-border-radius: var(--fm-radius); --bs-border-radius-sm: 6px; --bs-border-radius-lg: var(--fm-radius-card); --bs-primary: var(--fm-accent); --bs-primary-rgb: var(--fm-accent-rgb); --bs-link-color: var(--fm-accent-text); --bs-link-color-rgb: var(--fm-accent-text-rgb); --bs-link-hover-color: var(--fm-accent); --bs-link-hover-color-rgb: var(--fm-accent-rgb); --bs-emphasis-color: var(--fm-text-primary); --bs-heading-color: var(--fm-text-primary); --bs-secondary-bg: var(--fm-surface-1); --bs-tertiary-bg: var(--fm-surface-1); --bs-modal-bg: var(--fm-surface-2); --bs-modal-color: var(--fm-text-primary); --bs-card-bg: var(--fm-surface-2); --bs-card-color: var(--fm-text-primary); --bs-card-border-color: var(--fm-border); --bs-font-sans-serif: var(--fm-font-sans); } /* ---------- Basis ---------- */ html { background-color: var(--fm-surface-0); color-scheme: light; } [data-bs-theme="dark"] { color-scheme: dark; } body { background-color: var(--fm-surface-0); color: var(--fm-text-primary); font-family: var(--fm-font-sans); } ::selection { background-color: var(--fm-accent-bg); color: var(--fm-accent-text); } h1, .h1 { font-size: 1.5rem; } h2, .h2 { font-size: 1.25rem; } h3, .h3 { font-size: 1.125rem; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; color: var(--fm-text-primary); } a { text-decoration: none; } a:hover { text-decoration: underline; } .text-muted { color: var(--fm-text-muted) !important; } .text-body { color: var(--fm-text-primary) !important; } .bg-light { background-color: var(--fm-surface-1) !important; } .bg-white { background-color: var(--fm-surface-2) !important; } .border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--fm-border) !important; } /* ---------- Karten ---------- */ .card { background-color: var(--fm-surface-2); border: 0.5px solid var(--fm-border); border-radius: var(--fm-radius-card); box-shadow: none; } .card.shadow-sm, .card.shadow { box-shadow: none !important; } .card-header { background-color: transparent; border-bottom: 0.5px solid var(--fm-border); font-weight: 500; padding: 0.75rem 1rem; } .card-header.bg-white, .card-header.bg-primary { background-color: transparent !important; color: var(--fm-text-primary) !important; } .card-footer { background-color: transparent; border-top: 0.5px solid var(--fm-border); color: var(--fm-text-secondary); } .card-body { padding: 1rem; } /* Farbige Modal-/Card-Header aus dem Altbestand neutralisieren */ .modal-header.bg-primary, .modal-header.bg-warning { background-color: transparent !important; color: var(--fm-text-primary) !important; border-bottom: 0.5px solid var(--fm-border); } .modal-header.bg-primary .btn-close, .modal-header.bg-warning .btn-close { filter: none; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.4); } /* ---------- Buttons ---------- */ .btn { border-radius: var(--fm-radius); font-weight: 500; --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--fm-accent-bg); } .btn-primary { --bs-btn-bg: var(--fm-accent); --bs-btn-border-color: var(--fm-accent); --bs-btn-hover-bg: var(--fm-accent-text); --bs-btn-hover-border-color: var(--fm-accent-text); --bs-btn-active-bg: var(--fm-accent-text); --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; } .btn-outline-primary { --bs-btn-color: var(--fm-accent-text); --bs-btn-border-color: var(--fm-accent-border); --bs-btn-hover-bg: var(--fm-accent-bg); --bs-btn-hover-border-color: var(--fm-accent-border); --bs-btn-hover-color: var(--fm-accent-text); --bs-btn-active-bg: var(--fm-accent-bg); --bs-btn-active-color: var(--fm-accent-text); } .btn-outline-secondary { --bs-btn-color: var(--fm-text-secondary); --bs-btn-border-color: var(--fm-border-strong); --bs-btn-hover-bg: var(--fm-surface-1); --bs-btn-hover-color: var(--fm-text-primary); --bs-btn-hover-border-color: var(--fm-border-strong); --bs-btn-active-bg: var(--fm-surface-1); } .btn-outline-danger { --bs-btn-color: var(--fm-danger-text); --bs-btn-border-color: var(--fm-danger-border); --bs-btn-hover-bg: var(--fm-danger-bg); --bs-btn-hover-color: var(--fm-danger-text); --bs-btn-hover-border-color: var(--fm-danger-border); } .btn-warning { --bs-btn-bg: var(--fm-warning-text); --bs-btn-border-color: var(--fm-warning-text); --bs-btn-color: #ffffff; --bs-btn-hover-bg: var(--fm-warning-text); --bs-btn-hover-color: #ffffff; --bs-btn-hover-border-color: var(--fm-warning-text); } /* ---------- Formulare ---------- */ .form-control, .form-select { background-color: var(--fm-surface-2); border: 0.5px solid var(--fm-border-strong); border-radius: var(--fm-radius); color: var(--fm-text-primary); } .form-control.bg-light, .form-select.bg-light { background-color: var(--fm-surface-1) !important; } .form-control:focus, .form-select:focus { background-color: var(--fm-surface-2); border-color: var(--fm-accent-border); box-shadow: 0 0 0 0.2rem var(--fm-accent-bg); color: var(--fm-text-primary); } .form-control::placeholder { color: var(--fm-text-muted); } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--fm-surface-1); border-color: var(--fm-border); color: var(--fm-text-muted); opacity: 1; } select option { background-color: var(--fm-surface-2); color: var(--fm-text-primary); } .form-label { font-size: 0.85rem; color: var(--fm-text-secondary); margin-bottom: 0.3rem; } .form-text { color: var(--fm-text-muted); font-size: 0.78rem; } .input-group-text { background-color: var(--fm-surface-1); border: 0.5px solid var(--fm-border-strong); color: var(--fm-text-secondary); } .form-check-input:checked { background-color: var(--fm-accent); border-color: var(--fm-accent); } /* ---------- Tabellen ---------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--fm-text-primary); color: var(--fm-text-primary); } .table > :not(caption) > * > * { background-color: transparent; } .table thead.table-secondary th, .table .table-secondary { background-color: var(--fm-surface-1); color: var(--fm-text-muted); font-weight: 500; border-color: var(--fm-border); } .table .table-primary { --bs-table-bg: var(--fm-accent-bg); --bs-table-color: var(--fm-accent-text); --bs-table-border-color: var(--fm-accent-border); --bs-table-hover-bg: var(--fm-accent-bg); --bs-table-hover-color: var(--fm-accent-text); color: var(--fm-accent-text); } .table .table-primary > * { background-color: var(--bs-table-bg); color: var(--bs-table-color); } .table .table-warning { --bs-table-bg: var(--fm-warning-bg); --bs-table-color: var(--fm-warning-text); --bs-table-border-color: var(--fm-warning-border); --bs-table-hover-bg: var(--fm-warning-bg); --bs-table-hover-color: var(--fm-warning-text); color: var(--fm-warning-text); } .table .table-warning > * { background-color: var(--bs-table-bg); color: var(--bs-table-color); } .table-hover > tbody > tr:hover > * { background-color: var(--fm-surface-1); color: var(--fm-text-primary); } .row-hover-effect:hover { background-color: var(--fm-surface-1); } .table-responsive { border-color: var(--fm-border); } .table-responsive.bg-white { background-color: var(--fm-surface-2) !important; } .fm-scroll-table { position: relative; overflow-x: auto; } .fm-scroll-table::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; pointer-events: none; background: linear-gradient(to right, transparent, var(--fm-surface-2)); } .fm-scroll-table .table { min-width: 680px; } .fm-scroll-table th, .fm-scroll-table td { white-space: nowrap; } .fm-scroll-table .fm-sticky-col { position: sticky; left: 0; z-index: 2; background-color: var(--fm-surface-2); } .fm-scroll-table thead .fm-sticky-col { z-index: 3; background-color: var(--fm-surface-1); } .fm-budget-input { width: 9.5rem; } .fm-money-nowrap, .fm-budget-category-total { white-space: nowrap; } @media (max-width: 767.98px) { .fm-stack-table { overflow: visible; } .fm-stack-table table, .fm-stack-table thead, .fm-stack-table tbody, .fm-stack-table tr, .fm-stack-table th, .fm-stack-table td { display: block; } .fm-stack-table table { width: 100%; } .fm-stack-table thead { display: none; } .fm-stack-table tbody tr { padding: 0.85rem 1rem; border-bottom: 1.5px solid var(--fm-border-strong); } .fm-stack-table tbody tr:last-child { border-bottom: 0; } .fm-stack-table tbody tr.table-primary { background-color: var(--fm-accent-bg); color: var(--fm-accent-text); } .fm-stack-table tbody tr.table-warning { background-color: var(--fm-warning-bg); color: var(--fm-warning-text); } .fm-stack-table td { display: grid; grid-template-columns: minmax(6.8rem, 40%) minmax(0, 1fr); align-items: start; justify-items: start; column-gap: 0.65rem; row-gap: 0.25rem; padding: 0.28rem 0 !important; border: 0; text-align: left !important; width: auto !important; min-width: 0 !important; max-width: none !important; font-size: 0.94rem; line-height: 1.35; white-space: normal !important; overflow-wrap: anywhere; } .fm-stack-table td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / -1; color: var(--fm-text-muted); font-size: 0.72rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: 0; } .fm-stack-table td > * { grid-column: 2; justify-self: start; min-width: 0; max-width: 100%; text-align: left !important; overflow-wrap: anywhere; } .fm-stack-table td:not([data-label^="Aktion"]) > .badge { display: inline; padding-left: 0; padding-right: 0; border: 0; border-radius: 0; background-color: transparent !important; line-height: inherit; } .fm-stack-table td[data-label^="Aktion"] { display: flex; align-items: center; justify-content: flex-end; gap: 0.65rem; text-align: right !important; } .fm-stack-table td[data-label^="Aktion"]::before { flex: 1 1 auto; min-width: 40%; text-align: left; } .fm-stack-table td[data-label^="Aktion"] > * { flex: 0 0 auto; text-align: center !important; } .fm-stack-table td:not([data-label]) { display: block; } .fm-stack-table td:not([data-label])::before { content: none; } .fm-stack-table .text-end, .fm-stack-table .text-md-end { text-align: left !important; } .fm-stack-table .pe-3, .fm-stack-table .ps-3 { padding-left: 0 !important; padding-right: 0 !important; } .fm-stack-table .fm-year-month-strip { width: 100%; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.35rem; } .fm-stack-table .fm-year-month-chip { min-width: 0; width: 100%; min-height: 32px; height: 32px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; } .fm-budget-line-toggle, .fm-budget-category-header, .fm-budget-line-main { min-width: 0; } .fm-budget-line-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; } .fm-budget-line-controls { flex: 0 0 auto; min-width: min(100%, 11.25rem); justify-content: flex-end; } .fm-budget-input { flex: 0 0 clamp(8.25rem, 36vw, 9rem); max-width: 100%; } .fm-budget-input .form-control { min-width: 0; padding-left: 0.35rem; padding-right: 0.35rem; } .fm-budget-input .btn { flex: 0 0 2.75rem; padding-left: 0.55rem; padding-right: 0.55rem; } .fm-budget-category-total { flex: 0 0 auto; font-size: 0.82rem; } } @media (max-width: 575.98px) { .fm-budget-line-main { align-items: flex-start !important; } .fm-budget-line-controls { flex-wrap: wrap; row-gap: 0.25rem; } } /* ---------- Badges ---------- */ .badge { font-weight: 500; border-radius: var(--fm-radius-pill); padding: 0.25em 0.7em; } .badge.bg-secondary { background-color: var(--fm-surface-1) !important; color: var(--fm-text-secondary) !important; } .badge.bg-primary { background-color: var(--fm-accent-bg) !important; color: var(--fm-accent-text) !important; } .badge.bg-success { background-color: var(--fm-success-bg) !important; color: var(--fm-success-text) !important; } .badge.bg-warning { background-color: var(--fm-warning-bg) !important; color: var(--fm-warning-text) !important; } .badge.bg-info { background-color: var(--fm-accent-bg) !important; color: var(--fm-accent-text) !important; } .badge.bg-danger { background-color: var(--fm-danger-bg) !important; color: var(--fm-danger-text) !important; } .badge.bg-light { background-color: var(--fm-surface-1) !important; color: var(--fm-text-secondary) !important; border: 0.5px solid var(--fm-border); } .text-bg-success { background-color: var(--fm-success-bg) !important; color: var(--fm-success-text) !important; } .text-bg-warning { background-color: var(--fm-warning-bg) !important; color: var(--fm-warning-text) !important; } .text-bg-danger { background-color: var(--fm-danger-bg) !important; color: var(--fm-danger-text) !important; } .text-bg-primary, .text-bg-info { background-color: var(--fm-accent-bg) !important; color: var(--fm-accent-text) !important; } .badge.bg-info.text-dark { color: var(--fm-accent-text) !important; } .badge.bg-warning.text-dark { color: var(--fm-warning-text) !important; } .badge.bg-light.text-dark { color: var(--fm-text-secondary) !important; } /* ---------- Farb-Utilities an Tokens koppeln ---------- */ .text-success { color: var(--fm-success-text) !important; } .text-danger { color: var(--fm-danger-text) !important; } .text-warning { color: var(--fm-warning-text) !important; } .text-primary { color: var(--fm-accent-text) !important; } .border-primary { border-color: var(--fm-accent-border) !important; } .border-warning { border-color: var(--fm-warning-border) !important; } .border-danger { border-color: var(--fm-danger-border) !important; } .link-secondary { color: var(--fm-text-secondary) !important; } /* ---------- Alerts ---------- */ .alert { border-radius: var(--fm-radius-card); border: 0.5px solid transparent; } .alert-danger { background-color: var(--fm-danger-bg); color: var(--fm-danger-text); border-color: var(--fm-danger-border); } .alert-warning { background-color: var(--fm-warning-bg); color: var(--fm-warning-text); border-color: var(--fm-warning-border); } .alert-success { background-color: var(--fm-success-bg); color: var(--fm-success-text); border-color: var(--fm-success-border); } .alert-info { background-color: var(--fm-accent-bg); color: var(--fm-accent-text); border-color: var(--fm-accent-border); } .alert-secondary { background-color: var(--fm-surface-1); color: var(--fm-text-secondary); border-color: var(--fm-border); } .alert .alert-link { color: inherit; text-decoration: underline; } /* ---------- Modale ---------- */ .fm-modal-backdrop { background-color: var(--fm-overlay); backdrop-filter: blur(2px); } .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.62; } .modal-content { background-color: var(--fm-surface-2); border: 0.5px solid var(--fm-border); border-radius: var(--fm-radius-card); box-shadow: var(--fm-shadow-modal); } .modal-footer, .modal-header { border-color: var(--fm-border); } .modal-footer.bg-light { background-color: var(--fm-surface-1) !important; } @media (max-width: 991.98px) { .modal.fm-modal-backdrop.show.d-block { display: flex !important; align-items: flex-end; padding: 0; overflow: hidden; } .modal.fm-modal-backdrop { background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); } .modal .modal-dialog, .modal .modal-dialog-centered, .modal .modal-dialog-scrollable { width: 100%; max-width: none; min-height: 0; height: auto; margin: 0; display: block; transform: translateY(0); } .modal .modal-content { max-height: calc(80vh - env(safe-area-inset-bottom, 0px)); overflow: hidden; border: 0; border-radius: 24px 24px 0 0; background-color: var(--fm-surface-2); box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.28); will-change: transform; } .modal .modal-content::before { content: ""; width: 42px; height: 4px; border-radius: 99px; background-color: var(--fm-border-strong); margin: 0.75rem auto 0.35rem; flex: none; } .modal .modal-header { min-height: 46px; padding: 0.45rem 1rem 0.65rem; border-bottom: 0; background-color: var(--fm-surface-2) !important; color: var(--fm-text-primary) !important; cursor: grab; touch-action: none; } .modal .modal-title { font-size: 1.05rem; font-weight: 700; color: var(--fm-text-primary); } .modal .modal-header .btn-close, .modal .modal-header .btn-close-white { display: none; } .modal .modal-body { max-height: calc(80vh - 128px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 0.85rem 1rem 1rem !important; } .modal .modal-footer { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr; gap: 0.55rem; padding: 0.8rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px)); border-top: 0.5px solid var(--fm-border); background-color: var(--fm-surface-2) !important; } .modal .modal-footer > * { width: 100%; margin: 0 !important; } .modal .modal-footer .btn { min-height: 44px; } .modal .modal-footer .fm-modal-cancel { display: none; } .modal .modal-footer:has(.fm-modal-cancel:only-child) { display: none; } } .dropdown-menu { background-color: var(--fm-surface-2); border: 0.5px solid var(--fm-border); border-radius: var(--fm-radius-card); box-shadow: var(--fm-shadow-popover); } .dropdown-item { color: var(--fm-text-primary); } .dropdown-item:hover { background-color: var(--fm-surface-1); } .dropdown-divider { border-color: var(--fm-border); } .list-group-item, .accordion-item, .toast, .popover, .offcanvas { background-color: var(--fm-surface-2); border-color: var(--fm-border); color: var(--fm-text-primary); } .accordion-button { background-color: var(--fm-surface-2); color: var(--fm-text-primary); box-shadow: none; } .accordion-button:not(.collapsed), .accordion-button:focus { background-color: var(--fm-surface-1); color: var(--fm-accent-text); box-shadow: none; } .progress { background-color: var(--fm-surface-1); border-radius: var(--fm-radius-pill); } .progress-bar { background-color: var(--fm-accent); }