:root { --ink: #1C2541; --ink-soft: #3C4664; --paper: #F7F4EC; --paper-raised: #FFFFFF; --line: #DAD3C0; --line-soft: #E9E4D6; --green: #3A7563; --green-bg: #E4EFE9; --amber: #B9761F; --amber-bg: #FBEDD9; --slate: #5C6B8A; --slate-bg: #E7EAF2; --red: #A5432F; --red-bg: #F6E5E0; --sky: #3E8FBF; --sky-bg: #DDEEF8; --orange: #D9611E; --orange-bg: #FBE3D0; --mint: #2E9E77; --mint-bg: #E3F5EE; --mint-ink: #145C42; --gold: #C9971F; --gold-bg: #FDF3D8; --gold-ink: #6B5211; --orange-ink: #7A3A10; --sky-ink: #1F5C7D; --purple: #7C4DBE; /* Палитра результата проверки (п.13, п.17): correct — насыщенный зелёный, partial — заметно бледнее, wrong — яркий красный. */ --score-correct: #12A65C; --score-correct-bg: #DCF5E7; --score-partial: #93D3A9; --score-partial-bg: #EEF9F1; --score-wrong: #E03B2F; --score-wrong-bg: #FBE3E0; --score-pending-bg: #FBEDD9; --overlay: rgba(30, 26, 20, 0.45); --scrim: rgba(255, 255, 255, 0.9); --radius: 10px; --shadow: 0 1px 2px rgba(28, 37, 65, 0.06), 0 4px 14px rgba(28, 37, 65, 0.05); --shadow-lift: 0 4px 10px rgba(28, 37, 65, 0.08), 0 12px 28px rgba(28, 37, 65, 0.10); --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.2); --topbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Inter', system-ui, -apple-system, sans-serif; /* Длительности анимаций — в тёмной/светлой теме одинаковые, но обнуляются при prefers-reduced-motion (см. самый низ файла). */ --t-fast: 0.13s; --t-med: 0.22s; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Тёмная тема ---------- Переключается тумблером в шапке: JS ставит data-theme="dark" на . Здесь переопределяются ТОЛЬКО переменные — вся остальная разметка и правила ниже уже написаны через var(), поэтому менять их не нужно. */ html[data-theme="dark"] { --ink: #E8E6E1; --ink-soft: #B9B6AE; --paper: #16181D; --paper-raised: #202329; --line: #3A3E47; --line-soft: #292D34; --green: #6FBF9E; --green-bg: #1E3730; --amber: #E3A651; --amber-bg: #3A2E1B; --slate: #9AA6BF; --slate-bg: #262B36; --red: #E07963; --red-bg: #3A231D; --sky: #6FB6DE; --sky-bg: #1B2C38; --sky-ink: #B7DCF0; --orange: #EE8A4A; --orange-bg: #3B2617; --orange-ink: #F2C3A2; --mint: #55BE97; --mint-bg: #1C3830; --mint-ink: #A9E4CB; --gold: #D9B159; --gold-bg: #3A3117; --gold-ink: #EBD79B; --purple: #A784E0; --score-correct: #2ED07C; --score-correct-bg: #17352A; --score-partial: #6FA88A; --score-partial-bg: #1E2C27; --score-wrong: #F2604F; --score-wrong-bg: #3A201C; --score-pending-bg: #3A2E1B; --overlay: rgba(0, 0, 0, 0.6); --scrim: rgba(32, 35, 41, 0.9); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4); --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.6); --topbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } /* Шапка в тёмной теме не должна быть «ещё темнее» фона — делаем её чуть светлее, иначе она сливается со страницей. */ html[data-theme="dark"] .topbar { background: #0F1114; } html[data-theme="dark"] .nav a { color: rgba(232, 230, 225, 0.72); } html[data-theme="dark"] .nav a:hover, html[data-theme="dark"] .nav a.is-active { color: #F3F1EC; } html[data-theme="dark"] .link-button { color: rgba(232, 230, 225, 0.72); } html[data-theme="dark"] .link-button:hover { color: #F3F1EC; } html[data-theme="dark"] .brand, html[data-theme="dark"] .brand__mark, html[data-theme="dark"] .nav-toggle { color: #F3F1EC; } html[data-theme="dark"] .brand__mark { border-color: #F3F1EC; } /* Кнопка .btn в светлой теме — тёмная плашка на светлом фоне. В тёмной теме инвертируем, иначе она сливается с фоном страницы. */ html[data-theme="dark"] .btn { background: var(--amber); border-color: var(--amber); color: #16181D; } html[data-theme="dark"] .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .btn--danger { background: var(--red-bg); border-color: var(--red); color: var(--red); } html[data-theme="dark"] .tab.is-active { background: var(--amber); border-color: var(--amber); color: #16181D; } html[data-theme="dark"] .reschedule-confirm-bar { background: #0F1114; color: var(--ink); } /* Фото и картинки в тёмной теме бьют по глазам — слегка приглушаем. */ html[data-theme="dark"] .about-article img, html[data-theme="dark"] .card__thumb, html[data-theme="dark"] .image-thumb img { filter: brightness(0.9); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); background-image: linear-gradient(var(--line-soft) 1px, transparent 1px); background-size: 100% 2.15rem; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; min-height: 100vh; } a { color: inherit; } .page { max-width: 980px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; } /* ---------- Top bar ---------- */ .topbar { background: var(--ink); color: var(--paper); position: sticky; top: 0; z-index: 20; box-shadow: var(--topbar-shadow); } .topbar__inner { max-width: 980px; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--paper); font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; } .brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.5px solid var(--paper); border-radius: 6px; font-size: 0.75rem; transform: rotate(-3deg); } .nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1.4rem; font-size: 0.92rem; } .nav a { text-decoration: none; color: rgba(247,244,236,0.75); padding-bottom: 3px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .nav a:hover, .nav a.is-active { color: var(--paper); border-color: var(--amber); } .nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(247,244,236,0.4); color: var(--paper); border-radius: 6px; font-size: 1.1rem; padding: 0.25rem 0.6rem; } .link-button { background: none; border: none; color: rgba(247,244,236,0.75); font: inherit; cursor: pointer; padding: 0; } .link-button:hover { color: var(--paper); } .logout-form { margin: 0; } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.35rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } .page-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .eyebrow { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate); } .muted { color: var(--slate); } .small { font-size: 0.85rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.1rem; border-radius: 7px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none; transition: transform 0.1s ease, opacity 0.15s ease; } .btn:hover { opacity: 0.88; } .btn:active { transform: translateY(1px); } .btn--ghost { background: transparent; color: var(--ink); } .btn--danger { background: var(--red-bg); border-color: var(--red); color: var(--red); } .btn--sm { padding: 0.35rem 0.75rem; font-size: 0.82rem; } /* ---------- Forms ---------- */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 0.35rem; } input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select { width: 100%; font: inherit; font-size: 0.95rem; padding: 0.6rem 0.75rem; border: 1.5px solid var(--line); border-radius: 7px; background: var(--paper-raised); color: var(--ink); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* ---------- Даты и время ---------- Браузер рисует эти поля по-своему: свой шрифт, своя иконка календаря, которая в тёмной теме остаётся чёрной и пропадает на фоне. Приводим к общему виду. */ input[type="date"], input[type="time"], input[type="datetime-local"] { font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.02em; min-height: 2.6rem; cursor: pointer; /* иначе Safari/iOS растягивает поле по-своему и ломает сетку */ -webkit-appearance: none; appearance: none; } input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]:hover { border-color: var(--amber); } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; padding: 0.15rem; border-radius: 4px; opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--amber-bg); } /* В тёмной теме иконка календаря чёрная и сливается с фоном — инвертируем. */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); } input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { padding: 0; } input[type="date"]::-webkit-datetime-edit-text, input[type="datetime-local"]::-webkit-datetime-edit-text { color: var(--ink-soft); padding: 0 0.1rem; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); } textarea { min-height: 7rem; resize: vertical; } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; border: 1.5px solid var(--line); border-radius: 7px; padding: 0.75rem; background: var(--paper-raised); max-height: 220px; overflow-y: auto; } .checkbox-grid label { display: flex; align-items: center; gap: 0.4rem; font-family: var(--sans); text-transform: none; letter-spacing: normal; font-size: 0.88rem; font-weight: 400; color: var(--ink); } .file-input-wrap { border: 1.5px dashed var(--line); border-radius: 8px; padding: 0.9rem; background: var(--paper-raised); transition: border-color 0.15s ease, background 0.15s ease; } .file-input-wrap:hover { border-color: var(--amber); } /* ---------- Выбор файла ---------- Системная кнопка «Выберите файл» выглядит чужеродно и по-разному в каждом браузере. Прячем её вид и рисуем свою через ::file-selector-button. */ input[type="file"] { width: 100%; font: inherit; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer; } input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: 0.85rem; margin-right: 0.7rem; padding: 0.45rem 0.9rem; border-radius: 7px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; } input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--paper); } input[type="file"]::file-selector-button:active { transform: translateY(1px); } /* Старый синтаксис — Safari до 16.4 не знает ::file-selector-button. */ input[type="file"]::-webkit-file-upload-button { font: inherit; font-weight: 600; font-size: 0.85rem; margin-right: 0.7rem; padding: 0.45rem 0.9rem; border-radius: 7px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; } .image-thumb-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; } .image-thumb { width: 140px; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper-raised); } .image-thumb img { width: 100%; height: 100px; object-fit: cover; display: block; } .image-thumb__remove { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.5rem; font-size: 0.72rem; color: var(--red); text-transform: none; font-family: var(--sans); font-weight: 400; cursor: pointer; } .image-thumb__remove input { width: auto; margin: 0; } .file-preview-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; } .file-preview-item { position: relative; width: 100px; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper-raised); } .file-preview-item img { width: 100%; height: 72px; object-fit: cover; display: block; } .file-preview-item__icon { height: 72px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .file-preview-item__name { display: block; padding: 0.2rem 0.35rem 0.35rem; font-size: 0.62rem; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-preview-item__remove { position: absolute; top: 2px; right: 2px; background: var(--scrim); border: 1px solid var(--line); border-radius: 50%; width: 18px; height: 18px; line-height: 1; color: var(--red); cursor: pointer; font-size: 0.8rem; } .error-box { background: var(--red-bg); border: 1.5px solid var(--red); color: var(--red); padding: 0.65rem 0.9rem; border-radius: 7px; font-size: 0.88rem; margin-bottom: 1rem; } .success-box { background: var(--mint-bg); border: 1.5px solid var(--mint); color: var(--mint-ink); padding: 0.65rem 0.9rem; border-radius: 7px; font-size: 0.88rem; margin-bottom: 1rem; } /* ---------- Login ---------- */ .auth-shell { max-width: 380px; margin: 3.5rem auto 0; padding: 2rem 1.9rem; background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .auth-shell .brand__mark { border-color: var(--ink); color: var(--ink); } .auth-title { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.6rem; } .auth-title .brand__mark { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--mono); font-size: 0.8rem; transform: rotate(-3deg); } /* ---------- Filter tabs ---------- */ .tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .tab { font-family: var(--mono); font-size: 0.8rem; text-decoration: none; color: var(--ink-soft); padding: 0.45rem 0.85rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-raised); } .tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .tab .count { opacity: 0.65; margin-left: 0.3rem; } /* ---------- Ledger card (signature element) ---------- */ .ledger { display: flex; flex-direction: column; gap: 0.7rem; } .card { position: relative; background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.15rem; display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink); } .card__hitarea { position: absolute; inset: 0; z-index: 1; } .card__index { font-family: var(--mono); font-size: 0.78rem; color: var(--slate); white-space: nowrap; } .card__thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1.5px solid var(--line); flex-shrink: 0; } .card__body { flex: 1; min-width: 0; } .card__title { font-weight: 600; margin-bottom: 0.15rem; } .card__meta { font-size: 0.82rem; color: var(--slate); } /* Карточка, у которой справа висит кнопка действия (например «Убрать» у ученика, п.18): сама карточка перестаёт быть ссылкой, кликабельна её внутренняя часть .card__link. */ .card--with-actions { justify-content: space-between; } .card--with-actions .card__link { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; } .card--rich { flex-direction: column; align-items: stretch; gap: 0.5rem; } .card--rich__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } /* ---------- Выбор заданий в наборе — сворачиваемая панель, карточки как в самом ДЗ ---------- */ .picker-panel { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-top: 0.8rem; background: var(--paper); } .catalog-row.assignment-picker-card { display: block; position: relative; cursor: pointer; } .catalog-row.assignment-picker-card.is-selected { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg); } .assignment-picker-card__image { max-width: 100%; border-radius: 8px; border: 1.5px solid var(--line); margin-top: 0.7rem; display: block; } .stamp { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 5px; border: 1.5px solid currentColor; transform: rotate(-4deg); white-space: nowrap; flex-shrink: 0; } .stamp--reviewed { color: var(--green); background: var(--green-bg); } .stamp--pending { color: var(--amber); background: var(--amber-bg); } .stamp--waiting { color: var(--slate); background: var(--slate-bg); } .stamp--correct { color: var(--green); background: var(--green-bg); } .stamp--incorrect { color: var(--red); background: var(--red-bg); } .stamp--partial-submitted { color: var(--amber); background: var(--amber-bg); border-style: dashed; } .stamp--partial-reviewed { color: var(--green); background: var(--green-bg); border-style: dashed; } /* ---------- Tag chip ---------- */ .chip { display: inline-block; font-family: var(--mono); font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--slate-bg); color: var(--slate); margin: 0 0.3rem 0.3rem 0; } /* ---------- Assignment content block ---------- */ .assignment-block { background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; margin-bottom: 1.4rem; } .assignment-block img { max-width: 100%; border-radius: 8px; border: 1.5px solid var(--line); margin-top: 0.8rem; } .difficulty-badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); background: var(--line-soft); border-radius: 999px; padding: 0.2rem 0.6rem; } /* ---------- Assignment catalog picker (worksheet builder) — one row per assignment ---------- */ .catalog-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 640px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 8px; padding: 0.75rem; background: var(--paper); } .catalog-row { position: relative; display: flex; align-items: flex-start; gap: 1rem; background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 8px; padding: 0.7rem; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .catalog-row:hover { border-color: var(--slate); } .catalog-row.is-selected { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg); } .catalog-row input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; } .catalog-row__media { flex-shrink: 0; width: 220px; } .catalog-row__img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 6px; border: 1.5px solid var(--line); background: var(--paper); display: block; } .catalog-row__noimg { width: 100%; height: 90px; border-radius: 6px; border: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--mono); color: var(--slate); font-size: 0.8rem; } .catalog-row__body { flex: 1; min-width: 0; } .catalog-row__index { font-family: var(--mono); font-size: 0.8rem; color: var(--slate); margin-bottom: 0.2rem; } .catalog-row__text { font-size: 0.92rem; margin-bottom: 0.5rem; white-space: pre-wrap; } .catalog-row__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .catalog-row__check { position: absolute; top: 0.6rem; right: 0.6rem; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--paper-raised); display: none; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } .catalog-row.is-selected .catalog-row__check { display: flex; } /* ---------- Перетаскиваемый список выбранных заданий (порядок внутри набора) ---------- */ .reorder-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .reorder-chip { display: flex; align-items: center; gap: 0.6rem; background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 7px; padding: 0.45rem 0.6rem; cursor: grab; } .reorder-chip.is-dragging { opacity: 0.4; } .reorder-card { cursor: grab; } .reorder-card.is-dragging { opacity: 0.4; } .reorder-chip.is-locked { cursor: default; background: var(--slate-bg); } .reorder-chip__handle { color: var(--slate); font-size: 0.9rem; flex-shrink: 0; } .reorder-chip__label { font-family: var(--mono); font-size: 0.8rem; color: var(--slate); flex-shrink: 0; } .reorder-chip__text { flex: 1; min-width: 0; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reorder-chip__remove { background: none; border: none; color: var(--red); font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0 0.2rem; } /* ---------- Clickable tag chips (tag picker) ---------- */ .tag-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 1.5px solid var(--line); border-radius: 7px; padding: 0.75rem; background: var(--paper-raised); } .tag-toggle { position: relative; cursor: pointer; display: inline-flex; } .tag-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .tag-toggle span { font-family: var(--mono); font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; user-select: none; } .tag-toggle input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); } .tag-toggle input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 1px; } .tag-filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; } /* ---------- File list ---------- */ .file-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .file-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; background: var(--line-soft); border-radius: 6px; padding: 0.45rem 0.7rem; } .file-item__row { display: flex; align-items: center; gap: 0.4rem; } .file-item form { margin-left: auto; } .file-item a { text-decoration: underline; } .file-preview { flex: 1; min-width: 0; } .file-preview summary { cursor: pointer; list-style: none; user-select: none; } .file-preview summary::-webkit-details-marker { display: none; } .file-preview summary::before { content: "▸ "; color: var(--slate); } .file-preview[open] summary::before { content: "▾ "; } .file-preview img { display: block; max-width: 100%; margin-top: 0.5rem; border-radius: 6px; border: 1.5px solid var(--line); } .hint-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .hint-status-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; background: var(--line-soft); border-radius: 6px; padding: 0.5rem 0.7rem; } .hint-status-list .quicknav__dot { margin-top: 0.4rem; } .hint-list { display: flex; flex-direction: column; gap: 0.5rem; } .hint-toggle { border: 1.5px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; background: var(--paper-raised); } .hint-toggle summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--ink-soft); user-select: none; } .hint-toggle summary::-webkit-details-marker { display: none; } .hint-toggle summary::before { content: "💡 "; } .hint-toggle p { margin: 0.6rem 0 0; } /* ---------- Calendar / schedule ---------- */ .calendar-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; } .calendar-toolbar__label { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); } .calendar { display: flex; gap: 6px; } .calendar__timeaxis { width: 40px; flex-shrink: 0; position: relative; padding-top: 34px; } .calendar__timeaxis span { position: absolute; right: 4px; transform: translateY(-50%); font-family: var(--mono); font-size: 0.62rem; color: var(--slate); } .calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; flex: 1; min-width: 0; } .calendar__day { border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper-raised); overflow: hidden; min-width: 0; } .calendar__day.is-today { border-color: var(--amber); } .calendar__day-header { text-align: center; padding: 0.3rem 0.1rem; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-soft); border-bottom: 1.5px solid var(--line-soft); background: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar__day.is-today .calendar__day-header { color: var(--amber); font-weight: 700; } .calendar__day-body { position: relative; background-image: repeating-linear-gradient( var(--line-soft), var(--line-soft) 1px, transparent 1px, transparent 100% ); background-repeat: repeat-y; } .lesson-block, .availability-block { position: absolute; left: 2px; right: 2px; border-radius: 5px; padding: 2px 4px; font-size: 0.64rem; line-height: 1.2; overflow: hidden; cursor: default; } .lesson-block { background: var(--slate-bg); border: 1.5px solid var(--slate); color: var(--ink); } .lesson-block.is-recurring { background: var(--mint-bg); border-color: var(--mint); color: var(--mint-ink); } .lesson-block.is-makeup { background: var(--orange-bg); border-color: var(--orange); color: var(--orange-ink); } .lesson-block.is-group { background: var(--gold-bg); border-color: var(--gold); color: var(--gold-ink); } .lesson-block__title { font-weight: 600; } .lesson-block__tag { display: inline-block; font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; margin-top: 1px; } .availability-block { background: var(--sky-bg); border: 1.5px dashed var(--sky); color: var(--sky-ink); font-family: var(--mono); } .lesson-block__paid-toggle { display: flex; align-items: center; gap: 3px; font-size: 0.6rem; margin-top: 2px; cursor: pointer; user-select: none; } .lesson-block__paid-toggle input { width: auto; margin: 0; } /* Оплаченное занятие — обводка фиолетовым поверх любого другого цвета (слот/повтор/замена) */ .lesson-block.is-paid { border-color: var(--purple); border-width: 2px; box-shadow: 0 0 0 1px var(--purple); } /* Reschedule mode (student) */ .lesson-block.is-draggable { cursor: grab; box-shadow: 0 0 0 2px var(--amber-bg); } .lesson-block.is-jiggling { animation: jiggle 0.35s infinite; } @keyframes jiggle { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } } .availability-block.is-drop-target { display: none; } .reschedule-mode .availability-block.is-drop-target { display: block; } .availability-block.is-dragover { background: var(--amber-bg); border-color: var(--amber); } .lesson-block.is-drag-source { opacity: 0.35; } .reschedule-confirm-bar { display: none; position: sticky; bottom: 0; margin-top: 1rem; background: var(--ink); color: var(--paper); padding: 0.8rem 1rem; border-radius: 8px; align-items: center; gap: 1rem; flex-wrap: wrap; } .reschedule-confirm-bar.is-visible { display: flex; } /* Узкие экраны — горизонтальная прокрутка календаря как запасной вариант, на обычном экране (см. .calendar__days выше) она не нужна. */ @media (max-width: 640px) { .calendar { overflow-x: auto; } .calendar__days { min-width: 560px; } } /* ---------- Универсальное модальное окно (подтверждение / предупреждение) ---------- Заменяет нативные confirm()/alert() браузера на оформление в стиле сайта. */ .sp-modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .sp-modal { background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 10px; padding: 1.2rem 1.4rem; max-width: 380px; width: 100%; box-shadow: var(--shadow-modal); } .sp-modal__message { margin: 0 0 1rem; font-size: 0.92rem; color: var(--ink); line-height: 1.4; white-space: pre-line; } .sp-modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; } /* ---------- Quick nav (list of task numbers at the bottom of a worksheet) ---------- */ .quicknav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1.5px dashed var(--line); } /* Сводка по проверенному заданию вместо формы проверки. */ .review-done { margin-top: 1rem; padding-top: 1rem; border-top: 1.5px dashed var(--line); } .review-done__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* Шапка липкая, поэтому при прокрутке к номеру его заголовок оказался бы под ней. Отступ работает и для плавной прокрутки, и для перехода по ссылке с #якорем. */ .assignment-block { scroll-margin-top: 5rem; } /* Навигатор над заданиями: разделитель нужен снизу, а не сверху. */ .quicknav--top { margin-top: 0; margin-bottom: 1.6rem; padding-top: 0; padding-bottom: 1.2rem; border-top: none; border-bottom: 1.5px dashed var(--line); } .quicknav__item { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-raised); color: var(--ink-soft); text-decoration: none; } .quicknav__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .quicknav__dot--waiting { background: var(--slate); } .quicknav__dot--pending { background: var(--amber); } .quicknav__dot--reviewed { background: var(--green); } /* Цвета по результату проверки (п.13). Логика состояний — в partials/score_ui.html, здесь только палитра. Кружок делаем чуть крупнее и с ободком, иначе на бледно-зелёном не видно разницы с серым. */ .quicknav__dot--correct, .quicknav__dot--partial, .quicknav__dot--wrong, .quicknav__dot--pending, .quicknav__dot--waiting { width: 11px; height: 11px; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.08) inset; } .quicknav__dot--correct { background: var(--score-correct); } .quicknav__dot--partial { background: var(--score-partial); } .quicknav__dot--wrong { background: var(--score-wrong); } /* Подсветка самой «таблетки» быстрой навигации — так номера читаются с одного взгляда, не приходится вглядываться в маленькую точку. */ .quicknav__item--correct { border-color: var(--score-correct); background: var(--score-correct-bg); } .quicknav__item--partial { border-color: var(--score-partial); background: var(--score-partial-bg); } .quicknav__item--wrong { border-color: var(--score-wrong); background: var(--score-wrong-bg); } .quicknav__item--pending { border-color: var(--amber); background: var(--score-pending-bg); } /* Обводка блока задания при проверке (п.17) — заметно жирнее обычной рамки. */ .assignment-block--correct { border: 3px solid var(--score-correct); } .assignment-block--partial { border: 3px solid var(--score-partial); } .assignment-block--wrong { border: 3px solid var(--score-wrong); } .assignment-block--pending { border: 3px solid var(--amber); } .assignment-block--waiting { border: 3px solid var(--line); } /* Цвет карточки по сроку сдачи (п.15): зелёная рамка — сдано в срок, оранжевая — дедлайн пропущен, без срока/в работе — обычная. */ .card--due-in_time { border-color: var(--score-correct); border-width: 2px; } .card--due-late { border-color: var(--orange); border-width: 2px; } .due-note--in_time { color: var(--score-correct); font-weight: 600; } .due-note--late { color: var(--orange); font-weight: 600; } /* ---------- Просрочено ---------- Вкладка журнала и карточки в ней: дедлайн прошёл, а работа не сдана. */ .tab--overdue.is-active { border-color: var(--orange); background: var(--orange); } .card--overdue { border-left: 4px solid var(--orange); } /* ---------- Личный кабинет ученика (п.5) ---------- */ .cabinet-hero { margin-bottom: 1.6rem; } .cabinet-hero h1 { margin: 0.2rem 0 0.4rem; } /* Большие кнопки-плитки с картинкой. */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .tile { position: relative; display: flex; align-items: flex-end; min-height: 165px; padding: 1.1rem; border-radius: var(--radius); border: 1.5px solid var(--line); overflow: hidden; text-decoration: none; color: #fff; box-shadow: var(--shadow); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .tile:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--shadow-lift); } /* Запасная заливка, пока репетитор не загрузил картинку. */ .tile--homework { background: linear-gradient(135deg, #2F6F5B, #17402F); } .tile--materials { background: linear-gradient(135deg, #3E6FA8, #1F3C63); } .tile--schedule { background: linear-gradient(135deg, #A86A2E, #61391A); } .tile__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 0; margin: 0; } /* Затемнение поверх фото — иначе белый текст теряется на светлых картинках. */ .tile__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.05)); } .tile__text { position: relative; display: flex; flex-direction: column; gap: 0.2rem; } .tile__title { font-size: 1.15rem; font-weight: 700; line-height: 1.25; } .tile__subtitle { font-size: 0.85rem; opacity: 0.85; } .cabinet-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; align-items: start; } /* Кольцевая диаграмма. */ .donut-wrap { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .donut { width: 160px; height: 160px; flex-shrink: 0; } .donut__hole { fill: var(--paper-raised); stroke: var(--line-soft); stroke-width: 3; } .donut__segment { fill: none; stroke-width: 3.4; transform-origin: center; } .donut__number { text-anchor: middle; font-family: var(--sans); font-size: 6px; font-weight: 700; fill: var(--ink); } .donut__caption { text-anchor: middle; font-family: var(--mono); font-size: 2.6px; fill: var(--slate); text-transform: uppercase; } .donut-legend { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; } .donut-legend li { display: flex; align-items: center; gap: 0.45rem; padding: 0.22rem 0; } .donut-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ---------- График динамики по пробникам (п.14) ---------- */ .stats-card { background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 8px; padding: 1rem; margin-bottom: 1.4rem; } .score-chart { width: 100%; height: auto; margin-bottom: 1rem; overflow: visible; } .score-chart__grid { stroke: var(--line-soft); stroke-width: 1; } .score-chart__axis { stroke: var(--line); stroke-width: 1.5; } .score-chart__line { fill: none; stroke: var(--amber); stroke-width: 2.5; } .score-chart__dot { fill: var(--amber); } .score-chart__tick { font-family: var(--mono); font-size: 11px; fill: var(--slate); } .score-chart__value { font-family: var(--mono); font-size: 11px; font-weight: 600; fill: var(--ink); } .score-chart__axis-name { font-family: var(--mono); font-size: 10px; fill: var(--slate); text-transform: uppercase; } /* Строка «ученик + его личный срок сдачи» в форме выдачи набора (п.3). */ .student-due-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line-soft); } .student-due-row:last-child { border-bottom: none; } .student-due-row__name { display: flex; align-items: center; gap: 0.45rem; min-width: 190px; margin: 0; text-transform: none; font-family: var(--sans); font-weight: 400; } .student-due-row__name input { width: auto; } .student-due-row__due { display: flex; align-items: center; gap: 0.45rem; } .student-due-row__due label { margin: 0; font-size: 0.7rem; white-space: nowrap; } .student-due-row__due input { max-width: 210px; } /* Поле для точного (числового) ответа — одна строка, не на всю ширину (п.10). */ .answer-input--exact { max-width: 260px; font-family: var(--mono); } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--slate); border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--paper-raised); } .empty-state h3 { color: var(--ink); } /* ---------- Tables (students) ---------- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1.5px solid var(--line-soft); font-size: 0.92rem; } th { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; color: var(--slate); letter-spacing: 0.06em; } .row-actions { display: flex; gap: 0.5rem; } .table-wrap { background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; padding: 0.3rem 1rem; } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .nav-toggle { display: inline-block; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: flex-start; padding: 1rem 1.25rem 1.4rem; gap: 0.9rem; } .nav.is-open { display: flex; } .card { flex-wrap: wrap; } .stamp { order: -1; } .catalog-row { flex-direction: column; } .catalog-row__media { width: 100%; } } /* ---------- Статья «Обо мне», импортированная из .docx ---------- */ .about-article { line-height: 1.6; color: var(--ink); max-width: 720px; } .about-article p { margin: 0 0 1rem; } .about-article h1, .about-article h2, .about-article h3, .about-article h4 { font-family: var(--mono); color: var(--ink); margin: 1.4rem 0 0.6rem; } .about-article ul, .about-article ol { margin: 0 0 1rem 1.4rem; } .about-article img { max-width: 100%; border-radius: 8px; margin: 0.6rem 0; } .about-article blockquote { margin: 0 0 1rem; padding: 0.6rem 1rem; border-left: 3px solid var(--amber); background: var(--paper-raised); color: var(--slate); } .about-article a { color: var(--amber); } /* ---------- Тумблер темы ---------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.8rem; line-height: 1; color: inherit; } .theme-toggle__track { position: relative; width: 38px; height: 20px; border-radius: 999px; border: 1.5px solid currentColor; opacity: 0.75; flex-shrink: 0; transition: opacity var(--t-fast) var(--ease); } .theme-toggle:hover .theme-toggle__track { opacity: 1; } .theme-toggle__knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: currentColor; transition: transform var(--t-med) var(--ease); } html[data-theme="dark"] .theme-toggle__knob { transform: translateX(18px); } /* Показываем ту иконку, которая соответствует текущей теме: солнце — в тёмной (нажмёшь → станет светло), луна — в светлой. */ .theme-toggle__icon { opacity: 0.8; } .theme-toggle__icon--sun { display: none; } html[data-theme="dark"] .theme-toggle__icon--sun { display: inline; } html[data-theme="dark"] .theme-toggle__icon--moon { display: none; } .theme-toggle--bar { color: rgba(247, 244, 236, 0.85); margin-left: 0.4rem; } html[data-theme="dark"] .theme-toggle--bar { color: rgba(232, 230, 225, 0.85); } .theme-toggle--floating { position: fixed; top: 1rem; right: 1.1rem; z-index: 30; color: var(--ink-soft); background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.4rem 0.7rem; box-shadow: var(--shadow); } /* ---------- Оживление интерфейса ---------- Общий принцип: всё, что кликабельно, слегка приподнимается и подсвечивается при наведении; всё, что появляется на странице, проявляется снизу вверх. Любую анимацию отключает prefers-reduced-motion в самом конце файла. */ .card, .catalog-row, .tab, .quicknav__item, .image-thumb, .empty-state, .stamp { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } /* Приподнимаем только кликабельные карточки: если карточка — просто
с текстом, дёргать её при наведении незачем. */ a.card:hover, .card:has(.card__hitarea):hover, a.catalog-row:hover, .catalog-row:has(.card__hitarea):hover { transform: translateY(-2px) scale(1.006); box-shadow: var(--shadow-lift); border-color: var(--amber); } .tab:hover { transform: translateY(-1px); border-color: var(--amber); } .quicknav__item:hover { transform: translateY(-1px) scale(1.04); border-color: var(--amber); } .image-thumb:hover { transform: scale(1.03); box-shadow: var(--shadow-lift); } .btn { transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:hover { opacity: 0.92; transform: translateY(-1px) scale(1.02); box-shadow: var(--shadow); } .btn:active { transform: translateY(1px) scale(0.99); } .nav a { transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .nav a:hover { transform: translateY(-1px); } input[type="text"], input[type="password"], input[type="number"], textarea, select { transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } input:hover, textarea:hover, select:hover { border-color: var(--slate); } table tbody tr { transition: background-color var(--t-fast) var(--ease); } table tbody tr:hover { background: var(--line-soft); } .lesson-block { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .lesson-block:hover { transform: scale(1.04); box-shadow: var(--shadow-lift); z-index: 5; } /* Появление содержимого страницы. Карточки в списке проявляются с небольшой задержкой друг за другом — задержку выставляет app.js (--i = номер карточки). */ @keyframes sp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .page > * { animation: sp-rise var(--t-med) var(--ease) both; } .ledger > *, .catalog > * { animation: sp-rise var(--t-med) var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); } @keyframes sp-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } .sp-modal-overlay { animation: sp-rise var(--t-fast) var(--ease) both; } .sp-modal { animation: sp-modal-in var(--t-med) var(--ease) both; } /* Уважаем системную настройку «уменьшить движение» — там всё мгновенно. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; } a.card:hover, .card:has(.card__hitarea):hover, a.catalog-row:hover, .catalog-row:has(.card__hitarea):hover, .btn:hover, .tab:hover, .quicknav__item:hover, .image-thumb:hover, .lesson-block:hover, .nav a:hover { transform: none; } } /* ---------- Страница ошибки (404 / 403 / 500) ---------- */ .error-shell { max-width: 460px; margin: 3rem auto 0; padding: 2.4rem 2rem; text-align: center; background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .error-shell__code { font-family: var(--mono); font-size: 3.6rem; font-weight: 600; line-height: 1; color: var(--amber); margin-bottom: 0.6rem; } .error-shell h1 { font-size: 1.3rem; margin-bottom: 0.5rem; } .error-shell__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }