/* ========================================================================= Budget Theme Layer (scoped) ------------------------------------------------------------------------- Back-ported from RootBudget's app-wide theme layer, but SCOPED under the .budget-theme wrapper so it only reskins the Budget page and never bleeds into the rest of MyATMM. Aliases MudBlazor's palette CSS variables into semantic --budget-* tokens, then overrides Bootstrap defaults so cards / inputs / buttons / tables / dialogs flip with the rest of the app when the MudThemeProvider IsDarkMode toggles. Loaded AFTER app.css so these rules win without needing !important for most selectors. ========================================================================= */ /* ------------------------------------------------------------------------- SECTION A — Design tokens (scoped to .budget-theme, not :root) ------------------------------------------------------------------------- */ .budget-theme { /* Surfaces — fallbacks cover the bootstrap window before MudBlazor emits --mud-palette-* vars, so elements rendered during the Blazor loading screen still look correct. */ --budget-bg: var(--mud-palette-background, #ffffff); --budget-surface: var(--mud-palette-surface, #ffffff); --budget-surface-alt: var(--mud-palette-background-gray, #f5f5f5); --budget-surface-raised: var(--mud-palette-gray-lighter, #f9f9f9); /* Text */ --budget-text: var(--mud-palette-text-primary, #212529); --budget-text-muted: var(--mud-palette-text-secondary, #6c757d); --budget-text-disabled: var(--mud-palette-text-disabled, #adb5bd); /* Borders / lines */ --budget-border: var(--mud-palette-lines-default, #dee2e6); --budget-divider: var(--mud-palette-divider, #dee2e6); --budget-table-lines: var(--mud-palette-table-lines, #dee2e6); /* Brand + status */ --budget-primary: var(--mud-palette-primary, #2e7d32); --budget-primary-text: var(--mud-palette-primary-text, #ffffff); --budget-success: var(--mud-palette-success, #2e7d32); --budget-danger: var(--mud-palette-error, #dc3545); --budget-warning: var(--mud-palette-warning, #ffc107); --budget-info: var(--mud-palette-info, #0dcaf0); /* Component tokens */ --budget-card-bg: var(--budget-surface); --budget-card-header-bg: color-mix(in srgb, var(--budget-primary) 12%, var(--budget-surface)); --budget-input-bg: var(--budget-surface); --budget-input-border: var(--budget-border); --budget-input-focus: var(--budget-primary); --budget-input-placeholder: var(--budget-text-muted); --budget-table-stripe: color-mix(in srgb, var(--budget-surface) 94%, var(--budget-primary) 6%); --budget-table-hover: color-mix(in srgb, var(--budget-surface) 86%, var(--budget-primary) 14%); --budget-modal-overlay: rgba(0, 0, 0, 0.55); --budget-scrollbar-track: var(--budget-surface-alt); --budget-scrollbar-thumb: var(--mud-palette-action-default); /* Focus ring (2-stop, modern look) */ --budget-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--budget-primary) 35%, transparent); /* Form-select arrow — medium gray readable on both light and dark bg. (Hardcoded because CSS vars can't live inside url() data URIs cleanly.) */ --budget-select-arrow-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a8a95' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* The wrapper itself carries the page background/text (RootBudget applied this to ; scoped here it stays on the Budget page only). */ background-color: var(--budget-bg); color: var(--budget-text); } /* ------------------------------------------------------------------------- SECTION B — Base elements ------------------------------------------------------------------------- */ .budget-theme hr { border: 0; border-top: 1px solid var(--budget-divider); opacity: 1; /* Bootstrap sets hr opacity: 0.25 which kills visibility in dark */ } .budget-theme a { color: var(--budget-primary); } .budget-theme a:hover { color: color-mix(in srgb, var(--budget-primary) 80%, var(--budget-text)); } /* ------------------------------------------------------------------------- SECTION C — Bootstrap Card overrides ------------------------------------------------------------------------- */ .budget-theme .card { background-color: var(--budget-card-bg); color: var(--budget-text); border: 1px solid var(--budget-border); } .budget-theme .card-header { background-color: var(--budget-card-header-bg); border-bottom: 1px solid var(--budget-border); color: var(--budget-text); } .budget-theme .card-footer { background-color: var(--budget-card-header-bg); border-top: 1px solid var(--budget-border); color: var(--budget-text); } .budget-theme .card-body { color: var(--budget-text); } .budget-theme .login-card { border: 1px solid var(--budget-border); border-top: 4px solid var(--budget-primary); border-radius: 0.75rem; box-shadow: 0 10px 36px rgba(46, 125, 50, 0.18); } .budget-theme .login-card h2 { color: var(--budget-primary); font-weight: 700; letter-spacing: 0.5px; } /* ------------------------------------------------------------------------- SECTION D — Inputs and selects ------------------------------------------------------------------------- */ .budget-theme .form-control, .budget-theme .form-select { background-color: var(--budget-input-bg); color: var(--budget-text); border: 1px solid var(--budget-input-border); } .budget-theme .form-control::placeholder { color: var(--budget-input-placeholder); opacity: 1; } .budget-theme .form-control:focus, .budget-theme .form-select:focus { background-color: var(--budget-input-bg); color: var(--budget-text); border-color: var(--budget-input-focus); box-shadow: var(--budget-focus-ring); } .budget-theme .form-control:disabled, .budget-theme .form-control[readonly], .budget-theme .form-select:disabled { background-color: var(--budget-surface-alt); color: var(--budget-text-muted); border-color: var(--budget-border); opacity: 1; } /* Bootstrap's default arrow is a dark SVG; swap for theme-neutral gray */ .budget-theme .form-select { background-image: var(--budget-select-arrow-url); } .budget-theme .form-label { color: var(--budget-text); } /* Native / */ .budget-theme .form-check-input { background-color: var(--budget-input-bg); border: 1px solid var(--budget-input-border); } .budget-theme .form-check-input:checked { background-color: var(--budget-primary); border-color: var(--budget-primary); } .budget-theme .form-check-input:focus { border-color: var(--budget-input-focus); box-shadow: var(--budget-focus-ring); } .budget-theme .form-check-label { color: var(--budget-text); } /* File input (used in Import dialog) */ .budget-theme .form-control[type="file"]::-webkit-file-upload-button, .budget-theme .form-control[type="file"]::file-selector-button { background-color: var(--budget-surface-alt); color: var(--budget-text); border: 0; border-right: 1px solid var(--budget-border); } /* ------------------------------------------------------------------------- SECTION E — Buttons ------------------------------------------------------------------------- */ .budget-theme .progress-bar { background-color: var(--budget-primary); } .budget-theme .btn-primary { background-color: var(--budget-primary); border-color: var(--budget-primary); color: var(--budget-primary-text); } .budget-theme .btn-primary:hover, .budget-theme .btn-primary:focus { background-color: color-mix(in srgb, var(--budget-primary) 85%, black); border-color: color-mix(in srgb, var(--budget-primary) 85%, black); color: var(--budget-primary-text); box-shadow: var(--budget-focus-ring); } .budget-theme .btn-primary:disabled, .budget-theme .btn-primary.disabled { background-color: color-mix(in srgb, var(--budget-primary) 55%, var(--budget-surface)); border-color: color-mix(in srgb, var(--budget-primary) 55%, var(--budget-surface)); color: var(--budget-primary-text); opacity: 0.75; } .budget-theme .btn-outline-primary { color: var(--budget-primary); border-color: var(--budget-primary); } .budget-theme .btn-outline-primary:hover { background-color: var(--budget-primary); border-color: var(--budget-primary); color: var(--budget-primary-text); } .budget-theme .btn-danger { background-color: var(--budget-danger); border-color: var(--budget-danger); color: #fff; } .budget-theme .btn-secondary { background-color: var(--budget-surface-alt); border-color: var(--budget-border); color: var(--budget-text); } .budget-theme .btn-secondary:hover { background-color: var(--budget-border); border-color: var(--budget-border); color: var(--budget-text); } /* ------------------------------------------------------------------------- SECTION F — Tables ------------------------------------------------------------------------- */ .budget-theme .table { --bs-table-bg: transparent; --bs-table-color: var(--budget-text); --bs-table-border-color: var(--budget-table-lines); --bs-table-striped-bg: var(--budget-table-stripe); --bs-table-striped-color: var(--budget-text); --bs-table-hover-bg: var(--budget-table-hover); --bs-table-hover-color: var(--budget-text); color: var(--budget-text); border-color: var(--budget-table-lines); } .budget-theme .table > :not(caption) > * > * { background-color: transparent; color: var(--budget-text); border-bottom-color: var(--budget-table-lines); } .budget-theme .table-borderless > :not(caption) > * > * { border-bottom: 0; } .budget-theme .table-hover > tbody > tr:hover > * { background-color: var(--budget-table-hover); color: var(--budget-text); } /* ------------------------------------------------------------------------- SECTION G — Bootstrap utility color overrides for theme consistency ------------------------------------------------------------------------- */ .budget-theme .text-primary { color: var(--budget-primary) !important; } .budget-theme .text-success { color: var(--budget-success) !important; } .budget-theme .text-danger { color: var(--budget-danger) !important; } .budget-theme .text-warning { color: var(--budget-warning) !important; } .budget-theme .text-info { color: var(--budget-info) !important; } .budget-theme .text-muted { color: var(--budget-text-muted) !important; } .budget-theme .bg-primary { background-color: var(--budget-primary) !important; color: var(--budget-primary-text) !important; } .budget-theme .bg-success { background-color: var(--budget-success) !important; } .budget-theme .bg-danger { background-color: var(--budget-danger) !important; } .budget-theme .bg-warning { background-color: var(--budget-warning) !important; } .budget-theme .bg-info { background-color: var(--budget-info) !important; } /* ------------------------------------------------------------------------- SECTION H — Alerts ------------------------------------------------------------------------- */ .budget-theme .alert-info { background-color: color-mix(in srgb, var(--budget-info) 14%, var(--budget-surface)); border-color: color-mix(in srgb, var(--budget-info) 40%, transparent); color: var(--budget-text); } .budget-theme .alert-danger { background-color: color-mix(in srgb, var(--budget-danger) 14%, var(--budget-surface)); border-color: color-mix(in srgb, var(--budget-danger) 40%, transparent); color: var(--budget-text); } .budget-theme .alert-warning { background-color: color-mix(in srgb, var(--budget-warning) 18%, var(--budget-surface)); border-color: color-mix(in srgb, var(--budget-warning) 45%, transparent); color: var(--budget-text); } .budget-theme .alert-success { background-color: color-mix(in srgb, var(--budget-success) 14%, var(--budget-surface)); border-color: color-mix(in srgb, var(--budget-success) 40%, transparent); color: var(--budget-text); } /* ------------------------------------------------------------------------- SECTION I — Scrollbar polish (scoped to elements inside .budget-theme) ------------------------------------------------------------------------- */ .budget-theme * { scrollbar-color: var(--budget-scrollbar-thumb) var(--budget-scrollbar-track); scrollbar-width: thin; } .budget-theme *::-webkit-scrollbar { width: 10px; height: 10px; } .budget-theme *::-webkit-scrollbar-track { background-color: var(--budget-scrollbar-track); } .budget-theme *::-webkit-scrollbar-thumb { background-color: var(--budget-scrollbar-thumb); border-radius: 6px; border: 2px solid var(--budget-scrollbar-track); } .budget-theme *::-webkit-scrollbar-thumb:hover { background-color: var(--budget-primary); }