/** * Központi téma – AppThemeManager (NavigationShell, BootstrapSemantic, DataGridTypography). */ :root { /* --- NavigationShell (MudBlazor AppBar, Drawer) --- */ --app-color-primary: #1b6ec2; --app-color-primary-dark: #1861ac; --app-color-secondary: #7b1fa2; --app-color-success: #06d79c; --app-color-surface: #ffffff; --app-color-background: #f5f5f5; --app-color-gray-medium: #e0e0e0; --app-color-table-header: #e9ecef; --app-color-modal-overlay: rgba(0, 0, 0, 0.5); --app-color-drawer-text: rgba(0, 0, 0, 0.7); --app-color-page-bg: var(--app-color-background); --app-color-card-bg: var(--app-color-surface); --app-color-tab-toolbar-bg: var(--app-color-gray-medium); --app-color-table-header-bg: var(--app-color-table-header); --app-color-card-header-bg: var(--app-color-table-header); --app-color-tab-panel-bg: var(--app-color-surface); --app-color-appbar-bg: var(--app-color-primary); --app-color-drawer-bg: var(--app-color-surface); --app-color-gray-light: var(--app-color-background); --app-color-footer-bg: var(--app-color-gray-medium); /* Lábléc: ennyivel magasabb a főblokk min-height a fejléc alatti nézetnél, hogy betöltéskor ne lógjon be a lábléc */ --app-footer-below-fold-gap: 12px; --app-color-link: var(--app-color-primary); /* --- BootstrapSemantic (lista, gombok, ikonok; AppThemeManager.BootstrapSemantic) --- */ --app-icon-primary: #0d6efd; --app-icon-primary-rgb: 13, 110, 253; --app-icon-secondary: #6c757d; --app-icon-secondary-rgb: 108, 117, 125; --app-icon-success: #198754; --app-icon-success-rgb: 25, 135, 84; --app-icon-info: #0dcaf0; --app-icon-info-rgb: 13, 202, 240; --app-icon-warning: #ffc107; --app-icon-warning-rgb: 255, 193, 7; --app-icon-danger: #dc3545; --app-icon-danger-rgb: 220, 53, 69; --app-icon-on-filled: #ffffff; --bs-primary: var(--app-icon-primary); --bs-primary-rgb: var(--app-icon-primary-rgb); --bs-secondary: var(--app-icon-secondary); --bs-secondary-rgb: var(--app-icon-secondary-rgb); --bs-success: var(--app-icon-success); --bs-success-rgb: var(--app-icon-success-rgb); --bs-info: var(--app-icon-info); --bs-info-rgb: var(--app-icon-info-rgb); --bs-warning: var(--app-icon-warning); --bs-warning-rgb: var(--app-icon-warning-rgb); --bs-danger: var(--app-icon-danger); --bs-danger-rgb: var(--app-icon-danger-rgb); --bs-link-color: var(--app-icon-primary); /* --- Tipográfia --- */ --app-line-height-body: 1.5; --app-font-scale: 1.0625; --app-font-size-base: 1rem; --app-font-size-body1: 1rem; --app-font-size-body2: 0.875rem; --app-font-size-table-cell: 1.125rem; --app-font-size-table-header: 1.125rem; --app-font-size-table-filter: 1rem; --app-table-card-header-btn-col-max: 11rem; --app-table-card-header-btn-font-size: 0.875rem; --app-font-size-caption: 0.875rem; --app-font-size-compact-label: 0.8125rem; --app-font-size-h4: 1.5rem; --app-font-size-h6: 1rem; --app-font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Liberation Sans', sans-serif; /* * Radzen gombok / lapozó: egyezzen az app (Bootstrap) betűstackkel. * DataGrid „króm” színei: .app-invoices-radzen-page (ne írjuk felül a többi Radzen oldalt). */ --rz-ui-font-family: var(--app-font-family); --rz-text-font-family: var(--app-font-family); --rz-text-body1-font-size: var(--app-font-size-body1); --rz-text-body1-line-height: var(--app-line-height-body); --rz-text-body2-font-size: var(--app-font-size-body2); --rz-text-body2-line-height: var(--app-line-height-body); --rz-text-caption-font-size: var(--app-font-size-caption); --rz-text-caption-line-height: var(--app-line-height-body); --rz-text-button-font-size: var(--app-font-size-body2); --rz-text-button-line-height: var(--app-line-height-body); --rz-text-subtitle1-font-size: var(--app-font-size-body1); --rz-text-subtitle1-line-height: var(--app-line-height-body); --rz-text-subtitle2-font-size: var(--app-font-size-body2); --rz-text-subtitle2-line-height: var(--app-line-height-body); --rz-text-overline-font-size: var(--app-font-size-compact-label); --rz-text-overline-line-height: var(--app-line-height-body); --rz-text-h1-font-size: var(--app-font-size-h4); --rz-text-h2-font-size: var(--app-font-size-h4); --rz-text-h3-font-size: var(--app-font-size-h4); --rz-text-h4-font-size: var(--app-font-size-h4); --rz-text-h5-font-size: var(--app-font-size-h6); --rz-text-h6-font-size: var(--app-font-size-h6); --rz-text-display-h1-font-size: var(--app-font-size-h4); --rz-text-display-h2-font-size: var(--app-font-size-h4); --rz-text-display-h3-font-size: var(--app-font-size-h4); --rz-text-display-h4-font-size: var(--app-font-size-h4); --rz-text-display-h5-font-size: var(--app-font-size-h6); --rz-text-display-h6-font-size: var(--app-font-size-h6); --rz-grid-cell-font-size: var(--app-font-size-table-cell); --rz-grid-cell-line-height: var(--app-line-height-body); --rz-grid-header-font-size: var(--app-font-size-table-header); --rz-grid-filter-font-size: var(--app-font-size-table-filter); --rz-input-font-size: var(--app-font-size-body2); --rz-dropdown-item-font-size: var(--app-font-size-body2); --rz-datepicker-calendar-font-size: var(--app-font-size-table-filter); --rz-datepicker-calendar-header-font-size: var(--app-font-size-body1); --rz-pager-summary-font-size: var(--app-font-size-table-filter); --rz-form-error-font-size: var(--app-font-size-caption); /* DataGridTypography – app.css téradat / reflow */ --app-table-column-header-font-weight: 700; --app-table-reflow-row-label-font-weight: 500; --app-table-filter-label-font-weight: 600; --app-table-filter-sublabel-font-weight: 600; --app-table-card-data-label-font-weight: 600; --app-table-list-header-badge-font-weight: 600; --app-invoice-pay-paid-bg: var(--bs-success, #198754); --app-invoice-pay-paid-color: #fff; --app-invoice-pay-partial-bg: var(--bs-info, #0dcaf0); --app-invoice-pay-partial-color: #000; --app-invoice-pay-outstanding-bg: var(--bs-warning, #ffc107); --app-invoice-pay-outstanding-color: #000; --app-invoice-pay-expired-bg: var(--bs-danger, #dc3545); --app-invoice-pay-expired-color: #fff; --app-invoice-pay-none-bg: var(--bs-secondary, #6c757d); --app-invoice-pay-none-color: #fff; /* DataGridChrome – számlák lapozó összeg (AppThemeManager.DataGridChrome) */ --app-datagrid-paging-summary-bg: #cfe2ff; --app-datagrid-paging-summary-color: #052c65; } /* * Radzen Material – számlák oldal: Bootstrap kék / danger / secondary a rács és beépített Radzen gombok számára. * Csak .app-invoices-radzen-page, hogy más Radzen komponensek továbbra is a Radzen téma színeit kapják. */ .app-invoices-radzen-page { --rz-primary: var(--app-icon-primary); --rz-primary-light: #6ea8fe; --rz-primary-lighter: rgba(13, 110, 253, 0.12); --rz-primary-dark: #0a58ca; --rz-primary-darker: #084298; --rz-secondary: #6c757d; --rz-secondary-light: #8c959d; --rz-secondary-lighter: rgba(108, 117, 125, 0.12); --rz-secondary-dark: #565e64; --rz-secondary-darker: #51585e; --rz-info: var(--app-icon-info); --rz-success: var(--app-icon-success); --rz-warning: var(--app-icon-warning); --rz-danger: var(--app-icon-danger); --rz-danger-light: #e35d6a; --rz-danger-lighter: rgba(220, 53, 69, 0.12); --rz-danger-dark: #b02a37; --rz-danger-darker: #94222f; }