/* ScadaBridge Central UI – global styles. Loaded from Host App.razor as `_content/ZB.MOM.WW.ScadaBridge.CentralUI/css/site.css`. The shared ZB.MOM.WW.Theme kit (linked via ) owns the tokens and 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; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); } #reconnect-modal .modal-content { max-width: 400px; padding: 2rem; text-align: center; background: var(--card, #fff); border-radius: 0.5rem; } /* Script editor modal — the tabbed Trigger/Code/Parameters/Return content is substantial, so the dialog fills most of the viewport. Pairs with .modal-dialog-scrollable so the body scrolls within the fixed height. */ .modal-dialog.script-editor-modal { max-width: 96vw; width: 96vw; height: calc(100vh - 2rem); } .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); }