/* Домашний экран страницы поиска — минималистичный скин. * * URL: /nodejs/res/css/home.css (маунт search/ уже есть в dg-light.js, правок сервера не нужно). * * ВСЁ здесь живёт под классом-скином body.dg-skin-minimal и/или под состоянием * body.dg-state-home. Это сознательно: минималистичный стиль сейчас применяется ТОЛЬКО к * домашнему экрану, а выдача и ридер остаются в нынешнем оформлении — общий стиль вырабатывается * отдельно, по мере объединения поиска и ридера. Позже скин станет пунктом в /settings/, и тогда * его хватит расширить на остальные состояния, не переписывая эти правила. * * Никаких внешних шрифтов (в демке был Google Fonts — на проде внешний CDN не подключаем) и * никакой своей палитры: цвета те же, что уже у поиска и ридера, см. блок ниже. * * Тёмная тема здесь — body.dark, а НЕ html.dark как в демке: класс ставит themeswitch.js на * (assets/js/themeswitch.js, bodyTag.classList.add("dark")). */ /* Палитра — НЕ своя. Это те же значения, которыми уже живут поиск и ридер: цвета ридера объявлены в reader/css/rus-multi.css (--off-white rgb(221,221,221), --light-off-white rgb(253,253,253), --off-black rgb(4,1,19), --dark-gray #5a5a5a, --light-gray #8f8f8f, --blue #3434be, в тёмной теме ссылки rgb(122,122,249)), а поверхности и границы — Bootstrap, как у кнопок .btn-light в ряду инструментов выдачи. Значения повторены буквально, а не через var(): rus-multi.css подключается лениво, только вместе с ридером, и до первого открытия текста её переменных на странице просто нет. Тот же приём уже применён к #language-button в этой страницы. ОБНОВЛЕНО: светлая палитра переехала на землистые нейтрали и зелёный акцент (макет production-v4). Тёмная осталась на боевом --off-black, см. комментарий у body.dark ниже. */ /* Owner: "ширина страницы... получается неудобно, что под пальцем страница ездит" — decorative absolutely-positioned elements (e.g. reader/css/uiextra.css's .copyLink-start markers, which sit at left:-1em relative to a segment that can itself start near the viewport's left edge) push a few px past the viewport edge. They don't add real scrollable content, just enough negative overflow for mobile Safari/Chrome to treat the page as horizontally pannable — this guard clips exactly that kind of stray edge overflow without touching any element's OWN overflow-x:auto (home.css's own #dg-hero-band horizontal scrollers etc. are unaffected, they scroll inside their own box regardless of what the page root clips). Unscoped (not under body.dg-skin-minimal) — this single shell page (search/index.html) serves home/results/reader alike, and the bug isn't specific to the minimal skin. clip, not hidden: `overflow-x: hidden` on html/body makes the body a scroll container, which silently kills `position: sticky` for every descendant (Chrome: the sticky element has no scrollport left to stick within). That is what kept .toc-aside (Translator filter) from parking under the pinned header — it just scrolled away with the list and slid under the band. `clip` clips the same stray overflow without creating a scroll container, so sticky works (verified in the browser: aside top goes 81 -> 77 = stack height + gap on scroll). `hidden` stays first as the fallback for engines without `clip` (pre-16 Safari), which keep today's behaviour. */ html, body { overflow-x: hidden; overflow-x: clip; } /* Owner: "сдвигаются на мм инпуты между ридером и результатами" — without this, the vertical scrollbar only appears once a page's content actually overflows, and since the centered .dg-hero-form's width is the same 520px in results/reader/toc/404 (see body.dg-skin-minimal rules below), a short results page (no scrollbar) vs a long reader page (scrollbar) differ by the scrollbar's width, shifting the centered field left/right by half of it. Reserving the gutter unconditionally keeps the field pixel-identical across states regardless of content height. Not scoped to dg-skin-minimal, same reasoning as overflow-x above. */ html { scrollbar-gutter: stable; } /* Owner: "текст на мобильном слишком мелкий... во всех частях... в 1.2 раза крупнее" (было 1.5 — owner: "слишком крупно"). Unscoped (not under body.dg-skin-minimal) on purpose, same reasoning as the overflow-x rule above: this one shell page serves home/results/reader/toc alike, and the complaint wasn't specific to the minimal skin. One rem-scale line covers ALL of it because the whole codebase (this file, Bootstrap utilities, --dg-* components) sizes type in rem, not px — rem always resolves against THIS root value, so nothing per-component needs touching. The chrome-specific opt-outs from this bump (icon buttons, toolbar/tab links — owner: "текст... не должно влиять на расстояние между иконками и текстовыми ссылками") live at the very END of this file, not here: they target selectors (.dg-tile, #reader-toolbar, …) that this file ALSO sets font-size on later at their normal spot, same specificity — same-specificity CSS is decided by source order, so the override has to come after, not before (this exact trap bit an earlier round of this file too, see the #dg-mega comment further down). */ @media (max-width: 767.98px) { :root { --dg-mobile-scale: 1; } html { font-size: calc(100% * var(--dg-mobile-scale)); } } /* Lato — the reference's typeface, self-hosted (public/overrides/fonts/), not a CDN link — the "no external fonts" rule above still holds. Lato 2.015 (Debian fonts-lato, OFL): unlike the Google-hosted v1 it has Cyrillic and the Pāḷi diacritics (ā ī ū ṁ ṅ ñ ṭ ḍ ṇ ḷ), so headings, Russian UI and quotes all set in one face; a real Semibold for the 600 headings/labels. */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-400.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-400-italic.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/lato-600.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-700.woff2") format("woff2"); } /* Pali in scripts most devices ship no font for (?script=, public/overrides/js/pali-script.js): Noto Sans Brahmi / Chakma / Tai Tham / Myanmar (Mon letters) / Lao (Pali letters), OFL. Each face is limited to its own Unicode block, so Latin and Cyrillic keep their current fonts and a file is downloaded only when a page actually shows letters from that block. Used as a fallback family after sans-serif: table.css (* rule) and --bs-font-sans-serif (extrastyles.css/styles.css, which every Lato stack ends in). font-weight 100-900 so bold headings use the same file. Not added as extra "Lato" faces: faces with different weight descriptors are not merged into one family, so the Noto faces were skipped for Lato text. */ @font-face { font-family: "DG Pali"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/noto-brahmi.woff2") format("woff2"); unicode-range: U+11000-1107F; } @font-face { font-family: "DG Pali"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/noto-chakma.woff2") format("woff2"); unicode-range: U+11100-1114F; } @font-face { font-family: "DG Pali"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/noto-taitham.woff2") format("woff2"); unicode-range: U+1A20-1AAF; } @font-face { font-family: "DG Pali"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/noto-myanmar.woff2") format("woff2"); unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F; } @font-face { font-family: "DG Pali"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/noto-lao.woff2") format("woff2"); unicode-range: U+0E80-0EFF; } body.dg-skin-minimal { /* Фон страницы. Отдельным токеном, а не через --bs-body-bg: тот у Bootstrap белый ВСЕГДА — тёмную тему на этом сайте делает body.dark из langswitch.css, до бутстраповских переменных она не дотягивается. Пока правило ниже брало --bs-body-bg, тёмная главная выбеливалась. */ --dg-page: #ffffff; --dg-surface: #ffffff; --dg-surface-hover: #f5f4f1; --dg-surface-active: #eae8e2; --dg-border: #e7e5de; --dg-border-strong: #d7d4c9; --dg-text: #1b1d19; --dg-text-2: #5c6058; /* apple-design audit: was #93968c on white ≈ 3:1, fails WCAG AA (4.5:1) for text. Darkened to ~5:1 while keeping the same olive-gray hue. */ --dg-text-muted: #6e716a; --dg-navy: #243448; --dg-navy-2: #1b2836; --dg-accent: #149c7c; /* Акцент для ТЕКСТА. В светлой теме совпадает с основным, в тёмной берёт более светлый тон: прод-зелёный для значков в подписи не читается. */ --dg-accent-ink: #0f7c63; --dg-accent-dark: #0f7c63; --dg-accent-bg: #dff3ec; /* Glyph on the accent-bg disc (tile icons, announcement close) — reference .disc color. */ --dg-icon-ink: #0c6a55; --dg-radius: 10px; --dg-font: "Lato", var(--bs-body-font-family); --dg-ease: cubic-bezier(0.22, 0.68, 0, 1); /* One-time shine sweep on #home-motto (below) — dimmer than pure white here on purpose: --dg-page is solid #fff in this theme, and --dg-text is near-black, so a full-white highlight would wash the swept letters out against the page for an instant (owner: "чуть менее ярким белым, чтобы пятно света не сливало буквы с фоном"). */ --dg-motto-shine: #cfcfcf; /* Боковое поле страницы: столько добавляет .container-fluid вокруг .table-wrapper. Нужно hero-полосе, чтобы вылезти из этого поля на всю ширину экрана (margin с минусом). На телефоне это поле сжато до 3px — см. медиазапрос в index.html. */ --dg-gutter: 12px; } @media (max-width: 767.98px) { body.dg-skin-minimal { --dg-gutter: 3px; } } /* Тёмная тема отталкивается от БОЕВОГО тёмного фона: страница в тёмной теме — rgb(17,17,17), его задаёт [data-theme="dark"] из assets/css/extrastyles.css (замерено на живой странице; в langswitch.css есть ещё body.dark с --off-black, но выигрывает первое). Поверхности здесь — нейтральные, на пол-тона светлее фона: возьми мы оливковую основу из макета, главная встала бы другим цветом, чем соседние страницы, и переход между ними читался бы как переход на другой сайт. От макета берём только зелёный акцент — в тёмной теме он и правда звонче синего. */ body.dg-skin-minimal.dark { --dg-page: #111111; --dg-surface: #191919; --dg-surface-hover: #202020; --dg-surface-active: #2a2a2a; --dg-border: #2c2c2c; --dg-border-strong: #3b3b3b; --dg-text: rgb(221, 221, 221); /* --dg-text here is already near-white on a near-black page — full white reads as a clean glint with no wash-out risk (owner: "на темной она уже почти белая, так что свет можно сделать чисто белым"). */ --dg-motto-shine: #ffffff; --dg-text-2: #a8a8a8; --dg-text-muted: #7c7c7c; --dg-navy: #1b2836; --dg-navy-2: #131c26; /* Зелёный в тёмной теме — БОЕВОЙ, приглушённый, а не яркий из светлой: #136857 у прода стоит на .bg-primary и .menu-icon, #025242 на .btn-primary, #09967a на ссылках ([data-theme="dark"] в assets/css/extrastyles.css). Яркий #3fe3bc из макета на тёмном фоне бил в глаза и не совпадал ни с одной соседней страницей. Для значков берём ровно прод-цвет, для текста — прод-цвет ссылок: #136857 в подписи на тёмном фоне уже нечитаем (контраст ниже 3:1), а у прода для текста и заведён отдельный, более светлый тон. */ --dg-accent: #136857; --dg-accent-ink: #09967a; --dg-accent-dark: #025242; --dg-accent-bg: #12241f; --dg-icon-ink: #16b394; } /* ============================================================================ Показ/скрытие домашних блоков. Схлопывание через max-height + opacity, а не display:none — display не анимируется, а нам нужно, чтобы при уходе в выдачу шапка и плитки СЖИМАЛИСЬ, поднимая инпут вверх, а не исчезали рывком. max-height заведомо больше реальной высоты; overflow:hidden прячет остаток во время перехода. Шторки живут отдельно, в конце , и под это схлопывание не попадают. ============================================================================ */ #home-hint, #home-pane { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); pointer-events: none; /* No transition anymore: the home screen's enter/exit (dg-drop-in / home-out keyframes further down) already animates the tiles; this collapse ran AFTER home-out and made the tiles vanish last, after everything else (owner). #home-hint keeps its own below. */ margin: 0; } #home-hint { transition: max-height 0.34s var(--dg-ease), opacity 0.22s ease, transform 0.34s var(--dg-ease), margin 0.34s var(--dg-ease); } body.dg-state-home #home-hint, body.dg-state-home #home-pane { opacity: 1; transform: none; pointer-events: auto; } /* Отступ инпута от заголовка — раньше был большим (74px) специально, чтобы под собой зарезервировать место для #dg-announce (плашка лежала АБСОЛЮТНО над полем, см. её комментарий ниже). Теперь плашка в обычном потоке ПОСЛЕ поля (production-v4 redesign, docs/Home-standalone.html: поле → строка области поиска → плашка → плитки), резервировать тут больше нечего — просто небольшой зазор от подзаголовка. */ body.dg-state-home .hero-row { margin-top: 22px; } body.dg-state-home #home-pane { max-height: 2000px; margin: 22px 0 0; } /* #home-hint — position:absolute (см. .hero-row/#home-hint в search/index.html), max-height/ opacity/transform ниже всё ещё нужны для схлопывания при уходе с главной, margin — только небольшой зазор от нижнего края поля, не отступ в потоке (его больше нет в потоке). */ body.dg-state-home #home-hint { max-height: 60px; margin-top: 8px; } /* Ширина поля по состояниям: на главной оно — центр экрана, в выдаче и чтении уступает место содержимому. Переход между значениями анимируется (transition на .dg-hero-form в index.html). width:100% обязателен: форма — flex-элемент в .hero-row, а flex-элемент по умолчанию сжимается до содержимого, и одного max-width мало (замерено: поле выходило 270px вместо 640px). */ /* display:block — ответ на `#form { display:flex; justify-content:center; align-items:baseline }` из /assets/css/langswitch.css (общий файл, его не трогаем): из-за него поле-оболочка была flex-элементом и сжималась до содержимого — 269px вместо 640px, и вдобавок выравнивалась по базовой линии. Здесь форма — простой блок, а вся раскладка внутри у .dg-input-shell. */ body.dg-skin-minimal #form.dg-hero-form { display: block; width: 100%; } body.dg-skin-minimal.dg-state-home .dg-hero-form { max-width: 620px; } body.dg-skin-minimal.dg-state-results .dg-hero-form, body.dg-skin-minimal.dg-state-reader .dg-hero-form, body.dg-skin-minimal.dg-state-toc .dg-hero-form { max-width: 520px; } /* ============================================================================ Фирменная hero-полоса главной. Тёмный сине-зелёный с переходом в зелёный — та же пара, что в шапке боевого сайта. Вывеска, девиз, поле и подсказка сидят НА ней: на главной это один цельный блок, а не четыре строки на белом. В выдаче и в чтении полоса схлопывается — фон снимается, отступы обнуляются, и разметка возвращается к обычной (их оформление делаем отдельно). ============================================================================ */ /* Переходов здесь намеренно НЕТ. Полоса появляется и исчезает вместе со сменой состояния, а состояние обязано примениться сразу: анимируемое свойство во вкладке, которая не рисует кадры (фоновая вкладка, свёрнутое окно), застревает на начальном значении — замерено, полоса оставалась с домашним фоном и отступом уже в выдаче. Плавность ухода даёт схлопывание #home-motto/#home-hint/#home-pane по max-height, этого достаточно. */ /* Полоса тянется во ВСЮ ширину окна, а не до края колонки. Отрицательного margin по полю контейнера не хватало: у .table-wrapper есть свой max-width 1600px, и на мониторе шире полоса обрывалась вертикальной границей — заливка кончалась, а страница шла дальше, и это читалось как недоделанный кусок. 50% — середина колонки, 50vw — половина окна; разница и есть тот вылет, который нужно добрать с каждой стороны. */ #dg-hero-band { /* /var(--dg-zoom): при масштабе интерфейса (issue #13, зум на html) vw остаются в реальных пикселях окна, а всё остальное уже масштабировано — без деления полоса выезжает за край. */ width: calc(100vw / var(--dg-zoom, 1)); margin-left: calc(50% - 50vw / var(--dg-zoom, 1)); margin-right: calc(50% - 50vw / var(--dg-zoom, 1)); padding: 0; background: none; } body.dg-state-home #dg-hero-band { /* Съедаем .mt-2 родителя: полоса должна начинаться от самого верха окна, иначе над ней остаётся белая щель в 8px и она перестаёт читаться как шапка. */ margin-top: -0.5rem; padding-bottom: 24px; /* No background of its own anymore — the dark color lives on #dg-hero-navbar below, sized to just the navbar row, not the whole band (production-v4 redesign, docs/Home-standalone.html: a slim dark bar, headline/search on the plain page below it). */ } /* Full-bleed dark navbar strip, home only — same 100vw/negative-margin trick as #dg-hero-band itself, just for the (much shorter) top row alone. */ #dg-hero-navbar { display: none; } body.dg-state-home #dg-hero-navbar { display: block; width: calc(100vw / var(--dg-zoom, 1)); margin-left: calc(50% - 50vw / var(--dg-zoom, 1)); margin-right: calc(50% - 50vw / var(--dg-zoom, 1)); background: var(--dg-navy); } .dg-hero-inner { max-width: 700px; margin: 0 auto; padding: 0 var(--dg-gutter, 12px); } /* --dg-gutter сжимается до 3px на телефоне ради ПЛОТНОЙ таблицы выдачи (#search-pane, см. index.html) — там это осознанный выбор, каждый пиксель ширины строки на счету. Поле ввода на главной — не таблица, и 3px от края экрана читались как «упирается в край» (жалоба владельца). Отвязываем именно этот контейнер от переменной, не трогая саму переменную (другие потребители 3px могут появиться позже и по-прежнему хотят именно 3px). */ @media (max-width: 767.98px) { .dg-hero-inner { padding: 0 14px; } /* Тот же 3px-сквоз (index.html, ради плотной таблицы выдачи) достаётся и главной — вход и плитки лежат в ТОМ ЖЕ .container-fluid.mt-2, что и таблица. На главной строк с колонками нет, экономить пиксели ширины не для чего — только на этом состоянии возвращаем воздух. Селектор специфичнее, чем правило в index.html (доп. класс dg-state-home), поэтому порядок подключения файлов не важен. */ body.dg-state-home > .container-fluid.mt-2 { padding-left: 14px; padding-right: 14px; } } /* На полосе весь текст светлый — независимо от темы: подложка тёмная в обеих. */ body.dg-state-home #dg-hero-band .dg-brand-name { color: #fff; } body.dg-state-home #dg-hero-band .dg-icon-btn { color: #eaf4ef; } body.dg-state-home #dg-hero-band .dg-icon-btn:hover, body.dg-state-home #dg-hero-band .dg-icon-btn:focus-visible { background: rgba(255, 255, 255, 0.14); color: #fff; } /* Абрис лого нужен только на светлом фоне; на полосе логотип и так контрастен. */ body.dg-state-home #dg-hero-band .dg-brand-logo { filter: none; } /* ============================================================================ Шапка главной: лого с названием слева, бургер в противовес справа. Только на главной. В выдаче и в чтении вывеска убирается совсем — там от знака остаётся ракушка внутри поля, а бургер стоит правее поля (.dg-menu-btn-hero). ============================================================================ */ /* Two children only (brand, menu button) since the headline moved into its own block below (#dg-hero-heading) — plain space-between, no grid/centering math needed for a middle child anymore. */ /* Geometry measured off the reference (docs/Home-standalone.html, header.bar): 60px tall strip, 33px content row vertically centered, 920px inner width. Fixed height rather than padding so the bar reads the same regardless of what the logo/wordmark happen to measure. */ #dg-topbar { display: none; position: relative; z-index: 20; /* the Brahmi tag tooltip must paint over the content below the bar */ align-items: center; justify-content: space-between; gap: 10px; height: 60px; padding: 0; font-family: var(--dg-font); } body.dg-state-home #dg-topbar { display: flex; } body.dg-state-home .dg-hero-inner { max-width: 920px; } /* Compass/theme/burger cluster, right side of the navbar row. Reference: 33px square buttons, 8px radius, 14px glyphs, light steel-blue ink (#cfdae5), 10px apart. */ .dg-topbar-actions { display: flex; align-items: center; gap: 10px; } @media (min-width: 768px) { .dg-topbar-actions { gap: 0; } } body.dg-state-home #dg-topbar .dg-icon-btn { width: 33px; height: 33px; border-radius: 8px; color: #cfdae5; } body.dg-state-home #dg-topbar .dg-menu-btn svg { width: 15px; height: 15px; } /* compass.svg/circle-half-stroke.svg ship with a fixed mid-gray fill (#989898) for use on light backgrounds elsewhere on the site — brighten them for this dark strip the same way dark-theme icon adjustments already do elsewhere in this codebase (invert-based filters, see e.g. .autocomplete-history-icon further down this file), rather than fork separate white asset files just for this one row. opacity(0.85) lands them on the same #cfdae5-ish tone as the inline-SVG burger next to them. */ .dg-topbar-icon-img { width: 14px; height: 14px; display: block; filter: brightness(0) invert(1) opacity(0.85); } /* Бургеров в разметке два — в шапке и рядом с полем: перенести один элемент между строками средствами CSS нельзя, а состояния требуют разных мест. Оба открывают одно и то же меню. */ /* Селектор с body — намеренно: .dg-icon-btn ниже в этом же файле задаёт display:inline-flex той же специфичностью и выигрывал бы по порядку (замерено: бургер оставался виден и на главной). */ body .dg-menu-btn-hero { display: none; } body.dg-state-results .dg-menu-btn-hero, body.dg-state-reader .dg-menu-btn-hero, body.dg-state-toc .dg-menu-btn-hero { display: inline-flex; } #dg-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dg-text); } /* "Pāḷi Canon" next to the wordmark (reference header.bar: 11.5px, muted steel blue). */ @font-face { font-family: "DG Brahmi"; font-display: swap; src: url("/assets/fonts/brahmi-subset.woff2") format("woff2"); unicode-range: U+11000-1107F; } .dg-brand-tag { font-size: 11.5px; font-weight: 400; color: #93a5b8; white-space: nowrap; } /* issue #14: phones — the tag is the first thing to give up so the header icons fit. */ @media (max-width: 575.98px) { .dg-brand-tag { display: none; } } #dg-brand:hover { color: var(--dg-text); } /* Лого в шапке. Картинка почти белая (см. /assets/img/dgsanhkalogo.png: раскрытая книга серая, а лепестки-страницы и раковина — почти #fff), и на светлом фоне верх логотипа пропадал. Кружок-подложка эту беду решал, но выглядел наклейкой; вместо него — тонкий абрис ПО КОНТУРУ самой картинки: четыре drop-shadow по сторонам света дают ровную обводку в 1px (у filter нет своего «обводящего» примитива, это обычный приём для png с прозрачностью). В тёмной теме логотип и так виден на тёмном фоне — обводка там только пачкала бы края. */ .dg-brand-logo { width: 34px; height: 34px; flex: none; object-fit: contain; display: block; filter: drop-shadow(1px 0 0 rgba(4, 1, 19, 0.45)) drop-shadow(-1px 0 0 rgba(4, 1, 19, 0.45)) drop-shadow(0 1px 0 rgba(4, 1, 19, 0.45)) drop-shadow(0 -1px 0 rgba(4, 1, 19, 0.45)); } body.dark .dg-brand-logo { filter: none; } /* Главный логотип на главной странице — на 10% крупнее базового 34px (34*1.1≈37, владелец: "мелко"). #dg-brand — единственный полный лого+название лок-ап, показывается только на главной (в выдаче/чтении остаётся только ракушка внутри поля, другая картинка) — точечный override, не трогает базовый размер, которым пользуются другие места (боковое меню ниже). */ /* History: 34 → 37 → 48 → 72px square, and 100×58 + no wordmark on phones (owner rounds). Superseded by the production-v4 redesign (docs/Home-standalone.html): the slim 60px bar carries a 30px-tall logo at its natural ratio (≈52×30) with the wordmark beside it, on every width — the big-logo/mobile-only-logo rules are gone with the tall band they were sized for. */ #dg-brand .dg-brand-logo { width: auto; height: 30px; } /* Маленькая копия лого в шапке бокового меню — там та же история со светлыми лепестками. */ .dg-drawer-head .dg-brand-logo { width: 26px; height: 26px; } .dg-brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--dg-text); } /* Owner: "Dhamma.Gift с больших букв". text-transform вместо переписывания текста: "." рвёт слово для capitalize так же, как пробел ("dhamma.gift" -> "Dhamma.Gift"), поэтому одно правило вместо второй захардкоженной строки. БЕЗ медиазапроса (было `min-width: 768px`, owner: "на планшетах тоже с большой, а то разнобой"): надпись в принципе показывается только там, где ей место (на главной ниже 768px её прячет правило выше, остаётся одно лого), так что ограничивать ЕЩЁ и регистр было незачем — ровно это и давало строчные буквы у той же надписи в шапке бокового меню, где она видна на любой ширине, включая узкие планшеты и телефоны. */ .dg-brand-name { text-transform: capitalize; } /* Кнопка-иконка шапки (бургер, крестик в меню) — без рамки и заливки. */ .dg-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dg-text-2); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .dg-icon-btn:hover, .dg-icon-btn:focus-visible { background: var(--dg-surface-hover); color: var(--dg-text); } /* Ряд с полем: само поле тянется, бургер стоит рядом и не сжимается. Ширину на главной держит .dg-hero-inner, поэтому своего max-width здесь больше нет. */ body.dg-skin-minimal .hero-row { max-width: 700px; margin-left: auto; margin-right: auto; flex-wrap: nowrap; } body.dg-state-home .hero-row { max-width: none; margin-bottom: 0 !important; } body.dg-skin-minimal #form.dg-hero-form { flex: 1 1 auto; min-width: 0; } /* ============================================================================ Поле ввода: знак сайта + поле + очистить + быстрые настройки + лупа, всё в одной рамке ============================================================================ */ .dg-input-shell { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 10px; background: var(--dg-surface); border: 1px solid var(--dg-border); border-radius: 28px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .dg-input-shell:hover { border-color: var(--dg-border-strong); } .dg-input-shell:focus-within { background: var(--dg-surface); border-color: var(--dg-border-strong); box-shadow: 0 0 0 3px var(--dg-accent-bg); } /* В выдаче/чтении --dg-surface (фон поля) и --dg-border (рамка) почти совпадают с фоном страницы (--dg-page) — поле и кнопки в нём читались как "почти невидимые" что в светлой, что в тёмной теме (владелец, со скриншотом). На главной то же поле — светлая карточка поверх ТЁМНОЙ полосы (правило выше, .dg-state-home), там контраст и так есть, не трогаем. Цвета — не новые: те же, что уже у #paliauto/#language-button/#scrollToTopBtn на проде и в reader-template.html (reader/css/index.css: --off-white/--dark-gray/--dark-blue) — владелец явно попросил взять оттуда. */ /* Заодно — владелец: поле "стало слишком большим" (50px высотой, замерено) рядом с рядом компактных 19px-иконок ниже (#results-toolbar/#reader-toolbar) — непропорционально. Паддинг потоньше, сами кнопки (32-34px) не трогаем — они те же, что и в остальной шапке. */ body.dg-state-results .dg-input-shell, body.dg-state-reader .dg-input-shell, body.dg-state-toc .dg-input-shell { padding: 4px 6px 4px 8px; background: rgb(221, 221, 221); border-color: #5a5a5a; } body.dg-state-results .dg-input-shell .dg-shell-btn, body.dg-state-reader .dg-input-shell .dg-shell-btn, body.dg-state-toc .dg-input-shell .dg-shell-btn, body.dg-state-reader .dg-shell-toc { color: #5a5a5a; } body.dg-state-results #form #paliauto.searchinput, body.dg-state-reader #form #paliauto.searchinput, body.dg-state-toc #form #paliauto.searchinput { color: #2b2b2b; } body.dg-state-results #form #paliauto.searchinput::placeholder, body.dg-state-reader #form #paliauto.searchinput::placeholder, body.dg-state-toc #form #paliauto.searchinput::placeholder { color: #5a5a5a; } body.dark.dg-state-results .dg-input-shell, body.dark.dg-state-reader .dg-input-shell, body.dark.dg-state-toc .dg-input-shell { background: #42426a; border-color: #42426a; } body.dark.dg-state-results .dg-input-shell .dg-shell-btn, body.dark.dg-state-reader .dg-input-shell .dg-shell-btn, body.dark.dg-state-toc .dg-input-shell .dg-shell-btn, body.dark.dg-state-reader .dg-shell-toc { color: rgb(221, 221, 221); } body.dark.dg-state-results #form #paliauto.searchinput, body.dark.dg-state-reader #form #paliauto.searchinput, body.dark.dg-state-toc #form #paliauto.searchinput { color: rgb(221, 221, 221); } /* apple-design audit: .dg-input-shell:focus-within's ring uses --dg-accent-bg (#12241f in dark) — nearly invisible against both the dark page and this pill's own #42426a fill (confirmed live: box-shadow computed but not perceptible). Brighter ring for these dark-theme states specifically. */ body.dark.dg-state-results .dg-input-shell:focus-within, body.dark.dg-state-reader .dg-input-shell:focus-within, body.dark.dg-state-toc .dg-input-shell:focus-within { box-shadow: 0 0 0 3px rgba(122, 122, 249, 0.6); } /* Поле на главной крупнее, чем в выдаче/чтении — оно тут центр экрана, а не строка в ряду. Раньше это была светлая карточка с тенью, лежащая поверх тёмной полосы (тень нужна была, чтобы отделиться от градиента); теперь поле стоит на обычном фоне страницы вместе с заголовком, так что ему хватает того же бордера, что у .dg-input-shell везде — своей тени и прозрачной рамки больше нет (production-v4 redesign, docs/Home-standalone.html). */ body.dg-state-home .dg-input-shell { /* Reference .search-shell: 12px corners (not the 28px pill of results/reader), the stronger border tone, white fill, 10/8/10/15 padding, 10px between children. */ padding: 10px 8px 10px 15px; gap: 10px; border-radius: 12px; border-color: var(--dg-border-strong); background: var(--dg-surface); } /* Magnifying glass inside the field, left edge (reference: 14px, muted) — home only; results/ reader keep the shell logo there instead (.dg-shell-logo above). */ .dg-shell-search-ic { display: none; } body.dg-state-home .dg-shell-search-ic { display: inline-flex; flex: none; color: var(--dg-text-muted); line-height: 0; } /* Quick-settings sliders leave the field on the home screen — the reference moves that action to the "изменить" link under the field (#home-scope-summary). The button stays in the DOM (hidden): "изменить" clicks it, and openQuick() (home.js) anchors the sheet to the link when the button itself has no box. Results/reader keep the sliders in the field as before. */ body.dg-state-home #dg-quick-btn { display: none; } /* Порядок справа: сперва быстрые настройки, потом лупа. Лупа — последняя кнопка строки, у самого края: это действие «искать», и оно завершает ввод. Разделитель между «очистить» и парой кнопок на главной не нужен — там и так просторно. */ body.dg-state-home .dg-shell-sep { display: none; } /* Ракушка внутри поля — только в выдаче и оглавлении: на главной знак и название уже стоят в шапке. Она же кнопка «домой». В чтении на этом месте стоит .dg-shell-toc (ниже) — owner: логотип там теперь ведёт в оглавление, не на главную (тот же паттерн, что у логотипа в документационных сайтах — GitBook/Readthedocs, клик внутри статьи уводит в оглавление книги, а не на маркетинговый home); с /toc «домой» по-прежнему одно касание через бургер. */ body .dg-shell-logo { display: none; flex: none; line-height: 0; text-decoration: none; } body.dg-state-results .dg-shell-logo, body.dg-state-toc .dg-shell-logo { display: inline-flex; } .dg-shell-logo img { width: 26px; height: 26px; object-fit: contain; display: block; } /* Оглавление — та же позиция в поле, что у ракушки, но только в чтении (см. комментарий выше) и с другой иконкой (fa-table-list, не логотип), чтобы не читалось как «ракушка перестала быть домой» — owner: "иконка должна быть другая... чтобы пользователь понимал, что это не дом". Стили — 1:1 с .dg-shell-logo (та же ячейка строки, тот же паддинг/цвет вокруг). */ body .dg-shell-toc { display: none; flex: none; line-height: 0; text-decoration: none; color: var(--dg-text-muted); } body.dg-state-reader .dg-shell-toc { display: inline-flex; align-items: center; justify-content: center; } .dg-shell-toc svg { width: 20px; height: 20px; display: block; } /* Разделитель перед блоком кнопок справа — как в строке поиска у поисковиков. */ .dg-shell-sep { width: 1px; height: 22px; flex: none; margin: 0 2px; background: var(--dg-border); } /* Спиннер ожидания живёт ВНУТРИ кнопки-лупы и подменяет саму иконку. Отдельным элементом в строке он раздвигал соседей, и на каждый запрос кнопки успевали дёрнуться туда и обратно (шестерёнка-лупа → спиннер-шестерёнка → шестерёнка-лупа). Теперь меняется только картинка внутри кнопки, геометрия строки неподвижна. */ .dg-shell-spinner { display: none; width: 17px; height: 17px; /* Owner: still invisible on the home page — border was a hardcoded teal (--dg-accent) sitting on the search button's own dark navy fill (body.dg-state-home .dg-shell-go, color:#fff), near-zero contrast between two dark/teal tones. Real Bootstrap .spinner-border uses `currentColor`, not a fixed color, precisely so it always matches whatever text/icon color its button already has — white on the home button, muted grey on results/reader, near-white in dark theme (all already set via .dg-shell-btn's own `color`, see above) — no per-state override needed here at all. */ border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dg-spin 0.7s linear infinite; } body.dg-busy .dg-shell-spinner { display: block; } body.dg-busy #searchbtn .dg-search-icon { display: none; } /* Home: the button is a text pill — the spinner replaces the label (owner: label + spinner side by side made the button jump in width). Same footprint: the label's line box is kept by a min-width on the pill, the spinner just sits centered inside it. */ body.dg-state-home.dg-busy .dg-shell-go-label { display: none; } body.dg-state-home .dg-shell-go { min-width: 74px; justify-content: center; } body.dg-state-home .dg-shell-spinner { width: 16px; height: 16px; margin: 2px 0; } @keyframes dg-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .dg-shell-spinner { animation-duration: 2s; } } /* Тот же спиннер, но НЕ внутри поля — на случай, когда сама шапка (и вместе с ней .dg-shell-spinner) уехала за экран автоскрытием (autoHideHeader). Показывается только когда ОБА условия разом: идёт запрос И шапка спрятана — когда шапка видна, свой спиннер в поле уже всё показывает, дублировать незачем. z-index выше стека шапки (850/849), чтобы не потеряться под подложкой (#dg-header-backdrop), но ниже дровера. */ #dg-busy-indicator { display: none; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 900; } body.dg-busy.dg-header-hidden #dg-busy-indicator { display: block; } #dg-busy-indicator .spinner-border { width: 22px; height: 22px; border-width: 3px; border-color: var(--dg-accent); border-right-color: transparent; border-radius: 50%; border-style: solid; animation: dg-spin 0.7s linear infinite; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } @media (prefers-reduced-motion: reduce) { #dg-busy-indicator .spinner-border { animation-duration: 2s; } } /* Инпут внутри оболочки — без своей рамки, фона и «пилюли»: рамка теперь у оболочки. Специфичность (0,2,1) намеренная: reader/css/uiextra.css задаёт `#form.ui-widget #paliauto, #paliauto { padding-left:10px !important }` (ДВА id), и она подключается лениво, ПОСЛЕ этого файла — обычным правилом её не перебить (см. docs/SPA_HANDOVER.md §4). */ body #form #paliauto.searchinput, body #form #paliauto.form-control { flex: 1 1 auto; min-width: 0; height: auto; padding: 6px 4px !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--dg-text); font-family: var(--dg-font); font-size: 1rem; outline: none; } body.dg-state-home #form #paliauto.searchinput { font-size: 17px; font-family: var(--dg-font); } /* Legacy sheets (index.css & co.) pin p/span/h5/a to their own family; on the home screen everything is Lato (reference), so claim the whole home column and the drawers/sheets at once instead of chasing each tag. */ body.dg-state-home #home-pane, body.dg-state-home #home-pane *, body.dg-state-home #dg-hero-band *, body.dg-skin-minimal .dg-sheet, body.dg-skin-minimal .dg-sheet *, body.dg-skin-minimal .dg-drawer, body.dg-skin-minimal .dg-drawer * { font-family: var(--dg-font); } /* ============================================================================ Phone layout of the home screen (owner's phone mock, 2026-09-06): no big headline, the field straight under the bar with the sliders back INSIDE it (no "изменить" line), announcement right below, compact tiles, compass off the bar. ============================================================================ */ @media (max-width: 767.98px) { /* html prefix: the desktop show-rules for these two live further down at the same specificity and would win on source order otherwise. */ html body.dg-state-home #dg-hero-heading { display: none; } body.dg-state-home .hero-row { margin-top: 16px; } body.dg-state-home #dg-quick-btn { display: inline-flex; } html body.dg-state-home #home-scope-summary { display: none; } body.dg-state-home #dg-topbar .dg-compass-btn-home { display: none; } /* body.dg-state-home prefix: the base tile/announce rules sit further down this file at the same specificity, so plain selectors here would lose on source order. */ /* Values below: the reference's own body[data-view="mobile"] rule set. */ body.dg-state-home #dg-announce { margin-top: 14px; } body.dg-state-home .dg-announce-box { width: 100%; max-width: none; padding: 6px 6px 6px 10px; gap: 7px; font-size: 12px; border-radius: 10px; line-height: 1.4; } body.dg-state-home .dg-announce-tag { font-size: 9.5px; padding: 2px 6px; } body.dg-state-home #dg-hero-band { padding-bottom: 4px; } body.dg-state-home #home-pane { margin-top: 18px; } body.dg-state-home .dg-tiles { gap: 8px; padding: 0 0 4px; } body.dg-state-home .dg-tile { padding: 12px 9px; gap: 6px; font-size: 13px; } body.dg-state-home .dg-tile-ic { width: 36px; height: 36px; } body.dg-state-home .dg-tile svg { width: 16px; height: 16px; } body.dg-state-home .dg-tile-desc { font-size: 11px; line-height: 1.35; } body.dg-state-home #home-slides { margin-top: 16px; } body.dg-state-home .dg-slides-box { padding: 15px 4px 12px; } body.dg-state-home #dg-carousel .carousel-item { padding: 0 30px; } body.dg-state-home #dg-carousel .carousel-control-prev, body.dg-state-home #dg-carousel .carousel-control-next { width: 28px; height: 28px; } body.dg-state-home #dg-carousel .carousel-control-prev { left: 4px; } body.dg-state-home #dg-carousel .carousel-control-next { right: 4px; } body.dg-state-home #dg-carousel .dg-slides-arw { width: 8px; height: 13px; } body.dg-state-home #dg-carousel h5 { font-size: 15px; } body.dg-state-home #dg-carousel span { font-size: 12.5px; } body.dg-state-home #dg-footer { margin: 24px auto 0; padding: 16px 0 30px; } } body #form #paliauto.searchinput::placeholder { color: var(--dg-text-muted); } /* Родной крестик type="search" (только webkit) — вместо него своя кнопка #dg-clear-btn: родной не поддаётся оформлению и вставал бы вплотную к нашим кнопкам. */ body #form #paliauto.searchinput::-webkit-search-cancel-button { display: none; } /* Лупа-сабмит. Раньше лежала ПОВЕРХ поля (position:absolute + z-index:12 из-за .searchinput{z-index:9}) — теперь это обычный элемент flex-строки, накладок больше нет. */ .dg-input-shell .dg-shell-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; /* Круглые, а не скруглённые квадраты. Заливки у них нет, пока на кнопку не навели, — но при наведении подсветка вылезала прямоугольником посреди круглого поля с круглыми соседями. */ border-radius: 50%; background: transparent; color: var(--dg-text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .dg-input-shell .dg-shell-btn:hover, .dg-input-shell .dg-shell-btn:focus-visible { background: var(--dg-surface-hover); color: var(--dg-text); } /* Слайдеры (fa-sliders) — быстрые настройки. Раньше была шестерёнка с молнией-прорезью, но с гером (полные настройки) и словарной шестерёнкой в компасе получалось три шестерёнки подряд — путали, какая для чего (просьба владельца). Иконку сменили в home.js (quickButtonHtml), сам диск-молния (.dg-qs-bolt) был частью именно гексагонной композиции гера и с ней вместе убран. Кнопка круглая, а не скруглённый квадрат: в поле ввода круглое уже всё остальное — и само поле, и «очистить», и лупа, — и один квадрат посреди них выбивался. */ .dg-qs-btn { /* Прозрачно, пока не навели — как остальные кнопки поля (.dg-shell-btn), не отдельный кружок на виду всегда: слайдеры второстепенное действие, не должны тянуть взгляд. */ --dg-qs-bg: transparent; --dg-qs-fg: var(--dg-text-2); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--dg-qs-bg); color: var(--dg-qs-fg); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .dg-qs-btn:hover, .dg-qs-btn:focus-visible { --dg-qs-bg: var(--dg-border); --dg-qs-fg: var(--dg-text); } /* Повёрнута на 90° и увеличена — владелец: горизонтальные слайдеры (fa-sliders) на маленьком размере читались почти как бургер (тоже три горизонтальные линии), путали. Вертикальные слайдеры — стандартная альтернативная ориентация той же иконки, однозначно другой силуэт. Центровка — сама .dg-qs-btn уже flex/center (см. выше), rotate() крутит вокруг центра иконки по умолчанию, так что положение не съезжает. */ /* 26px оказался БОЛЬШЕ бургера — перебор. Владелец задал точный ориентир: не крупнее лупы (#searchbtn .dg-search-icon, index.html — 17×17, тот же ряд той же формы поля). 17px, без попытки сравнять зрительный вес на глаз ещё раз — на этот раз просто взял чужой размер буквально. */ .dg-qs-btn .dg-qs-gear { width: 17px; height: 17px; display: block; transform: rotate(90deg); } /* Тёмный кружок — на лупе (главное, кликабельное действие поля), не на шестерёнке (второстепенная настройка). Раньше было наоборот, и тёмное пятно тянуло взгляд/палец не туда — шестерёнку хотелось нажать, а не лупу (жалоба владельца). Шестерёнка теперь просто шестерёнка — тот же приглушённый стиль, что у остальных кнопок поля (.dg-shell-btn: прозрачно, подсветка только по наведению). transition:none по той же причине, что и у полосы: цвет здесь меняет СОСТОЯНИЕ страницы, а не наведение, и не должен зависеть от того, рисует ли вкладка кадры. */ /* Text label — added to the button markup (index.html) for every state, but only shown on the home screen: results/reader keep the compact icon-only button, there's no room for a label in that toolbar-sized field. */ .dg-shell-go-label { display: none; } body.dg-state-home .dg-shell-go, body:not(.dg-state-home) .dg-shell-go { transition: none; } /* Reference button.go: text only, 13.5px/500, 8px/16px padding, 8px corners, accent fill (--dg-accent-dark: #0f7c63 light / #025242 dark — both measured off the reference). The magnifying glass stays in the markup for results/reader (icon-only button there) and for the busy spinner that swaps in for it; on home the label is the whole button. */ body.dg-state-home .dg-shell-go { background: var(--dg-accent-dark); color: #fff; width: auto; height: auto; padding: 8px 16px; border-radius: 8px; gap: 0; } body.dg-state-home .dg-shell-go:hover, body.dg-state-home .dg-shell-go:focus-visible { background: var(--dg-accent); color: #fff; } body.dg-state-home .dg-shell-go .dg-search-icon { display: none; } body.dg-state-home .dg-shell-go-label { display: inline; font-family: var(--dg-font); font-size: 13.5px; font-weight: 500; line-height: 1.45; white-space: nowrap; } /* Owner: on mobile the "Искать" pill crowds the field (screenshot: label clipping the query text) — icon-only there, same as results/reader already are, instead of the text button. The glass keeps the site's mirrored orientation (lens right, handle down-left — the scaleX(-1) inline style on the in index.html), same as in results/reader (owner: turn it right). */ @media (max-width: 767.98px) { body.dg-state-home .dg-shell-go { width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 50%; } body.dg-state-home .dg-shell-go-label { display: none; } body.dg-state-home .dg-shell-go .dg-search-icon { display: block; } /* Owner: with the submit button now showing its own glass (right, above), the decorative one at the field's left edge (.dg-shell-search-ic, home-only) is a second, redundant glass on the same narrow row — hide it on mobile specifically, desktop home keeps it (there the submit button is still the text pill, no icon of its own to duplicate it). */ body.dg-state-home .dg-shell-search-ic { display: none; } } /* Ожидание ответа поиска: пока крутится спиннер, выдачи (даже пустой) быть не должно — ради этого весь класс и заведён. Домашние блоки при этом НЕ прячем: смысл в том, чтобы человек остался на главной, а не смотрел в пустоту. */ body.dg-busy #results-toolbar, body.dg-busy #results-divider, body.dg-busy #search-pane, body.dg-busy:not(.dg-state-reader) #reader-pane { display: none; } /* Reader while loading (cold load: dg-busy; in-app: .reader-pending): only #sutta is hidden, and the header keeps its place. The first version drew ONE 300px bar per row, and it fitted worse the narrower the screen got (owner, 2026-09-20). The width was never the real fault. Looking at the loaded header at 1900, 820 and 390 shows what is actually there: at the two larger sizes the toolbar is a single centred row — six text links, six icons, the title pill — and at 390 it wraps into two rows, with the prev/next row under it either way. Most of that is NOT waiting for anything. The icons are the same for every sutta and are ready before the text is; a grey bar over them replaces finished content with a promise. Three things do wait, and each now gets a placeholder of its OWN shape in its OWN place: #smart-toc-btn (the title pill) → its own box, shimmering #navigation (prev/next) → two bars at the two ends And one that deliberately gets NOTHING: the per-sutta edition links (Voice/4nt/DPR/BJT/SC/TBW). megareader.js builds them at render time (generateThirdPartyLinks), so on a cold load there are no elements to shimmer — a placeholder for them would have to be invented out of guessed widths, which is exactly the fixed-pixel mistake this replaces. They stay hidden, as before; the rule that hides them matters for in-app navigation, where the PREVIOUS sutta's links are still in the DOM. Nothing here is a fixed pixel width that has to be retuned per screen: each placeholder inherits the box of the element it stands for, so wrapping at 390 and the single row at 1900 come out right for free, and there is not one media query in it. */ body.dg-state-reader.dg-busy #sutta, #reader-pane.reader-pending #sutta { visibility: hidden; } /* Shared look. Applied to backgrounds rather than to a bar element, so a placeholder can BE the element it replaces instead of standing next to it — that is what went wrong before: the old ::before joined the toolbar's centred flex row as one more item and shoved the icons aside. */ body.dg-state-reader.dg-busy #smart-toc-btn, #reader-pane.reader-pending #smart-toc-btn, body.dg-state-reader.dg-busy #navigation::before, #reader-pane.reader-pending #navigation::before, body.dg-state-reader.dg-busy #navigation::after, #reader-pane.reader-pending #navigation::after { border-radius: 999px; background: linear-gradient(90deg, var(--dg-surface-hover) 25%, var(--dg-border) 50%, var(--dg-surface-hover) 75%); background-size: 200% 100%; animation: dg-tiles-skeleton 1.4s ease-in-out infinite; } /* The per-sutta edition links, wherever they currently are. Scoping this to #reader-toolbar was not enough (owner, 2026-09-20, landscape phone): until megareader.js has rendered, the links sit in their MOBILE home (#top-links-container, a row of their own) and only then does buildSutta move them up into the icon row — on desktop widths, decided by window.innerWidth at render time. So a wide screen showed the mobile two-row header for as long as the load took, and then the header rearranged itself under the reader's eyes. Hiding them by class rather than by container means they are simply not seen in the wrong place: they appear once, already where they belong. The header keeps its height either way — the icons hold the toolbar row and #navigation has its min-height. */ body.dg-state-reader.dg-busy .sc-ext-link, #reader-pane.reader-pending .sc-ext-link { display: none; } body.dg-state-reader.dg-busy #top-links-container, #reader-pane.reader-pending #top-links-container { display: none; } /* The title pill: its own box already knows how wide it may be at each size (160px, 280px, 96px on phones), so the placeholder inherits all of that. min-width is in em, so it follows the same responsive font-size the pill itself uses. */ body.dg-state-reader.dg-busy #smart-toc-btn, #reader-pane.reader-pending #smart-toc-btn { color: transparent; border-color: transparent; pointer-events: none; min-width: 7em; } body.dg-state-reader.dg-busy #smart-toc-btn *, #reader-pane.reader-pending #smart-toc-btn * { visibility: hidden; } /* prev/next: two bars at the two ends, exactly where the two links sit. The row is laid out here only while loading — the real links are display:none below, so this governs nothing but the placeholders and leaves the loaded layout (legacy reader CSS) alone. */ body.dg-state-reader.dg-busy #navigation, #reader-pane.reader-pending #navigation { display: flex; align-items: center; justify-content: space-between; } body.dg-state-reader.dg-busy #navigation::before, #reader-pane.reader-pending #navigation::before, body.dg-state-reader.dg-busy #navigation::after, #reader-pane.reader-pending #navigation::after { content: ''; display: block; flex: none; height: 13px; width: min(150px, 38%); } body.dg-state-reader #navigation { min-height: 34px; } body.dg-state-reader.dg-busy #navigation a, #reader-pane.reader-pending #navigation a { display: none; } body.dg-busy #variants-hint { display: none !important; } #dg-loading { display: flex; justify-content: center; padding: 2.5rem 0; } #dg-loading[hidden] { display: none; } /* .spinner-border есть и в Bootstrap (подключён здесь), и в reader/css/rus-multi.css — размеры и цвет задаём сами, чтобы вид не зависел от того, догружен ли уже ридер. */ #dg-loading .spinner-border { width: 1.75rem; height: 1.75rem; border-width: 0.2em; color: var(--dg-text-muted); } /* Всё, что относится к выдаче, на главной не нужно: пустая таблица с шапкой колонок, ряд кнопок выдачи, подсказка о вариантах, плавающие кнопки языка и "наверх". Модалки (#settings, #SearchResultHelp) НЕ трогаем — у них свой display, которым управляет Bootstrap. */ body.dg-state-home #results-toolbar, body.dg-state-home #results-divider, body.dg-state-home #search-pane, body.dg-state-home #reader-pane, body.dg-state-home #language-button, body.dg-state-home #scrollToTopBtn, /* #dynamicHeader lives outside #results-toolbar on purpose (see its own comment in index.html — shouldn't hide/show on scroll like the rest of the toolbar) and is already hidden for dg-state-toc/dg-state-reader, but was missing here: going home after a search left the old "N texts and M matches..." title floating below the page (owner screenshot). */ body.dg-state-home #dynamicHeader { display: none; } /* ============================================================================ Совместимость с таблицами стилей ридера Они подключаются в рантайме (при первом открытии текста), то есть ПОСЛЕ всех остальных, и выигрывают по порядку. Здесь — точечные ответы на конкретные конфликты. ============================================================================ */ /* Ответ на `#form.ui-widget #paliauto, #paliauto { padding-left:10px !important }` из reader/css/uiextra.css — выше, вместе с остальными правилами инпута (.dg-input-shell). */ /* И index.css, и rus-multi.css задают глобальное `body { margin:1rem 3rem; background-color; font-family:"Robto Serif" }`. Пока ридер был отдельной страницей, это никого не задевало; теперь, один раз открыв текст, выдача до конца сессии съезжала на 3rem и меняла шрифт. Возвращаем ей своё оформление везде, КРОМЕ состояния ридера — там правила ридера как раз нужны. Специфичность (0,1,1) против (0,0,1) у голого `body`, поэтому побеждаем и без !important. */ body:not(.dg-state-reader):not(.dg-state-toc) { margin: 0; font-family: var(--bs-body-font-family); background-color: var(--dg-page); } /* Панель ридера видна только в своём состоянии. В разметке у неё раньше стоял bootstrap-овский d-none (display:none !important) — его перебить состоянием было нельзя, поэтому класс снят, а видимость целиком здесь. */ #reader-pane { display: none; } /* Reader screen transition (owner spec). Enter: 380ms, scale(.94)->1, translateY(10px)->0, fade in, origin 50%/40% of the viewport (40vh, not 40% of the pane — the pane is as tall as the whole sutta). Plays automatically on display:none -> block (dgSetState('reader')) and is restarted by hand in megareader.js between neighbouring suttas. Exit: 240ms, scale 1->.9, translateY 0->-6px, fade — class .reader-out added by routeFromUrl() (search/index.html) / navigateSutta() (megareader.js); the screen switches only after it finishes. */ @keyframes dg-reader-in { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes dg-reader-out { to { opacity: 0; transform: scale(.9) translateY(-6px); } } /* No fill-mode on the enter: a filled transform (even the identity one) makes #reader-pane the containing block of its position:fixed header stack (#reader-toolbar etc.), shifting it. */ body.dg-state-reader #reader-pane { display: block; } /* The animation runs on #sutta (the text), not the pane: the fixed toolbar/nav rows inside the pane stay put (owner: "шапка монолитна"). .reader-pending (text still loading, see the skeleton rules above) keeps the stale text hidden so the enter plays once, on the NEW text; .reader-in is added by buildSutta() (megareader.js) when the text is in the DOM. */ body.dg-state-reader #sutta { transform-origin: 50% 40vh; } body.dg-state-reader #reader-pane.reader-in #sutta { animation: dg-reader-in 380ms var(--dg-ease); } body.dg-state-reader #reader-pane.reader-out #sutta { animation: dg-reader-out 240ms var(--dg-ease) both; } @media (prefers-reduced-motion: reduce) { body.dg-state-reader #reader-pane.reader-in #sutta, body.dg-state-reader #reader-pane.reader-out #sutta { animation: none; } } /* Панель TOC/навигатора — тот же приём, что #reader-pane выше. Первая, минимальная версия разметки: подробная стилизация (тема шапки/тулбара и т.п.) при желании донастраивается позже, как и весь остальной визуал ридера когда-то дорабатывался постепенно. */ #toc-pane { display: none; } body.dg-state-toc #toc-pane { display: block; } body.dg-state-toc #search-pane, body.dg-state-toc #results-toolbar, body.dg-state-toc #results-divider, body.dg-state-toc #dynamicHeader, body.dg-state-toc #language-button { display: none; } /* Layout: tree on the left (this is a Dhamma site, not a translation-comparison site — owner), translator filter as a right-hand aside when there's room; on narrow screens the aside moves ABOVE the tree instead (order:-1) and stays compact via the per-language
"ещё". */ /* Palette: not new — reuses the site's own production-v4 tokens (--dg-surface/--dg-border/ --dg-text/--dg-accent etc.), already defined on body.dg-skin-minimal above and already theme-aware (body.dark redefines them) since they drive the home screen and reader toolbar. The old version of this block used bare Bootstrap vars (--bs-border-color etc.), which this site's dark theme never touches — that's why it looked like an unstyled draft in dark mode. */ #toc-pane { max-width: 1100px; margin: 0 auto; color: var(--dg-text); } /* Safety net: every link in this pane is the same accent green, full stop (owner: "цвета ссылок должны быть тогда уже все зелёные, а не только зелёные какие-то фиолетовые" — repeated after the :visited-only fix, because the REAL cause wasn't :visited at all). Once the reader has been opened anywhere in this SPA session, reader/css/index.css + rus-multi.css stay loaded and carry a bare ".dark a{color:rgb(122,122,249)}" — class+type beats this file's plain ".toc-mark"/ ".toc-leaf-link" classes (both are single-class selectors), so links quietly turned lilac the moment reader CSS entered the page, :visited or not. #toc-pane is an ID selector — it outranks any class-based rule regardless of load order, so this one line pins every link in the pane. */ #toc-pane a, #toc-pane a:visited { color: var(--dg-accent-ink, var(--dg-accent)); } .toc-layout { display: flex; gap: 2rem; align-items: flex-start; } .toc-main { flex: 1 1 auto; min-width: 0; } /* Pinned just under the header stack, not at a fixed 1rem: the stack is position:fixed, so a hardcoded top slid this column underneath the band (the filter's own title was the first thing to disappear — same "закрывает" complaint). --dg-stack-height is written by applyPadding() (search/index.html); the fallback covers the instant before it first runs. */ .toc-aside { flex: 0 0 260px; position: sticky; top: calc(var(--dg-stack-height, 65px) + 12px); border: 1px solid var(--dg-border); border-radius: var(--dg-radius, 10px); padding: .75rem .9rem; background: var(--dg-surface); } /* Scroll targets of /spa/toc.js's scrollTo() (revealTarget): scrollIntoView({block:'start'}) puts the element's top edge at the viewport top, i.e. exactly under the fixed band. scroll-margin-top shifts that edge below the stack instead, so arriving at /toc/dn lands on "Dīgha Nikāya (34)" rather than behind the search field. */ #toc-pane [id^="toc-category-"], #toc-pane .toc-book, #toc-pane [data-toc-node], #toc-pane .toc-group { scroll-margin-top: calc(var(--dg-stack-height, 65px) + 8px); } /* TOC screen transition (owner spec). Enter: 340ms, list (left) from -22px, translator filter (right) from +22px with a 60ms delay, both fade in; plays on display:none -> block and on the rebuilt nodes of renderTopLevel(). Exit: 240ms, columns fly outward (-26px / +26px) and fade — class .toc-out on #toc-pane, added by routeFromUrl() (search/index.html); the screen switches only after it finishes. */ @keyframes dg-toc-in-left { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } } @keyframes dg-toc-in-right { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } @keyframes dg-toc-out-left { to { opacity: 0; transform: translateX(-26px); } } @keyframes dg-toc-out-right { to { opacity: 0; transform: translateX(26px); } } body.dg-state-toc .toc-main { animation: dg-toc-in-left 340ms var(--dg-ease); } body.dg-state-toc .toc-aside { animation: dg-toc-in-right 340ms var(--dg-ease) 60ms backwards; } body.dg-state-toc #toc-pane.toc-out .toc-main { animation: dg-toc-out-left 240ms var(--dg-ease) both; } body.dg-state-toc #toc-pane.toc-out .toc-aside { animation: dg-toc-out-right 240ms var(--dg-ease) both; } @media (prefers-reduced-motion: reduce) { body.dg-state-toc .toc-main, body.dg-state-toc .toc-aside, body.dg-state-toc #toc-pane.toc-out .toc-main, body.dg-state-toc #toc-pane.toc-out .toc-aside { animation: none; } } .toc-aside-title { font-size: .95rem; margin: 0 0 .5rem; color: var(--dg-text-2); } /* Same button-reset + "+/-" affordance as the category expand-all toggle — collapsible on phones so arriving at /toc lands on the Pali contents, not this panel (owner: "на мобильном когда пришёл в оглавление, он пришёл в оглавление пали, а не в список переводчиков"). */ .toc-aside-toggle { display: flex; align-items: center; gap: .4rem; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font: inherit; } .toc-aside-toggle .toc-toggle { flex: none; } .toc-filter-reset { font-size: .8rem; margin-bottom: .6rem; } .toc-filter-reset a, .toc-filter-reset a:visited { color: var(--dg-accent-ink, var(--dg-accent)); } /* Stack to one column only on phones — tablets have plenty of room for the two-column layout too (owner: "на планшетах же много места... в одну колонку только на мобильных"). 640px keeps portrait tablets (iPad-class, ≥768px) two-column; only narrower phone widths collapse. */ @media (max-width: 640px) { .toc-layout { flex-direction: column; } .toc-aside { order: -1; flex-basis: auto; width: 100%; position: static; } } .toc-category { margin-bottom: 1.75rem; } .toc-category-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; } .toc-category-header h3 { margin: 0; font-size: 1.15rem; color: var(--dg-text); } /* Chunky square toggle — prod's own look for its one top-level collapse-all control (read.php #collapseAll: filled accent square, bold "+"). */ .toc-expand-all-btn { width: 1.9rem; height: 1.9rem; flex: none; border: none; border-radius: 6px; background: var(--dg-accent); color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; } .toc-expand-all-btn:hover { background: var(--dg-accent-dark, var(--dg-accent-ink, var(--dg-accent))); } .toc-books { display: flex; flex-direction: column; } .toc-book { border-top: 1px solid var(--dg-border); padding: .5rem 0; } .toc-book:first-child { border-top: none; } .toc-book-header, .toc-book-header:visited { display: block; width: 100%; text-align: left; background: none; border: none; padding: .3rem .1rem; cursor: pointer; color: var(--dg-accent-ink, var(--dg-accent)); font-size: 1.3rem; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .toc-book-header:hover { text-decoration-color: currentColor; } /* The "(N)" count (and, for Khuddaka, the "*" partial-collection mark) is its own muted span, not part of the bold name — it's metadata about the row, not the title itself (owner: "отдели счётчик от названия чтобы он был серым... это к имени не относится"). */ .toc-count { color: var(--dg-text-muted); font-weight: 400; font-size: 1rem; text-decoration: none; } .toc-count-star { cursor: help; } .toc-book-body { padding: .25rem 0 .5rem .7rem; } .toc-empty { padding: .35rem 0; color: var(--dg-text-muted); font-size: .9rem; } /* Explicit hierarchy: "Переводчики" (aside title, h4) → language name (level 2 — bigger, bold, its own underline) → each translator (level 3 — small checkbox row). Owner: "у тебя всё одинакового размера... это же для того, чтобы было удобно понимать, это первый уровень, это там опция, это второй уровень" — same size everywhere read as one flat blob. */ .toc-filter-search { width: 100%; box-sizing: border-box; margin-bottom: .85rem; padding: .4rem .55rem; font-size: .85rem; background: var(--dg-page); color: var(--dg-text); border: 1px solid var(--dg-border-strong); border-radius: 6px; } .toc-filter-group { margin-bottom: 1.1rem; padding-top: .6rem; border-top: 1px solid var(--dg-border); } .toc-filter-group:first-child { padding-top: 0; border-top: none; } .toc-filter-patimokkha { margin-top: .4rem; padding-top: .6rem; border-top: 1px solid var(--dg-border); } /* Named ...-hdr/-title, deliberately NOT ...-lang-row/...-lang: reader/css/uiextra.css has its own "[class*='-lang']{display:block}" (targets .pli-lang/.eng-lang/etc.) — any class of ours that happens to contain that substring gets silently forced to display:block too (same specificity, uiextra.css loads later so it wins), which is exactly what broke the checkbox+language-name row here (owner: screenshot showed the checkbox stacked above "English" — that CSS rule, not the active-word JS bug from before, which was a separate collision on the same "-lang" substring). */ .toc-filter-hdr { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } .toc-filter-title { font-weight: 700; font-size: 1rem; color: var(--dg-text); } .toc-filter-item { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; padding: .2rem 0; color: var(--dg-text-2); } /* Real, visible checkboxes — not text-sized-to-invisibility (owner: "это же не просто какие-то ссылки, это должны быть чекбоксы... непонятно как это работает"). They were rendering display:none: extrastyles.css has a global "label input[type=checkbox]{display:none}" (its own custom-checkbox hack elsewhere on the site) that swallows every checkbox nested in a
, и без этого главная каждый раз "въезжала" бы анимацией. Снимается через два requestAnimationFrame. */ body.dg-no-anim, body.dg-no-anim * { transition: none !important; animation: none !important; } /* ============================================================================ Заголовок главной (production-v4 redesign, docs/Home-standalone.html) Крупный H1 + подзаголовок, центрированные, собственным блоком между шапкой и полем поиска — не строка рядом с вывеской, как раньше (см. #dg-hero-heading в index.html). ============================================================================ */ /* Sizes measured off the reference: 38px above the H1, 30px/600 H1 with 6px below, 14px subtitle with 22px below it (that 22px lives on .hero-row's margin-top, see above). */ #dg-hero-heading { display: none; text-align: center; /* Horizontal inset already comes from the parent .dg-hero-inner — just top spacing here. */ padding: 38px 0 0; } body.dg-state-home #dg-hero-heading { display: block; } #home-motto { margin: 0 0 6px; font-family: var(--dg-font); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; /* On the plain page background now (not the dark band) — dark text in light theme, light text in dark theme, same tokens the rest of the page's headings use. */ color: var(--dg-text); } /* One-time shine sweep across "Найдите Истину" on first paint (owner: "чтобы при открытии один раз по надписи прошёл такой свет по всей надписи") — delight tier, plays once per real page load, never repeats (a plain CSS animation with no trigger to re-fire, not tied to any frequently-toggled state). @supports-gated: browsers without background-clip:text just keep the plain solid --dg-text color set above, never see transparent text. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { #home-motto { /* Owner: "какой формы луч я представлял круглый" — a round spot of light, not a diagonal bar. background-color is the letters' normal resting color, always painted (a plain color can't be a comma-separated background-image layer — that was tried first and silently resolved to `none`, caught live via computed-style before shipping). background-image is a single small radial circle (the travelling spotlight, fading to transparent at its own edge) painted on top of that fill; only its position animates, sliding left to right, so most of the word stays its normal color and only the ~48px pool under the circle brightens as it passes — instead of the whole word dimming/brightening together like the earlier diagonal-band version. */ background-color: var(--dg-text); background-image: radial-gradient(circle 24px at center, var(--dg-motto-shine) 0%, transparent 100%); background-repeat: no-repeat; background-size: 48px 100%; background-position: -48px 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* linear, not var(--dg-ease): that token is a strong ease-out for entering/exiting UI (see the file's other uses) — this is constant, marquee-like motion crossing the screen, which wants linear (AUDIT.md §2, improve-animations skill). */ /* Owner: "нужно сделать чтобы ещё была медленно... хотя бы за 3 сек" — was 1.4s. */ animation: dg-motto-shine 8s linear 0.3s 1 both; } } @keyframes dg-motto-shine { from { background-position: -48px 0; } to { background-position: calc(100% + 48px) 0; } } @media (prefers-reduced-motion: reduce) { /* Delight-only motion, no comprehension purpose — reduced motion drops it entirely rather than offering a gentler variant, per owner's usual pattern on purely decorative sweeps. */ #home-motto { animation: none; background: none; color: var(--dg-text); } } #home-subtitle { margin: 0; font-family: var(--dg-font); font-size: 14px; line-height: 1.5; color: var(--dg-text-2); } @media (max-width: 767.98px) { #home-motto { font-size: 26px; } } /* Подсказка под полем: "искать «…»" / "похоже на ссылку на текст". На полосе — светлая плашка поверх тёмного фона; акцентная заливка там нечитаема. Owner (round 3): справа, под полем — не в потоке (иначе снова толкала бы плитки вниз), а position:absolute от .dg-hero-form (position:relative там же, search/index.html — раньше был от .hero-row, но та растянута на всю строку и шире самого поля, из-за чего подсказка уезжала вправо от кнопки поиска; теперь #home-hint — последний child формы, а не .hero-row, и правым краем совпадает ровно с полем/кнопкой), вровень с полем. Автодополнение (.ui-autocomplete, uiextra.css) висит у ЛЕВОГО края поля и не шире 274px — справа под широким полем места достаточно, не пересекаются. Скрыта на мобильных (see media query below) — owner. */ #home-hint { text-align: right; position: absolute; top: 100%; right: 0; } @media (max-width: 767.98px) { #home-hint { display: none; } } #home-hint .dg-hint { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; /* Was a translucent-white chip for sitting on the dark band; the hint now sits on the plain page background alongside the search field, so it takes the same neutral surface/border tokens as everything else there. */ color: var(--dg-text-2); background: var(--dg-surface-hover); padding: 5px 10px; border-radius: 7px; } /* ============================================================================ Строка области поиска — "N Никаи · M КН · изменить" (production-v4 redesign, docs/Home-standalone.html). Текст считает renderScopeSummary() (home.js) из тех же SCOPE_GROUPS/readScope(), что и обычная шторка быстрых настроек. ============================================================================ */ /* Reference .scope-line: 11px under the field, 12.5px muted text, 7px gap, the link in accent with a 13px sliders glyph 5px before the word. */ #home-scope-summary { display: none; justify-content: center; align-items: center; gap: 7px; margin-top: 11px; font-family: var(--dg-font); font-size: 12.5px; color: var(--dg-text-muted); } body.dg-state-home #home-scope-summary { display: flex; } .dg-scope-change { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--dg-accent-ink); font-family: var(--dg-font); font-size: inherit; } /* Same sliders SVG as the quick-settings button (quickButtonHtml(), home.js) — unrotated here, like the reference's fa-sliders; .dg-qs-btn's 90° turn is scoped to that button only. */ .dg-scope-change .dg-qs-gear { width: 13px; height: 13px; display: block; } .dg-scope-change:hover, .dg-scope-change:focus-visible { text-decoration: underline; } /* ============================================================================ Объявление под полем поиска (#dg-announce, см. .dg-hero-inner в search/index.html) ============================================================================ */ /* Было position:absolute НАД полем (owner: "без сдвига интерфейса") — .hero-row держал зарезервированный пустой отступ специально под неё. В production-v4 redesign (docs/Home-standalone.html) плашка стоит ПОСЛЕ поля, в обычном потоке — резервировать место больше незачем, а появление/закрытие просто раздвигает/сдвигает то, что ниже (плитки), один раз при показе, а не постоянно занимает воздух над полем. */ /* Takes no space until an announcement is actually shown (display:none, not just opacity): the one shift when it appears a couple of seconds after load is accepted (owner, 2026-09-06 — a first-paint reservation was tried and rejected: it can't help the very first visit anyway). */ #dg-announce { display: none; justify-content: center; margin-top: 18px; /* Плавное появление (плашку показывает home.js через несколько секунд после загрузки). */ opacity: 0; transform: translateY(-6px); transition: opacity 0.35s ease, transform 0.35s ease; } #dg-announce.dg-announce-in { display: flex; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { #dg-announce { transition: none; transform: none; } } body:not(.dg-state-home) #dg-announce { display: none; } /* Reference .announce: 13px text, 7/8/7/13 padding, 12px corners, 9px gaps, ≤640px; a small uppercase "BETA" badge in front (item.tag, announcements.json); accent-colored link and close. */ .dg-announce-box { display: flex; align-items: center; gap: 9px; max-width: 640px; padding: 7px 8px 7px 13px; border-radius: 12px; /* Was a translucent-white chip for the dark band; now on the plain page, so it can use the real accent-tinted pill everywhere else on the page uses (production-v4 redesign, docs/Home-standalone.html) instead of a fake-transparent stand-in. */ background: var(--dg-accent-bg); color: var(--dg-text-2); font-family: var(--dg-font); font-size: 13px; line-height: 1.45; } .dg-announce-box a { color: var(--dg-accent-ink); text-decoration: underline; } .dg-announce-tag { flex: none; padding: 2px 7px; border-radius: 6px; background: var(--dg-accent-dark); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.45; } .dg-announce-close { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dg-accent-ink); opacity: 0.6; cursor: pointer; } .dg-announce-close:hover, .dg-announce-close:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.08); } /* На узком экране отступ над полем тот же, но текст переносится в две строки — прижимаем плашку к низу отступа, чтобы она не наезжала на шапку. */ @media (max-width: 767.98px) { .dg-announce-box { font-size: 0.78rem; padding: 6px 6px 6px 10px; } } /* ============================================================================ Плитки ============================================================================ */ /* Reference nav: the full 880px content column, 4 × 1fr, 10px gaps, 24px above / 10px below. */ .dg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 880px; margin: 0 auto; padding: 2px 0 10px; /* Reserve space for the tiles home.js fills in after its menu-links.json fetch resolves — without this the empty grid collapses to 0 height and everything below (footer etc.) jumps down once tiles pop in. Sized for the default 8 tiles at 2 cols (4 rows); narrower at >=576px below since it switches to 4 cols (2 rows). Approximate on purpose — tile count is user-customizable (hidden/custom tiles), an exact height isn't possible anyway. */ min-height: 460px; } .dg-tiles:empty { background: linear-gradient(90deg, var(--dg-surface) 25%, var(--dg-surface-hover) 50%, var(--dg-surface) 75%); background-size: 200% 100%; border-radius: 12px; animation: dg-tiles-skeleton 1.4s ease-in-out infinite; } @keyframes dg-tiles-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* 4 columns from tablet width up; phones keep 2 (reference: 2 columns below 760px). */ @media (min-width: 768px) { .dg-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 880px; min-height: 336px; } } /* Reference .tile: 18/14 padding, 10px corners, 9px between disc/label/desc, 14px/600 label, 12px description. */ .dg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 18px 14px; background: var(--dg-surface); border: 1px solid var(--dg-border); border-radius: 10px; font-family: var(--dg-font); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--dg-text); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .dg-tile:hover, .dg-tile:focus-visible { background: var(--dg-surface-hover); border-color: var(--dg-border-strong); color: var(--dg-text); } .dg-tile:active { transform: scale(0.985); } /* Иконка — в кружке из акцентного фона, сама иконка акцентного цвета. Кружок и есть то, что делает плитку значком, а не строкой списка в рамке. */ .dg-tile-ic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--dg-accent-bg); } .dg-tile svg { width: 21px; height: 21px; display: block; color: var(--dg-icon-ink); } /* Мини-описание под названием плитки (menu-links.json desc; включается в шторке «Настройки»). Мельче и бледнее подписи, не жирное, до двух строк — плитка остаётся значком с подписью, а строка лишь отвечает «что там внутри». Отрицательный margin съедает часть gap'а плитки, чтобы описание читалось как продолжение подписи, а не как третий равноправный элемент. */ .dg-tile-desc { display: block; margin-top: -4px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--dg-text-2); max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* ============================================================================ Нижняя шторка со ссылками position:fixed — она вне схлопывающегося #home-pane и живёт в конце , иначе overflow:hidden родителя обрезал бы её. ============================================================================ */ #dg-sheet-backdrop { position: fixed; inset: 0; background: rgba(20, 18, 10, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; z-index: 1080; } #dg-sheet-backdrop.show { opacity: 1; pointer-events: auto; } /* Под выпадашкой быстрых настроек подложка невидима, но клики по странице всё так же ловит: затемнять весь экран ради маленького меню — перебор, а закрывать по клику мимо нужно. */ #dg-sheet-backdrop.dg-transparent { background: transparent; } .dg-sheet { position: fixed; left: 0; right: 0; bottom: 0; /* Above the offline download card (1082, public/offline/offline-status.js): tiles < card < sheet — owner: the tiles sit behind the card, the mega menu may go over it. */ z-index: 1083; display: flex; flex-direction: column; max-height: 82vh; background: var(--dg-surface); color: var(--dg-text); font-family: var(--dg-font); border-top: 1px solid var(--dg-border-strong); border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform 0.3s var(--dg-ease); } .dg-sheet.show { transform: translateY(0); } @media (min-width: 768px) { .dg-sheet { left: 50%; right: auto; bottom: 20px; width: 560px; max-height: 74vh; border: 1px solid var(--dg-border-strong); border-radius: 16px; transform: translate(-50%, calc(100% + 20px)); } .dg-sheet.show { transform: translate(-50%, 0); } /* «О проекте» — шире 560px списка плиток: поле поиска на главной 720px (.dg-hero-form ниже) плюс по 100px с каждой стороны (owner), там длинная цитата и ряд кнопок приложений. */ .dg-sheet.dg-wide { width: min(920px, calc(100vw / var(--dg-zoom, 1) - 32px)); } /* Owner: "если место позволяет нужно чтобы футер был внизу" — .dg-sheet has no explicit height (max-height only, sized to fit its own content), so the .dg-about #contacts margin-top:auto trick above has nothing to push against on a tall viewport with short content. Same value as max-height above: the sheet locks to a real 74vh box whenever content fits inside it (giving margin-top:auto real room to push the footer down to the bottom of THAT box), and content taller than 74vh simply overflows/scrolls exactly like today — min-height can't force it shorter than its own content. */ .dg-sheet.dg-wide { min-height: 74vh; } .dg-sheet.dg-wide .dg-sheet-body { padding: 8px 44px 40px; } } /* Быстрые настройки — выпадашка ПОД шестерёнкой, на любой ширине. Нижняя шторка выглядела как отдельный раздел страницы и уводила взгляд от поля, к которому эти настройки относятся. Правило вне медиазапроса намеренно: на узком экране home.js сам сужает выпадашку до ширины экрана за вычетом полей (см. placeAnchored). Координаты приходят инлайном. */ .dg-sheet.dg-anchored { left: auto; right: auto; bottom: auto; max-height: 70vh; border: 1px solid var(--dg-border-strong); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35); transform: translateY(-8px); opacity: 0; transition: transform 0.16s var(--dg-ease), opacity 0.16s ease; } .dg-sheet.dg-anchored.show { transform: translateY(0); opacity: 1; } /* Opened from the quick window's gear (quickModal.js): the window is at z-index 10000 (quick-modal.css), every sheet here at 1080/1081 — the dropdown would open behind it. */ .dg-sheet.dg-above-quick-modal { z-index: 10050; } #dg-sheet-backdrop.dg-above-quick-modal { z-index: 10040; } /* У выпадашки ручки-«потяни вниз» быть не должно: тянуть её некуда. */ .dg-sheet.dg-anchored .dg-sheet-handle { display: none; } /* Мега-меню (External/AI & Dicts/Materials/Tools/Русские) — тот же анкоренный попап, что у быстрых настроек, но .dg-sheet-body раскладывается в колонки вместо вкладок+списка. Ширину/позицию считает placeMegaAnchored() (home.js) инлайном. position: absolute (не fixed, как у .dg-sheet/.dg-anchored) — координаты, которые считает placeMegaAnchored(), уже document-relative (учитывают scrollX/scrollY), так что попап скроллится ВМЕСТЕ со страницей, а не остаётся приклеенным к вьюпорту. max-height/overflow — none/visible: owner явно просил убрать СВОЙ скролл попапа ("не должно быть скролла... за счёт общего сдвига экрана его нужно прокручивать, а не за счёт какого-то своего отдельного скроллбара") — если колонки не помещаются в высоту вьюпорта, страница просто скроллится ниже, как у обычного мега-меню; scrollForMega() (home.js) заранее подтягивает страницу так, чтобы поле поиска оказалось у верха экрана (плюс сжимает зазоры над плитками, body.dg-mega-compact ниже), чтобы места обычно хватало без скролла вовсе. Открытие — не translateY, как у .dg-anchored выше, а scale от transform-origin, который выставляет placeMegaAnchored() инлайном (X — под серединой открывшей кнопки): owner: "анимацию как будто мегаменю расширяется/растягивается из соответствующей кнопки". */ .dg-sheet.dg-anchored.dg-mega { position: absolute; max-height: none; transform: scale(0.35); transition: transform 0.22s var(--dg-ease), opacity 0.16s ease; } .dg-sheet.dg-anchored.dg-mega.show { transform: scale(1); } .dg-mega .dg-sheet-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 28px; align-items: start; } /* #dg-mega (id), not .dg-mega (class): .dg-sheet .dg-sheet-body (overflow-y:auto, further down this file) has the SAME class-only specificity and comes AFTER this rule in source order, so a same-specificity .dg-mega override here would silently lose (same trap as the comment on #dg-mega .dg-sheet-row above) — bumped to an id selector to win for real. */ #dg-mega .dg-sheet-body { overflow-y: visible; max-height: none; } /* A later un-headed cluster inside a "blocks" group (owner: "не выделяй suttacentral в отдельный" — SC/Vinaya/Voice/Legacy etc. share the Collections header, split from the block above them by a quiet rule only, never a made-up sub-title). */ .dg-mega-block-divider { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--dg-border); } .dg-mega-col { min-width: 0; } /* Owner: "скролл не нужен был по максимуму" — Patimokkha+Prātimokṣa (10 пунктов с описаниями, владелец явно просил их держать в одной колонке) остаются самой высокой колонкой независимо от числа колонок в сетке; единственный оставшийся рычаг — плотность самой строки. Сужаем только внутри мега-меню (.dg-sheet-row/.dg-group-title — общие классы с нижней шторкой, её не трогаем). :first-child здесь переопределяет общее .dg-group-title:first-child (метит первый заголовок ВСЕЙ шторки) — в колонках первый заголовок должен быть без верхнего отступа у КАЖДОЙ колонки, а не только у первой. */ /* #dg-mega (id), not .dg-mega (class): the generic .dg-sheet-row/.dg-row-desc/.dg-group-title rules a bit further down this file have the SAME class-only specificity and come AFTER these in source order, so a same-specificity .dg-mega override here was silently losing the cascade (measured live: padding stayed 11px, not 7px) — the id bumps specificity past that, no reordering needed. */ #dg-mega .dg-sheet-row { padding: 7px 0; } /* Owner: "описание идёт отдельной строчкой снизу... всё удлиняется чуть ли не в два раза" — desc back to inline (its default as a , before the generic .dg-sheet rule below forces it to its own line) with a quiet separator, same row, no line break — label stays bright (inherits the row's normal text color), desc stays dim (--dg-text-2 further down). Cuts most rows back to one line, which also does more for "скролл не нужен был по максимуму" than the padding trim above ever could. */ #dg-mega .dg-row-desc { display: inline; margin-top: 0; } #dg-mega .dg-row-desc::before { content: " \00b7 "; color: var(--dg-text-muted); } #dg-mega .dg-group-title { margin: 1.4em 0 0.6em; } .dg-mega-col .dg-group-title:first-child { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .dg-sheet, #dg-sheet-backdrop { transition: none; } } .dg-sheet .dg-sheet-handle { width: 34px; height: 3.5px; border-radius: 3px; background: var(--dg-border-strong); margin: 9px auto 2px; flex: none; } @media (min-width: 768px) { .dg-sheet .dg-sheet-handle { display: none; } } .dg-sheet .dg-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 8px 18px 4px; flex: none; } .dg-sheet .dg-sheet-head h2 { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--dg-text); } .dg-sheet .dg-sheet-close { border: none; background: transparent; color: var(--dg-text-2); font-size: 1.3rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer; } .dg-sheet .dg-sheet-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px 18px 10px; border-bottom: 1px solid var(--dg-border); flex: none; } .dg-sheet .dg-sheet-tabs button { flex: none; font-size: 0.74rem; font-weight: 600; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--dg-border); color: var(--dg-text-2); background: var(--dg-surface); cursor: pointer; } .dg-sheet .dg-sheet-tabs button.on { background: var(--dg-accent-bg); border-color: var(--dg-accent); color: var(--dg-accent); } .dg-sheet .dg-sheet-body { overflow-y: auto; padding: 4px 18px 22px; flex: 1 1 auto; } /* Owner: "если место позволяет нужно чтобы футер... был внизу" — the About sheet's own contacts block (openAbout(), search/js/home.js) is a flex column so short content (a small viewport's worth or less) pins "Контакты"+icons+"Powered by"+copyright to the bottom of the sheet instead of floating right under "Приложения и расширения"; long content still just scrolls normally, margin-top:auto only pushes down as far as there's actual leftover space. */ .dg-sheet-body.dg-about { display: flex; flex-direction: column; } .dg-sheet-body.dg-about #contacts { margin-top: auto; } /* Settings page embedded as a slide-in sheet (owner: "настройки должны выезжать как меню тайлов в мобильном, а не как отдельная страница" → "и на десктопе тоже, так красивее и функциональнее") — reuses the same .dg-sheet chrome as the multitool tile sheet, but hosts the real /settings/ page in an iframe instead of a rendered link list, so there's exactly one settings implementation. dg-wide (home.js): same 920px floating-card width as the About sheet on desktop — owner explicitly wants it to still READ as a sheet there, not a full page ("а-то меню не отличить от полной страницы"); iframe/body sizing below is shared, only the position/size override just under it is mobile-only ("на мобильных пусть занимает всю страницу"). */ /* height:100% on the iframe (a percentage against a flex-item ancestor whose own height comes from flex-grow, not an explicit value) doesn't reliably resolve in Chromium — confirmed live: at some window sizes the iframe silently fell back to the UA default 150px, leaving most of the sheet blank (owner screenshot, incognito/no-cache — not a caching artifact). Absolute-fill instead: position:relative on the body makes it the containing block, inset:0 on the iframe sizes it directly from that box's padding edges, without depending on percentage-height resolution at all. */ .dg-sheet.dg-settings-embed .dg-sheet-body { padding: 0; overflow: hidden; min-height: 0; position: relative; } .dg-sheet.dg-settings-embed .dg-sheet-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Settings = full-height side panel on the right at EVERY width (owner: "на всех открывать так, просто на каких-то ничего не будет видно от старой страницы"). Wide screens keep the live page visible and scrollable beside it (backdrop is transparent, see openSettingsSheet()); below 460px the panel is simply the whole screen. Selectors out-rank the generic .dg-sheet breakpoint rules (left:50% + translate(-50%)). */ .dg-sheet.dg-settings-embed, .dg-sheet.dg-settings-embed.show { top: 0; right: 0; bottom: 0; left: auto; width: min(460px, 100%); height: 100%; max-height: none; min-height: 0; border: 0; border-left: 1px solid var(--dg-border-strong); border-radius: 0; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18); } .dg-sheet.dg-settings-embed { transform: translateX(100%); } .dg-sheet.dg-settings-embed.show { transform: translateX(0); } .dg-sheet.dg-settings-embed .dg-sheet-handle { display: none; } /* Below 768px there is no useful room for the page beside the panel (only a strip of it stuck out, owner; at 820px the side panel is still fine) — the panel is centered over a dimmed page instead (backdrop: openSettingsSheet()). Same 768px as home.js and settings/index.html (sample folded only when the page is visible) and the site's other sheet breakpoint above. */ @media (max-width: 767px) { .dg-sheet.dg-settings-embed, .dg-sheet.dg-settings-embed.show { left: 0; right: 0; margin: 0 auto; border-right: 1px solid var(--dg-border-strong); box-shadow: 0 0 32px rgba(0, 0, 0, 0.25); } .dg-sheet.dg-settings-embed { transform: translateY(100%); } .dg-sheet.dg-settings-embed.show { transform: translateY(0); } } /* Full-width panel: nothing beside it to separate from. */ @media (max-width: 480px) { .dg-sheet.dg-settings-embed, .dg-sheet.dg-settings-embed.show { border-left: 0; box-shadow: none; } } /* Заголовок набора отбит пустой строкой сверху и снизу — до правки он прилипал к предыдущему пункту и читался как его продолжение, а не как начало нового набора. */ .dg-sheet .dg-group-title { /* Owner: main menu items must read bigger than their sub-items, not smaller — was 0.72rem against .dg-sheet-row's 0.95rem (below), backwards from the intended hierarchy. Also covers #dg-mega (desktop mega-menu), which only overrides margin, not font-size. */ font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dg-text-muted); margin: 2em 0 1em; } .dg-sheet .dg-group-title:first-child { margin-top: 0.8em; } .dg-sheet .dg-sheet-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 0.95rem; color: var(--dg-text); text-decoration: none; border-bottom: 1px solid var(--dg-border); cursor: pointer; } .dg-sheet .dg-sheet-row:last-child { border-bottom: none; } .dg-sheet .dg-sheet-row:hover { color: var(--dg-accent-ink); } .dg-sheet .dg-sheet-row .dg-row-icon { width: 17px; height: 17px; flex: none; color: var(--dg-text-muted); } .dg-sheet .dg-sheet-row .dg-row-label { flex: 1; min-width: 0; } .dg-sheet .dg-sheet-empty { font-size: 0.82rem; color: var(--dg-text-muted); padding: 14px 0; } /* Пояснение под названием ссылки — «что это вообще такое». Проставлено пока не всем пунктам, а первым в каждом наборе (поле desc в menu-links.json): по ним и видно, чем набор занимается. */ .dg-sheet .dg-sheet-row { align-items: flex-start; } .dg-sheet .dg-sheet-row .dg-row-icon { margin-top: 2px; } /* Пояснение — второй по важности текст строки, а не сноска: мелким его просто не читали. Цвет тоже подняли до --dg-text-2: muted на светлом фоне давал слишком блёклую строку. */ .dg-sheet .dg-row-desc { display: block; margin-top: 3px; font-size: 0.84rem; line-height: 1.45; color: var(--dg-text-2); } /* Вкладка-ссылка в шапке шторки: те плитки, у которых нет своего списка (Читать Pāḷi, История). Это НЕ переключение набора, а прямое действие — помечаем стрелкой и не даём состояние "on". */ .dg-sheet .dg-sheet-tabs button.dg-tab-link::after { content: " ↗"; font-size: 0.68rem; opacity: 0.7; } /* ============================================================================ Быстрые настройки (шестерёнка-молния). Отдельная шторка: наполнение зависит от состояния страницы, поэтому она перерисовывается при каждом открытии. ============================================================================ */ .dg-sheet .dg-qs-note { margin: 6px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--dg-text-muted); } .dg-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--dg-border); background: transparent; color: var(--dg-text); font-family: var(--dg-font); font-size: 0.85rem; text-align: left; cursor: pointer; } .dg-toggle-row:last-child { border-bottom: none; } .dg-toggle-row .dg-toggle-label { flex: 1; min-width: 0; } .dg-toggle-row .dg-toggle-label small { display: block; font-size: 0.72rem; color: var(--dg-text-muted); } /* Owner: "нужно чтобы это было видимо пользователю что есть горячие клавиши" — inline next to the label, not its own line (unlike .dg-toggle-label small above, that's a sub-description). */ .dg-toggle-hotkey { font-size: 0.7rem; font-weight: 400; color: var(--dg-text-muted); } /* Переключатель — свой, а не .form-switch Bootstrap: тот тянет за собой свою палитру и размеры, которые в шторке смотрятся крупнее всего остального. */ .dg-tgl { position: relative; width: 34px; height: 20px; flex: none; border-radius: 10px; background: var(--dg-surface-hover); border: 1px solid var(--dg-border-strong); transition: background-color 0.18s ease, border-color 0.18s ease; } .dg-tgl::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--dg-surface); border: 1px solid var(--dg-border-strong); transition: transform 0.18s var(--dg-ease); } .dg-toggle-row[aria-pressed="true"] .dg-tgl { background: var(--dg-accent); border-color: var(--dg-accent); } .dg-toggle-row[aria-pressed="true"] .dg-tgl::after { transform: translateX(14px); border-color: transparent; } /* Переключатель «одно из нескольких». Размеры по макету: кнопки крупнее прежних — в них попадают пальцем, а не курсором. Выбранное — нейтральной заливкой, не акцентной: акцент в этом экране закреплён за действиями, а выбранный пункт действием не является. */ /* Same gotcha as the other [hidden] patches in this file (#dg-loading, .dg-scope-list, ...): `display:flex` below beats the browser's own `[hidden]{display:none}` on a specificity tie (author origin wins over user-agent) — dictModePicker()'s language seg staying .hidden did nothing visible without this. */ .dg-segmented[hidden] { display: none; } .dg-segmented { display: flex; margin: 8px 0 2px; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); overflow: hidden; } .dg-segmented button { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: 0; padding: 10px 6px; border: 0; background: var(--dg-surface); color: var(--dg-text-2); font-family: var(--dg-font); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } /* Подпись рядом со значком на узком экране может не помещаться — сжимается она, а значок остаётся целым: по нему вариант и узнают. */ .dg-segmented button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dg-seg-ic { width: 14px; height: 14px; flex: none; } .dg-segmented button[aria-pressed="true"] .dg-seg-ic { color: var(--dg-accent-ink); } /* На узком экране трети переключателя не хватало на «Light» рядом со значком — подпись обрезалась многоточием (замерено на 375px). Ужимаем отступы и кегль, а не значок. */ @media (max-width: 420px) { .dg-segmented button { gap: 5px; padding: 10px 3px; font-size: 0.76rem; } } .dg-segmented button:hover { background: var(--dg-surface-hover); } .dg-segmented button[aria-pressed="true"] { background: var(--dg-surface-active); color: var(--dg-text); } /* issue #5: font-size stepper in the drawer, right under the theme switch — owner ask: same style as the En/Ru and theme .dg-segmented switches. #dg-fontsize-ctrl carries class="dg-segmented" itself (search/index.html) for the shared border/radius/flex container. Owner: three EQUAL thirds ("−" / "100%" / "+"), same as .dg-segmented button's own flex:1 — no cell-level width override needed for that part, .dg-fontsize-val only needs its own look (no hover/pointer, muted color) since it isn't a button. */ #dg-fontsize-ctrl .dg-fontsize-btn { font-size: 1.2rem; font-weight: 700; } #dg-fontsize-ctrl .dg-fontsize-btn:disabled { opacity: 0.4; cursor: not-allowed; } #dg-fontsize-ctrl .dg-fontsize-btn:disabled:hover { background: var(--dg-surface); color: var(--dg-text-2); } #dg-fontsize-ctrl .dg-fontsize-val { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--dg-font); font-size: 0.82rem; font-weight: 600; color: var(--dg-text-2); border-left: 1px solid var(--dg-border); border-right: 1px solid var(--dg-border); } /* ============================================================================ Область поиска — раскрывающийся список с галочками Восемь переключателей подряд занимали пол-экрана и открывались на каждый запрос. Переключатель вообще про «включить режим»; здесь же выбирают из набора, где обычно отмечено почти всё, — а это галочки. Свёрнутая строка показывает выбранное («DN, MN, SN, AN, KN»), и чаще всего разворачивать не приходится вовсе. ============================================================================ */ .dg-scope { margin: 8px 0 2px; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); background: var(--dg-surface); overflow: hidden; } .dg-scope-group + .dg-scope-group { border-top: 1px solid var(--dg-border); } /* Строка группы: галка, название, счётчик «сколько из скольких», кнопка раскрытия. Счётчик тут вместо перечисления — он и сообщает, выбрана группа целиком, частично или вовсе нет. */ .dg-scope-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-family: var(--dg-font); font-size: 0.92rem; color: var(--dg-text); } /* font-size: inherit — assets/css/extrastyles.css (legacy, shared) sets a global `label { font-size: 20px }` that otherwise wins over inheriting .dg-scope-head's 0.92rem, since an explicit rule on the element itself beats inheritance regardless of specificity. Same trap as .dg-check-row below, which already has its own font-size for the same reason. */ .dg-scope-label { flex: 1; min-width: 0; cursor: pointer; font-size: inherit; } .dg-scope-count { flex: none; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--dg-text-muted); } .dg-scope-group.dg-some .dg-scope-count { color: var(--dg-accent-ink); } .dg-scope-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dg-text-muted); cursor: pointer; } .dg-scope-toggle:hover { background: var(--dg-surface-hover); color: var(--dg-text); } .dg-scope-chev { transition: transform 0.18s var(--dg-ease); } .dg-scope-group.dg-open .dg-scope-chev { transform: rotate(180deg); } /* Под-пункты с отступом — видно, что они принадлежат группе, а не идут с ней вровень. */ .dg-scope-list { padding: 0 12px 8px 34px; } .dg-scope-list[hidden] { display: none; } .dg-check-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.92rem; color: var(--dg-text); cursor: pointer; } /* Галочка — родная, только перекрашенная в акцент: свои квадратики пришлось бы отдельно учить доступности (фокус, клавиатура, screen reader), а accent-color даёт всё это даром. Селектор с двумя классами и элементом — ответ на `label input[type="checkbox"] {display:none}` из assets/css/extrastyles.css (общий файл, его не трогаем). Из-за него галки под-пунктов, а они лежат ВНУТРИ