Joseph Doherty
70 lines
3.1 KiB
CSS
70 lines
3.1 KiB
CSS
/* OtOpcUa Admin — app-only view layer over the shared ZB.MOM.WW.Theme kit.
|
|
The kit's theme.css (tokens) + layout.css (side-rail shell, login card) are
|
|
linked via <ThemeHead/> and own all of the shell/rail/login styling. This
|
|
sheet carries only the few rules the kit does not provide. */
|
|
|
|
/* Static (non-collapsible) eyebrow label — used for the "Session" caption in the
|
|
rail footer. The kit styles a collapsible section <summary> as
|
|
.rail-eyebrow-toggle; a plain inline label needs this lighter rule. */
|
|
.rail-eyebrow {
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--ink-faint);
|
|
padding: 0.3rem 0.6rem;
|
|
}
|
|
|
|
/* OtOpcUa domain pages (Alerts, ScriptLog, Fleet, Hosts, AlarmsHistorian,
|
|
RoleGrants, ImportEquipment) use two extra status-chip variants on top of the
|
|
kit's .chip base + .chip-ok/.chip-warn/.chip-bad/.chip-idle/.chip-info set.
|
|
.chip-alert is the red/danger variant (mirrors the kit's .chip-bad);
|
|
.chip-caution is the amber variant (mirrors the kit's .chip-warn). Both reuse
|
|
the kit's status tokens so they stay on-palette. */
|
|
.chip-alert { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); }
|
|
.chip-caution { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-border); }
|
|
|
|
/* Button sizing lives in the kit since ZB.MOM.WW.Theme 0.4.0 (layout.css ships the
|
|
.btn / .btn-sm CSS-variable overrides this sheet carried locally under 0.3.1). */
|
|
|
|
/* Red variant of the kit's .notice inline banner (theme.css styles .notice amber,
|
|
off the --warn-* tokens). Error banners across the AdminUI want the red tint, and
|
|
were reaching for it with an inline style="border-color:var(--alert)" — but no
|
|
--alert token exists in Theme 0.3.1, site.css or anywhere else, so that inline
|
|
rule resolved to nothing and the banner stayed amber. The kit's red family is the
|
|
--bad-* set (--bad / --bad-bg / --bad-border), the same tokens .chip-alert above
|
|
uses; combine as `class="panel notice notice-alert"`. */
|
|
.notice-alert {
|
|
color: var(--bad);
|
|
background: var(--bad-bg);
|
|
border-color: var(--bad-border);
|
|
}
|
|
|
|
/* Fixed-width expander column for the tree components (RawTree, AclScopeTree, and
|
|
friends). Their rows are d-flex, so a bare `width` on an expander button or its
|
|
empty-leaf placeholder is a suggestion the flex algorithm is free to shrink —
|
|
flex-basis is what actually holds the column, hence both properties here. */
|
|
.tree-twist {
|
|
flex: 0 0 18px;
|
|
width: 18px;
|
|
}
|
|
|
|
/* Modal sizing (#631). Bootstrap sizes .modal-backdrop with 100vw/100vh, and 100vw includes the
|
|
scrollbar gutter, so on a tall form (Configure driver / Modbus) the backdrop overran the viewport
|
|
and produced a page-level horizontal scrollbar. Pin it with inset:0 instead (no vw/vh), and keep
|
|
the dialog inside the viewport. These modals are hand-rolled (display:block, no Bootstrap JS). */
|
|
.modal-backdrop {
|
|
inset: 0;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.modal {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-dialog {
|
|
max-width: min(var(--bs-modal-width, 500px), calc(100vw - 2rem));
|
|
}
|