/* ============================================================ ЦифроСити — премиум-тема, Этап 1: фундамент (css/theme.css) Все правила строго под body.theme-premium. Откат: убрать класс theme-premium с — портал вернётся к прежнему виду, ни одна старая CSS-строка не изменена. Исключение: неймспейс .rr-* (Run Rate) — новые классы, которых в старом CSS нет; базовые стили без префикса, чтобы виджет оставался читаемым и при откате темы. ============================================================ */ /* ---------- Дизайн-токены ---------- */ :root { --cp-bg-0: #0B0F1A; /* Глубокий фон */ --cp-bg-1: #121A2E; /* Верх градиента */ --cp-glass: rgba(255, 255, 255, .045); /* Стекло панелей */ --cp-glass-strong: rgba(255, 255, 255, .07); /* Стекло активных элементов */ --cp-stroke: rgba(255, 255, 255, .09); /* Обводка панелей */ --cp-stroke-gold: rgba(232, 200, 116, .35); /* Золотая обводка акцентов */ --cp-text: #EDF0F7; /* Основной текст */ --cp-muted: #8A93A8; /* Приглушённый текст */ --cp-gold: #E8C874; /* Золото — главный акцент */ --cp-gold-deep: #B8923A; /* Тёмное золото для градиентов */ --cp-teal: #4FD1C5; /* Позитив / рост */ --cp-coral: #FF7A6B; /* Негатив / ошибки */ --cp-violet: #8B7CF6; /* Вторичный акцент графиков */ --cp-amber: #F0B45B; /* Предупреждения */ --cp-radius: 16px; /* Скругление панелей */ --cp-font: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; --cp-font-display: 'Playfair Display', Georgia, serif; } /* ---------- Фон и базовая типографика ---------- */ body.theme-premium { font-family: var(--cp-font); color: var(--cp-text); background: radial-gradient(1100px 550px at 78% -8%, rgba(139, 124, 246, .10), transparent 60%), radial-gradient(850px 480px at -8% 32%, rgba(79, 209, 197, .07), transparent 55%), linear-gradient(160deg, var(--cp-bg-1), var(--cp-bg-0) 60%); background-attachment: fixed; font-variant-numeric: tabular-nums; /* Ровные колонки цифр в таблицах */ } /* ---------- Карточки: эффект матового стекла ---------- */ body.theme-premium .card { background: var(--cp-glass); border: 1px solid var(--cp-stroke); border-radius: var(--cp-radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* Safari / iOS PWA */ box-shadow: 0 8px 28px rgba(0, 0, 0, .28); color: var(--cp-text); } body.theme-premium .card-title { color: var(--cp-text); font-weight: 800; letter-spacing: .2px; } /* ---------- Кнопки ---------- */ body.theme-premium .btn-primary { background: linear-gradient(135deg, var(--cp-gold), var(--cp-gold-deep)); border: none; color: #1A1408; /* Тёмный текст на золоте — контраст AA */ font-weight: 800; border-radius: 12px; transition: filter .18s, transform .12s; } body.theme-premium .btn-primary:hover { filter: brightness(1.08); } body.theme-premium .btn-primary:active { transform: translateY(1px); } body.theme-premium .btn-outline { background: transparent; border: 1px solid var(--cp-stroke-gold); color: var(--cp-gold); border-radius: 12px; } body.theme-premium .btn-outline:hover { background: var(--cp-glass-strong); } /* ---------- Формы ---------- */ body.theme-premium .form-control { background: var(--cp-glass-strong); border: 1px solid var(--cp-stroke); border-radius: 10px; color: var(--cp-text); } body.theme-premium .form-control:focus { border-color: var(--cp-stroke-gold); outline: none; box-shadow: 0 0 0 3px rgba(232, 200, 116, .12); } body.theme-premium .form-control::placeholder { color: var(--cp-muted); } body.theme-premium .form-label { color: var(--cp-muted); } body.theme-premium .form-control option { background: var(--cp-bg-1); } /* Выпадающие списки */ /* ---------- Вкладки разделов (Загрузка Excel / Таблица / Динамика) ---------- */ body.theme-premium .section-tab { color: var(--cp-muted); border-radius: 10px 10px 0 0; transition: color .18s; } body.theme-premium .section-tab:hover { color: var(--cp-text); } body.theme-premium .section-tab.active { color: var(--cp-gold); border-bottom: 2px solid var(--cp-gold); font-weight: 700; } /* ---------- Зона загрузки файла ---------- */ body.theme-premium .drop-zone { background: var(--cp-glass); border: 2px dashed var(--cp-stroke-gold); border-radius: var(--cp-radius); color: var(--cp-muted); } body.theme-premium .drop-zone:hover { background: var(--cp-glass-strong); } /* ---------- Тёмный скроллбар (светлая полоса выдаёт недоделанность) ---------- */ body.theme-premium ::-webkit-scrollbar { width: 10px; height: 10px; } body.theme-premium ::-webkit-scrollbar-track { background: transparent; } body.theme-premium ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 6px; } body.theme-premium ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); } /* ---------- Уважение к reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { body.theme-premium * { transition: none !important; animation: none !important; } } /* ============================================================ Этап 1.1 — стабилизация после визуальной приёмки ============================================================ */ /* ---------- Таблица статистики: читаемость на светлых строках ---------- Строки красятся инлайн-стилями из stats.js (розовый = план не выполнен), поэтому полотно оставляем светлым, а тексту возвращаем тёмный цвет. Полный тёмный рескин таблицы — отдельной итерацией вместе со stats.js. */ body.theme-premium .stats-table, body.theme-premium .stats-table td, body.theme-premium .stats-table .num-cell, body.theme-premium .stats-table .num-cell.money, body.theme-premium .stats-table .num-cell.coef { color: #1F2937; } body.theme-premium .stats-table .totals-row td { color: #111827; font-weight: 800; } body.theme-premium .table-wrap { border-radius: var(--cp-radius); /* overflow-x: auto (не hidden) — иначе на мобильном широкая таблица (напр. "Сотрудники") не может прокрутиться вбок, свайп ничего не двигает. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border: 1px solid var(--cp-stroke); } /* ---------- Номинации: «золотые ложи» из мокапа ---------- */ body.theme-premium .nomination-card { background: radial-gradient(120% 90% at 50% 0%, rgba(232, 200, 116, .09), transparent 55%), var(--cp-glass); border: 1px solid var(--cp-stroke-gold); border-radius: var(--cp-radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--cp-text); transition: transform .2s, box-shadow .2s; } body.theme-premium .nomination-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } body.theme-premium .nomination-title { font-family: var(--cp-font-display); color: var(--cp-gold); font-weight: 600; } body.theme-premium .nomination-name { color: var(--cp-text); font-weight: 800; } body.theme-premium .nomination-desc { color: var(--cp-muted); } body.theme-premium .nomination-avatar { border: 2px solid var(--cp-gold); box-shadow: 0 0 0 3px rgba(232, 200, 116, .18); } body.theme-premium .trophy-icon { filter: drop-shadow(0 0 8px rgba(232, 200, 116, .65)) drop-shadow(0 0 3px rgba(232, 200, 116, .4)); } /* Победитель месяца — выделяем сильнее, чем обычные "золотые ложи" */ body.theme-premium .nomination-card.is-month-winner { border-color: var(--cp-gold); box-shadow: 0 0 26px rgba(232, 200, 116, .22), 0 14px 34px rgba(0, 0, 0, .35); } body.theme-premium .nomination-card.is-month-winner .nomination-avatar { box-shadow: 0 0 0 4px rgba(232, 200, 116, .32); } /* ---------- Пикер значка номинации ---------- */ body.theme-premium .emoji-pick { background: var(--cp-glass-strong); border-color: var(--cp-stroke); } body.theme-premium .emoji-pick:hover { border-color: var(--cp-stroke-gold); } body.theme-premium .emoji-pick.selected { border-color: var(--cp-gold); background: rgba(232, 200, 116, .14); box-shadow: 0 0 0 2px rgba(232, 200, 116, .18); } /* ---------- Мои значки: личный кабинет ---------- */ body.theme-premium .badge-chip { background: var(--cp-glass-strong); border: 1px solid var(--cp-stroke-gold); color: var(--cp-text); } body.theme-premium .badge-chip-title { color: var(--cp-text); } body.theme-premium .badge-chip-count { background: linear-gradient(135deg, var(--cp-gold), var(--cp-gold-deep)); color: #1A1408; } /* ---------- Геймификация: XP + босс месяца ---------- */ body.theme-premium .xp-level, body.theme-premium .boss-stage, body.theme-premium .xp-meta { color: var(--cp-muted); } body.theme-premium .xp-total { color: var(--cp-gold); } body.theme-premium .xp-bar, body.theme-premium .boss-health-bar { background: var(--cp-glass-strong); border-color: var(--cp-stroke); } body.theme-premium .xp-bar-fill { background: linear-gradient(90deg, var(--cp-gold-deep), var(--cp-gold)); } body.theme-premium .xp-recent { border-top-color: var(--cp-stroke); } body.theme-premium .xp-log-label { color: var(--cp-muted); } body.theme-premium .xp-log-amount { color: var(--cp-teal); } body.theme-premium .boss-stage-defeated { background: linear-gradient(90deg, var(--cp-gold-deep), var(--cp-gold)); } body.theme-premium .leaderboard-row { border-bottom-color: var(--cp-stroke); } body.theme-premium .leaderboard-row-me { background: rgba(232, 200, 116, .12); } body.theme-premium .leaderboard-rank { color: var(--cp-muted); } body.theme-premium .leaderboard-avatar { background: var(--cp-glass-strong); color: var(--cp-muted); } body.theme-premium .leaderboard-meta, body.theme-premium .leaderboard-title { color: var(--cp-muted); } body.theme-premium .leaderboard-xp { color: var(--cp-gold); } body.theme-premium .boss-damage-number { color: var(--cp-coral); } body.theme-premium .levelup-item { border-bottom-color: var(--cp-stroke); } body.theme-premium .levelup-avatar { background: linear-gradient(135deg, var(--cp-gold), var(--cp-gold-deep)); color: #1A1408; } body.theme-premium .levelup-meta { color: var(--cp-muted); } body.theme-premium .levelup-title { color: var(--cp-gold); } /* ---------- Icon-кнопки и выпадающее меню строки ---------- */ body.theme-premium .icon-btn { color: var(--cp-muted); } body.theme-premium .icon-btn:hover { background: var(--cp-glass-strong); color: var(--cp-text); } body.theme-premium .icon-btn.icon-btn-danger:hover { background: rgba(255,122,107,.14); color: var(--cp-coral); } body.theme-premium .icon-btn.icon-btn-success:hover { background: rgba(79,209,197,.14); color: var(--cp-teal); } body.theme-premium .row-menu-dropdown { background: var(--cp-bg-1); border: 1px solid var(--cp-stroke); box-shadow: 0 10px 32px rgba(0,0,0,.4); } body.theme-premium .row-menu-dropdown button { color: var(--cp-text); } body.theme-premium .row-menu-dropdown button svg { color: var(--cp-muted); } body.theme-premium .row-menu-dropdown button:hover { background: var(--cp-glass-strong); } /* ---------- Trade-in: группы критериев осмотра ---------- */ body.theme-premium .ti-criteria-group { border-color: var(--cp-stroke); background: var(--cp-glass); } body.theme-premium .ti-criteria-group-danger { border-color: rgba(255,122,107,.3); background: rgba(255,122,107,.06); } body.theme-premium .ti-criteria-group-title { color: var(--cp-text); } body.theme-premium .ti-criteria-group-title svg { color: var(--cp-muted); } body.theme-premium .ti-criteria-group-danger .ti-criteria-group-title, body.theme-premium .ti-criteria-group-danger .ti-criteria-group-title svg { color: var(--cp-coral); } body.theme-premium .ti-criteria-hint { color: var(--cp-muted); } body.theme-premium .ti-criteria-row:hover { background: var(--cp-glass-strong); } body.theme-premium .ti-criteria-group-danger .ti-criteria-row:hover { background: rgba(255,122,107,.1); } body.theme-premium .ti-criteria-amount { color: var(--cp-muted); } /* ---------- Flatpickr: тёмная тема календаря ---------- */ body.theme-premium .flatpickr-calendar { background: var(--cp-bg-1); border: 1px solid var(--cp-stroke); box-shadow: 0 10px 32px rgba(0,0,0,.4); } body.theme-premium .flatpickr-calendar.arrowTop:before, body.theme-premium .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--cp-bg-1); } body.theme-premium .flatpickr-months .flatpickr-month, body.theme-premium .flatpickr-current-month, body.theme-premium .flatpickr-current-month input.cur-year { color: var(--cp-text); fill: var(--cp-text); } body.theme-premium .flatpickr-prev-month svg, body.theme-premium .flatpickr-next-month svg { fill: var(--cp-muted); } body.theme-premium .flatpickr-weekday { color: var(--cp-muted); background: transparent; } body.theme-premium .flatpickr-day { color: var(--cp-text); } body.theme-premium .flatpickr-day.flatpickr-disabled, body.theme-premium .flatpickr-day.prevMonthDay, body.theme-premium .flatpickr-day.nextMonthDay { color: var(--cp-muted); opacity: .5; } body.theme-premium .flatpickr-day:hover { background: var(--cp-glass-strong); border-color: var(--cp-glass-strong); } body.theme-premium .flatpickr-day.today { border-color: var(--cp-gold); } body.theme-premium .flatpickr-day.selected { background: var(--cp-gold); border-color: var(--cp-gold); color: #1A1408; } /* ---------- Дни рождения на Главной ---------- */ body.theme-premium .upcoming-birthdays, body.theme-premium .upcoming-item { color: var(--cp-text); } body.theme-premium .upcoming-title { color: var(--cp-muted); } body.theme-premium .upcoming-days { color: var(--cp-gold); font-weight: 800; } /* ---------- База знаний: боковая панель разделов ---------- */ body.theme-premium .kb-sidebar { background: var(--cp-glass); border: 1px solid var(--cp-stroke); border-radius: var(--cp-radius); color: var(--cp-text); } body.theme-premium .kb-sidebar-title { color: var(--cp-muted); } body.theme-premium .kb-nav-item { color: var(--cp-text); border-radius: 10px; } body.theme-premium .kb-nav-item:hover { background: var(--cp-glass-strong); } body.theme-premium .kb-nav-item.active { background: linear-gradient(90deg, rgba(232, 200, 116, .14), rgba(232, 200, 116, .03)); color: var(--cp-gold); } body.theme-premium .kb-count { color: var(--cp-muted); } /* ---------- Служебные элементы ---------- */ body.theme-premium .empty-state { color: var(--cp-muted); } body.theme-premium .breadcrumb { color: var(--cp-muted); } body.theme-premium .drop-hint { color: var(--cp-muted); } /* «.xlsx или .xls» в drop-zone */ body.theme-premium .user-chip { background: var(--cp-glass-strong); border: 1px solid var(--cp-stroke); color: var(--cp-text); border-radius: 10px; } body.theme-premium .badge.badge-blocked { background: rgba(255, 122, 107, .18); color: var(--cp-coral); } body.theme-premium .rank-badge { color: var(--cp-gold); } /* ---------- Кнопки: недостающие варианты ---------- */ body.theme-premium .btn-ghost { background: transparent; border: 1px solid var(--cp-stroke); color: #C4CBDA; border-radius: 10px; } body.theme-premium .btn-ghost:hover { background: var(--cp-glass-strong); color: var(--cp-text); } /* ============================================================ Этап 1.2 — финал стабилизации: KPI Главной и категории БЗ ============================================================ */ /* ---------- KPI-карточки на Главной ---------- */ body.theme-premium .stat-card { background: var(--cp-glass); border: 1px solid var(--cp-stroke); border-radius: var(--cp-radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--cp-text); transition: transform .2s, border-color .2s; } body.theme-premium .stat-card:hover { transform: translateY(-2px); border-color: var(--cp-stroke-gold); } body.theme-premium .stat-value { color: var(--cp-text); font-weight: 800; } body.theme-premium .stat-label { color: var(--cp-muted); } body.theme-premium .stat-sub { color: var(--cp-muted); } /* ---------- Карточки категорий Базы знаний ---------- */ body.theme-premium .kb-cat-card { background: var(--cp-glass); border: 1px solid var(--cp-stroke); border-radius: var(--cp-radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--cp-text); transition: transform .2s, border-color .2s; } body.theme-premium .kb-cat-card:hover { transform: translateY(-2px); border-color: var(--cp-stroke-gold); } body.theme-premium .kb-cat-name { color: var(--cp-text); font-weight: 800; } body.theme-premium .kb-cat-desc { color: var(--cp-muted); } body.theme-premium .kb-cat-count { color: var(--cp-muted); } /* ---------- Статья Базы знаний: шапка со сведениями и блок файлов ---------- #kb-article-view — это .card (тёмное стекло в premium), а .kb-article-info-row и .kb-files-title заданы фиксированным тёмным цветом для белого фона — на тёмном стекле карточки такой текст практически не виден. Само содержимое статьи (.kb-rendered/.kb-article-body/.kb-article-big-title) уже принудительно белое — их не трогаем. */ body.theme-premium .kb-article-info-row { color: var(--cp-muted); } body.theme-premium .kb-files-title { color: var(--cp-text); } body.theme-premium .kb-article-type-badge { color: var(--cp-text) !important; } body.theme-premium .kb-muted { color: var(--cp-muted); } /* Строка списка статей (.kb-article-row) в оригинале — БЕЛАЯ карточка (background:white из встроенного