/* ============================================================ Токены дизайн-системы TeachTrack (редизайн: app-shell + плитки) Бренд — зелёный; интерактив — индиго-акцент; нейтрали — slate. ============================================================ */ :root { /* Светлая схема нативных контролов (чекбоксы, скроллбары, date-пикеры). */ color-scheme: light; /* --- Бренд (лого, бренд-знак, брендовые CTA) --- */ --color-brand: #1e6f3f; --color-brand-strong: #16532f; /* --- Индиго-акцент: интерактив (активная навигация, первичные кнопки, «сегодня», фокус-ринги). Синий (--color-primary) остаётся за событиями-парами. --- */ --color-accent: #4f46e5; --color-accent-strong: #3730a3; --color-accent-soft: #eef2ff; /* заливка активных плашек/сегментов */ --color-on-accent: #ffffff; /* Заливка рисованных иконок (_Icons.cshtml): тинт бренда. Контур иконок — currentColor, эта переменная красит только «акварельное» пятно под ним. */ --icon-fill: #b7dfc7; /* --- Прежние семантические цвета --- */ --color-primary: #2563eb; /* синий: события-пары */ --color-danger: #ef4444; --color-warning: #f59e0b; --color-warning-soft: #f97316; --color-success: #16a34a; /* --- Нейтрали (slate 50…900) --- */ --color-bg: #f1f5f9; /* единый фон страницы и сайдбара */ --color-surface: #ffffff; /* белые плитки-карточки поверх фона */ --color-surface-alt: #f8fafc; --color-surface-muted: #f1f5f9; --color-border: #cbd5e1; --color-border-soft: #e2e8f0; --color-text: #1e293b; --color-text-secondary: #475569; --color-text-muted: #64748b; /* --- Статусы событий/бейджей (амбер-гамма и др.) --- */ --color-status-doc-bg: #faeeda; /* «нужен документ» — сплошной фон */ --color-status-doc-text: #633806; --color-status-doc-border: #ba7517; --color-status-ok-bg: #e0f2e9; /* принято */ --color-status-ok-text: #1e6f3f; --color-status-checking-bg: #ffedd5; /* на проверке */ --color-status-checking-text: #9a3412; /* Отчётный период: полупрозрачная ТОЛЬКО заливка дней (события поверх читаемы); бейдж периода — сплошной (см. --color-status-doc-*). */ --color-report-period-fill: rgba(186, 117, 23, 0.08); /* --- Типографика --- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-size-body: 14px; --font-size-caption: 12px; --font-size-title: 16px; /* --- Скругления: карточки 16px, контролы 10px --- */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-card: 16px; --radius-xl: 16px; --radius-2xl: 16px; --radius-pill: 40px; /* --- Отступы --- */ --pad-sm: 8px; --pad-md: 12px; --pad-lg: 16px; --pad-xl: 24px; --gap-sm: 8px; --gap-md: 12px; --gap-lg: 16px; /* --- Тени (мягкие, для плиток поверх единого фона) --- */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.16); } /* ============================================================ Тёмная тема. Реализована целиком через переопределение токенов — компоненты уже используют переменные, поэтому хардкоды цвета не трогаем. Атрибут data-theme="dark" ставит settings.ts (и анти-мигание в ); «системная» тема разрешается в конкретный dark/light в скрипте. ============================================================ */ :root[data-theme="dark"] { /* Тёмная схема нативных контролов: чекбоксы/радио/скроллбары/date-пикеры становятся тёмными без ручной стилизации (фон чекбоксов «как у полей»). */ color-scheme: dark; /* Референс — тёмная тема Claude Code: почти чёрный фон, чуть светлее панели, фиолетовый акцент. Нейтральные серые (без синевы). */ --color-accent: #6d5ef2; /* фиолетовый акцент (ярче для тёмного фона) */ --color-accent-strong: #c9bffb; /* текст на активных плашках — светлый фиолетовый */ --color-accent-soft: #2d2a3f; /* заливка активных плашек/сегментов */ --icon-fill: #37463c; /* приглушённый бренд-тинт под иконками */ --color-bg: #1a1a1b; /* основной фон (почти чёрный) */ --color-surface: #232326; /* карточки/панели — чуть светлее фона */ --color-surface-alt: #2a2a2c; --color-surface-muted: #303033; /* шапки таблиц, hover */ --color-border: #3a3a3d; --color-border-soft: #2e2e31; --color-text: #ededee; --color-text-secondary: #bcbcc0; --color-text-muted: #8a8a8f; /* Приглушаем полупрозрачные статус-заливки, чтобы не светились на тёмном. */ --color-report-period-fill: rgba(186, 117, 23, 0.14); /* Статус-токены: пастельные заливки → тёмные тинты, текст — светлее. */ --color-status-doc-bg: #3a3320; --color-status-doc-text: #e6c079; --color-status-doc-border: #ba7517; --color-status-ok-bg: #1e3327; --color-status-ok-text: #7dd3a0; --color-status-checking-bg: #382c1c; --color-status-checking-text: #e3a066; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.6); --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.7); } /* ============================================================ Тёмная тема: семантические плашки с литеральными цветами (не через токены). Отдельные правила — чтобы НЕ менять светлую тему. Пастельные фоны → тёмные тинты, цветной текст → светлее для контраста; цветные левые полосы сохраняем. ============================================================ */ /* Поля ввода: светло-серый фон (светлее карточек), чтобы поля читались на тёмном. */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="time"], :root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .form-group input, :root[data-theme="dark"] .form-group select { background: var(--color-surface-muted); border-color: var(--color-border); } /* События */ :root[data-theme="dark"] .event-university, :root[data-theme="dark"] .my-event.event-university { background: #3a2323; color: #f0b4b4; } :root[data-theme="dark"] .event-plan { background: #253019; } :root[data-theme="dark"] .event-pending { background: #302f1e; } :root[data-theme="dark"] .event-checking { background: #382c1c; } :root[data-theme="dark"] .status-doc-required { background: #3a3320; color: #e6c079; } :root[data-theme="dark"] .status-checking { background: #382c1c; color: #e3a066; } :root[data-theme="dark"] .status-approved { background: #1e3327; color: #7dd3a0; } :root[data-theme="dark"] .rec-event:hover { background: #33291c; } :root[data-theme="dark"] .rec-event-title { color: #9db8f0; } :root[data-theme="dark"] .rec-event-date { color: #7dd3a0; } :root[data-theme="dark"] .rec-event-link { color: #7aa2f7; } /* Календарь: элементы дневной сводки */ :root[data-theme="dark"] .dp-item.ev-lesson { background: #1e2a38; } :root[data-theme="dark"] .dp-item.ev-plan { background: #253019; } :root[data-theme="dark"] .dp-item.ev-university { background: #3a2323; } /* Группы: бейджи роли */ :root[data-theme="dark"] .group-role-curator { background: #1e3327; color: #7dd3a0; } :root[data-theme="dark"] .group-role-mentor { background: #2a2a45; color: #b9aefb; } /* Пользователи (админка): бейджи ролей — тёмные тинты вместо светлых пилюль */ :root[data-theme="dark"] .sr-badge { background: #2a2a45; color: #b9aefb; } :root[data-theme="dark"] .sr-badge.mentor { background: #1e3327; color: #7dd3a0; } :root[data-theme="dark"] .sr-badge.curator { background: #3a3320; color: #e6c079; } :root[data-theme="dark"] .sr-badge.assigned { background: #303033; color: #c3c3c6; } /* Пользователи (админка): строки поиска, сегменты ролей, границы панелей */ :root[data-theme="dark"] .search-results { border-color: var(--color-border-soft); } :root[data-theme="dark"] .search-row { border-top-color: var(--color-border-soft); } :root[data-theme="dark"] .search-row:hover { background: var(--color-surface-muted); } :root[data-theme="dark"] .search-row.selected { background: var(--color-accent-soft); } :root[data-theme="dark"] .sr-rest { border-left-color: var(--color-border-soft); } :root[data-theme="dark"] .search-filters input, :root[data-theme="dark"] .search-filters select { border-color: var(--color-border); } :root[data-theme="dark"] .role-seg span { background: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-border); } :root[data-theme="dark"] .role-seg:hover span { background: var(--color-surface-muted); border-color: var(--color-border); }