Joseph Doherty
112 lines
3.5 KiB
CSS
112 lines
3.5 KiB
CSS
/* 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 <ThemeHead/>) 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 <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);
|
||
}
|