/* * Дизайн-система адаптирована из dima-dobrovolskiy/restaurant-crm (ветка develop): * CSS-переменные light/dark + акцентный цвет и статусные токены. Подробности и * причины решений — в Контекст/ВЕБ_ДИЗАЙН.md. */ :root { --background: #f6f7f9; --surface: #ffffff; --foreground: #1d2433; --muted: #f0f2f5; --muted-foreground: #687385; --border: #e4e7ec; --accent: #f3e8ff; --accent-foreground: #6d28d9; --success-background: #dcfce7; --success-border: #86efac; --success-foreground: #15803d; --warning-background: #fef3c7; --warning-border: #fcd34d; --warning-foreground: #b45309; --danger-background: #fee2e2; --danger-border: #ef4444; --danger-foreground: #b91c1c; --info-background: #e0f2fe; --info-border: #7dd3fc; --info-foreground: #0369a1; color-scheme: light; } :root[data-theme="dark"] { --background: #0b0d10; --surface: #14171b; --foreground: #e6e8eb; --muted: #1b1f25; --muted-foreground: #9ba3af; --border: #2b3038; --accent: #241a3a; --accent-foreground: #7c3aed; --success-background: rgb(20 83 45 / 0.35); --success-border: #22c55e; --success-foreground: #86efac; --warning-background: rgb(120 53 15 / 0.35); --warning-border: #f59e0b; --warning-foreground: #fcd34d; --danger-background: rgb(69 10 10 / 0.4); --danger-border: #ef4444; --danger-foreground: #fca5a5; --info-background: rgb(12 74 110 / 0.35); --info-border: #38bdf8; --info-foreground: #7dd3fc; color-scheme: dark; } body { background: var(--background); color: var(--foreground); } /* Ссылка внутри текста (не кнопка) — то же имя класса, что в restaurant-crm. */ .action-link { font-weight: 600; color: var(--accent-foreground); } .action-link:hover { text-decoration: underline; } /* Скрывает контент до применения сохранённой темы — без этого при заходе с тёмной темой страница на долю секунды мигает светлой (Tailwind CDN компилирует классы уже после загрузки, поэтому тема ставится через атрибут на , а не через Tailwind dark:-классы). */ [data-theme-pending] { visibility: hidden; } /* Сворачиваемый сайдбар — ширина и видимость подписей переключаются через атрибут на (см. sidebar.js), а не Tailwind-классами, по той же причине, что и тема: состояние должно применяться синхронно при загрузке, до первой отрисовки, иначе сайдбар на миг "дёргается" до нужной ширины. */ .app-sidebar { width: 16rem; /* Флекс-элементы по умолчанию не сжимаются меньше своего "минимального содержимого" (min-width: auto), даже с явным width — без этой строки сайдбар оставался бы widescreen-ширины при сворачивании, потому что заголовок/ссылки внутри считаются частью его "содержимого". */ min-width: 0; transition: width 150ms ease; } :root[data-sidebar-collapsed] .app-sidebar { width: 4.5rem; } :root[data-sidebar-collapsed] .sidebar-label, :root[data-sidebar-collapsed] .sidebar-expanded-icon { display: none; } :root:not([data-sidebar-collapsed]) .sidebar-collapsed-icon { display: none; } :root[data-sidebar-collapsed] .app-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }