/* ── LMS design system — тёмная минималистичная тема ───────────── */ /* Inter (variable, кириллица) — самохостинг, без внешних CDN */ @font-face { font-family: 'Inter'; src: url('../fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/InterVariable-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ── Палитра ─────────────────────────────────────────────────────── ВСЕ цвета интерфейса живут в этих переменных. Администратор может переопределить любую из них (Настройки → Система → Цвета): значения приходят с сервера и ставятся инлайном на (см. frontend/js/theme.js). Поэтому: • новый компонент красим ТОЛЬКО через var(--…) — иначе он не подхватит палитру; • полупрозрачные оттенки акцента/красного — через color-mix(... var(--accent) N%, transparent), а не rgba() с числами (иначе останутся зелёными при смене акцента); • --on-accent / --accent-hover / --on-accent-dim / --tb-on-accent — ПРОИЗВОДНЫЕ: theme.js пересчитывает их от акцента (контрастный текст на кнопке, ховер). Значения ниже — дефолт на случай, если JS ещё не отработал. */ :root { color-scheme: dark; /* нативные контролы (дата, селект, автозаполнение) — тёмные */ --bg: #0a0a0a; --surface: #111; --surface-2: #161616; --border: #222; --border-2: #2c2c2c; --text: #e8e8e8; --text-dim: #a0a0a0; --muted: #757575; /* было #555 — не проходило контраст WCAG AA на тёмном фоне */ --accent: #6ee7b7; --accent-dim: #2f6f59; --danger: #f87171; --warn: #fbbf24; /* Индикация оценки/балла (низкий→средний→высокий). НЕ часть настраиваемой палитры школы: это сигнальные цвета «плохо/средне/хорошо», одинаковые при любой цветовой схеме, поэтому их нет в theme.js/theme.py и редактор цветов их не трогает. */ --grade-good: #34d399; --slot-done: #74ba6d; /* таблетка прошедшего слота в расписании админа (макет) */ --online-dot: #23fd02; /* точка «в сети» — яркий сигнал с макета, вне палитры школы */ --grade-mid: #fbbf24; --grade-low: #f87171; /* Отмеченный рабочий час / свободное окно преподавателя — ОДИН оттенок везде, где этот час отмечают и где его смотрят (редактор часов, сетка расписания, образец в пояснении ученику). ⚠️ Не 20% от --grade-good: полупрозрачный изумруд поверх серого фона уходил в серо-оливковый («милитари» — жалоба владельца продукта). Сочность даёт насыщенная основа, а не бóльшая доля: ярче ~40% клетка начинает спорить с чипом «Проведён». */ --work-fill: color-mix(in srgb, #00dc82 24%, transparent); --work-fill-hover: color-mix(in srgb, #00dc82 30%, transparent); /* Окна сторон в сетке лобби класса (решение владельца продукта): преподавателя — оранжевые, ученика — серые, совпавшие — две половины встык по диагонали клетки (серая сверху слева, оранжевая снизу справа; без градиента — ровный срез). `to bottom right`, а не угол в градусах: срез идёт ровно из угла в угол при любой пропорции клетки. Тем же серым отмечается час в квизе «Когда вам удобно заниматься?»: это те же окна ученика. Сигнал, а не оформление: как --work-fill, вне палитры школы. В светлой теме — свои пастельные значения (см. :root[data-theme="light"]), сочные выбивались на белой сетке. */ --win-teacher: #df7701; --win-student: #787878; --win-both: linear-gradient(to bottom right, var(--win-student) 50%, var(--win-teacher) 50%); /* Шильдики совпадений на карточке витрины («Общие окна», «Общие интересы»; макет владельца продукта). Пара из перелива язычка «открыть»: фуксия и тёплый тон, но темнее палитры liquid.js — белый текст мелкого шильдика обязан держать контраст (фуксия 6.0:1; тёплый край 4.1:1 лежит в поле пилюли, а под первой буквой градиент уже ≥4.6:1; у яркого #e8703f было бы ≈3:1). Подпись белая в обеих темах, поэтому и цвета одни и те же: на белой подложке шильдик читается так же, как на тёмной. Вне палитры школы — это фирменная пара, а не акцент. */ --match-pink: #b32c67; --match-warm: #a8724b; /* Шапка класса у админа (макет владельца продукта, цвета сняты пипеткой): точка присутствия на аватаре — на платформе / нет, и пилюля «Заменить учителя». Чистые сигнальные цвета, одни на обе темы: точка лежит в своём кольце цвета поверхности, а белая подпись на красном читается и на светлой подложке. */ --presence-on: #05fd03; /* Текст поверх яркой заливки (выбранный инициатор отмены, кнопка «Отменить урок»): заливки в обеих темах одинаковые, значит и текст один. */ --on-presence: #062b06; --on-danger: #fff; --presence-off: #ff0000; --teacher-replace: #ff0000; /* Шкала этапов кандидата в «Отборе персонала» (макет владельца, пипеткой): этап пройден / не пройден / идёт сейчас / впереди — он же цвет линии между точками. Пункты анкеты под шкалой — те же цвета: заполнено и отправлено / не заполнено / заполнено в черновике. */ --stage-done: #01fc1a; --stage-fail: #dc0102; --stage-now: #0085ff; --stage-todo: #d9d9d9; /* Производные от акцента (пересчитываются в theme.js) */ --on-accent: #04150f; /* текст/иконка на акцентной кнопке */ --accent-hover: #8af3c9; /* акцентная кнопка под курсором */ --on-accent-dim: #eafff6; /* текст на приглушённом акценте (свои сообщения в чате) */ --tb-on-accent: #04150f; /* текст на акценте в шапке (бейдж непрочитанных) */ /* ── Дочерние токены (гибкая палитра) ──────────────────────────── Настраиваемые дети (строки «Тонкой настройки» в редакторе) по умолчанию НАСЛЕДУЮТ цвет родителя (var(--parent)), поэтому «из коробки» повторяют мастер-акцент/красный — вид не меняется. Админ может задать любому свой цвет (Настройки → Система → Цвета): theme.js впишет его инлайном на и перекроет это правило. Зеркало наследования — INHERITS в frontend/js/theme.js. НОВЫЙ дочерний токен: добавь сюда, в DETAIL_GROUPS/ INHERITS (theme.js) и в TOKENS (backend/app/theme.py). */ --accent-text: var(--accent); /* акцентный текст, ссылки, числа, баланс */ --accent-border: var(--accent-dim); /* рамки при наведении, кольцо фокуса */ --btn-primary: var(--accent); /* заливка основных кнопок */ --badge-accent: var(--accent); /* акцентные бейджи и чипы */ --chat-mine: var(--accent-dim); /* фон своих сообщений в чате */ --correct: var(--accent); /* правильный ответ */ /* Шапка недельной сетки (Пн, Вт, Ср…) — отдельная группа «Расписание» в редакторе. Дата и сегодняшний день — НЕ токены, а производные: их пересчитывает theme.js (derive), здесь только значения до первого запуска скрипта (= прежний вид). */ --sched-head-bg: var(--surface-2); /* фон полосы дней */ --sched-head-text: var(--text-dim); /* название дня */ --sched-head-date: var(--muted); /* дата под днём */ --sched-head-today: var(--text); /* сегодняшний день (и подкраска его ячейки) */ --sched-frame: var(--surface); /* рамка сетки (токен; «как карточка» = рамки нет) */ --sched-frame-line: transparent; /* чем рамка РИСУЕТСЯ — производная, см. derive() */ --sched-grid: var(--surface-2); /* линии между днями и часами */ /* ⚠️ Включённый тумблер — ВСЕГДА зелёный, независимо от палитры школы (как индикация оценки и рабочие часы): «вкл» — сигнал состояния. Не в theme.js/theme.py. */ --toggle-on: var(--grade-good); /* включённый тумблер (фон дорожки) */ /* Подпись включённого канала уведомлений в «Мой профиль» («E-mail уведомления подключены»). Цвет — с макета владельца продукта; тоже сигнал, вне палитры школы. На тёмной кнопке окна — 5.2:1 (WCAG AA); в светлой теме свой, темнее. */ --notify-on: #249f2d; /* Искра в заголовке окна генерации урока — золото с макета владельца продукта (пипеткой #f1dd82). Значок, а не текст: в светлой теме свой, темнее (4.7:1). */ --ai-sparkle: #f1dd82; /* Статусы домашней работы (views/homework.js) — заливки с макета владельца продукта, сняты пипеткой. ⚠️ Одни на обе темы, как чипы расписания: это сигналы состояния, а не оформление, в палитру школы не входят (theme.js/theme.py их не знают). */ --hw-draft: #a9a9a9; --hw-draft-fg: #2b2b2b; /* Черновик */ --hw-sent: #00a7ff; --hw-sent-fg: #ffffff; /* Отправлено / На выполнении */ --hw-check: #ff47e3; --hw-check-fg: #ffffff; /* На проверке */ --hw-back: #ff9500; --hw-back-fg: #ffffff; /* На доработке (на макете нет — оранжевый «вернули») */ --hw-ok: #00e131; --hw-ok-fg: #0b2e10; /* Принято */ --hw-accept: #41e94f; --hw-accept-fg: #000000; /* кнопка «Принять работу» */ /* ── ВНУТРЕННИЕ АЛИАСЫ (НЕ токены, в редакторе не настраиваются) ── Бывшие самостоятельные токены — дубли рубильников (--selected ≈ акцентный текст, --wrong/--btn-danger ≈ --danger, --progress ≈ бейджи, --tb-muted ≈ --tb-text-dim). Слиты с родителями; все 60+ использований var(--…) в стилях работают как раньше. Из палитры убраны: theme.js (THEME_GROUPS/INHERITS), theme.py (TOKENS), старые правки школ снимает RETIRED_VARS (theme.js). Новый слитый токен — по той же схеме. */ --selected: var(--accent-text); /* активные вкладки, выбранные пункты */ --btn-danger: var(--danger); /* кнопки удаления/опасных действий */ --progress: var(--badge-accent); /* полосы прогресса, загрузка */ --wrong: var(--danger); /* неверный ответ */ /* ── Чипы расписания ───────────────────────────────────────────── СПЛОШНАЯ заливка статуса + БЕЛЫЙ текст, без рамок: статус урока читается цветом с одного взгляда (решение владельца продукта). ⚠️ Заливки ОДНИ на обе темы (в отличие от --grade-*): это сигналы, а не оформление, и светлая пастель под белым текстом нечитаема в любой теме. Каждый цвет подобран ЗАМЕРОМ — самый светлый своего оттенка, на котором белый текст ещё проходит WCAG AA (4.5:1). ⚠️ Три цвета из четырёх ФИКСИРОВАНЫ и не входят в палитру школы — как индикация оценки (--grade-*) и рабочие часы: «состоялся», «предстоит» и «пробный» — это сигналы, а не оформление. Их нет в theme.js/theme.py, редактор цветов их не трогает. Настраивается только «неявка» (--noshow) — школьная правка проходит через --lesson-noshow. */ --lesson-done: #168665; /* проведённый урок — ВСЕГДА зелёный */ --diamond-ring: var(--accent); /* заполнение кольца «Мои алмазы»; в светлой — свой зелёный */ --lesson-upcoming: #297db1; /* предстоящий урок — ВСЕГДА голубой */ --lesson-demo: #da2b83; /* пробный урок — ВСЕГДА розовый */ --lesson-nobal: #9a56d5; /* «нет баланса» */ --noshow: var(--danger); /* неявка — единственный настраиваемый чип */ /* ⚠️ Заливка «неявки» — приглушённый --noshow, а не он сам: красный по умолчанию (#f87171) светлый, и белый текст на нём давал бы контраст 2.8:1. Через color-mix школьная правка цвета продолжает работать, но не может сделать подпись нечитаемой. */ --lesson-noshow: color-mix(in srgb, var(--noshow) 76%, #000); /* ⚠️ Яркие варианты ТЕХ ЖЕ статусов — ДЛЯ ТЕКСТА, не для заливки. Токены выше подобраны как ФОН под белый текст (самые светлые, где белый ещё проходит AA), и ровно поэтому как текст на тёмной поверхности они выглядят тусклыми — «синий „Запланирован“ слишком тусклый» (жалоба владельца продукта). В светлой теме переопределяются обратно на базовые: там «ярче» означало бы нечитаемо на белом. */ --lesson-upcoming-fg: #5aa9e6; --lesson-done-fg: #2fc79a; --lesson-nobal-fg: #b98ae8; /* Производные для дочерних заливок (theme.js пересчитывает, если задан свой цвет) */ --on-btn-primary: var(--on-accent); --btn-primary-hover: var(--accent-hover); --on-chat-mine: var(--on-accent-dim); /* Шапка (топбар) — своя группа: по умолчанию тёмная в обеих темах */ --tb-bg: #0d0d0d; --tb-text: #e8e8e8; --tb-text-dim: #a0a0a0; --tb-accent: #6ee7b7; --tb-surface-2: #1c1c1c; /* --tb-muted (роль пользователя, стрелка меню) слит с --tb-text-dim: два уровня приглушённого текста в шапке не читались как разные. Алиас — см. блок алиасов выше. */ --tb-muted: var(--tb-text-dim); --radius: 14px; --radius-sm: 9px; --shadow: 0 8px 30px rgba(0,0,0,.4); /* Тень карточек главной: сетка недели, панель часов над ней, виджеты, кокпит. ⚠️ ОДНА на всех (решение владельца продукта «всему одинаковую тень»): раньше у сетки была своя, вдвое плотнее, а виджеты стояли почти плоскими — колонки не читались как одна страница. Это прежняя тень сетки с прозрачностью ровно вдвое меньше. Светлой теме отдельное значение не нужно: чёрная тень одинаково работает на обоих фонах. 2026-10-20: плотность дважды +20% (.025→.03→.036, .2→.24→.288) — в светлой теме блоки сливались с фоном. Это ЕДИНСТВЕННЫЙ рычаг тени карточек: новая карточка берёт этот токен (через список ниже или напрямую), а не свою тень. */ --card-shadow: 0 1px 2px rgba(0,0,0,.036), 0 16px 34px -22px rgba(0,0,0,.288); --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ── Светлая тема ────────────────────────────────────────────────── Переключается атрибутом data-theme="light" на (см. app.js + index.html). Тёмная тема — значения по умолчанию выше; здесь только переопределения палитры. Переменные шапки (--tb-*) НЕ переопределяются — шапка остаётся тёмной, пока администратор не задаст ей свои цвета. Точечные правки под захардкоженные цвета — в конце файла (блок «Светлая тема — точечно»). */ :root[data-theme="light"] { color-scheme: light; /* Окна сторон в светлой теме — ПАСТЕЛЬНЫЕ (правка владельца продукта 2026-10-20): сочные #df7701 / #787878 на белой сетке расписания класса «слишком выбивались». Тёмная тема остаётся при прежних сигнальных тонах. --win-both собран из этих двух и меняется сам. */ --win-teacher: #eea357; /* 2026-10-20: пастель #f4b67c/#c4c4c4 вышла тусклой — на 30% назад к сочным */ --win-student: #adadad; --stage-done: #15803d; --stage-fail: #dc2626; --stage-now: #0a6ad6; --stage-todo: #a3aaa7; /* нативные контролы (дата, селект, автозаполнение, скроллбар) — светлые */ --bg: #ebebeb; --surface: #ffffff; --surface-2: #e9ecea; --border: #dadedc; --border-2: #cad0cd; --text: #14201b; --text-dim: #4f5b56; --muted: #66716b; /* проходит контраст WCAG AA на белом */ --accent: #047857; /* глубокий изумруд — читается и как текст, и как фон кнопки */ --accent-dim: #35b98a; /* средний изумруд — рамки, фокус-кольцо, «вкл» тумблера */ --danger: #dc2626; --warn: #b45309; /* Индикация оценки — читаемые на белом варианты (не из палитры школы, см. :root выше) */ --grade-good: #059669; --online-dot: #16c60a; --grade-mid: #b45309; --grade-low: #dc2626; /* Зелёный с макета на белом даёт 3.4:1 — темнее, чтобы подпись читалась (5.6:1). */ --notify-on: #166b1e; --ai-sparkle: #9a6b00; /* Свободное окно на белом — свежая мята, а не серо-зелёный (см. :root). */ --work-fill: color-mix(in srgb, #00c878 19%, transparent); --work-fill-hover: color-mix(in srgb, #00c878 25%, transparent); /* ⚠️ Статус-текст в светлой теме НЕ осветляем: базовые --lesson-* и так читаются на белом, а «яркие» варианты из :root дали бы контраст ниже 3:1. */ --lesson-upcoming-fg: var(--lesson-upcoming); --lesson-done-fg: var(--lesson-done); /* Кольцо алмазов — сочный зелёный (правка владельца продукта): акцент светлой темы чёрный, и кольцо читалось траурной обводкой, а не «копится». */ --diamond-ring: #1ec74f; --lesson-nobal-fg: var(--lesson-nobal); --on-accent: #ffffff; /* на тёмно-изумрудной кнопке текст белый */ --accent-hover: #059669; --on-accent-dim: #0f3b2c; --shadow: 0 10px 34px rgba(20,50,40,.12); } /* ── Плавная смена темы ──────────────────────────────────────────── Тёмная и светлая ПЕРЕТЕКАЮТ друг в друга: браузер снимает кадр старой темы, app.js мгновенно перекрашивает страницу под ним, и старый кадр растворяется за --theme-fade (View Transitions API, класс .theme-swap ставит applyTheme). ⚠️ Кросс-фейд снимка, а НЕ transition на каждом элементе: при смене ТОЛЬКО css-переменной свойство с transition, читающее var(), в Chromium застревает на старом цвете — ровно поэтому applyTheme() глушит переходы на время свопа. ⚠️ mix-blend-mode: normal вместо стандартного plus-lighter: тот СКЛАДЫВАЕТ яркости двух кадров, и на переходе «тёмная ↔ светлая» середина вспыхивает белым — то самое «бьёт по глазам», от которого мы уходим. Старый кадр лежит сверху (z-index) и просто тает над уже готовой новой темой. ⚠️ prefers-reduced-motion этот фейд НЕ гасит — движения в нём нет, а у владельца «Уменьшение движения» на телефоне включено (см. app.js). ⚠️ Кривая — симметричная (cubic-bezier .45,0,.55,1), а НЕ стандартная `ease`: та срывается с места быстро и гасит бо́льшую часть старого кадра в первую треть — на длинном фейде это читается как рывок в начале и вялый хвост. Симметричная трогается мягко, основную работу делает в середине и так же мягко доводит до конца. ⚠️ Цена длинного фейда: пока он идёт, сверху лежит ЗАМОРОЖЕННЫЙ кадр старой темы, и всё, что появилось под ним за это время (тост, новое сообщение, спиннер), человек увидит только после. Клики при этом проходят насквозь (pointer-events: none), то есть работать интерфейсу фейд не мешает — но дальше растягивать длительность уже не стоит. */ :root { --theme-fade: 1.8s; /* длительность фейда — единственное место, где она задана */ --theme-ease: cubic-bezier(.45, 0, .55, 1); } /* её же читает переход «из темноты» (ui.js veilUp) */ :root.theme-swap::view-transition { pointer-events: none; } /* клик проходит на живую страницу */ :root.theme-swap::view-transition-old(root), :root.theme-swap::view-transition-new(root) { mix-blend-mode: normal; } :root.theme-swap::view-transition-new(root) { animation: none; } /* новая тема уже готова — просто лежит снизу */ :root.theme-swap::view-transition-old(root) { z-index: 1; animation: theme-dissolve var(--theme-fade) var(--theme-ease) both; } @keyframes theme-dissolve { from { opacity: 1 } to { opacity: 0 } } /* Шторка перехода «из темноты» (анкета → витрина, ui.js veilDown/veilUp). Цвет — фон уходящего (всегда тёмного) экрана: JS замораживает его при затемнении, потому что под шторкой тема сменится. Прозрачность ведёт WAAPI; без него — чёрный экран и резкое появление. */ .screen-veil { position: fixed; inset: 0; z-index: 2000; background: var(--bg); opacity: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font); /* лёгкое «свечение» сверху — глубина вместо плоского чёрного */ background: radial-gradient(1100px 480px at 50% -12%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; /* режем горизонтальный выход, НЕ делая body скролл-контейнером (overflow-x:hidden + height:100% сломал бы window-скролл) */ max-width: 100%; } .hidden { display: none !important; } a { color: inherit; text-decoration: none; } /* ── Телефон/планшет: страница не должна вести себя как обычный сайт ────────── Платформу открывают с телефона как приложение, а браузер по умолчанию даёт ей «сайтовые» жесты — и они мешают работе: 1) ДВОЙНОЙ ТАП зумит страницу. На уроке тапают часто и быстро (упражнения, слова, кнопки чата), и случайный двойной тап масштабировал вёрстку — после чего экран «съезжает» и его надо возвращать пальцами. `manipulation` убирает ТОЛЬКО двойной тап-зум: прокрутка и пинч (доступность, и на iOS его всё равно не отключить) остаются. Элементы со своим `touch-action: none` (холст доски, ползунки, перетаскивание) строже — их это правило не ослабляет. 2) АВТОЗУМ ПРИ ФОКУСЕ: iOS увеличивает страницу, если у поля шрифт мельче 16px. Общий «пол» в 16px уже стоит ниже (@media max-width:760px), но телефон в АЛЬБОМНОЙ ориентации и планшет шире 760px — там поля снова мельчали, и ввод текста зумил вёрстку. Признак «палец без курсора» точнее ширины: он ловит и альбомную ориентацию, и планшет, и не трогает ПК с мышью. */ @media (pointer: coarse) and (hover: none) { body { touch-action: manipulation; } .input, .textarea, .select, input, textarea, select, .rt-edit { font-size: 16px !important; } } /* ── Глобальная полировка ─────────────────────────────────────── */ ::selection { background: var(--accent-dim); color: var(--on-accent-dim); } /* Тёмные тонкие скроллбары (системные светлые на Windows ломают тему) */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2px solid var(--bg); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: #3d3d3d; } /* Видимый фокус только с клавиатуры (Tab) — доступность без «рамок» при кликах */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; border-radius: var(--radius-sm); } /* Единые SVG-иконки (icons.js) — вместо эмодзи, одинаковы на всех ОС */ .ico { display: inline-flex; flex: 0 0 auto; } .ico svg { width: 16px; height: 16px; display: block; } .btn > svg, .icon-btn > svg { width: 15px; height: 15px; flex: 0 0 auto; } .btn-sm > svg { width: 14px; height: 14px; } .crm-col-menu, .cf-del, .cf-manage, .chat-attach, .fm-crumb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .crm-col-menu svg, .cf-del svg, .cf-manage svg, .chat-attach svg, .fm-crumb svg { width: 15px; height: 15px; flex: 0 0 auto; } /* ── Топбар ────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; /* Цвета шапки — своя группа переменных (--tb-*, объявлены в :root): по умолчанию шапка тёмная в обеих темах, но администратор может перекрасить её отдельно от остального UI. */ background: var(--tb-bg); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: transform .25s ease; } .topbar.tb-hidden { transform: translateY(-100%); } /* авто-скрытие при прокрутке вниз (мобиле) */ body.room-view .topbar { display: none; } /* в комнате класса топбар не нужен (есть «✕ Выйти») */ body.board-view .topbar { display: none; } /* доска — полноэкранная, свой топбар */ .topbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 54px; display: flex; align-items: center; gap: 18px; } .brand { font-size: 1.3em; font-weight: 300; letter-spacing: 4px; color: var(--tb-text); flex: 0 0 auto; } /* nav: при тесноте скроллится горизонтально, не выдавливая правую часть */ .nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { display: inline-flex; align-items: center; white-space: nowrap; flex: 0 0 auto; padding: 8px 13px; border-radius: var(--radius-sm); font-size: .9em; color: var(--tb-text-dim); transition: background .15s, color .15s; } .nav a:hover { color: var(--tb-text); background: var(--tb-surface-2); } .nav a.active { color: var(--tb-accent); background: var(--tb-surface-2); } /* Контейнер меню со стрелками прокрутки (когда не влезает) */ .nav-scroll { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .nav-scroll .nav { flex: 1 1 auto; } .nav-arrow { position: absolute; top: 0; bottom: 0; width: 34px; z-index: 6; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: none; color: var(--tb-text); font-size: 1.4em; line-height: 1; } .nav-arrow-l { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--tb-bg) 55%, transparent); } .nav-arrow-r { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--tb-bg) 55%, transparent); } .nav-arrow:hover { color: var(--tb-accent); } .topbar-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; position: relative; } .who { display: flex; align-items: center; gap: 9px; font-size: .82em; color: var(--tb-muted); white-space: nowrap; } .who b { color: var(--tb-text-dim); font-weight: 500; } .who-btn { cursor: pointer; border-radius: 99px; padding: 3px 9px 3px 3px; transition: background .15s; } .who-btn:hover, .who-btn.open { background: var(--tb-surface-2); } .who-btn:hover .who-text b, .who-btn.open .who-text b { color: var(--tb-accent); } .who-caret { display: inline-flex; align-items: center; color: var(--tb-muted); font-size: .9em; transition: color .15s, transform .2s ease; } .who-btn:hover .who-caret, .who-btn.open .who-caret { color: var(--tb-accent); } .who-btn.open .who-caret { transform: rotate(180deg); } /* Выпадающее меню профиля (настройки + выход) */ .who-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .who-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text-dim); font-family: var(--font); font-size: .9em; padding: 9px 11px; border-radius: var(--radius-sm); transition: background .12s, color .12s; } .who-menu-item:hover { background: var(--surface-2); color: var(--text); } .who-menu-item.danger:hover { color: var(--danger); } .who-menu-ico { display: inline-flex; align-items: center; color: var(--muted); } .who-menu-item:hover .who-menu-ico { color: inherit; } /* Переключатель темы (солнце/луна) в меню профиля */ .who-menu-sep { height: 1px; background: var(--border); margin: 4px 3px; } .who-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 11px 8px; } .who-theme-label { font-size: .86em; color: var(--text-dim); } .theme-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 99px; } .theme-seg-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 27px; border: none; background: none; border-radius: 99px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .theme-seg-btn svg { width: 15px; height: 15px; display: block; } .theme-seg-btn:hover { color: var(--text); } .theme-seg-btn.active { background: color-mix(in srgb, var(--selected) 16%, transparent); color: var(--selected); } /* Отдельная иконка выхода в шапке свёрнута в меню профиля */ .topbar-logout { display: none; } .avatar.topbar-avatar { width: 30px; height: 30px; font-size: .82em; } /* Статус учителя «Premium»: маленькая чёрная таблетка (ui.premiumBadge). Чёрная в ОБЕИХ темах — это знак статуса, а не цвет интерфейса; на тёмном фоне её держит тонкая рамка. Подсказка — плавающий .premium-tip в body (см. ui.js, почему не ::after). */ :root { --premium-bg: #000; --premium-text: #fff; --premium-border: rgba(255,255,255,.22); } .premium-pill { display: inline-flex; align-items: center; flex: 0 0 auto; align-self: flex-start; height: 13px; padding: 0 5px; border-radius: 99px; background: var(--premium-bg); color: var(--premium-text); border: 1px solid var(--premium-border); font-size: 8px; font-weight: 600; letter-spacing: .06em; line-height: 1; white-space: nowrap; cursor: default; } .premium-tip { position: fixed; z-index: 1000; padding: 6px 10px; border-radius: 8px; background: var(--premium-bg); color: var(--premium-text); border: 1px solid var(--premium-border); font-family: var(--font); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.35); pointer-events: none; } /* Шапка: имя и таблетка — колонкой справа от аватарки; имя поднимается выше центра. */ .who-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; } .prof-hero-name .premium-pill { display: inline-flex; margin-left: 10px; vertical-align: middle; position: relative; top: -3px; } .cc-name-wrap .premium-pill { align-self: center; } .avatar.avatar-xs { width: 20px; height: 20px; font-size: .58em; } img.avatar { object-fit: cover; } /* «Мой профиль» — модалка редактирования имени/email/фото. ⚠️ .mp-photo-row, .mp-avatar и .mp-photo-actions делит с ней окно фото класса (views/classes.js) — правки шапки профиля держать на своих классах (.mp-head …). */ .mp-photo-row { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; } .mp-avatar { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--border-2); display: grid; place-items: center; font-size: 1.9em; font-weight: 600; color: var(--accent-text); overflow: hidden; } .mp-photo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } /* ⚠️ Без этого [hidden] не прячет кнопку: display у .btn перебивает атрибут */ .mp-photo-actions > [hidden], .mp-sub > [hidden] { display: none; } /* Шапка по макету владельца продукта: фото слева, имя и имейл — колонкой справа ровно на высоту фото (поля разнесены к его верху и низу), без подписей над полями. */ .mp-head { display: flex; align-items: center; gap: 20px; } .mp-head .mp-avatar { width: 96px; height: 96px; font-size: 2.1em; } /* stretch — колонка тянется до высоты фото; на телефоне поля по 16px чуть выше фото, и тогда уже фото встаёт по центру колонки (align-items выше). */ .mp-ident { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } /* Мельче обычного поля, как на макете: два поля встают в высоту фото. На телефоне всё равно 16px — правило (pointer: coarse) с !important, иначе iOS зумит при фокусе. */ .mp-ident .input { font-size: .85em; } /* Под фото: кнопка фото слева, «Сменить пароль» — справа той же строкой. */ .mp-sub { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; } .mp-sub .mp-link { margin-left: auto; } /* Тихая текстовая кнопка: «Сменить пароль», «Отвязать» */ .mp-link { background: none; border: none; padding: 4px 0; font: inherit; font-size: .85em; font-family: var(--font); color: var(--muted); cursor: pointer; transition: color .15s; } .mp-link:hover { color: var(--text); } .mp-wide { width: 100%; } /* «Анкета» — рамка с подписью в разрыве. Рамка тут разделитель группы, а не край блока. */ .mp-group { border: 1px solid var(--border-2); border-radius: var(--radius); margin: 6px 0 20px; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .mp-group > legend { margin: 0 auto; padding: 0 12px; color: var(--muted); font-size: .9em; } .mp-group .profile-info { margin-bottom: 4px; } .mp-group .btn { background: var(--bg); } .mp-group .btn:hover { background: var(--surface-2); } /* «Уведомления» — та же рамка, но строки на фоне обычной кнопки окна, а не чёрные, как «Изменить анкету» (так на макете: это переключатели состояния, а не действие). ⚠️ Правила стоят НИЖЕ .mp-group .btn — специфичность равная, побеждает нижнее. */ .mp-notify { gap: 14px; } .mp-notify .btn { background: var(--surface-2); } .mp-notify .btn:hover { background: var(--border-2); } /* Включённый канал — зелёная подпись «… уведомления подключены» (сигнал, не палитра). */ .mp-switch.on { color: var(--notify-on); } .mp-notify .mp-hint { margin: 0; } /* Бот заблокирован — плашка-предупреждение на месте переключателя: нажимать тут нечего */ .mp-tg-state { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 11px 20px; border-radius: var(--radius-sm); font-size: .9em; letter-spacing: .3px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .mp-tg-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -8px; font-size: .85em; color: var(--muted); } .mp-hint { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: .85em; line-height: 1.45; } /* Подвал: «Отмена» и «Сохранить» — две равные кнопки */ .form-actions.mp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; } /* ── Каркас страниц ───────────────────────────────────────────── */ .app { max-width: 1180px; margin: 0 auto; padding: 36px 24px 80px; } /* Плашка администратору «Боты Telegram не работают» (app.js renderBotsAlert) — над #app. */ .bots-alert { max-width: 1132px; width: calc(100% - 48px); margin: 16px auto 0; padding: 12px 16px; box-sizing: border-box; border: 1px solid var(--danger); border-radius: 10px; font-size: .9em; line-height: 1.45; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--text); } .bots-alert-title { font-weight: 600; color: var(--danger); margin-bottom: 4px; } .bots-alert-row { overflow-wrap: anywhere; } .bots-alert-note { color: var(--muted); margin-top: 6px; font-size: .92em; } @media (max-width: 760px) { .bots-alert { width: calc(100% - 32px); margin-top: 12px; } } body.room-view .bots-alert, body.board-view .bots-alert { display: none; } /* урок и доска — без плашек */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .page-title { font-size: 1.7em; font-weight: 300; letter-spacing: .5px; } .page-sub { color: var(--muted); font-size: .85em; margin-top: 4px; } .crumbs { font-size: .82em; color: var(--muted); margin-bottom: 18px; } .crumbs a:hover { color: var(--accent-text); } .crumbs span { color: var(--border-2); margin: 0 6px; } /* ── Кнопки ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--surface-2); color: var(--text); font-size: .9em; font-family: var(--font); line-height: 1.2; /* одинаковая высота у button/span/a с классом .btn */ cursor: pointer; transition: border-color .15s, background .15s, transform .1s, color .15s; letter-spacing: .3px; } .btn:hover { border-color: transparent; background: var(--border-2); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--btn-primary); color: var(--on-btn-primary); border-color: var(--btn-primary); font-weight: 600; box-shadow: 0 4px 16px color-mix(in srgb, var(--btn-primary) 18%, transparent); } .btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--on-btn-primary); box-shadow: 0 6px 22px color-mix(in srgb, var(--btn-primary) 26%, transparent); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { color: var(--btn-danger); border-color: transparent; background: transparent; } .btn-danger:hover { background: color-mix(in srgb, var(--btn-danger) 12%, transparent); border-color: transparent; } .btn-sm { padding: 7px 13px; font-size: .82em; } /* Кнопка «+ Создать…» в шапке «Материалов» — на 15% меньше обычной .btn (не .btn-sm, там разница почти 30% — крупнее, чем просили). Считано от .btn: padding 11px 20px → ×0.85 ≈ 9px 17px, font-size .9em → ×0.85 ≈ .77em. */ .btn-compact { padding: 9px 17px; font-size: .77em; } .btn:disabled { opacity: .4; cursor: not-allowed; } /* ── Карточки / сетки ─────────────────────────────────────────── */ .grid { display: grid; gap: 18px; } .grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 22px; transition: border-color .18s, transform .18s, background .18s; } .card.clickable { cursor: pointer; } .card.clickable:hover { border-color: var(--accent-border); transform: translateY(-3px); background: var(--surface-2); } .card-title { font-size: 1.1em; font-weight: 400; color: var(--text); margin-bottom: 8px; } .card-desc { font-size: .85em; color: var(--text-dim); margin-bottom: 16px; min-height: 2.4em; } .card-meta { display: flex; gap: 16px; font-size: .78em; color: var(--muted); border-top: 1px solid var(--border); padding-top: 14px; } .card-meta b { color: var(--accent-text); font-weight: 600; } /* ── Списки строками ──────────────────────────────────────────── */ .list { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 14px 18px; transition: border-color .15s, background .15s; } .row.clickable { cursor: pointer; } .row.clickable:hover { border-color: var(--accent-border); background: var(--surface-2); } /* ⚠️ Вложенная поверхность на тон светлее. У .card/.row фон — var(--surface), тот же, что у .card и .modal, и раньше их разделяла ТОЛЬКО рамка: без неё строка внутри модалки слилась бы с ней в один прямоугольник. */ .card .card, .card .row, .modal .card, .modal .row { background: var(--surface-2); } /* ── Тень карточек — ОДНА на всю платформу ─────────────────────── ⚠️ Решение владельца продукта: «везде в ЛМС» у карточек и блоков, лежащих на фоне страницы, одна и та же тень `--card-shadow` (см. :root). Раньше она была только на главной — материалы, класс, настройки, чат, CRM стояли плоскими рядом с ней. Здесь — СПИСОК таких блоков: новая карточка-блок на фоне страницы — дописать сюда. Карточки главной (.tdash-stat, .ck-card, .sched-wrap…) берут тот же токен в своих правилах. ⚠️ `:where()` — нулевая специфичность нарочно: любое правило компонента со своей тенью (подъём при перетаскивании, доска на весь экран, выделение) перекрывает общую без `!important` и без оглядки на порядок в файле. Вложенные (карточка в карточке, строка в модалке) — ПЛОСКИЕ: они на тон светлее (см. правило выше), и тень внутри карточки дробила бы её на этажи. */ :where(.card, .row, .mat-scope, .course-card, .mteach-card, .board-lib-card, .cv-module, .slide-view, .ex-inline-card, .book-ex, .cd-hero, .cd-person, .cd-stat, .cd-prog, .cd-panel, .room-nav-card, .room-hw-btn, .room-tools, .room-chat, .room-call, .room-ex, .cka, .lr-change, .chat, .crm-col, .crm-lsec, .crm-viewsw, .ss-group, .clr-preview, .tp-filters, .demo-stat, .demo-row, .tdemo-card, .demo-home, .tb-unit, .aut-card, .aut-side, .tcard-block, .promo-empty) { box-shadow: var(--card-shadow); } :where(.card, .modal, .cd-panel, .cd-hero, .chat, .crm-col, .crm-lsec, .aut-side, .tp-filters, .clr-preview, .room-tools, .room-chat, .slide-view, .cv-module, .ex-inline-card, .book-ex, .ss-group, .tcard-block) :where(.card, .row, .mat-scope, .course-card, .mteach-card, .board-lib-card, .cv-module, .slide-view, .ex-inline-card, .book-ex, .cd-stat, .cd-prog, .cd-panel, .demo-stat, .demo-row, .tdemo-card, .tb-unit, .aut-card) { box-shadow: none; } .row-num { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); display: grid; place-items: center; font-size: .75em; color: var(--muted); } .row-main { flex: 1 1 200px; min-width: 0; } .row-title { color: var(--text); font-size: .95em; } .row-sub { color: var(--muted); font-size: .78em; margin-top: 2px; } .row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* ── Вкладки ──────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .tab { padding: 11px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); cursor: pointer; font-size: .92em; font-family: var(--font); letter-spacing: .3px; transition: color .15s, border-color .15s; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.active { color: var(--selected); border-bottom-color: var(--selected); } .tab .tab-count { font-size: .82em; color: var(--muted); margin-left: 6px; } .tab.active .tab-count { color: var(--accent-dim); } /* ── Навигация страницы «Материалы» ──────────────────────────────── Два уровня: ЧЬЁ (Мои / Общие / Учителя) — сегментированный переключатель, и ТИП (Книги / Доски) — лёгкие текстовые вкладки. Разный визуальный вес и держит иерархию, поэтому оба уровня умещаются в ОДНУ строку. ⚠️ Панель-«слаб» под вкладками (язычки папки + большой блок на var(--surface-2)) УБРАНА, и это главная правка вида. Метафора папки требовала, чтобы фон панели совпадал с фоном активного язычка, — а у школы со светлым --surface-2 (палитра настраивается!) это давало серую плиту во весь экран, на которой пустая вкладка читалась как дыра в вёрстке. Контент теперь лежит прямо на странице, как на всех остальных экранах платформы, и от палитры школы больше не зависит. */ .mat-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; margin-bottom: 22px; } .mat-scope { display: inline-flex; gap: 2px; padding: 4px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); } .mat-scope-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 16px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: var(--text-dim); font-family: var(--font); font-size: .85em; letter-spacing: .2px; transition: color .15s, background .15s; } .mat-scope-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); } .mat-scope-btn.active { background: color-mix(in srgb, var(--selected) 15%, transparent); color: var(--selected); font-weight: 600; } /* Второй уровень — текст с подчёркиванием, а не пилюли: две группы пилюль подряд читались бы как один уровень, и иерархия «чьё → что» терялась. */ .mat-kinds { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mat-kind { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 2px 9px; border: 0; background: none; cursor: pointer; color: var(--muted); font-family: var(--font); font-size: .85em; letter-spacing: .2px; transition: color .15s; } .mat-kind::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--selected); transform: scaleX(0); transition: transform .18s; } .mat-kind:hover { color: var(--text-dim); } .mat-kind.active { color: var(--text); } .mat-kind.active::after { transform: scaleX(1); } /* Счётчик — «таблетка», одна и та же на обоих уровнях (число должно выглядеть числом, а не частью подписи). tabular-nums, чтобы вкладки не дёргались при смене счёта. */ .mat-n { font-size: .8em; line-height: 1.6; padding: 0 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); font-variant-numeric: tabular-nums; } .mat-scope-btn.active .mat-n, .mat-kind.active .mat-n { background: color-mix(in srgb, var(--selected) 20%, transparent); color: var(--selected); } .mat-note { color: var(--muted); font-size: .82em; line-height: 1.5; margin: -8px 0 20px; max-width: 620px; } /* Пустая вкладка — карточка-заглушка с пунктиром («место, куда что-то встанет»), а не пустота посреди экрана. */ .mat-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 24px; border: 1px dashed var(--border-2); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 45%, transparent); } .mat-empty-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--selected) 12%, transparent); color: var(--selected); margin-bottom: 16px; } .mat-empty-ico svg { width: 24px; height: 24px; } .mat-empty-title { font-size: 1.02em; color: var(--text); margin-bottom: 8px; } .mat-empty p { color: var(--muted); font-size: .86em; line-height: 1.55; max-width: 430px; margin: 0 0 20px; } .mat-empty .btn:last-child { margin-top: 0; } .mat-empty p:last-child { margin-bottom: 0; } @media (max-width: 760px) { .mat-nav { flex-direction: column; align-items: stretch; gap: 14px; } /* Сегменты растягиваются поровну — три подписи разной длины иначе дают рваный ряд. */ .mat-scope { width: 100%; } .mat-scope-btn { flex: 1 1 0; justify-content: center; padding: 9px 8px; font-size: .8em; gap: 6px; } .mat-kind { font-size: .82em; } .mat-kinds { gap: 16px; } .mat-note { margin: -4px 0 16px; } .mat-empty { padding: 38px 18px; } } /* ── «Учителя → Книги»: язык + поиск, карточки преподавателей, окно с их книгами ── Цвета — только токены; градиент аватара и обложки задаёт JS (тот же coverGradient, что у обложек материалов — тёмный в обеих темах, поэтому светлый текст на нём читается и в светлой теме). */ .mteach-tools { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 22px; } .mteach-tools .select { width: auto; min-width: 200px; } .mteach-tools .search-field { flex: 0 1 260px; min-width: 0; } .mteach-found { color: var(--muted); font-size: .82em; margin-bottom: 14px; } .mteach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .mteach-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; cursor: pointer; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); transition: border-color .18s, transform .18s, background .18s; } .mteach-card:hover { border-color: var(--accent-border); transform: translateY(-3px); background: var(--surface-2); } .mteach-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mteach-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .mteach-ava { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 1.05em; font-weight: 500; } .mteach-who { min-width: 0; } .mteach-name { color: var(--text); font-size: 1.02em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mteach-count { color: var(--muted); font-size: .8em; margin-top: 2px; } .mteach-covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .mteach-book { min-width: 0; } .mteach-cover { aspect-ratio: 3 / 4; border-radius: 8px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; } .mteach-cover .cc-cover-letter { font-size: 1.7em; font-weight: 300; color: rgba(255,255,255,.85); } .mteach-btitle { margin-top: 6px; font-size: .72em; line-height: 1.3; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* «Китайские иероглифы» в ячейке в четверть карточки иначе обрезалось по слову */ .mteach-more { color: var(--accent-text); font-size: .8em; } .mteach-modal-sub { color: var(--muted); font-size: .85em; margin: -12px 0 20px; } @media (max-width: 760px) { .mteach-tools .select, .mteach-tools .search-field { flex: 1 1 100%; width: 100%; } .mteach-grid { grid-template-columns: 1fr; gap: 14px; } } /* ── Бейджи ───────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: .7em; letter-spacing: .6px; text-transform: uppercase; font-weight: 600; border: 1px solid var(--border-2); color: var(--text-dim); } .badge-accent { color: var(--badge-accent); border-color: var(--accent-border); background: color-mix(in srgb, var(--badge-accent) 7%, transparent); } .badge-warn { color: var(--warn); border-color: rgba(251,191,36,.3); } .badge-type { font-size: .65em; } /* ── Формы ────────────────────────────────────────────────────── */ .field { margin-bottom: 16px; } .field label { display: block; font-size: .78em; color: var(--text-dim); margin-bottom: 6px; letter-spacing: .3px; } .input, .textarea, .select { width: 100%; padding: 11px 14px; background: var(--bg); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: .92em; font-family: var(--font); transition: border-color .15s; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent); } /* мягкое фокус-кольцо */ /* iOS Safari: нативные date/time-поля центрируют текст и живут своей высотой — снимаем системный вид и приводим к обычному .input */ .input[type="time"], .input[type="date"], .input[type="datetime-local"], .input[type="month"] { -webkit-appearance: none; appearance: none; } .input::-webkit-date-and-time-value { text-align: left; margin: 0; } .input::-webkit-datetime-edit { padding: 0; } .input::-webkit-calendar-picker-indicator { opacity: .5; filter: invert(.8); cursor: pointer; } @media (max-width: 760px) { /* Одна высота с соседними полями (у них 16px-шрифт → 44px), паддинги по вертикали не нужны */ .input[type="time"], .input[type="date"], .input[type="datetime-local"], .input[type="month"] { height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } } .select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a0a0a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; } .textarea { resize: vertical; min-height: 90px; line-height: 1.55; } /* Комбобокс (текстовое поле + свой выпадающий список, напр. выбор модуля) */ .combo-wrap { position: relative; } .combo-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 6px; flex-direction: column; gap: 2px; } .combo-menu.open { display: flex; } .combo-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text-dim); font-family: var(--font); font-size: .9em; padding: 9px 11px; border-radius: var(--radius-sm); transition: background .12s, color .12s; } .combo-item:hover { background: var(--surface-2); color: var(--text); } .form-actions { display: flex; gap: 10px; margin-top: 22px; } .nl-actions .btn { flex: 1 1 0; justify-content: center; } .nl-actions .btn .ico { margin-right: 6px; } .combo-input { padding-right: 44px; } .combo-chev { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 8px; } .combo-chev:hover { color: var(--text); } .combo-chev svg { width: 18px; height: 18px; } /* ── Пустое состояние ─────────────────────────────────────────── */ .empty { text-align: center; padding: 70px 20px; color: var(--muted); } .empty-icon { font-size: 2.6em; opacity: .5; margin-bottom: 14px; } /* SVG-иконка (icons.js) вместо эмодзи — в размер знака, который тут стоял раньше. */ .empty-icon .ico svg { width: 1em; height: 1em; } .empty p { font-size: .9em; margin-bottom: 18px; } /* ── Логин ────────────────────────────────────────────────────── */ /* Логин закрывает весь вьюпорт (fixed) — окно авторизации статично, без прокрутки страницы */ .auth-wrap { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; overflow: auto; } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 38px 32px; box-shadow: var(--shadow); } .auth-brand { text-align: center; font-size: 2.2em; font-weight: 200; letter-spacing: 8px; margin-bottom: 4px; } .auth-tag { text-align: center; font-size: .72em; color: var(--muted); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; } .auth-hint { margin-top: 22px; font-size: .74em; color: var(--muted); text-align: center; line-height: 1.7; border-top: 1px solid var(--border); padding-top: 16px; white-space: pre-line; } .auth-hint code { color: var(--text-dim); } /* «Забыли пароль?» / «Вернуться ко входу» — кнопка, выглядящая ссылкой (нужен именно