/* CrossMod - wspólne tokeny mono. Jasny domyślnie, ciemny przez [data-theme="dark"]. */ /* Kroje pisma nie zaleza od motywu, wiec siedza w zwyklym :root. Podstrony panelu nie musza ich juz u siebie powtarzac. */ :root{ --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'SFMono-Regular', monospace; } :root[data-theme="light"][data-theme="light"]{ --bg:#F4F4F5; --surface:#FFFFFF; --surface2:#E4E4E7; --border:rgba(9,9,11,0.14); --text:#111113; --muted:#52525B; --kick:#047857; --twitch:#6D28D9; --danger:#DC2626; --warn:#D97706; /* Tekst na pelnym kolorze akcentu (--kick, --twitch). W jasnym motywie oba akcenty sa ciemne, wiec czytelna jest na nich biel. */ --on-accent:#FFFFFF; color-scheme:light; } :root[data-theme="dark"][data-theme="dark"]{ --bg:#09090B; --surface:#18181B; --surface2:#26262B; --border:rgba(255,255,255,0.12); --text:#FAFAFA; --muted:#A1A1AA; --kick:#10B981; --twitch:#A970FF; --danger:#F87171; --warn:#FBBF24; /* W ciemnym motywie oba akcenty sa jasne, wiec czytelny jest na nich ciemny tekst. */ --on-accent:#04150a; color-scheme:dark; } /* Tla, obwodki i podswietlenia liczone z tokenow motywu, zeby nie trzeba bylo wpisywac tych samych rgba() osobno dla jasnego i ciemnego wariantu. Dzieki temu delikatne tlo przycisku zawsze pasuje do jego koloru akcentu. */ :root{ --hover: color-mix(in srgb, var(--text) 6%, transparent); --border-strong: color-mix(in srgb, var(--text) 22%, transparent); --kick-soft: color-mix(in srgb, var(--kick) 10%, transparent); --kick-line: color-mix(in srgb, var(--kick) 30%, transparent); --twitch-soft: color-mix(in srgb, var(--twitch) 12%, transparent); --twitch-line: color-mix(in srgb, var(--twitch) 30%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent); --danger-line: color-mix(in srgb, var(--danger) 30%, transparent); --warn-soft: color-mix(in srgb, var(--warn) 12%, transparent); --warn-line: color-mix(in srgb, var(--warn) 35%, transparent); } *{box-sizing:border-box;} body{background:var(--bg);color:var(--text);font-family:var(--font-body);} ::selection{background:var(--text);color:var(--bg);} *::-webkit-scrollbar{width:8px;height:8px;} *::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;} *::-webkit-scrollbar-track{background:transparent;} /* przełącznik motywu w sidebarze */ .theme-tg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;margin-bottom:6px;} .theme-tg .lbl{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.3px;} .tg-track{position:relative;width:46px;height:24px;border-radius:100px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;flex-shrink:0;padding:0;transition:background .2s,border-color .2s;} .tg-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;transition:transform .22s cubic-bezier(.4,0,.2,1);} .tg-knob svg{width:11px;height:11px;display:block;} .tg-knob .moon{display:none;} :root[data-theme="dark"] .tg-knob{transform:translateX(22px);} :root[data-theme="dark"] .tg-knob .sun{display:none;} :root[data-theme="dark"] .tg-knob .moon{display:block;} /* HUD skin */ .card,.modal-box{border-radius:0!important;} .stat-card,.action-card{border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);} .btn-primary{border-radius:0!important;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);} .status-chip{border-radius:0!important;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);} .stat-num{font-size:28px!important;letter-spacing:-0.5px;} .page-title{letter-spacing:-0.6px;} .hud-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);} .hud-bar{height:3px;background:var(--surface2);} .hud-bar>i{display:block;height:3px;background:var(--kick);} .nav-item.nav-item.active.active{background:var(--surface2)!important;color:var(--text)!important;border-left:2px solid var(--kick);padding-left:calc(var(--nav-pl,12px) - 2px);border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);} .nav-item.nav-item:hover{background:var(--surface2)!important;} .stat-icon,.feature-icon,.card-emoji{display:none!important;} .nav-item{gap:0!important;} input[type="text"],input[type="number"],input[type="search"],select,textarea{background:transparent;border:1px solid var(--border);color:var(--text);padding:9px 12px;font-family:inherit;font-size:13px;border-radius:0;} input::placeholder,textarea::placeholder{color:var(--muted);} input[type="text"]:focus,input[type="number"]:focus,select:focus,textarea:focus{outline:none;border-color:var(--kick);} select{font-size:13px!important;-webkit-appearance:none;appearance:none;width:140px;text-align:center;text-align-last:center;padding:9px 28px 9px 12px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27%2371717A%27 stroke-width=%272%27%3E%3Cpath d=%27M5 8l5 5 5-5%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px;} body,.sidebar,.card,.main,.modal,.modal-box{transition:background-color .18s ease,border-color .18s ease;} .pf-wrap{position:relative;display:inline-block} .pf-trigger{width:140px;text-align:center;font-size:13px;font-family:inherit;background:transparent;border:1px solid var(--border);color:var(--text);padding:9px 28px 9px 12px;cursor:pointer;border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27%2371717A%27 stroke-width=%272%27%3E%3Cpath d=%27M5 8l5 5 5-5%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px;} .pf-menu{display:none;position:absolute;left:0;bottom:100%;margin-bottom:4px;width:140px;background:var(--surface);border:1px solid var(--border);z-index:20;font-size:13px;text-align:center} .pf-menu.show{display:block} .pf-menu div{padding:9px 12px;cursor:pointer;color:var(--muted)} .pf-menu div:hover{background:var(--surface2);color:var(--text)} .version-tag{font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-left:6px!important;opacity:.6;font-weight:400} .version-tag.milestone{font-weight:700!important;background-image:linear-gradient(100deg, #10B981 40%, #ffffff 50%, #10B981 60%)!important;background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent!important;animation:vtshine 3s linear infinite;opacity:1!important} @keyframes vtshine{0%{background-position:200% center}100%{background-position:-200% center}} /* ── Mobile nav drawer (≤900px) ────────────────────────────────────── Strony panelu mają własne (zakresowane przez Astro) style .sidebar/.main, część z nich robi `.sidebar{display:none}` bez sposobu na ponowne otwarcie. Te reguły (z !important) ujednolicają zachowanie na wąskich ekranach: sidebar staje się chowaną szufladą sterowaną przyciskiem hamburgera z SidebarNav.astro, treść główna zajmuje pełną szerokość. */ @media (max-width: 900px) { body { overflow-x: hidden; } .sidebar { display: flex !important; position: fixed !important; flex-direction: column !important; top: 0 !important; left: -100% !important; width: 240px !important; height: 100vh !important; overflow-x: visible !important; overflow-y: auto !important; border-right: 1px solid var(--border) !important; border-bottom: none !important; transition: left 0.25s ease !important; z-index: 200 !important; box-shadow: 2px 0 24px rgba(0,0,0,0.4) !important; } .sidebar.mobile-open { left: 0 !important; } .main { margin-left: 0 !important; width: 100% !important; } /* #sidebarBackdrop jest w DOM dzieckiem .sidebar. Poniewaz .sidebar ma position:fixed + z-index, tworzy wlasny kontekst warstwowania - w nim jakikolwiek dodatni z-index (tu: 150) zawsze renderuje sie NAD niepozycjonowana zawartoscia (linki nav, stopka), niezaleznie od tego ze .sidebar samo w sobie ma z-index 200 wobec reszty strony. Efekt: naklada przechwytywala taps na linki menu. Ujemny z-index utrzymuje ja pod zawartoscia sidebara, a jednoczesnie (dzieki kontekstowi warstwowania rodzica) wciaz nad tresciasla .main na zewnatrz. Wymaga !important: SidebarNav.astro renderuje wlasny