Joseph Doherty
697a773340
Foundation task of the AdminUI UI sweep. CSS/link/doc only — no behavior change
beyond restoring styles that were built but never served.
- App.razor: link the RCL's scoped-CSS bundle
(_content/ZB.MOM.WW.OtOpcUa.AdminUI/ZB.MOM.WW.OtOpcUa.AdminUI.bundle.scp.css).
It is produced on every compile and served by the Host, but nothing referenced
it, so ContextMenu.razor.css was dead at runtime and context menus rendered
in-flow with no position:fixed.
- site.css: three additions.
* .btn / .btn-sm sizing as Bootstrap CSS-VARIABLE overrides (never box
properties — .btn-group depends on Bootstrap's own .btn rules for its seams
and end-cap radii). Theme 0.3.1 ships no .btn rule, so Bootstrap's 1rem
applied against the theme's 0.9rem body. Upstreaming candidate, same as the
ignitionoee router's app.css.
* .notice-alert — red variant of the kit's amber .notice, on the --bad/
--bad-bg/--bad-border tokens. The 13 existing call sites hack this with
style="border-color:var(--alert)", and no --alert token exists anywhere, so
the tint silently no-ops today. Call-site migration is a separate task.
* .tree-twist — shared 18px expander column for the tree components, replacing
repeated inline style="width:18px". Rows are d-flex, so flex-basis is what
actually holds the column. Adoption is a separate task.
- ContextMenu.razor.css: correct the header comment — the kit is light-only
(no dark block in Theme 0.3.1, site.css, or this file). No rule changes.
- docs/Telemetry.md: record that driver-health is keyed per driver instance
across the cluster, not per Akka member (the wire record carries no per-member
identity). The fact previously lived only in Hosts.razor page copy.
- docs/Configuration.md: new audit-log subsection recording that EventId gives
cross-restart dedup, enforced by the filtered unique index
UX_ConfigAuditLog_EventId, so a retried apply inserts no duplicate row;
CorrelationId joins a row to its originating workflow. Previously only in the
historical v2 rebuild plan and ClusterAudit page copy.
70 lines
3.2 KiB
CSS
70 lines
3.2 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 — ZB.MOM.WW.Theme 0.3.1 ships no .btn rule at all, so Bootstrap's
|
|
hard-coded --bs-btn-font-size: 1rem applies against the theme's 0.9rem body and
|
|
every button reads oversized. Override the VARIABLES, never the box properties:
|
|
.btn-group relies on Bootstrap's own .btn rules for its seams, negative margins
|
|
and end-cap radii, and redefining padding/font-size wholesale breaks them.
|
|
UPSTREAMING CANDIDATE for a future Theme release — when the kit ships these,
|
|
delete this block rather than leaving a duplicate to drift. (Same gap, same fix,
|
|
same flag as the ignitionoee router's wwwroot/css/app.css.) */
|
|
.btn {
|
|
--bs-btn-font-size: .85rem;
|
|
--bs-btn-padding-y: .35rem;
|
|
--bs-btn-padding-x: .8rem;
|
|
--bs-btn-line-height: 1.4;
|
|
}
|
|
|
|
.btn-group-sm > .btn,
|
|
.btn-sm {
|
|
--bs-btn-font-size: .78rem;
|
|
--bs-btn-padding-y: .25rem;
|
|
--bs-btn-padding-x: .6rem;
|
|
}
|
|
|
|
/* 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;
|
|
}
|