/* ═══════════════════════════════════════════════════════════════ EngiGROUP — расширение темы и доступности ─────────────────────────────────────────────────────────────── Подключите этот файл ПОСЛЕ app.css (например в App.razor): Или скопируйте его содержимое в конец app.css. Содержит: - Тёмную тему (data-theme="dark" на ) - Глобальный масштаб шрифта (--ec-font-scale) - Режим уменьшенных анимаций (data-reduced-motion="1") ═══════════════════════════════════════════════════════════════ */ /* ─── Масштаб шрифта ─── Применяется через style="--ec-font-scale: 0.92|1.0|1.12" на . Позволяет глобально увеличивать/уменьшать все размеры в rem. */ html { font-size: calc(16px * var(--ec-font-scale, 1)); } /* ─── Тёмная тема ─── Активируется через data-theme="dark" на . Все компоненты автоматически переключаются за счёт CSS-переменных. */ html[data-theme="dark"] { /* —— Поверхности —— */ --ec-bg: #0f1115; /* фон страницы */ --ec-bg-soft: #161920; /* мягкий вариант */ --ec-surface: #1c1f27; /* карточки, модалки */ --ec-surface-2: #232730; /* вложенные блоки */ --ec-grey-max: #2a2f3a; /* hover, тонкие подложки */ /* —— Текст —— */ --ec-text: #e8eaed; --ec-text-soft: #c4c7cc; --ec-sub: #9aa0a6; --ec-muted: #80868b; --ec-faint: #5f6368; /* —— Границы —— */ --ec-border: #2d3340; --ec-border-soft: #232831; --ec-border-strong: #3d4456; /* —— Бренд + акценты —— */ --ec-accent: #4d9fff; --ec-accent-h: #66adff; --ec-accent-deep: #2563eb; --ec-accent-soft: rgba(77, 159, 255, .15); /* —— Инженерные —— */ --ec-steel: #6b7d8e; --ec-steel-deep: #4a5969; --ec-steel-soft: rgba(107, 125, 142, .15); /* —— Семантика —— */ --ec-success-bg: rgba(52, 199, 89, .15); --ec-success-text: #5dd87b; --ec-warning-bg: rgba(255, 149, 0, .15); --ec-warning-text: #ffb340; --ec-danger-bg: rgba(255, 59, 48, .18); --ec-danger-text: #ff6b62; --ec-info-bg: rgba(90, 200, 250, .15); --ec-info-text: #6dd5fa; /* —— Тени (в тёмной теме мягче) —— */ --ec-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --ec-shadow: 0 4px 24px rgba(0, 0, 0, .35); --ec-shadow-md: 0 8px 40px rgba(0, 0, 0, .45); --ec-shadow-lg: 0 20px 60px rgba(0, 0, 0, .55); --ec-shadow-accent: 0 8px 32px rgba(77, 159, 255, .35); color-scheme: dark; } /* Корректная подложка картинок и инпутов в тёмной теме */ html[data-theme="dark"] img { filter: brightness(.95); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color-scheme: dark; } /* ─── Reduced motion ─── Активируется через data-reduced-motion="1" на . Отключает transitions/animations для пользователей с motion sickness. */ html[data-reduced-motion="1"] *, html[data-reduced-motion="1"] *::before, html[data-reduced-motion="1"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Уважаем системную настройку (если пользователь не задал свою) */ @media (prefers-reduced-motion: reduce) { html:not([data-reduced-motion="0"]) *, html:not([data-reduced-motion="0"]) *::before, html:not([data-reduced-motion="0"]) *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }