/** * EPCVIP Shared Header Bar * Sticky top header with app switcher dropdown * * Usage: * 1. Include this CSS in * 2. Add epc-header.html markup (or use epc-header.js auto-injection) * 3. Include epc-header.js before * 4. Set body[data-epc-app] for the current app name display */ :root { --epc-header-height: 48px; --epc-header-bg: #222; --epc-header-border: #333; --epc-header-text: #e5e5e5; --epc-header-muted: #888; --epc-header-gold: #ffd700; --epc-header-gold-hover: #ffed4e; --epc-z-header: 200; --epc-z-switcher: 250; } epc-header { display: block; } /* ── Header bar ─────────────────────────────────── */ .epc-header { position: sticky; top: 0; z-index: var(--epc-z-header); display: flex; align-items: center; gap: 4px; height: var(--epc-header-height); padding: 0 12px; background: var(--epc-header-bg); border-bottom: 1px solid var(--epc-header-border); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--epc-header-text); } /* ── Sidebar toggle ─────────────────────────────── */ .epc-header-sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent; color: var(--epc-header-text); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .epc-header-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--epc-header-gold); } .epc-header-sidebar-toggle:focus-visible { outline: 2px solid var(--epc-header-gold); outline-offset: 2px; } .epc-header-sidebar-toggle svg { width: 18px; height: 18px; } /* Collapsed-state visual cue */ body[data-sidebar="collapsed"] .epc-header-sidebar-toggle { color: var(--epc-header-gold); background: rgba(255, 215, 0, 0.1); } /* ── App switcher button ────────────────────────── */ .epc-header-app-switcher { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent; color: var(--epc-header-muted); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .epc-header-app-switcher:hover { background: rgba(255, 255, 255, 0.08); color: var(--epc-header-text); } .epc-header-app-switcher:focus-visible { outline: 2px solid var(--epc-header-gold); outline-offset: 2px; } .epc-header-app-switcher[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); color: var(--epc-header-gold); } .epc-header-app-switcher svg { width: 18px; height: 18px; } /* ── Brand area ─────────────────────────────────── */ .epc-header-brand { display: flex; align-items: center; gap: 8px; margin-left: 4px; min-width: 0; } .epc-header-logo { color: var(--epc-header-gold); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; letter-spacing: 0.3px; } .epc-header-logo:hover { color: var(--epc-header-gold-hover); } .epc-header-separator { color: var(--epc-header-muted); font-weight: 300; font-size: 16px; user-select: none; } .epc-header-app-name { color: var(--epc-header-text); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.epc-header-app-name:hover { color: var(--epc-header-gold); } /* ── Spacer ─────────────────────────────────────── */ .epc-header-spacer { flex: 1; } /* ── User slot ──────────────────────────────────── */ .epc-header-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--epc-header-muted); white-space: nowrap; flex-shrink: 0; } .epc-admin-badge { background: var(--epc-header-gold); color: #1a1a1a; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .epc-header-signout { color: var(--epc-header-muted); text-decoration: none; font-size: 12px; transition: color 0.15s ease; } .epc-header-signout:hover { color: var(--epc-header-gold); } /* ── App switcher dropdown ──────────────────────── */ .epc-app-switcher-dropdown { position: fixed; top: var(--epc-header-height); left: 40px; z-index: var(--epc-z-switcher); min-width: 220px; background: #2a2a2a; border: 1px solid #444; border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); padding: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .epc-app-switcher-dropdown[hidden] { display: none; } .epc-app-switcher-dropdown .epc-switcher-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: #ccc; font-size: 13px; transition: background 0.12s ease, color 0.12s ease; } .epc-app-switcher-dropdown .epc-switcher-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .epc-app-switcher-dropdown .epc-switcher-item.is-current { color: var(--epc-header-gold); background: rgba(255, 215, 0, 0.08); } .epc-switcher-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .epc-switcher-label { flex: 1; } .epc-switcher-current { width: 6px; height: 6px; border-radius: 50%; background: var(--epc-header-gold); flex-shrink: 0; } /* ── Mobile adjustments ─────────────────────────── */ @media (max-width: 480px) { .epc-header-app-name { display: none; } .epc-header-separator { display: none; } .epc-header-user span:not(.epc-admin-badge) { display: none; } .epc-app-switcher-dropdown { left: 8px; right: 8px; min-width: auto; } }