/* ── 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); /* полосы прогресса, загрузка */ /* ⚠️ Включённый тумблер — ВСЕГДА зелёный, независимо от палитры школы (как индикация оценки и рабочие часы): «вкл» — сигнал состояния. Не в theme.js/theme.py. */ --toggle-on: var(--grade-good); /* включённый тумблер (фон дорожки) */ --chat-mine: var(--accent-dim); /* фон своих сообщений в чате */ --correct: var(--accent); /* правильный ответ */ --wrong: var(--danger); /* неверный ответ */ /* ── Чипы расписания ───────────────────────────────────────────── СПЛОШНАЯ заливка статуса + БЕЛЫЙ текст, без рамок: статус урока читается цветом с одного взгляда (решение владельца продукта). ⚠️ Заливки ОДНИ на обе темы (в отличие от --grade-*): это сигналы, а не оформление, и светлая пастель под белым текстом нечитаема в любой теме. Каждый цвет подобран ЗАМЕРОМ — самый светлый своего оттенка, на котором белый текст ещё проходит WCAG AA (4.5:1). ⚠️ Три цвета из четырёх ФИКСИРОВАНЫ и не входят в палитру школы — как индикация оценки (--grade-*) и рабочие часы: «состоялся», «предстоит» и «пробный» — это сигналы, а не оформление. Их нет в theme.js/theme.py, редактор цветов их не трогает. Настраивается только «неявка» (--noshow) — школьная правка проходит через --lesson-noshow. */ --lesson-done: #168665; /* проведённый урок — ВСЕГДА зелёный */ --diamond-ring: var(--accent); /* заполнение кольца «Мои алмазы»; в светлой — свой зелёный */ --lesson-upcoming: #297db1; /* предстоящий урок — ВСЕГДА голубой */ --lesson-demo: #da2b83; /* пробный урок — ВСЕГДА розовый */ --lesson-nobal: #9a56d5; /* «нет баланса» */ --noshow: var(--danger); /* неявка — единственный настраиваемый чип */ /* ⚠️ Заливка «неявки» — приглушённый --noshow, а не он сам: красный по умолчанию (#f87171) светлый, и белый текст на нём давал бы контраст 2.8:1. Через color-mix школьная правка цвета продолжает работать, но не может сделать подпись нечитаемой. */ --lesson-noshow: color-mix(in srgb, var(--noshow) 76%, #000); /* ⚠️ Яркие варианты ТЕХ ЖЕ статусов — ДЛЯ ТЕКСТА, не для заливки. Токены выше подобраны как ФОН под белый текст (самые светлые, где белый ещё проходит AA), и ровно поэтому как текст на тёмной поверхности они выглядят тусклыми — «синий „Запланирован“ слишком тусклый» (жалоба владельца продукта). В светлой теме переопределяются обратно на базовые: там «ярче» означало бы нечитаемо на белом. */ --lesson-upcoming-fg: #5aa9e6; --lesson-done-fg: #2fc79a; --lesson-nobal-fg: #b98ae8; /* Производные для дочерних заливок (theme.js пересчитывает, если задан свой цвет) */ --on-btn-primary: var(--on-accent); --btn-primary-hover: var(--accent-hover); --on-chat-mine: var(--on-accent-dim); /* Шапка (топбар) — своя группа: по умолчанию тёмная в обеих темах */ --tb-bg: #0d0d0d; --tb-text: #e8e8e8; --tb-text-dim: #a0a0a0; --tb-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; /* ⚠️ Статус-текст в светлой теме НЕ осветляем: базовые --lesson-* и так читаются на белом, а «яркие» варианты из :root дали бы контраст ниже 3:1. */ --lesson-upcoming-fg: var(--lesson-upcoming); --lesson-done-fg: var(--lesson-done); /* Кольцо алмазов — сочный зелёный (правка владельца продукта): акцент светлой темы чёрный, и кольцо читалось траурной обводкой, а не «копится». */ --diamond-ring: #1ec74f; --lesson-nobal-fg: var(--lesson-nobal); --on-accent: #ffffff; /* на тёмно-изумрудной кнопке текст белый */ --accent-hover: #059669; --on-accent-dim: #0f3b2c; --shadow: 0 10px 34px rgba(20,50,40,.12); } /* ── Плавная смена темы ──────────────────────────────────────────── Тёмная и светлая ПЕРЕТЕКАЮТ друг в друга: браузер снимает кадр старой темы, app.js мгновенно перекрашивает страницу под ним, и старый кадр растворяется за --theme-fade (View Transitions API, класс .theme-swap ставит applyTheme). ⚠️ Кросс-фейд снимка, а НЕ transition на каждом элементе: при смене ТОЛЬКО css-переменной свойство с transition, читающее var(), в Chromium застревает на старом цвете — ровно поэтому applyTheme() глушит переходы на время свопа. ⚠️ mix-blend-mode: normal вместо стандартного plus-lighter: тот СКЛАДЫВАЕТ яркости двух кадров, и на переходе «тёмная ↔ светлая» середина вспыхивает белым — то самое «бьёт по глазам», от которого мы уходим. Старый кадр лежит сверху (z-index) и просто тает над уже готовой новой темой. ⚠️ prefers-reduced-motion этот фейд НЕ гасит — движения в нём нет, а у владельца «Уменьшение движения» на телефоне включено (см. app.js). ⚠️ Кривая — симметричная (cubic-bezier .45,0,.55,1), а НЕ стандартная `ease`: та срывается с места быстро и гасит бо́льшую часть старого кадра в первую треть — на длинном фейде это читается как рывок в начале и вялый хвост. Симметричная трогается мягко, основную работу делает в середине и так же мягко доводит до конца. ⚠️ Цена длинного фейда: пока он идёт, сверху лежит ЗАМОРОЖЕННЫЙ кадр старой темы, и всё, что появилось под ним за это время (тост, новое сообщение, спиннер), человек увидит только после. Клики при этом проходят насквозь (pointer-events: none), то есть работать интерфейсу фейд не мешает — но дальше растягивать длительность уже не стоит. */ :root { --theme-fade: 1.8s; } /* длительность фейда — единственное место, где она задана */ :root.theme-swap::view-transition { pointer-events: none; } /* клик проходит на живую страницу */ :root.theme-swap::view-transition-old(root), :root.theme-swap::view-transition-new(root) { mix-blend-mode: normal; } :root.theme-swap::view-transition-new(root) { animation: none; } /* новая тема уже готова — просто лежит снизу */ :root.theme-swap::view-transition-old(root) { z-index: 1; animation: theme-dissolve var(--theme-fade) cubic-bezier(.45, 0, .55, 1) both; } @keyframes theme-dissolve { from { opacity: 1 } to { opacity: 0 } } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font); /* лёгкое «свечение» сверху — глубина вместо плоского чёрного */ background: radial-gradient(1100px 480px at 50% -12%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; /* режем горизонтальный выход, НЕ делая body скролл-контейнером (overflow-x:hidden + height:100% сломал бы window-скролл) */ max-width: 100%; } .hidden { display: none !important; } a { color: inherit; text-decoration: none; } /* ── Телефон/планшет: страница не должна вести себя как обычный сайт ────────── Платформу открывают с телефона как приложение, а браузер по умолчанию даёт ей «сайтовые» жесты — и они мешают работе: 1) ДВОЙНОЙ ТАП зумит страницу. На уроке тапают часто и быстро (упражнения, слова, кнопки чата), и случайный двойной тап масштабировал вёрстку — после чего экран «съезжает» и его надо возвращать пальцами. `manipulation` убирает ТОЛЬКО двойной тап-зум: прокрутка и пинч (доступность, и на iOS его всё равно не отключить) остаются. Элементы со своим `touch-action: none` (холст доски, ползунки, перетаскивание) строже — их это правило не ослабляет. 2) АВТОЗУМ ПРИ ФОКУСЕ: iOS увеличивает страницу, если у поля шрифт мельче 16px. Общий «пол» в 16px уже стоит ниже (@media max-width:760px), но телефон в АЛЬБОМНОЙ ориентации и планшет шире 760px — там поля снова мельчали, и ввод текста зумил вёрстку. Признак «палец без курсора» точнее ширины: он ловит и альбомную ориентацию, и планшет, и не трогает ПК с мышью. */ @media (pointer: coarse) and (hover: none) { body { touch-action: manipulation; } .input, .textarea, .select, input, textarea, select { font-size: 16px !important; } } /* ── Глобальная полировка ─────────────────────────────────────── */ ::selection { background: var(--accent-dim); color: var(--on-accent-dim); } /* Тёмные тонкие скроллбары (системные светлые на Windows ломают тему) */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2px solid var(--bg); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: #3d3d3d; } /* Видимый фокус только с клавиатуры (Tab) — доступность без «рамок» при кликах */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; border-radius: var(--radius-sm); } /* Единые SVG-иконки (icons.js) — вместо эмодзи, одинаковы на всех ОС */ .ico { display: inline-flex; flex: 0 0 auto; } .ico svg { width: 16px; height: 16px; display: block; } .btn > svg, .icon-btn > svg { width: 15px; height: 15px; flex: 0 0 auto; } .btn-sm > svg { width: 14px; height: 14px; } .crm-col-menu, .cf-del, .cf-manage, .chat-attach, .fm-crumb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .crm-col-menu svg, .cf-del svg, .cf-manage svg, .chat-attach svg, .fm-crumb svg { width: 15px; height: 15px; flex: 0 0 auto; } /* ── Топбар ────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; /* Цвета шапки — своя группа переменных (--tb-*, объявлены в :root): по умолчанию шапка тёмная в обеих темах, но администратор может перекрасить её отдельно от остального UI. */ background: var(--tb-bg); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: transform .25s ease; } .topbar.tb-hidden { transform: translateY(-100%); } /* авто-скрытие при прокрутке вниз (мобиле) */ body.room-view .topbar { display: none; } /* в комнате класса топбар не нужен (есть «✕ Выйти») */ body.board-view .topbar { display: none; } /* доска — полноэкранная, свой топбар */ .topbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 54px; display: flex; align-items: center; gap: 18px; } .brand { font-size: 1.3em; font-weight: 300; letter-spacing: 4px; color: var(--tb-text); flex: 0 0 auto; } /* nav: при тесноте скроллится горизонтально, не выдавливая правую часть */ .nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { display: inline-flex; align-items: center; white-space: nowrap; flex: 0 0 auto; padding: 8px 13px; border-radius: var(--radius-sm); font-size: .9em; color: var(--tb-text-dim); transition: background .15s, color .15s; } .nav a:hover { color: var(--tb-text); background: var(--tb-surface-2); } .nav a.active { color: var(--tb-accent); background: var(--tb-surface-2); } /* Контейнер меню со стрелками прокрутки (когда не влезает) */ .nav-scroll { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .nav-scroll .nav { flex: 1 1 auto; } .nav-arrow { position: absolute; top: 0; bottom: 0; width: 34px; z-index: 6; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: none; color: var(--tb-text); font-size: 1.4em; line-height: 1; } .nav-arrow-l { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--tb-bg) 55%, transparent); } .nav-arrow-r { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--tb-bg) 55%, transparent); } .nav-arrow:hover { color: var(--tb-accent); } .topbar-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; position: relative; } .who { display: flex; align-items: center; gap: 9px; font-size: .82em; color: var(--tb-muted); white-space: nowrap; } .who b { color: var(--tb-text-dim); font-weight: 500; } .who-btn { cursor: pointer; border-radius: 99px; padding: 3px 9px 3px 3px; transition: background .15s; } .who-btn:hover, .who-btn.open { background: var(--tb-surface-2); } .who-btn:hover .who-text b, .who-btn.open .who-text b { color: var(--tb-accent); } .who-caret { display: inline-flex; align-items: center; color: var(--tb-muted); font-size: .9em; transition: color .15s, transform .2s ease; } .who-btn:hover .who-caret, .who-btn.open .who-caret { color: var(--tb-accent); } .who-btn.open .who-caret { transform: rotate(180deg); } /* Выпадающее меню профиля (настройки + выход) */ .who-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .who-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text-dim); font-family: var(--font); font-size: .9em; padding: 9px 11px; border-radius: var(--radius-sm); transition: background .12s, color .12s; } .who-menu-item:hover { background: var(--surface-2); color: var(--text); } .who-menu-item.danger:hover { color: var(--danger); } .who-menu-ico { display: inline-flex; align-items: center; color: var(--muted); } .who-menu-item:hover .who-menu-ico { color: inherit; } /* Переключатель темы (солнце/луна) в меню профиля */ .who-menu-sep { height: 1px; background: var(--border); margin: 4px 3px; } .who-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 11px 8px; } .who-theme-label { font-size: .86em; color: var(--text-dim); } .theme-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 99px; } .theme-seg-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 27px; border: none; background: none; border-radius: 99px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .theme-seg-btn svg { width: 15px; height: 15px; display: block; } .theme-seg-btn:hover { color: var(--text); } .theme-seg-btn.active { background: color-mix(in srgb, var(--selected) 16%, transparent); color: var(--selected); } /* Отдельная иконка выхода в шапке свёрнута в меню профиля */ .topbar-logout { display: none; } .avatar.topbar-avatar { width: 30px; height: 30px; font-size: .82em; } .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: 24px; margin-bottom: 22px; } .mp-avatar { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--border-2); display: grid; place-items: center; font-size: 1.9em; font-weight: 600; color: var(--accent-text); overflow: hidden; } .mp-photo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } /* ⚠️ Без этого [hidden] не прячет кнопку: display у .btn перебивает атрибут */ .mp-photo-actions > [hidden] { display: none; } /* Имейл и ссылка «Сменить пароль» под ним — одна связка, отступ между ними съеден */ .mp .mp-field-email { margin-bottom: 6px; } .mp-pwd-link { display: flex; justify-content: flex-end; } /* Тихая текстовая кнопка: «Сменить пароль», «Отключить» */ .mp-link { background: none; border: none; padding: 4px 0; font: inherit; font-size: .85em; font-family: var(--font); color: var(--muted); cursor: pointer; transition: color .15s; } .mp-link:hover { color: var(--text); } .mp-wide { width: 100%; } /* «Анкета» — рамка с подписью в разрыве. Рамка тут разделитель группы, а не край блока. */ .mp-group { border: 1px solid var(--border-2); border-radius: var(--radius); margin: 6px 0 20px; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .mp-group > legend { margin: 0 auto; padding: 0 12px; color: var(--muted); font-size: .9em; } .mp-group .profile-info { margin-bottom: 4px; } .mp-group .btn { background: var(--bg); } .mp-group .btn:hover { background: var(--surface-2); } /* Telegram: кнопка/плашка во всю ширину, подсказка по центру */ .mp-tg { margin-bottom: 4px; } .mp-tg-state { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 11px 20px; border-radius: var(--radius-sm); font-size: .9em; letter-spacing: .3px; color: var(--correct); background: color-mix(in srgb, var(--correct) 12%, transparent); } .mp-tg-state.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .mp-tg-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: .85em; color: var(--muted); } .mp-hint { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: .85em; line-height: 1.45; } /* Подвал: «Отмена» и «Сохранить» — две равные кнопки */ .form-actions.mp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; } /* ── Каркас страниц ───────────────────────────────────────────── */ .app { max-width: 1180px; margin: 0 auto; padding: 36px 24px 80px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .page-title { font-size: 1.7em; font-weight: 300; letter-spacing: .5px; } .page-sub { color: var(--muted); font-size: .85em; margin-top: 4px; } .crumbs { font-size: .82em; color: var(--muted); margin-bottom: 18px; } .crumbs a:hover { color: var(--accent-text); } .crumbs span { color: var(--border-2); margin: 0 6px; } /* ── Кнопки ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--surface-2); color: var(--text); font-size: .9em; font-family: var(--font); line-height: 1.2; /* одинаковая высота у button/span/a с классом .btn */ cursor: pointer; transition: border-color .15s, background .15s, transform .1s, color .15s; letter-spacing: .3px; } .btn:hover { border-color: transparent; background: var(--border-2); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--btn-primary); color: var(--on-btn-primary); border-color: var(--btn-primary); font-weight: 600; box-shadow: 0 4px 16px color-mix(in srgb, var(--btn-primary) 18%, transparent); } .btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--on-btn-primary); box-shadow: 0 6px 22px color-mix(in srgb, var(--btn-primary) 26%, transparent); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { color: var(--btn-danger); border-color: transparent; background: transparent; } .btn-danger:hover { background: color-mix(in srgb, var(--btn-danger) 12%, transparent); border-color: transparent; } .btn-sm { padding: 7px 13px; font-size: .82em; } /* Кнопка «+ Создать…» в шапке «Материалов» — на 15% меньше обычной .btn (не .btn-sm, там разница почти 30% — крупнее, чем просили). Считано от .btn: padding 11px 20px → ×0.85 ≈ 9px 17px, font-size .9em → ×0.85 ≈ .77em. */ .btn-compact { padding: 9px 17px; font-size: .77em; } .btn:disabled { opacity: .4; cursor: not-allowed; } /* ── Карточки / сетки ─────────────────────────────────────────── */ .grid { display: grid; gap: 18px; } .grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 22px; transition: border-color .18s, transform .18s, background .18s; } .card.clickable { cursor: pointer; } .card.clickable:hover { border-color: var(--accent-border); transform: translateY(-3px); background: var(--surface-2); } .card-title { font-size: 1.1em; font-weight: 400; color: var(--text); margin-bottom: 8px; } .card-desc { font-size: .85em; color: var(--text-dim); margin-bottom: 16px; min-height: 2.4em; } .card-meta { display: flex; gap: 16px; font-size: .78em; color: var(--muted); border-top: 1px solid var(--border); padding-top: 14px; } .card-meta b { color: var(--accent-text); font-weight: 600; } /* ── Списки строками ──────────────────────────────────────────── */ .list { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 14px 18px; transition: border-color .15s, background .15s; } .row.clickable { cursor: pointer; } .row.clickable:hover { border-color: var(--accent-border); background: var(--surface-2); } /* ⚠️ Вложенная поверхность на тон светлее. У .card/.row фон — var(--surface), тот же, что у .card и .modal, и раньше их разделяла ТОЛЬКО рамка: без неё строка внутри модалки слилась бы с ней в один прямоугольник. */ .card .card, .card .row, .modal .card, .modal .row { background: var(--surface-2); } .row-num { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); display: grid; place-items: center; font-size: .75em; color: var(--muted); } .row-main { flex: 1 1 200px; min-width: 0; } .row-title { color: var(--text); font-size: .95em; } .row-sub { color: var(--muted); font-size: .78em; margin-top: 2px; } .row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* ── Вкладки ──────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .tab { padding: 11px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); cursor: pointer; font-size: .92em; font-family: var(--font); letter-spacing: .3px; transition: color .15s, border-color .15s; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.active { color: var(--selected); border-bottom-color: var(--selected); } .tab .tab-count { font-size: .82em; color: var(--muted); margin-left: 6px; } .tab.active .tab-count { color: var(--accent-dim); } /* ── Навигация страницы «Материалы» ──────────────────────────────── Два уровня: ЧЬЁ (Мои / Общие / Учителя) — сегментированный переключатель, и ТИП (Книги / Доски) — лёгкие текстовые вкладки. Разный визуальный вес и держит иерархию, поэтому оба уровня умещаются в ОДНУ строку. ⚠️ Панель-«слаб» под вкладками (язычки папки + большой блок на var(--surface-2)) УБРАНА, и это главная правка вида. Метафора папки требовала, чтобы фон панели совпадал с фоном активного язычка, — а у школы со светлым --surface-2 (палитра настраивается!) это давало серую плиту во весь экран, на которой пустая вкладка читалась как дыра в вёрстке. Контент теперь лежит прямо на странице, как на всех остальных экранах платформы, и от палитры школы больше не зависит. */ .mat-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; margin-bottom: 22px; } .mat-scope { display: inline-flex; gap: 2px; padding: 4px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); } .mat-scope-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 16px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: var(--text-dim); font-family: var(--font); font-size: .85em; letter-spacing: .2px; transition: color .15s, background .15s; } .mat-scope-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); } .mat-scope-btn.active { background: color-mix(in srgb, var(--selected) 15%, transparent); color: var(--selected); font-weight: 600; } /* Второй уровень — текст с подчёркиванием, а не пилюли: две группы пилюль подряд читались бы как один уровень, и иерархия «чьё → что» терялась. */ .mat-kinds { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mat-kind { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 2px 9px; border: 0; background: none; cursor: pointer; color: var(--muted); font-family: var(--font); font-size: .85em; letter-spacing: .2px; transition: color .15s; } .mat-kind::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--selected); transform: scaleX(0); transition: transform .18s; } .mat-kind:hover { color: var(--text-dim); } .mat-kind.active { color: var(--text); } .mat-kind.active::after { transform: scaleX(1); } /* Счётчик — «таблетка», одна и та же на обоих уровнях (число должно выглядеть числом, а не частью подписи). tabular-nums, чтобы вкладки не дёргались при смене счёта. */ .mat-n { font-size: .8em; line-height: 1.6; padding: 0 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); font-variant-numeric: tabular-nums; } .mat-scope-btn.active .mat-n, .mat-kind.active .mat-n { background: color-mix(in srgb, var(--selected) 20%, transparent); color: var(--selected); } .mat-note { color: var(--muted); font-size: .82em; line-height: 1.5; margin: -8px 0 20px; max-width: 620px; } /* Пустая вкладка — карточка-заглушка с пунктиром («место, куда что-то встанет»), а не пустота посреди экрана. */ .mat-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 24px; border: 1px dashed var(--border-2); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 45%, transparent); } .mat-empty-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--selected) 12%, transparent); color: var(--selected); margin-bottom: 16px; } .mat-empty-ico svg { width: 24px; height: 24px; } .mat-empty-title { font-size: 1.02em; color: var(--text); margin-bottom: 8px; } .mat-empty p { color: var(--muted); font-size: .86em; line-height: 1.55; max-width: 430px; margin: 0 0 20px; } .mat-empty .btn:last-child { margin-top: 0; } .mat-empty p:last-child { margin-bottom: 0; } @media (max-width: 760px) { .mat-nav { flex-direction: column; align-items: stretch; gap: 14px; } /* Сегменты растягиваются поровну — три подписи разной длины иначе дают рваный ряд. */ .mat-scope { width: 100%; } .mat-scope-btn { flex: 1 1 0; justify-content: center; padding: 9px 8px; font-size: .8em; gap: 6px; } .mat-kind { font-size: .82em; } .mat-kinds { gap: 16px; } .mat-note { margin: -4px 0 16px; } .mat-empty { padding: 38px 18px; } } /* ── Бейджи ───────────────────────────────────────────────────── */ .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 transparent; border-radius: var(--radius); padding: 38px 32px; box-shadow: var(--shadow); } .auth-brand { text-align: center; font-size: 2.2em; font-weight: 200; letter-spacing: 8px; margin-bottom: 4px; } .auth-tag { text-align: center; font-size: .72em; color: var(--muted); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; } .auth-hint { margin-top: 22px; font-size: .74em; color: var(--muted); text-align: center; line-height: 1.7; border-top: 1px solid var(--border); padding-top: 16px; white-space: pre-line; } .auth-hint code { color: var(--text-dim); } /* «Забыли пароль?» / «Вернуться ко входу» — кнопка, выглядящая ссылкой (нужен именно