/* * CRM Stacs — кастомные стили. * Палитра тем — из ТЗ 08, раздел 7.7. * * Все цвета определены через CSS-переменные. Класс на * переключает их одним махом. Хранится в БД (User.theme_preference) + * мгновенно в localStorage для предотвращения мерцания при загрузке. */ /* ─── Светлая тема (default) ─── */ :root, [data-theme="light"] { /* Brand colors — мягко-синяя палитра */ --color-primary: #3B6BA5; --color-dark: #2C5282; --color-mid: #7DA3CC; --color-highlight: #EAF1FA; /* Поверхности */ --color-bg: #F7F9FC; --color-panel: #FFFFFF; --color-border: #DDE3EC; /* Текст */ --color-text: #1F2937; --color-text-secondary: #586677; } /* ─── Тёмная тема — глубокая ночная синева ─── */ [data-theme="dark"] { --color-primary: #5B8FCC; --color-dark: #4A7AB3; --color-mid: #7DA3CC; --color-highlight: #232B3D; --color-bg: #131826; --color-panel: #1A2030; --color-border: #2A3242; --color-text: #E8EDF5; --color-text-secondary: #A0AAC0; } /* ─── Утилитарные стили навигации (sidebar) ─── */ .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.5rem; color: var(--color-text-secondary); font-size: 0.875rem; font-weight: 500; transition: all 0.15s ease; text-decoration: none; } .nav-link:hover { background: var(--color-highlight); color: var(--color-text); } .nav-link-active { background: var(--color-highlight); color: var(--color-primary); font-weight: 600; } .nav-sublink { display: block; padding: 0.4rem 0.75rem; border-radius: 0.375rem; color: var(--color-text-secondary); font-size: 0.825rem; transition: all 0.15s ease; text-decoration: none; } .nav-sublink:hover:not(.cursor-not-allowed) { background: var(--color-highlight); color: var(--color-text); } .nav-sublink-active { color: var(--color-primary); font-weight: 600; background: var(--color-highlight); } /* ─── Flash сообщения ─── */ .flash-error { background: rgb(254, 226, 226); color: rgb(127, 29, 29); border-color: rgb(254, 202, 202); } .flash-warning { background: rgb(254, 243, 199); color: rgb(120, 53, 15); border-color: rgb(253, 230, 138); } .flash-success { background: rgb(209, 250, 229); color: rgb(6, 95, 70); border-color: rgb(167, 243, 208); } .flash-info { background: rgb(219, 234, 254); color: rgb(30, 64, 175); border-color: rgb(191, 219, 254); } [data-theme="dark"] .flash-error { background: rgba(127, 29, 29, 0.2); color: rgb(252, 165, 165); border-color: rgba(127, 29, 29, 0.4); } [data-theme="dark"] .flash-warning { background: rgba(120, 53, 15, 0.2); color: rgb(252, 211, 77); border-color: rgba(120, 53, 15, 0.4); } [data-theme="dark"] .flash-success { background: rgba(6, 95, 70, 0.2); color: rgb(110, 231, 183); border-color: rgba(6, 95, 70, 0.4); } [data-theme="dark"] .flash-info { background: rgba(30, 64, 175, 0.2); color: rgb(147, 197, 253); border-color: rgba(30, 64, 175, 0.4); } /* ─── Переключатель темы (knob) ─── */ .theme-toggle-knob { left: 4px; } [data-theme="dark"] .theme-toggle-knob { left: calc(100% - 28px); } .theme-icon-light { display: inline; } .theme-icon-dark { display: none; } [data-theme="dark"] .theme-icon-light { display: none; } [data-theme="dark"] .theme-icon-dark { display: inline; } /* ─── Скроллбар (стилизованный) ─── */ * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--color-mid); } /* ─── Утилита tabular-nums (для цифр) ─── */ .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ─── Печать ─── */ @media print { aside, header, footer { display: none !important; } main { padding: 0 !important; } .calc-card { break-inside: avoid; } }