/* ═══════════════════════════════════════════════════════════════════ FILE: src/BMCMonitor.Web/wwwroot/css/shell.css (v2) PURPOSE: Responsive application shell (app bar + drawer + content). "bmc-" prefixed classes — no collision with app.css/site.css. LOAD ORDER: link AFTER app.css in Components/App.razor. DRAWER STATE: driven by body.bmc-drawer-open (toggled by shell.js). Keyed off so Blazor re-renders never clobber it. ═══════════════════════════════════════════════════════════════════ */ :root { --bmc-drawer-w: 260px; --bmc-appbar-h: 60px; --bmc-brand-1: #1e3a8a; --bmc-brand-2: #1e40af; --bmc-accent: #60a5fa; --bmc-mobile-bp: 900px; /* ≤ this width = off-canvas drawer */ } /* ── Shell container ──────────────────────────────────────────────── */ .bmc-shell { min-height: 100vh; min-height: 100dvh; background-color: #f5f5f5; } /* ── App bar (top) ───────────────────────────────────────────────── */ .bmc-appbar { position: sticky; top: 0; z-index: 1100; height: var(--bmc-appbar-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); } .bmc-appbar__title { font-size: 20px; font-weight: 600; color: var(--bmc-brand-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .bmc-appbar__user { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .bmc-appbar__username { font-size: 14px; color: #666; } /* Hamburger — hidden on desktop, shown on mobile */ .bmc-hamburger { display: none; flex: 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: none; border-radius: 10px; background: transparent; color: var(--bmc-brand-1); font-size: 24px; line-height: 1; cursor: pointer; transition: background-color .2s ease; } .bmc-hamburger:hover { background: rgba(30, 58, 138, .08); } .bmc-hamburger:focus-visible { outline: 2px solid var(--bmc-accent); outline-offset: 2px; } /* ── Drawer (sidebar) ────────────────────────────────────────────── */ .bmc-drawer { position: fixed; top: 0; left: 0; z-index: 1200; width: var(--bmc-drawer-w); height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--bmc-brand-1) 0%, var(--bmc-brand-2) 100%); color: #fff; box-shadow: 2px 0 10px rgba(0, 0, 0, .15); overflow: hidden; /* drawer itself never scrolls */ transition: transform .28s ease; } /* Header stays pinned (does NOT scroll) */ .bmc-drawer__header { flex: 0 0 auto; /* fixed height, no shrink */ padding: 18px 16px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .12); } .bmc-drawer__header h4 { margin: 10px 0 5px; font-size: 22px; font-weight: 600; } .bmc-drawer__powered { font-size: 12px; opacity: .85; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } /* ── Nav links region — the ONLY scrollable part ─────────────────── */ .bmc-nav { flex: 1 1 auto; min-height: 0; /* critical so flex child can scroll */ padding: 14px 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(255, 255, 255, .35) transparent; /* Firefox */ } /* Thin, light scrollbar (WebKit/Chromium/Edge/Safari) */ .bmc-nav::-webkit-scrollbar { width: 6px; } .bmc-nav::-webkit-scrollbar-track { background: transparent; } .bmc-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .30); border-radius: 3px; } .bmc-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .50); } .bmc-navlink { display: flex; align-items: center; min-height: 48px; padding: 10px 20px; color: rgba(255, 255, 255, .9); text-decoration: none; border-left: 3px solid transparent; transition: background-color .2s ease, border-color .2s ease; } .bmc-navlink:hover { background: rgba(255, 255, 255, .10); border-left-color: var(--bmc-accent); color: #fff; } .bmc-navlink.active { background: rgba(255, 255, 255, .16); border-left-color: var(--bmc-accent); color: #fff; font-weight: 600; } .bmc-navicon { font-size: 20px; margin-right: 12px; width: 24px; text-align: center; flex: 0 0 auto; } .bmc-navtext { font-size: 15px; } /* ── Main content ────────────────────────────────────────────────── */ .bmc-main { margin-left: var(--bmc-drawer-w); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; transition: margin-left .28s ease; } .bmc-content { padding: 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); flex: 1 1 auto; } /* ── Scrim (revealed only on mobile when drawer open) ────────────── */ .bmc-scrim { display: none; position: fixed; inset: 0; z-index: 1150; background: rgba(0, 0, 0, .45); border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ═══════════════════════════════════════════════════════════════════ MOBILE / TABLET (≤ 900px): drawer becomes off-canvas overlay ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .bmc-hamburger { display: inline-flex; } .bmc-main { margin-left: 0; } .bmc-appbar { padding-left: max(8px, env(safe-area-inset-left)); } .bmc-content { padding: 16px; } /* Parked off-screen by default */ .bmc-drawer { transform: translateX(-100%); } /* Opened via body class (set by shell.js) */ body.bmc-drawer-open .bmc-drawer { transform: translateX(0); } body.bmc-drawer-open .bmc-scrim { display: block; } /* Lock background scroll while the overlay is open */ body.bmc-drawer-open { overflow: hidden; } } /* Desktop never shows a scrim, regardless of body state */ @media (min-width: 901px) { .bmc-scrim { display: none !important; } } /* ── Accessibility: honor reduced-motion ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bmc-drawer, .bmc-main, .bmc-hamburger { transition: none; } }