/* * Admin Theme — стили (light/dark) * * Часть модуля inc/admin-theme/. Подключается только для админов * (см. inc/admin-theme/admin-theme.php). Активируется при наличии * класса .admin-theme-enabled на или . * * Содержит: * - CSS-переменные обеих тем * - Перебивки оригинальных стилей сайта для тёмной темы * - Стили UI-кнопки переключателя * * Пути к изображениям (mask-image для стрелок) идут через ../../../imgs/ * — т.к. файл лежит в inc/admin-theme/assets/, а imgs/ — в корне темы. */ /* ===== БАЗОВАЯ ПАЛИТРА (общая для обеих тем) ===== */ :root { --igp-brand-blue: #2098D1; --igp-brand-blue-hover: #1a7eaf; --igp-brand-red: #C23016; --igp-brand-red-dark: #BA0000; --igp-brand-red-alt: #B43630; --igp-accent-pink: #e31e62; } /* ===== СВЕТЛАЯ ТЕМА (по умолчанию для админа) ===== Переменные ставятся И на html, И на body — html-класс работает раньше при первой отрисовке, body-класс — резервный. */ html.admin-theme-light, html.admin-theme-enabled, body.admin-theme-enabled, body.admin-theme-enabled.admin-theme-light { --igp-bg-primary: #ffffff; --igp-bg-secondary: #fafafa; --igp-bg-tertiary: #f3f3f3; --igp-bg-muted: #f5f5f5; --igp-bg-card: #ffffff; --igp-bg-overlay: rgba(0, 0, 0, 0.6); /* Мост к новой токен-системе (home.css) — светлые значения */ --igp-bg: #f6f6f6; --igp-surface: #ffffff; --igp-surface-alt: #ededed; --igp-border: #e4e4e4; --igp-bg-input: #ffffff; --igp-bg-hover: #f1f1f1; --igp-text-primary: #000000; --igp-text-secondary: #222222; --igp-text-muted: #595959; --igp-text-inverse: #ffffff; --igp-text-link: #d32029; --igp-text-link-hover: #b00; --igp-border-primary: #e1e1e1; --igp-border-secondary: #dbdbdb; --igp-border-muted: #ccc; --igp-border-strong: #aaa; --igp-shadow-sm: rgba(0, 0, 0, 0.05); --igp-shadow-md: rgba(0, 0, 0, 0.1); --igp-shadow-lg: rgba(0, 0, 0, 0.2); --igp-btn-bg: var(--igp-brand-red); --igp-btn-text: #ffffff; --igp-btn-bg-hover: var(--igp-brand-red-dark); color-scheme: light; } /* ===== ТЁМНАЯ ТЕМА ===== */ html.admin-theme-dark, body.admin-theme-enabled.admin-theme-dark { --igp-bg-primary: #1a1a1a; --igp-bg-secondary: #222222; --igp-bg-tertiary: #2a2a2a; --igp-bg-muted: #2e2e2e; --igp-bg-card: #242424; --igp-bg-overlay: rgba(0, 0, 0, 0.85); --igp-bg-input: #2a2a2a; --igp-bg-hover: #333333; /* Мост к новой токен-системе (home.css) — страховка от undefined */ --igp-bg: #181818; --igp-surface: #232323; --igp-surface-alt: #2c2c2c; --igp-border: #353535; --igp-text-primary: #f3f3f3; --igp-text-secondary: #e1e1e1; --igp-text-muted: #aaaaaa; --igp-text-inverse: #1a1a1a; --igp-text-link: #ff4a52; --igp-text-link-hover: #ff6a72; --igp-border-primary: #3a3a3a; --igp-border-secondary: #444444; --igp-border-muted: #555555; --igp-border-strong: #6a6a6a; --igp-shadow-sm: rgba(0, 0, 0, 0.3); --igp-shadow-md: rgba(0, 0, 0, 0.5); --igp-shadow-lg: rgba(0, 0, 0, 0.7); --igp-btn-bg: var(--igp-brand-red); --igp-btn-text: #ffffff; --igp-btn-bg-hover: #d83a1f; color-scheme: dark; } /* ===== АНТИФЛИКЕР: моментальный тёмный фон на html ещё ДО загрузки main.css. Работает с pre-paint