/* nav.css — chrome styles for LSG Lanes sidebar + topbar. Extracted from nav.js injectStyles(). Load in after theme.css. */ :root { --sidebar-w: 56px; --sidebar-topbar-h: 32px; } html { overflow: hidden; height: 100vh; } body { padding-left: var(--sidebar-w); margin-top: var(--sidebar-topbar-h); height: calc(100vh - var(--sidebar-topbar-h)); overflow-y: auto; } /* ── Topbar adjustments ───────────────────────────────── Topbar spans the full width, with the logo as its leftmost cell. Override theme.css's 20px left padding so the logo sits flush at x=0. Z-index raised so topbar sits above the sidebar at the L corner. */ .topbar { padding-left: 0; z-index: 1100; border-bottom: none; justify-content: flex-start; } .topbar::after { content: ''; position: absolute; bottom: 0; left: calc(var(--sidebar-w) + 12px); right: 0; height: 0.3px; background: var(--border); } /* Logo cell — leftmost 64px of the topbar, height = topbar height. No background of its own (inherits topbar). No borders. Anchor link to home. */ .lsg-tb-logo { display: flex; align-items: center; justify-content: center; width: var(--sidebar-w); height: 100%; flex-shrink: 0; text-decoration: none; } .lsg-tb-logo-mark { width: 20px; height: 20px; object-fit: contain; display: block; } /* ── Sidebar strip ────────────────────────────────────── */ .lsg-sidebar { position: fixed; top: var(--sidebar-topbar-h); left: 0; bottom: 0; width: var(--sidebar-w); background: var(--sb-bg); z-index: 1000; display: flex; flex-direction: column; overflow: visible; } .lsg-sidebar::after { content: ''; position: absolute; top: 8px; right: 0; bottom: 0; width: 0.3px; background: var(--border); pointer-events: none; } /* Concave scoop at inner corner of L-chrome. Separate element avoids pseudo conflicts and z-index issues. */ #lsgCornerScoop { position: fixed; top: var(--sidebar-topbar-h); left: var(--sidebar-w); width: 16px; height: 16px; z-index: 1101; pointer-events: none; overflow: hidden; } #lsgCornerScoop::before { content: ''; display: block; width: 200%; height: 200%; border-radius: 50%; box-shadow: 0 0 0 0.7px var(--border), 0 0 0 999px var(--sb-bg); } /* Nav list */ .lsg-sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: visible; padding: 8px 0; display: flex; flex-direction: column; gap: 2px; } .lsg-sb-nav::-webkit-scrollbar { width: 4px; } .lsg-sb-nav::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } /* Row — wraps a strip icon + its flyout */ .lsg-sb-row { position: relative; } /* Strip icon (the only thing always visible in the 64px column) */ .lsg-sb-strip { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; background: none; border: none; color: var(--text-secondary); text-decoration: none; cursor: pointer; position: relative; } .lsg-sb-strip:hover { background: rgba(0, 0, 0, 0.12); } .lsg-sb-strip.lsg-sb-active { background: rgba(0, 0, 0, 0.18); } .lsg-sb-strip.lsg-sb-active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--sb-active-bar); border-radius: 0 2px 2px 0; } .lsg-sb-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--sb-icon); } .lsg-sb-strip:hover .lsg-sb-icon, .lsg-sb-strip.lsg-sb-active .lsg-sb-icon { color: var(--sb-icon); } .lsg-sb-ic-contrast { transition: transform 0.3s ease; } .lsg-sb-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); color: var(--sb-icon); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; } /* ── Flyout panel ─────────────────────────────────────── */ /* position: fixed so the flyout escapes the .lsg-sb-nav scroll container (which silently clips overflow on both axes). JS sets top/left on hover; CSS only controls visibility + transition. 6px gap between sidebar and flyout. A transparent ::before pseudo bridges the gap so the cursor doesn't lose hover state when travelling from the icon to the flyout. */ .lsg-sb-flyout { position: fixed; top: 0; left: var(--sidebar-w); margin-left: 6px; min-width: 200px; background: var(--sb-flyout-bg); border: 1px solid var(--sb-flyout-border); border-radius: 4px; box-shadow: var(--shadow-md); padding: 6px; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity 0.12s ease, transform 0.12s ease; z-index: 1150; } /* Invisible hover bridge connecting sidebar to flyout */ .lsg-sb-flyout::before { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; } .lsg-sb-flyout-wide { min-width: 260px; } .lsg-sb-row:hover .lsg-sb-flyout, .lsg-sb-flyout:hover { opacity: 1; pointer-events: auto; transform: translateX(0); } /* Heading: non-clickable section title (multi-item popouts only) */ .lsg-sb-flyout-heading { padding: 10px 14px 8px; color: var(--sb-flyout-heading); font-size: 1.15rem; /* 18px */ font-weight: 600; letter-spacing: 0.03em; cursor: default; } .lsg-sb-flyout-heading-email { font-size: 1rem; /* 14px — email is smaller than topic headings */ font-weight: 500; color: var(--text-secondary); word-break: break-all; padding: 10px 14px 8px; } .lsg-sb-flyout-divider { height: 1px; background: var(--border); margin: 0 6px 6px; } .lsg-sb-flyout-list { display: flex; flex-direction: column; gap: 1px; } .lsg-sb-flyout-sub { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 1rem; /* 16px */ color: var(--sb-flyout-body); text-decoration: none; border-radius: 5px; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%; } .lsg-sb-flyout-sub:hover { background: var(--surface-2); } /* Current page in sub-list: background shade only, no colour change */ .lsg-sb-flyout-sub-current { background: var(--surface-2); } .lsg-sb-flyout-sub-current:hover { background: var(--surface-3); } /* Sign-out: red */ .lsg-sb-flyout-sub-danger { color: var(--red); } .lsg-sb-flyout-sub-danger:hover { background: var(--red-subtle); color: var(--red); } .lsg-sb-flyout-icon { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.7; } .lsg-sb-flyout-sub:hover .lsg-sb-flyout-icon, .lsg-sb-flyout-sub-current .lsg-sb-flyout-icon { opacity: 1; } .lsg-sb-flyout-sub-danger .lsg-sb-flyout-icon, .lsg-sb-flyout-sub-danger:hover .lsg-sb-flyout-icon { color: var(--red); opacity: 1; } /* ── Solo flyout (no children) ─────────────────────────── */ /* Visually distinct from multi-item popouts: tighter, bolder, single pill-shaped clickable element. Same panel chrome (surface bg, border, shadow) so it still reads as a popout, but with no list scaffolding. */ .lsg-sb-flyout-solo { min-width: 0; padding: 3px; border-radius: 4px; } .lsg-sb-flyout-solo-btn { display: block; padding: 6px 14px; font-size: 1.125rem; /* 16px */ font-weight: 500; /* bold — matches header weight */ color: var(--sb-solo-body); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%; border-radius: 3px; white-space: nowrap; } .lsg-sb-flyout-solo-btn:hover { background: var(--surface-2); } .lsg-sb-flyout-solo-current { background: var(--surface-2); } .lsg-sb-flyout-solo-current:hover { background: var(--surface-3); } /* Footer flyouts position is set in JS (opens upward if room). */ /* ── Footer ───────────────────────────────────────────── */ .lsg-sb-footer { flex-shrink: 0; padding: 6px 0; display: flex; flex-direction: column; gap: 2px; } /* ── Sidebar mini-toast ────────────────────────────────── */ #lsg-sb-toast { position: fixed; bottom: 24px; left: calc(var(--sidebar-w) + 16px); background: var(--surface); color: var(--text-primary); padding: 10px 16px; border-radius: 6px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); font-size: 0.875rem; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 1300; } #lsg-sb-toast.show { opacity: 1; transform: translateY(0); } /* ── Topbar additions ─────────────────────────────────── */ .lsg-tb-left { display: flex; align-items: center; gap: 6px; padding-left: 12px; } .lsg-tb-navbtn { background: none; border: none; padding: 4px; color: #FCFCFC; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .lsg-tb-navbtn:hover { background: var(--surface-2); color: var(--text-primary); } .lsg-tb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; flex-shrink: 0; } /* Search */ .lsg-tb-search { position: relative; width: 260px; flex-shrink: 0; } .lsg-tb-search-ic { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; display: flex; } .lsg-tb-search-ic svg { width: 14px; height: 14px; } .lsg-tb-search-input { width: 100%; height: 24px; padding: 0 10px 0 26px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); font-family: inherit; font-size: 0.8125rem; outline: none; transition: border-color 0.15s ease, background 0.15s ease; } .lsg-tb-search-input::placeholder { color: var(--text-tertiary); } .lsg-tb-search-input:focus { border-color: var(--border-strong); background: var(--surface); } .lsg-tb-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.12s ease, transform 0.12s ease; z-index: 1100; } .lsg-tb-search-results.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .lsg-tb-search-group { padding: 6px 0; } .lsg-tb-search-group + .lsg-tb-search-group { border-top: 1px solid var(--border); } .lsg-tb-search-group-h { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); padding: 4px 12px; } .lsg-tb-search-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 12px; text-decoration: none; color: var(--text-primary); font-size: 0.8125rem; } .lsg-tb-search-row:hover { background: var(--surface-2); } .lsg-tb-search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .lsg-tb-search-sub { color: var(--text-tertiary); font-size: 0.75rem; flex-shrink: 0; } .lsg-tb-search-empty { padding: 12px; text-align: center; color: var(--text-tertiary); font-size: 0.8125rem; }