/* ============================================= Тема оформления панели — светлая/тёмная. Переключение через атрибут data-theme на , см. theme-toggle.js ============================================= */ :root { --bg-page: #0f0f13; --bg-sidebar: #13131f; --bg-card: #1a1a28; --bg-card-alt: #15151f; --bg-input: #0f0f1a; --bg-hover: #1e1e30; --bg-row-hover: #24243a; --border: #2a2a40; --border-soft: #1e1e30; --border-softer:#1e1e2e; --text-primary: #e8e8f0; --text-secondary: #ccc; --text-muted: #888; --text-dim: #666; --text-dimmer: #555; --text-faint: #444; --accent: #a78bfa; --accent-hover: #9333ea; --accent-soft: rgba(167,139,250,0.18); --danger-bg: #450a0a; --danger-text: #fca5a5; --danger-hover: #7f1d1d; --success-bg: #14532d; --success-text: #86efac; --success-hover:#166534; --warning-bg: #451a03; --warning-text: #fdba74; --info-bg: #1e3a5f; --info-text: #93c5fd; --shadow: 0 12px 32px rgba(0,0,0,0.5); } [data-theme="light"] { --bg-page: #f4f4f7; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-card-alt: #f7f7fb; --bg-input: #f7f7fb; --bg-hover: #eeeef4; --bg-row-hover: #efe9ff; --border: #e2e2ec; --border-soft: #ececf4; --border-softer:#eeeef4; --text-primary: #17171f; --text-secondary: #3a3a45; --text-muted: #6b6b78; --text-dim: #8a8a96; --text-dimmer: #9a9aa6; --text-faint: #c4c4cf; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-soft: rgba(124,58,237,0.12); --danger-bg: #fde2e2; --danger-text: #b91c1c; --danger-hover: #fecaca; --success-bg: #dcfce7; --success-text: #15803d; --success-hover:#bbf7d0; --warning-bg: #ffedd5; --warning-text: #c2410c; --info-bg: #dbeafe; --info-text: #1d4ed8; --shadow: 0 12px 32px rgba(0,0,0,0.12); } /* Плавный переход при переключении темы */ body, .sidebar, .main, .card, table, th, td, input, select, button { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* Кнопка переключения темы (используется в сайдбаре всех страниц) */ .theme-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 20px; color: var(--text-muted); font-size: 13px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .theme-toggle:hover { color: var(--text-primary); background: var(--bg-hover); } .theme-toggle svg { flex-shrink: 0; } [data-theme="dark"] .theme-icon-light, [data-theme="dark"] .theme-label-light { display: none; } [data-theme="light"] .theme-icon-dark, [data-theme="light"] .theme-label-dark { display: none; }