Joseph Doherty
f1efe6e081
Under an interactive Blazor render mode the runtime replaces the prerendered
<details> after DOMContentLoaded, so nav-state.js (wired on load, re-run only on
'enhancedload') never wires the live rail — no aria sync, no persistence, no
active-reveal — and native <details> content-hiding is unreliable, leaving a
collapsed section's items visible. 0.3.1:
- nav-state.js: add a MutationObserver backstop that re-runs apply() when
details.rail-section nodes are (re)inserted; idempotent via the per-element
init guard, loop-safe (childList-only + active-reveal's !open guard).
- layout.css: explicit .rail-section:not([open]) > .rail-section-body{display:none}
so visual collapse works across all render modes.
- themeissues.md: document issue #6; Directory.Build.props 0.3.0 -> 0.3.1.
48 bUnit tests green.
230 lines
8.0 KiB
CSS
230 lines
8.0 KiB
CSS
/* ZB.MOM.WW.Theme — side-rail + login layout
|
|
Tokens live in theme.css; this sheet carries only layout + the side rail. */
|
|
|
|
/* ── App shell: side rail + page ─────────────────────────────────────────── */
|
|
/* The shell is a native <details> disclosure so the narrow-viewport hamburger
|
|
toggle works with NO JavaScript (no Bootstrap collapse bundle): below lg the
|
|
<summary> hamburger opens/closes the rail; on lg+ the rail is force-shown
|
|
regardless of the open state (see the lg media query below). The outer flex
|
|
direction is supplied by Bootstrap utilities on the wrapper
|
|
(`d-flex flex-column flex-lg-row`) so the hamburger row stacks above the rail
|
|
on <lg viewports and the rail sits beside the page on lg+. */
|
|
.app-shell {
|
|
align-items: stretch;
|
|
min-height: calc(100vh - 3.3rem);
|
|
}
|
|
|
|
.app-shell .page {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Hamburger <summary>: hide the native disclosure triangle so it reads as a
|
|
plain button (the styling comes from the Bootstrap .btn utilities). */
|
|
.app-shell > summary.rail-toggle {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
.app-shell > summary.rail-toggle::-webkit-details-marker { display: none; }
|
|
|
|
/* Below lg the native <details> shows/hides #theme-rail via [open]; nothing
|
|
extra is needed there. On lg+ we force the rail visible (see media query)
|
|
and keep the toggle hidden via Bootstrap's d-lg-none. */
|
|
|
|
/* ── Side rail ───────────────────────────────────────────────────────────── */
|
|
.side-rail {
|
|
width: 220px;
|
|
flex: 0 0 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
padding: 1rem 0.7rem;
|
|
background: var(--card);
|
|
border-right: 1px solid var(--rule-strong);
|
|
}
|
|
|
|
/* On lg+ keep the side rail pinned so it stays visible when content scrolls,
|
|
and force it shown regardless of the <details> open state (the hamburger
|
|
toggle is hidden at this width). */
|
|
@media (min-width: 992px) {
|
|
/* Chromium >=121 wraps a <details>'s content in a generated ::details-content
|
|
box that carries content-visibility:hidden while the <details> is closed.
|
|
Because our app-shell ships closed by default (SSR, no JS) and the toggle
|
|
is d-lg-none here, that wrapper would (a) hide the rail+page entirely on
|
|
lg+ and (b) sit between .app-shell and its rail/page children, collapsing
|
|
the flex-lg-row layout into a vertical stack. Dissolving the wrapper with
|
|
display:contents removes its box (so content-visibility no longer hides the
|
|
content AND rail/page become direct flex children of .app-shell again).
|
|
Browsers that don't support ::details-content treat this as an invalid
|
|
selector and drop the rule, falling back to the legacy force-show below. */
|
|
.app-shell::details-content {
|
|
display: contents;
|
|
}
|
|
|
|
#theme-rail {
|
|
display: block;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
align-self: flex-start;
|
|
z-index: 1020;
|
|
}
|
|
}
|
|
|
|
/* When the side rail is collapsed under <lg viewports (the <details> is closed)
|
|
the native disclosure hides #theme-rail; when open, restore full width on
|
|
mobile so the rail spans the viewport. */
|
|
@media (max-width: 991.98px) {
|
|
.side-rail {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/* Login card title. Replaces the panel-head top strip on the login page so the
|
|
card reads as a self-contained sign-in form, not a tabbed panel. */
|
|
.login-title {
|
|
margin: 0 0 1.1rem 0;
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* Brand block pinned at the top of the side rail. Mirrors ScadaLink's
|
|
.sidebar .brand styling — used now that the top app-bar was dropped. */
|
|
.side-rail .brand {
|
|
color: var(--ink);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--rule);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
.side-rail .brand .mark { color: var(--accent); }
|
|
|
|
/* Section eyebrow — the <summary> label of a NavRailSection. The collapse
|
|
chevron is supplied by the `.rail-section > summary::before` rule below; this
|
|
rule styles the uppercase eyebrow text itself. */
|
|
.rail-eyebrow-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
width: 100%;
|
|
background: transparent;
|
|
border: 0;
|
|
text-align: left;
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--ink-faint);
|
|
padding: 0.45rem 0.6rem 0.3rem;
|
|
cursor: pointer;
|
|
}
|
|
.rail-eyebrow-toggle:hover { color: var(--ink); }
|
|
.rail-section-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.rail-link {
|
|
display: block;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: 4px;
|
|
border-left: 2px solid transparent;
|
|
font-size: 0.86rem;
|
|
color: var(--ink-soft);
|
|
}
|
|
.rail-link:hover {
|
|
background: var(--hover-bg);
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
}
|
|
.rail-link.active {
|
|
background: var(--active-bg);
|
|
border-left-color: var(--accent);
|
|
color: var(--accent-deep);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Optional leading icon inside a rail link (NavRailItem's Icon slot). Sizes and
|
|
aligns the icon and gives it a gap from the label text. */
|
|
.rail-ico {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1rem;
|
|
margin-right: 0.4rem;
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* ── Session block, pinned to the rail foot ──────────────────────────────── */
|
|
.rail-foot {
|
|
margin-top: auto;
|
|
padding-top: 0.6rem;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.rail-user {
|
|
display: block;
|
|
padding: 0 0.6rem;
|
|
font-weight: 600;
|
|
font-size: 0.88rem;
|
|
}
|
|
.rail-roles {
|
|
padding: 0.1rem 0.6rem 0.5rem;
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
color: var(--ink-faint);
|
|
}
|
|
.rail-btn {
|
|
display: inline-block;
|
|
margin: 0 0.6rem;
|
|
padding: 0.3rem 0.7rem;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: var(--ink-soft);
|
|
background: var(--card);
|
|
border: 1px solid var(--rule-strong);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.rail-btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Login card centring ─────────────────────────────────────────────────── */
|
|
.login-wrap {
|
|
max-width: 380px;
|
|
margin: 3.5rem auto 0;
|
|
}
|
|
|
|
/* details-based collapsible nav section (no JS / no rendermode coupling) */
|
|
.rail-section { }
|
|
.rail-section > summary { list-style: none; cursor: pointer; }
|
|
.rail-section > summary::-webkit-details-marker { display: none; }
|
|
.rail-section > summary::before { content: '\25B6'; font-size: 0.55rem; color: var(--ink-faint); margin-right: 0.4rem; }
|
|
.rail-section[open] > summary::before { content: '\25BC'; }
|
|
/* Hide a collapsed section's items explicitly. The browser's built-in
|
|
<details> content-hiding (::details-content content-visibility:hidden) is
|
|
unreliable once an interactive framework (e.g. Blazor InteractiveServer)
|
|
owns/re-renders the native <details> — a closed section can otherwise keep
|
|
showing its items under a "collapsed" chevron. An explicit display:none makes
|
|
the visual collapse work across all render modes (kit issue #6). */
|
|
.rail-section:not([open]) > .rail-section-body { display: none; }
|
|
|
|
/* StatusPill: info variant (on-palette, reuses the info blue wash) */
|
|
.chip-info { color: var(--accent-deep); background: var(--info-bg); border-color: var(--info-border); }
|
|
|
|
/* TechCard body/footer padding; TechField error; LoginCard body */
|
|
.panel-body { padding: 0.85rem 0.9rem; }
|
|
.panel-foot { padding: 0.6rem 0.9rem; border-top: 1px solid var(--rule); }
|
|
.login-body { padding: 1.4rem 1.1rem 1.25rem; }
|
|
.login-error { margin-bottom: 0.85rem; }
|
|
.field-error { font-size: 0.78rem; margin-top: 0.2rem; }
|