/* Sidebar nav + hero bar + theme — shell apki (plan: plany/sidebar-nav/plan_sidebar.md). * Tokeny prefiksowane --sb-* żeby nie kolidować z dark :root z app.css (--bg, --ink itd.). * Theme przełączany przez data-theme na (bootstrap inline w — anty-FOUC). */ :root { --sb-bg: #FFFFFF; --sb-ink: #141414; --sb-ink-70: rgba(20,20,20,0.70); --sb-ink-50: #7A7A7A; --sb-ink-20: rgba(20,20,20,0.20); --sb-ink-10: rgba(20,20,20,0.10); --sb-ink-04: rgba(20,20,20,0.04); --sb-red: #E6332A; --sb-red-bg: rgba(230,51,42,0.10); --sb-border: #E5E5E5; --sb-tooltip-bg: #141414; --sb-tooltip-fg: #FFFFFF; --sb-width: 240px; --sb-width-c: 64px; } [data-theme="dark"] { --sb-bg: #141414; --sb-ink: #F2F2F2; --sb-ink-70: rgba(242,242,242,0.72); --sb-ink-50: #8C8C8C; --sb-ink-20: rgba(242,242,242,0.22); --sb-ink-10: rgba(242,242,242,0.10); --sb-ink-04: rgba(242,242,242,0.06); --sb-red: #F04438; --sb-red-bg: rgba(230,51,42,0.16); --sb-border: rgba(242,242,242,0.10); --sb-tooltip-bg: #F2F2F2; --sb-tooltip-fg: #141414; } [x-cloak] { display: none !important; } /* ============ APP SHELL ============ */ .app-shell { display: flex; min-height: 100vh; } /* ============ SIDEBAR ============ */ .app-shell .sidebar { width: var(--sb-width); flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--sb-bg); border-right: 1px solid var(--sb-border); overflow-y: auto; overflow-x: hidden; transition: width 0.2s ease-out, background-color 0.15s ease; font-family: 'Instrument Sans', -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .app-shell .sidebar.collapsed { width: var(--sb-width-c); } /* --- header (logo + toggle) --- */ .sb-header { flex: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--sb-ink-10); } .sb-logo { display: flex; align-items: center; text-decoration: none; min-width: 0; } .sb-logo-symbol { flex: none; width: 28px; height: 28px; color: var(--sb-red); } .sb-logo-symbol svg { width: 100%; height: 100%; display: block; } .sb-wordmark { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--sb-ink); margin-left: 10px; white-space: nowrap; opacity: 1; transition: opacity 0.15s ease; } .sb-toggle { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--sb-ink-50); cursor: pointer; padding: 0; } .sb-toggle:hover { background: var(--sb-ink-04); color: var(--sb-ink); } .sb-toggle:focus-visible { outline: 2px solid var(--sb-red); outline-offset: -2px; } .sb-toggle svg { transition: transform 0.2s ease-out; } .sidebar.collapsed .sb-toggle svg { transform: rotate(180deg); } /* collapsed header: stack logo over toggle */ .sidebar.collapsed .sb-header { flex-direction: column; gap: 6px; padding: 12px 0; } .sidebar.collapsed .sb-wordmark { opacity: 0; width: 0; margin-left: 0; overflow: hidden; } /* --- nav --- */ .sb-nav { flex: 1 1 auto; display: flex; flex-direction: column; padding: 12px 16px; } .sidebar.collapsed .sb-nav { padding: 12px 10px; } .sb-group { display: flex; flex-direction: column; gap: 2px; } .sb-group-label { margin: 16px 0 6px; padding: 0 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sb-ink-50); white-space: nowrap; opacity: 1; transition: opacity 0.15s ease; } .sb-group:first-child .sb-group-label { margin-top: 4px; } .sidebar.collapsed .sb-group-label { opacity: 0; height: 0; margin: 0; overflow: hidden; } /* separator między grupami — widoczny tylko w collapsed */ .sb-group-sep { height: 0; margin: 0; border: none; border-top: 1px solid var(--sb-ink-10); opacity: 0; transition: opacity 0.15s ease; } .sidebar.collapsed .sb-group-sep { opacity: 1; margin: 8px 6px; } .sb-item { position: relative; display: flex; align-items: center; gap: 12px; height: 36px; padding: 8px 12px; border-radius: 6px; border-left: 3px solid transparent; text-decoration: none; color: var(--sb-ink-70); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background 0.1s ease, color 0.1s ease; } .sb-item .sb-icon { flex: none; width: 18px; height: 18px; color: var(--sb-ink-50); transition: color 0.1s ease; } .sb-item .sb-icon svg { display: block; width: 100%; height: 100%; } .sb-item .sb-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 1; transition: opacity 0.15s ease; } .sb-item .sb-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sb-red); opacity: 0; transition: opacity 0.15s ease; } .sb-item:hover { background: var(--sb-ink-04); color: var(--sb-ink); } .sb-item:hover .sb-icon { color: var(--sb-ink); } .sb-item:focus-visible { outline: 2px solid var(--sb-red); outline-offset: -2px; } .sb-item.active { background: var(--sb-red-bg); color: var(--sb-red); font-weight: 700; border-left-color: var(--sb-red); } .sb-item.active .sb-icon { color: var(--sb-red); } .sb-item.active .sb-dot { opacity: 1; } /* collapsed items: square, icon centered */ .sidebar.collapsed .sb-item { height: 44px; justify-content: center; gap: 0; padding: 0; } .sidebar.collapsed .sb-item .sb-icon { width: 20px; height: 20px; } .sidebar.collapsed .sb-item .sb-label { opacity: 0; width: 0; flex: none; overflow: hidden; } .sidebar.collapsed .sb-item .sb-dot { position: absolute; right: 5px; top: 50%; margin-top: -3px; } /* --- przyciski w sidebarze (feedback, „Co nowego"): wyglądają jak sb-item, ale to