diff --git a/src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/css/site.css b/src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/css/site.css index 9cea564f..6d21801a 100644 --- a/src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/css/site.css +++ b/src/ZB.MOM.WW.ScadaBridge.CentralUI/wwwroot/css/site.css @@ -4,6 +4,19 @@ the side-rail shell; this sheet carries only app-specific rules the kit does 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 { display: none; position: fixed; @@ -19,7 +32,7 @@ max-width: 400px; padding: 2rem; text-align: center; - background: var(--bs-white); + background: var(--card, #fff); border-radius: 0.5rem; } @@ -35,3 +48,64 @@ .modal-dialog.script-editor-modal .modal-content { height: 100%; } + +/* ── Dark-mode token overrides ─────────────────────────────────────────────── + Activated when 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); +}