/** * Автооглавление на странице урока GetCourse * * Два представления, оформленные одним набором правил: * .navigator — липкая полоса «Содержание» в начале урока (внутри .lite-page), * список выпадает слоем поверх контента * .toc-side — язычок у правого края экрана (сейчас выключен скриптом, * стили оставлены на месте) * * Общий класс обоих контейнеров — .gc-toc, от него идут все стили списка, * поэтому сверху и сбоку оглавление выглядит одинаково. * Вокруг чужая вёрстка GetCourse — за пределы .navigator / .toc-side * не выходим, !important не используем. */ /* ============================ Палитра ============================ Единственное место, где меняются цвета и размеры обоих представлений. Значения сняты со скриншотов платформы Zerocoder, точных из брендбука нет. */ :root { --toc-bg: #FFFFFF; /* подложка карточки, панели и язычка */ --toc-border: #D6CDF3; /* граница блока: фиолетово-светлая, чтобы полоса читалась на белом уроке */ --toc-text: #1A1A1A; /* основной текст */ --toc-text-muted: #5A5A5A; /* вторичный текст, стрелка, язычок */ --toc-accent: #8B5CF6; /* фирменный фиолетовый: полоса блока, кнопка-тумблер, метка */ --toc-accent-text: #6D28D9; /* тот же фиолетовый, но темнее — только для текста активного пункта: на --toc-accent-soft основной --toc-accent даёт слабый контраст */ --toc-accent-soft: #EAE2FC; /* фон текущего раздела и полосы под курсором */ --toc-accent-wash: #F5F1FE; /* пункт под курсором */ --toc-divider: #E6E6E6; /* линия под заголовком «Содержание» (только в боковой панели) */ --toc-bar-bg: #EAE2FC; /* заливка полосы «Содержание» в обычном состоянии — тот же тон, что раньше был только при наведении */ --toc-bar-hover: #DFD3FA; /* тот же ряд на ступень темнее — заливка при наведении */ /* Тень у выпадающего слоя и боковой панели: слегка фиолетовая, а не чёрная — чтобы слой читался как часть фирменного стиля, а не как дефолтная тень браузера. Слой лежит ПОВЕРХ текста урока, без тени на белом уроке он визуально сливается с фоном */ --toc-shadow: 0 20px 48px -20px rgba(91, 33, 182, .35), 0 4px 14px -6px rgba(91, 33, 182, .18); /* Шрифт: внутри урока наследуется от .lite-page.block-set. Значение ниже — фолбэк для боковой панели, которая живёт в и до которой наследование не доходит (скрипт ещё и копирует туда реальное семейство) */ --toc-font-family: "proxima-nova", "Lato", Helvetica, Arial, sans-serif; --toc-mark: 8px; /* квадратная метка перед словом «Содержание» */ /* Липкая полоса и выпадающий слой. z-index намеренно невысокий: выше контента урока (у него своего контекста наложения нет), но ниже липкой шапки платформы и bootstrap-модалок (1030-1050), кнопок-виджетов справа снизу (1500) и чат-виджетов (10000+) */ --toc-z: 300; --toc-layer-max: 65vh; /* высота раскрытого слоя, дальше — скролл */ --toc-radius: 14px; /* карточка и панель */ --toc-radius-item: 10px; /* пункт списка, любой уровень — скруглённый прямоугольник на всю ширину */ /* Кегль от реального текста урока: .block-set = 14px, основной текст .f-text.text-large = 1.25em ≈ 17.5px. Пункты — чуть мельче текста урока */ --toc-font-size: 15px; /* размер пунктов оглавления */ --toc-title-size: 18px; /* «Содержание»: одинаково на любом экране, мобильного переопределения нет */ --toc-step: 20px; /* ступень вложенности: отступ вложенного списка */ --toc-gap: 8px; /* внутренние поля */ } /* ======================= Общее для обоих списков ======================= */ .gc-toc { /* шрифт наследуем от страницы урока: блок должен читаться как часть платформы, а не как вставка со своим стеком */ font-family: inherit; font-size: var(--toc-font-size); line-height: 1.5; color: var(--toc-text); box-sizing: border-box; } .gc-toc *, .gc-toc *::before, .gc-toc *::after { box-sizing: border-box; } /* Заголовок «Содержание» — одинаковый в карточке и в панели. Размер обычный, не крупнее заголовков урока */ .gc-toc .toc-heading { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin: 0 0 4px; padding: 6px 14px 10px; background: none; border: 0; border-radius: 0; color: var(--toc-text); font: inherit; font-size: var(--toc-title-size); font-weight: 600; line-height: 1.3; text-align: left; } /* Квадратная фиолетовая метка перед словом «Содержание» — опознавательный знак служебного блока. Полосы слева у блока намеренно нет: в уроках так оформлены содержательные врезки (blockquote), путать их нельзя */ .gc-toc .toc-heading::before { content: ''; flex: 0 0 auto; width: var(--toc-mark); height: var(--toc-mark); border-radius: 2px; background: var(--toc-accent); } .gc-toc .toc-list, .gc-toc .toc-sublist { margin: 0; padding: 0; list-style: none; } /* Верхнеуровневые пункты (заголовки разделов) отделены друг от друга полноценным интервалом, а не полупикселем: список из нескольких крупных разделов должен читаться как несколько блоков, а не сплошная простыня строк. Работает в обоих представлениях — .toc-body и .toc-side-scroller оборачивают список одинаково */ .navigator .toc-body > .toc-list > .toc-item + .toc-item, .toc-side .toc-side-scroller > .toc-list > .toc-item + .toc-item { margin-top: 16px; } /* ---- Вложенность: без линий и без маркеров ---- Раньше вложенность показывала направляющая линия + точка на каждом уровне — при 4-5 уровнях (см. урок с разделом "Мои хобби") список превращался в частокол. Теперь вложенность держит только отступ (ступень на самом вложенном списке — не разъезжается на любой глубине) и цвет/кегль текста, которые светлеют и мельчают с глубиной ниже */ .gc-toc .toc-sublist { padding-left: var(--toc-step); } /* Сам пункт отступов не несёт: ступень задаёт вложенный список */ .gc-toc .toc-item { margin: 0; padding: 0; list-style: none; } .gc-toc .toc-item::before { content: none; } /* Прямоугольник на всю ширину — форма любого пункта, не только вложенного: подсветка (под курсором, у текущего пункта) всегда полоса на всю строку. Раньше так были оформлены только вложенные пункты вроде «О себе», а верхний уровень — отдельным правилом-исключением в виде овала-таблетки: выглядело как два разных компонента вместо одного */ .gc-toc .toc-link { display: block; padding: 8px 14px; border-radius: var(--toc-radius-item); background: transparent; color: var(--toc-text); font-weight: 400; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } /* Пункт под курсором: одна и та же лёгкая подсветка что у заголовка-таблетки, что у вложенной строки — наведение читается как предпросмотр состояния, а не отдельный эффект */ .gc-toc .toc-link:hover, .gc-toc .toc-link:focus { background: var(--toc-accent-wash); color: var(--toc-text); text-decoration: none; } .gc-toc .toc-link:focus-visible { outline: 2px solid var(--toc-accent); outline-offset: 1px; } /* Текущий раздел — единственное место, где есть настоящее выделение: мягкий фон, фирменный (но приглушённый, не сплошной насыщенный акцент) цвет текста и полужирное начертание. Одно и то же правило работает и на заголовке-таблетке, и на любом вложенном пункте — выделен только тот, где сейчас находится читатель, остальные всегда нейтральны */ .gc-toc .toc-link-active { background: var(--toc-accent-soft); color: var(--toc-accent-text); font-weight: 600; } /* С 3-го уровня вложенности текст мельче и светлее — этого достаточно, чтобы глубина читалась без линий и точек */ .gc-toc .toc-level-3 > .toc-link, .gc-toc .toc-level-4 > .toc-link, .gc-toc .toc-level-5 > .toc-link, .gc-toc .toc-level-6 > .toc-link, .gc-toc .toc-level-7 > .toc-link, .gc-toc .toc-level-8 > .toc-link { color: var(--toc-text-muted); font-size: 0.93em; } .gc-toc .toc-level-3 > .toc-link-active, .gc-toc .toc-level-4 > .toc-link-active, .gc-toc .toc-level-5 > .toc-link-active, .gc-toc .toc-level-6 > .toc-link-active, .gc-toc .toc-level-7 > .toc-link-active, .gc-toc .toc-level-8 > .toc-link-active { color: var(--toc-accent-text); } /* ==================== Карточка в начале урока ==================== */ /* Пустой контейнер (заголовков не хватило) не должен занимать место */ .navigator:empty { display: none; } /* Липкая полоса: при прокрутке остаётся под шапкой платформы. Отступ сверху (--toc-top) проставляет скрипт по реальной высоте шапки */ .navigator { position: sticky; top: var(--toc-top, 64px); z-index: var(--toc-z); margin: 8px 0 24px; } /* Фолбэк, если у кого-то из родителей overflow и sticky не работает: скрипт переключает блок на fixed и сам проставляет left и width по контентному контейнеру, а в поток кладёт распорку */ .navigator.toc-fixed { position: fixed; margin: 0; } .toc-spacer { margin: 0 0 24px; } /* Плоско: белая подложка, тонкая граница, никаких заливок целиком блоком. Полосы слева нет специально — так в уроках оформлены содержательные врезки (серая заливка + фиолетовая полоска), служебный блок не должен с ними сливаться. Опознаётся он меткой у заголовка. В закрытом виде карточка — это только полоса с заголовком: минимум высоты, урок не съедается */ .navigator .toc-card { position: relative; padding: 0; background: var(--toc-bg); border: 1px solid var(--toc-border); border-radius: var(--toc-radius); } .navigator .toc-title { display: flex; align-items: center; margin: 0; padding: 9px 14px; /* полоса залита светло-фиолетовым: белая на белом фоне урока почти не читалась */ background: var(--toc-bar-bg); /* минус толщина рамки карточки: иначе фон на ховере рисуется прямоугольником и вылезает за её скруглённые углы */ border-radius: calc(var(--toc-radius) - 1px); cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; } .navigator .toc-title:hover { background: var(--toc-bar-hover); } .navigator .toc-title:hover .toc-arrow { filter: brightness(0.94); } .navigator .toc-title:focus-visible { outline: 2px solid var(--toc-accent); outline-offset: 1px; } /* Кнопка-тумблер: круглая, фирменного фиолетового — тот же приём, что у круглых кнопок-стрелок на карточках уроков и тарифа в личном кабинете Zerocoder, поэтому блок сразу читается как часть их интерфейса, а не как вставка со своим языком. Стрелка нарисована псевдоэлементом внутри — разворот на 180° при открытии вместо смены угла на 45°/-135° */ .navigator .toc-arrow { flex: 0 0 auto; margin-left: auto; position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--toc-accent); transition: transform 0.18s ease, background-color 0.15s ease; } .navigator .toc-arrow::before { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -5px 0 0 -4px; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(45deg); } .navigator.toc-open .toc-arrow { transform: rotate(-180deg); } /* Список выпадает слоем ПОВЕРХ урока: absolute внутри карточки, контент под ним не смещается ни на пиксель. Высота ограничена, дальше скролл. Открытие — не мгновенный display:none/block, а тот же переход прозрачности и сдвига, что у боковой панели: два представления одного блока должны вести себя одинаково, а не только выглядеть одинаково. Тень обязательна: без неё белый слой на белом уроке визуально сливался с текстом под собой, было неочевидно, что это отдельный плавающий блок */ .navigator .toc-body { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1; max-height: var(--toc-layer-max); overflow-y: auto; overscroll-behavior: contain; padding: var(--toc-gap); background: var(--toc-bg); border: 1px solid var(--toc-border); border-radius: var(--toc-radius); box-shadow: var(--toc-shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; } .navigator.toc-open .toc-body { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s; } /* ==================== Боковая панель справа ==================== */ /* По умолчанию панели нет: на узких экранах остаётся только карточка */ .toc-side { display: none; } .toc-side { position: fixed; /* панель лежит в и шрифт урока не наследует: скрипт проставляет реальное семейство инлайном, это — фолбэк, если он не отработал */ font-family: var(--toc-font-family); top: 50%; right: 12px; transform: translateY(-50%); z-index: 900; /* выше контента, ниже модалок GetCourse */ } /* Язычок */ .toc-side .toc-side-tab { display: block; margin: 0; padding: 18px 8px; background: var(--toc-bg); border: 1px solid var(--toc-border); border-radius: var(--toc-radius); box-shadow: none; color: var(--toc-text-muted); font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color 0.15s ease, background-color 0.15s ease; } .toc-side .toc-side-tab:hover, .toc-side.toc-side-open .toc-side-tab { background: var(--toc-accent-wash); color: var(--toc-accent); } .toc-side .toc-side-tab:focus-visible { outline: 2px solid var(--toc-accent); outline-offset: 2px; } .toc-side .toc-side-tab-text { display: block; writing-mode: vertical-rl; letter-spacing: 0.04em; white-space: nowrap; font-size: 0.88em; } /* Раскрывающийся список: висит слева от язычка, оформлен так же, как карточка сверху — белая подложка, та же граница, то же скругление, тот же заголовок с меткой, та же тень, что у верхнего слоя */ .toc-side .toc-side-panel { position: absolute; top: 50%; right: 100%; margin-right: 6px; transform: translateY(-50%) translateX(6px); width: 320px; max-width: 30vw; padding: var(--toc-gap); background: var(--toc-bg); border: 1px solid var(--toc-border); border-radius: var(--toc-radius); box-shadow: var(--toc-shadow); opacity: 0; visibility: hidden; pointer-events: none; /* закрытая панель кликов не перехватывает */ transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; } /* Прозрачный мостик через зазор между язычком и панелью: без него курсор «проваливается» в разрыв и панель закрывается на полпути */ .toc-side .toc-side-panel::after { content: ''; position: absolute; top: 0; right: -10px; /* зазор 6px + рамка панели + запас */ width: 10px; height: 100%; } .toc-side.toc-side-open .toc-side-panel { opacity: 1; visibility: visible; pointer-events: auto; /* раскрытая — ссылки кликабельны */ transform: translateY(-50%) translateX(0); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; } /* В панели заголовок отделён линией: там список идёт сразу под ним, в верхнем блоке слой — отдельная коробка со своей рамкой */ .toc-side .toc-side-title { border-bottom: 1px solid var(--toc-divider); } /* Список длиннее экрана скроллится внутри себя */ .toc-side .toc-side-scroller { max-height: calc(100vh - 240px); overflow-y: auto; overscroll-behavior: contain; } /* ==================== Адаптив ==================== */ /* Боковая панель — только на широких экранах: на мобильном и планшете она перекрывала бы контент урока, там работает карточка сверху */ @media (min-width: 1180px) { .toc-side { display: block; } } @media (max-width: 767px) { :root { --toc-step: 16px; --toc-font-size: 14px; --toc-layer-max: 60vh; } .navigator { margin-bottom: 18px; } .toc-spacer { margin-bottom: 18px; } .gc-toc .toc-link { padding-top: 9px; padding-bottom: 9px; } } /* Тач-устройства: раскрытие по тапу, поэтому язычок делаем крупнее пальца */ .toc-side.toc-side-touch .toc-side-tab { padding: 24px 11px; } /* Системная настройка «меньше анимации» */ @media (prefers-reduced-motion: reduce) { .gc-toc .toc-link, .navigator .toc-arrow, .navigator .toc-body, .toc-side .toc-side-tab, .toc-side .toc-side-panel, .toc-side.toc-side-open .toc-side-panel { transition: none; } } /* Печать: оглавление не нужно */ @media print { .navigator, .toc-side { display: none; } }