/* * Dark theme for the SmartAdmin shell and the Identity (login) pages. * Activated by the `mod-skin-dark` class on , set by ThemeState (runtime) and by the inline * script in App.razor (before first paint). MudBlazor components are themed separately by the * MudThemeProvider `IsDarkMode` binding; these rules cover only the non-MudBlazor shell and login markup. * * Palette: page #121212, surfaces #1E1E1E, sidebar #1A2233, text #BDBDBD (soft grey, not white), * hairlines rgba(255,255,255,.08). */ body.mod-skin-dark { background-color: #121212; color: #bdbdbd; } /* ---- App shell ------------------------------------------------------------------------------- */ .mod-skin-dark .page-sidebar { background-color: #1a2233; background-image: none; } .mod-skin-dark .page-logo { background-color: #1a2233; } /* The logo wordmark is pure white in the base theme; soften it like the rest of the dark text. */ .mod-skin-dark .page-logo-text { color: #d0d0d0; } .mod-skin-dark .page-sidebar .nav-menu li > a { color: #aab0ba; } .mod-skin-dark .page-sidebar .nav-menu li.active > a, .mod-skin-dark .page-sidebar .nav-menu li > a:hover { color: #d0d0d0; background-color: rgba(255, 255, 255, 0.06); } .mod-skin-dark .page-header { background-color: #1e1e1e; color: #bdbdbd; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mod-skin-dark .page-header .header-btn > .btn, .mod-skin-dark .page-header i { color: #aab0ba; } .mod-skin-dark .page-content-wrapper { background-color: #121212; } /* SpecialWorkTypes bar-chart legend pills (dashboard). Their bright fill + white label is a harsh bright spot on the dark theme; a dark inset overlay tones the pill down (keeping its semantic colour) and the label is softened off pure white. Body-scoped to outrank the widgets' scoped ::deep rule. */ body.mod-skin-dark .bar-legend .bar-legend-pill { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.32); color: #bdbdbd; } /* Bootstrap card wrapper around the admin grids (Work Types, Holidays, Positions, User Management, Web API Keys). Its default white background and light border are what framed the dark grid in white. */ .mod-skin-dark .card { background-color: #1e1e1e; border-color: rgba(255, 255, 255, 0.08); color: #bdbdbd; } .mod-skin-dark .page-footer { background-color: #1a1a1a; color: #9aa0ab; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Subheader / breadcrumb text rendered by AppPageHeader */ .mod-skin-dark .subheader-title, .mod-skin-dark .page-content h1, .mod-skin-dark .page-content h2, .mod-skin-dark .page-content h3 { color: #bdbdbd; } .mod-skin-dark .breadcrumb .breadcrumb-item, .mod-skin-dark .breadcrumb .breadcrumb-item a, .mod-skin-dark .text-muted, .mod-skin-dark .subheader .fw-300 { color: #9aa0ab !important; } /* The custom user menu panel teleported to by MudPopoverProvider. Its light styles live in the scoped PageHeader.razor.css, so body-scoped selectors are needed to outrank them. */ body.mod-skin-dark .tt-user-menu__panel { background-color: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.08); } body.mod-skin-dark .tt-user-menu__item, body.mod-skin-dark .tt-user-menu__name { color: #bdbdbd; } body.mod-skin-dark .tt-user-menu__item:hover { background-color: rgba(255, 255, 255, 0.08); color: #d0d0d0; } /* The profile header's teal→purple gradient is bright on the dark panel; use a muted dark variant. */ body.mod-skin-dark .tt-user-menu__header { background: linear-gradient(135deg, #155e54 0%, #3a3168 100%); color: #d0d0d0; } /* SmartAdmin adds a light text-shadow to these headings; on a dark background it reads as a ghosting double of the text (visible on the TimeBoard title and breadcrumbs). */ body.mod-skin-dark .subheader-title, body.mod-skin-dark .page-breadcrumb { text-shadow: none; } /* ---- TimeBoard Summary panel ----------------------------------------------------------------- */ /* The panel's styles are component-scoped (SummaryPanel.razor.css), so these selectors are body-scoped to outrank the scoped rules (equal class/attribute specificity otherwise). The refresh corner cell reuses the light label-cell background and gets no row tint, so it stayed white; the table borders and value text are the panel's other hard-coded light values. */ body.mod-skin-dark .summary-label-cell { background: #262626; color: #bdbdbd; } body.mod-skin-dark .summary-table th, body.mod-skin-dark .summary-table td { border-color: rgba(255, 255, 255, 0.12); } body.mod-skin-dark .summary-value-cell { color: #9aa0ab; } body.mod-skin-dark .summary-has-value { color: #bdbdbd; } /* Weekend / holiday markers are a dark saturated red (#c62828) that reads harshly on the dark theme; use a softer coral (Summary panel headers, the legacy weekend title, and the date-picker weekend/holiday days). */ body.mod-skin-dark .summary-weekend, body.mod-skin-dark .weekend-title, body.mod-skin-dark .mud-picker-calendar-day.tt-weekend-day:not(.mud-selected), body.mod-skin-dark .mud-picker-calendar-day.tt-holiday-day:not(.mud-selected) { color: #f28b82; } /* The Work Items row delete icon uses MudBlazor's bright secondary; match it to the soft coral red. */ body.mod-skin-dark [data-testid="grid-row-delete"], body.mod-skin-dark [data-testid="grid-row-delete"] .mud-icon-root { color: #f28b82 !important; } /* The non-working-days sub-table in the Summary panel is a Bootstrap .table with light borders/text. */ body.mod-skin-dark .table { color: #bdbdbd; border-color: rgba(255, 255, 255, 0.12); } body.mod-skin-dark .table th, body.mod-skin-dark .table td { border-color: rgba(255, 255, 255, 0.12); } /* ---- TimeBoard grid row highlights ----------------------------------------------------------- */ /* Light-theme tints (pale cream / lightcyan / near-white) rendered as bright bands on the dark grid. Give each a dark-mode equivalent. The originals carry !important, so these do too, and are body-scoped to outrank the InlineDataGrid scoped ::deep rules. */ body.mod-skin-dark .notBillableWorkItem { background-color: rgba(255, 193, 7, 0.10) !important; } body.mod-skin-dark .inline-editing-row td { background-color: rgba(94, 129, 172, 0.20) !important; } body.mod-skin-dark .inline-inserted-row td { background-color: rgba(255, 255, 255, 0.06) !important; } /* ---- Identity / login pages ------------------------------------------------------------------ */ .mod-skin-dark .tt-identity .card.bg-faded { background-color: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.08); color: #bdbdbd; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); } .mod-skin-dark .tt-identity h1, .mod-skin-dark .tt-identity h2, .mod-skin-dark .tt-identity h2 small, .mod-skin-dark .tt-identity .form-label, .mod-skin-dark .tt-identity .custom-control-label { color: #d0d0d0; } .mod-skin-dark .tt-identity .help-block { color: #9aa0ab; } .mod-skin-dark .tt-identity a:not(.btn) { color: #8aa6e6; } .mod-skin-dark .tt-identity .form-control { background-color: #2a2a2a; border-color: rgba(255, 255, 255, 0.18); color: #bdbdbd; -webkit-text-fill-color: #bdbdbd; } .mod-skin-dark .tt-identity .form-control:focus { background-color: #2f2f2f; border-color: #594ae2; color: #d0d0d0; -webkit-text-fill-color: #d0d0d0; } .mod-skin-dark .tt-identity .form-control::placeholder { color: rgba(255, 255, 255, 0.4); } /* Browser autofill forces a light background AND a dark text-fill-colour on saved-credential fields with high priority; !important is required to repaint both (the inset box-shadow is the only way to recolour the autofill background). */ .mod-skin-dark .tt-identity .form-control:-webkit-autofill, .mod-skin-dark .tt-identity .form-control:-webkit-autofill:hover, .mod-skin-dark .tt-identity .form-control:-webkit-autofill:focus, .mod-skin-dark .tt-identity .form-control:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important; -webkit-text-fill-color: #bdbdbd !important; caret-color: #bdbdbd; } /* Bootstrap's custom checkbox draws its box as a white ::before; darken the unchecked state. */ .mod-skin-dark .tt-identity .custom-control-label::before { background-color: #2a2a2a; border-color: rgba(255, 255, 255, 0.3); } /* Soften the pure-white button labels on the login page to a muted grey (still readable on the blue). */ .mod-skin-dark .tt-identity .btn-primary, .mod-skin-dark .tt-identity .btn-info { color: #c4c4c4; } /* The "Remember me" checkbox label reads brighter than the surrounding text; bring it in line. */ .mod-skin-dark .tt-identity .custom-control-label { color: #b5b5b5; } /* Keep the invalid-credentials alert readable on the dark card (markup hard-codes text-dark). */ .mod-skin-dark .tt-identity .alert.alert-danger { background-color: #3a1f27; border-color: #5c2a35; } .mod-skin-dark .tt-identity .alert.alert-danger.text-dark { color: #ffb3c1 !important; }