/* ============================================================================ Console chrome — two-row topbar + 206px left rail (Signal Blue canvas). Shared by MainLayout and AdminLayout; loaded after console-tokens.css. ============================================================================ */ .console-shell { display: flex; flex-direction: column; height: 100vh; width: 100%; overflow: hidden; background: var(--bg); color: var(--ink); } /* ---- Topbar ---------------------------------------------------------------- */ .console-topbar { flex: none; border-bottom: 1px solid var(--line); background: var(--panel); z-index: 5; } .topbar-main { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; } .topbar-brand { display: flex; align-items: center; gap: 11px; } .brand-icon { color: var(--con-primary); font-size: 20px; } .brand-name { font: 700 17px/1 var(--font-mono); letter-spacing: 3px; color: var(--ink); } .brand-chip { margin-left: 6px; letter-spacing: 2px; padding: 3px 7px; } /* Circuit state drives the chip: ReconnectModal.razor.js toggles .circuit-offline on whenever Blazor's reconnect state is anything but "hide". */ .brand-chip__offline { display: none; } html.circuit-offline .brand-chip__online { display: none; } html.circuit-offline .brand-chip__offline { display: inline; } html.circuit-offline .brand-chip { --chip: var(--con-red); } .topbar-cluster { display: flex; align-items: center; gap: 10px; } .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; font-size: 16px; color: var(--ink-2); cursor: pointer; } .topbar-icon-btn:hover { color: var(--ink); } .topbar-nav { height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 18px; border-top: 1px solid var(--line); overflow-x: auto; } .topnav-item { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 13px; border-radius: 3px; border-bottom: 2px solid transparent; font: 600 11px/1 var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; cursor: pointer; } .topnav-item:hover { color: var(--ink); } .topnav-item.active { color: var(--ink); background: color-mix(in srgb, var(--con-primary) 16%, transparent); border-bottom-color: var(--con-primary); } .topnav-item .con-icon { font-size: 14px; } /* ---- Body: rail + main ------------------------------------------------------ */ .console-body { flex: 1; display: flex; overflow: hidden; } .console-rail { width: 206px; flex: none; display: flex; flex-direction: column; background: var(--inset); border-right: 1px solid var(--line); padding: 12px 0; overflow-y: auto; } .rail-group-label { padding: 12px 16px 5px; font: 600 9px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); flex: none; } .rail-group-label::before { content: '// '; } .rail-item { display: flex; align-items: center; gap: 10px; height: 28px; flex: none; /* 3px transparent accent border keeps content from shifting when active */ padding: 0 16px 0 13px; border-left: 3px solid transparent; font-size: 12px; color: var(--ink-2); text-decoration: none; white-space: nowrap; cursor: pointer; } .rail-item:hover { color: var(--ink); background: color-mix(in srgb, var(--con-primary) 6%, transparent); } .rail-item.active { color: var(--ink); border-left-color: var(--con-primary); background: color-mix(in srgb, var(--con-primary) 12%, transparent); } .rail-item .con-icon { font-size: 14px; color: inherit; } /* Admin portal entry stands out from regular nav */ .rail-item.rail-item-admin { color: var(--con-orange); } .rail-item.rail-item-admin:hover, .rail-item.rail-item-admin.active { color: var(--con-orange); border-left-color: var(--con-orange); background: color-mix(in srgb, var(--con-orange) 10%, transparent); } .rail-bottom { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); flex: none; } .rail-version { padding: 10px 16px 4px; font: 500 9px/1.4 var(--font-mono); letter-spacing: 1px; color: var(--ink-3); flex: none; } .console-main { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 22px 24px 60px; } /* ---- Narrow viewports: rail becomes a toggled overlay ----------------------- */ .rail-toggle { display: none; } @media (max-width: 960px) { .rail-toggle { display: inline-flex; margin-right: 4px; } .console-rail { position: fixed; top: 97px; /* topbar: 52px main row + 44px nav row + 1px border */ bottom: 0; left: 0; z-index: 40; transform: translateX(-100%); transition: transform .15s ease; box-shadow: 20px 0 60px -30px rgba(0, 0, 0, .8); } .console-rail.open { transform: none; } }