/* ==========================================================================
Тема документации Simple2FA поверх Material for MkDocs.
Раскладка по референсу Tailscale Docs: шапка сайта без поиска; слева дерево
разделов с шевронами; по центру поиск, хлебные крошки, заголовок, строка
«Последнее обновление · Копировать как Markdown · Открыть как Markdown», текст;
справа «На этой странице». Шрифт Golos Text (self-hosted), палитра сайта.
========================================================================== */
/* --- Шрифты: копируются хуком из site/assets/fonts/ в manual/assets/fonts/ --- */
@font-face { font-family: "Golos Text"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/GolosText-Regular.woff2") format("woff2"); }
@font-face { font-family: "Golos Text"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/GolosText-Medium.woff2") format("woff2"); }
@font-face { font-family: "Golos Text"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/GolosText-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Golos Text"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/GolosText-Bold.woff2") format("woff2"); }
/* --- Токены: значения приходят из shared.css, здесь только короткие имена ---
Переменные темы задаём и на :root, и на [data-md-color-scheme] (это body):
свою палитру Material объявляет именно на body, и она перебивала бы :root не
специфичностью, а тем, что body ближе к содержимому. Из-за этого, например,
ссылка «Ещё N на этой странице» в поиске оставалась индиговой #4051B5. */
:root, [data-md-color-scheme=default] {
--s2-accent: var(--accent);
--s2-accent-hover: var(--accent-hover);
--s2-accent-bg: var(--accent-bg);
--s2-text: var(--text);
--s2-text-2: var(--text-2);
--s2-text-3: var(--text-3);
--s2-surface: var(--surface);
--s2-border: var(--border);
--s2-green: var(--green);
--s2-amber: var(--amber);
--s2-red: var(--red);
--md-text-font: "Golos Text", system-ui, sans-serif;
--md-code-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Крестик закрытия выезжающей панели: маска, цвет задаётся фоном */
--s2-icon-close: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.75'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206%2018%2018M18%206%206%2018'/%3E%3C/svg%3E");
--s2-header-h: 72px; /* высота липкой шапки вместе с границей, см. .header в shared.css */
--s2-topbar-h: 57px; /* строка с кнопкой дерева: кнопка 36 + поля 10 и 10 + граница 1.
Ниже 1024 она липкая под шапкой, см. «Хлебные крошки» */
--s2-side: var(--side); /* боковые поля — общая шкала из shared.css */
--md-primary-fg-color: var(--s2-accent);
--md-primary-fg-color--light: var(--s2-accent);
--md-primary-fg-color--dark: var(--s2-accent-hover);
--md-accent-fg-color: var(--s2-accent-hover);
--md-accent-fg-color--transparent: var(--s2-accent-bg);
--md-default-fg-color: var(--s2-text);
--md-default-fg-color--light: var(--s2-text-2);
--md-default-fg-color--lighter: var(--s2-text-3);
--md-default-fg-color--lightest: var(--s2-border);
--md-default-bg-color: #fff;
--md-typeset-color: var(--s2-text);
--md-typeset-a-color: var(--s2-accent);
--md-typeset-mark-color: var(--s2-accent-bg);
--md-typeset-table-color: var(--s2-border);
--md-typeset-table-color--light: var(--s2-surface);
--md-code-fg-color: var(--s2-text);
--md-code-bg-color: var(--s2-surface);
--md-code-hl-color: var(--s2-accent-bg);
}
html { font-size: 100%; }
/* Шапка липкая: переход по якорю должен останавливаться под ней, а не под её краем.
Material считает этот отступ в rem от своего корня 125%, а здесь корень 100%,
поэтому задаём в px от высоты шапки. */
html { scroll-padding-top: calc(var(--s2-header-h) + 16px); }
.md-typeset :target { scroll-margin-top: 0; } /* иначе к отступу прокрутки прибавился бы ещё и запас темы */
body { -webkit-font-smoothing: antialiased; }
/* ==========================================================================
Сетка: дерево слева, контент по центру, оглавление справа
========================================================================== */
.md-grid { max-width: 1680px; } /* сетка документации, шире линии шапки и подвала (1348) */
/* Верхний отступ сетки — 24 px, и он же нужен теме для подсветки оглавления:
Material считает активным пункт, у которого offset − adjust < scrollY, где
adjust = высота шапки + 0.8 × (отступ .md-main__inner от .md-main). При нулевом
отступе adjust = 72 < scroll-padding-top (88), и после перехода по оглавлению
подсвечивался предыдущий заголовок. Колонки возвращены на прежние места ниже:
у .md-content отступ уменьшен на те же 24, у боковых колонок он снят,
а их липкий top увеличен. Расположение не изменилось, adjust стал 91. */
.md-main__inner { margin-top: 24px; }
.md-content { min-width: 0; padding-top: 0; padding-bottom: 40px; } /* отступ сверху даёт сетка; отступ снизу — чтобы текст не упирался в «Связаться с нами» */
.md-content__inner { max-width: 995px; margin: 0 var(--s2-side) 1.2rem; padding-top: 0; }
/* Пороги раскладки — свои, как в сетке проекта, а не темы:
от 1280 три колонки, 1024–1280 дерево и текст, ниже 1024 только текст. */
@media screen and (min-width: 1024px) {
.md-main__inner { padding: 0 24px; }
.md-content { padding: 8px 40px 64px; } /* 24 из прежних 32 даёт margin-top сетки */
.md-content__inner { margin: 0; }
/* От 1220 тема добавляет тексту свои 1.2rem по бокам, и H1 с абзацами уезжает
вправо от поиска и крошек. Селектор длиннее теминого, коротким его не перебить. */
[dir=ltr] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner,
[dir=ltr] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner { margin-left: 0; margin-right: 0; }
/* Тема держит боковые колонки нулевой высоты: содержимое просто свисает из липкого
блока и в конце страницы наезжает на «Связаться с нами». Высота нужна настоящая,
но именно по содержимому: если задать её в экран, липкий блок отрывается на экран
раньше конца текста — меню и оглавление останавливались на середине статьи.
Ограничение по высоте несёт .md-sidebar__scrollwrap: длинное дерево прокручивается
внутри себя, короткое держится под шапкой до конца текста, как в референсе.
top — под шапкой, а не под её краем. */
.md-sidebar { top: calc(var(--s2-header-h) + 24px); height: auto; padding-top: 0; } /* 24 px над деревом даёт margin-top сетки, в липком состоянии — top */
/* height здесь с !important: скрипт темы на каждый скролл и ресайз проставляет
колонке инлайновую высоту в экран, и липкий блок снова отрывался бы раньше времени. */
.md-sidebar .md-sidebar__scrollwrap { height: auto !important; max-height: calc(100vh - var(--s2-header-h) - 24px); }
/* У заголовка «На этой странице» собственных полей почти нет, и в липком состоянии
он вставал ближе к шапке, чем первый пункт дерева слева. Добавляем 16 px —
отступ одинаковый и на неприкреплённой, и на липкой колонке, потому что
top у .md-sidebar равен её статическому положению. */
.md-sidebar--secondary { padding-top: 16px; }
.md-sidebar--secondary .md-sidebar__scrollwrap { max-height: calc(100vh - var(--s2-header-h) - 40px); }
/* Каждому списку тема даёт отрицательное нижнее поле (-0.4rem). Оно схлопывается
наружу, и колонка считает себя ниже содержимого — по 6,4 px на каждый уровень
вложенности, поэтому с новым подразделом снова срезало последний пункт.
Гасим поле целиком: высота колонки равна содержимому при любой глубине дерева.
Расстояние между концом вложенной ветки и следующим разделом становится таким же,
как между остальными пунктами. */
.md-sidebar .md-nav { margin-bottom: 0; }
/* Боковые колонки тянутся вместе с окном и упираются в 310, как в референсе:
фиксированная ширина на 1280–1400 съедала бы текст. */
.md-sidebar--primary { width: clamp(260px, 19%, 310px); }
html .md-sidebar .md-sidebar__inner { padding-right: 0; }
}
/* Оглавление справа появляется только на трёхколоночной ширине */
@media screen and (max-width: 1279px) { .md-sidebar--secondary:not([hidden]) { display: none; } }
@media screen and (min-width: 1280px) { .md-sidebar--secondary { width: clamp(240px, 19%, 310px); } }
/* Тема считает себя «мобильной» до 1220: дерево уезжает в панель, вложенные уровни
становятся слоями, появляются свои отступы и рамки. Ниже — отмены, общие и для
колонки (1024–1280), и для выезжающей панели (ниже 1024). */
@media screen and (max-width: 76.234375em) {
.md-nav--primary .md-nav { position: static; display: block; height: auto; background: none; z-index: auto; }
/* Тема подчёркивает каждый список тонкой линией сверху (inset box-shadow) — в колонке
они читались как случайные палки над разделами */
.md-nav--primary .md-nav__title ~ .md-nav__list { box-shadow: none; }
/* Разворот и сворачивание — теминым «широким» способом (сетка), а не мобильными слоями:
иначе свёрнутый раздел не прятался, а становился прозрачным, оставляя провал.
Правила для .md-toggle--indeterminate сейчас не срабатывают: этот класс тема ставит
только при navigation.expand, а он выключен (см. mkdocs.yml). Оставлены на случай,
если фичу вернут. */
.md-nav--primary .md-nav__toggle ~ .md-nav {
display: grid; grid-template-rows: minmax(0.4rem, 0fr); opacity: 0; visibility: collapse; transform: none;
transition: grid-template-rows 0.25s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.25s, visibility 0.25s;
}
.md-nav--primary .md-nav__toggle ~ .md-nav > .md-nav__list { overflow: hidden; }
.md-nav--primary .md-nav__toggle:checked ~ .md-nav,
.md-nav--primary .md-toggle--indeterminate ~ .md-nav {
grid-template-rows: minmax(0.4rem, 1fr); opacity: 1; visibility: visible;
transition: grid-template-rows 0.25s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.15s 0.1s, visibility;
}
.md-nav--primary .md-toggle--indeterminate ~ .md-nav { transition: none; }
/* Шеврон тема разворачивает тоже только от 1220 */
.md-nav--primary .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link .md-nav__icon::after,
.md-nav--primary .md-nav__item--nested .md-toggle--indeterminate ~ .md-nav__link .md-nav__icon::after { transform: rotate(90deg); }
.md-nav--primary .md-nav .md-nav__title { display: none; }
.md-nav--primary .md-nav__list { flex: none; }
.md-nav--primary .md-nav__item { border-top: 0; }
/* интерлиньяж тема здесь делает 1.5 — из-за него строки дерева были выше, чем от 1220 */
.md-nav--primary .md-nav__item, .md-nav--primary .md-nav__title { font-size: 15px; line-height: 1.35; }
/* шеврон: свой размер и без теминого отрицательного поля, иначе подпись
вложенного раздела сдвигалась на 3 px влево относительно широкого экрана */
[dir=ltr] .md-nav--primary .md-nav__link .md-nav__icon { font-size: inherit; margin: 0; }
.md-nav--primary .md-nav__link { padding: 0; }
/* Родительские пункты активной ветки тема здесь красит акцентом — на широком экране
они обычного цвета */
.md-nav--primary .md-nav__item--active > .md-nav__link { color: var(--s2-text); }
/* мелочь для полного совпадения: свои переходы вместо теминых мобильных */
.md-nav--primary { transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1); }
.md-nav--primary .md-nav__icon { transition: background-color 0.25s; }
/* Тема подменяет ссылку активной страницы переключателем оглавления — возвращаем ссылку.
Селекторы длиннее теминых намеренно: у тех четыре класса, коротким их не перебить. */
.md-nav--primary .md-nav__link[for=__toc] { display: none; }
.md-sidebar--primary .md-nav--primary .md-nav__link[for=__toc] ~ .md-nav { display: none; }
.md-sidebar--primary .md-nav--primary .md-nav__link[for=__toc] ~ a.md-nav__link { display: flex; }
}
/* От 1024 до 1220 дерево должно стоять колонкой, а не выезжать сбоку */
@media screen and (min-width: 1024px) and (max-width: 76.234375em) {
.md-sidebar--primary,
[data-md-toggle=drawer]:checked ~ .md-container .md-sidebar--primary {
position: sticky; left: auto; right: auto; height: auto; z-index: auto;
background: none; box-shadow: none; transform: none; transition: none;
}
/* position: static — у темы он absolute; прокрутка и ограничение по высоте остаются
теми же, что от 1280, чтобы длинное дерево вело себя одинаково на любой ширине */
.md-sidebar--primary .md-sidebar__scrollwrap { position: static; overflow: auto; margin: 0 0.2rem; }
/* Остальное, что тема меняет в «мобильном» режиме: белая подложка колонки и списков
и свой левый отступ первого уровня. Возвращаем вид широкого экрана. */
.md-nav--primary, .md-nav--primary .md-nav__title ~ .md-nav__list { background: none; }
.md-nav--primary .md-nav__title ~ .md-nav__list { overflow: visible; scroll-snap-type: none; }
[dir=ltr] .md-nav--primary .md-nav__list { padding-left: 0.6rem; }
[dir=ltr] .md-nav--primary .md-nav__item > .md-nav__link { margin-right: 0.4rem; }
/* position: static — иначе дерево (у темы оно absolute) не даёт высоты своей колонке,
и в конце страницы список наезжает на «Связаться с нами» */
.md-nav--primary { position: static; display: block; height: auto; }
.md-overlay { display: none; }
}
/* Боковые колонки прокручиваются, но без видимой полосы: до того, как скрипт темы
вычислит их высоту, содержимое на несколько пикселей выше контейнера, и при каждом
переходе на долю секунды мелькали полосы прокрутки. */
.md-sidebar__scrollwrap { scrollbar-width: none; scrollbar-gutter: auto; }
.md-sidebar__scrollwrap::-webkit-scrollbar { width: 0; height: 0; }
/* Шапка и подвал общие с главной: разметка в shared/*.html, стили в shared.css.
Здесь ниже — только то, что относится к самой документации. */
/* Тема при прокрутке вешает на шапку свой класс с тенью — у нас вместо тени граница */
.header.md-header--shadow { box-shadow: none; }
/* ==========================================================================
Поиск в колонке контента
========================================================================== */
.doc-search { position: relative; margin: 0 var(--s2-side) 24px; z-index: 3; } /* выше текста и боковых колонок, но ниже шапки (у неё 4) */
@media screen and (min-width: 1024px) { .doc-search { margin: 0 0 32px; max-width: 512px; } }
.doc-search .md-search { padding: 0; position: relative; }
.md-header__button[for=__search][hidden] { display: none; }
.doc-search .md-search__overlay { display: none; }
.doc-search .md-search__inner { position: relative; left: auto; right: auto; top: auto; float: none; width: 100%; height: auto; opacity: 1; transform: none; padding: 0; overflow: visible; transition: none; }
.doc-search .md-search__form { height: 48px; background: #fff; border: 1px solid var(--s2-border); border-radius: 8px; box-shadow: none; transition: border-color 120ms; }
.doc-search .md-search__form:hover { background: #fff; }
[data-md-toggle=search]:checked ~ .md-container .doc-search .md-search__form { border-color: var(--s2-accent); background: #fff; box-shadow: none; }
/* Нижние углы распрямляются только когда под полем открыт список — то есть когда в поле что-то набрано */
[data-md-toggle=search]:checked ~ .md-container .doc-search .md-search__form:has(.md-search__input:valid) { border-radius: 8px 8px 0 0; }
.doc-search .md-search__input { height: 100%; padding: 0 44px; font-size: 16px; color: var(--s2-text); background: transparent; text-overflow: ellipsis; }
.doc-search .md-search__input::placeholder { color: var(--s2-text-2); }
[data-md-toggle=search]:checked ~ .md-container .doc-search .md-search__input::placeholder { color: var(--s2-text-3); }
.doc-search .md-search__icon[for=__search] { left: 14px; top: 13px; color: var(--s2-text-2); pointer-events: none; }
.doc-search .md-search__icon[for=__search] svg:first-child { display: block; }
.doc-search .md-search__icon[for=__search] svg:last-child { display: none; }
.doc-search .md-search__input + .md-search__icon { color: var(--s2-text-2); }
.doc-search .md-search__options { right: 12px; top: 13px; }
[data-md-toggle=search]:checked ~ .md-container .doc-search .md-search__input:valid ~ .md-search__options > .md-icon { opacity: 1; pointer-events: auto; transform: scale(1); }
.doc-search .md-search__suggest { display: none; }
.doc-search .md-search__output {
position: absolute; top: 100%; bottom: auto; left: 0; right: 0; width: 100%; z-index: 5;
opacity: 0; pointer-events: none; overflow: hidden; background: #fff;
border: 1px solid var(--s2-accent); border-top: 0; border-radius: 0 0 8px 8px; transition: none;
}
[data-md-toggle=search]:checked ~ .md-container .doc-search .md-search__output { opacity: 1; pointer-events: auto; box-shadow: none; }
.doc-search .md-search__scrollwrap { width: 100%; max-height: 0; scrollbar-color: var(--s2-text-3) transparent; }
.doc-search .md-search__scrollwrap:hover { scrollbar-color: var(--s2-text-2) transparent; } /* у темы здесь акцент — слишком ярко */
[data-md-toggle=search]:checked ~ .md-container .doc-search .md-search__scrollwrap { max-height: 60vh; }
/* Пока в поле пусто, выпадающего списка нет вовсе: строка «Начните печатать для поиска»
ничего не сообщает, достаточно подсветки поля. Поле обязательное (required), поэтому
пустое оно :invalid. Старые браузеры без :has просто покажут список, как раньше. */
[data-md-toggle=search]:checked ~ .md-container .doc-search .md-search__form:has(.md-search__input:not(:valid)) ~ .md-search__output { opacity: 0; pointer-events: none; }
.md-search-result__meta { background: var(--s2-surface); color: var(--s2-text-2); font-size: 13px; padding-left: 16px; }
.md-search-result__article { padding-left: 16px; padding-right: 16px; }
.md-search-result .md-typeset { font-size: 14px; }
.md-search-result .md-typeset h1 { font-size: 16px; font-weight: 500; margin: 10px 0; }
.md-search-result .md-typeset h2 { font-size: 14px; font-weight: 600; }
.md-search-result__more > summary > div { font-size: 13px; padding-left: 16px; }
.md-search-result mark { color: var(--s2-accent); }
/* ==========================================================================
Хлебные крошки
========================================================================== */
.doc-topbar { display: flex; align-items: center; gap: 10px; margin: 0 var(--s2-side); }
@media screen and (min-width: 1024px) { .doc-topbar { margin: 0; } }
/* Кнопка открывает дерево разделов там, где оно свёрнуто; выше 1024 дерево на месте.
Без рамки, как в референсе. Значок — список (строки с точками), а не бургер: бургер
уже стоит в шапке сайта и означает меню сайта, и два одинаковых значка на одном
экране читались как одно и то же. Список прямо называет то, что откроется, — перечень
разделов документации. */
.doc-navbtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; margin-left: -6px; color: var(--s2-text); cursor: pointer; }
.doc-navbtn:hover { color: var(--s2-accent); }
@media screen and (min-width: 1024px) { .doc-navbtn { display: none; } }
/* Ниже 1024 дерева на экране нет, и эта кнопка — единственный способ уйти в соседний
раздел, не прокручивая статью обратно вверх. Поэтому строка с кнопкой и крошками
липнет под шапку сайта. Крошки при этом держатся в одну строку: на глубоких адресах
(«Документация › Настройка ресурсов › Веб-приложения и 1С») они переносились, и полоса
становилась двухэтажной — на телефоне это заметная часть экрана. Лишнее прячется
многоточием, для этого крошкам нужен min-width: 0 (иначе flex не даёт им сжиматься).
Поля из margin переведены в padding: белая подложка должна перекрывать текст во всю
ширину, иначе он просвечивал бы в боковых промежутках.
z-index 4: выше текста и поиска (3), ниже шапки (20) и выезжающей панели. */
@media screen and (max-width: 1023px) {
.doc-topbar {
position: sticky; top: var(--s2-header-h); z-index: 4;
margin-inline: 0; padding: 10px var(--s2-side); background: #fff;
border-bottom: 1px solid transparent;
}
/* Граница появляется вместе с границей шапки, тем же признаком прокрутки:
в самом верху страницы лишних линий на экране нет. */
.header.is-scrolled ~ .md-container .doc-topbar { border-bottom-color: var(--s2-border); }
.doc-topbar .md-path__list { flex-wrap: nowrap; min-width: 0; }
/* У темы .md-path { overflow: auto }. Пока крошки переносились, это ничего не значило;
в одну строку — под ними появлялась полоса прокрутки. Прячем. */
.doc-topbar .md-path { overflow: hidden; }
.doc-topbar .md-path__item, .doc-topbar .md-path__link { min-width: 0; }
/* Многоточие работает только на блочном элементе: у темы это обычный inline-span,
и сжатая крошка не обрезалась, а вылезала на соседнюю. Внутри inline-flex крошки
span становится флекс-элементом, поэтому display: block здесь достаточно. */
.doc-topbar .md-path__item .md-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Переход по якорю должен останавливаться под обеими липкими полосами */
html { scroll-padding-top: calc(var(--s2-header-h) + var(--s2-topbar-h) + 16px); }
}
/* На телефоне путь целиком не помещается: «Документация › Настройка ресурсов ›
Веб-приложения и 1С» — это около 420 px против 300 доступных рядом с кнопкой.
Сжимать его в многоточия бессмысленно (от «Настройка ресурсов» осталось бы
«Настр…»), поэтому оставляем последнюю крошку — она и отвечает на вопрос «где я».
Путь целиком остаётся на планшете, где он помещается свободно. */
@media screen and (max-width: 767px) {
.doc-topbar .md-path__item:not(:last-child) { display: none; }
.doc-topbar .md-path__item:last-child::before { display: none; } /* шеврон слева от первой видимой крошки */
}
.md-path { margin: 0; padding: 0; font-size: 14px; min-width: 0; }
.md-path__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.md-path__item { display: flex; align-items: center; gap: 6px; color: var(--s2-text-2); }
/* Разделитель — штатный шеврон темы (mask-image), ему задаём только размер и цвет.
Свой символ «›» здесь не годится: в Golos Text этого глифа нет. */
.md-path__item + .md-path__item::before { background-color: var(--s2-text-3); width: 14px; height: 14px; }
.md-path__item a { color: var(--s2-text-2); }
.md-path__item a:hover { color: var(--s2-accent); }
/* ==========================================================================
Строка под заголовком
========================================================================== */
.md-typeset .doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 24px; font-size: 14px; color: var(--s2-text-2); }
/* Первый заголовок раздела идёт сразу за этой строкой — обычные 2em перед ним здесь лишние */
.md-typeset .doc-meta + h2, .md-typeset .doc-meta + h3 { margin-top: 24px; }
.md-typeset .doc-meta__item { display: inline-flex; align-items: center; gap: 6px; color: var(--s2-text-2); }
.md-typeset .doc-meta__item + .doc-meta__item::before { content: ""; width: 1px; height: 16px; background: var(--s2-border); margin-right: 6px; }
.md-typeset .doc-meta__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.md-typeset .doc-meta a.doc-meta__item:hover, .md-typeset .doc-meta__btn:hover { color: var(--s2-accent); }
.md-typeset .doc-meta svg { flex: 0 0 auto; }
.md-typeset .doc-meta__check { display: none; }
.md-typeset .doc-meta__btn.is-copied .doc-meta__check { color: var(--s2-green); } /* зелёная только галочка, подпись не меняется */
.md-typeset .doc-meta__btn.is-copied .doc-meta__copy { display: none; }
.md-typeset .doc-meta__btn.is-copied .doc-meta__check { display: block; }
/* ==========================================================================
Дерево разделов слева
========================================================================== */
.md-nav { font-size: 15px; line-height: 1.35; }
.md-nav--secondary, .md-nav--secondary .md-nav { font-size: 14px; } /* вложенный уровень тема оставляет 15 px */
.md-nav__title { font-weight: 600; color: var(--s2-text); }
.md-nav__link { color: var(--s2-text); }
.md-nav__link:hover, .md-nav__link:focus { color: var(--s2-accent); }
.md-nav__icon { color: var(--s2-text-2); }
.md-nav__icon:hover { background: none; }
/* Как в референсе: шеврон слева от названия, у страниц без вложений — пустая колонка
той же ширины, вложенные страницы отбиты линией, текущая страница в серой плашке.
Одинаково для колонки слева и для выезжающей панели. */
@media screen and (min-width: 1024px) { .md-sidebar--primary .md-nav__title[for=__drawer] { display: none; } }
html .md-nav--primary .md-nav__list { padding-left: 0; padding-bottom: 0; }
html .md-nav--primary .md-nav__item > .md-nav__link { margin-right: 0; }
.md-sidebar--primary .md-nav--primary { padding-right: 16px; }
.md-nav--primary .md-nav__link { margin-top: 0.7em; gap: 6px; align-items: flex-start; }
.md-nav--primary .md-nav__container > .md-nav__link { margin-top: 0; }
/* Строки с вложениями: шеврон первым */
.md-nav--primary .md-nav__item--nested > .md-nav__container,
.md-nav--primary .md-nav__item--nested > label.md-nav__link { flex-direction: row-reverse; justify-content: flex-end; }
.md-nav--primary .md-nav__link .md-nav__icon { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; border-radius: 0; color: var(--s2-text-2); }
.md-nav--primary .md-nav__link .md-icon:last-child { margin-left: 0; }
.md-nav--primary .md-nav__link .md-nav__icon::after { width: 100%; height: 100%; }
/* Страницы без вложений: место под шеврон, чтобы текст стоял в одну колонку */
.md-nav--primary .md-nav__item:not(.md-nav__item--nested) > .md-nav__link { padding-left: 26px; }
/* Верхний уровень: разделы полужирным */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link { font-weight: 600; }
/* Вложенные страницы: линия слева по колонке шеврона */
.md-nav--primary .md-nav__item--nested > .md-nav > .md-nav__list { border-left: 1px solid var(--s2-border); margin-left: 9px; padding-left: 12px; margin-top: 2px; }
.md-nav--primary .md-nav__item--nested .md-nav__item { padding-right: 0; }
/* Текущая страница: серая плашка вокруг текста, цвет текста обычный */
.md-nav--primary .md-nav__link--active, .md-nav--primary .md-nav__link--active:hover { color: var(--s2-text); font-weight: 400; }
.md-nav--primary a.md-nav__link--active .md-ellipsis { background: var(--s2-surface); border-radius: 6px; padding: 3px 8px; margin: -3px -8px; }
.md-nav--primary a.md-nav__link--active:hover .md-ellipsis { color: var(--s2-accent); }
/* Ниже 1024 колонка контента перестраивается по референсу: сначала крошки с кнопкой
дерева, под ними поиск, и только потом заголовок. Поиск ниже — компактнее (40 px),
кнопки «Копировать/Открыть как Markdown» убраны: на узком экране каждая занимала
отдельную строку и отодвигала текст. Дата обновления остаётся. */
@media screen and (max-width: 1023px) {
.md-content { display: flex; flex-direction: column; }
.doc-topbar { order: 1; margin-bottom: 12px; }
.doc-search { order: 2; }
.md-content__inner { order: 3; }
.doc-search .md-search__form { height: 40px; }
.doc-search .md-search__icon[for=__search], .doc-search .md-search__options { top: 9px; }
.md-typeset .doc-meta__btn, .md-typeset .doc-meta a.doc-meta__item { display: none; }
}
/* Ниже 1024 дерево живёт в выезжающей панели: по референсу — белая шапка с названием,
без логотипа и без синей плашки темы; сама панель шире, чем у Material по умолчанию. */
@media screen and (max-width: 1023px) {
[dir=ltr] .md-sidebar--primary { left: -280px; }
/* панель начинается под липкой шапкой сайта — иначе её собственная шапка с названием
и крестиком уходила бы под шапку страницы */
.md-sidebar--primary { width: 280px; top: var(--s2-header-h); height: calc(100% - var(--s2-header-h)); }
[data-md-toggle=drawer]:checked ~ .md-container .md-sidebar--primary { transform: translateX(280px); box-shadow: 0 0 0 1px var(--s2-border); }
.md-nav--primary > .md-nav__title[for=__drawer] {
display: flex; align-items: center; height: 56px; padding: 0 16px; line-height: 1;
background: #fff; color: var(--s2-text); font-size: 15px; font-weight: 600; white-space: nowrap;
border-bottom: 1px solid var(--s2-border); box-shadow: none;
}
.md-nav--primary > .md-nav__title .md-logo { display: none; }
.md-nav--primary > .md-nav__title .md-nav__icon { position: static; width: 20px; height: 20px; margin: 0 0 0 auto; color: var(--s2-text-2); }
/* Крестик справа в шапке панели. Сама шапка — это label for="__drawer", клик по ней
закрывает панель; крестик нужен как видимый знак, чтобы закрывать не только тапом
по затемнённой части страницы. Значок — маска, поэтому красится обычным color. */
.md-nav--primary > .md-nav__title[for=__drawer]::after {
content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-left: auto;
background-color: var(--s2-text-2);
-webkit-mask: var(--s2-icon-close) center / 20px 20px no-repeat;
mask: var(--s2-icon-close) center / 20px 20px no-repeat;
}
.md-nav--primary > .md-nav__title[for=__drawer]:hover::after { background-color: var(--s2-accent); }
.md-sidebar--primary .md-nav--primary { padding: 12px 16px; }
/* Дерево длиннее экрана должно прокручиваться внутри панели. Панель — флекс-колонка
фиксированной высоты, а список у темы стоит flex: 0 0 auto: он вырастал по
содержимому и уходил за низ панели, где его обрезала .md-sidebar__scrollwrap
(overflow: hidden) — до нижних разделов было не добраться. Заодно флекс сжимал
единственный сжимаемый элемент, шапку панели: «Документация» с крестиком
схлопывалась в 1 px и исчезала с экрана.
min-height: 0 обязателен — без него флекс-элемент не может стать ниже содержимого,
и overflow-y: auto (он у темы уже есть) не включится.
overscroll-behavior: contain — чтобы прокрутка до конца списка не продолжалась
страницей под панелью. */
.md-sidebar--primary .md-nav--primary > .md-nav__title[for=__drawer] { flex: 0 0 auto; }
.md-sidebar--primary .md-nav--primary > .md-nav__list { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
}
/* Оглавление справа. Ритм как в референсе: строка 14/16,8 и 7 px между пунктами —
шаг 24 px на каждом уровне, включая переход от вложенных пунктов к следующему разделу. */
.md-nav--secondary, .md-nav--secondary .md-nav { line-height: 1.2; }
.md-nav--secondary .md-nav__title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--s2-text); font-weight: 600; box-shadow: none; margin-bottom: 16px; } /* поле первого пункта (7 px) схлопывается с этим, остаётся 16 px */
.md-nav--secondary .md-nav__link { color: var(--s2-text-2); margin-top: 7px; }
.md-nav--secondary .md-nav__link:hover { color: var(--s2-accent); }
/* Вложенные заголовки: отступ 16 px, без своих полей у списка */
.md-nav--secondary .md-nav .md-nav__list { padding-left: 16px; padding-bottom: 0; }
.md-nav--secondary .md-nav { margin: 0; }
.md-sidebar--secondary .md-nav__link--active { color: var(--s2-accent); }
/* «К началу» под оглавлением, как в референсе: не кнопка, а ссылка в той же колонке */
.s2-totop { display: none; } /* оглавление рендерится дважды: копию в мобильном меню не показываем */
.md-sidebar--secondary .s2-totop { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; padding: 0 0.6rem; font-size: 14px; color: var(--s2-text); text-decoration: none;
opacity: 0; visibility: hidden; transition: opacity 150ms; } /* в самом верху страницы ссылка не нужна */
.md-sidebar--secondary .s2-totop--on { opacity: 1; visibility: visible; }
.s2-totop:hover { color: var(--s2-accent); }
.s2-totop svg { flex: 0 0 16px; }
/* ==========================================================================
Текст
========================================================================== */
.md-typeset { font-size: 16px; line-height: 1.6; color: var(--s2-text); }
.md-typeset h1 { font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--s2-text); margin: 0 0 20px; }
.md-typeset h2 { font-size: 26px; font-weight: 500; line-height: 1.25; color: var(--s2-text); margin: 2em 0 0.7em; }
.md-typeset h3 { font-size: 20px; font-weight: 600; color: var(--s2-text); margin: 1.6em 0 0.5em; }
.md-typeset h4 { font-size: 17px; font-weight: 600; margin: 1.4em 0 0.4em; }
/* Полужирный в тексте — 600, как на главной (.compare__cell--strong). У темы 700:
в Golos это тяжелее заголовков страницы и раздела (500) и выглядит грязно.
500 пробовали — выделение почти не читается, вернулись к 600. */
.md-typeset strong, .md-typeset b { font-weight: 600; }
.md-typeset a { color: var(--s2-accent); }
.md-typeset a:hover { color: var(--s2-accent-hover); }
.md-typeset ul li, .md-typeset ol li { margin-bottom: 0.35em; }
.md-typeset hr { border-bottom: 1px solid var(--s2-border); }
@media screen and (max-width: 767px) { .md-typeset h1 { font-size: 34px; } .md-typeset h2 { font-size: 24px; } }
@media screen and (max-width: 479px) { .md-typeset h1 { font-size: 30px; } .md-typeset h2 { font-size: 22px; } }
/* Список страниц на обзорных страницах: иконка, ссылка, описание */
.md-typeset .doc-list > ul { list-style: none; margin: 0 0 8px; padding: 0; }
.md-typeset .doc-list > ul > li { position: relative; margin: 0 0 20px; padding-left: 38px; }
.md-typeset .doc-list > ul > li::before {
content: ""; position: absolute; left: 2px; top: 5px; width: 18px; height: 20px; background-color: var(--s2-accent);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.md-typeset .doc-list > ul > li > p { margin: 0; }
.md-typeset .doc-list > ul > li > p:first-child { font-size: 17px; font-weight: 500; line-height: 1.5; }
.md-typeset .doc-list > ul > li > p:first-child a { text-decoration: underline; text-decoration-color: #B9CBEA; text-underline-offset: 3px; }
.md-typeset .doc-list > ul > li > p:first-child a:hover { text-decoration-color: var(--s2-accent); }
.md-typeset .doc-list > ul > li > p + p { font-size: 16px; color: var(--s2-text); margin-top: 2px; }
.md-typeset .doc-list--soon > ul > li::before { background-color: var(--s2-text-3); }
.md-typeset .doc-list--soon > ul > li > p:first-child { color: var(--s2-text-2); }
/* Код */
.md-typeset code { font-size: 0.875em; border-radius: 4px; padding: 0.1em 0.35em; background: var(--s2-surface); }
.md-typeset pre > code { font-size: 14px; line-height: 1.55; padding: 16px 20px; border-radius: 8px; }
.md-typeset pre { border: 1px solid var(--s2-border); border-radius: 8px; background: var(--s2-surface); }
.md-typeset .highlight { background: transparent; }
/* Кнопка копирования кода. В 9.7 тема зовёт её .md-code__button (в версиях до этого —
.md-clipboard), иконка — маска из переменной --md-code-copy-icon. */
.md-code__button, .md-clipboard { color: var(--s2-text-2); }
.md-code__button:hover, .md-code__button.focus-visible, .md-clipboard:hover { color: var(--s2-accent); }
/* Подтверждение копирования — сама кнопка на две секунды становится зелёной галочкой.
Всплывающая плашка темы («Скопировано в буфер») не нужна: она в правом нижнем углу,
далеко от кнопки, и все её размеры заданы в rem от корня 125 %, которого у нас нет. */
.md-dialog { display: none; }
/* !important — потому что у темы свой класс нажатия с !important, иначе он перебил бы зелёный */
.md-code__button.is-copied, .md-clipboard.is-copied { color: var(--s2-green) !important; --md-code-copy-icon: url('data:image/svg+xml;charset=utf-8,'); --md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,'); }
/* Таблицы */
.md-typeset table:not([class]) { font-size: 15px; border: 1px solid var(--s2-border); border-radius: 8px; box-shadow: none; }
.md-typeset table:not([class]) th { background: var(--s2-surface); color: var(--s2-text); font-weight: 600; }
.md-typeset table:not([class]) td { border-top: 1px solid var(--s2-border); }
/* Списки внутри ячеек таблицы: перечисление требований читается легче строк с переносами */
.md-typeset table:not([class]) td > ul { margin: 0; padding-left: 1.1em; }
.md-typeset table:not([class]) td > ul > li { margin: 0 0 6px; padding-left: 0; }
.md-typeset table:not([class]) td > ul > li:last-child { margin-bottom: 0; }
/* Вкладки в тексте */
.md-typeset .tabbed-labels > label { font-size: 14px; font-weight: 500; }
.md-typeset .tabbed-set > input:checked + label { color: var(--s2-accent); }
/* Заметки: только левая полоса, без заливки и теней */
.md-typeset .admonition, .md-typeset details {
border: 0; border-left: 3px solid var(--s2-accent); border-radius: 0;
background: transparent; box-shadow: none; padding: 2px 0 2px 20px; margin: 1.5em 0; font-size: 15px;
}
.md-typeset .admonition > .admonition-title, .md-typeset details > summary {
background: transparent !important; padding: 0 0 4px 0; margin: 0; font-weight: 600; color: var(--s2-text);
}
.md-typeset .admonition-title::before, .md-typeset summary::before { display: none; }
.md-typeset .admonition > :last-child { margin-bottom: 0; }
.md-typeset .admonition.tip, .md-typeset .admonition.success { border-left-color: var(--s2-green); }
.md-typeset .admonition.warning, .md-typeset .admonition.caution { border-left-color: var(--s2-amber); }
.md-typeset .admonition.danger, .md-typeset .admonition.failure { border-left-color: var(--s2-red); }
.md-typeset .admonition.note, .md-typeset .admonition.info { border-left-color: var(--s2-accent); }
/* Скриншоты и схемы в тексте: рамка вместо тени, скругление как у окон-макетов */
.md-typeset img { display: block; max-width: 100%; height: auto; border: 1px solid var(--s2-border); border-radius: 12px; margin: 1.2em 0; }
.md-typeset .doc-list img, .md-typeset .md-button img { border: 0; border-radius: 0; }
/* Просмотр скриншотов по клику (разметку создаёт docs.js) */
.md-typeset img { cursor: zoom-in; }
.s2-lightbox {
position: fixed; inset: 0; z-index: 60;
display: flex; align-items: center; justify-content: center;
padding: 48px; background: rgba(16, 24, 40, 0.82);
overflow: auto; overscroll-behavior: contain;
}
.s2-lightbox img {
display: block; margin: auto; max-width: 100%; max-height: 100%;
border: 0; border-radius: 12px; background: #fff; cursor: zoom-out;
}
.s2-lightbox--zoomable img { cursor: zoom-in; }
/* Натуральная величина: картинка больше экрана, прокручиваем её внутри подложки */
.s2-lightbox--full { align-items: flex-start; justify-content: flex-start; }
.s2-lightbox--full img { max-width: none; max-height: none; cursor: zoom-out; }
.s2-lightbox__close {
position: fixed; top: 16px; right: 16px; width: 40px; height: 40px;
border: 0; border-radius: 8px; background: transparent; cursor: pointer; padding: 0;
}
.s2-lightbox__close::after {
content: ""; display: block; width: 100%; height: 100%; background-color: #fff;
-webkit-mask: var(--s2-icon-close) center / 22px 22px no-repeat;
mask: var(--s2-icon-close) center / 22px 22px no-repeat;
}
.s2-lightbox__close:hover { background: rgba(255, 255, 255, 0.12); }
@media screen and (max-width: 767px) {
.s2-lightbox { padding: 16px; }
.s2-lightbox__close { top: 8px; right: 8px; }
}