/** * 5 оформлений: светлое (Ozon), тёмное, контрастное, цветное, Apple (macOS). * data-theme на , localStorage ozon-profit-theme. */ /* ========== 1. Светлое (исходное Ozon) ========== */ html[data-theme="light"] { --bg: #f4f6fb; --bg-accent: linear-gradient(180deg, #f8fafc 0%, #eef2f8 100%); --surface: #ffffff; --surface-muted: #f8fafc; --border: #dde3ef; --border-strong: #c5d0e3; --text: #1a2332; --muted: #5c6b82; --accent: #005bff; --accent-hover: #0047cc; --accent-soft: rgba(0, 91, 255, 0.08); --on-accent: #ffffff; --ok: #16a34a; --warn: #d97706; --error: #dc2626; --purple: #7c3aed; --teal: #0891b2; --pink: #db2777; --shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.08); --shadow: 0 1px 3px rgba(26, 35, 50, 0.08); --shadow-lg: 0 4px 16px rgba(26, 35, 50, 0.1); --radius-sm: 6px; --radius: 10px; --radius-lg: 12px; --radius-pill: 8px; --nav-glass: #ffffff; --nav-bg: #ffffff; --nav-border: #dde3ef; --btn-secondary-bg: #dde3ef; --btn-secondary-hover: #c5d0e3; --input-bg: #f4f6fb; --sticky-0: #ffffff; --sticky-1: #ffffff; --sticky-2: #ffffff; --sticky-header-0: #ffffff; --sticky-header-1: #ffffff; --sticky-header-2: #d9ead3; --table-header-bg: #e3ecfa; --table-header-text: #1155cc; --table-total-bg: #d9ead3; --table-total-text: #202124; --table-row-alt: #fafafa; --week-total-bg: #1c4587; --week-total-text: #ffffff; --heat-cold: #e8f4fd; --heat-warm: #fff3e6; --delta-pos: #15803d; --delta-neg: #b91c1c; --chip-month-bg: #eff6ff; --chip-month-border: #93c5fd; --chip-week-bg: #f5f3ff; --chip-week-border: #c4b5fd; --alert-warn-bg: #fffbeb; --alert-warn-border: #fcd34d; --alert-warn-text: #92400e; --alert-error-bg: #fef2f2; --alert-error-border: #fca5a5; --alert-error-text: #991b1b; --alert-info-bg: #eff6ff; --alert-info-border: #93c5fd; --alert-info-text: #1e40af; --bar-fill-start: #93c5fd; --bar-fill-end: #3b82f6; --code-bg: #dde3ef; --pct-delta-bg: #f8fafc; --changed-bg: #fffbeb; --changed-border: #f59e0b; --changed-badge-bg: #fef3c7; --changed-badge-text: #92400e; --changed-badge-border: #fcd34d; --kpi-blue: linear-gradient(135deg, #005bff, #3b82f6); --kpi-green: linear-gradient(135deg, #16a34a, #22c55e); --kpi-purple: linear-gradient(135deg, #6366f1, #8b5cf6); --kpi-orange: linear-gradient(135deg, #d97706, #f59e0b); --kpi-pink: linear-gradient(135deg, #db2777, #ec4899); } html[data-theme="light"] body { background: var(--bg-accent); background-attachment: fixed; } html[data-theme="light"] .nav-brand-text { background: none; -webkit-text-fill-color: inherit; color: inherit; } html[data-theme="light"] .logo-mark { background: linear-gradient(135deg, #005bff, #3b82f6); box-shadow: 0 2px 8px rgba(0, 91, 255, 0.3); } /* ========== 2. Тёмное (исправленное) ========== */ html[data-theme="dark"] { --bg: #141416; --bg-accent: linear-gradient(165deg, #141416 0%, #1a1a1f 50%, #161820 100%); --surface: #222226; --surface-muted: #2a2a2f; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.2); --text: #f2f2f7; --muted: #aeaeb2; --accent: #409cff; --accent-hover: #64b5ff; --accent-soft: rgba(64, 156, 255, 0.16); --on-accent: #ffffff; --ok: #4ade80; --warn: #fbbf24; --error: #f87171; --purple: #c084fc; --teal: #67e8f9; --pink: #f472b6; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.5); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 980px; --nav-glass: rgba(34, 34, 38, 0.92); --nav-bg: var(--nav-glass); --nav-border: rgba(255, 255, 255, 0.1); --btn-secondary-bg: rgba(255, 255, 255, 0.1); --btn-secondary-hover: rgba(255, 255, 255, 0.16); --input-bg: #2a2a2f; --sticky-0: #222226; --sticky-1: #222226; --sticky-2: #222226; --sticky-header-0: #323238; --sticky-header-1: #323238; --sticky-header-2: #1e3a2f; --table-header-bg: #323238; --table-header-text: #f2f2f7; --table-total-bg: #1e3a2f; --table-total-text: #bbf7d0; --table-row-alt: #1c1c1f; --week-total-bg: linear-gradient(135deg, #1d4ed8, #2563eb); --week-total-text: #ffffff; --heat-cold: rgba(96, 165, 250, 0.22); --heat-warm: rgba(251, 191, 36, 0.2); --delta-pos: #4ade80; --delta-neg: #f87171; --chip-month-bg: rgba(64, 156, 255, 0.14); --chip-month-border: rgba(64, 156, 255, 0.4); --chip-week-bg: rgba(192, 132, 252, 0.14); --chip-week-border: rgba(192, 132, 252, 0.4); --alert-warn-bg: rgba(251, 191, 36, 0.12); --alert-warn-border: rgba(251, 191, 36, 0.35); --alert-warn-text: #fde68a; --alert-error-bg: rgba(248, 113, 113, 0.12); --alert-error-border: rgba(248, 113, 113, 0.35); --alert-error-text: #fecaca; --alert-info-bg: rgba(64, 156, 255, 0.12); --alert-info-border: rgba(64, 156, 255, 0.35); --alert-info-text: #93c5fd; --bar-fill-start: #2563eb; --bar-fill-end: #60a5fa; --code-bg: rgba(255, 255, 255, 0.08); --pct-delta-bg: #2a2a2f; --changed-bg: rgba(251, 191, 36, 0.12); --changed-border: #fbbf24; --changed-badge-bg: rgba(251, 191, 36, 0.2); --changed-badge-text: #fde68a; --changed-badge-border: rgba(251, 191, 36, 0.4); --kpi-blue: linear-gradient(135deg, #2563eb, #60a5fa); --kpi-green: linear-gradient(135deg, #16a34a, #4ade80); --kpi-purple: linear-gradient(135deg, #7c3aed, #c084fc); --kpi-orange: linear-gradient(135deg, #d97706, #fbbf24); --kpi-pink: linear-gradient(135deg, #db2777, #f472b6); } html[data-theme="dark"] body { background: var(--bg-accent); background-attachment: fixed; } html[data-theme="dark"] .nav-brand-text { background: linear-gradient(90deg, #f2f2f7 0%, #aeaeb2 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="dark"] .btn-secondary:hover { color: var(--text); } html[data-theme="dark"] .data-table tbody tr:hover { background: rgba(64, 156, 255, 0.1); } html[data-theme="dark"] .group-child { background: #1c1c1f; } html[data-theme="dark"] .cell-yellow-pct { background: #3d3520 !important; color: #fde68a !important; } /* ========== 3. Контрастное ========== */ html[data-theme="contrast"] { --bg: #eceae4; --bg-accent: #eceae4; --surface: #fffef9; --surface-muted: #f5f3ec; --border: #c8c2b4; --border-strong: #a8a29e; --text: #1c1917; --muted: #57534e; --accent: #0f766e; --accent-hover: #0d5f58; --accent-soft: rgba(15, 118, 110, 0.12); --on-accent: #ffffff; --ok: #047857; --warn: #b45309; --error: #b91c1c; --purple: #7c3aed; --teal: #0d9488; --pink: #db2777; --shadow-sm: 0 1px 4px rgba(28, 25, 23, 0.08); --shadow: 0 1px 4px rgba(28, 25, 23, 0.1); --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.12); --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-pill: 980px; --nav-glass: #1c1917; --nav-bg: #1c1917; --nav-border: #292524; --btn-secondary-bg: #e7e5e0; --btn-secondary-hover: #d6d3cd; --input-bg: #fffef9; --sticky-0: #fffef9; --sticky-1: #fffef9; --sticky-2: #fffef9; --sticky-header-0: #f5f0e1; --sticky-header-1: #f5f0e1; --sticky-header-2: #e8e0c8; --table-header-bg: #e8e0c8; --table-header-text: #1c1917; --table-total-bg: #d4c9a8; --table-total-text: #1c1917; --table-row-alt: #f5f3ec; --week-total-bg: #1c1917; --week-total-text: #fafaf9; --heat-cold: #dbeafe; --heat-warm: #ffedd5; --delta-pos: #047857; --delta-neg: #b91c1c; --chip-month-bg: #ecfdf5; --chip-month-border: #0f766e; --chip-week-bg: #fef3c7; --chip-week-border: #d97706; --alert-warn-bg: #fffbeb; --alert-warn-border: #d97706; --alert-warn-text: #92400e; --alert-error-bg: #fef2f2; --alert-error-border: #b91c1c; --alert-error-text: #991b1b; --alert-info-bg: #ecfdf5; --alert-info-border: #0f766e; --alert-info-text: #0f766e; --bar-fill-start: #0f766e; --bar-fill-end: #14b8a6; --code-bg: #e7e5e0; --pct-delta-bg: #f5f3ec; --changed-bg: #fffbeb; --changed-border: #d97706; --changed-badge-bg: #fef3c7; --changed-badge-text: #92400e; --changed-badge-border: #d97706; --kpi-blue: linear-gradient(135deg, #0f766e, #14b8a6); --kpi-green: linear-gradient(135deg, #047857, #10b981); --kpi-purple: linear-gradient(135deg, #6d28d9, #8b5cf6); --kpi-orange: linear-gradient(135deg, #d97706, #f59e0b); --kpi-pink: linear-gradient(135deg, #be185d, #ec4899); } html[data-theme="contrast"] body { background: var(--bg-accent); } html[data-theme="contrast"] .navbar { color: #fafaf9; } html[data-theme="contrast"] .nav-brand, html[data-theme="contrast"] .nav-brand:hover { color: #fafaf9; } html[data-theme="contrast"] .nav-brand-text { background: none; -webkit-text-fill-color: #fafaf9; color: #fafaf9; } html[data-theme="contrast"] .nav-links a { color: #a8a29e; } html[data-theme="contrast"] .nav-links a:hover, html[data-theme="contrast"] .nav-links a.active { color: #fafaf9; background: #292524; } html[data-theme="contrast"] .theme-switcher { background: #292524; border-color: #44403c; } html[data-theme="contrast"] .theme-switcher-btn { color: #a8a29e; } html[data-theme="contrast"] .theme-switcher-btn:hover { color: #fafaf9; background: #44403c; } html[data-theme="contrast"] .theme-switcher-btn.is-active { color: #fafaf9; background: #0f766e; } /* ========== 4. Цветное ========== */ html[data-theme="colorful"] { --bg: #faf5ff; --bg-accent: linear-gradient(145deg, #fff1f2 0%, #f0f9ff 30%, #f5f3ff 60%, #fff7ed 100%); --surface: #ffffff; --surface-muted: #fdf4ff; --border: rgba(124, 58, 237, 0.15); --border-strong: rgba(236, 72, 153, 0.25); --text: #1e1b4b; --muted: #6b7280; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-soft: rgba(124, 58, 237, 0.12); --on-accent: #ffffff; --ok: #059669; --warn: #ea580c; --error: #e11d48; --purple: #a855f7; --teal: #06b6d4; --pink: #ec4899; --shadow-sm: 0 2px 8px rgba(124, 58, 237, 0.08); --shadow: 0 4px 20px rgba(124, 58, 237, 0.1); --shadow-lg: 0 12px 32px rgba(236, 72, 153, 0.12); --radius-sm: 12px; --radius: 16px; --radius-lg: 22px; --radius-pill: 980px; --nav-glass: rgba(255, 255, 255, 0.75); --nav-bg: var(--nav-glass); --nav-border: rgba(124, 58, 237, 0.12); --btn-secondary-bg: rgba(124, 58, 237, 0.08); --btn-secondary-hover: rgba(124, 58, 237, 0.14); --input-bg: rgba(255, 255, 255, 0.9); --sticky-0: #ffffff; --sticky-1: #ffffff; --sticky-2: #ffffff; --sticky-header-0: #f5f3ff; --sticky-header-1: #fdf2f8; --sticky-header-2: #ecfdf5; --table-header-bg: linear-gradient(90deg, #ede9fe, #fce7f3); --table-header-text: #5b21b6; --table-total-bg: linear-gradient(90deg, #d1fae5, #cffafe); --table-total-text: #065f46; --table-row-alt: #fdf4ff; --week-total-bg: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b); --week-total-text: #ffffff; --heat-cold: rgba(6, 182, 212, 0.2); --heat-warm: rgba(236, 72, 153, 0.18); --delta-pos: #059669; --delta-neg: #e11d48; --chip-month-bg: rgba(124, 58, 237, 0.1); --chip-month-border: rgba(124, 58, 237, 0.35); --chip-week-bg: rgba(236, 72, 153, 0.1); --chip-week-border: rgba(236, 72, 153, 0.35); --alert-warn-bg: rgba(251, 146, 60, 0.12); --alert-warn-border: rgba(234, 88, 12, 0.35); --alert-warn-text: #9a3412; --alert-error-bg: rgba(244, 63, 94, 0.1); --alert-error-border: rgba(225, 29, 72, 0.35); --alert-error-text: #9f1239; --alert-info-bg: rgba(124, 58, 237, 0.1); --alert-info-border: rgba(124, 58, 237, 0.3); --alert-info-text: #5b21b6; --bar-fill-start: #a855f7; --bar-fill-end: #ec4899; --code-bg: rgba(124, 58, 237, 0.08); --pct-delta-bg: #fdf4ff; --changed-bg: rgba(251, 146, 60, 0.12); --changed-border: #ea580c; --changed-badge-bg: rgba(251, 146, 60, 0.18); --changed-badge-text: #9a3412; --changed-badge-border: rgba(234, 88, 12, 0.35); --kpi-blue: linear-gradient(135deg, #6366f1, #06b6d4); --kpi-green: linear-gradient(135deg, #10b981, #34d399); --kpi-purple: linear-gradient(135deg, #7c3aed, #ec4899); --kpi-orange: linear-gradient(135deg, #f97316, #fbbf24); --kpi-pink: linear-gradient(135deg, #ec4899, #f472b6); } html[data-theme="colorful"] body { background: var(--bg-accent); background-attachment: fixed; } html[data-theme="colorful"] .nav-brand-text { background: linear-gradient(90deg, #7c3aed, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="colorful"] .logo-mark { background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b); box-shadow: 0 2px 12px rgba(124, 58, 237, 0.35); } html[data-theme="colorful"] .card { border-color: rgba(124, 58, 237, 0.12); } html[data-theme="colorful"] .nav-links a.active { background: linear-gradient(135deg, #7c3aed, #a855f7); } html[data-theme="colorful"] .pf-btn.active, html[data-theme="colorful"] .pf-btn:hover { background: linear-gradient(135deg, #7c3aed, #ec4899); border-color: transparent; } /* ========== 5. Apple (macOS) ========== */ html[data-theme="apple"] { --bg: #f5f5f7; --bg-accent: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(0, 122, 255, 0.08), transparent 55%), radial-gradient(ellipse 60% 40% at 90% 0%, rgba(175, 82, 222, 0.06), transparent 50%), linear-gradient(180deg, #f5f5f7 0%, #ebebf0 100%); --surface: rgba(255, 255, 255, 0.88); --surface-muted: rgba(255, 255, 255, 0.65); --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.11); --text: #1d1d1f; --muted: #86868b; --accent: #007aff; --accent-hover: #0066d6; --accent-soft: rgba(0, 122, 255, 0.12); --on-accent: #ffffff; --ok: #34c759; --warn: #ff9500; --error: #ff3b30; --purple: #af52de; --teal: #5ac8fa; --pink: #ff2d55; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03); --shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1); --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 980px; --nav-glass: rgba(255, 255, 255, 0.68); --nav-bg: var(--nav-glass); --nav-border: rgba(0, 0, 0, 0.06); --btn-secondary-bg: rgba(0, 0, 0, 0.05); --btn-secondary-hover: rgba(0, 0, 0, 0.09); --input-bg: rgba(255, 255, 255, 0.92); --sticky-0: #ffffff; --sticky-1: #ffffff; --sticky-2: #ffffff; --sticky-header-0: #f5f5f7; --sticky-header-1: #f5f5f7; --sticky-header-2: #eef8f0; --table-header-bg: #f5f5f7; --table-header-text: #1d1d1f; --table-total-bg: #eef8f0; --table-total-text: #1d1d1f; --table-row-alt: #fafafa; --week-total-bg: linear-gradient(135deg, #007aff, #5856d6); --week-total-text: #ffffff; --heat-cold: rgba(90, 200, 250, 0.18); --heat-warm: rgba(255, 149, 0, 0.15); --delta-pos: #248a3d; --delta-neg: #d70015; --chip-month-bg: rgba(0, 122, 255, 0.08); --chip-month-border: rgba(0, 122, 255, 0.25); --chip-week-bg: rgba(175, 82, 222, 0.08); --chip-week-border: rgba(175, 82, 222, 0.25); --alert-warn-bg: rgba(255, 149, 0, 0.1); --alert-warn-border: rgba(255, 149, 0, 0.35); --alert-warn-text: #9a6200; --alert-error-bg: rgba(255, 59, 48, 0.08); --alert-error-border: rgba(255, 59, 48, 0.3); --alert-error-text: #c41e14; --alert-info-bg: rgba(0, 122, 255, 0.08); --alert-info-border: rgba(0, 122, 255, 0.28); --alert-info-text: #0040a8; --bar-fill-start: #5ac8fa; --bar-fill-end: #007aff; --code-bg: rgba(0, 0, 0, 0.05); --pct-delta-bg: #f5f5f7; --changed-bg: rgba(255, 149, 0, 0.1); --changed-border: #ff9500; --changed-badge-bg: rgba(255, 149, 0, 0.15); --changed-badge-text: #9a6200; --changed-badge-border: rgba(255, 149, 0, 0.35); --kpi-blue: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%); --kpi-green: linear-gradient(135deg, #34c759 0%, #30d158 100%); --kpi-purple: linear-gradient(135deg, #5856d6 0%, #af52de 100%); --kpi-orange: linear-gradient(135deg, #ff9500 0%, #ffcc00 100%); --kpi-pink: linear-gradient(135deg, #ff2d55 0%, #ff6482 100%); } html[data-theme="apple"] body { background: var(--bg-accent); background-attachment: fixed; } html[data-theme="apple"] .card, html[data-theme="apple"] .table-wrap, html[data-theme="apple"] .section { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-theme="apple"] .nav-brand-text { background: linear-gradient(90deg, #1d1d1f 0%, #86868b 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="apple"] .logo-mark { background: linear-gradient(135deg, #007aff 0%, #5856d6 50%, #af52de 100%); box-shadow: 0 2px 10px rgba(0, 122, 255, 0.35); } /* --- Переключатель тем --- */ .theme-switcher { display: flex; align-items: center; gap: 0.12rem; margin-left: 0.5rem; padding: 0.22rem; border-radius: var(--radius-pill, 980px); background: var(--btn-secondary-bg); border: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: min(100%, 520px); overflow-x: auto; scrollbar-width: none; } .theme-switcher::-webkit-scrollbar { display: none; } .theme-switcher-btn { border: none; background: transparent; color: var(--muted); font-size: 0.68rem; font-weight: 600; padding: 0.32rem 0.55rem; border-radius: var(--radius-pill, 980px); cursor: pointer; line-height: 1.2; white-space: nowrap; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; } .theme-switcher-btn:hover { color: var(--text); background: var(--btn-secondary-hover); } .theme-switcher-btn.is-active { color: var(--on-accent); background: var(--accent); box-shadow: var(--shadow-sm); } .navbar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } @media (max-width: 1100px) { .navbar { flex-wrap: wrap; height: auto; padding: 0.75rem 1rem; gap: 0.5rem; } .theme-switcher-btn { padding: 0.3rem 0.45rem; font-size: 0.64rem; } }