/* ========================================================================== Документация REST API v2 внутри шаблона сайта — только правки стыковки. Оформление самой документации целиком в /apidocs/assets/docs.css. Тот файл приходит из репозитория (dashamail-service/lk/apidocs) как есть и здесь не правится — иначе следующая синхронизация затрёт правку. Всё, что нужно именно сайту, собрано тут. Порядок подключения: main.css → tailwind.css (в ) → docs.css → этот файл (в начале ). Поэтому здесь можно опираться на то, что мы последние. Чинится ровно три вещи: 1. Шрифты — у документации свой комплект под отдельный хост, на сайте те же файлы уже есть. 2. Сброс из tailwind preflight и main.css — они обнуляют отступы у абзацев и маркеры у списков, а документация рассчитана на обычную типографику. 3. Липкие элементы — у сайта шапка фиксированная, 88px, под ней своя закреплённая полоса навигации, и документация про них не знает. ========================================================================== */ /* ── 1. Шрифты ─────────────────────────────────────────────────────────────── docs.css объявляет @font-face с путями «fonts/Inter/…» рядом с собой: lk.dashamail.ru — отдельный хост, и забрать шрифт с dashamail.ru ему мешает отсутствие Access-Control-Allow-Origin. На сайте origin один, поэтому копию не выкладываем, а те же объявления переводим на файлы сайта. Файлы совпадают побайтово (проверено по md5), так что визуально ничего не меняется — просто страница не тянет второй комплект. Объявления обязаны перекрыть docs.css целиком: если пропустить хотя бы одно начертание, останется ссылка на несуществующий /apidocs/assets/fonts/ и браузер подделает вес. */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter/static/Inter_18pt-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter/static/Inter_18pt-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter/static/Inter_18pt-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter/static/Inter_18pt-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Geologica'; src: url('/assets/fonts/Geologica/static/Geologica-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geologica'; src: url('/assets/fonts/Geologica/static/Geologica-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Geologica'; src: url('/assets/fonts/Geologica/static/Geologica-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* ── 2. Вторая строка меню: навигация по документации ───────────────────── */ .dm-docs { /* Высота фиксированной шапки сайта — из main.css, body { padding-top: 88px }. Держим одним числом: от него зависят все липкие элементы ниже. */ --dm-header-h: 88px; /* Высота полосы с навигацией по документации. Совпадает с height у .dm-docs-bar-inner — при её правке поменять и здесь. */ --dm-bar-h: 52px; /* Сколько всего занято сверху: шапка сайта плюс полоса. От этого отсчитываются боковая панель, панель кода и переходы по якорям. */ --dm-chrome-h: calc(var(--dm-header-h) + var(--dm-bar-h)); background: var(--bg); } .dm-docs-bar { position: sticky; top: var(--dm-header-h); /* Ниже шапки сайта (у неё 1000), но выше содержимого: полоса идёт в разметке раньше .shell, и без явного z-index липкая панель кода и боковая навигация проезжали бы поверх неё. */ z-index: 900; background: var(--bg); border-bottom: 1px solid var(--line); } /* Заглушка над полосой. body { padding-top: 88px } в main.css резервирует под шапку больше, чем та занимает на самом деле (её низ — на 81px). Полоса липнет к 88px, и в оставшиеся семь пикселей видно проезжающий под ней текст. Подгонять --dm-header-h под фактическую высоту нельзя: она зависит от отрисовки шрифта и на мобильной раскладке другая. Поэтому просто продлеваем фон полосы вверх — с запасом, лишнее уезжает за шапку, у которой z-index больше. Absolute считается от самой полосы, так что на поток и на высоту .dm-docs-bar это не влияет. */ .dm-docs-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; background: var(--bg); } .dm-docs-bar-inner { display: flex; align-items: center; gap: 24px; height: 52px; max-width: var(--content-max); margin: 0 auto; padding: 0 24px; } .dm-docs-bar-title { font-family: var(--font-display); font-size: 15px; color: var(--ink-muted); white-space: nowrap; } .dm-docs-bar-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 14px; overflow-x: auto; scrollbar-width: none; } .dm-docs-bar-nav::-webkit-scrollbar { display: none; } .dm-docs-bar-nav a { padding: 3px 0; border-bottom: 2px solid transparent; color: var(--ink-soft); font-weight: 500; white-space: nowrap; } .dm-docs-bar-nav a:hover { color: var(--brand); text-decoration: none; } .dm-docs-bar-nav a.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); } /* ── 3. Возврат типографики ────────────────────────────────────────────────── main.css задаёт `* { margin: 0; padding: 0 }`, а tailwind preflight сверху снимает маркеры у списков. Документация рассчитана на браузерные значения по умолчанию, поэтому нужное возвращаем руками — точечно, только внутри .main, чтобы не задеть шапку и подвал сайта. */ .main p { margin: 0 0 14px; } .main ul, .main ol { margin: 0 0 18px; padding-left: 22px; } .main ul { list-style: disc; } .main ol { list-style: decimal; } .main li { display: list-item; } /* Оглавление раздела маркеры не носит — восстанавливаем его собственный вид, который правило выше перебило по специфичности. */ .main ul.section-toc { padding-left: 0; list-style: none; } /* Подзаголовок страницы: у docs.css свой отступ, .main p его перебил. */ .main .page-lede { margin: 0 0 8px; } /* Заголовки. В main.css у h1/h2/h3 стоит !important — по-другому не перебить. Значения те же, что в docs.css, продублированы намеренно: это цена чужого !important, а не самостоятельное оформление. */ .main h1 { font-size: 40px !important; font-weight: 600 !important; } .main h2 { font-size: 26px !important; font-weight: 500 !important; } .main h3 { font-size: 20px !important; font-weight: 500 !important; } .main .endpoint-title { font-size: 22px !important; font-weight: 500 !important; } /* main.css гасит цвет ссылки на наведении (`a:hover { color: inherit }`) — в документации ссылок много, и все они становились бы чёрными. */ .dm-docs a:hover { color: var(--brand); } .dm-docs .sidebar li.active > a:hover { color: var(--brand-dark); } /* ── 4. Липкие элементы ────────────────────────────────────────────────────── position: sticky перестаёт работать, если между элементом и окном есть предок со скрытым переполнением: элемент начинает липнуть к нему, а тот никуда не прокручивается. В main.css скрытие стоит и на html, и на body — глобально, чтобы широкие блоки лендингов не давали горизонтальную полосу. Виновник именно body: значение overflow у корневого элемента переносится на область просмотра, и сам html скролл-контейнером не становится. Поэтому снимаем скрытие только с body и только на этой странице — html оставляем как есть, и он по-прежнему обрезает всё, что вылезет вбок. Проверено: без этого правила боковая панель уезжала вместе со страницей, с ним встаёт под шапку и остаётся на месте, а scrollWidth документа равен ширине окна — лишней прокрутки не появляется. */ body.dm-docs-page { overflow-x: visible; } .dm-docs .sidebar { top: calc(var(--dm-chrome-h) + 12px); height: calc(100vh - var(--dm-chrome-h) - 12px); } /* Переход по якорю ставит цель ровно к верхнему краю окна — а там стоит фиксированная шапка сайта, и заголовок раздела оказывается под ней. Браузер умеет учитывать отступ сам, если его объявить. Правило нарочно широкое — «всё, у чего есть id»: якорями в документации служат и заголовки h2/h3, и целые блоки методов (section.endpoint), и перечисление их по одному разошлось бы с разметкой при первой правке. Лишние 24px сверх высоты шапки — воздух, чтобы заголовок не лип к её краю. */ .main [id] { scroll-margin-top: calc(var(--dm-chrome-h) + 24px); } /* Панель кода сама по себе не липнет нигде. В apidocs.css у неё стоит position: sticky, и это ломается двумя разными способами. Первый: на прозаических страницах (/smtp/, /transactional/) панель стоит прямо в потоке текста и занимает всю ширину — липкость утащила бы её за читателем через всю страницу, накрыв собой следующие разделы. В apidocs.css такого случая нет: там страниц с примерами вне блоков методов не бывает. Второй: внутри блока метода карточка запроса и карточка ответа — соседи в одной колонке. Закреплённая карточка запроса выходит из потока и при прокрутке длинного описания наезжает прямо на карточку ответа, которая осталась на месте. Видно как две панели кода друг поверх друга. Поэтому липнет не карточка, а вся правая колонка целиком — наезжать становится не на что. */ .main .code-card { position: static; } .main .endpoint .endpoint-code { /* Без align-self колонка растянута грид-строкой на всю высоту блока, и липнуть ей некуда: элемент и так занимает всё доступное место. */ align-self: start; position: sticky; top: calc(var(--dm-chrome-h) + 16px); /* Если запрос и ответ вместе выше экрана, прокручиваем их внутри колонки, а не обрезаем. В обычном случае полоса не появляется. */ max-height: calc(100vh - var(--dm-chrome-h) - 32px); overflow-y: auto; } /* В apidocs.css у листинга max-height: 60vh — это рассчитано на одну карточку в кадре. У нас в колонке их две, запрос и ответ, и при 60vh каждая пара гарантированно не помещалась на экран: появлялась вторая полоса прокрутки, уже у самой колонки. Тридцати с небольшим процентов высоты хватает строк на пятнадцать — довольно, чтобы понять пример, а длинный листинг по-прежнему прокручивается внутри своей карточки. */ .main .endpoint .code-body { max-height: 34vh; } /* Ниже 1180px блок метода становится одноколоночным (правило в apidocs.css), и закреплять колонку уже незачем — она идёт под описанием. */ @media (max-width: 1180px) { .main .endpoint .endpoint-code { position: static; max-height: none; overflow: visible; } } /* ── 5. Адаптив ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .dm-docs-bar-title { display: none; } /* Полоса ссылок прокручивается вбок и ужимается, а кнопка «Разделы» остаётся справа целиком — без min-width: 0 flex не даёт полосе сжаться и кнопка уезжает за край. */ .dm-docs-bar-nav { flex: 1 1 auto; min-width: 0; margin-left: 0; padding-right: 8px; } .dm-docs .nav-toggle { flex: 0 0 auto; margin-left: 0; } /* Выдвижная панель разделов встаёт под шапку сайта, а не под шапку документации, которой здесь нет. */ .dm-docs .sidebar { top: var(--dm-chrome-h); height: auto; } .main h1 { font-size: 30px !important; } } @media (max-width: 684px) { .dm-docs-bar-inner { padding: 0 16px; } .main h2 { font-size: 22px !important; } .main h3, .main .endpoint-title { font-size: 18px !important; } }