/* ══ Colour templates ═══════════════════════════════════════════════════════════════════════════ Colour only: no font, size or spacing tokens here (user, 11 Oct 2026: font size stays as is). Bare :root = Classic Navy = today's colours exactly. A template is and redefines only the values that differ. Status/action colours (ok, bad, warn, print, attach) are fixed in every light template; only Midnight lightens them. Print: every template rule sits in @media screen, so paper always gets Classic. */ :root { /* shell */ --t-sidebar: #0A2558; --t-sidebar-active: #081D45; --t-sidebar-ink: #fff; --t-sidebar-mark: transparent; /* left stripe on the active module */ --t-header: #f8f9fa; --t-header-line: #dee2e6; --t-header-label: #8b0000; /* "Period :", "User Name :" */ --t-footer-label: darkblue; --t-crumb-module: darkcyan; --t-crumb-page: darkolivegreen; --t-tile-hover: navajowhite; /* module menu tiles */ /* surfaces and text */ --t-page: #fff; --t-surface: #fff; --t-surface-2: #f8f9fa; --t-ink: #1f2933; --t-body-ink: #212529; --t-muted: #6b7684; --t-label: #6b7686; --t-caps: #66748a; /* small uppercase bar labels */ --t-faint: #8a97a8; /* search glyph, muted cells */ --t-line: #dee2e6; /* accent family (was --fin-*) */ --t-accent: #3d8fd6; --t-accent-ink: #1f69ad; --t-tint: #e6f1fb; --t-tint-2: #f5f9fd; --t-head-card: #e9f2fb; --t-line-accent: #d4e4f3; /* grids, report bands, filter bars */ --t-grid-head: #4299e1; --t-grid-head-ink: #fff; --t-grid-head-line: #d6eaff; --t-grid-head-dark: #3182ce; /* .doc-line-table header borders */ --t-band: #e8eef6; --t-band-ink: #2c4a6e; --t-band-line: #c3d2e6; --t-report-head: #2c5282; /* .fr-head title strip */ --t-sub-row: #f4f6f9; /* report subtotal rows */ --t-group-row: #eceff3; /* index group rows */ --t-group-line: #d7dee6; --t-bar: #f6f8fa; --t-bar-2: #f0f4f8; --t-bar-line: #d0d9e4; --t-bar-sep: #d5dbe3; --t-chip-bg: #dbeafe; /* .ix-pill */ --t-chip-ink: #1d4ed8; --t-tab-bg: #e3f2fd; /* .ix-tabs active */ --t-tab-ink: #1c6fb8; --t-tab-line: #2196f3; /* controls */ --t-btn: #1b6ec2; --t-btn-line: #1861ac; --t-btn-ink: #fff; --t-btn-hover: #0b5ed7; /* Bootstrap's own hover/active/disabled, kept for Classic */ --t-btn-hover-line: #0a58ca; --t-btn-active: #0a58ca; --t-btn-active-line: #0a53be; --t-btn-disabled: #0d6efd; --t-btn-ring: rgba(49, 132, 253, .5); --t-link: #0071c1; --t-focus: #258cfb; --t-input: #fff; --t-input-line: #ced4da; /* Bootstrap 5.1 / MudBlazor values, kept for Classic */ --t-primary-rgb: 13, 110, 253; /* text-primary, bg-primary, outline-primary, checks; Mud primary in templates */ --t-primary: rgb(var(--t-primary-rgb)); --t-input-focus: #86b7fe; --t-input-ring: rgba(13, 110, 253, .25); --t-check-line: rgba(0, 0, 0, .25); --t-fill: #e9ecef; /* disabled/readonly inputs, input-group-text, dropdown hover */ --t-placeholder: #6c757d; --t-text-muted: #6c757d; --t-table-hover: rgba(0, 0, 0, .075); --t-table-light: #f8f9fa; /* thead.table-light */ --t-table-light-ink: #000; --t-table-light-line: #dfe0e1; --t-modal-line: rgba(0, 0, 0, .2); --t-pop-line: rgba(0, 0, 0, .15); /* dropdown border, divider */ --t-card-line: rgba(0, 0, 0, .125); --t-card-cap: rgba(0, 0, 0, .03); /* status / actions: same meaning in every template */ --t-ok: #198754; --t-ok-ink: #15803d; --t-bad: #c53030; --t-warn: #b45309; --t-print: brown; --t-attach: teal; } @media screen { /* every template: derive the secondary tokens from its main ones */ :root[data-theme] { --t-footer-label: var(--t-accent-ink); --t-crumb-module: var(--t-accent-ink); --t-crumb-page: var(--t-band-ink); --t-tile-hover: var(--t-tint); --t-grid-head-dark: color-mix(in srgb, var(--t-grid-head) 85%, #000); --t-report-head: var(--t-band-ink); --t-sub-row: var(--t-tint-2); --t-group-row: var(--t-band); --t-group-line: var(--t-band-line); --t-chip-bg: var(--t-tint); --t-chip-ink: var(--t-accent-ink); --t-tab-bg: var(--t-tint); --t-tab-ink: var(--t-accent-ink); --t-tab-line: var(--t-accent); --t-btn-hover: var(--t-btn-line); --t-btn-hover-line: var(--t-btn-line); --t-btn-active: var(--t-btn-line); --t-btn-active-line: var(--t-btn-line); --t-btn-disabled: var(--t-btn); --t-btn-ring: color-mix(in srgb, var(--t-btn) 45%, transparent); --t-input-focus: color-mix(in srgb, var(--t-focus) 50%, #fff); --t-input-ring: color-mix(in srgb, var(--t-focus) 25%, transparent); /* --tt-*: page CSS writes var(--tt-role, #original), so Classic and print keep the original hex. Accent roles follow every template; neutral and status roles only Midnight (below). */ --tt-accent: var(--t-accent); --tt-accent-ink: var(--t-accent-ink); --tt-tint: var(--t-tint); --tt-tint-2: var(--t-tint-2); --tt-line-accent: var(--t-line-accent); --tt-head: var(--t-grid-head); --tt-head-dark: var(--t-report-head); --tt-calc: color-mix(in srgb, var(--t-tint) 55%, var(--t-surface)); /* "calculated, not entered" cells (Classic: floralwhite) */ } :root[data-theme="teal"] { --t-sidebar: #0B3C49; --t-sidebar-active: #09637E; --t-sidebar-mark: #7AB2B2; --t-header: #f4f9fa; --t-header-label: #09637E; --t-accent: #088395; --t-accent-ink: #09637E; --t-tint: #e1f0f3; --t-tint-2: #f5fafb; --t-head-card: #e6f2f4; --t-line-accent: #cfe3e7; --t-grid-head: #088395; --t-grid-head-line: #b9e0e6; --t-band: #EBF4F6; --t-band-ink: #0B4A5A; --t-band-line: #bcdbe1; --t-bar: #f3f8f9; --t-bar-2: #eef6f7; --t-bar-line: #cfe1e5; --t-primary-rgb: 9, 99, 126; --t-btn: #09637E; --t-btn-line: #075469; --t-link: #09637E; --t-focus: #088395; } :root[data-theme="forest"] { --t-sidebar: #143D2B; --t-sidebar-active: #0E2C1F; --t-sidebar-mark: #6FCF97; --t-header: #f5f8f5; --t-header-label: #1F5135; --t-accent: #2F855A; --t-accent-ink: #22663F; --t-tint: #e2f0e7; --t-tint-2: #f6faf7; --t-head-card: #e5f1e9; --t-line-accent: #d2e4d8; --t-grid-head: #2F855A; --t-grid-head-line: #bfe0cc; --t-band: #E7F2EA; --t-band-ink: #1F5135; --t-band-line: #c2dccb; --t-bar: #f4f7f4; --t-bar-2: #eef5f0; --t-bar-line: #d0e1d5; --t-primary-rgb: 39, 103, 73; --t-btn: #276749; --t-btn-line: #1f553c; --t-link: #22663F; --t-focus: #2F855A; } :root[data-theme="indigo"] { --t-sidebar: #2A2160; --t-sidebar-active: #1E174A; --t-sidebar-mark: #A99CF5; --t-header: #f7f6fb; --t-header-label: #3B2F8A; --t-accent: #5B4BC4; --t-accent-ink: #45379F; --t-tint: #e9e6f9; --t-tint-2: #f8f7fd; --t-head-card: #ebe8fa; --t-line-accent: #dcd8f0; --t-grid-head: #5B4BC4; --t-grid-head-line: #d5cff7; --t-band: #EEECFA; --t-band-ink: #3B2F8A; --t-band-line: #d0caf0; --t-bar: #f6f5fb; --t-bar-2: #f1effa; --t-bar-line: #dad5ee; --t-primary-rgb: 76, 61, 176; --t-btn: #4C3DB0; --t-btn-line: #3f3196; --t-link: #45379F; --t-focus: #5B4BC4; } :root[data-theme="burgundy"] { --t-sidebar: #4A1525; --t-sidebar-active: #36101B; --t-sidebar-mark: #E58A9E; --t-header: #faf6f7; --t-header-label: #7A2236; --t-accent: #A3324B; --t-accent-ink: #86273C; --t-tint: #f6e4e8; --t-tint-2: #fcf8f9; --t-head-card: #f7e9ec; --t-line-accent: #ecd6dc; --t-grid-head: #A3324B; --t-grid-head-line: #f0cdd5; --t-band: #F7EBEE; --t-band-ink: #6E1F31; --t-band-line: #e5c8d0; --t-bar: #faf5f6; --t-bar-2: #f8f0f2; --t-bar-line: #e8d4da; --t-primary-rgb: 143, 42, 64; --t-btn: #8F2A40; --t-btn-line: #772236; --t-link: #86273C; --t-focus: #A3324B; } :root[data-theme="graphite"] { --t-sidebar: #2B2F36; --t-sidebar-active: #1F2227; --t-sidebar-mark: #E0A33A; --t-header: #f6f6f4; --t-header-label: #8A5A00; --t-accent: #C27C0E; --t-accent-ink: #8A5A00; --t-tint: #f6ecd9; --t-tint-2: #faf9f6; --t-head-card: #f3f1ec; --t-line-accent: #e0ddd5; --t-grid-head: #3D434C; --t-grid-head-line: #6b727c; --t-band: #F1EFEA; --t-band-ink: #3D434C; --t-band-line: #d8d4ca; --t-bar: #f5f4f1; --t-bar-2: #f1f0ec; --t-bar-line: #dcd8cf; --t-primary-rgb: 168, 100, 0; --t-btn: #A86400; --t-btn-line: #8c5300; --t-link: #8A5A00; --t-focus: #C27C0E; } :root[data-theme="cloud"] { --t-sidebar: #EEF2F7; --t-sidebar-active: #DCE5F0; --t-sidebar-ink: #1F3550; --t-sidebar-mark: #2B6CB0; --t-header: #fff; --t-header-label: #2B6CB0; --t-accent: #2B6CB0; --t-accent-ink: #1E4E85; --t-tint: #e3edf8; --t-tint-2: #f6f9fc; --t-head-card: #e8eff8; --t-line-accent: #d6e1ee; --t-grid-head: #2B6CB0; --t-grid-head-line: #c9dcf1; --t-band: #E8EFF8; --t-band-ink: #1E3A5F; --t-band-line: #c9d8ea; --t-bar: #f5f8fb; --t-bar-2: #eef3f9; --t-bar-line: #d3deeb; --t-primary-rgb: 43, 108, 176; --t-btn: #2B6CB0; --t-btn-line: #245c97; --t-link: #1E4E85; --t-focus: #2B6CB0; } :root[data-theme="coffee"] { --t-sidebar: #3B2A20; --t-sidebar-active: #2A1D16; --t-sidebar-mark: #D4A373; --t-header: #faf7f4; --t-header-label: #7A4E2D; --t-accent: #9C6B3F; --t-accent-ink: #7A4E2D; --t-tint: #f3e7da; --t-tint-2: #fcf9f6; --t-head-card: #f4ebe2; --t-line-accent: #e6d9cc; --t-grid-head: #8B5E3C; --t-grid-head-line: #e2cfbf; --t-band: #F4ECE4; --t-band-ink: #5C3B22; --t-band-line: #dccabb; --t-bar: #f8f5f1; --t-bar-2: #f5efe9; --t-bar-line: #e3d6c9; --t-primary-rgb: 127, 82, 50; --t-btn: #7F5232; --t-btn-line: #6a4429; --t-link: #7A4E2D; --t-focus: #9C6B3F; } :root[data-theme="sunset"] { --t-sidebar: #23303F; --t-sidebar-active: #18222E; --t-sidebar-mark: #F08C4A; --t-header: #fbf8f6; --t-header-label: #B4471A; --t-accent: #C85A22; --t-accent-ink: #A8461A; --t-tint: #fcefe6; --t-tint-2: #fefaf7; --t-head-card: #fdf3ec; --t-line-accent: #f0dfd3; --t-grid-head: #C4561F; --t-grid-head-line: #f3c8ae; --t-band: #fcf1ea; --t-band-ink: #8A3A16; --t-band-line: #f0d2bf; --t-bar: #faf6f3; --t-bar-2: #fbf3ed; --t-bar-line: #ecd9cc; --t-primary-rgb: 176, 74, 24; --t-btn: #B04A18; --t-btn-line: #943E14; --t-link: #A8461A; --t-focus: #C85A22; } /* dark */ :root[data-theme="midnight"] { color-scheme: dark; --t-sidebar: #0B0F15; --t-sidebar-active: #1B2635; --t-sidebar-ink: #C9D3DF; --t-sidebar-mark: #5AA9F0; --t-header: #151A22; --t-header-line: #2A3340; --t-header-label: #E8A39A; --t-page: #0F1319; --t-surface: #161B23; --t-surface-2: #1C232D; --t-ink: #DCE3EC; --t-body-ink: #DCE3EC; --t-muted: #8E9AAB; --t-label: #8E9AAB; --t-caps: #8E9AAB; --t-faint: #6B7789; --t-line: #2A3340; --t-report-head: #22344B; --t-accent: #5AA9F0; --t-accent-ink: #8CC4FA; --t-tint: #1A2A3D; --t-tint-2: #1C232D; --t-head-card: #1A2433; --t-line-accent: #2A3340; --t-grid-head: #22344B; --t-grid-head-ink: #D6E7FA; --t-grid-head-line: #2E4560; --t-band: #1E2836; --t-band-ink: #B9CCE3; --t-band-line: #2E3B4C; --t-bar: #141921; --t-bar-2: #161C25; --t-bar-line: #2A3340; --t-bar-sep: #2E3846; --t-primary-rgb: 90, 169, 240; --t-btn: #2F7ED8; --t-btn-line: #2A70C0; --t-link: #8CC4FA; --t-focus: #5AA9F0; --t-input: #11161D; --t-input-line: #344050; --t-input-focus: #5AA9F0; --t-check-line: #4A5768; --t-fill: #1F2732; --t-placeholder: #6B7789; --t-text-muted: #8E9AAB; --t-table-hover: rgba(255, 255, 255, .06); --t-table-light: #1C232D; --t-table-light-ink: #DCE3EC; --t-table-light-line: #2A3340; --t-modal-line: #2A3340; --t-pop-line: #2A3340; --t-card-line: #2A3340; --t-card-cap: rgba(255, 255, 255, .03); --t-ok: #2E9D63; --t-ok-ink: #4CC38A; --t-bad: #F07171; --t-warn: #E8B04A; --t-print: #C79466; --t-attach: #4FC1B5; /* page CSS neutral + status roles (--tt-*: see the shared block above) */ --tt-surface: var(--t-surface); --tt-surface-2: var(--t-surface-2); --tt-fill: var(--t-fill); --tt-ink: var(--t-ink); --tt-muted: var(--t-muted); --tt-faint: var(--t-faint); --tt-line: var(--t-line); --tt-ok: var(--t-ok-ink); --tt-bad: var(--t-bad); --tt-warn: var(--t-warn); --tt-teal: var(--t-attach); --tt-violet: #C4B5FD; --tt-line-strong: #4A5768; --tt-edit: #8CC4FA; --tt-calc: var(--t-tint); /* status pastels (chips, alerts, calc cells): dark tints of the same hue */ --tt-ok-bg: color-mix(in srgb, var(--t-ok-ink) 15%, var(--t-surface)); --tt-bad-bg: color-mix(in srgb, var(--t-bad) 15%, var(--t-surface)); --tt-warn-bg: color-mix(in srgb, var(--t-warn) 13%, var(--t-surface)); --tt-violet-bg: color-mix(in srgb, #A78BFA 15%, var(--t-surface)); --tt-ok-line: color-mix(in srgb, var(--t-ok-ink) 45%, var(--t-surface)); --tt-bad-line: color-mix(in srgb, var(--t-bad) 45%, var(--t-surface)); --tt-warn-line: color-mix(in srgb, var(--t-warn) 45%, var(--t-surface)); --tt-violet-line: color-mix(in srgb, #A78BFA 45%, var(--t-surface)); } } /* ══ Bootstrap 5.1 ═══════════════════════════════════════════════════════════════════════════════ 5.1 hard-codes most component colours, so they are re-pointed here. Classic token values = Bootstrap's own. */ :root { --bs-primary-rgb: var(--t-primary-rgb); --bs-body-bg: var(--t-page); --bs-body-color: var(--t-body-ink); } @media screen { :root[data-theme="midnight"] { --bs-body-color-rgb: 220, 227, 236; --bs-light-rgb: 28, 35, 45; /* .bg-light */ --bs-dark-rgb: 220, 227, 236; /* .text-dark stays readable */ } } .form-control, .form-select { color: var(--t-body-ink); background-color: var(--t-input); border-color: var(--t-input-line); } .form-control:focus, .form-select:focus { color: var(--t-body-ink); background-color: var(--t-input); border-color: var(--t-input-focus); box-shadow: 0 0 0 .25rem var(--t-input-ring); } .form-control::placeholder { color: var(--t-placeholder); } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--t-fill); } .input-group-text { color: var(--t-body-ink); background-color: var(--t-fill); border-color: var(--t-input-line); } .form-check-input { background-color: var(--t-input); border-color: var(--t-check-line); } .form-check-input:checked { background-color: var(--t-primary); border-color: var(--t-primary); } .form-check-input:focus { border-color: var(--t-input-focus); box-shadow: 0 0 0 .25rem var(--t-input-ring); } .table { color: var(--t-body-ink); border-color: var(--t-line); --bs-table-striped-color: var(--t-body-ink); --bs-table-active-color: var(--t-body-ink); --bs-table-hover-color: var(--t-body-ink); --bs-table-hover-bg: var(--t-table-hover); } .table-light { --bs-table-bg: var(--t-table-light); --bs-table-hover-color: var(--t-table-light-ink); color: var(--t-table-light-ink); border-color: var(--t-table-light-line); } .modal-content { background-color: var(--t-surface); border-color: var(--t-modal-line); } .modal-header, .modal-footer { border-color: var(--t-line); } .dropdown-menu { color: var(--t-body-ink); background-color: var(--t-surface); border-color: var(--t-pop-line); } .dropdown-item { color: var(--t-body-ink); } .dropdown-item:focus, .dropdown-item:hover { color: var(--t-body-ink); background-color: var(--t-fill); } .dropdown-item.active, .dropdown-item:active { color: #fff; background-color: var(--t-primary); } .dropdown-divider { border-top-color: var(--t-pop-line); } .card { background-color: var(--t-surface); border-color: var(--t-card-line); } .card-header, .card-footer { background-color: var(--t-card-cap); border-color: var(--t-card-line); } .list-group-item { background-color: var(--t-surface); border-color: var(--t-card-line); } .list-group-item:not(.list-group-item-action) { color: var(--t-body-ink); } /* -action keeps Bootstrap's #495057 */ @media screen { :root[data-theme="midnight"] .list-group-item-action { color: var(--t-body-ink); } :root[data-theme="midnight"] .list-group-item-action:hover, :root[data-theme="midnight"] .list-group-item-action:focus { color: var(--t-body-ink); background-color: var(--t-surface-2); } } .list-group-item.active { color: #fff; background-color: var(--t-primary); border-color: var(--t-primary); } .nav-tabs { border-bottom-color: var(--t-line); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: var(--t-surface); border-color: var(--t-line) var(--t-line) var(--t-surface); } .nav-link { color: var(--t-primary); } .nav-link:focus, .nav-link:hover { color: color-mix(in srgb, var(--t-primary) 80%, #000); } /* Classic: = Bootstrap's #0a58ca */ .page-link { color: var(--t-primary); background-color: var(--t-surface); border-color: var(--t-line); } .page-link:hover, .page-link:focus { color: color-mix(in srgb, var(--t-primary) 80%, #000); background-color: var(--t-fill); border-color: var(--t-line); } .page-item.active .page-link { color: #fff; background-color: var(--t-primary); border-color: var(--t-primary); } .page-item.disabled .page-link { background-color: var(--t-surface); border-color: var(--t-line); } .btn-outline-primary { color: var(--t-primary); border-color: var(--t-primary); } .btn-outline-primary:hover, .btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active { color: #fff; background-color: var(--t-primary); border-color: var(--t-primary); } .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { box-shadow: 0 0 0 .25rem rgba(var(--t-primary-rgb), .5); } .text-muted { color: var(--t-text-muted) !important; } @media screen { /* Midnight only: border utilities (coloured .border-* keep theirs), dark glyphs (select arrow, close X) */ :root[data-theme="midnight"] :is(.border, .border-top, .border-end, .border-bottom, .border-start):not(.border-primary, .border-secondary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark, .border-white) { border-color: var(--t-line) !important; } :root[data-theme="midnight"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238E9AAB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } :root[data-theme="midnight"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ApexCharts (7 dashboards) draw light-theme SVG; CSS fill/stroke beat its presentation attributes, legend text is inline-styled */ :root[data-theme="midnight"] :is(.apexcharts-text, .apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-title-text) { fill: var(--t-muted); } :root[data-theme="midnight"] .apexcharts-legend-text { color: var(--t-muted) !important; } :root[data-theme="midnight"] :is(.apexcharts-gridline, .apexcharts-grid-borders line, .apexcharts-xaxis-tick, .apexcharts-xaxis line, .apexcharts-yaxis line) { stroke: var(--t-line); } :root[data-theme="midnight"] .apexcharts-pie-area { stroke: var(--t-surface); } :root[data-theme="midnight"] .apexcharts-tooltip.apexcharts-theme-light { color: var(--t-body-ink); background: var(--t-surface-2); border-color: var(--t-line); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); } :root[data-theme="midnight"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--t-fill); border-bottom-color: var(--t-line); } :root[data-theme="midnight"] .apexcharts-xaxistooltip { color: var(--t-body-ink); background: var(--t-surface-2); border-color: var(--t-line); } :root[data-theme="midnight"] .apexcharts-xaxistooltip-bottom::before { border-bottom-color: var(--t-line); } :root[data-theme="midnight"] .apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--t-surface-2); } :root[data-theme="midnight"] .apexcharts-menu { color: var(--t-body-ink); background: var(--t-surface); border-color: var(--t-line); } :root[data-theme="midnight"] .apexcharts-menu-item:hover { background: var(--t-fill); } /* sort arrow on a coloured grid header: the header's text colour (grey .table-light headers keep the accent) */ :root[data-theme] .data-table th.sort:is(.asc, .desc)::after { color: var(--t-grid-head-ink); } /* plain .btn (header icons, breadcrumb Print/Cancel/Save): 5.1 hard-codes #212529. Specificity (0,1,1)/(0,2,1): beats Bootstrap's .btn / .btn:hover only; coloured variants never match; app classes (.va-act.audit) still win. */ html:where([data-theme="midnight"]) .btn:where(:not(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, .btn-link, [class*="btn-outline-"])), html:where([data-theme="midnight"]) .btn:where(:not(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, .btn-link, [class*="btn-outline-"])):hover { color: var(--t-body-ink); } /* .text-dark is light in Midnight; keep it dark where the badge/chip stays bright */ :root[data-theme="midnight"] :is(.bg-warning, .bg-info, .bg-white).text-dark { color: #212529 !important; } /* coloured table rows (search row, selected picker row, warnings) */ :root[data-theme] .table-primary { --bs-table-bg: var(--t-tint); --bs-table-hover-bg: var(--t-tint); --bs-table-active-bg: var(--t-tint); --bs-table-hover-color: var(--t-body-ink); color: var(--t-body-ink); border-color: var(--t-line-accent); } :root[data-theme="midnight"] :is(.table-success, .table-danger, .table-warning, .table-info, .table-secondary, .table-light) { --bs-table-hover-color: var(--t-body-ink); --bs-table-active-color: var(--t-body-ink); --bs-table-striped-color: var(--t-body-ink); color: var(--t-body-ink); border-color: var(--t-line); } :root[data-theme="midnight"] .table-success { --bs-table-bg: var(--tt-ok-bg); --bs-table-hover-bg: var(--tt-ok-bg); } :root[data-theme="midnight"] .table-danger { --bs-table-bg: var(--tt-bad-bg); --bs-table-hover-bg: var(--tt-bad-bg); } :root[data-theme="midnight"] .table-warning { --bs-table-bg: var(--tt-warn-bg); --bs-table-hover-bg: var(--tt-warn-bg); } :root[data-theme="midnight"] .table-info { --bs-table-bg: color-mix(in srgb, var(--t-attach) 15%, var(--t-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--t-attach) 15%, var(--t-surface)); } :root[data-theme="midnight"] :is(.table-secondary, .table-light) { --bs-table-bg: var(--t-surface-2); --bs-table-hover-bg: var(--t-fill); } /* alerts */ :root[data-theme="midnight"] .alert-success { color: var(--t-ok-ink); background-color: var(--tt-ok-bg); border-color: var(--tt-ok-line); } :root[data-theme="midnight"] .alert-danger { color: var(--t-bad); background-color: var(--tt-bad-bg); border-color: var(--tt-bad-line); } :root[data-theme="midnight"] .alert-warning { color: var(--t-warn); background-color: var(--tt-warn-bg); border-color: var(--tt-warn-line); } :root[data-theme="midnight"] :is(.alert-info, .alert-primary) { color: var(--t-accent-ink); background-color: var(--t-tint); border-color: var(--t-line-accent); } :root[data-theme="midnight"] :is(.alert-secondary, .alert-light) { color: var(--t-body-ink); background-color: var(--t-surface-2); border-color: var(--t-line); } :root[data-theme="midnight"] .alert .alert-link { color: inherit; } /* ══ MudBlazor 8 ══════════════════════════════════════════════════════════════════════════════════ Classic keeps MudThemeProvider's defaults; a template outranks its :root block via [data-theme]. */ :root[data-theme] { --mud-palette-primary: var(--t-primary); --mud-palette-primary-rgb: var(--t-primary-rgb); --mud-palette-primary-text: #fff; --mud-palette-primary-darken: color-mix(in srgb, var(--t-primary) 85%, #000); --mud-palette-primary-lighten: color-mix(in srgb, var(--t-primary) 75%, #fff); --mud-palette-primary-hover: rgba(var(--t-primary-rgb), .06); } :root[data-theme="midnight"] { --mud-palette-background: var(--t-page); --mud-palette-background-gray: var(--t-surface-2); --mud-palette-surface: var(--t-surface); --mud-palette-text-primary: var(--t-body-ink); --mud-palette-text-secondary: var(--t-muted); --mud-palette-text-disabled: rgba(255, 255, 255, .38); --mud-palette-action-default: #B0BAC6; --mud-palette-action-default-hover: rgba(255, 255, 255, .08); --mud-palette-action-disabled: rgba(255, 255, 255, .26); --mud-palette-action-disabled-background: rgba(255, 255, 255, .12); --mud-palette-lines-default: rgba(255, 255, 255, .12); --mud-palette-lines-inputs: rgba(255, 255, 255, .3); --mud-palette-table-lines: var(--t-line); --mud-palette-divider: rgba(255, 255, 255, .12); } } /* ══ Template picker (MainLayout header, palette button) ═════════════════════════════════════════ */ .theme-menu { inset: 100% 0 auto auto; min-width: 210px; } .theme-item { display: flex; align-items: center; gap: 8px; justify-content: flex-start; } /* MudBlazor centres every