/* ============================================================ Розділ «Матеріали»: /materials, /materials/{предмет}, /{клас}, /{тема}, /{матеріал} і блок-запрошення MaterialsInvite (лише на Головній). Спільні компоненти беремо з app.css: .page-header + .breadcrumbs (шапка), .chips (фільтр класів), .grid.grid--2 + .card.card--link (картки «Нове», предметів і матеріалів — одна сітка, краї збігаються), .tags > li > .tag (типи матеріалу), .status (завантаження, «готуються», помилка), .btn / .btn--secondary, .back-link, .meta. Тут — лише розкладка розділу й перегляд матеріалу в iframe. Лише токени з :root (app.css). Один акцент — --brand; колір і значок предмета з catalog.json в інтерфейсі не використовуються. Без емодзі, «пігулок», тіней, градієнтів і руху. Класи, на які спирається Pages/MaterialsView.razor.js, — не перейменовувати: .mat-viewer, .mat-viewer__frame (iframe), .mat-viewer--document, .is-autoheight, .is-sized, .is-pseudo-fs, html.mat-noscroll. ============================================================ */ :root { --mat-site-header: 61px; /* липка шапка сайту (NavMenu: 60 px + рамка) */ --mat-header-offset: calc(var(--mat-site-header) + 0.5rem); /* шапка сайту + зазор (прокрутка до панелі над матеріалом) */ --mat-frame-gap: 8px; /* зазор між матеріалом і шапкою сайту / низом вікна */ /* Нижче за цю висоту матеріали не вміщають двоколонковий макет без власної прокрутки (SPEC 7.3): краще трохи прокрутити сторінку, ніж мати «прокрутку в прокрутці». */ --mat-frame-min: 600px; } /* ---------- Сторінка розділу ---------- Сторінки пререндерено вже з каталогом, а після запуску WebAssembly каталог завантажується ще до першого рендеру (Program.cs), тож «Завантажуємо каталог…» видно лише зрідка: перехід усередині сайту, поки каталог ще не прийшов, або повільна мережа. Лише на цей час область вмісту резервує висоту: шапка сторінки (не нижча за 8rem) + ця область вищі за вікно, тож футер не «стрибає» (CLS ≈ 0). Готова сторінка — без резерву, коротка не має порожнього місця перед футером. Відступи — як у .section на інших сторінках (56 / 40 px); компактніший верх — лише в перегляду матеріалу. */ .mat-page { padding-block: var(--section-y); } .mat-page:has(> .container > .mat-status--loading) { min-height: calc(100vh - var(--mat-site-header) - 8rem); } .mat-page--viewer { padding-top: 1.25rem; } .mat-page--viewer:has(> .container > .mat-status--loading) { min-height: calc(100vh - var(--mat-site-header) - 5rem); } /* Компактна шапка сторінки перегляду: матеріал має вміститися на екрані. */ .mat-header--compact { padding: 1.25rem 0 1.5rem; } .mat-header--compact .breadcrumbs { margin-bottom: 0.5rem; } .mat-header--compact h1 { font-size: var(--fs-h2); } .mat-header--compact .page-header__lead { margin-top: 0.5rem; max-width: var(--measure); font-size: var(--fs-body); } /* ---------- Шапка під час завантаження каталогу ---------- Назви ще невідомі: остання крихта й h1 — порожні рядки (текст — лише для читалок), опис — порожній рядок. Щоб після завантаження шапка не «виросла» й не зсунула сторінку, резервуємо типову кількість рядків (за типом сторінки, MaterialsHeader Shape): на комп'ютері все в один рядок, крім опису матеріалу (два); на телефоні крихти теми й матеріалу — два рядки, назва матеріалу — три, описи — два. */ .mat-header--loading .breadcrumbs ol { min-height: calc(var(--mat-crumb-lines, 1) * 1.5em); } .mat-header--loading h1 { min-height: calc(var(--mat-title-lines, 1) * 1.2em); } .mat-header--loading .page-header__lead { min-height: calc(var(--mat-lead-lines, 1) * 1.5em); } .breadcrumbs li:has(+ .mat-crumb-pending)::after { visibility: hidden; } /* роздільник перед порожньою крихтою */ .mat-header--viewer { --mat-lead-lines: 2; } /* ---------- Фільтр класів: «Клас [Усі] [5] … [11]» ---------- */ .mat-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 2.5rem; } .mat-filter__label { font-weight: 600; color: var(--ink); } .mat-filter .chips { margin: 0; } /* Вузький телефон: вісім кнопок («Усі», 5–11) — одним рядком під «Клас», рівними частками ширини (не ширші за 4rem), а не 6 + 2 з «10» і «11» окремо. Висота лишається 44 px. */ @media (max-width: 480px) { .mat-filter .chips { flex: 1 1 100%; flex-wrap: nowrap; gap: 0.25rem; } .mat-filter .chips > li { flex: 1 1 0; min-width: 0; max-width: 4rem; } .mat-filter .chip { width: 100%; min-width: 0; padding-inline: 0.25rem; } } /* ---------- Розділи сторінки: «Нове», «Предмети», «10 клас»… ---------- */ .mat-section + .mat-section { margin-top: 3rem; } /* Заголовок розділу й під ним — один рядок пояснення (.meta), ліворуч, як у документі. */ .mat-section__head { margin-bottom: 1.25rem; } .mat-section__head > * { margin: 0; } .mat-section__head > * + * { margin-top: 0.25rem; } .mat-section__title { margin-bottom: 1.25rem; } /* Рядок службових даних з іконками: тривалість, підручник, дата оновлення. */ .mat-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--muted); } .mat-meta > span { display: inline-flex; align-items: baseline; gap: 0.375rem; } .mat-meta .icon { align-self: center; } /* Типи матеріалу — спільний список .tags; «Нове» — та сама мітка з тонкою золотою рамкою. */ .mat-kinds { margin: 0; } .mat-tag-new { border-color: var(--accent); color: var(--ink); } /* ---------- Картка матеріалу (.card.card--link): назва → [предмет · клас · тема] → опис → мітки → час ---------- */ .mat-card { display: flex; flex-direction: column; gap: 0.625rem; } .mat-card > * { margin: 0; } .mat-card__context { margin-top: -0.25rem; font-size: var(--fs-meta); line-height: 1.5; color: var(--muted); } .mat-card__desc { flex: 1 0 auto; color: var(--text); } .mat-card__title, .mat-card__desc { text-wrap: pretty; } .mat-card__meta { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); } /* ---------- Картки предметів (/materials) ---------- */ .mat-subject { display: flex; flex-direction: column; } .mat-subject .card__title { margin-bottom: 0.5rem; } .mat-subject__desc { flex: 1 0 auto; margin-bottom: 1rem; color: var(--text); } .mat-subject__meta { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--line); } .mat-soon-line { max-width: var(--measure); margin: 1.5rem 0 0; } /* ---------- Теми предмета (/materials/{предмет}): рядки з лініями ---------- */ .mat-topic-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .mat-topic-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.75rem 2.5rem; margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--line); } .mat-topic-row > * { margin: 0; } .mat-topic-row__main > * { margin: 0; } .mat-topic-row__title { margin-bottom: 0.25rem; font-size: var(--fs-lg); line-height: 1.3; } .mat-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; } .mat-links > li { margin: 0; } .mat-links a { font-weight: 600; } .mat-links .mat-links__kinds { margin-top: 0.5rem; } /* «Перейти до 10 класу» під списком тем: спільне .more-link (app.css) + відступ від списку. */ .mat-more { margin-top: 0.75rem; } /* ---------- Теми класу (/materials/{предмет}/{клас}) ---------- */ .mat-topic + .mat-topic { margin-top: 2.5rem; } .mat-topic > * { margin: 0; } .mat-topic__title { margin-bottom: 0.5rem; } h2.mat-topic__title { font-size: var(--fs-h3); color: var(--ink); } .mat-topic .mat-textbook { margin-bottom: 1.25rem; } .mat-back { margin: 2rem 0 0; } /* ---------- Підготовка до НМТ (MaterialsNmt) ---------- Окремий блок над класами: тло --paper і смуга кольору ліцею ліворуч — видно, що це не ще один клас. Картки — банк і формат НМТ; довідники — плитками (одне натискання — і ти в довіднику). */ .mat-nmt { padding: 1.25rem 1.5rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); scroll-margin-top: calc(var(--mat-site-header, 4rem) + 1rem); } .mat-nmt__head { margin-bottom: 1rem; } .mat-nmt__head > * { margin: 0; } .mat-nmt__lead { margin-top: 0.25rem; max-width: var(--measure); color: var(--muted); } .mat-nmt__cards { margin-bottom: 1.5rem; } .mat-nmt__cards:last-child { margin-bottom: 0; } .mat-nmt__subtitle { margin: 0 0 0.625rem; font-size: var(--fs-lg); } .mat-nmt__hb { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .mat-nmt__hb-link { display: flex; align-items: center; gap: 0.625rem; min-height: 48px; height: 100%; padding: 0.5rem 0.875rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; line-height: 1.3; text-decoration: none; } .mat-nmt__hb-link .icon { flex: none; color: var(--brand); } .mat-nmt__hb-link:hover { border-color: var(--line-strong); background: var(--brand-soft); } @media (max-width: 600px) { .mat-nmt { padding: 1rem 1rem 1.25rem; } } /* ---------- Повідомлення (.status) ---------- */ .mat-status > p { max-width: var(--measure); } .mat-status > .actions { margin-top: 0.5rem; } /* ---------- Перегляд матеріалу ---------- Сам матеріал ширший за решту сторінки (до 1392 px); панель над ним (мітки, підручник, кнопки) — тієї самої ширини й по тих самих краях, щоб кнопки «належали» матеріалу. */ .mat-view { --mat-viewer-w: max(100%, min(1392px, 100vw - 3rem)); } .mat-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; width: var(--mat-viewer-w); margin: 0 0 1rem calc((100% - var(--mat-viewer-w)) / 2); /* Бажаний відступ від верху вікна — --mat-header-offset; --header-offset уже дає scroll-padding-top на . */ scroll-margin-top: calc(var(--mat-header-offset) - var(--header-offset)); } .mat-viewer-bar__info { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .mat-viewer-bar__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; scroll-margin-top: calc(var(--mat-header-offset) - var(--header-offset)); } /* Висота iframe — екран без липкої шапки сайту й зазорів (але не менше --mat-frame-min): прокручений до матеріалу (scroll-margin-top — одразу під шапку), учень бачить його весь, від «Варіант / вкладки» до кнопок. Коли iframe вужчий за 1100 px (матеріал в один стовпчик: телефони, планшети, вікна до ≈ 1150 px) — висоту за вмістом ставить MaterialsView.razor.js (клас .is-autoheight): одна прокрутка сторінки, без прокрутки в iframe. min-height рамки — та сама висота iframe за замовчуванням: поки матеріал відкривається («Відкриваємо матеріал…») і поки скрипт не підібрав висоту за вмістом, вміст нижче не «стрибає» (CLS). Щойно висота за вмістом устоялася (.is-autoheight.is-sized: явне lab:height або 1,5 с після завантаження), резерв знято — інакше під коротким чи згорнутим матеріалом лишалася б порожня рамка. */ .mat-viewer { position: relative; overflow: hidden; display: flex; flex-direction: column; width: var(--mat-viewer-w); min-height: 84vh; min-height: max(var(--mat-frame-min), 100vh - var(--mat-site-header) - 2 * var(--mat-frame-gap) - 2px); min-height: max(var(--mat-frame-min), 100dvh - var(--mat-site-header) - 2 * var(--mat-frame-gap) - 2px); margin: 0 0 2.5rem calc((100% - var(--mat-viewer-w)) / 2); /* Одразу під шапку сайту (з зазором, якщо вистачає висоти); мінус scroll-padding-top на . */ scroll-margin-top: calc(var(--mat-site-header) + clamp(0px, (100vh - var(--mat-site-header) - var(--mat-frame-min) - 2px) / 2, var(--mat-frame-gap)) - var(--header-offset)); scroll-margin-top: calc(var(--mat-site-header) + clamp(0px, (100dvh - var(--mat-site-header) - var(--mat-frame-min) - 2px) / 2, var(--mat-frame-gap)) - var(--header-offset)); background: var(--surface); /* Помітна межа матеріалу на сторінці (учні не завжди бачили, де він починається й закінчується): товща рамка і смуга кольору ліцею зверху — «тут матеріал». Без тіні: тінь у дизайні сайту лише в липкої шапки. */ border: 2px solid var(--line-strong); border-top: 4px solid var(--brand); border-radius: var(--radius); } .mat-viewer.is-autoheight.is-sized { min-height: 0; } .mat-viewer__frame { display: block; flex: none; width: 100%; border: 0; background: var(--surface); height: 84vh; height: max(var(--mat-frame-min), 100vh - var(--mat-site-header) - 2 * var(--mat-frame-gap) - 2px); height: max(var(--mat-frame-min), 100dvh - var(--mat-site-header) - 2 * var(--mat-frame-gap) - 2px); } .mat-viewer > .mat-status { flex: 1 0 auto; margin: 0; border: 0; border-radius: 0; } /* Повідомлення для режиму без JavaScript (