/* ============================================================================= RSK23 Theme Preferences, light/dark + accent palette + density + font Применяется через data-* атрибуты на , выставляемые theme-bootstrap.js ============================================================================= */ :root { --rsk-density: 1; --rsk-font-scale: 1; --rsk-text-strong: #ffffff; --rsk-text-muted-strong: #b8c0cc; --rsk-card-border: rgba(255,255,255,0.08); } /* ====== БАЗОВЫЕ ПРАВИЛА КОНТРАСТА (тёмная тема, дефолт) ====== */ body { color: var(--rsk-text-light) !important; } h1, h2, h3, h4, h5, h6, .page__title { color: var(--rsk-text-strong) !important; } label, .rsk-label { color: var(--rsk-text-light) !important; font-weight: 500; } .muted, .tiny, small, .rsk-hint { color: var(--rsk-text-muted-strong) !important; } strong, b { color: inherit; } /* Карточки получают видимую рамку всегда (и в тёмной, и в светлой) */ .rsk-card, .stat-card, .kpi-card { border: 1px solid var(--rsk-card-border); background: var(--rsk-grad-card); } .rsk-card { padding: 1rem; border-radius: 0.75rem; } .rsk-card h3 { color: var(--rsk-text-strong) !important; margin-top: 0; } /* Stat-card, рамка + читаемые цифры */ .stat-card { padding: 1rem; border-radius: 0.75rem; } .stat-card__label { color: var(--rsk-text-light) !important; font-size: 0.85rem; opacity: 0.9; } .stat-card__value { color: var(--rsk-text-strong) !important; font-size: 1.6rem; font-weight: 700; margin-top: 0.25rem; } /* Таблицы */ .rsk-table { color: var(--rsk-text-light); border-collapse: collapse; width: 100%; border: 1px solid rgba(91,168,181,.3); } .rsk-table th { color: var(--rsk-text-strong) !important; border: 1px solid rgba(91,168,181,.25); padding: .5rem .75rem; } .rsk-table td { color: var(--rsk-text-light) !important; border: 1px solid rgba(91,168,181,.18); padding: .5rem .75rem; } .rsk-table thead th { background: rgba(91,168,181,.08); border-bottom: 2px solid rgba(91,168,181,.4); } .rsk-table tbody tr:hover td { background: rgba(91,168,181,.06); } /* Селекты и инпуты в тёмной теме, читаемые */ .rsk-input, select.rsk-input, textarea.rsk-input { color: var(--rsk-text-strong) !important; } .rsk-input::placeholder { color: var(--rsk-text-muted-strong) !important; opacity: 0.8; } /* Все не-primary кнопки в тёмной теме, белый текст */ :root .rsk-btn, :root .rsk-btn:not(.rsk-btn-primary) { color: var(--rsk-text-light) !important; } :root .rsk-btn:not(.rsk-btn-primary):hover { color: #ffffff !important; } .rsk-btn--xs { color: var(--rsk-text-light) !important; } /* В светлой теме, тёмный текст у не-primary */ html[data-theme="light"] .rsk-btn, html[data-theme="light"] .rsk-btn:not(.rsk-btn-primary) { color: #0D1B2A !important; } html[data-theme="light"] .rsk-btn-primary { color: #ffffff !important; } html[data-theme="light"] .rsk-btn--xs { color: #0D1B2A !important; } @media (prefers-color-scheme: light) { html[data-theme="system"] .rsk-btn:not(.rsk-btn-primary) { color: #0D1B2A !important; } } /* Активная rsk-btn-primary, белый текст всегда */ .rsk-btn-primary { color: #ffffff !important; } /* Заголовки и body-текст, принудительно контрастный цвет (бьёт inherit/cab.css). */ body { color: var(--rsk-text-light) !important; } h1, h2, h3, h4, h5, .page__title { color: var(--rsk-text-strong) !important; } .rsk-card { color: var(--rsk-text-light); } .rsk-card h3, .rsk-card h4 { color: var(--rsk-text-strong) !important; margin-top: 0; } /* Лейблы форм и подсказки, читаемые на любой теме */ .rsk-label { color: var(--rsk-text-light) !important; font-weight: 500; } .rsk-hint, small.rsk-hint { color: var(--rsk-text-muted-strong, #b8c0cc) !important; } .muted, .tiny, .muted.tiny { color: var(--rsk-text-muted-strong, #b8c0cc) !important; } /* Поднимаем контраст muted-текста (был #8a94a0 ≈ 3.5:1, делаем ~5.5:1) */ :root { --rsk-text-muted-strong: #b8c0cc; } html[data-theme="light"] { --rsk-text-muted-strong: #4a5663; } @media (prefers-color-scheme: light) { html[data-theme="system"] { --rsk-text-muted-strong: #4a5663; } } /* ---------- ПЛОТНОСТЬ ---------- */ html[data-density="compact"] :root, html[data-density="compact"] { --rsk-density: 0.85; } html[data-density="roomy"] { --rsk-density: 1.15; } html[data-density="compact"] body { font-size: 14px; } html[data-density="roomy"] body { font-size: 17px; } /* ---------- РАЗМЕР ШРИФТА ---------- */ html[data-font-size="s"] { font-size: 92%; } html[data-font-size="l"] { font-size: 108%; } /* ---------- АКЦЕНТНЫЙ ЦВЕТ ---------- teal, дефолт (бирюзовый). Переопределяем основные `teal`-переменные в зависимости от data-accent. Добавляем CSS-переменную --rsk-accent для прямого использования. */ :root { --rsk-accent: var(--rsk-teal); --rsk-accent-rgb: var(--rsk-teal-rgb); } html[data-accent="lime"] { /* салатовый */ --rsk-teal: #84cc16; --rsk-teal-light: #a3e635; --rsk-teal-dark: #4d7c0f; --rsk-teal-rgb: 132, 204, 22; --rsk-accent: #84cc16; --rsk-accent-rgb: 132, 204, 22; --rsk-grad-teal: linear-gradient(135deg, #84cc16 0%, #4d7c0f 100%); } html[data-accent="indigo"] { --rsk-teal: #6366f1; --rsk-teal-light: #8b8ff5; --rsk-teal-dark: #3f44c7; --rsk-teal-rgb: 99, 102, 241; --rsk-accent: #6366f1; --rsk-accent-rgb: 99, 102, 241; --rsk-grad-teal: linear-gradient(135deg, #6366f1 0%, #3f44c7 100%); } html[data-accent="peach"] { /* светлый оранж */ --rsk-teal: #fb923c; --rsk-teal-light: #fdba74; --rsk-teal-dark: #c2410c; --rsk-teal-rgb: 251, 146, 60; --rsk-accent: #fb923c; --rsk-accent-rgb: 251, 146, 60; --rsk-grad-teal: linear-gradient(135deg, #fb923c 0%, #c2410c 100%); } html[data-accent="sky"] { /* светлый синий */ --rsk-teal: #38bdf8; --rsk-teal-light: #7dd3fc; --rsk-teal-dark: #0369a1; --rsk-teal-rgb: 56, 189, 248; --rsk-accent: #38bdf8; --rsk-accent-rgb: 56, 189, 248; --rsk-grad-teal: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%); } html[data-accent="lemon"] { /* лимонный */ --rsk-teal: #facc15; --rsk-teal-light: #fde047; --rsk-teal-dark: #a16207; --rsk-teal-rgb: 250, 204, 21; --rsk-accent: #facc15; --rsk-accent-rgb: 250, 204, 21; --rsk-grad-teal: linear-gradient(135deg, #facc15 0%, #a16207 100%); } /* ---------- СВЕТЛАЯ ТЕМА ---------- */ html[data-theme="light"] { --rsk-bg-dark: #f7f7f5; --rsk-bg-darker: #ffffff; --rsk-bg-card: #ffffff; --rsk-bg-card-2: #fafaf7; --rsk-text-light: #0D1B2A; --rsk-text-muted: #5b6470; --rsk-card-border: rgba(0,0,0,0.18); --rsk-grad-card: #ffffff; --rsk-grad-hero: linear-gradient(180deg, #f7f7f5 0%, #ffffff 50%, #f5f1ea 100%); } html[data-theme="light"] { --rsk-text-strong: #0D1B2A; --rsk-text-muted: #4a5663; --rsk-text-muted-strong: #2c3540; } html[data-theme="light"] body { color: var(--rsk-text-light); } /* Контрастные рамки и тени для светлой темы */ html[data-theme="light"] .rsk-card, html[data-theme="light"] .stat-card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .ref-card, html[data-theme="light"] .modal { border: 1px solid rgba(0, 0, 0, 0.18) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05); } html[data-theme="light"] .rsk-table { border: 1px solid rgba(0, 0, 0, 0.15); } html[data-theme="light"] .rsk-table th, html[data-theme="light"] .rsk-table td { border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; color: #0D1B2A; } html[data-theme="light"] .rsk-table th { color: #2c3540; font-weight: 600; } html[data-theme="light"] .rsk-input, html[data-theme="light"] select.rsk-input, html[data-theme="light"] textarea.rsk-input { border: 1px solid rgba(0,0,0,0.25) !important; background: #fff !important; color: #0D1B2A !important; } html[data-theme="light"] .rsk-input::placeholder { color: #6b7280; } html[data-theme="light"] .rsk-input:focus { border-color: var(--rsk-accent) !important; outline: none; box-shadow: 0 0 0 3px rgba(var(--rsk-accent-rgb), 0.2); } html[data-theme="light"] .sidebar { border-right: 1px solid rgba(0,0,0,0.12) !important; background: #ffffff !important; } html[data-theme="light"] .sidebar__link { color: #0D1B2A; } html[data-theme="light"] .sidebar__link:hover { background: rgba(var(--rsk-accent-rgb), 0.08); } /* Числа и крупный шрифт в KPI/stats cards, тёмные */ html[data-theme="light"] .kpi-card__value, html[data-theme="light"] .stat-card__value, html[data-theme="light"] .stat-card strong, html[data-theme="light"] .ref-card__code { color: #0D1B2A !important; } html[data-theme="light"] .kpi-card__label, html[data-theme="light"] .stat-card__label { color: #2c3540 !important; font-weight: 600; } /* Кнопки (не primary), рамка тёмная */ html[data-theme="light"] .rsk-btn:not(.rsk-btn-primary) { border: 1px solid rgba(0,0,0,0.2); color: #0D1B2A; background: #fff; } html[data-theme="light"] .rsk-btn:not(.rsk-btn-primary):hover { background: #f0f1f3; } @media (prefers-color-scheme: light) { html[data-theme="system"] { --rsk-text-strong: #0D1B2A; --rsk-text-muted: #4a5663; --rsk-text-muted-strong: #2c3540; } } html[data-theme="light"] .sidebar { border-right-color: rgba(0,0,0,0.08); } html[data-theme="light"] .rsk-input, html[data-theme="light"] select.rsk-input, html[data-theme="light"] textarea.rsk-input { background: #fff; color: #0D1B2A; border-color: rgba(0,0,0,0.15); } html[data-theme="light"] .modal, html[data-theme="light"] .modal-backdrop > .modal { background: #fff; color: #0D1B2A; border-color: rgba(0,0,0,0.1); } /* ---------- Системная тема ---------- */ @media (prefers-color-scheme: light) { html[data-theme="system"] { --rsk-bg-dark: #f7f7f5; --rsk-bg-darker: #ffffff; --rsk-bg-card: #ffffff; --rsk-bg-card-2: #fafaf7; --rsk-text-light: #0D1B2A; --rsk-text-muted: #5b6470; --rsk-card-border: rgba(0,0,0,0.18); --rsk-grad-card: #ffffff; } } /* ===== КОНТРАСТ ТЁМНАЯ ТЕМА: рамки видимее, текст ярче ===== */ /* Sidebar — поднимаем видимость рамки и текста (было 0.05) */ .sidebar { border-right-color: rgba(255,255,255,0.16); } .sidebar__footer { border-top-color: rgba(255,255,255,0.16); } .sidebar__link { color: rgba(255,255,255,0.88); } .sidebar__link:hover { color: #ffffff; } /* Глобальная переменная рамок карточек (было 0.08) */ :root { --rsk-card-border: rgba(255,255,255,0.18); } /* Карточки, таблицы, voронки — было 0.04-0.06 */ .stat-card { border-color: rgba(255,255,255,0.16) !important; } .table-wrap { border-color: rgba(255,255,255,0.13) !important; } .funnel { border-color: rgba(255,255,255,0.13) !important; } .data-table th { border-bottom-color: rgba(255,255,255,0.13) !important; color: rgba(255,255,255,0.8) !important; } .data-table td { border-bottom-color: rgba(255,255,255,0.1) !important; } /* ===== КОНТРАСТ СВЕТЛАЯ ТЕМА: сайдбар жирнее, рамки чётче ===== */ html[data-theme="light"] .sidebar__link { font-weight: 600 !important; } html[data-theme="light"] .sidebar__link.is-active { font-weight: 700 !important; } html[data-theme="light"] .sidebar__footer { border-top: 1px solid rgba(0,0,0,0.15) !important; } html[data-theme="light"] .table-wrap, html[data-theme="light"] .funnel { border: 1px solid rgba(0,0,0,0.16) !important; } html[data-theme="light"] .data-table th { border-bottom: 1px solid rgba(0,0,0,0.14) !important; color: #1a2533 !important; font-weight: 700; } html[data-theme="light"] .data-table td { border-bottom: 1px solid rgba(0,0,0,0.09) !important; color: #0D1B2A !important; } /* ============================================================================= СТРАХОВКА ПРОТИВ ИНЛАЙНОВОГО #fff (добавлено 2026-07-18) Проблема: в JS-разметке встречается inline `color:#fff`. На светлой теме это белый текст на белом фоне, значение поля становится невидимым. Тема лечила только h1-h6 (там !important), а `strong, b { color: inherit }` идёт без !important, поэтому inline побеждал. Правило ниже перебивает такой inline на токен темы. Оно тема-НЕзависимо: в тёмной теме --rsk-text-strong сам равен #ffffff, поэтому там ничего не меняется. Элементы со СВОИМ background исключены: это белый текст на цветной плашке (кнопки WA/TG/MAX и т.п.), где #fff корректен. ============================================================================= */ [style*="color:#fff" i]:not([style*="background" i]), [style*="color: #fff" i]:not([style*="background" i]) { color: var(--rsk-text-strong) !important; }