/* theme2.css — SellBase 2.0 skin (design „sellbase 2.0" z Claude Design). * * Warstwa OPT-IN za przełącznikiem: aktywna tylko gdy . * Tokeny 1:1 z panel-ui/panel.css projektu design — OBA motywy: * - baza selektora = LIGHT (gdy brak klasy .dark), * - blok .dark = DARK (specyficzność bije html[data-v2].dark z tokens.css). * Komponenty niżej używają wyłącznie var(), więc działają w obu motywach. * * Ładowany OSOBNO po app.css (poza bundlem build:css) — iteracje skinu nie * wymagają przebudowy bundla, tylko bump ?v= w index.html. */ /* ── 1a. Tokeny wspólne + LIGHT (baza) ──────────────────────────────────── */ html[data-v2][data-sb2] { color-scheme: light; /* fonty — design używa Inter (załadowany z Google Fonts) */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* action (indigo — primary in-app action) */ --color-primary: #5A6BF0; --color-primary-hover: #4453D8; --color-primary-active: #4453D8; --color-primary-highlight: rgba(90,107,240,.12); --color-primary-subtle: rgba(90,107,240,.07); /* brand + kanały (nowe tokeny 2.0) */ --sb2-brand: #F5781F; --sb2-brand-soft: rgba(245,120,31,.13); --c-allegro: #F5781F; --c-ebay: #5B8DEF; --c-erli: #8C6BF0; --c-presta: #E0418A; --c-inpost: #FFCC00; /* shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* LIGHT surfaces (panel.css :root[data-theme="light"]) */ --color-bg: #F1F4FA; --color-surface: #FFFFFF; --color-surface-2: #F1F4F9; --color-surface-3: #E4EAF3; --color-surface-offset: #F1F4F9; --color-surface-offset-2:#E4EAF3; --color-surface-dynamic: #CDD6E3; --color-border: #E3E8F1; --color-border-strong: #CDD6E3; --color-divider: #EDF1F7; --color-text: #141A24; --color-text-secondary: #3E495B; --color-text-muted: #69748A; --color-text-faint: #A1ABBC; --color-text-inverse: #FFFFFF; --color-success: #1F8A4C; --color-success-bg: rgba(31,138,76,.13); --color-warning: #C07810; --color-warning-bg: rgba(192,120,16,.15); --color-error: #D63035; --color-error-bg: rgba(214,48,53,.12); --color-info: #2E6CB0; --color-info-bg: rgba(46,108,176,.12); --shadow-sm: 0 1px 2px rgba(20,30,50,.06); --shadow-md: 0 8px 24px -12px rgba(20,30,50,.18); --shadow-lg: 0 24px 60px -24px rgba(20,30,50,.28); --shadow-xl: 0 24px 60px -24px rgba(20,30,50,.28); --sidebar-bg: #FFFFFF; --sidebar-text: #3E495B; --sidebar-text-active: #4453D8; --sidebar-item-active-bg: rgba(90,107,240,.12); --sidebar-border: #EDF1F7; --sidebar-menu-label: #A1ABBC; --sidebar-width: 248px; --topbar-bg: rgba(255,255,255,.85); --topbar-height: 60px; } /* ── 1b. Tokeny DARK (nadpisanie przy .dark) ────────────────────────────── */ html[data-v2][data-sb2].dark, html[data-v2][data-sb2][data-theme="dark"] { color-scheme: dark; --color-primary-hover: #6B7BF5; --color-primary-highlight: rgba(90,107,240,.15); --color-primary-subtle: rgba(90,107,240,.08); --sb2-brand-soft: rgba(245,120,31,.14); --color-bg: #0A0D15; --color-surface: #10141F; --color-surface-2: #161B28; --color-surface-3: #1C2230; --color-surface-offset: #161B28; --color-surface-offset-2:#1C2230; --color-surface-dynamic: #28303F; --color-border: #1B2230; --color-border-strong: #28303F; --color-divider: #151B27; --color-text: #EEF2F8; --color-text-secondary: #AAB3C4; --color-text-muted: #717C90; --color-text-faint: #4F5867; --color-text-inverse: #0A0D15; --color-success: #2FB968; --color-success-bg: rgba(47,185,104,.14); --color-warning: #F5A33B; --color-warning-bg: rgba(245,163,59,.15); --color-error: #E5484D; --color-error-bg: rgba(229,72,77,.14); --color-info: #5B8DEF; --color-info-bg: rgba(91,141,239,.14); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px -10px rgba(0,0,0,.6); --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.75); --shadow-xl: 0 24px 60px -24px rgba(0,0,0,.75); --sidebar-bg: #070912; --sidebar-text: #AAB3C4; --sidebar-text-active: #FFFFFF; --sidebar-item-active-bg: rgba(90,107,240,.15); --sidebar-border: #151B27; --sidebar-menu-label: #4F5867; --topbar-bg: rgba(10,13,21,.82); } /* ── 2. Fundament: body / typografia ────────────────────────────────────── */ html[data-v2][data-sb2] body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); letter-spacing: -0.01em; } /* Elementy widoczne TYLKO w skinie 2.0 (etykiety sekcji nav, box firmy, breadcrumb, Synchronizuj) — w klasycznym wyglądzie schowane. */ .sb2-only { display: none !important; } html[data-v2][data-sb2] .sb2-only { display: revert !important; } /* ── 3. Sidebar ─────────────────────────────────────────────────────────── */ html[data-v2][data-sb2] .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); } html[data-v2][data-sb2] .sidebar-header { border-bottom: 1px solid var(--sidebar-border); } html[data-v2][data-sb2] .nav-item { color: var(--sidebar-text); border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500; } html[data-v2][data-sb2] .nav-item:hover { background: var(--color-surface-2); color: var(--color-text); } html[data-v2][data-sb2].dark .nav-item:hover { background: #10141F; color: #EEF2F8; } html[data-v2][data-sb2] .nav-item.active { background: var(--sidebar-item-active-bg); color: var(--sidebar-text-active); box-shadow: inset 2px 0 0 var(--color-primary); } /* etykiety grup w nav (GŁÓWNE/SPRZEDAŻ/…) — mono uppercase jak w designie */ html[data-v2][data-sb2] .sb2-nav-label { display: block; font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 10px; letter-spacing: .1em; color: var(--sidebar-menu-label); text-transform: uppercase; padding: 16px 12px 5px; user-select: none; } /* Reorder pozycji nav do układu makiety (GŁÓWNE → SPRZEDAŻ → FINANSE → ALLEGRO → POZOSTAŁE KANAŁY → SYSTEM). CSS order na flexie — DOM (i klasyczny wygląd) zostaje nietknięty. Selektory po data-route/id konkretnych pozycji. */ html[data-v2][data-sb2] .sidebar-nav { display: flex; flex-direction: column; } html[data-v2][data-sb2] .sb2-nav-label[data-sb2-label="glowne"] { order: 0; } html[data-v2][data-sb2] .sidebar-nav > [data-route="dashboard"] { order: 1; } html[data-v2][data-sb2] .sidebar-nav > [data-route="stats"] { order: 2; } html[data-v2][data-sb2] .sb2-nav-label[data-sb2-label="sprzedaz"] { order: 3; } html[data-v2][data-sb2] .sidebar-nav > [data-route="orders"] { order: 4; } html[data-v2][data-sb2] .sidebar-nav > .nav-group:has(#nav-products-toggle) { order: 5; } html[data-v2][data-sb2] .sidebar-nav > [data-route="customers"] { order: 6; } html[data-v2][data-sb2] .sidebar-nav > [data-route="tickets"] { order: 7; } html[data-v2][data-sb2] .sb2-nav-label[data-sb2-label="finanse"] { order: 8; } html[data-v2][data-sb2] .sidebar-nav > .nav-group:has(#nav-invoices-toggle) { order: 9; } html[data-v2][data-sb2] .sb2-nav-label[data-sb2-label="allegro"] { order: 10; } html[data-v2][data-sb2] .sidebar-nav > .nav-group:has(#nav-allegro-toggle) { order: 11; } html[data-v2][data-sb2] .sb2-nav-label[data-sb2-label="kanaly"] { order: 12; } html[data-v2][data-sb2] .sidebar-nav > .nav-group:has(#nav-prestashop-toggle) { order: 13; } html[data-v2][data-sb2] .sidebar-nav > .nav-group:has(#nav-erli-toggle) { order: 14; } html[data-v2][data-sb2] .sidebar-nav > .nav-group:has(#nav-ebay-toggle) { order: 15; } html[data-v2][data-sb2] .sb2-nav-label[data-sb2-label="system"] { order: 16; } html[data-v2][data-sb2] .sidebar-nav > [data-route="automations"] { order: 17; } html[data-v2][data-sb2] .sidebar-nav > [data-route="settings"] { order: 18; } /* wszystko nieprzewidziane (np. master-only pozycje) — na koniec, przed Systemem */ html[data-v2][data-sb2] .sidebar-nav > * { order: 15; } html[data-v2][data-sb2] .nav-badge { background: var(--color-primary-highlight); color: var(--color-primary-hover); border-radius: 999px; font-size: 10.5px; font-weight: 700; } html[data-v2][data-sb2] .sidebar-user, html[data-v2][data-sb2] .sidebar-footer { border-top: 1px solid var(--sidebar-border); } html[data-v2][data-sb2] .sidebar-quick-add { background: var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } html[data-v2][data-sb2] .sidebar-quick-add:hover { background: var(--color-primary-hover); } /* Box firmy pod logo (makieta: HurtowniaXXL · Plan Wzrost · 4 kanały) */ html[data-v2][data-sb2] .sb2-company { display: flex; align-items: center; gap: 10px; margin: 10px 12px 2px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } html[data-v2][data-sb2] .sb2-company .sb2-company-avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--sb2-brand-soft); color: var(--sb2-brand); font-size: 11px; font-weight: 800; letter-spacing: .02em; } html[data-v2][data-sb2] .sb2-company .sb2-company-name { font-size: 12.5px; font-weight: 650; color: var(--color-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-v2][data-sb2] .sb2-company .sb2-company-meta { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.3; } /* ── 4. Topbar ──────────────────────────────────────────────────────────── */ html[data-v2][data-sb2] .topbar { background: var(--topbar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-divider); } /* breadcrumb pod tytułem (Główne / Pulpit) */ html[data-v2][data-sb2] .topbar-left { display: flex; flex-direction: column; justify-content: center; gap: 1px; } html[data-v2][data-sb2] .topbar-title { line-height: 1.15; } html[data-v2][data-sb2] .sb2-breadcrumb { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); } /* przycisk Synchronizuj (makieta: obok akcji topbara) */ html[data-v2][data-sb2] .sb2-sync-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background 120ms ease, color 120ms ease; } html[data-v2][data-sb2] .sb2-sync-btn:hover { background: var(--color-surface-2); color: var(--color-text); } html[data-v2][data-sb2] .sb2-sync-btn.syncing i { animation: sb2spin 1s linear infinite; } @keyframes sb2spin { to { transform: rotate(360deg); } } html[data-v2][data-sb2] .search-bar, html[data-v2][data-sb2] .topbar input[type="search"], html[data-v2][data-sb2] .topbar .page-search-input { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); } html[data-v2][data-sb2] .icon-btn { color: var(--color-text-muted); border-radius: var(--radius-md); } html[data-v2][data-sb2] .icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); } /* ── 5. Karty / panele / tabele ─────────────────────────────────────────── */ html[data-v2][data-sb2] .table-card, html[data-v2][data-sb2] .stat-card, html[data-v2][data-sb2] .card, html[data-v2][data-sb2] .login-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } html[data-v2][data-sb2] table thead th { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; color: var(--color-text-muted); } html[data-v2][data-sb2] table tbody tr:hover { background: var(--color-surface-2); } /* ── 6. Przyciski / inputy / chipy ──────────────────────────────────────── */ html[data-v2][data-sb2] .btn-primary { background: var(--color-primary); color: #fff; border-radius: var(--radius-md); font-weight: 600; } html[data-v2][data-sb2] .btn-primary:hover { background: var(--color-primary-hover); } html[data-v2][data-sb2] .btn-ghost { border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); } html[data-v2][data-sb2] .btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); } html[data-v2][data-sb2] .form-input, html[data-v2][data-sb2] select, html[data-v2][data-sb2] textarea { background: var(--color-surface-2); border-color: var(--color-border); border-radius: var(--radius-md); color: var(--color-text); } html[data-v2][data-sb2] .form-input:focus, html[data-v2][data-sb2] select:focus, html[data-v2][data-sb2] textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); } /* ── 7. Scrollbar (WebKit) ──────────────────────────────────────────────── */ html[data-v2][data-sb2] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-v2][data-sb2] ::-webkit-scrollbar-track { background: transparent; } html[data-v2][data-sb2] ::-webkit-scrollbar-thumb { background: var(--color-surface-dynamic); border-radius: 999px; border: 2px solid var(--color-bg); } html[data-v2][data-sb2] ::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); } /* ── 8. PULPIT 2.0 — kompozycja wg makiety ───────────────────────────────── Makieta: rząd 4 KPI → [wykres 30 dni | Sprzedaż wg kanału] → [Ostatnie zamówienia | kolumna: Wymaga uwagi / TOP produkty / Nowi klienci] → Aktualizacje. Realizacja: #view-dashboard jako grid, #kpi-container i .charts-grid w display:contents (karty stają się elementami page-grida) — logika danych/refresh nietknięta. */ html[data-v2][data-sb2] #view-dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; grid-template-areas: "tb tb tb tb tb tb tb tb tb tb tb tb" "k1 k1 k1 k2 k2 k2 k3 k3 k3 k4 k4 k4" "ch ch ch ch ch ch ch ch dn dn dn dn" "rc rc rc rc rc rc rc rc s1 s1 s1 s1" "rc rc rc rc rc rc rc rc s2 s2 s2 s2" "rc rc rc rc rc rc rc rc s3 s3 s3 s3" "up up up up up up up up up up up up"; } html[data-v2][data-sb2] #view-dashboard #kpi-container { display: contents; } html[data-v2][data-sb2] #view-dashboard .charts-grid { display: contents; } html[data-v2][data-sb2] #view-dashboard .kpi-global-compare-wrap { grid-area: tb; justify-self: end; display: flex; align-items: center; gap: 12px; } /* 4 karty KPI rzędu głównego (kolejność jak w makiecie: przychód → zamówienia → średnia → miesiąc) */ html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced="Przychód dziś"] { grid-area: k1; } html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced="Zamówienia dziś"] { grid-area: k2; } html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced="Średnia wartość"] { grid-area: k3; } html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced="Cały miesiąc"] { grid-area: k4; } /* wykres + donut obok siebie */ html[data-v2][data-sb2] #view-dashboard .charts-grid .chart-card { grid-area: ch; height: 100%; } html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced="Sprzedaż per marketplace"] { grid-area: dn; height: 100%; } /* tabela + prawa kolumna */ html[data-v2][data-sb2] #view-dashboard > .table-card { grid-area: rc; margin: 0; } html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced="Wymaga uwagi"] { grid-area: s1; } html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced^="TOP 10 produktów"] { grid-area: s2; } html[data-v2][data-sb2] #view-dashboard [data-kpi-enhanced="Nowi klienci"] { grid-area: s3; } html[data-v2][data-sb2] #view-dashboard > .settings-card { grid-area: up; margin-top: 0 !important; } /* karty KPI w stylu makiety — rząd główny wyrównany wysokością */ html[data-v2][data-sb2] #view-dashboard .kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); align-self: stretch; } /* data dzisiejsza obok zakresów (wstawia dashboard2.ts) */ html[data-v2][data-sb2] .sb2-dash-date { font-size: 13px; color: var(--color-text-muted); margin-right: auto; } /* mobile/tablet: grid opada do jednej kolumny */ @media (max-width: 1100px) { html[data-v2][data-sb2] #view-dashboard { grid-template-columns: 1fr 1fr; grid-template-areas: "tb tb" "k1 k2" "k3 k4" "ch ch" "dn dn" "rc rc" "s1 s2" "s3 s3" "up up"; } } @media (max-width: 700px) { html[data-v2][data-sb2] #view-dashboard { grid-template-columns: 1fr; grid-template-areas: "tb" "k1" "k2" "k3" "k4" "ch" "dn" "rc" "s1" "s2" "s3" "up"; } } /* ── 9. Drawery / modale ────────────────────────────────────────────────── */ html[data-v2][data-sb2] .drawer, html[data-v2][data-sb2] .modal, html[data-v2][data-sb2] #cs-msg-drawer { background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }