dohertj2/ScadaBridge
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(centralui): dark-mode token layer + .sb-modal-backdrop in site.css (T34a)

Browse Source
This commit is contained in:
Joseph Doherty
2026-06-18 19:38:33 -04:00
parent b7f7fe935c
commit 7b41c2c202
1 changed files with 75 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/css/site.css
+75 -1
View File
@@ -4,6 +4,19 @@
the side-rail shell; this sheet carries only app-specific rules the kit does the side-rail shell; this sheet carries only app-specific rules the kit does
not provide. */ not provide. */
/* ── App-level tokens (light defaults) ─────────────────────────────────────
--sb-backdrop: semi-transparent overlay used by DialogHost and ad-hoc
modal backdrops throughout the app. */
:root {
--sb-backdrop: rgba(0, 0, 0, 0.4);
}
/* Reusable backdrop class — applied by DialogHost and standalone modal
backdrop divs so the overlay colour follows the active theme. */
.sb-modal-backdrop {
background: var(--sb-backdrop);
}
#reconnect-modal { #reconnect-modal {
display: none; display: none;
position: fixed; position: fixed;
@@ -19,7 +32,7 @@
max-width: 400px; max-width: 400px;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
background: var(--bs-white); background: var(--card, #fff);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@@ -35,3 +48,64 @@
.modal-dialog.script-editor-modal .modal-content { .modal-dialog.script-editor-modal .modal-content {
height: 100%; height: 100%;
} }
/* ── Dark-mode token overrides ───────────────────────────────────────────────
Activated when <html data-bs-theme="dark"> is set (T34b toggle task).
Loads after theme.css / layout.css so [data-bs-theme] specificity (0,1,0)
beats the theme's :root (0,0,1) at equal cascade layer. */
[data-bs-theme="dark"] {
/* Surfaces & ink */
--paper: #1b1d21;
--card: #25282d;
--ink: #e6e8ec;
--ink-soft: #9aa0aa;
--ink-faint: #6b727c;
--rule: #33373e;
--rule-strong: #3a3f46;
/* Accent — lightened for contrast on dark */
--accent: #4d7fe8;
--accent-deep: #7aa0ef;
/* Status — foregrounds unchanged (inherently visible on dark) */
--ok: #40b856;
--warn: #f0a030;
--bad: #f05050;
--idle: #7a8290;
/* Status — tinted backgrounds (dark surface tints) */
--ok-bg: #1a2e1e;
--warn-bg: #2e2210;
--bad-bg: #2e1616;
--idle-bg: #25282d;
/* Status — borders on dark tints */
--ok-border: #2a5030;
--warn-border: #4a3510;
--bad-border: #4a2020;
--ok-border-soft: #264a2c;
--warn-border-soft: #44300e;
--bad-border-soft: #44201e;
/* Warning ink — brightened amber for dark contrast */
--warn-ink: #d4891a;
--warn-ink-deep: #b8741a;
/* Info tint */
--info-bg: #1a2240;
--info-border: #2a3660;
/* Neutral surface washes */
--zebra-bg: #202328;
--hover-bg: #2a2e38;
--active-bg: #1e2640;
/* Bootstrap bridge tokens */
--bs-body-bg: var(--paper);
--bs-body-color: var(--ink);
--bs-border-color: var(--rule);
--bs-emphasis-color: var(--ink);
/* Backdrop — slightly darker overlay in dark mode */
--sb-backdrop: rgba(0, 0, 0, 0.6);
}