/* ── 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; --grade-mid: #fbbf24; --grade-low: #f87171; /* Производные от акцента (пересчитываются в 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. НОВЫЙ дочерний токен: добавь сюда, в THEME_GROUPS/INHERITS (theme.js) и в TOKENS (backend/app/theme.py). */ --accent-text: var(--accent); /* акцентный текст, ссылки, числа, баланс */ --selected: var(--accent); /* активные вкладки, выбранные пункты */ --accent-border: var(--accent-dim); /* рамки при наведении, кольцо фокуса */ --btn-primary: var(--accent); /* заливка основных кнопок */ --btn-danger: var(--danger); /* кнопки удаления/опасных действий */ --badge-accent: var(--accent); /* акцентные бейджи и чипы */ --progress: var(--accent); /* полосы прогресса, загрузка */ --toggle-on: var(--accent-dim); /* включённый тумблер (фон дорожки) */ --chat-mine: var(--accent-dim); /* фон своих сообщений в чате */ --correct: var(--accent); /* правильный ответ */ --wrong: var(--danger); /* неверный ответ */ --lesson-done: var(--accent); /* проведённый урок в расписании */ --noshow: var(--danger); /* неявка в расписании */ --lesson-upcoming: var(--text-dim); /* предстоящий (ещё не прошедший) урок в расписании */ /* Производные для дочерних заливок (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-muted: #757575; --tb-accent: #6ee7b7; --tb-surface-2: #1c1c1c; --radius: 14px; --radius-sm: 9px; --shadow: 0 8px 30px rgba(0,0,0,.4); --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; /* нативные контролы (дата, селект, автозаполнение, скроллбар) — светлые */ --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; --grade-mid: #b45309; --grade-low: #dc2626; --on-accent: #ffffff; /* на тёмно-изумрудной кнопке текст белый */ --accent-hover: #059669; --on-accent-dim: #0f3b2c; --shadow: 0 10px 34px rgba(20,50,40,.12); } * { 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; } /* ── Глобальная полировка ─────────────────────────────────────── */ ::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 var(--border); 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; } .avatar.avatar-xs { width: 20px; height: 20px; font-size: .58em; } img.avatar { object-fit: cover; } /* «Мой профиль» — модалка редактирования имени/email/фото */ .mp-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .mp-avatar { width: 72px; height: 72px; 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.7em; font-weight: 600; color: var(--accent-text); overflow: hidden; } .mp-photo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } /* ── Каркас страниц ───────────────────────────────────────────── */ .app { max-width: 1180px; margin: 0 auto; padding: 36px 24px 80px; } .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 var(--border-2); background: var(--surface); 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: var(--accent-border); background: var(--surface-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); 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) 10%, transparent); border-color: color-mix(in srgb, var(--btn-danger) 30%, transparent); } .btn-sm { padding: 7px 13px; font-size: .82em; } .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 var(--border); 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 var(--border); 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); } .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); } /* ── Бейджи ───────────────────────────────────────────────────── */ .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; } /* ── Пустое состояние ─────────────────────────────────────────── */ .empty { text-align: center; padding: 70px 20px; color: var(--muted); } .empty-icon { font-size: 2.6em; opacity: .5; margin-bottom: 14px; } .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 var(--border); 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); } /* ── Модалка ──────────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 100; padding: 24px; animation: overlay-in .16s ease; } .modal { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); max-height: calc(100vh - 48px); overflow-y: auto; animation: modal-in .2s cubic-bezier(.3,1.1,.4,1); } .modal-wide { max-width: 620px; } .modal-title { font-size: 1.2em; font-weight: 500; margin-bottom: 20px; } @keyframes overlay-in { from { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } } /* Мобиле: модалка = нижний лист (bottom sheet) с «ручкой», выезжает снизу */ @media (max-width: 760px) { .overlay { place-items: end stretch; padding: 0; } .modal, .modal-wide { max-width: none; border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none; padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 36px); animation: sheet-in .28s cubic-bezier(.32,.72,.24,1); } .modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 99px; background: var(--border-2); margin: 0 auto 16px; } @keyframes sheet-in { from { transform: translateY(48px); opacity: .5; } } } @media (prefers-reduced-motion: reduce) { .overlay, .modal { animation: none; } } /* ── Тост ─────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 80px); background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); padding: 12px 22px; border-radius: 99px; font-size: .85em; z-index: 200; opacity: 0; transition: transform .25s, opacity .25s; box-shadow: var(--shadow); pointer-events: none; } /* тост не перехватывает тапы (висит над полем ввода чата снизу) */ .toast.show { transform: translate(-50%, 0); opacity: 1; } .toast.err { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: #fca5a5; } /* ── Плеер урока ──────────────────────────────────────────────── */ .player { max-width: 720px; margin: 0 auto; } .player-progress { height: 4px; background: var(--surface-2); border-radius: 99px; margin-bottom: 28px; overflow: hidden; } .player-progress > div { height: 100%; background: var(--progress); transition: width .3s; } .slide-view { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-height: 180px; } .slide-view h2 { font-weight: 400; font-size: 1.5em; margin-bottom: 18px; } .slide-view .body-text { white-space: pre-wrap; color: var(--text-dim); line-height: 1.8; } .choice-opt { display: block; width: 100%; text-align: left; padding: 10px 14px; margin-bottom: 8px; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; font-size: .95em; transition: border-color .15s, background .15s; font-family: var(--font); } .choice-opt:hover { border-color: var(--accent-border); } .choice-opt.selected { border-color: var(--selected); background: color-mix(in srgb, var(--selected) 8%, transparent); } .choice-opt.correct { border-color: var(--correct); background: color-mix(in srgb, var(--correct) 14%, transparent); } .choice-opt.wrong { border-color: var(--wrong); background: color-mix(in srgb, var(--wrong) 12%, transparent); } .player-nav { display: flex; justify-content: space-between; margin-top: 28px; } .note-box { background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.25); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--text-dim); } .result-box { text-align: center; padding: 50px 20px; } .result-score { font-size: 3em; font-weight: 200; color: var(--accent-text); } /* ── Прочее ───────────────────────────────────────────────────── */ .spinner { width: 26px; height: 26px; border: 3px solid var(--border-2); border-top-color: var(--progress); border-radius: 50%; animation: spin .8s linear infinite; margin: 60px auto; } @keyframes spin { to { transform: rotate(360deg); } } .section-title { font-size: .8em; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 32px 0 14px; } .split { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } } /* ── Переключатель (switch) ───────────────────────────────────── */ .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: .9em; color: var(--text-dim); cursor: pointer; } .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .slider { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 99px; transition: background .2s, border-color .2s; pointer-events: none; } .slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 50%; transform: translateY(-50%); background: #cfcfcf; border-radius: 50%; transition: transform .2s, background .2s; box-shadow: 0 1px 2px rgba(0,0,0,.45); } .switch input:checked + .slider { background: var(--toggle-on); border-color: var(--toggle-on); } .switch input:checked + .slider::before { transform: translate(18px, -50%); background: #fff; } /* Подсказка под включённым тумблером (напр. еженедельный повтор урока) */ .recur-hint { font-size: .82em; color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--badge-accent) 20%, transparent); border-radius: var(--radius-sm); padding: 9px 12px; } /* ── Профиль ──────────────────────────────────────────────────── */ .profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .avatar.avatar-lg { width: 56px; height: 56px; font-size: 1.4em; } .profile-head-name { font-size: 1.1em; font-weight: 600; color: var(--text); } .profile-head-role { font-size: .82em; color: var(--text-dim); } .profile-info { display: flex; flex-direction: column; gap: 2px; } .pinfo-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .88em; } .pinfo-k { color: var(--muted); } .pinfo-v { color: var(--text); text-align: right; } .profile-hint { color: var(--muted); font-size: .85em; margin-top: 16px; line-height: 1.6; } .profile-danger { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .profile-danger-cap { font-size: .78em; color: var(--text-dim); } /* ── Центр статистики ученика ─────────────────────────────────── */ .sc-top { display: flex; gap: 14px; flex-wrap: wrap; } .sc-metric { flex: 1 1 140px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; text-align: center; } .sc-metric-val { font-size: 1.7em; font-weight: 800; color: var(--accent-text); line-height: 1.1; font-variant-numeric: tabular-nums; } .sc-metric-lbl { font-size: .8em; color: var(--text-dim); margin-top: 4px; } .sc-metric-sub { font-size: .72em; color: var(--muted); margin-top: 2px; } .sc-ex-grid { display: flex; gap: 14px; flex-wrap: wrap; } .sc-ex { flex: 1 1 180px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; } .sc-ex-title { font-size: .85em; color: var(--text-dim); } .sc-ex-acc { font-size: 2em; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--text-dim); } .sc-ex-acc.good { color: var(--accent-text); } .sc-ex-acc.mid { color: var(--warn); } .sc-ex-acc.low { color: var(--danger); } .sc-ex-meta { display: flex; gap: 12px; font-size: .8em; color: var(--text-dim); margin-top: 4px; flex-wrap: wrap; } .sc-ex-meta b { color: var(--text); } .sc-ex-count { margin-left: auto; } .balance-box { display: flex; align-items: baseline; gap: 10px; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 16px 20px; } .balance-num { font-size: 2em; font-weight: 200; color: var(--badge-accent); } .balance-cap { font-size: .8em; color: var(--muted); } .txn-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; } .txn-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .82em; } .txn-delta { width: 38px; font-weight: 600; } .txn-delta.pos { color: var(--accent-text); } .txn-delta.neg { color: var(--danger); } .txn-reason { flex: 1; color: var(--text-dim); } .txn-date { color: var(--muted); font-size: .92em; } /* ── Тарифы ───────────────────────────────────────────────────── */ .tariff-card { padding: 18px 20px; } .tariff-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .tariff-lang { font-size: 1.05em; color: var(--text); font-weight: 500; } .tariff-dur { font-size: .78em; color: var(--muted); margin-top: 2px; } .pkg-list { display: flex; flex-direction: column; gap: 6px; } .pkg-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; font-size: .86em; color: var(--text-dim); padding: 4px 0; } .pkg-row .pkg-price { color: var(--text); text-align: right; min-width: 110px; } .pkg-row .pkg-months { color: var(--muted); text-align: right; min-width: 60px; } .pkg-edit-list { display: flex; flex-direction: column; gap: 8px; } .pkg-edit-row { display: flex; gap: 8px; align-items: center; } /* ── Расписание ───────────────────────────────────────────────── */ .week-nav { display: flex; align-items: center; gap: 8px; } .week-nav .btn-today { order: -1; } /* «Сегодня» — слева от стрелок, чтобы они не скакали при появлении кнопки */ .week-label { font-size: .9em; color: var(--text-dim); min-width: 150px; text-align: center; } /* ── Сетка расписания (компактная, адаптивная) ────────────────── */ .sched-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .sched-wrap::-webkit-scrollbar { height: 8px; } .sched-wrap::-webkit-scrollbar-track { background: transparent; margin: 0 6px; } .sched-wrap::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid var(--surface); background-clip: padding-box; } .sched-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); background-clip: padding-box; } .sched-grid { min-width: 680px; } .sched-row { display: grid; grid-template-columns: 46px repeat(7, minmax(72px, 1fr)); } .sched-head { background: var(--surface-2); border-bottom: 1px solid var(--border-2); } .sched-time { padding: 4px 6px; font-size: .66em; color: var(--muted); text-align: right; border-right: 1px solid var(--border); position: sticky; left: 0; z-index: 2; background: var(--surface); } .sched-head .sched-time { background: var(--surface-2); z-index: 6; } .sched-day { padding: 6px 4px; text-align: center; border-right: 1px solid var(--border); } .sched-day.today { background: color-mix(in srgb, var(--accent) 7%, transparent); } .sched-dow { display: block; font-size: .74em; color: var(--text-dim); } .sched-date { display: block; font-size: .66em; color: var(--muted); } .sched-row:not(.sched-head) { border-top: 1px solid var(--border); } .sched-cell { min-height: 32px; border-right: 1px solid var(--border); padding: 2px; cursor: pointer; transition: background .12s; display: flex; flex-direction: column; gap: 2px; } .sched-cell:hover { background: var(--surface-2); } /* Базовый чип = SCHEDULED (нейтральный). Статусы перекрашивают. */ .lesson-chip { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 5px; padding: 2px 5px; font-size: .68em; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 3px; overflow: hidden; white-space: nowrap; } .lesson-chip:hover { background: var(--surface); border-color: var(--border-2); } .lesson-chip.upcoming { background: color-mix(in srgb, var(--lesson-upcoming) 16%, transparent); border-color: transparent; color: var(--lesson-upcoming); } .lesson-chip.upcoming:hover { background: color-mix(in srgb, var(--lesson-upcoming) 24%, transparent); } .lesson-chip.completed { background: color-mix(in srgb, var(--lesson-done) 16%, transparent); border-color: var(--accent-border); color: var(--lesson-done); } .lesson-chip.completed:hover { background: color-mix(in srgb, var(--lesson-done) 24%, transparent); } .lesson-chip.cancelled { opacity: .4; text-decoration: line-through; } /* Неявка — без рамки-обводки, только цветная заливка+текст (с рамкой смотрелась тяжеловесно). */ .lesson-chip.noshow { background: color-mix(in srgb, var(--noshow) 16%, transparent); border-color: transparent; color: var(--noshow); } .lesson-chip.noshow:hover { background: color-mix(in srgb, var(--noshow) 24%, transparent); } .lesson-chip.nobalance { background: rgba(168,85,247,.18); border-color: rgba(168,85,247,.55); color: #c9a8f7; } .lesson-chip.nobalance:hover { background: rgba(168,85,247,.28); } .chip-name { overflow: hidden; text-overflow: ellipsis; } .chip-nobal { margin-left: auto; font-size: .92em; font-weight: 600; color: #c9a8f7; white-space: nowrap; } .chip-rec { color: var(--accent-text); font-size: .9em; } .sched-cell.past { cursor: default; } /* Прогрессивная штриховка: диагональные штрихи заполняют ячейку слева направо пропорционально прошедшему времени часа (--fill = 0..1, каждый штрих ≈ 10 мин). */ .sched-cell.fill { background-color: rgba(255,255,255,.011); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1.5px, transparent 1.5px, transparent 7px); background-repeat: no-repeat; background-position: left center; background-size: calc(var(--fill, 1) * 100%) 100%; } .sched-cell.fill:hover { background-color: rgba(255,255,255,.023); } /* Инициал на чипе — только в компактном мобильном расписании */ .chip-ini { display: none; font-weight: 700; } /* Мобиле: расписание влезает без горизонтального скролла; урок = тонкая рамка [буква + баланс] */ @media (max-width: 760px) { .sched-wrap { overflow-x: hidden; } .sched-grid { min-width: 0; } .sched-row { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); } .sched-time { padding: 2px 1px; font-size: .54em; } .sched-day { padding: 4px 1px; } .sched-dow { font-size: .62em; } .sched-date { font-size: .52em; } .sched-cell { min-height: 24px; padding: 1px; gap: 1px; } .sched-cell .lesson-chip { padding: 1px 3px; min-height: 16px; gap: 2px; font-size: .58em; border-radius: 4px; justify-content: center; } .sched-cell .lesson-chip .chip-name, .sched-cell .lesson-chip .chip-rec { display: none; } .sched-cell .lesson-chip .chip-ini { display: inline; } .sched-cell .lesson-chip .chip-bal { font-weight: 600; } .sched-cell .lesson-chip .chip-nobal { font-size: .9em; } .sched-cell .lesson-chip.cancelled { opacity: .4; } .sched-cell.has .slot-badge { padding: 1px 5px; font-size: .7em; } } /* ── Админ-сводка по слотам ───────────────────────────────────── */ .sched-cell.has { cursor: pointer; align-items: center; justify-content: center; } .slot-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); border-radius: 99px; } .sched-cell.has:hover .slot-badge { background: rgba(251,191,36,.22); } /* Шапка расписания: одна строка из трёх колонок — часы слева, баланс уроков строго по центру экрана (крайние колонки 1fr равны), навигация справа. */ .sched-phead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .sched-phead > .sched-sub { justify-self: start; } .sched-phead > .sched-bal { justify-self: center; } .sched-phead > .week-nav { justify-self: end; } @media (max-width: 760px) { /* Мобильная главная (все роли): экономим место — компактная верхняя строка [баланс · часы], сетка сразу под ней, а навигация по неделям уезжает ВНИЗ. Раскладываем страницу flex-переносом; шапка «растворяется» (display:contents), чтобы часы, баланс, сетка и навигация встали в общий поток и переупорядочились. */ .sched-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 0; } .sched-page .sched-phead { display: contents; } .sched-page .sched-bal { order: 0; } /* баланс — слева сверху */ .sched-page .sched-sub { order: 1; } /* часы — справа сверху */ .sched-page .sched-wrap { order: 2; flex-basis: 100%; } /* сетка — на всю ширину */ .sched-page .week-nav { order: 3; flex-basis: 100%; justify-content: flex-end; gap: 6px; } .sched-phead .msk-sec { display: none; } /* секунды скрыты — экономим место */ .sched-phead .week-label { min-width: 0; font-size: .82em; } .sched-phead .week-nav .btn-sm { padding: 5px 9px; } /* кнопки перелистывания поуже */ } /* Живые московские часы в шапке расписания */ .sched-sub { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .msk-clock { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-variant-numeric: tabular-nums; } .msk-clock .msk-time { font-weight: 600; letter-spacing: .4px; } .msk-cap { font-size: .82em; color: var(--text-dim); letter-spacing: .5px; } .msk-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); animation: msk-pulse 1.8s ease-out infinite; } @keyframes msk-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } } .slot-ico { font-size: .78em; line-height: 1; } .slot-count { font-size: .76em; color: var(--warn); font-weight: 700; } .slot-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 16px; } .slot-title-date { font-size: 1.02em; font-weight: 500; color: var(--text); } .slot-title-count { font-size: .82em; color: var(--muted); white-space: nowrap; } .slot-list { display: flex; flex-direction: column; gap: 12px; max-height: 62vh; overflow: auto; } /* Мобиле: список — часть единой прокрутки листа-модалки, без вложенного скролл-бокса (иначе на мобиле список «упирается» во внутреннюю рамку раньше, чем доскроллит весь лист). */ @media (max-width: 760px) { .slot-list { max-height: none; overflow: visible; } } /* Карточка урока: слева строки учителя/ученика, справа общий таймлайн начало/окончание. Разделитель — МЕЖДУ уроками (когда их несколько в одном слоте), см. .slot-card + .slot-card. */ .slot-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; display: flex; gap: 14px; } .slot-card + .slot-card { border-top: 1px solid var(--border-2); margin-top: 2px; padding-top: 20px; } .slot-people { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* Общий таймлайн (точки+линия начало→окончание) — одна колонка на обоих людей */ .slot-times { display: flex; gap: 10px; flex: 0 0 auto; align-self: stretch; } .tl-col { display: flex; flex-direction: column; align-items: center; padding: 4px 0 4px 2px; } .tl-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .tl-line { flex: 1; width: 2px; background: var(--border-2); margin: 3px 0; min-height: 14px; } .tl-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } .time-text { display: flex; flex-direction: column; line-height: 1.2; } .st-cap { font-size: .64em; color: var(--muted); } .st-val { font-size: .92em; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* Строка человека (учитель/ученик): аватар+имя слева, иконки-действия справа */ .slot-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .person-main { flex: 1; min-width: 0; line-height: 1.25; } .person-role { font-size: .64em; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .person-name-line { display: flex; align-items: center; gap: 7px; min-width: 0; } .person-name { font-size: .9em; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot-card .avatar { width: 36px; height: 36px; font-size: .9em; } .id-chip { display: inline-flex; align-items: center; gap: 3px; font-size: .68em; font-weight: 700; color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 16%, transparent); border-radius: 5px; padding: 2px 6px; white-space: nowrap; flex: 0 0 auto; } .id-num { font-variant-numeric: tabular-nums; } .copy-btn { background: transparent; border: none; color: inherit; opacity: .75; cursor: pointer; font-size: 1em; line-height: 1; padding: 0; border-radius: 4px; transition: opacity .12s; } .copy-btn:hover { opacity: 1; } .person-actions { display: flex; gap: 6px; flex: 0 0 auto; } .person-act { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--accent-text); font-weight: 600; font-size: 1em; } /* Мобиле: НЕ складывать карточку в столбик — таймлайн остаётся сбоку на одном уровне со строками людей (имя ужимается ellipsis'ом); лишь чуть плотнее. */ @media (max-width: 560px) { .slot-card { gap: 10px; } .slot-times { gap: 7px; } .slot-row { gap: 8px; } .person-act { width: 32px; height: 32px; } } /* ── Бейдж баланса уроков ──────────────────────────────────────── */ .bal-badge { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--badge-accent) 10%, transparent); border: 1px solid var(--accent-border); white-space: nowrap; line-height: 1.45; } .bal-badge.low { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .bal-ico { font-size: .6em; line-height: 1; opacity: .8; } .bal-num { font-size: .72em; font-weight: 700; color: var(--badge-accent); font-variant-numeric: tabular-nums; } .bal-badge.low .bal-num { color: var(--danger); } .bal-cap { font-size: .78em; color: var(--text-dim); margin-left: 2px; } .bal-badge.big { padding: 3px 11px; gap: 5px; } .bal-badge.big .bal-ico { font-size: .9em; } .bal-badge.big .bal-num { font-size: .95em; } .bal-badge.big .bal-cap { font-size: .76em; } /* Компактный (узкий) вариант для бейджа общего баланса в шапке расписания */ .bal-badge.big.bal-toggle { padding: 6px 13px; gap: 5px; } .bal-badge.big.bal-toggle .bal-num { font-size: 1em; } .bal-badge.big.bal-toggle .bal-cap { font-size: .72em; } /* Баланс уроков ученика: «Баланс уроков: N» + круглая кнопка «+» (пополнение) */ .bal-box { display: inline-flex; align-items: center; gap: 8px; } .bal-box-cap { font-size: .82em; color: var(--text-dim); white-space: nowrap; } .bal-box-num { font-size: 1.05em; font-weight: 700; color: var(--badge-accent); font-variant-numeric: tabular-nums; } .bal-box.low .bal-box-num { color: var(--danger); } .bal-add { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 21px; height: 21px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 12%, transparent); border: 1px solid var(--accent-border); transition: background .14s, transform .1s; } .bal-add:hover { background: color-mix(in srgb, var(--badge-accent) 22%, transparent); } .bal-add:active { transform: scale(.92); } .bal-add svg { width: 13px; height: 13px; } /* Кнопка-строка выбора класса для пополнения */ .balp-row-btn { width: 100%; text-align: left; background: transparent; border: 1px solid var(--border); cursor: pointer; font-family: inherit; } .balp-row-btn + .balp-row-btn { margin-top: 6px; } .balp-row-btn:hover { background: rgba(255,255,255,.03); border-color: var(--accent-border); } /* Виджет общего баланса ученика — раскрытие по классам */ .bal-widget { position: relative; } .bal-toggle { cursor: pointer; font-family: inherit; font-size: 1rem; } .bal-toggle:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .bal-toggle.low:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); } .bal-caret { font-size: .7em; color: var(--text-dim); margin-left: 4px; transition: transform .15s ease; } .bal-toggle.open .bal-caret { transform: rotate(180deg); } .bal-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 264px; max-width: calc(100vw - 28px); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 8px; animation: balpop .12s ease; } @keyframes balpop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .balp-head { font-size: .68em; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); padding: 6px 8px 8px; } .balp-list { display: flex; flex-direction: column; gap: 2px; } .balp-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); } .balp-row:hover { background: rgba(255,255,255,.03); } .balp-info { flex: 1; min-width: 0; } .balp-name { font-weight: 600; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .balp-teacher { font-size: .78em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .balp-bal { font-size: .95em; color: var(--badge-accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .balp-bal.low { color: var(--danger); } .balp-empty { padding: 10px 8px; color: var(--text-dim); font-size: .9em; } /* Строка баланса по классу — кликабельна (переход в класс) */ .balp-row-link { cursor: pointer; } .balp-go { color: var(--muted); font-size: 1em; flex: 0 0 auto; transition: transform .15s, color .15s; } .balp-row-link:hover .balp-go { color: var(--accent-text); transform: translateX(2px); } /* Кастомный выпадающий список учеников (с аватарками) при постановке урока */ .stud-sel { position: relative; } .stud-sel-display { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; font-size: 1rem; } .stud-sel-cur { display: flex; align-items: center; gap: 8px; min-width: 0; } .stud-sel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stud-sel-ph { color: var(--muted); } .stud-sel-caret { color: var(--text-dim); font-size: .8em; transition: transform .15s; flex: 0 0 auto; } .stud-sel.open .stud-sel-caret { transform: rotate(180deg); } .stud-sel-pop { margin-top: 6px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); max-height: 240px; overflow-y: auto; padding: 4px; } .stud-sel-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; } .stud-sel-opt:hover { background: rgba(255,255,255,.04); } .stud-sel-opt-main { min-width: 0; } .stud-sel-opt-name { font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stud-sel-opt-sub { font-size: .76em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-bal { margin-left: auto; font-size: .9em; font-weight: 700; color: var(--badge-accent); font-variant-numeric: tabular-nums; } .chip-bal.low { color: var(--danger); } /* статус + кнопка вкл/выкл рядом */ .user-state { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* Имя + бейдж баланса/группы в одну строку; ID под email */ .row-nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row-id { font-size: .72em; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: .3px; } /* Единый pill: статус + переключатель */ .toggle-pill { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 15px; border-radius: 99px; border: 1px solid var(--border-2); background: transparent; cursor: pointer; font-family: var(--font); font-size: .8em; letter-spacing: .3px; transition: background .14s, border-color .14s, color .14s; } .toggle-pill .tp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .toggle-pill.on { color: var(--accent-text); border-color: var(--accent-border); background: color-mix(in srgb, var(--accent) 8%, transparent); } .toggle-pill.on:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .toggle-pill.off { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); } .toggle-pill.off:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); } /* ── Бейдж непрочитанных в навигации ───────────────────────────── */ .nav-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 7px; border-radius: 99px; background: var(--tb-accent); color: var(--tb-on-accent); font-size: .66em; font-weight: 700; vertical-align: middle; } /* ── Мессенджер ────────────────────────────────────────────────── */ /* Компактная высота на весь экран, поле ввода не срезается. */ body.msg-view .app { padding-top: 18px; padding-bottom: 16px; } /* Запас по высоте, чтобы верх чата не срезался даже на низких окнах */ .msg-wrap { display: flex; flex-direction: column; min-height: 0; /* топбар 61 + .app padding 18/16 = 95px служебных → страница не прокручивается */ height: calc(100vh - 95px); height: calc(100dvh - 95px); } .msg-head { margin-bottom: 12px; } .msg-head .page-title { font-size: 1.5em; } .chat { display: grid; grid-template-columns: 288px 1fr; flex: 1 1 auto; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } /* min-width:0 обязателен: .chat-side — grid-элемент, а его строка папок (.chat-folders) с непереносимыми вкладками иначе раздувает колонку по своему контенту (min-width:auto) и поле поиска вылезает за правый край экрана — заметно у админа (папок больше). */ .chat-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); } .chat-folders { display: flex; gap: 5px; padding: 8px 10px; overflow-x: auto; align-items: center; border-bottom: 1px solid var(--border); scrollbar-width: thin; } .cf-tab { padding: 5px 11px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-dim); font-size: .76em; cursor: pointer; white-space: nowrap; font-family: var(--font); } .cf-tab.active { background: color-mix(in srgb, var(--selected) 12%, transparent); border-color: var(--accent-border); color: var(--selected); } .cf-add, .cf-del, .cf-manage { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: .95em; padding: 2px 6px; flex: 0 0 auto; } .cf-add:hover, .cf-del:hover, .cf-manage:hover { color: var(--accent-text); } /* Управление папками (модалка «шестерёнка»): строка = стрелки порядка · имя · переименовать · удалить */ .folder-manage { display: flex; flex-direction: column; gap: 8px; } .folder-manage-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); } .fm-order { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; } .fm-arrow { width: 26px; height: 18px; line-height: 1; padding: 0; font-size: .7em; background: transparent; border: 1px solid var(--border-2); border-radius: 6px; color: var(--text-dim); cursor: pointer; } .fm-arrow:hover:not(:disabled) { color: var(--accent-text); border-color: var(--accent-border); } .fm-arrow:disabled { opacity: .3; cursor: default; } .fm-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-act { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 8px; } .fm-act svg { width: 17px; height: 17px; } .fm-act:hover { color: var(--accent-text); background: var(--surface); } .fm-del:hover { color: var(--danger); } /* Стили карточек контактов (.cc-menu/.cc-act/.cc-name-wrap/.cc-pin/.pinned и т.д.) собраны ниже единым блоком «Карточки списка чатов». */ .chat-contacts { overflow-y: auto; flex: 1; min-height: 0; } /* Поиск по контактам и по сообщениям чата */ .search-field { position: relative; display: flex; align-items: center; } .search-field .input { width: 100%; box-sizing: border-box; padding-left: 34px; } .search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); display: inline-flex; pointer-events: none; } .search-ico svg { width: 15px; height: 15px; display: block; } .search-field:focus-within .search-ico { color: var(--text-dim); } .chat-search-wrap { margin: 8px 10px 6px; } .chat-search-wrap .input { font-size: .8em; padding-top: 6px; padding-bottom: 6px; } .chat-search-wrap .input::placeholder { color: var(--muted); } /* Поиск в чате: монохромная иконка-кнопка + раскрывающееся поле */ .chat-icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: var(--radius-sm); transition: color .15s, background .15s; } .chat-icon-btn svg { width: 17px; height: 17px; display: block; } .chat-icon-btn:hover, .chat-icon-btn.active { color: var(--accent-text); background: var(--surface-2); } .chat-search-box { flex: 0 1 190px; min-width: 0; } .chat-search-input { width: 100%; box-sizing: border-box; font-size: .82em; padding: 7px 11px; } .bubble-hit { outline: 2px solid var(--accent); outline-offset: 1px; } .bubble-dim { opacity: .38; transition: opacity .15s; } /* Тулбар действий на пузыре (ответ / переслать / закрепить) — появляется на ховер строки */ .bubble-row { align-items: center; gap: 4px; } .bubble-actions { display: inline-flex; gap: 2px; flex: 0 0 auto; opacity: 0; order: 2; transition: opacity .12s; } .bubble-row:hover .bubble-actions { opacity: 1; } .bubble-act { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; transition: color .12s, background .12s; } .bubble-act svg { width: 15px; height: 15px; display: block; } .bubble-act:hover { color: var(--accent-text); background: var(--surface-2); } .bubble-row.mine .bubble-actions { order: -1; } .bubble.pinned { box-shadow: inset 0 0 0 1px var(--accent-dim); } /* Пересланное / цитата ответа внутри пузыря */ .bubble-fwd { font-size: .72em; color: var(--accent-text); margin-bottom: 3px; } .bubble-fwd b { font-weight: 600; } .bubble-quote { display: flex; flex-direction: column; gap: 1px; padding: 4px 9px; margin-bottom: 5px; max-width: 100%; border-left: 2px solid var(--accent); background: rgba(255,255,255,.05); border-radius: 5px; cursor: pointer; } .bubble-quote-name { font-size: .72em; color: var(--accent-text); font-weight: 600; } .bubble-quote-text { font-size: .8em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Панель «ответ на сообщение» над полем ввода */ .reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--surface); } .reply-bar-ico { color: var(--accent-text); display: inline-flex; flex: 0 0 auto; } .reply-bar-ico svg { width: 16px; height: 16px; } .reply-bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; border-left: 2px solid var(--accent); padding-left: 9px; } .reply-bar-name { font-size: .74em; color: var(--accent-text); font-weight: 600; } .reply-bar-text { font-size: .82em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-bar-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1em; flex: 0 0 auto; padding: 4px 6px; } .reply-bar-x:hover { color: var(--danger); } /* Панель закреплённых сообщений наверху чата */ .chat-pinned { flex: 0 0 auto; border-bottom: 1px solid var(--border); background: var(--surface); padding: 8px 14px; max-height: 98px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .chat-pinned::-webkit-scrollbar { display: none; } .pinned-head { display: flex; align-items: center; gap: 6px; font-size: .7em; color: var(--accent-text); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; } .pinned-head svg { width: 13px; height: 13px; } .pinned-list { display: flex; flex-direction: column; gap: 3px; } .pinned-item { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 7px; cursor: pointer; border-left: 2px solid var(--accent-dim); background: var(--surface-2); } .pinned-item:hover { background: var(--bg); } .pinned-text { flex: 1; min-width: 0; font-size: .82em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pinned-unpin { background: none; border: none; color: var(--muted); cursor: pointer; flex: 0 0 auto; font-size: .9em; padding: 0 4px; line-height: 1; } .pinned-unpin:hover { color: var(--danger); } /* ── Карточки списка чатов ───────────────────────────────────────── Единая структура: [аватар+бейдж] · [имя/подзаголовок/мета] · [дата/действие]. Каждая карточка — ровно 3 текстовые строки → список выглядит ровным. */ .chat-contact { display: flex; gap: 12px; padding: 10px 14px; cursor: pointer; align-items: center; position: relative; transition: background .12s; user-select: none; -webkit-user-select: none; } /* долгое нажатие открывает меню — без выделения текста */ .chat-contact + .chat-contact { border-top: 1px solid var(--border); } .chat-contact:hover { background: var(--surface-2); } .chat-contact.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); } .chat-contact.pinned { background: color-mix(in srgb, var(--accent) 4%, transparent); } .chat-contact.locked { cursor: default; } /* Аватар + бейдж непрочитанного (нижний-левый угол, как в мессенджерах) */ .cc-av { position: relative; flex: 0 0 auto; } .chat-contact .avatar { width: 44px; height: 44px; font-size: 1.02em; } .cc-unread { position: absolute; left: -3px; bottom: -2px; background: var(--accent); color: var(--on-accent); font-size: .62em; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; line-height: 1; box-sizing: border-box; border: 2px solid var(--bg); font-variant-numeric: tabular-nums; } /* Центральная колонка */ .cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cc-name-wrap { display: flex; align-items: center; gap: 5px; min-width: 0; } .cc-name { font-size: .92em; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-pin { font-size: .6em; flex: 0 0 auto; line-height: 1; opacity: .85; } .cc-name-lock { font-size: .8em; flex: 0 0 auto; line-height: 1; } .cc-sub { font-size: .8em; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-meta { display: flex; align-items: center; gap: 8px; min-width: 0; } .cc-bal { flex: 0 0 auto; font-size: .72em; font-weight: 600; color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 10%, transparent); border-radius: 99px; padding: 1px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .cc-bal.low { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); } .cc-tenure { flex: 0 0 auto; font-size: .72em; color: var(--text-dim); white-space: nowrap; } .cc-role { flex: 0 0 auto; font-size: .72em; color: var(--text-dim); white-space: nowrap; } .cc-id { flex: 0 0 auto; font-size: .68em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Правая колонка: дата/время сверху, действие снизу */ .cc-side { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; } .cc-when { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.2; } .cc-when-date { font-size: .68em; color: var(--text-dim); white-space: nowrap; } .cc-when-time { font-size: .66em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Меню «⋯»: резервирует место (нет скачков) — на ховер проявляется, на тач видно всегда */ .cc-menu { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 1.05em; line-height: 1; padding: 4px 9px; border-radius: 6px; opacity: 0; transition: opacity .12s, color .12s, background .12s; } .chat-contact:hover .cc-menu { opacity: .6; } .cc-menu:hover { opacity: 1 !important; color: var(--text); background: var(--surface); } .chat-contact.locked .cc-menu { display: none; } .cc-act { flex: 0 0 auto; background: transparent; border: 1px solid var(--border-2); color: var(--text-dim); cursor: pointer; font-size: .72em; border-radius: 99px; padding: 4px 11px; font-family: var(--font); white-space: nowrap; } .cc-act:hover { border-color: var(--accent-border); color: var(--accent-text); } /* Тач: меню «⋯» видно всегда (плюс долгое нажатие по карточке открывает то же меню) */ @media (hover: none) { .cc-menu { opacity: .55; font-size: 1.2em; padding: 6px 10px; } } /* Подсказка «Пополните баланс» для заблокированного чата */ .cc-pay { position: absolute; right: 14px; bottom: 9px; font-size: .72em; color: var(--danger); white-space: nowrap; pointer-events: none; } .chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .chat-header { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .chat-back { display: none; background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.6em; line-height: 1; padding: 0 4px; flex: 0 0 auto; } .chat-back:hover { color: var(--accent-text); } .chat-h-main { min-width: 0; } .chat-h-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-profile { margin-left: auto; flex: 0 0 auto; } .chat-h-name { font-size: .96em; color: var(--text); font-weight: 500; } .chat-h-role { font-size: .72em; color: var(--muted); } .chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } /* Тонкий ненавязчивый скролл (как в Telegram) — появляется при наведении */ .chat-body::-webkit-scrollbar, .chat-contacts::-webkit-scrollbar { width: 7px; } .chat-body::-webkit-scrollbar-track, .chat-contacts::-webkit-scrollbar-track { background: transparent; } .chat-body::-webkit-scrollbar-thumb, .chat-contacts::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } .chat-body:hover::-webkit-scrollbar-thumb, .chat-contacts:hover::-webkit-scrollbar-thumb { background: var(--border-2); background-clip: padding-box; } .chat-body::-webkit-scrollbar-thumb:hover, .chat-contacts::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; } .chat-contacts { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .bubble-row { display: flex; } .bubble-row.mine { justify-content: flex-end; } .bubble { max-width: 74%; padding: 7px 12px; border-radius: 14px; font-size: .86em; line-height: 1.45; } .bubble-row.theirs .bubble { background: var(--surface-2); border: 1px solid var(--border-2); border-bottom-left-radius: 4px; color: var(--text); } .bubble-row.mine .bubble { background: var(--chat-mine); border-bottom-right-radius: 4px; color: var(--on-chat-mine); } .bubble-text { white-space: pre-wrap; word-break: break-word; display: block; } .bubble-time { display: block; font-size: .64em; color: var(--muted); text-align: right; margin-top: 3px; } .bubble-row.mine .bubble-time { color: color-mix(in srgb, var(--on-chat-mine) 65%, transparent); } /* max-width 100% — картинка не вылезает за пузырь на узких экранах */ .bubble-img { max-width: min(240px, 100%); max-height: 240px; height: auto; border-radius: 9px; display: block; margin-bottom: 4px; } .bubble-file { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-size: .86em; text-decoration: underline; margin-bottom: 2px; } .chat-attach { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 1.1em; transition: background .12s, color .12s; } .chat-attach:hover { background: var(--surface-2); color: var(--accent-text); } .chat-inputbar { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: flex-end; } .chat-input { flex: 1; resize: none; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); padding: 8px 12px; font-family: var(--font); font-size: .9em; line-height: 1.4; max-height: 120px; overflow-y: hidden; touch-action: manipulation; } .chat-input:focus { outline: none; border-color: var(--accent-border); } .chat-input::placeholder { font-size: .92em; color: var(--muted); } /* Прикреплённый файл (ещё не отправлен) */ .chat-staged { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); } .staged-ico { flex: 0 0 auto; } .staged-name { flex: 1; min-width: 0; font-size: .84em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .staged-x { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: .9em; } .staged-x:hover { color: var(--danger); } /* Состояние загрузки: имя + процент + прогресс-бар */ .chat-staged.uploading { flex-direction: column; align-items: stretch; gap: 7px; } .staged-top { display: flex; align-items: center; gap: 8px; } .staged-pct { margin-left: auto; flex: 0 0 auto; font-size: .78em; color: var(--accent-text); font-variant-numeric: tabular-nums; } .staged-progress { height: 5px; background: var(--bg); border-radius: 99px; overflow: hidden; } .staged-fill { height: 100%; width: 0; background: var(--progress); border-radius: 99px; transition: width .15s ease; } .staged-ready { flex: 0 0 auto; font-size: .74em; color: var(--accent-text); font-weight: 600; } /* Кнопка отправки — квадратная со скруглением, компактнее круга */ .chat-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: none; background: var(--btn-primary); color: var(--on-btn-primary); font-size: 1em; cursor: pointer; display: grid; place-items: center; transition: background .12s; } .chat-send:hover { background: var(--btn-primary-hover); } .chat-empty { flex: 1; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; gap: 8px; } @media (max-width: 680px) { /* Один экран за раз: список ИЛИ открытый чат (как в Telegram) */ .chat { grid-template-columns: 1fr; } .chat-side { border-right: none; } .chat-pane { display: none; } .chat.show-chat .chat-side { display: none; } .chat.show-chat .chat-pane { display: flex; } /* Удобный тап-таргет для «к списку» на мобильных */ .chat-back { display: grid; place-items: center; min-width: 38px; height: 38px; margin: -4px 0 -4px -4px; font-size: 1.5em; border-radius: 10px; } .chat-back:active { background: var(--surface); } .chat-contacts { max-height: none; } /* Всё влезает в экран без прокрутки страницы: компактные отступы + точная высота. 55px топбар + 10px верх + 10px низ = 75px служебных. */ body.msg-view .app { padding-top: 10px; padding-bottom: 10px; } .msg-wrap { height: calc(100vh - 75px); height: calc(100dvh - 75px); } /* Компактная шапка чата (−20%) — освобождаем место под сообщения */ .chat-header { gap: 8px; padding: 5px 8px; } .chat-header .avatar { width: 32px; height: 32px; font-size: .85em; } .chat-h-name { font-size: .9em; } .chat-profile { padding: 5px 10px; min-height: 32px; } /* Карточки списка чатов — плотнее, аватар меньше */ .chat-contact { padding: 9px 12px; gap: 10px; } .chat-contact .avatar { width: 40px; height: 40px; font-size: .95em; } /* Поиск контактов — ниже; подсказка мельче (сам шрифт input 16px — иначе iOS зумит при фокусе) */ .chat-search-wrap .input { padding-top: 5px; padding-bottom: 5px; } .chat-search-wrap .input::placeholder { font-size: 14px; } /* Пузыри: шрифт на 1–2 пункта меньше, вертикальные отступы −20%, лента плотнее */ .chat-body { padding: 12px 10px; gap: 6px; } .bubble { font-size: .84em; padding: 6px 11px; max-width: 82%; } /* Поле ввода уже, подсказка мельче, кнопки компактнее */ .chat-inputbar { padding: 6px 8px; gap: 5px; } .chat-input { padding: 7px 12px; } .chat-input::placeholder { font-size: 14px; } .chat-send { width: 38px; height: 38px; } .chat-attach { width: 36px; height: 36px; } /* Поле поиска по чату: на весь ряд, не сжимается в «слс». При активном поиске прячем аватар/имя/«Профиль» — место под ввод (как в Telegram). */ .chat-search-box { flex: 1 1 auto; } .chat-header.searching .avatar, .chat-header.searching .chat-h-main, .chat-header.searching .chat-profile { display: none; } .chat-header.searching .chat-search-box { flex: 1 1 auto; min-width: 0; } } /* ── CRM (канбан) ──────────────────────────────────────────────── */ /* CRM на всю ширину: на странице CRM снимаем ограничение ширины у .app */ body.crm-full .app { max-width: none; } /* Страница урока: конструктор упражнений (текстовые поля) — на 60% шире колонки редактора. */ body.lesson-wide .app { max-width: 1660px; } .crm-page { width: 100%; } .crm-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .crm-tabs-wrap { overflow-x: auto; margin-bottom: 18px; scrollbar-width: thin; } .crm-tabs { border-bottom: 1px solid var(--border); flex-wrap: nowrap; width: max-content; min-width: 100%; } .crm-tab-add { color: var(--accent-text); } .crm-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .crm-board::-webkit-scrollbar, .crm-col-body::-webkit-scrollbar { height: 8px; width: 8px; } .crm-board::-webkit-scrollbar-thumb, .crm-col-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } .crm-col { flex: 0 0 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 180px); transition: border-color .12s, background .12s; } .crm-col.drop { border-color: var(--accent); background: var(--surface-2); } .crm-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .crm-col-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .crm-col-name { font-size: .9em; color: var(--text); flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-col-count { font-size: .72em; color: var(--text-dim); background: var(--surface-2); border-radius: 99px; padding: 1px 8px; } .crm-col-menu { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 1.1em; padding: 0 2px; line-height: 1; } .crm-col-menu:hover { color: var(--text); } .crm-col-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 44px; } .crm-card { background: var(--bg); border: 1px solid var(--border-2); border-radius: 9px; padding: 10px 12px; cursor: grab; transition: border-color .12s; } .crm-card:hover { border-color: var(--accent-border); } .crm-card.dragging { opacity: .45; } .crm-card-title { font-size: .88em; color: var(--text); } .crm-card-contact { font-size: .76em; color: var(--accent-text); margin-top: 4px; } .crm-card-note { font-size: .76em; color: var(--muted); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .crm-add-card { margin: 10px; background: transparent; border: 1px dashed var(--border-2); color: var(--muted); border-radius: 8px; padding: 8px; cursor: pointer; font-family: var(--font); font-size: .82em; transition: color .12s, border-color .12s; } .crm-add-card:hover { color: var(--accent-text); border-color: var(--accent-border); } /* ── Права / группы доступа ────────────────────────────────────── */ .group-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.35); color: #93c5fd; font-size: .72em; white-space: nowrap; } .perm-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); } .perm-row span { font-size: .86em; color: var(--text-dim); } .crm-card-badge { display: inline-block; margin-top: 5px; font-size: .68em; color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 10%, transparent); border: 1px solid var(--accent-border); border-radius: 99px; padding: 1px 7px; } /* Перетаскивание этапов (за заголовок) */ .crm-col-head { cursor: grab; } .crm-col-head:active { cursor: grabbing; } .crm-col-grip { color: var(--muted); font-size: .85em; flex: 0 0 auto; letter-spacing: -1px; } .crm-col.col-dragging { opacity: .45; } .crm-col.drop { outline: 2px dashed var(--accent-dim); outline-offset: -2px; } /* ── CRM: теги, пользовательские поля, поиск ───────────────────── */ .crm-tag { display: inline-flex; align-items: center; font-size: .68em; line-height: 1.4; padding: 1px 8px; border-radius: 99px; white-space: nowrap; color: var(--tag, var(--muted)); background: color-mix(in srgb, var(--tag, var(--muted)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tag, var(--muted)) 45%, transparent); } .crm-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .crm-tag-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .crm-tag-btn { cursor: pointer; font-family: var(--font); opacity: .55; transition: opacity .12s; } .crm-tag-btn:hover { opacity: .85; } .crm-tag-btn.on { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag, var(--accent)) 45%, transparent); } .crm-add-tag, .crm-add-field { border-style: dashed !important; } .crm-fields-sec { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); } .crm-field-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crm-field-del { padding: 2px 6px !important; min-height: 0 !important; opacity: .6; } .crm-field-del:hover { opacity: 1; } .crm-search-res { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; margin-top: 6px; } .crm-search-empty { color: var(--muted); font-size: .85em; padding: 14px 4px; text-align: center; } .crm-search-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 9px; cursor: pointer; transition: border-color .12s; } .crm-search-row:hover { border-color: var(--accent-border); } .crm-search-main { min-width: 0; } .crm-search-title { font-size: .9em; color: var(--text); font-weight: 500; } .crm-search-loc { display: flex; align-items: center; gap: 6px; font-size: .74em; color: var(--text-dim); white-space: nowrap; flex: 0 0 auto; } .crm-search-pipe { color: var(--muted); } /* Перетаскивание пунктов меню (долгое нажатие → «дрожание») */ @keyframes nav-wiggle { 0% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } 100% { transform: rotate(-1.6deg); } } .nav.reordering a { animation: nav-wiggle .28s ease-in-out infinite; cursor: grab; } .nav.reordering a:active { cursor: grabbing; } .nav a.nav-dragging { opacity: .45; } .nav a { user-select: none; -webkit-user-drag: none; } .nav.reordering a { -webkit-user-drag: element; } /* ── Общая адаптивность под мобильные ──────────────────────────── */ @media (max-width: 760px) { /* iOS Safari зумит страницу при фокусе на поле с font-size < 16px — поэтому 16px на мобиле. !important — это безусловный «пол»: иначе классы вроде .chat-input (.9em) перебивают голый селектор textarea по специфичности и поле остаётся < 16px → глюк фокуса/зума, из-за которого по тапу не активируется ввод и не выезжает клавиатура в чате. */ .input, .textarea, .select, input, textarea, select { font-size: 16px !important; } .app { padding: 22px 14px 64px; } .topbar-inner { height: 54px; gap: 10px; padding: 0 12px; } .brand { display: none; } /* на мобиле логотип школы скрыт */ .nav { gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav::-webkit-scrollbar { display: none; } .nav a { padding: 7px 9px; font-size: .82em; white-space: nowrap; } .who-text { display: none; } /* Аватар+шестерёнка вплотную к иконке выхода — экономим место */ .topbar-right { gap: 4px; } .who-btn { padding-right: 3px; } .page-head { margin-bottom: 20px; } .page-title { font-size: 1.4em; } .split { grid-template-columns: 1fr; } /* Тач-таргеты: кнопки не мельче 42px, в формах — во всю ширину */ .btn { min-height: 42px; } .btn-sm { min-height: 36px; } .form-actions { flex-wrap: wrap; } .form-actions .btn { flex: 1 1 auto; } /* Действия в строках-карточках: ровный «подвал» на всю ширину с разделителем — вместо кнопок, болтающихся справа при переносе */ .row .row-actions { flex: 1 1 100%; margin-left: 0; border-top: 1px solid var(--border); padding-top: 10px; } .row .row-actions .btn { flex: 1 1 auto; } /* Вкладки не ломают строку — скроллятся горизонтально без полосы */ .tabs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap; } .tabs::-webkit-scrollbar { display: none; } .tab { white-space: nowrap; flex: 0 0 auto; } /* Тост — над нижним safe-area, длинный текст переносится */ .toast { bottom: calc(18px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); white-space: normal; text-align: center; } } @media (max-width: 420px) { .nav a { padding: 7px 7px; font-size: .78em; } .btn { padding: 10px 14px; } } /* ── Настройки ─────────────────────────────────────────────────── */ .settings-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; } .settings-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 78px; } .settings-nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--text-dim); cursor: pointer; font-family: var(--font); font-size: .9em; text-align: left; transition: background .12s, color .12s; } .settings-nav-item:hover { background: var(--surface); color: var(--text); } .settings-nav-item.active { background: var(--surface); color: var(--selected); border-color: var(--border); } .sn-ico { font-size: 1.1em; line-height: 1; } .settings-panel { min-width: 0; } .settings-panel .card .field:last-child { margin-bottom: 0; } .kv { display: flex; justify-content: space-between; gap: 12px; font-size: .85em; color: var(--text-dim); padding: 6px 0; border-top: 1px solid var(--border); } .kv b { color: var(--text-dim); font-weight: 600; } /* Редактор меню по ролям (Настройки → Меню и навигация) */ .navcfg-head { font-size: .95em; margin-bottom: 12px; } .navcfg-list { display: flex; flex-direction: column; gap: 8px; } .navcfg-row { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .navcfg-row.navcfg-off { opacity: .5; } .navcfg-move { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; } .navcfg-arrow { padding: 1px 8px; line-height: 1.3; min-width: 30px; } .navcfg-arrow:disabled { opacity: .3; cursor: default; } .navcfg-name { flex: 1 1 auto; min-width: 0; } .navcfg-vis { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: .8em; color: var(--text-dim); cursor: pointer; white-space: nowrap; } /* Память: полоса диска + разбивка по типам/таблицам */ .storage-bar { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); margin: 4px 0 10px; } .storage-seg { height: 100%; min-width: 2px; transition: width .3s ease; } .storage-seg:not(:last-child) { box-shadow: inset -1px 0 0 rgba(0,0,0,.25); } .storage-legend { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .storage-legend b { font-size: 1.05em; color: var(--accent-text); } .storage-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .storage-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border); } .storage-row:first-child { border-top: none; } .storage-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; } .storage-row-name { flex: 1 1 auto; min-width: 0; font-size: .88em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .storage-row-size { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text); min-width: 64px; text-align: right; } .storage-row-acts { flex: 0 0 auto; display: flex; gap: 6px; min-width: 76px; justify-content: flex-end; } .storage-act { padding: 4px 9px; line-height: 1; } /* Файловый менеджер (Настройки → Память → «Открыть файловый менеджер») */ .fm { display: flex; flex-direction: column; gap: 10px; } .fm-crumbs { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: .86em; } .fm-crumb { background: none; border: none; color: var(--accent-text); cursor: pointer; padding: 3px 6px; border-radius: 6px; font-family: var(--font); font-size: 1em; } .fm-crumb:hover { background: var(--surface-2); } .fm-sep { color: var(--muted); } .fm-list { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); } .fm-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border); } .fm-row:first-child { border-top: none; } .fm-folder { cursor: pointer; } .fm-folder:hover { background: var(--surface-2); } .fm-ico { font-size: 1.35em; width: 44px; min-width: 44px; text-align: center; flex: 0 0 auto; } .fm-thumb { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 7px; overflow: hidden; display: block; background: var(--surface-2); } .fm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fm-main { flex: 1 1 auto; min-width: 0; } .fm-name { font-size: .9em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-sub { font-size: .74em; color: var(--muted); margin-top: 1px; } .fm-media { display: block; margin-top: 7px; width: 100%; max-width: 340px; } .fm-media:not(.fm-video) { height: 36px; } .fm-video { max-height: 200px; border-radius: 8px; background: #000; } .fm-chev { color: var(--muted); font-size: 1.2em; flex: 0 0 auto; } .fm-folder:hover .fm-chev { color: var(--accent-text); } .fm-dl, .fm-del { flex: 0 0 auto; padding: 5px 10px; line-height: 1; } @media (max-width: 760px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { flex-direction: row; overflow-x: auto; position: static; scrollbar-width: none; } .settings-nav::-webkit-scrollbar { display: none; } .settings-nav-item { white-space: nowrap; flex: 0 0 auto; } .navcfg-vis span:last-child { display: none; } } /* ── Статистика пользователя в строке (график + метрики) ───────── */ .user-stats { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .sparkline { display: inline-flex; width: 96px; height: 30px; flex: 0 0 auto; background: var(--bg); border: 1px solid var(--border-2); border-radius: 8px; padding: 2px 4px; } .sparkline svg { width: 100%; height: 100%; display: block; } .us-metrics { display: flex; flex-wrap: wrap; gap: 2px 12px; max-width: 210px; } .us-metric { font-size: .74em; color: var(--text-dim); white-space: nowrap; } .us-metric b { color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .user-stats { flex: 1 1 100%; order: 5; } .us-metrics { max-width: none; } } /* ── Плашки пользователей (ученик/учитель): единый виджет ──────── */ .urow { flex-wrap: nowrap; gap: 14px; align-items: center; } .avatar.urow-av { width: 52px; height: 52px; font-size: 1.25em; } /* Фикс. ширина блока имени → статистика встаёт ровным столбцом, не «скачет» от длины имени */ .urow-id { display: flex; flex-direction: column; gap: 7px; flex: 0 0 200px; min-width: 0; } .urow-nameline .row-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .urow-nameline { flex-wrap: nowrap; } .urow-nameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .urow-idn { font-size: .72em; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .3px; } .urow .toggle-pill { align-self: flex-start; font-size: .76em; padding: 4px 10px; } /* Общая оценка учителя */ .urow-score { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; gap: 2px; } .urow-score-cap { font-size: .72em; color: var(--text-dim); white-space: nowrap; } .urow-score-val { font-size: 2.1em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-dim); } /* Цвет крупной оценки — сигнал по баллу (низкий/средний/высокий), фиксированный, вне палитры школы */ .urow-score-val.good { color: var(--grade-good); } .urow-score-val.mid { color: var(--grade-mid); } .urow-score-val.low { color: var(--grade-low); } /* Виджет: график (с числом уроков) + метрики столбиком */ .urow-stat { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .urow-chart { position: relative; flex: 0 0 auto; } /* Единая высота модулей строки (график, A/Y/M, кнопки) — всё ровно по высоте. 64px вмещает 2 кнопки (~31px) и 3 кнопки A/Y/M (20px) без выхода за края. */ .urow { --urow-h: 64px; } .urow-chart .sparkline { display: block; width: 168px; height: var(--urow-h); background: transparent; border: 1px solid var(--border-2); border-radius: 9px; padding: 6px; box-sizing: border-box; } .urow-chart .sparkline svg { display: block; } .urow-chart-cap { position: absolute; top: 6px; left: 10px; font-size: .72em; color: var(--text-dim); z-index: 1; pointer-events: none; } .urow-chart-cap b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .urow-metrics { display: flex; flex-direction: column; gap: 5px; } .urow-metric { font-size: .8em; white-space: nowrap; } .urow-metric-k { color: var(--muted); } .urow-metric b { color: var(--accent-text); font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; } .urow-spark-holder { display: block; } .urow-spacer { flex: 1 1 auto; min-width: 8px; } /* Левый спейсер — центрирует блок статистики/графика в плашке */ .urow-lead { flex: 1 1 auto; min-width: 8px; } .urow-btns { display: flex; flex-direction: column; justify-content: space-between; height: var(--urow-h); flex: 0 0 auto; } .urow-btns .btn { width: 100%; } /* Переключатель диапазона графика: A (всё время) / Y (год) / M (месяц) — ровно по высоте графика, кнопки равномерно сверху донизу */ .urow-range { display: flex; flex-direction: column; justify-content: space-between; height: var(--urow-h); flex: 0 0 auto; } .urow-range-btn { width: 24px; height: 20px; display: grid; place-items: center; font-size: .72em; font-weight: 700; border: 1px solid var(--border-2); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .urow-range-btn:hover { color: var(--text); border-color: var(--muted); } .urow-range-btn.active { background: var(--btn-primary); color: var(--on-btn-primary); border-color: transparent; } /* Кольцо удовлетворённости вокруг аватара ученика — переливается в пределах одного цвета */ .sat-ring { position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; } .sat-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--c-lo), var(--c-hi), var(--c-mid), var(--c-hi), var(--c-lo)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: sat-shimmer 7s linear infinite; } .sat-ring .avatar.urow-av { width: 52px; height: 52px; } /* Бокс без кольца — занимает то же место, но без переливающейся рамки */ .sat-ring.none::before { display: none; } @keyframes sat-shimmer { to { transform: rotate(360deg); } } .sat-ring.good { --c-lo: #0e8a5f; --c-mid: #34d399; --c-hi: #9af5cf; } .sat-ring.mid { --c-lo: #a9760a; --c-mid: #fbbf24; --c-hi: #fde9a8; } .sat-ring.low { --c-lo: #a83232; --c-mid: #f87171; --c-hi: #fcc4c4; } @media (prefers-reduced-motion: reduce) { .sat-ring::before { animation: none; } } /* Шеврон сворачивания — только на мобильных */ .urow-chevron { display: none; } /* ── Карточка ученика/учителя на телефоне: свёрнута → разворачивается по тапу ── Свёрнуто: аватар + имя/статус + шеврон. Развёрнуто (.is-open): общая оценка в правом верхнем углу, ниже A/Y/M + график + метрики в линию, ещё ниже — «Классы»/«Написать»/«Профиль». Едино для обеих ролей. */ @media (max-width: 760px) { .urow { flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 14px; } .urow .sat-ring, .urow .sat-ring .avatar.urow-av, .urow > .avatar.urow-av, .urow .urow-nameline { cursor: pointer; } .urow .sat-ring, .urow > .avatar.urow-av { flex: 0 0 auto; } .urow .urow-id { flex: 0 1 auto; min-width: 0; } /* Шеврон справа */ .urow .urow-chevron { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; margin-left: auto; padding: 0; border-radius: 9px; border: 1px solid var(--border-2); background: transparent; color: var(--muted); cursor: pointer; } .urow .urow-chevron:hover { color: var(--accent-text); border-color: var(--accent-border); } .urow .urow-chevron svg { width: 18px; height: 18px; } /* Свёрнуто — прячем всё, кроме шапки */ .urow .urow-stat, .urow .urow-spacer, .urow .urow-lead, .urow .urow-score, .urow .classes-chip, .urow .urow-btns { display: none; } /* Развёрнуто */ .urow.is-open .urow-chevron { display: none; } /* Общая оценка — в правый верхний угол, прижата к правому краю */ .urow.is-open .urow-score { display: flex; flex: 0 0 auto; margin-left: auto; align-items: flex-end; text-align: right; } .urow.is-open .urow-stat { display: flex; flex: 1 1 auto; min-width: 0; gap: 10px; } .urow.is-open .urow-chart { flex: 1 1 auto; min-width: 60px; } .urow.is-open .urow-chart .sparkline { width: 100%; } .urow.is-open .urow-metrics { flex: 0 0 auto; } /* Спейсер — принудительный перенос строки (нулевой высоты) перед кнопками. Оценка остаётся в шапке (margin-left:auto), график/метрики переносятся сами. */ .urow.is-open .urow-spacer { display: block; flex: 0 0 100%; width: 100%; height: 0; min-width: 0; margin: 0; } .urow.is-open .classes-chip { display: flex; flex: 1.2 1 0; width: auto; min-width: 0; min-height: 0; height: 50px; flex-direction: row; padding: 0 14px; } .urow.is-open .urow-btns { display: flex; flex: 1.6 1 0; flex-direction: row; align-items: stretch; height: 50px; gap: 8px; justify-content: stretch; } .urow.is-open .urow-btns .btn { flex: 1; } } /* Список пользователей: вкладки подняты ближе к шапке (без подзаголовка) */ .users-head { margin-bottom: 12px; align-items: center; } @media (max-width: 900px) { .urow { flex-wrap: wrap; gap: 14px; } .urow-spacer, .urow-lead { display: none; } .urow-id { flex: 1 1 auto; } .urow-btns { flex-direction: row; height: auto; justify-content: flex-start; gap: 6px; } } /* Поп-ап оценки урока (шкала 1–10) */ .rate-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 300px; margin: 0 auto; } .rate-btn { height: 46px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 1em; font-weight: 700; font-family: var(--font); font-variant-numeric: tabular-nums; transition: transform .1s, background .12s, color .12s, border-color .12s; } .rate-btn:hover { background: var(--btn-primary); color: var(--on-btn-primary); border-color: var(--btn-primary); transform: translateY(-2px); } .rate-hint { display: flex; justify-content: space-between; max-width: 300px; margin: 12px auto 2px; font-size: .76em; color: var(--muted); } /* ── Карточка ученика (новый дизайн) ─────────────────────────── */ .student-row { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; } /* Левая колонка: фиксированная ширина */ .srow-left { flex: 0 0 190px; display: flex; flex-direction: column; gap: 2px; } .srow-left .row-nameline { flex-wrap: nowrap; gap: 6px; } .srow-left .toggle-pill { align-self: flex-start; margin-top: 5px; font-size: .78em; padding: 4px 10px; } .srow-left .row-sub { margin-top: 3px; } /* Центральный блок: спарклайн + метрики — НЕ растягивается */ .srow-center { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; } /* Спарклайн крупнее + тёмный фон-коробка */ .student-row .sparkline { width: 120px !important; height: 60px !important; background: rgba(0,0,0,.35); border-radius: 8px; padding: 6px; box-sizing: border-box; } /* Метрики в столбик */ .student-row .us-metrics { display: flex; flex-direction: column; gap: 3px; max-width: none; } .student-row .us-metric { font-size: .8em; } /* Распорка: прижимает классы и кнопки к правому краю */ .srow-spacer { flex: 1 1 auto; } /* Чип классов */ .srow-classes { flex: 0 0 auto; } .classes-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: .8em; font-weight: 500; white-space: nowrap; width: 124px; min-height: 60px; box-sizing: border-box; border: 1.5px dashed rgba(255,255,255,.2); background: transparent; color: var(--muted); transition: border-color .18s, color .18s, background .18s; } .classes-chip:hover { border-color: var(--accent); color: var(--accent-text); } .classes-chip.has-classes { border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--accent-text); } .classes-chip .cc-ico { font-size: 1.15em; line-height: 1; } /* Правые кнопки стопкой */ .srow-btns { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; } .srow-btns .btn { min-width: 96px; justify-content: center; text-align: center; } /* Адаптив ≤760px */ @media (max-width: 760px) { .student-row { flex-wrap: wrap; gap: 16px; align-items: flex-start; } /* Ряд 1: инфо слева, график прижат к правому краю */ .srow-left { flex: 0 0 auto; order: 1; } .srow-center { flex: 0 0 auto; order: 2; margin-left: auto; } .srow-spacer { display: none; } /* Ряд 2: «Добавить класс» во всю ширину, в одну строку */ .srow-classes { order: 3; flex: 1 1 100%; } .classes-chip { width: 100%; box-sizing: border-box; flex-direction: row; gap: 8px; min-height: 52px; padding: 12px 16px; } /* Ряд 3: кнопки во всю ширину, поровну */ .srow-btns { flex-direction: row; order: 4; flex: 1 1 100%; } .srow-btns .btn { flex: 1; } } /* ══ Конструктор курсов ════════════════════════════════════════ */ /* — Счётчики в строке класса — */ .class-counts { display: flex; gap: 16px; flex: 0 0 auto; align-items: center; } .class-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; } .class-sub-text { color: var(--muted); font-size: .78em; } .class-sub-name { color: var(--text-dim); font-size: .8em; font-weight: 500; } /* Кнопка «Открыть →» строки класса прижата вправо (особенно при переносе на моб.) */ .cls-row .row-actions { margin-left: auto; } /* — Детализация списаний класса — */ .chg-hint { color: var(--text-dim); font-size: .85em; line-height: 1.5; margin-bottom: 14px; } .chg-list { display: flex; flex-direction: column; gap: 8px; } .chg-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; } .chg-when { display: flex; flex-direction: column; min-width: 120px; } .chg-date { font-size: .9em; color: var(--text); } .chg-time { font-size: .76em; color: var(--muted); margin-top: 1px; } .chg-status { font-size: .76em; padding: 3px 10px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; } .chg-completed { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .chg-noshow { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .chg-nobalance { color: #c4b5fd; background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.4); } .chg-cancelled { color: var(--muted); background: var(--surface-2); border-color: var(--border-2); } .chg-resched { color: var(--warn); background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.4); } .chg-tail { display: flex; align-items: center; gap: 12px; margin-left: auto; } .chg-rating { font-size: .8em; color: var(--warn); white-space: nowrap; } .chg-amount { font-size: .82em; font-variant-numeric: tabular-nums; white-space: nowrap; } .chg-amount.neg { color: var(--danger); font-weight: 600; } .chg-amount.zero { color: var(--muted); } /* ── Дашборд ученика на странице класса ────────────────────────── */ .cd-dash { display: flex; gap: 22px; align-items: stretch; margin-top: 14px; flex-wrap: wrap; } .cd-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .cd-cap { font-size: .8em; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .cd-col-mat { flex: 0 0 230px; } .cd-col-stats { flex: 1 1 360px; justify-content: flex-start; } .cd-col-mat .course-card { width: 100%; margin: 0; } /* Плитки-метрики: уроки / посещаемость / оценка */ .cd-stats { display: flex; flex-direction: column; gap: 12px; } .cd-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cd-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 16px 15px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cd-stat-val { font-size: 2rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -.5px; } .cd-stat-val.good { color: var(--grade-good); } .cd-stat-val.mid { color: var(--grade-mid); } .cd-stat-val.low { color: var(--grade-low); } .cd-stat-cap { font-size: .78em; color: var(--muted); } /* Полоса последних занятий: сегмент = занятие, цвет = статус */ .cd-strip-wrap { display: flex; flex-direction: column; gap: 6px; } .cd-strip { display: flex; gap: 5px; } /* Сегменты тянутся во всю ширину полосы (как плашки-метрики выше): flex-grow заполняет строку целиком независимо от числа занятий — без max-width, иначе «не дотягивались». */ .cd-seg { flex: 1 1 0; min-width: 0; height: 22px; border-radius: 6px; cursor: default; background: var(--surface-2); transition: transform .12s ease, filter .12s ease; } .cd-seg:hover { transform: translateY(-2px); filter: brightness(1.25); } /* Цвета статусов берём из тех же токенов, что и чипы уроков в расписании: «Проведённый урок» (--lesson-done) и «Неявка» (--noshow) — один цвет на настройку в «Цветах платформы». */ .cd-seg.ok { background: color-mix(in srgb, var(--lesson-done) 40%, transparent); } .cd-seg.bad { background: color-mix(in srgb, var(--noshow) 50%, transparent); } .cd-seg.nobal { background: rgba(167,139,250,.45); } .cd-seg.warn { background: rgba(251,191,36,.4); } .cd-seg.off { background: var(--border-2); } .cd-strip-cap { font-size: .72em; color: var(--muted); letter-spacing: .4px; } .cd-empty { color: var(--muted); font-size: .9em; padding: 16px 0; } .cd-members { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .cd-member-role { color: var(--muted); font-weight: 400; } .cd-teacher { display: inline-flex; align-items: center; gap: 6px; } .cd-teacher .avatar { flex: 0 0 auto; } .cd-enter { display: inline-flex; align-items: center; gap: 7px; } .cd-enter-ico { display: inline-flex; } .cd-enter-ico svg { display: block; } .cd-nostudent { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Шеврон сворачивания списка материалов класса */ .mat-head { user-select: none; } .mat-toggle { background: none; border: none; cursor: pointer; padding: 0 2px; line-height: 1; color: var(--muted); font-size: 1.1em; transition: transform .18s ease, color .15s ease; } .mat-head:hover .mat-toggle { color: var(--text); } .mat-toggle.collapsed { transform: rotate(-90deg); } @media (max-width: 900px) { .cd-dash { gap: 16px; } .cd-col-mat, .cd-col-stats { flex: 1 1 100%; } .cd-stat { padding: 13px 12px 11px; } .cd-stat-val { font-size: 1.5rem; } } .class-bal { display: inline-flex; align-items: center; gap: 2px; font-size: .8em; padding: 3px 10px; border-radius: 99px; color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--badge-accent) 35%, transparent); } .class-bal b { font-weight: 700; } .class-bal.low { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } button.class-bal.editable { cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; } button.class-bal.editable:hover { border-color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 16%, transparent); } .class-bal-edit { margin-left: 5px; font-weight: 700; opacity: .7; } .class-locked { font-size: 1.1em; flex: 0 0 auto; } .btn-locked { opacity: .6; } /* ══ Пополнение баланса (тарифная сетка) ═══════════════════════ */ .topup-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .topup-lang { padding: 7px 14px; border-radius: 999px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: .88em; transition: background .15s, color .15s, border-color .15s; } .topup-lang:hover { color: var(--text); border-color: var(--border-2); } .topup-lang.active { color: var(--selected); border-color: var(--accent-border); background: color-mix(in srgb, var(--selected) 8%, transparent); } .topup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .topup-card { position: relative; cursor: pointer; text-align: center; padding: 18px 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--border); transition: border-color .15s, background .15s, transform .1s; } .topup-card:hover { border-color: var(--border-2); transform: translateY(-2px); } .topup-card.selected { border-color: var(--selected); background: color-mix(in srgb, var(--selected) 7%, transparent); } .topup-card-lessons { font-size: 1.05em; color: var(--text); margin-bottom: 4px; } .topup-card-lessons b { font-size: 1.7em; font-weight: 700; color: var(--accent-text); } .topup-card-per { font-size: .78em; color: var(--muted); margin-bottom: 10px; } .topup-card-total { font-size: 1.15em; font-weight: 700; color: var(--text); } .topup-card-valid { font-size: .74em; color: var(--text-dim); margin-top: 6px; } .topup-card-check { position: absolute; top: 8px; right: 10px; color: var(--accent-text); font-weight: 700; opacity: 0; transition: opacity .15s; } .topup-card.selected .topup-card-check { opacity: 1; } .topup-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .topup-pay:disabled { opacity: .5; cursor: not-allowed; } .pay-return-wrap { max-width: 520px; margin: 8vh auto 0; } .pay-return { text-align: center; } /* ══ Виртуальная комната класса ════════════════════════════════ */ .room { display: flex; gap: 20px; align-items: flex-start; } .room-book-pane { flex: 1 1 auto; min-width: 0; } /* Присутствие (онлайн) */ .room-presence { display: flex; gap: 8px; flex-wrap: wrap; } .room-online { display: inline-flex; align-items: center; gap: 6px; font-size: .78em; color: var(--text-dim); padding: 3px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); } .room-online.me { color: var(--text); } .online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); } /* Шапка учебника: на десктопе одна строка [+материал][материал][‹][урок][›]; на мобиле (≤760px) — две строки: [материал][+] и [‹][урок][›]. */ .room-book-head { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } .room-mat-title { font-size: 1.3em; font-weight: 300; margin-bottom: 12px; } /* legacy: предпросмотр урока */ /* Левая (материал) и правая (навигатор урока) половины — равные, делятся по центру ровно */ .room-book-top { display: flex; align-items: stretch; gap: 8px; flex: 1 1 0; min-width: 0; } .room-mat-label { display: inline-flex; align-items: center; gap: 4px; font-size: 1.02em; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* «Добавить материал»: на десктопе первой (order:-1), на мобиле — справа от материала */ .room-mat-add { order: -1; flex: 0 0 auto; white-space: nowrap; } .room-mat-add .rma-mini { display: none; } /* Селектор материала растягивается на всю левую половину (кроме кнопки «+ материал») */ .room-book-top .room-pick-mat, .room-book-top .room-mat-label { flex: 1 1 auto; min-width: 0; } /* Кнопка-селектор (материал/урок): открывает дропдаун */ .room-pick { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: .9em; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, background .15s; text-align: left; } .room-pick:hover { border-color: var(--border-2); } .room-pick-mat { font-weight: 500; } .room-pick-ico { flex: 0 0 auto; } .room-pick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Урок: название растягивается → счётчик/оценка/каретка прижаты к правому краю */ .room-pick-lesson .room-pick-text { flex: 1 1 auto; } .room-pick-counter { flex: 0 0 auto; font-size: .82em; color: var(--text-dim); font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); } .room-pick-caret { flex: 0 0 auto; margin-left: auto; color: var(--text-dim); font-size: .85em; } .room-pick-lesson.done { border-color: color-mix(in srgb, var(--accent) 35%, transparent); } /* Навигатор урока — ‹ текущий ▾ ›; стрелки только иконками (квадратные кнопки) */ .room-lessonnav { display: flex; align-items: stretch; gap: 8px; flex: 1 1 0; min-width: 0; } .room-lessonnav .room-pick-lesson { flex: 1 1 auto; } .room-step { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; min-height: 40px; padding: 0; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); line-height: 1; transition: border-color .15s, color .15s, opacity .15s; } .room-step:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent-text); } .room-step:disabled { opacity: .35; cursor: default; } .room-step-arrow { font-size: 1.4em; line-height: 1; } /* Дропдаун-навигация (поповер) */ .room-pop-layer { position: fixed; inset: 0; z-index: 90; } .room-pop { position: absolute; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; } .room-pop-search { margin-bottom: 6px; flex: 0 0 auto; } /* min-height:0 обязателен: без него флекс-элемент не сжимается ниже своей высоты по контенту, overflow-y не срабатывает → список клиппится, а колесо прокручивает страницу вместо списка. overscroll-behavior:contain — чтобы прокрутка не «протекала» на страницу на краях списка. */ .room-pop-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; } .room-pop-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .9em; background: transparent; border: 1px solid transparent; color: var(--text-dim); transition: background .12s, color .12s; } .room-pop-item:hover { background: var(--surface-2); color: var(--text); } .room-pop-item.active { background: var(--surface-2); color: var(--selected); border-color: var(--accent-border); } .room-pop-num { flex: 0 0 auto; width: 22px; text-align: center; font-size: .8em; color: var(--muted); font-variant-numeric: tabular-nums; } .room-pop-item.active .room-pop-num { color: var(--selected); } .room-pop-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-pop-ico, .room-pop-check { flex: 0 0 auto; } .room-pop-check { color: var(--accent-text); } .room-pop-empty { padding: 16px 10px; text-align: center; color: var(--muted); font-size: .88em; } .room-sec-score { font-size: .85em; color: var(--accent-text); font-variant-numeric: tabular-nums; } .room-content { margin-top: 0; } .room-exercises { display: flex; flex-direction: column; gap: 12px; } .room-ex { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; transition: box-shadow .2s, border-color .2s; } .room-ex:hover { border-color: var(--border-2); } /* Переносы строк из конструктора сохраняем везде, где рендерится упражнение (комната/книга), а не только в плеере (.slide-view) */ .ex-render .body-text { white-space: pre-wrap; color: var(--text-dim); line-height: 1.8; } .room-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .room-ex-head .book-ex-type { margin-bottom: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-ex-tools { display: flex; gap: 6px; flex: 0 0 auto; } .btn-xs { padding: 3px 9px; font-size: .76em; border-radius: 7px; } .room-tool { gap: 5px; } .room-tool.active { color: var(--selected); border-color: var(--accent-border); } .rt-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .rt-ico svg { display: block; } /* Упражнение, скрытое учителем от ученика */ .room-ex-hint { display: none; align-items: center; gap: 8px; padding: 20px 16px; color: var(--muted); font-size: .9em; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--radius-sm); } .room-ex.ex-hidden { opacity: .55; } /* учителю: помечаем приглушением, контент виден */ .room-exercises.is-student .room-ex.ex-hidden { opacity: 1; } .room-exercises.is-student .room-ex.ex-hidden > .ex-render { display: none; } .room-exercises.is-student .room-ex.ex-hidden .room-ex-hint { display: flex; } .room-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; } .room-result { font-size: .95em; color: var(--accent-text); } /* Подсветка-мигание при «указать на упражнение» */ @keyframes ex-point { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); border-color: var(--border); } 20%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); } } .room-ex.pointed { animation: ex-point 1.8s ease; } /* Ожидание участника — компактная пилюля рядом с кнопкой «Позвонить» (room-top-row), не на всю ширину. Оба — той же высоты (40px), что и навигатор материала/урока слева (room-pick/room-step), и на одном уровне с ним. */ .room-top-row { display: flex; align-items: flex-start; gap: 10px; } .room-wait { flex: 1 1 auto; min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; padding: 4px 14px; border-radius: var(--radius-sm); /* Цвет — светофор по состоянию партнёра (см. --wait-c ниже): зелёный «в классе», жёлтый «ждём», красный «офлайн». Берём --grade-* : это сигнал «хорошо/средне/плохо», а НЕ брендовый цвет, поэтому он намеренно вне палитры школы (как оценки, см. CLAUDE.md) — иначе у школы с перекрашенным акцентом «в классе» и «офлайн» могли бы слиться. Фон/рамка считаются из одного токена через color-mix (правило проекта: не rgba-литералы). */ --wait-c: var(--grade-mid); background: color-mix(in srgb, var(--wait-c) 8%, transparent); border: 1px solid color-mix(in srgb, var(--wait-c) 35%, transparent); color: var(--wait-c); font-size: .82em; line-height: 1.3; } .room-wait.inclass { --wait-c: var(--grade-good); } /* партнёр в комнате — можно звонить */ .room-wait.offline { --wait-c: var(--grade-low); } /* платформа у него не открыта */ .room-wait-sub { margin-top: 2px; font-size: .92em; opacity: .85; } /* Никто не ждёт (пилюля скрыта) — «Позвонить» одна занимает всю строку, как раньше */ .room-wait.hidden ~ .room-call { flex: 1 1 auto; } /* Партнёра в комнате нет — звонить некому: кнопку убираем, плашка занимает строку целиком. Прячем ТОЛЬКО .idle: входящий звонок (.ringing) и активный (.active) скрывать нельзя — position:fixed внутри display:none не рендерится, и на мобиле пропал бы весь виджет звонка. */ .room-top-row.waiting .room-call.idle { display: none; } /* Чат — высота под окно (учёт шапки сверху), лента скроллится внутри, ввод всегда виден */ /* Правая колонка комнаты: строка ожидание+звонок сверху + чат снизу */ .room-right { flex: 0 0 306px; position: sticky; top: 76px; /* чат чуть уже (−10%) — класс шире */ display: flex; flex-direction: column; gap: 12px; /* низ панели (чат) должен доходить почти до низа окна — раньше формула оставляла ~114px пустого места, из-за чего низ чата не совпадал с низом видимой части урока */ height: calc(100vh - 96px); min-height: 300px; max-height: calc(100vh - 96px); } .room-chat { flex: 1 1 auto; min-height: 120px; position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .room-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .room-chat-title { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font-size: .95em; } .room-chat-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-chat-role { font-size: .7em; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border: 1px solid var(--border-2); border-radius: 99px; padding: 1px 7px; flex: 0 0 auto; } .room-chat-name { font-size: .95em; flex: 1 1 auto; } .room-chat-sel { flex: 1 1 auto; padding: 5px 8px; font-size: .85em; min-width: 0; } .room-chat-ctrls { display: flex; gap: 2px; margin-left: auto; flex: 0 0 auto; } .room-chat-collapse { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.05em; padding: 2px 6px; border-radius: 6px; } .room-chat-collapse:hover { color: var(--text); background: var(--surface-2); } .room-chat-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } /* Сообщения прижаты к НИЗУ ленты (к полю ввода), как в любом мессенджере: при паре сообщений пустота остаётся СВЕРХУ, а не зазором над строкой ввода. ⚠️ Именно margin-top:auto, а НЕ justify-content:flex-end — у flex-контейнера с overflow-y:auto флекс-энд в WebKit оставляет верх переполненной ленты недоступным для скролла (старые сообщения не проматываются), а авто-маржин при переполнении сам становится 0 и скроллу не мешает. */ .room-chat-feed > :first-child { margin-top: auto; } .room-chat-feed::-webkit-scrollbar { width: 7px; } .room-chat-feed::-webkit-scrollbar-track { background: transparent; } .room-chat-feed::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; transition: background .2s; } .room-chat-feed:hover::-webkit-scrollbar-thumb { background: var(--border-2); } .room-chat-feed::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); } .room-msg { display: flex; } .room-msg.mine { justify-content: flex-end; } .room-msg-body { max-width: 80%; padding: 7px 11px; border-radius: 12px; font-size: .82em; line-height: 1.4; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); white-space: pre-wrap; word-break: break-word; } .room-msg.mine .room-msg-body { background: var(--chat-mine); border-color: transparent; color: var(--on-chat-mine); } .room-msg-who { font-size: .72em; color: var(--muted); margin-bottom: 3px; } .room-chat-observe { flex: 0 0 auto; padding: 11px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: .8em; text-align: center; } .room-chat-input { flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); } .room-chat-input .input { flex: 1 1 auto; touch-action: manipulation; } /* Прогресс-бар загрузки вложения в чате комнаты (использует общие .staged-*) */ .room-chat-staged { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; margin: 0 14px 8px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); } .room-chat-empty { color: var(--muted); font-size: .85em; text-align: center; padding: 20px; margin: auto; } /* «Язычок» — ручка изменения высоты чата (ПК/планшет). На мобиле чат — фикс. дока внизу, ручка не нужна. */ .room-chat-resize { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 18px; cursor: ns-resize; touch-action: none; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .room-chat-resize::before { content: ''; width: 44px; height: 5px; border-radius: 99px; background: var(--muted); transition: background .15s, width .15s; } .room-chat-resize:hover, .room-chat-resize.dragging { background: var(--surface); } .room-chat-resize:hover::before, .room-chat-resize.dragging::before { background: var(--accent); width: 56px; } .room-chat.full .room-chat-resize { display: none; } @media (max-width: 900px) { .room-chat-resize { display: none; } } /* Свёрнутый чат — плавающая кнопка */ .room-chat.collapsed { position: fixed; right: 24px; bottom: 24px; z-index: 60; flex: 0 0 auto; width: auto; height: auto; min-height: 0; background: none; border: none; overflow: visible; } .room-chat-fab { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: var(--btn-primary); color: var(--on-btn-primary); border: none; box-shadow: var(--shadow); display: grid; place-items: center; } .room-chat-fab svg { width: 21px; height: 21px; display: block; } /* Кнопка кликабельна даже когда родительская дока переведена в pointer-events:none (во время звонка) */ .room-chat.collapsed .room-chat-fab { pointer-events: auto; } /* Чат на весь экран (любое устройство) */ .room-chat.full { position: fixed; inset: 0; z-index: 200; flex: none; max-height: none; min-height: 0; /* без 100vh/100vw — иначе на мобиле инпут уезжает за экран */ border-radius: 0; border: none; } .room-chat.full .room-chat-feed { flex: 1 1 auto; min-height: 0; max-height: none; padding: 18px max(18px, calc((100% - 760px) / 2)); } .room-chat.full .room-chat-input { padding: 14px max(18px, calc((100% - 760px) / 2)); } .room-chat.full .room-msg-body { max-width: 70%; } /* ── Видеозвонок (WebRTC) ─────────────────────────────────────── */ .room-call { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex: 0 0 auto; } /* idle: высота ровно 40px — как у навигатора материала/урока (room-pick/room-step) слева */ .room-call.idle { padding: 0; height: 40px; } .call-start { width: 100%; height: 100%; padding: 0 20px; } /* кнопка «Позвонить» во всю ширину и высоту панели */ .call-start[disabled] { opacity: .5; cursor: not-allowed; } .call-incoming { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; text-align: center; } .call-incoming-ico { display: grid; place-items: center; color: var(--accent-text); animation: call-ring 1s ease-in-out infinite; transform-origin: 50% 10%; } .call-incoming-ico svg { display: block; } .call-incoming-txt { font-size: .95em; } .call-incoming-btns { display: flex; gap: 8px; } @keyframes call-ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } } /* В звонке панель сама по себе не рисуется — видео висит круглым плавающим виджетом */ .room-call.active { display: block; background: none; border: none; padding: 0; overflow: visible; } .call-widget { position: fixed; z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none; /* Виджет — потомок .room-right, у которого во время звонка pointer-events:none (мобиле). Возвращаем интерактивность, иначе кнопки отбой/микрофон/камера не нажимаются. */ pointer-events: auto; } .call-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text); font-size: .78em; background: rgba(0,0,0,.45); text-align: center; padding: 8px; } .call-rec-mini { position: absolute; top: 7px; left: 7px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(0,0,0,.35); animation: rec-blink 1.4s ease-in-out infinite; } @keyframes rec-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } /* Таймер длительности звонка — по центру сверху окна, поверх видео */ .call-timer { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: .72em; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .3px; background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 99px; backdrop-filter: blur(3px); pointer-events: none; } .call-ctrls-mini { display: flex; gap: 8px; background: rgba(0,0,0,.55); padding: 6px; border-radius: 99px; backdrop-filter: blur(4px); } .call-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-2); cursor: pointer; background: var(--surface-2); color: var(--text); font-size: .95em; display: grid; place-items: center; } .call-btn:hover { border-color: var(--accent-border); } .call-btn.off { background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .call-btn.hang { background: #ef4444; border-color: #ef4444; color: #fff; } .call-btn.hang:hover { background: #dc2626; } .call-btn svg { display: block; } .call-btn.off { color: #fca5a5; } /* выключенный микрофон/камера — приглушённо-красный контур иконки */ /* Предупреждение «камера/микрофон заблокированы» на панели звонка (idle/ringing) */ .room-call.idle.has-warn { height: auto; display: flex; flex-direction: column; } .room-call.idle.has-warn .call-start { height: auto; padding: 10px 20px; } .call-perm-warn { width: 100%; border: none; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--danger) 12%, transparent); color: #fca5a5; font-size: .78em; line-height: 1.35; padding: 7px 10px; cursor: pointer; text-align: center; } .call-perm-warn:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); color: #fecaca; } .call-incoming .call-perm-warn { border-top: none; border-radius: 8px; margin-top: 2px; } /* Подсказка под виджетом звонка: свои дорожки не идут (доступ заблокирован) */ .call-media-warn { max-width: 200px; border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); border-radius: 99px; background: rgba(20,20,20,.72); color: #fca5a5; font-size: .74em; padding: 5px 12px; cursor: pointer; text-align: center; backdrop-filter: blur(4px); } .call-media-warn:hover { color: #fecaca; border-color: color-mix(in srgb, var(--danger) 80%, transparent); } /* Инструкция «как разрешить доступ к камере/микрофону» (модалка) */ .perm-help p { line-height: 1.55; } .perm-help-steps { margin: 12px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; } .perm-help-steps li { padding-left: 4px; } .perm-help-note { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-dim); font-size: .9em; } /* ПК — большой квадратный виджет: видео учителя и ученика одновременно (главное + миниатюра), перетаскивается за фон и меняет размер за уголок — как чат (room-chat-resize). */ .call-square { position: relative; overflow: hidden; touch-action: none; background: #0a0d0c; border-radius: var(--radius); border: 1px solid var(--border-2); box-shadow: var(--shadow); cursor: grab; } .call-square:active { cursor: grabbing; } .call-square video { position: absolute; object-fit: cover; background: #0a0d0c; display: block; } .call-square video.call-main { inset: 0; width: 100%; height: 100%; z-index: 1; border-radius: inherit; } .call-square video.call-thumb-vid { right: 10px; bottom: 10px; width: 30%; height: 30%; min-width: 76px; min-height: 76px; z-index: 3; border-radius: 10px; border: 2px solid var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.45); cursor: pointer; } /* Мобиле — компактное квадратное окно с миниатюрой-PiP (как FaceTime/WhatsApp) */ .call-square.mobile { width: 150px; height: 150px; border-radius: 18px; border: 1.5px solid var(--accent-dim); box-shadow: 0 10px 28px rgba(0,0,0,.55); } .call-square.mobile video.call-thumb-vid { right: 7px; bottom: 7px; width: 38%; height: 38%; min-width: 0; min-height: 0; border-radius: 10px; border-width: 1.5px; } .call-resize { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; z-index: 4; cursor: nwse-resize; touch-action: none; } .call-resize::before { content: ''; position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,.6); border-bottom: 2px solid rgba(255,255,255,.6); border-radius: 0 0 3px 0; } /* Обе стороны выключили камеру — прятать пустой чёрный квадрат, оставляя только плавающие кнопки управления звонком (микрофон/камера/отбой). */ .call-widget.no-video .call-square { display: none; } /* Круглая «парящая» кнопка сворачивания чата (вместо шторки-заголовка) */ .room-chat-min { position: absolute; top: 8px; right: 8px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-2); background: rgba(20,20,20,.7); color: var(--text-dim); cursor: pointer; font-size: 1.12em; display: grid; place-items: center; backdrop-filter: blur(4px); } .room-chat-min:hover { color: var(--text); border-color: var(--accent-border); } /* Круглая кнопка слева сверху — чат на весь экран */ .room-chat-max { position: absolute; top: 8px; left: 8px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-2); background: rgba(20,20,20,.7); color: var(--text-dim); cursor: pointer; font-size: 1em; display: grid; place-items: center; backdrop-filter: blur(4px); } .room-chat-max:hover { color: var(--text); border-color: var(--accent-border); } /* На ПК своя ручка изменения высоты (room-chat-resize) — кнопка «на весь экран» там не нужна, только на мобиле/планшете */ @media (min-width: 901px) { .room-chat-max { display: none; } } .room-chat.full .room-chat-feed { max-height: none; flex: 1 1 auto; } /* на весь экран лента заполняет, без лимита 150px */ .room-chat-selrow { padding: 10px 12px 0; } .room-chat-feed { padding-top: 10px; } /* Прикрепление файла + вложения в сообщениях */ .room-chat-clip { flex: 0 0 auto; width: 40px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; font-size: 1.1em; } .room-chat-clip:hover { color: var(--text); border-color: var(--accent-border); } .room-chat-clip:disabled { opacity: .5; cursor: default; } .room-msg-img { max-width: 180px; max-height: 180px; border-radius: 8px; display: block; } .room-msg-img-link { display: inline-block; } .room-msg-text + .room-msg-img-link, .room-msg-text + .room-msg-file { margin-top: 6px; } .room-msg-file { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text); word-break: break-all; } @media (max-width: 900px) { .room { flex-direction: column; } /* Модуль «Позвонить + чат» прижат к САМОМУ низу экрана, высота — по контенту (top:auto!) */ .room-right { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80; flex-direction: column; gap: 8px; padding: 8px; background: var(--bg); border-top: 1px solid var(--border); height: auto; min-height: 0; max-height: 85vh; } .room-chat { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; } /* окно сообщений — максимум ~3-4 штуки, дальше внутренний скролл */ .room-chat-feed { flex: 0 0 auto; max-height: 150px; min-height: 56px; } .room-chat.collapsed { position: fixed; right: 16px; bottom: 72px; left: auto; height: auto; width: auto; padding: 0; background: none; border: none; } /* контент урока получает отступ снизу под закреплённый модуль (без лишней пустоты) */ body.room-chat-open .room-book-pane { padding-bottom: 300px; } body:not(.room-chat-open) .room-book-pane { padding-bottom: 88px; } /* Во время звонка кнопки «Позвонить» нет — верхняя строка не занимает место, чат/кнопка чата приклеиваются к самому низу экрана (а не висят над пустой докой). ВАЖНО: НЕ display:none — иначе пропадёт и сам плавающий виджет звонка (position:fixed внутри display:none не рендерится: на мобиле исчезали видео И кнопки, оставался только звук). Строка и так нулевой высоты (виджет — fixed, пилюля «Ожидание» скрыта), поэтому просто схлопываем без удаления поддерева. */ body.call-active .room-top-row { height: 0; padding: 0; overflow: visible; } body.call-active .room-chat.collapsed { bottom: 14px; } body.call-active:not(.room-chat-open) .room-right { background: transparent; border-top: none; padding: 0; pointer-events: none; } } /* ── Компактнее на мобиле: упражнения, чат-инпут, кнопка звонка ── */ @media (max-width: 760px) { /* В комнате контент урока шире — по ширине нижнего модуля (поля 8px, как у доки) */ body.room-view .app { padding-left: 8px; padding-right: 8px; } /* упражнения — меньше текста и «воздуха» */ .room-ex { padding: 12px; } /* плеер: тонкая рамка, подстраивается под содержимое (не тянется пустотой под картинкой) */ .slide-view { padding: 10px; min-height: 0; } .slide-view .ex-render .ex-img { max-height: 70vh; } .room-ex .ex-h, .room-ex .ex-render .ex-h { font-size: 1.05em; margin-bottom: 8px; } .room-ex .body-text { font-size: .9em; line-height: 1.55; } .room-ex .fill-line { font-size: .95em; line-height: 2.1; } .room-ex .ex-choice .choice-q { font-size: .95em; } /* поля ввода и кнопки в упражнениях — ниже, без лишних отступов */ .choice-opt { padding: 9px 12px; margin-bottom: 7px; font-size: .9em; } .room-ex .input { padding: 7px 12px; } .fill-input { padding: 2px 6px; } .dnd-word, .wb-chip { padding: 5px 10px; } /* строка ввода чата — ниже (цель: закреплённый снизу модуль занимает меньше высоты над уроком в классе). Меньше вертикальный padding у строки И у самого поля. */ .room-chat-input { padding: 4px 8px; gap: 6px; } .room-chat-input .input { padding: 5px 12px; } /* Плашка «ждём…» — на мобиле не обязана совпадать по высоте с навигатором урока (40px из базового правила .room-wait — это для десктопа, там она стоит рядом с ним); здесь ниже. По высоте выравнивается на кнопку «Позвонить» — align-items:stretch ниже (не хардкодим число: подстроится сама, если у кнопки ещё раз поменяется padding). */ .room-wait { min-height: 0; padding: 3px 12px; } .room-top-row { align-items: stretch; } /* Кнопка «Позвонить» — во ВСЮ ширину строки, ровно по краям чата под ней. Раньше здесь стояло width:90%;margin:0 auto — кнопка была заметно уже соседних блоков и висела «не по сетке». Теперь в строке всегда ровно один элемент (плашка ИЛИ кнопка, см. .room-top-row.waiting), поэтому сужать нечего — оба тянутся на всю ширину. */ .room-call.idle { padding: 0; height: auto; } .room-call.idle .call-start { height: auto; padding: 6px 16px; } /* Панель звонка не шире экрана (длинное предупреждение о камере растягивало её за края) */ .room-call { max-width: 100%; min-width: 0; } /* «Войти в класс» — во всю ширину экрана */ .cd-enter { width: 100%; justify-content: center; } /* Шапка учебника — две строки: [материал][+] и [‹][урок][›] */ .room-book-top, .room-lessonnav { flex: 1 1 100%; } /* «+» на одной линии с материалом, крайняя справа; тем же размером/формой, что и стрелки урока */ .room-mat-add { order: 0; width: 42px; padding: 0; justify-content: center; background: var(--surface-2); border-color: var(--border); } .room-mat-add .rma-full { display: none; } .room-mat-add .rma-mini { display: inline; } .room-pick { padding: 9px 11px; } /* инструменты упражнения — только иконки (минимализм), квадратные кнопки */ .room-tool .rt-label { display: none; } .room-tool { width: 34px; height: 34px; padding: 0; gap: 0; justify-content: center; border-radius: 9px; } } /* — Обзор курса (ProgressMe-стиль) — */ .cv-header { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; } .cv-cover { width: 150px; aspect-ratio: 3 / 4; flex: 0 0 auto; border-radius: 12px; background-size: cover; background-position: center; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; } .cv-meta { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .cv-title { font-size: 1.8em; font-weight: 300; letter-spacing: .3px; display: flex; align-items: center; gap: 10px; } .icon-btn.cv-gear { width: 32px; height: 32px; font-size: 18px; } .cv-desc { font-size: .92em; line-height: 1.6; color: var(--text-dim); white-space: pre-wrap; max-width: 640px; } .cv-desc b { color: var(--text); font-weight: 500; } .cv-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .cv-toolbar .input { flex: 1 1 240px; } .cv-modules { display: flex; flex-direction: column; gap: 14px; } .cv-module { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .cv-mod-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; background: var(--surface-2); border: none; color: var(--text); text-align: left; font-size: 1.05em; } .cv-mod-head:hover { background: var(--surface); } .cv-mod-num { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: .85em; color: var(--accent-text); } .cv-mod-title { flex: 1 1 auto; } .cv-mod-toggle { color: var(--muted); } .cv-mod-thumb { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 6px; background-size: cover; background-position: center; } .cv-mod-head .mod-grip { padding: 0 2px; } .cv-module.dnd-dragging { opacity: .5; outline: 1px dashed var(--accent-dim); } .cv-lessons { display: flex; flex-direction: column; } .cv-lesson { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-top: 1px solid var(--border); transition: background .15s; } .cv-modules > .cv-lessons > .cv-lesson:first-child { border-top: none; } .cv-lesson:hover { background: var(--surface-2); } .cv-code { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: .82em; color: var(--text-dim); font-variant-numeric: tabular-nums; } .cv-code-img { background-size: cover; background-position: center; } .cv-lesson-main { flex: 1 1 auto; min-width: 0; } .cv-lesson-title { color: var(--text); font-size: .96em; } .cv-lesson-sub { font-size: .76em; color: var(--muted); margin-top: 2px; } .cv-open { flex: 0 0 auto; } /* Теги урока в строке (справа) + инфо-иконка с описанием */ .cv-lesson-tags { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; max-width: 260px; } .cv-tag { font-size: .74em; color: var(--text-dim); white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; } .cv-lesson-info { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; cursor: help; color: var(--muted); } .cv-lesson-info:hover { color: var(--text); } .cv-info-ico { display: inline-flex; align-items: center; } /* position:fixed + добавляется в document.body по hover (см. infoTooltipIcon в course.js) — иначе обрезается overflow:hidden у .cv-module (нужен для скругления углов модуля). */ .cv-info-pop { position: fixed; z-index: 200; width: 280px; max-width: 60vw; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-2); box-shadow: var(--shadow); color: var(--text-dim); font-size: .82em; line-height: 1.5; white-space: pre-wrap; text-align: left; pointer-events: none; } @media (max-width: 600px) { .cv-open, .cv-lesson-tags { display: none; } } /* — Страница урока — */ .lesson-main { min-width: 0; } .lesson-exercises { display: flex; flex-direction: column; gap: 12px; } .lesson-side { min-width: 0; } .toc-list { display: flex; flex-direction: column; gap: 4px; } .toc-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text-dim); font-size: .85em; width: 100%; } .toc-item:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .toc-num { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: .78em; color: var(--muted); } .toc-ico { flex: 0 0 auto; } .toc-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toc-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent); transition: box-shadow .2s; border-radius: var(--radius); } .toc-item.active { background: var(--surface-2); color: var(--selected); border-color: var(--accent-border); } /* — Конструктор урока: встроенные редакторы упражнений (стопкой, слева) — */ .ex-edit-stack { display: flex; flex-direction: column; gap: 12px; } .ex-inline-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .ex-inline-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .ex-inline-title { flex: 1 1 auto; min-width: 0; font-size: 1.02em; color: var(--text); } /* — Предпросмотр урока (правая колонка конструктора): В классе / Марафон — */ .preview-btns { display: flex; gap: 8px; } .preview-btns .btn { flex: 1 1 0; justify-content: center; } /* — Структура урока (правая колонка конструктора): выбор/перестановка/удаление — */ .struct-list { display: flex; flex-direction: column; gap: 4px; } .struct-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text-dim); font-size: .85em; } .struct-item:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .struct-item.active { background: var(--surface-2); color: var(--text); border-color: var(--accent-border); } .struct-item .toc-title { flex: 1 1 auto; } .struct-del { flex: 0 0 auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9em; padding: 2px 4px; border-radius: 6px; opacity: 0; transition: opacity .15s, color .15s; } .struct-item:hover .struct-del { opacity: 1; } .struct-del:hover { color: var(--danger); } /* — Каталог курсов с обложками — */ .course-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .18s, transform .18s, background .18s; display: flex; flex-direction: column; } .course-card.clickable { cursor: pointer; } .course-card.clickable:hover { border-color: var(--accent-border); transform: translateY(-3px); background: var(--surface-2); } .course-card .cc-cover { aspect-ratio: 3 / 4; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; } .course-card .cc-cover-letter { font-size: 3.4em; font-weight: 300; color: rgba(255,255,255,.85); } .course-card .cc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .course-card .cc-title { font-size: 1.02em; color: var(--text); line-height: 1.3; } .course-card .cc-badges { display: flex; flex-wrap: wrap; gap: 6px; } .cc-badge { font-size: .72em; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--border-2); color: var(--text-dim); white-space: nowrap; } .cc-badge.pub { border-color: color-mix(in srgb, var(--badge-accent) 40%, transparent); color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 6%, transparent); } .cc-badge.priv { border-color: var(--border-2); color: var(--muted); } .course-card .cc-meta { display: flex; gap: 14px; font-size: .76em; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; } .course-card .cc-meta b { color: var(--accent-text); font-weight: 600; } /* — Загрузка обложки (модал) — */ .cover-pick { width: 78px; height: 78px; flex: 0 0 auto; border-radius: 10px; border: 1px dashed var(--border-2); background: var(--surface-2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; } .cover-pick-hint { font-size: .68em; color: var(--muted); } /* Виджет картинки урока/модуля: квадрат + стопка кнопок «Загрузить»/«Удалить» */ .img-field { display: flex; gap: 12px; align-items: center; } .img-field-btns { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .img-field-btns .btn { justify-content: center; } /* — Сегментированный переключатель (видимость) — */ .seg { display: inline-flex; gap: 0; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; flex-wrap: wrap; } .seg-btn { padding: 8px 14px; font-size: .82em; cursor: pointer; background: transparent; color: var(--text-dim); border: none; border-right: 1px solid var(--border); transition: background .15s, color .15s; } .seg-btn:last-child { border-right: none; } .seg-btn:hover { color: var(--text); background: var(--surface-2); } .seg-btn.active { background: color-mix(in srgb, var(--selected) 10%, transparent); color: var(--selected); } /* — Инлайн-тумблер с подписью — */ .inline-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9em; color: var(--text-dim); } /* — Теги — */ .tags-box { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 99px; font-size: .8em; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-dim); } .tag-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .9em; line-height: 1; } .tag-x:hover { color: var(--danger); } /* — Редактор курса: левая колонка (раздел) — */ .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .sp-title { font-size: 1.2em; color: var(--text); display: inline-flex; align-items: center; gap: 4px; } .ex-num { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: .78em; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } .ex-ico { margin-right: 7px; } /* — Редактор курса: правая колонка (разделы) — */ .course-side { min-width: 0; } .sec-list { display: flex; flex-direction: column; gap: 6px; } .sec-item { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 6px 4px 4px; transition: border-color .15s, background .15s; } .sec-item.active { border-color: var(--accent-border); background: var(--surface-2); } .sec-name { flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer; background: none; border: none; color: var(--text-dim); font-size: .9em; padding: 6px 8px; display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sec-item.active .sec-name { color: var(--text); } .sec-name:hover { color: var(--text); } .sec-grip { color: var(--muted); } .sec-ctrls { display: flex; gap: 2px; flex: 0 0 auto; } .icon-btn { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--muted); font-size: .8em; display: flex; align-items: center; justify-content: center; transition: all .15s; } .icon-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); } .icon-btn.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } /* — Пикер типа упражнения — */ .type-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .type-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, transform .15s, background .15s; position: relative; } .type-card:hover:not(.disabled) { border-color: var(--accent-border); transform: translateY(-2px); } .type-card.disabled { opacity: .45; cursor: not-allowed; } .type-card .tc-ico { font-size: 1.6em; line-height: 1; } .type-card .tc-label { font-size: .95em; } .type-card .tc-desc { font-size: .76em; color: var(--muted); line-height: 1.35; } .type-card .tc-soon { position: absolute; top: 10px; right: 10px; font-size: .64em; text-transform: uppercase; letter-spacing: .5px; color: var(--warn); border: 1px solid rgba(251,191,36,.4); padding: 1px 6px; border-radius: 99px; } @media (max-width: 560px) { .type-picker { grid-template-columns: 1fr; } } /* ══ Конструктор v2: DnD, упражнения, книга ════════════════════ */ /* — Drag-and-drop — */ .dnd-grip { flex: 0 0 auto; cursor: grab; color: var(--muted); font-size: 1em; padding: 0 4px; user-select: none; line-height: 1; } .dnd-grip:active { cursor: grabbing; } .dnd-dragging { opacity: .5; outline: 1px dashed var(--accent-dim); } .sec-item .dnd-grip { padding: 0 2px; } /* — Подсказка в конструкторе — */ .hint { font-size: .76em; color: var(--muted); margin: 2px 0 8px; line-height: 1.4; } .mini-label { display: block; font-size: .74em; color: var(--muted); margin-bottom: 8px; } /* — Изображение: превью в конструкторе — */ .img-pick { width: 120px; height: 80px; flex: 0 0 auto; border-radius: 8px; border: 1px dashed var(--border-2); background: var(--surface-2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; } /* — Редактор теста: вопросы — */ .q-edit { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; background: var(--surface-2); } .q-edit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .q-num { font-size: .76em; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } /* — Рендер упражнения (плеер/книга/превью) — */ .ex-render .ex-h { font-size: 1.25em; font-weight: 400; margin-bottom: 8px; } .ex-render .ex-img { max-width: 100%; max-height: 60vh; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; margin: 0 auto; object-fit: contain; } .ex-render .ex-cap { color: var(--text-dim); font-size: .85em; margin-top: 8px; text-align: center; } /* Видео-упражнение (эмбед по ссылке) — адаптивный контейнер 16:9. Высота — через padding-top (не aspect-ratio): старые мобильные браузеры/WebView (Android System WebView, встроенные браузеры мессенджеров), которых на рынке РФ ещё много, не умеют aspect-ratio — контейнер схлопывался в 0 высоты и видео визуально «не работало». */ .ex-render .ex-video { position: relative; width: 100%; max-width: 720px; height: 0; padding-top: 56.25%; margin: 0 auto; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #000; } .ex-render .ex-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Превью видео/аудио в конструкторе упражнения. */ .ex-vid-preview { max-width: 480px; } .ex-aud-preview { display: flex; min-width: 260px; padding: 0; border: none; background: none; } .ex-aud-preview .ex-aplayer { margin: 0; } /* ── Аудио-плеер упражнения (замена нативного