/* ============================================================================ themes.css — система токенів дизайну і теми (light / dark). Підключається ПЕРЕД style.css щоб старі :root-токени в style.css могли посилатись на ці змінні через var(--token-name). Фірмовий зелений #409039 — основний акцент бренду. У темній темі він ледь освітлений (#5fbf48) для збереження контрасту. Перемикання теми: або . ============================================================================ */ /* ── LIGHT (default) ──────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Brand */ --brand: #409039; /* фірмовий зелений */ --brand-hover: #357830; --brand-active: #2d6629; --brand-soft: #e8f5e9; /* для chip/back на світлі */ --brand-soft-hover: #d4ebd6; /* Surfaces */ --bg-app: #f7f8f9; /* фон сторінки */ --bg-surface: #ffffff; /* картки, модалки, sidebar */ --bg-surface-2: #f4f4f5; /* secondary surface (skeleton, inputs) */ --bg-elevated: #ffffff; /* на ще одну "сходинку" вище */ --bg-overlay: rgba(15, 23, 42, 0.45); /* модал backdrop */ --bg-soft: #f0f9f1; /* легке brand-tinted підсвічування */ --bg-hover: #f4f4f5; /* hover для рядків списків */ /* Borders */ --border: #e4e4e7; --border-soft: #f4f4f5; --border-strong: #d4d4d8; --border-focus: var(--brand); /* Text */ --text: #0f172a; /* primary */ --text-secondary: #334155; --text-muted: #71717a; --text-inverse: #ffffff; /* на темному фоні */ --text-disabled: #a1a1aa; /* Status — для error rows, badges, success states */ --success: #16a34a; --success-soft: #dcfce7; --warning: #d97706; --warning-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --info: #2563eb; --info-soft: #dbeafe; --neutral: #64748b; --neutral-soft: #f1f5f9; /* Shadows — м'які, brand-tinted */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.06); --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.08); --shadow-focus: 0 0 0 3px rgba(64, 144, 57, 0.25); /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* Z-index scale */ --z-modal: 200; --z-toast: 300; --z-chip-stack: 990; --z-dropdown: 400; --z-overlay: 100; /* Animation */ --transition-fast: 120ms ease; --transition-base: 180ms ease; --transition-slow: 280ms ease; /* === SPACING SCALE — 4pt grid. Використовуй ці змінні замість магічних чисел. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* === TYPOGRAPHY SCALE — модульна, без магії */ --font-xs: 11px; --font-sm: 13px; --font-base: 14px; --font-md: 15px; --font-lg: 17px; --font-xl: 20px; --font-2xl: 24px; --font-3xl: 32px; --leading-tight: 1.25; --leading-base: 1.5; --leading-loose: 1.75; /* === Legacy aliases — щоб старий style.css продовжував працювати без змін === Усі старі імена (--bg, --text, --blue, --green, --red, --amber, --surface, --border, --muted, --bg-soft, --text-soft, --blue-dark, --green-dark) тепер перевідправляються на нові токени. */ --bg: var(--bg-app); --surface: var(--bg-surface); --text-soft: var(--text-secondary); --muted: var(--text-muted); --blue: var(--brand); /* "blue" у назві історичне — це акцент бренду */ --blue-dark: var(--brand-hover); --green: var(--brand); --green-dark: var(--brand-hover); --red: var(--danger); --amber: var(--warning); } /* ── DARK ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Brand — трохи яскравіше для контрасту на темному */ --brand: #5fbf48; --brand-hover: #6fcf58; --brand-active: #4faa3a; --brand-soft: rgba(95, 191, 72, 0.15); --brand-soft-hover: rgba(95, 191, 72, 0.25); /* Surfaces — темно-сине-сіра гама (Bambu Farm Manager стиль) */ --bg-app: #0d1117; /* deep background */ --bg-surface: #161b22; /* картки, sidebar */ --bg-surface-2: #1f2937; /* skeleton, inputs */ --bg-elevated: #21262d; /* модалки, popovers */ --bg-overlay: rgba(0, 0, 0, 0.65); --bg-soft: rgba(95, 191, 72, 0.06); --bg-hover: #21262d; /* Borders */ --border: #30363d; --border-soft: #21262d; --border-strong: #484f58; --border-focus: var(--brand); /* Text */ --text: #e6edf3; --text-secondary: #c9d1d9; --text-muted: #8b949e; --text-inverse: #0d1117; --text-disabled: #6e7681; /* Status — освітлені для темного фону */ --success: #56d364; --success-soft: rgba(86, 211, 100, 0.15); --warning: #e3b341; --warning-soft: rgba(227, 179, 65, 0.15); --danger: #f85149; --danger-soft: rgba(248, 81, 73, 0.15); --info: #58a6ff; --info-soft: rgba(88, 166, 255, 0.15); --neutral: #8b949e; --neutral-soft: rgba(139, 148, 158, 0.12); /* Shadows — у dark тіні майже не потрібні, але лишаємо для еффекту глибини */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.4); --shadow-focus: 0 0 0 3px rgba(95, 191, 72, 0.3); /* Legacy aliases */ --bg: var(--bg-app); --surface: var(--bg-surface); --text-soft: var(--text-secondary); --muted: var(--text-muted); --blue: var(--brand); --blue-dark: var(--brand-hover); --green: var(--brand); --green-dark: var(--brand-hover); --red: var(--danger); --amber: var(--warning); } /* ── Авто-detect prefers-color-scheme коли користувач НЕ обрав явно ─────── */ /* Якщо не має data-theme — використовуємо системну перевагу. theme-switcher.js додає data-theme явно після першого вибору. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; /* Інлайн копія dark тeми — щоб працювало ще до того як JS встановить data-theme */ --brand: #5fbf48; --brand-hover: #6fcf58; --brand-active: #4faa3a; --brand-soft: rgba(95,191,72,.15); --brand-soft-hover: rgba(95,191,72,.25); --bg-app: #0d1117; --bg-surface: #161b22; --bg-surface-2: #1f2937; --bg-elevated: #21262d; --bg-overlay: rgba(0,0,0,.65); --bg-soft: rgba(95,191,72,.06); --bg-hover: #21262d; --border: #30363d; --border-soft: #21262d; --border-strong: #484f58; --text: #e6edf3; --text-secondary: #c9d1d9; --text-muted: #8b949e; --text-inverse: #0d1117; --text-disabled: #6e7681; --success: #56d364; --success-soft: rgba(86,211,100,.15); --warning: #e3b341; --warning-soft: rgba(227,179,65,.15); --danger: #f85149; --danger-soft: rgba(248,81,73,.15); --info: #58a6ff; --info-soft: rgba(88,166,255,.15); --bg: var(--bg-app); --surface: var(--bg-surface); --text-soft: var(--text-secondary); --muted: var(--text-muted); --blue: var(--brand); --blue-dark: var(--brand-hover); --green: var(--brand); --green-dark: var(--brand-hover); --red: var(--danger); --amber: var(--warning); } } /* ── Плавна анімація переходу між темами ──────────────────────────────────── */ html, body { transition: background-color var(--transition-base), color var(--transition-base); } .card, .modal-content, .pc-card, .printer-card, .stat-card, .live-card, .order-card, .nav-item-d, .nav-item, .dash-kpi, input, select, textarea, button { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); } /* ============================================================================ Базові overrides на елементи яких style.css не покриває (input, select, textarea) ============================================================================ */ input, select, textarea { color-scheme: light dark; } /* На dark scrollbar має бути темним, інакше виглядає чужо */ [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] *::-webkit-scrollbar { background: var(--bg-surface); } [data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); } [data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ============================================================================ Глобальні переопрацювання для dark-theme — там де hardcoded #fff / #000 спричиняють "стрибки" контрасту. Точкові правила, не зміна логіки. ============================================================================ */ /* Білі тла модалок, карток, sidebar — рендер з токенів */ [data-theme="dark"] .modal-content, [data-theme="dark"] .modal-overlay, [data-theme="dark"] .desktop-sidebar, [data-theme="dark"] .card, [data-theme="dark"] .pc-card, [data-theme="dark"] .order-card, [data-theme="dark"] .printer-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .live-card, [data-theme="dark"] .dash-kpi, [data-theme="dark"] .dash-active-card, [data-theme="dark"] .dash-fil-row, [data-theme="dark"] .err-row, [data-theme="dark"] .history-row, [data-theme="dark"] .filament-card, [data-theme="dark"] .gcode-model-row, [data-theme="dark"] .skeleton-card, [data-theme="dark"] .model-file-card, [data-theme="dark"] .plate-row, [data-theme="dark"] .plate-editor-row { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text); } [data-theme="dark"] .modal-overlay { background: var(--bg-overlay) !important; } [data-theme="dark"] .modal-content { background: var(--bg-elevated) !important; } /* Inputs / selects / textareas */ [data-theme="dark"] .input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg-surface-2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .input:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--brand); background: var(--bg-elevated); box-shadow: var(--shadow-focus); } /* Chips / search wrap / divider — те що частіше за все має білий бекграунд */ [data-theme="dark"] .chips .chip, [data-theme="dark"] .ana-tab, [data-theme="dark"] .admin-tab, [data-theme="dark"] .search-wrap, [data-theme="dark"] .hist-chip { background: var(--bg-surface-2); border-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .chip.active, [data-theme="dark"] .ana-tab.active, [data-theme="dark"] .admin-tab.active, [data-theme="dark"] .hist-chip.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); } /* Soft-coloured cards у Dashboard (амбер/блю-тонкі підкладки в light) */ [data-theme="dark"] .stat-card, [data-theme="dark"] .stat-card-blue, [data-theme="dark"] .stat-card-green, [data-theme="dark"] .stat-card-amber { background: var(--bg-surface); } /* Лоадери на темному не повинні білити фон */ [data-theme="dark"] .loader { color: var(--text-muted); } /* Дашборд кпі — фіолетові / жовті іконки лишаються, тла міняються */ [data-theme="dark"] .dash-kpi-sub, [data-theme="dark"] .dash-active-sub, [data-theme="dark"] .dash-active-meta { color: var(--text-muted); } /* Toast / chips */ [data-theme="dark"] .toast { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } /* Sidebar в dark-mode — більш плоский без зеленого тла */ [data-theme="dark"] .desktop-sidebar { background: var(--bg-surface); border-right: 1px solid var(--border); } [data-theme="dark"] .nav-item-d { color: var(--text-secondary); } [data-theme="dark"] .nav-item-d:hover { background: var(--bg-hover); } [data-theme="dark"] .nav-item-d.active { background: var(--brand-soft); color: var(--brand); } /* Mobile nav (bottom) */ [data-theme="dark"] .mobile-nav { background: var(--bg-surface); border-top: 1px solid var(--border); } [data-theme="dark"] .mobile-header { background: var(--bg-surface); border-bottom: 1px solid var(--border); } [data-theme="dark"] .nav-item { color: var(--text-secondary); } [data-theme="dark"] .nav-item.active { color: var(--brand); } /* Drop-зони */ [data-theme="dark"] .prod-form-drop { background: var(--bg-surface-2); border-color: var(--border-strong); } [data-theme="dark"] .prod-form-drop:hover { background: var(--bg-elevated); } [data-theme="dark"] .prod-form-drop.drop-over { background: var(--brand-soft); border-color: var(--brand); } /* Plate / Color swatch popovers */ [data-theme="dark"] .color-picker-pop, [data-theme="dark"] .color-swatch, [data-theme="dark"] .plate-screenshot-drop { background: var(--bg-surface-2); border-color: var(--border); } /* Error help bubble в dark */ [data-theme="dark"] .err-help { background: rgba(227, 179, 65, 0.08); color: var(--warning); } [data-theme="dark"] .err-help-unknown { background: var(--bg-surface-2); color: var(--text-muted); } /* «brand-tinted» stat-card-blue має лишатись синім, а stat-card-green — зеленим, але на dark вони використовують `--brand-soft` як фон. */ [data-theme="dark"] .stat-card-blue { background: var(--info-soft); } [data-theme="dark"] .stat-card-green { background: var(--success-soft); } [data-theme="dark"] .stat-card-amber { background: var(--warning-soft); } /* Photo placeholder / blank images */ [data-theme="dark"] .pc-img-wrap, [data-theme="dark"] .dash-active-img { background: var(--bg-surface-2); } /* Connection-mode badges — їх кольори тонко змінюються в dark */ [data-theme="dark"] .prn-mode-lan { background: rgba(88, 166, 255, .18); color: #79c0ff; } [data-theme="dark"] .prn-mode-cloud { background: rgba(187, 128, 248, .18); color: #d2a8ff; } [data-theme="dark"] .prn-mode-off { background: var(--neutral-soft); color: var(--text-muted); } /* ============================================================================ Dark theme — override inline-стилів які JS-модулі рендерять з hardcoded #fff / #e4e4e7 / #16a34a / etc. Це не red-pencil переписування 30+ файлів, а каскадне перекриття через [style*="..."] атрибут-селектори. ============================================================================ */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background: white"] { background: var(--bg-surface) !important; } [data-theme="dark"] [style*="background:#f"], [data-theme="dark"] [style*="background: #f"] { /* Більшість світлих сірих типу #f3f4f6, #f9fafb — стають bg-surface-2 */ background: var(--bg-surface-2) !important; } [data-theme="dark"] [style*="border:1px solid #e4e4e7"], [data-theme="dark"] [style*="border: 1px solid #e4e4e7"], [data-theme="dark"] [style*="border:1px solid #f"], [data-theme="dark"] [style*="border: 1px solid #f"], [data-theme="dark"] [style*="border:1.5px solid #"] { border-color: var(--border) !important; } [data-theme="dark"] [style*="color:#16a34a"], [data-theme="dark"] [style*="color: #16a34a"] { color: var(--brand) !important; } [data-theme="dark"] [style*="border:1px solid #16a34a"], [data-theme="dark"] [style*="border: 1px solid #16a34a"] { border-color: var(--brand) !important; } [data-theme="dark"] [style*="color:#3b82f6"], [data-theme="dark"] [style*="color: #3b82f6"], [data-theme="dark"] [style*="color:#2563eb"] { color: var(--info) !important; } [data-theme="dark"] [style*="border:1px solid #3b82f6"], [data-theme="dark"] [style*="border:1px solid #2563eb"] { border-color: var(--info) !important; } [data-theme="dark"] [style*="color:#ef4444"], [data-theme="dark"] [style*="color: #ef4444"], [data-theme="dark"] [style*="color:#dc2626"], [data-theme="dark"] [style*="color:#b91c1c"] { color: var(--danger) !important; } [data-theme="dark"] [style*="color:#0f172a"], [data-theme="dark"] [style*="color: #0f172a"], [data-theme="dark"] [style*="color:#000"] { color: var(--text) !important; } [data-theme="dark"] [style*="color:#6b7280"], [data-theme="dark"] [style*="color:#71717a"], [data-theme="dark"] [style*="color:#9ca3af"], [data-theme="dark"] [style*="color:#a1a1aa"] { color: var(--text-muted) !important; } [data-theme="dark"] [style*="color:#7c3aed"] { color: #c4a8ff !important; /* фіолетовий освітлений */ } /* Текстові підказки / попередження з amber tone */ [data-theme="dark"] [style*="color:#f59e0b"], [data-theme="dark"] [style*="color:#d97706"], [data-theme="dark"] [style*="color:#92400e"] { color: var(--warning) !important; } [data-theme="dark"] [style*="background:#fef2f2"], [data-theme="dark"] [style*="background:#fee2e2"], [data-theme="dark"] [style*="background:#fecaca"] { background: var(--danger-soft) !important; } [data-theme="dark"] [style*="background:#fef3c7"], [data-theme="dark"] [style*="background:#fde68a"] { background: var(--warning-soft) !important; } [data-theme="dark"] [style*="background:#dbeafe"], [data-theme="dark"] [style*="background:#bfdbfe"], [data-theme="dark"] [style*="background:#eff6ff"] { background: var(--info-soft) !important; } [data-theme="dark"] [style*="background:#dcfce7"], [data-theme="dark"] [style*="background:#d1fae5"], [data-theme="dark"] [style*="background:#ecfdf5"] { background: var(--success-soft) !important; } [data-theme="dark"] [style*="background:#f4f4f5"], [data-theme="dark"] [style*="background:#f5f5f5"], [data-theme="dark"] [style*="background:#f3f4f6"], [data-theme="dark"] [style*="background:#f9fafb"] { background: var(--bg-surface-2) !important; } [data-theme="dark"] [style*="background:#ede9fe"], [data-theme="dark"] [style*="background:#ddd6fe"] { background: rgba(196, 168, 255, 0.15) !important; } /* Тіні шрифтів на світло-сірих фонах (текст не повинен бути темним коли тло темне) */ [data-theme="dark"] [style*="background:#f"] [style*="color:#0f172a"], [data-theme="dark"] [style*="background:#fff"] [style*="color:#0f172a"] { color: var(--text) !important; } /* Кнопки що мали style="background:#fff" + color brand — на темному стають text-inverse */ [data-theme="dark"] button[style*="background:#fff"][style*="color:#16a34a"] { background: var(--bg-elevated) !important; color: var(--brand) !important; border-color: var(--brand) !important; } [data-theme="dark"] button[style*="background:#fff"][style*="color:#3b82f6"] { background: var(--bg-elevated) !important; color: var(--info) !important; border-color: var(--info) !important; } /* ============================================================================ Dark theme — fix для конкретних компонентів які не покриваються вище ============================================================================ */ [data-theme="dark"] .qr-container, [data-theme="dark"] #pqr-canvas { background: var(--bg-surface) !important; } [data-theme="dark"] .err-snapshot-empty { background: var(--bg-surface-2); color: var(--text-muted); } [data-theme="dark"] .live-cam-placeholder { background: repeating-linear-gradient(45deg, #1f2937 0 6px, #161b22 6px 12px); color: var(--text-muted); } /* Модалки сповіщень / dropdowns */ [data-theme="dark"] .notif-popover, [data-theme="dark"] .notif-item, [data-theme="dark"] .lp-row, [data-theme="dark"] .filament-card, [data-theme="dark"] .gcode-model-row { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text); } /* HR/divider в темі */ [data-theme="dark"] .divider, [data-theme="dark"] hr { background: var(--border-soft) !important; border-color: var(--border-soft) !important; } /* Settings details/summary */ [data-theme="dark"] .settings-group, [data-theme="dark"] details.settings-group { background: var(--bg-surface); border: 1px solid var(--border); } [data-theme="dark"] details.settings-group summary { color: var(--text); }