html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } html, body { height: 100%; overflow: hidden; display: flex; flex-direction: column; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } .button-link { text-decoration: unset; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .title { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.625rem; } .title.title-secondary { padding-top: 0.313rem; padding-bottom: 0; color: var(--bs-secondary-color); } .title-header-text { font-size: 2.5rem; line-height: 3rem; font-weight: 600; letter-spacing: 0rem; padding: 0.3125rem 0; } .title-content-text { font-size: 1.75rem; font-weight: 400; line-height: 2.5rem; letter-spacing: 0rem; } .main-content { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } .block-content { width: 31.25rem; height: auto; display: flex; flex-direction: column; gap: 0.625rem; max-width: 100%; } :root { --bs-primary: #1549B6; --bs-primary-rgb: 21, 73, 182; } .badge { font-weight: normal !important; } .documents-grid, .document-type-grid { margin-top: 8px; } .documents-grid { height: calc(100vh - 65px); } .document-type-grid { height: calc(100vh - 120px); } .documents-grid.dxbl-grid .dxbl-grid-table > tbody > tr > td, .documents-grid.dxbl-grid .dxbl-grid-table > thead > tr > th, .document-type-grid.dxbl-grid .dxbl-grid-table > tbody > tr > td, .document-type-grid.dxbl-grid .dxbl-grid-table > thead > tr > th { border-left-width: 0px; } .scrollable-container { height: calc(100vh - 100px); overflow-x: hidden; overflow-y: auto; } /* ================================================================ DARK MODE — Bootstrap variabelen syncen met DX Fluent Dark DX zet het thema via een stylesheet wissel, maar Bootstrap weet daar niks van. Dit blok koppelt ze samen. Selector: html met de DX dark stylesheet geladen. DX Fluent Dark zet geen attribuut op , maar we kunnen het oplossen via de IsDarkMode Blazor class die we op kunnen zetten, of via de data-dx-theme selector als die beschikbaar is. Meest betrouwbaar: class "dark-mode" op via Blazor. ================================================================ */ /* Primaire aanpak: DX theme attribuut (werkt als DX dit zet) */ [data-dx-theme*="dark"], [data-dx-theme*="Dark"], /* Fallback: class op body/html */ body.dark-mode, html.dark-mode { /* Achtergronden */ --bs-body-bg: #252525; --bs-body-bg-rgb: 37, 37, 37; --bs-secondary-bg: #2e2e2e; --bs-tertiary-bg: #333333; /* Tekst */ --bs-body-color: #e0e0e0; --bs-body-color-rgb: 224, 224, 224; --bs-secondary-color: #888888; --bs-emphasis-color: #ffffff; /* Borders */ --bs-border-color: #3a3a3a; --bs-border-color-translucent: rgba(255,255,255,0.1); /* Bootstrap card */ --bs-card-bg: #2e2e2e; --bs-card-border-color: #3a3a3a; --bs-card-color: #e0e0e0; /* Links */ --bs-link-color: #7aaeff; --bs-link-hover-color: #9dbfff; /* Form controls */ --bs-form-control-bg: #2e2e2e; --bs-form-control-border-color: #3a3a3a; --bs-form-control-color: #e0e0e0; /* Danger subtiel (voor danger buttons) */ --bs-danger-bg-subtle: rgba(211,47,47,0.12); --bs-danger-border-subtle: rgba(211,47,47,0.3); color-scheme: dark; } /* Body achtergrond zelf ook fixen */ body.dark-mode, [data-dx-theme*="dark"] body, [data-dx-theme*="Dark"] body { background-color: #252525; color: #e0e0e0; } /* ================================================================ DARK MODE — DX PdfViewer toolbar iconen wit maken De toolbar knoppen hebben een donkere SVG fill die onzichtbaar is op de donkere achtergrond. Enkel kleur/fill aanpassen, geen achtergronden zodat de PDF zelf niet aangetast wordt. ================================================================ */ body.dark-mode .dxbl-pdf-viewer .dxbl-btn, body.dark-mode .dxbl-pdf-viewer button:not(.dxbl-btn-primary) { color: #d0d0d0 !important; } body.dark-mode .dxbl-pdf-viewer .dxbl-btn:hover, body.dark-mode .dxbl-pdf-viewer button:not(.dxbl-btn-primary):hover { color: #ffffff !important; background-color: rgba(255,255,255,0.1) !important; } body.dark-mode .dxbl-pdf-viewer .dxbl-btn:disabled, body.dark-mode .dxbl-pdf-viewer .dxbl-btn.disabled { color: #555 !important; } /* Input en select in de toolbar (pagina nr, zoom) */ body.dark-mode .dxbl-pdf-viewer .dxbl-toolbar input, body.dark-mode .dxbl-pdf-viewer .dxbl-toolbar select { background-color: #333 !important; color: #e0e0e0 !important; border-color: #555 !important; } /* ================================================================ DARK MODE — Field color badges (pastel kleuren in grid) HexColor() mixt met wit voor pastel effect, maar in dark mode zijn die te licht. We verlagen de helderheid via filter. ================================================================ */ .field-caption-badge { color: #1a1a1a; } .field-color-badge { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; color: #1a1a1a; white-space: nowrap; } body.dark-mode .field-caption-badge { color: #ffffff !important; } body.dark-mode .field-color-badge { color: #1a1a1a !important; } /* ================================================================ DARK MODE — DocumentDetails table column header badges GetBadgeStyle() genereert inline background-color via rgba. Tekst zwart houden zoals in light mode. ================================================================ */ body.dark-mode .tables-grid-header { color: #ffffff !important; } /* ================================================================ GLOBAL GRID HEADER STYLE Consistent lichtblauwe header voor alle DxGrid componenten. Zo hoeft dit niet herhaald te worden in elk component. ================================================================ */ .dxbl-grid .dxbl-grid-header-row th, .dxbl-grid .dxbl-grid-table > thead > tr > th, .dxbl-grid-header-row th { background-color: #f0f3fa !important; color: #5a6478 !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-bottom: 1px solid #c8d0e0 !important; } body.dark-mode .dxbl-grid .dxbl-grid-header-row th, body.dark-mode .dxbl-grid .dxbl-grid-table > thead > tr > th, body.dark-mode .dxbl-grid-header-row th, [data-dx-theme*="dark"] .dxbl-grid .dxbl-grid-header-row th, [data-dx-theme*="Dark"] .dxbl-grid .dxbl-grid-header-row th { background-color: #333 !important; color: #888 !important; border-bottom-color: #3a3a3a !important; } /* ================================================================ GLOBAL BUTTON SYSTEM — action-btn, toolbar-icon-btn, toolbar-action-btn Één definitie voor alle componenten. ================================================================ */ /* ===== ACTION BTN (toolbar buttons met tekst) ===== */ .action-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s ease; font-family: inherit; white-space: nowrap; } .action-btn.primary { background-color: #1549B6; color: #ffffff; } .action-btn.primary:hover { background-color: #1240a0; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(21, 73, 182, 0.35); } .action-btn.secondary { background-color: var(--dx-color-surface); color: var(--dx-color-text-secondary); border: 1px solid var(--dx-color-border); } .action-btn.secondary:hover { background-color: var(--dx-color-surface-variant); color: var(--dx-color-text-active); } .action-btn.danger { background-color: color-mix(in srgb, #d32f2f 10%, var(--dx-color-surface)); color: #d32f2f; border: 1px solid color-mix(in srgb, #d32f2f 30%, transparent); } .action-btn.danger:hover { background-color: color-mix(in srgb, #d32f2f 20%, var(--dx-color-surface)); } .action-btn.success { background-color: #16a34a; color: white; } .action-btn.success:hover { background-color: #15803d; box-shadow: 0 3px 8px rgba(22, 163, 74, 0.3); } /* Dark mode */ body.dark-mode .action-btn.secondary, [data-dx-theme*="dark"] .action-btn.secondary, [data-dx-theme*="Dark"] .action-btn.secondary { background-color: #2e2e2e !important; color: #ccc !important; border-color: #3a3a3a !important; } body.dark-mode .action-btn.secondary:hover, [data-dx-theme*="dark"] .action-btn.secondary:hover, [data-dx-theme*="Dark"] .action-btn.secondary:hover { background-color: #383838 !important; color: #e0e0e0 !important; } body.dark-mode .action-btn.danger, [data-dx-theme*="dark"] .action-btn.danger, [data-dx-theme*="Dark"] .action-btn.danger { background-color: rgba(211, 47, 47, 0.12) !important; border-color: rgba(211, 47, 47, 0.3) !important; } body.dark-mode .action-btn.danger:hover, [data-dx-theme*="dark"] .action-btn.danger:hover, [data-dx-theme*="Dark"] .action-btn.danger:hover { background-color: rgba(211, 47, 47, 0.2) !important; } /* ===== TOOLBAR ICON BTN (kleine icoon-only knoppen) ===== */ .toolbar-icon-btn { width: 32px; height: 32px; border-radius: 6px; border: none; background: transparent; color: var(--dx-color-text); font-size: 0.95rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; text-decoration: none; flex-shrink: 0; } .toolbar-icon-btn:hover { background: var(--dx-color-surface-variant); color: var(--dx-color-text-active); } .toolbar-icon-btn.danger:hover { background: color-mix(in srgb, #d32f2f 10%, var(--dx-color-surface)); color: #d32f2f; } .toolbar-icon-btn.danger-outline { border: 1px solid transparent; } .toolbar-icon-btn.danger-outline:hover { background: color-mix(in srgb, #d32f2f 10%, var(--dx-color-surface)); color: #d32f2f; border-color: color-mix(in srgb, #d32f2f 25%, transparent); } .toolbar-icon-btn.download-split { width: auto; padding: 0 8px; gap: 3px; } /* ===== TOOLBAR ACTION BTN (kleinere versie met tekst, voor in toolbars) ===== */ .toolbar-action-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border-radius: 6px; border: none; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; white-space: nowrap; } .toolbar-action-btn.success { background: #16a34a; color: white; } .toolbar-action-btn.success:hover { background: #15803d; box-shadow: 0 3px 8px rgba(22, 163, 74, 0.3); } /* ===== TOOLBAR DIVIDER ===== */ .toolbar-divider { width: 1px; height: 20px; background: var(--dx-color-border); margin: 0 4px; flex-shrink: 0; } /* ===== ROW ACTION DXBUTTONS (tekst-mode icoon knoppen in grid rows) ===== */ .row-actions .dxbl-btn-text { color: var(--dx-color-text-secondary) !important; opacity: 1 !important; transition: background 0.15s, color 0.15s !important; } .row-actions .dxbl-btn-text:hover { color: var(--dx-color-text-active) !important; background: var(--dx-color-surface-variant) !important; } .row-actions .dxbl-btn-text.dxbl-btn-danger { color: #c0392b !important; } .row-actions .dxbl-btn-text.dxbl-btn-danger:hover { background: rgba(192, 57, 43, 0.1) !important; } /* ================================================================ DEVEXPRESS CALENDAR / DATEPICKER FIX Probleem: cellen tonen "2...", "1..." door te smalle popup. Fix: popup breder forceren, weeknummers verbergen, cellen vaste breedte geven, overflow visible. ================================================================ */ /* --- 1. Popup / dropdown breed genoeg --- */ .dxbl-calendar, .dxbl-date-edit-dropdown, .dxbl-dropdown-area, .dxbl-calendar-table-container, .dxbl-popup-body { min-width: 300px !important; } /* --- 2. Tabel: fixed layout zodat kolommen niet krimpen --- */ .dxbl-calendar table, .dxbl-calendar-table { width: 100% !important; table-layout: fixed !important; } /* --- 3. Weeknummer kolom volledig verbergen --- */ td.dxbl-calendar-week-number, th.dxbl-calendar-week-number, .dxbl-calendar-week-number, tr.dxbl-calendar-days-of-week td:first-child { display: none !important; } /* --- 4. Dag-header cellen (Mon Tue Wed ...) --- */ tr.dxbl-calendar-days-of-week th, .dxbl-calendar-day-header { width: 38px !important; min-width: 38px !important; text-align: center !important; padding: 4px 0 !important; overflow: visible !important; white-space: nowrap !important; font-size: 0.75rem !important; box-sizing: border-box !important; } /* --- 5. Dag cellen — brede selectors voor alle DX versies --- */ tr.dxbl-calendar-week-row td, .dxbl-calendar-day-cell, .dxbl-calendar-item, .dxbl-calendar-cell { width: 38px !important; min-width: 38px !important; height: 32px !important; text-align: center !important; padding: 0 !important; overflow: visible !important; white-space: nowrap !important; font-size: 0.82rem !important; box-sizing: border-box !important; } /* --- 6. Inner element (a/span/div) in elke cel --- */ tr.dxbl-calendar-week-row td a, tr.dxbl-calendar-week-row td span, .dxbl-calendar-day-cell a, .dxbl-calendar-item a, .dxbl-calendar-cell a, .dxbl-calendar-cell span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 30px !important; height: 30px !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; } /* --- 7. DxDateEdit opmaak matchen met site stijl --- */ .dxbl-date-edit, .dxbl-date-edit .dxbl-edit-input-group { border-radius: 8px !important; font-size: 0.85rem !important; font-family: inherit !important; } .dxbl-date-edit .dxbl-edit-input { font-size: 0.85rem !important; font-family: inherit !important; } /* --- 8. Clear button voor DxDateEdit + alle editors --- */ .dxbl-date-edit .dxbl-btn-clear, .dxbl-date-edit .dxbl-edit-btn-clear, .dxbl-date-edit [class*="clear"], .dxbl-date-edit .dxbl-edit-btn:last-of-type, .dxbl-spin-edit .dxbl-btn-clear, .dxbl-spin-edit .dxbl-edit-btn-clear, .dxbl-text-edit .dxbl-btn-clear, .dxbl-text-edit .dxbl-edit-btn-clear { display: flex !important; visibility: visible !important; opacity: 0.4; transition: opacity 0.15s; pointer-events: auto !important; } .dxbl-date-edit .dxbl-btn-clear:hover, .dxbl-date-edit .dxbl-edit-btn-clear:hover, .dxbl-date-edit [class*="clear"]:hover, .dxbl-spin-edit .dxbl-btn-clear:hover, .dxbl-spin-edit .dxbl-edit-btn-clear:hover, .dxbl-text-edit .dxbl-btn-clear:hover, .dxbl-text-edit .dxbl-edit-btn-clear:hover { opacity: 1; } /* --- 9. Dark mode calendar popup --- */ body.dark-mode .dxbl-calendar, [data-dx-theme*="dark"] .dxbl-calendar { background-color: #2e2e2e !important; color: #e0e0e0 !important; } body.dark-mode .dxbl-calendar-cell a, body.dark-mode tr.dxbl-calendar-week-row td a, [data-dx-theme*="dark"] .dxbl-calendar-cell a { color: #e0e0e0 !important; } body.dark-mode .dxbl-calendar-cell.dxbl-calendar-today a, body.dark-mode .dxbl-calendar-cell.dxbl-selected a, [data-dx-theme*="dark"] .dxbl-calendar-cell.dxbl-selected a { color: #ffffff !important; }