/* ========================================================================== MLE static-showcase shell chrome. Namespaced replica of mle shell (light theme, "compact" menu style) for the baked demo pages. Two hard rules: 1. EVERY selector in this file begins with `.mle-ss` - except the single body-offset rule, which is itself gated on the `.mle-ss-page` class bake.mjs adds to . Nothing here can select a page element. 2. The chrome defends itself from the page as hard as the page is defended from it: the baked documents carry Bootstrap 4 plus each module's own stylesheet, any of which would otherwise restyle a bare
//. Hence the blanket reset below. Design tokens are `--mss-*` and are declared on `.mle-ss`, never on :root - a page that owns `--primary-600` or `--navy-900` (scribe does) must not see its variables shadowed, and ours must not be reachable from page rules. Values are the light-theme :root block of the real mle_shell.css verbatim. ========================================================================== */ .mle-ss { /* surfaces */ --mss-bg-header: #ffffff; --mss-bg-stat: #f8fafc; --mss-bg-hover: #f0f4f9; --mss-bg-tabs: #f0f3f8; --mss-bg-tab-hover: #e6eaf2; /* lines */ --mss-border: #e2e8f0; --mss-border-light: #e8edf3; --mss-border-rail: #dde2ea; /* text */ --mss-text-primary: #1a2535; --mss-text-secondary: #475569; --mss-text-muted: #7a8799; --mss-text-faint: #9aa5b4; --mss-text-hint: #b0bac8; /* accent */ --mss-cyan: #0ea5c9; --mss-cyan-bg: #e0f0fa; /* icon idle colour, straight from .mle-scb */ --mss-icon: #a0aab8; --mss-close: #c0c8d4; /* geometry - 48 + 35 = 83, the real shell's measured compact height */ --mss-header-h: 48px; --mss-tabs-h: 35px; --mss-shell-h: 83px; --mss-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* -- Body offset ---------------------------------------------------------- The only rule that touches a page element, and it touches exactly one property. box-sizing is deliberately NOT overridden: the baked pages inherit Bootstrap's `*{box-sizing:border-box}`, so a body that pins itself to 100vh (scribe, scribe-review) ends up with 83px less room - which is precisely what the module gets in the real app, where it renders inside #mle-content-area's iframe at `top:83px;bottom:0`. Forcing content-box here would instead make those pages 83px TALLER than their own stylesheet asked for. ------------------------------------------------------------------------ */ body.mle-ss-page { padding-top: 83px; /* = --mss-shell-h; literal because the var lives on .mle-ss */ } /* -- Blanket reset (inbound bleed guard) ----------------------------------- Neutralises anything the host page's stylesheets would otherwise apply to the generic elements the chrome is built from. Specificity is (0,1,0) so every rule below - all of which are at least (0,2,0) - overrides it. ------------------------------------------------------------------------ */ .mle-ss, .mle-ss *, .mle-ss *::before, .mle-ss *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; font-family: var(--mss-font); font-variant: normal; font-feature-settings: normal; color: inherit; background: none; text-align: left; text-decoration: none; text-transform: none; text-indent: 0; text-shadow: none; letter-spacing: normal; word-spacing: normal; white-space: normal; list-style: none; float: none; clear: none; position: static; vertical-align: baseline; box-shadow: none; outline: none; opacity: 1; visibility: visible; transform: none; filter: none; min-width: 0; max-width: none; min-height: 0; max-height: none; width: auto; height: auto; animation: none; transition: none; } /* Bootstrap ships `a:hover{text-decoration:underline}` at (0,1,1), which outranks the (0,1,0) blanket reset above - so the link states need their own rule. It deliberately does NOT set `color`: `.mle-ss a:link` weighs (0,2,1) and would then outrank `.mle-ss .mle-ss-tab` (0,2,0), repainting every inactive tab in the inherited primary colour. Colour is left to the blanket reset, which already beats Bootstrap's (0,0,1) `a{color:#007bff}`. */ .mle-ss a, .mle-ss a:link, .mle-ss a:visited, .mle-ss a:hover, .mle-ss a:focus, .mle-ss a:active { text-decoration: none; outline: none; box-shadow: none; } .mle-ss svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } /* default glyph box - every specific rule below is at least as specific and comes later, so it wins; this only guarantees no can fall back to the 300x150 default replaced-element size after `width:auto` in the reset. */ .mle-ss .mle-ss-i { width: 14px; height: 14px; } /* -- Shell root ----------------------------------------------------------- Fixed, like the real shell (#mle-shell-header is position:fixed;z-index:1050). z-index sits well above ordinary page content but below the tour engine's overlay (2147483000) so a running tour still dims and spotlights over it. ------------------------------------------------------------------------ */ .mle-ss { position: fixed; top: 0; left: 0; right: 0; z-index: 900000; font-family: var(--mss-font); font-size: 12px; line-height: normal; color: var(--mss-text-primary); -webkit-font-smoothing: antialiased; } /* -- Header bar --------------------------------------------------------- */ .mle-ss .mle-ss-hd { height: var(--mss-header-h); background: var(--mss-bg-header); border-bottom: 1px solid var(--mss-border); display: flex; align-items: center; padding: 0 10px; gap: 4px; position: relative; } .mle-ss .mle-ss-spacer { flex: 1 1 auto; } /* -- Logo --------------------------------------------------------------- */ .mle-ss .mle-ss-logo-wrap { position: relative; flex-shrink: 0; } .mle-ss .mle-ss-logo-btn { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; } .mle-ss .mle-ss-logo-mark { width: 20px; height: 20px; flex-shrink: 0; fill: #1a2535; stroke: none; } .mle-ss .mle-ss-logo-txt { display: block; } .mle-ss .mle-ss-ln { font-size: 13px; font-weight: 500; color: var(--mss-text-primary); display: block; line-height: 1.2; } .mle-ss .mle-ss-ls { font-size: 9px; color: var(--mss-text-hint); display: block; line-height: 1; } .mle-ss .mle-ss-caret { width: 11px; height: 11px; color: #94a3b8; } /* -- Divider ------------------------------------------------------------ */ .mle-ss .mle-ss-hdiv { width: 1px; height: 20px; background: var(--mss-border-light); flex-shrink: 0; margin: 0 4px; } /* -- Shortcut row ------------------------------------------------------- */ .mle-ss .mle-ss-sc-row { display: flex; gap: 1px; flex-shrink: 0; } .mle-ss .mle-ss-scb { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--mss-icon); border-radius: 5px; flex-shrink: 0; } .mle-ss .mle-ss-scb > .mle-ss-i { width: 16px; height: 16px; } /* -- Patient chip ------------------------------------------------------- */ .mle-ss .mle-ss-pt-wrap { position: relative; flex-shrink: 0; } .mle-ss .mle-ss-pt-chip { display: flex; align-items: center; gap: 9px; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--mss-border-light); background: none; } .mle-ss .mle-ss-chip-icon { width: 17px; height: 17px; } .mle-ss .mle-ss-chip-name--none { font-size: 13px; font-weight: 400; font-style: italic; color: var(--mss-text-hint); line-height: 1; white-space: nowrap; } .mle-ss .mle-ss-pt-chip--none .mle-ss-chip-icon { color: var(--mss-text-hint); } /* -- User chip ---------------------------------------------------------- */ .mle-ss .mle-ss-user-wrap { position: relative; flex-shrink: 0; } .mle-ss .mle-ss-user-chip { display: flex; align-items: center; gap: 6px; background: var(--mss-bg-stat); border: 1px solid var(--mss-border-light); border-radius: 20px; padding: 2px 9px 2px 2px; margin-left: 4px; } .mle-ss .mle-ss-user-av { width: 26px; height: 26px; border-radius: 50%; background: var(--mss-cyan); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; color: #ffffff; flex-shrink: 0; line-height: normal; } .mle-ss .mle-ss-user-text { text-align: left; line-height: 1.2; } .mle-ss .mle-ss-user-name { font-size: 12px; font-weight: 500; color: var(--mss-text-primary); white-space: nowrap; } .mle-ss .mle-ss-user-uname { font-size: 10px; color: var(--mss-text-hint); white-space: nowrap; } /* -- Tab rail ----------------------------------------------------------- */ .mle-ss .mle-ss-tabs-rail { min-height: var(--mss-tabs-h); background: var(--mss-bg-tabs); border-bottom: 1px solid var(--mss-border-rail); display: flex; align-items: stretch; flex-wrap: wrap; } .mle-ss .mle-ss-tab { display: flex; align-items: center; gap: 5px; padding: 0 10px 0 13px; color: var(--mss-text-muted); font-size: 12px; line-height: 18px; white-space: nowrap; flex-shrink: 0; border-bottom: 2px solid transparent; background: none; border-radius: 0; transition: color 100ms, background 100ms; } .mle-ss .mle-ss-tab:hover { background: var(--mss-bg-tab-hover); color: var(--mss-text-primary); } .mle-ss .mle-ss-tab.mle-ss-tab--active { background: var(--mss-bg-header); color: var(--mss-text-primary); font-weight: 500; border-bottom: 2px solid var(--mss-cyan); } .mle-ss .mle-ss-tab-i { width: 12px; height: 12px; } .mle-ss .mle-ss-tab-label { font: inherit; color: inherit; } /* Tab affordances. Inert in the static showcase - they exist because the real shell shows them on the active/hovered tab and the chrome reads wrong without them; they carry aria-hidden and no interactive role. */ .mle-ss .mle-ss-tac { display: flex; gap: 1px; margin-left: 2px; opacity: 0; transition: opacity 100ms; } .mle-ss .mle-ss-tab:hover .mle-ss-tac, .mle-ss .mle-ss-tab--active .mle-ss-tac { opacity: 1; } .mle-ss .mle-ss-tacb { padding: 2px; color: inherit; border-radius: 3px; display: flex; align-items: center; opacity: .6; } .mle-ss .mle-ss-tacb > .mle-ss-i { width: 11px; height: 11px; } .mle-ss .mle-ss-tab-close { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--mss-close); border-radius: 3px; flex-shrink: 0; line-height: 1; opacity: 0; transition: opacity 100ms, background 100ms, color 100ms; } .mle-ss .mle-ss-tab:hover .mle-ss-tab-close, .mle-ss .mle-ss-tab--active .mle-ss-tab-close { opacity: 1; } .mle-ss .mle-ss-tab-close > .mle-ss-i { width: 11px; height: 11px; } /* -- Narrow viewports ----------------------------------------------------- The real shell keeps the rail on one line and lets the header crowd; below ~1100px the shortcut row and the patient chip are the first things the compact layout can afford to drop. ------------------------------------------------------------------------ */ @media (max-width: 1100px) { .mle-ss .mle-ss-sc-row, .mle-ss .mle-ss-pt-wrap { display: none; } } @media (max-width: 760px) { .mle-ss .mle-ss-user-text { display: none; } }