/* Домашний экран страницы поиска — минималистичный скин. * * 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. */ html, body { overflow-x: hidden; } /* 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)); } } 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; --dg-radius: 10px; --dg-font: var(--bs-body-font-family); --dg-ease: cubic-bezier(0.22, 0.68, 0, 1); /* Боковое поле страницы: столько добавляет .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-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; } /* ============================================================================ Показ/скрытие домашних блоков. Схлопывание через max-height + opacity, а не display:none — display не анимируется, а нам нужно, чтобы при уходе в выдачу шапка и плитки СЖИМАЛИСЬ, поднимая инпут вверх, а не исчезали рывком. max-height заведомо больше реальной высоты; overflow:hidden прячет остаток во время перехода. Шторки живут отдельно, в конце , и под это схлопывание не попадают. ============================================================================ */ #home-motto, #home-hint, #home-pane { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: max-height 0.34s var(--dg-ease), opacity 0.22s ease, transform 0.34s var(--dg-ease), margin 0.34s var(--dg-ease); margin: 0; } body.dg-state-home #home-motto, body.dg-state-home #home-hint, body.dg-state-home #home-pane { opacity: 1; transform: none; pointer-events: auto; } /* Отступ инпута от шапки — раньше держался целиком на #home-motto (девиз стоял отдельной строкой прямо над .hero-row, его margin и был этим воздухом). Owner: девиз переехал в #dg-topbar (round 3 правки выше), а инпут не должен был сдвигаться — теперь отступ здесь, на самой .hero-row, независимо от того, где физически стоит текст девиза. */ body.dg-state-home .hero-row { margin-top: 74px; } 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: 640px; } 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 { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; background: none; } body.dg-state-home #dg-hero-band { /* Съедаем .mt-2 родителя: полоса должна начинаться от самого верха окна, иначе над ней остаётся белая щель в 8px и она перестаёт читаться как шапка. */ margin-top: -0.5rem; padding-bottom: 30px; background: linear-gradient(165deg, var(--dg-navy) 0%, var(--dg-navy) 38%, var(--dg-accent-dark) 100%); } .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). ============================================================================ */ /* Сетка «1fr auto 1fr», а не flex со space-between (owner: "сделай чтобы Find the Truth был в центре страницы"): при space-between девиз вставал в середину ОСТАТКА между вывеской и бургером, а вывеска заметно шире бургера — то есть левее центра страницы. Одинаковые боковые колонки ставят среднюю ровно по центру полосы, независимо от ширины вывески. */ #dg-topbar { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; padding: 16px 0 0; font-family: var(--dg-font); } body.dg-state-home #dg-topbar { display: grid; } /* Вывеска и бургер — по краям своих боковых колонок (по умолчанию grid растянул бы их на всю колонку, и бургер уехал бы от правого края). */ #dg-topbar > #dg-brand { justify-self: start; } #dg-topbar > .dg-menu-btn { justify-self: end; } /* На телефоне — как было до центрирования, flex со space-between (owner: "откати про Find the Truth на мобильном, слишком близко стало к логотипу"). Там лого крупное и на всю ширину места мало: центр страницы приходится почти вплотную к нему, и девиз слипался с вывеской. Ширина экрана решает больше, чем формальная симметрия. */ @media (max-width: 767.98px) { body.dg-state-home #dg-topbar { display: flex; justify-content: space-between; } } /* Бургеров в разметке два — в шапке и рядом с полем: перенести один элемент между строками средствами 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: 0.55rem; text-decoration: none; color: var(--dg-text); } #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, не трогает базовый размер, которым пользуются другие места (боковое меню ниже). */ /* Owner: "ещё крупнее на 30%" — 37px × 1.3 ≈ 48px. Owner: "покрупнее на 50%" — 48px × 1.5 = 72px. */ #dg-brand .dg-brand-logo { width: 72px; height: 72px; } /* Owner: "на мобильной вёрстке только лого ещё крупнее, размером как на проде" — matches the legacy PHP site's actual header logo (measured live, dhamma.gift/read.php: rendered width:100px, height auto ≈58px — same source image, its own natural ratio 688:399, not letterboxed into a square like the 72×72 box above). */ @media (max-width: 767px) { #dg-brand .dg-brand-logo { width: 100px; height: 58px; } /* Owner: "на мобильном вообще не должно быть надписи Dhamma gift только крупное лого" — drop the wordmark text entirely on mobile, logo alone carries the brand there. */ #dg-brand .dg-brand-name { display: none; } } /* Маленькая копия лого в шапке бокового меню — там та же история со светлыми лепестками. */ .dg-drawer-head .dg-brand-logo { width: 26px; height: 26px; } .dg-brand-name { font-size: 1rem; 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 { 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 { 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); } /* На полосе поле — светлая карточка, лежащая ПОВЕРХ тёмного фона: не пилюля, а прямоугольник со скруглением 10px и заметной тенью (так в макете). Тень обязательна: без неё карточка сливается с нижним, уже позеленевшим краем градиента. */ /* Скругление — то же, что у поля в выдаче и в чтении (28px у .dg-input-shell выше): прямоугольник с радиусом 10 из макета рядом с остальным сайтом смотрелся чужим. На главной поле только крупнее и с тенью — оно лежит поверх тёмной полосы и должно от неё отделяться. */ body.dg-state-home .dg-input-shell { padding: 11px 11px 11px 16px; border-color: transparent; box-shadow: 0 6px 18px rgba(15, 20, 15, 0.18); } body.dg-state-home .dg-input-shell:focus-within { border-color: transparent; box-shadow: 0 6px 18px rgba(15, 20, 15, 0.22), 0 0 0 3px rgba(255, 255, 255, 0.28); } /* Порядок справа: сперва быстрые настройки, потом лупа. Лупа — последняя кнопка строки, у самого края: это действие «искать», и оно завершает ввод. Разделитель между «очистить» и парой кнопок на главной не нужен — там и так просторно. */ body.dg-state-home .dg-shell-sep { display: none; } /* Ракушка внутри поля — только в выдаче и в чтении: на главной знак и название уже стоят в шапке. Она же кнопка «домой». */ body .dg-shell-logo { display: none; flex: none; line-height: 0; text-decoration: none; } body.dg-state-results .dg-shell-logo, body.dg-state-reader .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; } /* Разделитель перед блоком кнопок справа — как в строке поиска у поисковиков. */ .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; } @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: 1.12rem; } 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 по той же причине, что и у полосы: цвет здесь меняет СОСТОЯНИЕ страницы, а не наведение, и не должен зависеть от того, рисует ли вкладка кадры. */ body.dg-state-home .dg-shell-go, body:not(.dg-state-home) .dg-shell-go { transition: none; } body.dg-state-home .dg-shell-go { background: var(--dg-navy); color: #fff; width: 34px; height: 34px; } body.dg-state-home .dg-shell-go:hover, body.dg-state-home .dg-shell-go:focus-visible { background: var(--dg-navy-2); color: #fff; } body.dg-state-home .dg-shell-go .dg-search-icon { width: 19px; height: 19px; } /* Ожидание ответа поиска: пока крутится спиннер, выдачи (даже пустой) быть не должно — ради этого весь класс и заведён. Домашние блоки при этом НЕ прячем: смысл в том, чтобы человек остался на главной, а не смотрел в пустоту. */ body.dg-busy #results-toolbar, body.dg-busy #results-divider, body.dg-busy #search-pane, body.dg-busy #reader-pane { 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 { 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; } /* Owner: "toc и фильтр переводчиков разлетались в свои стороны... в центре была бы сутта уже ридер режим" — сутта "вырастает" из центра, пока TOC/фильтр разлетаются по бокам (см. .dg-toc-leaving ниже). Анимация переигрывается только при ПЕРЕХОДЕ в ридер (display:none → block снимает и заново вешает CSS-анимацию), а не при переключении между суттами внутри уже открытого ридера — dgSetState() рано выходит, если dg-state-reader уже стоял (search/index.html), так что #reader-pane всё это время остаётся block и анимация не перезапускается. */ @keyframes dg-reader-enter { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } body.dg-state-reader #reader-pane { display: block; animation: dg-reader-enter .28s var(--dg-ease); } @media (prefers-reduced-motion: reduce) { body.dg-state-reader #reader-pane { 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; } .toc-aside { flex: 0 0 260px; position: sticky; top: 1rem; border: 1px solid var(--dg-border); border-radius: var(--dg-radius, 10px); padding: .75rem .9rem; background: var(--dg-surface); } /* Owner: "toc и фильтр переводчиков разлетались в свои стороны" — played by toc.js right before navigating to a sutta (window.dgNavigateInternal), timed to finish before dg-state-toc→reader switches #toc-pane to display:none (which would otherwise cut the animation off mid-flight — see .dg-toc-leaving's duration mirrored in toc.js's setTimeout). Skipped when reduced motion is requested — toc.js checks prefers-reduced-motion itself and navigates immediately instead of adding this class. */ .toc-main, .toc-aside { transition: transform .28s var(--dg-ease), opacity .28s ease; } .toc-layout.dg-toc-leaving .toc-main { transform: translateX(-40px); opacity: 0; } .toc-layout.dg-toc-leaving .toc-aside { transform: translateX(40px); opacity: 0; } .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; } /* 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