/* ============================================================ * LEMANN MOBILE UI — стили мобильной версии читалки * * Файл: /wp-content/mu-plugins/lemann-mobile/mobile.css * Подключается plugin'ом lemann-mobile.php через wp_enqueue_style. * Работает только на . * ============================================================ */ /* ========================================================= * АНТИ-FLASH: пока JS не пометил body.lr-ready, скрываем * проблемные элементы верхней панели, nav глав и попапов — * чтобы они не мигали в "сыром" виде перед нашей обработкой. * JS добавит класс lr-ready через waitForReader() когда v60 * полностью инициализируется и мы успеем перехватить стили. * ========================================================= */ body.lr-mobile:not(.lr-ready) .top-panel, body.lr-mobile:not(.lr-ready) .chapter-nav-top, body.lr-mobile:not(.lr-ready) .chapter-nav-bottom, body.lr-mobile:not(.lr-ready) .settings-panel, body.lr-mobile:not(.lr-ready) .toc-panel, body.lr-mobile:not(.lr-ready) #purchaseOverlay, body.lr-mobile:not(.lr-ready) .lr-related-custom, body.lr-mobile:not(.lr-ready) .book-header { visibility: hidden !important; } /* ANTI-FLASH для бейджей v60 (всплывающие "Шрифт: Merriweather", "Размер: 15px" и т.д.). v60 кидает их при каждом applySetting — при загрузке и при применении V30-дефолтов получается много «мусорных» бейджей. Скрываем пока не поставим lr-badges-ready через setTimeout 5000мс. Селекторы регистронезависимые, ловят любые id/class с «badge»/«toast»/«notif». */ body.lr-mobile:not(.lr-badges-ready) #badge, body.lr-mobile:not(.lr-badges-ready) .bps-badge, body.lr-mobile:not(.lr-badges-ready) .reader-badge, body.lr-mobile:not(.lr-badges-ready) [id*="badge" i], body.lr-mobile:not(.lr-badges-ready) [class*="badge" i], body.lr-mobile:not(.lr-badges-ready) [id*="toast" i], body.lr-mobile:not(.lr-badges-ready) [class*="toast" i], body.lr-mobile:not(.lr-badges-ready) [id*="notif" i], body.lr-mobile:not(.lr-badges-ready) [class*="notif" i] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ИСКЛЮЧЕНИЯ: наши собственные элементы шапки читалки не должны случайно попасть под CSS-фильтр бейджей. Перебиваем селекторами выше. */ body.lr-mobile:not(.lr-badges-ready) .book-header-age, body.lr-mobile:not(.lr-badges-ready) .book-header-price { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Глушим v60-шный встроенный 18+ бейдж который он рисует ПОВЕРХ обложки (он задан `position:absolute` с правой стороны .cover-wrapper и вылезает при загрузке прежде чем наш inline-style подоспеет). Наш 18+ в инфо-блоке уже есть, дубль на обложке не нужен. */ body.lr-mobile .book-header .cover-wrapper .age-badge, body.lr-mobile .book-header .cover-wrapper .cover-age, body.lr-mobile .book-header .cover-wrapper .age-marker, body.lr-mobile .book-header .cover-wrapper [class*="age"], body.lr-mobile .book-header .cover-wrapper [class*="Age"] { display: none !important; visibility: hidden !important; } body.lr-mobile.lr-ready .top-panel, body.lr-mobile.lr-ready .chapter-nav-top, body.lr-mobile.lr-ready .chapter-nav-bottom, body.lr-mobile.lr-ready .settings-panel, body.lr-mobile.lr-ready .toc-panel, body.lr-mobile.lr-ready .lr-related-custom, body.lr-mobile.lr-ready .book-header { visibility: visible !important; animation: lr-fade-in 0.25s ease !important; } @keyframes lr-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ * ЧАСТЬ 2: ШАПКА v30 * ============================================================ */ body.lr-mobile .top-panel-center { display: none !important; } body.lr-mobile .top-panel-left, body.lr-mobile .top-panel-right { display: contents !important; } body.lr-mobile .top-panel { padding: 3px 6px !important; gap: 5px !important; flex-wrap: nowrap !important; align-items: center !important; background: #f0e4c6 !important; background-color: #f0e4c6 !important; z-index: 9999 !important; height: 42px !important; min-height: 42px !important; } /* Принудительно top:0 на мобилке — перебиваем v60-правило body.admin-bar.lr-active .top-panel { top: 46px } которое сдвигает шапку под WordPress admin-bar (на мобилке ненужен). */ body.lr-mobile .top-panel, body.lr-mobile.admin-bar .top-panel, body.lr-mobile.lr-active .top-panel, body.lr-mobile.admin-bar.lr-active .top-panel, html.admin-bar body.lr-mobile .top-panel, html.admin-bar body.lr-mobile.lr-active .top-panel { top: 0 !important; } /* Скрываем WordPress admin-bar на мобилке */ body.lr-mobile #wpadminbar { display: none !important; } html.lr-mobile, body.lr-mobile { margin-top: 0 !important; padding-top: 0 !important; } /* Фон шапки по темам (v60 переменная --panel-bg иногда не подхватывается) */ body.lr-mobile[data-theme="light"] .top-panel { background-color: #f5f2ea !important; } body.lr-mobile[data-theme="sepia"] .top-panel { background-color: #ead8b5 !important; } body.lr-mobile[data-theme="grey"] .top-panel { background-color: #d4d4d4 !important; } body.lr-mobile[data-theme="dark"] .top-panel { background-color: #2a2a2a !important; } body.lr-mobile[data-theme="medieval"] .top-panel { background-color: #1a1410 !important; } body.lr-mobile #btnGod, body.lr-mobile .top-panel .panel-btn[onclick*="resetSettings"], body.lr-mobile #btnTwoCol, body.lr-mobile #btnHeart, body.lr-mobile .top-panel .panel-btn[onclick*="toggleToc"] { display: none !important; } body.lr-mobile .top-panel .panel-btn[data-tooltip*="страниц"] { order: 1 !important; } body.lr-mobile #btnLibrary { order: 2 !important; display: inline-flex !important; } body.lr-mobile .top-panel .panel-btn[onclick*="toggleSettings"] { order: 3 !important; margin-left: auto !important; } body.lr-mobile .top-panel .panel-btn-icon[onclick*="toggleFullscreen"] { order: 4 !important; } body.lr-mobile .top-panel .login-btn { order: 5 !important; } body.lr-mobile .top-panel .panel-btn, body.lr-mobile .top-panel .panel-btn-icon { min-height: 34px !important; height: 34px !important; border-radius: 3px !important; border: 1.5px solid rgba(0,0,0,0.35) !important; background: rgba(255,255,255,0.45) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5) !important; } body.lr-mobile .top-panel .login-btn { min-height: 34px !important; height: 34px !important; border-radius: 3px !important; background: #2fa845 !important; border: 1.5px solid #288a38 !important; color: #ffffff !important; padding: 0 10px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 0.2px !important; gap: 5px !important; text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important; -webkit-text-fill-color: #ffffff !important; -webkit-font-smoothing: antialiased !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-shadow: 0 2px 6px rgba(47, 168, 69, 0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important; } body.lr-mobile .top-panel .login-btn, body.lr-mobile .top-panel .login-btn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-weight: 900 !important; } body.lr-mobile .top-panel .login-btn:hover, body.lr-mobile .top-panel .login-btn:active { background: #3bc556 !important; border-color: #2fa845 !important; } body.lr-mobile .top-panel .login-btn svg { stroke: #ffffff !important; stroke-width: 2.8 !important; } body.lr-mobile .top-panel .panel-btn { padding: 0 9px !important; font-size: 12px !important; font-weight: 500 !important; gap: 5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } /* Кнопка "Настройки" — компактнее, шрифт нормальный читаемый */ body.lr-mobile .top-panel .panel-btn[onclick*="toggleSettings"] { padding: 0 8px !important; font-size: 11px !important; gap: 4px !important; min-height: 34px !important; height: 34px !important; line-height: 1 !important; } body.lr-mobile .top-panel .panel-btn[onclick*="toggleSettings"] svg { width: 18px !important; height: 18px !important; } body.lr-mobile .top-panel .panel-btn-icon { width: 34px !important; padding: 0 !important; } body.lr-mobile .top-panel .panel-btn svg, body.lr-mobile .top-panel .panel-btn-icon svg, body.lr-mobile .top-panel .login-btn svg { width: 18px !important; height: 18px !important; stroke-width: 2.2 !important; flex-shrink: 0 !important; fill: none !important; stroke: currentColor !important; } body.lr-mobile .top-panel #btnLibrary svg, body.lr-mobile .top-panel #btnLibrary svg * { fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; } @media (max-width: 500px) { /* Только panel-btn — login-btn имеет свои отдельные стили выше */ body.lr-mobile .top-panel .panel-btn { font-size: 12px !important; padding: 0 10px !important; } body.lr-mobile .top-panel .panel-btn svg { width: 18px !important; height: 18px !important; } body.lr-mobile .top-panel { padding: 0 6px !important; gap: 4px !important; } } /* Совсем узкие экраны (<380) — уменьшаем только padding, текст "Назад" оставляем */ @media (max-width: 380px) { body.lr-mobile .top-panel .panel-btn[data-tooltip*="страниц"] { padding: 0 8px !important; font-size: 11px !important; } } /* ============================================================ * НИЖНЯЯ ПАНЕЛЬ ПРОГРЕССА — СКРЫТА НА МОБИЛКЕ * ============================================================ */ body.lr-mobile .bottom-bar { display: none !important; } body.lr-mobile .reader-content { padding-top: 90px !important; padding-bottom: 32px !important; } /* ============================================================ * ПОЛЯ (--content-width) — работают на мобилке * * V60 на мобилке перекрывает max-width у .reader-content на 100%, * из-за чего ползунок «Поля» не влияет на ширину текста. * Принудительно возвращаем использование --content-width. * ============================================================ */ body.lr-mobile .reader-content { max-width: min(var(--content-width, 900px), calc(100vw - 16px)) !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ * ЧАСТЬ 3: ПАНЕЛЬ НАСТРОЕК v30 (v9) * ============================================================ */ body.lr-mobile .settings-panel.lr-m-panel-wrap > *:not(.lr-m-settings) { display: none !important; } body.lr-mobile .settings-panel { top: auto !important; bottom: 12px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: 280px !important; width: calc(100vw - 24px) !important; padding: 0 !important; max-height: calc(100vh - 80px) !important; overflow: hidden !important; flex-direction: column !important; border-radius: 14px !important; border: 2px solid var(--accent, #8b6914) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32), 0 0 0 4px rgba(139, 105, 20, 0.12) !important; } body.lr-mobile .settings-panel.active { display: flex !important; } /* Glow-контур settings-panel по темам — цвет соответствует accent темы, чтобы подсветка хорошо читалась на каждом фоне. */ body.lr-mobile[data-theme="light"] .settings-panel, html body.lr-mobile[data-theme="light"] .settings-panel { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 0 0 4px rgba(107, 90, 46, 0.16) !important; } body.lr-mobile[data-theme="sepia"] .settings-panel, html body.lr-mobile[data-theme="sepia"] .settings-panel { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(138, 90, 32, 0.16) !important; } body.lr-mobile[data-theme="grey"] .settings-panel, html body.lr-mobile[data-theme="grey"] .settings-panel { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(85, 85, 85, 0.2) !important; } body.lr-mobile[data-theme="dark"] .settings-panel, html body.lr-mobile[data-theme="dark"] .settings-panel { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(201, 168, 76, 0.18) !important; } body.lr-mobile[data-theme="night"] .settings-panel, html body.lr-mobile[data-theme="night"] .settings-panel { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(201, 168, 76, 0.16) !important; } body.lr-mobile[data-theme="medieval"] .settings-panel, html body.lr-mobile[data-theme="medieval"] .settings-panel { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(212, 168, 76, 0.22) !important; } body.lr-mobile .lr-m-settings { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } body.lr-mobile .lr-m-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; border-bottom: 1px solid var(--panel-border); gap: 8px; flex-shrink: 0; } body.lr-mobile .lr-m-reset { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 28px; height: 28px; background: #4CAF50; color: #fff; border: none; border-radius: 50%; cursor: pointer; padding: 0; box-shadow: 0 2px 4px rgba(76, 175, 80, 0.35); transition: transform 0.12s, background 0.12s; line-height: 1; flex-shrink: 0; } body.lr-mobile .lr-m-reset > span:first-child { font-size: 12px; font-weight: 700; line-height: 1; } body.lr-mobile .lr-m-reset-label { font-size: 5.5px; font-weight: 700; letter-spacing: 0.04em; margin-top: 0; text-transform: lowercase; } body.lr-mobile .lr-m-reset:active { background: #43a047; transform: scale(0.94); } body.lr-mobile .lr-m-title { flex: 1 1 auto; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text); text-transform: uppercase; } body.lr-mobile .lr-m-close { width: 28px; height: 28px; background: #cc3333; color: #fff; border: none; border-radius: 50%; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(204, 51, 51, 0.35); transition: transform 0.12s, background 0.12s; flex-shrink: 0; position: relative; z-index: 5; } body.lr-mobile .lr-m-close svg { width: 12px; height: 12px; stroke: #fff; } body.lr-mobile .lr-m-close:active { background: #b82d2d; transform: scale(0.94); } body.lr-mobile .lr-m-body { padding: 6px; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 3px; } body.lr-mobile .lr-m-row { display: flex; align-items: center; padding: 4px 8px; gap: 6px; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 7px; min-height: 36px; } body.lr-mobile .lr-m-label { font-size: 11.5px; color: var(--text); font-weight: 600; flex: 0 0 auto; background: transparent; border: none; padding: 0; } body.lr-mobile .lr-m-control { display: flex; align-items: center; gap: 3px; flex: 0 0 140px; width: 140px; margin-left: auto; } body.lr-mobile .lr-m-btn, body.lr-mobile .lr-m-value { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 6px; height: 28px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95); } body.lr-mobile .lr-m-btn { width: 28px; flex: 0 0 28px; padding: 0; font-size: 14px; font-weight: 700; color: #333; cursor: pointer; line-height: 1; transition: background 0.12s, transform 0.12s, box-shadow 0.12s; } body.lr-mobile .lr-m-btn:active { background: var(--accent, #8b6914); color: #fff; border-color: var(--accent, #8b6914); transform: scale(0.92); } body.lr-mobile .lr-m-value { flex: 1 1 auto; min-width: 0; padding: 0 4px; font-size: 11.5px; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.lr-mobile .lr-m-value-text { font-size: 11px; } body.lr-mobile[data-theme="dark"] .lr-m-row, body.lr-mobile[data-theme="medieval"] .lr-m-row { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; } body.lr-mobile[data-theme="dark"] .lr-m-btn, body.lr-mobile[data-theme="dark"] .lr-m-value, body.lr-mobile[data-theme="medieval"] .lr-m-btn, body.lr-mobile[data-theme="medieval"] .lr-m-value { background: rgba(255, 255, 255, 0.92) !important; color: #222 !important; } /* ============================================================ * ЧАСТЬ 4: ОГЛАВЛЕНИЕ + НАВИГАЦИЯ МЕЖДУ ГЛАВАМИ * ============================================================ */ /* Кнопка «Главы» (toggleToc) из шапки уже скрыта выше — оглавление открывается через "≡ Оглавление" в chapter-nav-top. */ /* --- Chapter-nav-top: тонкая полоса под шапкой, без рамки и фона --- На эталоне v30 nav плавает на фоне страницы как цельный элемент с шапкой, без видимой границы. */ body.lr-mobile .chapter-nav-top { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; padding: 5px 12px !important; gap: 8px !important; font-size: 12px !important; margin: 0 !important; background: #e8dab5 !important; background-color: #e8dab5 !important; border: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important; border-bottom: 1px solid rgba(0,0,0,0.15) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important; position: fixed !important; top: 42px !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; z-index: 9998 !important; box-sizing: border-box !important; } /* Фон chapter-nav-top по темам — совпадает с фоном шапки */ body.lr-mobile[data-theme="light"] .chapter-nav-top { background-color: #f5f2ea !important; } body.lr-mobile[data-theme="sepia"] .chapter-nav-top { background-color: #ead8b5 !important; } body.lr-mobile[data-theme="grey"] .chapter-nav-top { background-color: #d4d4d4 !important; } body.lr-mobile[data-theme="dark"] .chapter-nav-top { background-color: #2a2a2a !important; } body.lr-mobile[data-theme="medieval"] .chapter-nav-top { background-color: #1a1410 !important; } body.lr-mobile .chapter-nav-top .ch-nav-link { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; padding: 6px 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: transparent !important; max-width: 100% !important; font-weight: 500 !important; } body.lr-mobile .chapter-nav-top .ch-prev { grid-column: 1 !important; justify-self: start !important; text-align: left !important; color: var(--text) !important; font-weight: 600 !important; } body.lr-mobile .chapter-nav-top .ch-toc { grid-column: 2 !important; justify-self: center !important; text-align: center !important; font-weight: 700 !important; color: var(--text) !important; } body.lr-mobile .chapter-nav-top .ch-next { grid-column: 3 !important; justify-self: end !important; text-align: right !important; color: var(--text) !important; font-weight: 600 !important; } /* Пустые prev/next: невидимы, но занимают место для симметрии */ body.lr-mobile .chapter-nav-top .ch-prev:empty, body.lr-mobile .chapter-nav-top .ch-next:empty { visibility: hidden !important; display: block !important; } /* --- Блок книги: Grid-раскладка --- */ body.lr-mobile.lr-active .book-header, body.lr-mobile .book-header { display: grid !important; grid-template-columns: 120px 1fr !important; grid-template-rows: auto auto !important; gap: 0 12px !important; padding: 0 8px 0 0 !important; margin: 0 !important; position: relative !important; align-items: start !important; flex-direction: initial !important; text-align: left !important; } /* Обложка — в ВЫПУКЛОЙ обёртке (такой же «кант» как у инфо и аннотации). Картинка сидит внутри, не вылезает за рамку. (перебиваем v60-правило body.lr-active #coverImg { width:220px }) */ body.lr-mobile.lr-active .book-header .cover-wrapper, body.lr-mobile .book-header .cover-wrapper { grid-column: 1 !important; grid-row: 1 !important; width: 120px !important; max-width: 120px !important; min-width: 120px !important; height: 175px !important; flex: none !important; padding: 3px !important; margin: 0 !important; position: relative !important; align-self: start !important; box-sizing: border-box !important; background: rgba(0,0,0,0.025) !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 7px !important; overflow: hidden !important; box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.035) inset, 0 1px 3px rgba(0,0,0,0.08) !important; } body.lr-mobile.lr-active .book-header #coverImg, body.lr-mobile.lr-active .book-header .cover-wrapper img, body.lr-mobile.lr-active #coverImg, body.lr-mobile .book-header #coverImg, body.lr-mobile .book-header .cover-wrapper img, body.lr-mobile #coverImg, body.lr-mobile img#coverImg, html body.lr-mobile #coverImg, html body.lr-mobile .book-header .cover-wrapper img { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; max-height: 100% !important; border-radius: 4px !important; object-fit: cover !important; display: block !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; } /* Инфо справа — «ВЫПУКЛАЯ КНОПКА» как у Настроек в верхней панели: inset highlight сверху + тень снизу + мягкая светлая аура вокруг. Высотой РОВНО в обложку (175px). flex-column без justify-content: элементы текут сверху вниз, 18+ получает margin-top:auto и прижимается к нижнему краю обложки. */ body.lr-mobile.lr-active .book-header-info, body.lr-mobile .book-header-info { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; text-align: left !important; padding: 10px 12px !important; margin: 0 !important; align-self: start !important; height: 175px !important; box-sizing: border-box !important; justify-content: flex-start !important; position: relative !important; background: rgba(0,0,0,0.025) !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 7px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.035) inset, 0 1px 3px rgba(0,0,0,0.08) !important; } /* Бейдж 18+/16+ — КОМПАКТНЫЙ: мелкий шрифт и плотный padding, чтобы оставлять больше места сверху для названия с зазором. Идёт последним в нижнем стеке (автор → формат → знаки → 18+). К низу его приклеивает margin-top:auto на .book-header-author (см. выше). */ body.lr-mobile .book-header-age, html body.lr-mobile .book-header-age { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 1px 8px !important; align-self: flex-start !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.3 !important; min-height: 0 !important; max-height: 20px !important; border-radius: 999px !important; } /* Цена — ФИСТАШКОВАЯ ПИЛЮЛЯ в правом нижнем углу инфо-блока. Зеркало к 18+ бейджу (он слева внизу). Данные из LEMANN_BOOK.price. Требует position:relative у родителя .book-header-info (уже задано). */ body.lr-mobile.lr-active .book-header-price, body.lr-mobile .book-header-price { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; bottom: 9px !important; right: 10px !important; padding: 2px 10px !important; background: #d4e5b8 !important; border: 1px solid #9caf88 !important; border-radius: 999px !important; color: #3e5a22 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; white-space: nowrap !important; text-decoration: none !important; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 2px rgba(0,0,0,0.08) !important; -webkit-tap-highlight-color: transparent !important; z-index: 2 !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; margin: 0 !important; } /* Тёмные темы — зелёный посветлее на чёрном фоне */ body.lr-mobile[data-theme="dark"] .book-header-price, body.lr-mobile[data-theme="night"] .book-header-price, body.lr-mobile[data-theme="medieval"] .book-header-price { background: rgba(148, 176, 98, 0.22) !important; border-color: rgba(148, 176, 98, 0.55) !important; color: #c7d9a0 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.4) !important; } /* Название — ШРИФТ КАК В ОГЛАВЛЕНИИ (системный sans-serif), компактный. 4 строки line-clamp + font-size 14.5px: вмещается любое длинное название включая «Шейх. ЦВЕТОК ПОБЕРЕЖЬЯ (КНИГА ВТОРАЯ)» без обрезки. font-weight 700 — пожирнее автора, но читается легко (как Оглавление). */ body.lr-mobile.lr-active .book-header-title, body.lr-mobile .book-header-title, body.lr-mobile .book-header .book-header-title, html body.lr-mobile .book-header-title, html body.lr-mobile .book-header .book-header-info .book-header-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; text-align: left !important; line-height: 1.2 !important; margin: 0 0 6px 0 !important; padding: 0 !important; padding-top: 0 !important; margin-top: 0 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; white-space: normal !important; color: var(--text) !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Автор — СТРОГО В ОДНУ СТРОКУ, шрифт как у формата/знаков. Насыщенный синий. display: inline-block + width: fit-content: ширина блока = ширине текста, поэтому любое подчёркивание (v60 может навесить) видно только под буквами, а не на всю колонку. Если имя длиннее колонки — ellipsis. Прижат к низу через margin-top:auto (flex-trick). align-self: flex-start: не растягиваемся на всю ширину flex-колонки. */ body.lr-mobile.lr-active .book-header-author, body.lr-mobile .book-header-author, body.lr-mobile .book-header-author a, html body.lr-mobile .book-header-author, html body.lr-mobile .book-header-author a { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; text-align: left !important; padding: 0 !important; padding-right: 0 !important; color: #2e6ba5 !important; text-decoration: underline !important; text-decoration-line: underline !important; text-decoration-style: dotted !important; text-decoration-color: rgba(46, 107, 165, 0.5) !important; text-decoration-thickness: 1px !important; text-underline-offset: 2px !important; border-bottom: none !important; border: none !important; box-shadow: none !important; background-image: none !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; line-height: 1.3 !important; } body.lr-mobile.lr-active .book-header-author, body.lr-mobile .book-header-author, html body.lr-mobile .book-header-author { margin-top: auto !important; margin-bottom: 2px !important; display: inline-block !important; width: auto !important; max-width: 100% !important; align-self: flex-start !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Тёмные темы — светлее синий для контраста */ body.lr-mobile[data-theme="dark"] .book-header-author, body.lr-mobile[data-theme="night"] .book-header-author, body.lr-mobile[data-theme="medieval"] .book-header-author, body.lr-mobile[data-theme="dark"] .book-header-author a, body.lr-mobile[data-theme="night"] .book-header-author a, body.lr-mobile[data-theme="medieval"] .book-header-author a { color: #7eb3e0 !important; } /* Формат и знаки — sans-serif, серые, идут за автором в нижнем стеке */ body.lr-mobile .book-header-format, body.lr-mobile .book-header-chars { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; text-align: left !important; margin-bottom: 2px !important; color: var(--muted) !important; } /* Аннотация — «ВЫПУКЛАЯ КНОПКА» как инфо-блок и обложка, ПАРА к шапке. Компактнее: меньше padding, меньше шрифт. */ body.lr-mobile.lr-active .book-header-annotation, body.lr-mobile .book-header-annotation { grid-column: 1 / -1 !important; grid-row: 2 !important; margin: 8px 0 0 0 !important; padding: 8px 10px !important; text-align: left !important; width: auto !important; max-width: none !important; background: rgba(0,0,0,0.025) !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 7px !important; position: relative !important; box-sizing: border-box !important; box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.035) inset, 0 1px 3px rgba(0,0,0,0.08) !important; } /* ЖЁСТКОЕ СКРЫТИЕ оригинального .ann-text от v60. v60-джс может вернуть его через style.display='block' при expanded — перебиваем максимальной специфичностью + !important. Иначе контент дублируется: v60 рисует свою копию + мой .lr-annot-body рядом. */ body.lr-mobile .book-header-annotation .ann-text, body.lr-mobile .book-header-annotation #annText, html body.lr-mobile .book-header-annotation .ann-text, html body.lr-mobile .book-header-annotation #annText { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Пролог/первый заголовок сразу после шапки читалки — вплотную */ body.lr-mobile .book-header + h1, body.lr-mobile .book-header + h2, body.lr-mobile .book-header ~ h1:first-of-type, body.lr-mobile .book-header ~ h2:first-of-type { margin-top: 6px !important; padding-top: 0 !important; } body.lr-mobile .reader-content h1:first-of-type, body.lr-mobile .reader-content h2:first-of-type { margin-top: 6px !important; } /* Шапка читалки показывается ТОЛЬКО на первой главе книги (пролог, либо глава 1 если пролога нет). На остальных — полностью скрыта, чтобы не занимать место каждый раз. JS ставит body[data-lr-chapter]. Используем более специфичный селектор чтобы перебить display: grid у body.lr-mobile.lr-active .book-header. */ body.lr-mobile.lr-active[data-lr-chapter="chapter"] .book-header, body.lr-mobile.lr-active[data-lr-chapter="epilog"] .book-header, body.lr-mobile[data-lr-chapter="chapter"] .book-header, body.lr-mobile[data-lr-chapter="epilog"] .book-header { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } /* Аннотация внутри шапки читалки — всегда только на прологе/первой главе (т.е. там же где вся шапка). Отдельного правила не нужно, но оставим для ясности если шапку кто-то переключит. */ body.lr-mobile:not([data-lr-chapter="prolog"]):not([data-lr-chapter="first"]) .book-header-annotation { display: none !important; } /* Заголовок «Аннотация» (v60 ставит класс .ann-label) — компактный */ body.lr-mobile .book-header-annotation .ann-label, body.lr-mobile .book-header-annotation .annotation-title, body.lr-mobile .book-header-annotation > strong:first-child, body.lr-mobile .book-header-annotation > b:first-child, body.lr-mobile .book-header-annotation > h3, body.lr-mobile .book-header-annotation > h4 { display: block !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; color: var(--text) !important; opacity: 0.85 !important; margin: 0 0 5px !important; padding: 0 !important; text-transform: uppercase !important; } /* Сам текст аннотации — СВЁРНУТО: обрезаем весь блок текста по 3 строкам */ body.lr-mobile .book-header-annotation:not(.expanded):not([data-expanded="1"]) { overflow: hidden !important; } /* Мой контейнер .lr-annot-body — содержит HTML аннотации */ body.lr-mobile .book-header-annotation .lr-annot-body { font-size: 11.5px !important; line-height: 1.45 !important; color: var(--text) !important; opacity: 0.9 !important; margin: 0 !important; padding: 0 !important; } /* Параграфы внутри своей аннотации — аккуратные отступы */ body.lr-mobile .book-header-annotation .lr-annot-body p { margin: 0 0 6px !important; padding: 0 !important; } body.lr-mobile .book-header-annotation .lr-annot-body p:last-child { margin-bottom: 0 !important; } /* ============================================================ ССЫЛКИ внутри аннотации (Вариант 1 — блочные кнопки со стрелкой). Любой внутри .lr-annot-body превращается в блочную кнопку: мягкий золотой фон, тонкая рамка, скругление, стрелка → слева через ::before. Тап-зона крупная, удобно на мобилке. ============================================================ */ body.lr-mobile .book-header-annotation .lr-annot-body a, body.lr-mobile .book-header-annotation .lr-annot-body a:link, body.lr-mobile .book-header-annotation .lr-annot-body a:visited { display: block !important; position: relative !important; padding: 4px 8px 4px 20px !important; margin: 2px 0 !important; background: rgba(139, 105, 20, 0.06) !important; border: 1px solid rgba(139, 105, 20, 0.18) !important; border-radius: 4px !important; color: var(--text) !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.4 !important; text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal !important; hyphens: none !important; -webkit-hyphens: none !important; } body.lr-mobile .book-header-annotation .lr-annot-body a::before { content: "→" !important; color: #8b6914 !important; font-size: 12px !important; font-weight: 700 !important; position: absolute !important; left: 5px !important; top: 50% !important; transform: translateY(-50%) !important; line-height: 1 !important; } body.lr-mobile .book-header-annotation .lr-annot-body a:active, body.lr-mobile .book-header-annotation .lr-annot-body a:hover { background: rgba(139, 105, 20, 0.14) !important; border-color: rgba(139, 105, 20, 0.32) !important; } /* Если ссылка — ЕДИНСТВЕННЫЙ ребёнок параграфа, убираем внешние отступы параграфа (иначе получаются двойные margins вокруг кнопки). */ body.lr-mobile .book-header-annotation .lr-annot-body p:has(> a:only-child) { margin: 0 !important; padding: 0 !important; } /* Тёмные темы — светлая версия кантика ссылки */ body.lr-mobile[data-theme="dark"] .book-header-annotation .lr-annot-body a, body.lr-mobile[data-theme="night"] .book-header-annotation .lr-annot-body a, body.lr-mobile[data-theme="medieval"] .book-header-annotation .lr-annot-body a { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.16) !important; box-shadow: none !important; } body.lr-mobile[data-theme="dark"] .book-header-annotation .lr-annot-body a::before, body.lr-mobile[data-theme="night"] .book-header-annotation .lr-annot-body a::before, body.lr-mobile[data-theme="medieval"] .book-header-annotation .lr-annot-body a::before { color: #d4a84c !important; } body.lr-mobile[data-theme="dark"] .book-header-annotation .lr-annot-body a:active, body.lr-mobile[data-theme="dark"] .book-header-annotation .lr-annot-body a:hover, body.lr-mobile[data-theme="night"] .book-header-annotation .lr-annot-body a:active, body.lr-mobile[data-theme="night"] .book-header-annotation .lr-annot-body a:hover, body.lr-mobile[data-theme="medieval"] .book-header-annotation .lr-annot-body a:active, body.lr-mobile[data-theme="medieval"] .book-header-annotation .lr-annot-body a:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.32) !important; } /* Дисклеймер (про наркотики/психотропы) — приглушённый капс сверху, остаётся частью аннотации, но визуально отделяется стилем. */ body.lr-mobile .book-header-annotation .lr-annot-body .lr-disclaimer, body.lr-mobile .book-header-annotation .lr-annot-body p.lr-disclaimer { text-transform: uppercase !important; font-size: 9.5px !important; line-height: 1.3 !important; letter-spacing: 0.02em !important; font-weight: 500 !important; opacity: 0.55 !important; margin-bottom: 7px !important; color: var(--text) !important; } /* Свёрнуто — 3 строки с многоточием */ body.lr-mobile .book-header-annotation:not(.expanded):not([data-expanded="1"]) .lr-annot-body { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Развёрнуто — полный текст */ body.lr-mobile .book-header-annotation.expanded .lr-annot-body, body.lr-mobile .book-header-annotation[data-expanded="1"] .lr-annot-body { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; padding-right: 36px !important; padding-bottom: 40px !important; } /* Скрываем любые крестики/кнопки закрытия внутри аннотации от v60. ВАЖНО: исключаем наши собственные .lr-annot-toggle / .lr-annot-close-btn / .lr-annot-collapse-arrow — иначе селектор [class*="close"] и [aria-label*="верн" i] зарубает НАШИ же кнопки, и при разворачивании аннотации крестик со стрелкой не видны. */ body.lr-mobile .book-header-annotation > button:not(.lr-annot-toggle):not(.lr-annot-close-btn):not(.lr-annot-collapse-arrow):not(.lr-annot-collapse-text), body.lr-mobile .book-header-annotation .annotation-close:not(.lr-annot-close-btn):not(.lr-annot-collapse-arrow):not(.lr-annot-collapse-text), body.lr-mobile .book-header-annotation .close:not(.lr-annot-close-btn):not(.lr-annot-collapse-arrow):not(.lr-annot-collapse-text), body.lr-mobile .book-header-annotation [class*="close"]:not(.lr-annot-close-btn):not(.lr-annot-collapse-arrow):not(.lr-annot-toggle):not(.lr-annot-collapse-text), body.lr-mobile .book-header-annotation [aria-label*="акрыт" i]:not(.lr-annot-close-btn):not(.lr-annot-collapse-arrow):not(.lr-annot-collapse-text), body.lr-mobile .book-header-annotation [aria-label*="верн" i]:not(.lr-annot-close-btn):not(.lr-annot-collapse-arrow):not(.lr-annot-collapse-text), body.lr-mobile .book-header-annotation [title*="акрыт" i]:not(.lr-annot-close-btn):not(.lr-annot-collapse-arrow):not(.lr-annot-collapse-text), body.lr-mobile .book-header-annotation > span[onclick]:not(.lr-annot-toggle), body.lr-mobile .book-header-annotation > a[onclick]:not(.lr-annot-toggle) { display: none !important; visibility: hidden !important; } /* Моя кнопка-тогглер «Развернуть ▾ / Свернуть ▴» внизу аннотации. Пожирнее и потемнее, стрелка крупнее (через отдельный span). */ body.lr-mobile .book-header-annotation .lr-annot-toggle { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: transparent !important; border: none !important; color: var(--text) !important; font-size: 10px !important; font-weight: 700 !important; padding: 5px 0 0 !important; margin: 5px 0 0 !important; cursor: pointer !important; text-decoration: none !important; opacity: 0.95 !important; box-shadow: none !important; border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1 !important; text-align: left !important; width: auto !important; } body.lr-mobile .book-header-annotation .lr-annot-toggle .lr-annot-toggle-arrow { display: inline-block !important; font-size: 14px !important; line-height: 1 !important; font-weight: 900 !important; transform: translateY(1px) !important; opacity: 0.95 !important; } body.lr-mobile .book-header-annotation .lr-annot-toggle:active { opacity: 0.6 !important; } /* Скрываем кнопку "Развернуть" когда аннотация развёрнута */ body.lr-mobile .book-header-annotation.expanded .lr-annot-toggle, body.lr-mobile .book-header-annotation[data-expanded="1"] .lr-annot-toggle { display: none !important; visibility: hidden !important; } /* Красный крестик при развёрнутой аннотации — КРУПНЫЙ и заметный */ body.lr-mobile .book-header-annotation .lr-annot-close-btn { position: absolute !important; top: 8px !important; right: 8px !important; width: 30px !important; height: 30px !important; background: #d62828 !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 50% !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; box-shadow: 0 2px 6px rgba(214,40,40,0.45), 0 0 0 1px rgba(0,0,0,0.08) !important; z-index: 10 !important; } body.lr-mobile .book-header-annotation .lr-annot-close-btn:active { background: #a82020 !important; transform: scale(0.92); } /* Зелёная стрелочка ▲ в правом нижнем углу для закрытия — КРУПНАЯ и заметная */ body.lr-mobile .book-header-annotation .lr-annot-collapse-arrow { position: absolute !important; bottom: 10px !important; right: 10px !important; width: 32px !important; height: 32px !important; background: #2fa844 !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 50% !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; box-shadow: 0 2px 6px rgba(47,168,68,0.5), 0 0 0 1px rgba(0,0,0,0.08) !important; z-index: 10 !important; } body.lr-mobile .book-header-annotation .lr-annot-collapse-arrow:active { background: #227030 !important; transform: scale(0.92); } /* Текстовая кнопка «Свернуть ▴» слева внизу (при развёрнутой аннотации). Зеркало к «Развернуть ▾» — тот же стиль, но внизу слева. */ body.lr-mobile .book-header-annotation .lr-annot-collapse-text { position: absolute !important; bottom: 10px !important; left: 10px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; background: transparent !important; border: none !important; color: var(--text) !important; font-size: 10px !important; font-weight: 700 !important; padding: 5px 2px !important; margin: 0 !important; cursor: pointer !important; text-decoration: none !important; opacity: 0.95 !important; box-shadow: none !important; border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1 !important; text-align: left !important; z-index: 10 !important; } body.lr-mobile .book-header-annotation .lr-annot-collapse-text .lr-annot-collapse-text-arrow { display: inline-block !important; font-size: 14px !important; line-height: 1 !important; font-weight: 900 !important; transform: translateY(-1px) !important; opacity: 0.95 !important; } body.lr-mobile .book-header-annotation .lr-annot-collapse-text:active { opacity: 0.6 !important; } /* ============================================================ ТЁМНЫЕ ТЕМЫ (dark / night / medieval): обложка/инфо/аннотация получают СВЕТЛЫЕ рамки и highlights, иначе чёрный с альфой сливается с фоном и кантиков не видно. ============================================================ */ body.lr-mobile[data-theme="dark"] .book-header .cover-wrapper, body.lr-mobile[data-theme="night"] .book-header .cover-wrapper, body.lr-mobile[data-theme="medieval"] .book-header .cover-wrapper, body.lr-mobile[data-theme="dark"] .book-header-info, body.lr-mobile[data-theme="night"] .book-header-info, body.lr-mobile[data-theme="medieval"] .book-header-info, body.lr-mobile[data-theme="dark"] .book-header-annotation, body.lr-mobile[data-theme="night"] .book-header-annotation, body.lr-mobile[data-theme="medieval"] .book-header-annotation { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.25) inset, 0 1px 3px rgba(0,0,0,0.35) !important; } /* Обложка-картинка в тёмной теме — лёгкая тень, плотнее */ body.lr-mobile[data-theme="dark"] .book-header .cover-wrapper img, body.lr-mobile[data-theme="night"] .book-header .cover-wrapper img, body.lr-mobile[data-theme="medieval"] .book-header .cover-wrapper img, body.lr-mobile[data-theme="dark"] #coverImg, body.lr-mobile[data-theme="night"] #coverImg, body.lr-mobile[data-theme="medieval"] #coverImg { box-shadow: 0 1px 4px rgba(0,0,0,0.6) !important; } /* --- Chapter-nav-bottom: переверстана на мобилке --- */ body.lr-mobile .chapter-nav-bottom { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; gap: 8px !important; padding: 8px 16px 12px !important; max-width: 100% !important; width: 100% !important; margin: 1em 0 12px !important; border-top: none !important; position: relative !important; box-sizing: border-box !important; } /* "— Конец главы N —" — заголовок на всю ширину вверху */ body.lr-mobile .chapter-nav-bottom .lr-end-title { grid-column: 1 / -1 !important; grid-row: 1 !important; display: block !important; width: 100% !important; text-align: center !important; font-style: italic !important; color: var(--muted) !important; font-size: 13px !important; padding: 2px 0 6px !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; } /* Линия-разделитель на всю ширину — row 2 (под заголовком) */ body.lr-mobile .chapter-nav-bottom .lr-end-divider { grid-column: 1 / -1 !important; grid-row: 2 !important; display: block !important; position: relative !important; width: 100vw !important; max-width: 100vw !important; left: 50% !important; margin-left: -50vw !important; margin-top: 0 !important; margin-bottom: 14px !important; height: 2px !important; background: rgba(0,0,0,0.18) !important; padding: 0 !important; border: none !important; } /* Prev/Next — длинные УЗКИЕ объёмные кнопки в двух колонках grid */ body.lr-mobile .chapter-nav-bottom .ch-prev { grid-column: 1 !important; grid-row: 3 !important; } body.lr-mobile .chapter-nav-bottom .ch-next { grid-column: 2 !important; grid-row: 3 !important; } body.lr-mobile .chapter-nav-bottom .ch-prev, body.lr-mobile .chapter-nav-bottom .ch-next { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 5px 10px !important; margin: 6px 0 0 !important; text-align: center !important; background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.06) 100%) !important; background-color: rgba(255,255,255,0.15) !important; border: 1px solid rgba(0,0,0,0.3) !important; border-radius: 4px !important; font-size: 12.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.4 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; transition: transform 0.08s ease, box-shadow 0.12s ease !important; box-sizing: border-box !important; } body.lr-mobile .chapter-nav-bottom .ch-prev:active, body.lr-mobile .chapter-nav-bottom .ch-next:active { transform: scale(0.97) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 rgba(0,0,0,0) !important; } /* Старое правило «next коричневый» убрано — обе кнопки одинаковые */ body.lr-mobile .chapter-nav-bottom .ch-next:not(:empty) { background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.06) 100%) !important; color: var(--text) !important; border-color: rgba(0,0,0,0.3) !important; font-weight: 600 !important; } /* Пустые prev/next (на первой/последней главе) — скрыть */ body.lr-mobile .chapter-nav-bottom .ch-prev:empty, body.lr-mobile .chapter-nav-bottom .ch-next:empty, body.lr-mobile .chapter-nav-top .ch-prev:empty, body.lr-mobile .chapter-nav-top .ch-next:empty { display: none !important; } /* «Написать отзыв» — БЕЗ кантика/фона, полупрозрачный курсив, row 4, обе колонки */ body.lr-mobile .chapter-nav-bottom .ch-comment { grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100% !important; max-width: 100% !important; padding: 22px 12px 10px !important; text-align: center !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: var(--muted) !important; opacity: 0.85 !important; font-size: 12px !important; font-weight: 400 !important; font-style: italic !important; text-transform: none !important; text-decoration: none !important; letter-spacing: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; line-height: 1.3 !important; box-shadow: none !important; } body.lr-mobile .chapter-nav-bottom .ch-comment .lr-comment-icon { font-size: 18px !important; line-height: 1 !important; display: inline-block !important; font-style: normal !important; font-weight: 900 !important; color: var(--text) !important; opacity: 0.75 !important; } body.lr-mobile .chapter-nav-bottom .ch-comment:active { opacity: 0.6 !important; transform: scale(0.98); } /* --- Оглавление: активная глава — ЗЕЛЁНАЯ (не коричневая как по умолчанию) --- */ /* ============================================================ * ПАНЕЛЬ ОГЛАВЛЕНИЯ — широкая, с красивым кантом, скролл для 20+ глав * ============================================================ */ /* Светлая тема — ДЕЙСТВИТЕЛЬНО БЕЛАЯ. v60 по умолчанию рисует её кремовым #faf8f4 (серый оттенок). Переопределяем CSS-переменные чтобы получить чистый белый фон и мягкие светло-серые панели. */ body.lr-mobile[data-theme="light"], html body.lr-mobile[data-theme="light"] { --bg: #ffffff !important; --text: #222222 !important; --panel-bg: #f7f7f7 !important; --panel-border: #e5e5e5 !important; --card-bg: #fbfbfb !important; } body.lr-mobile[data-theme="light"] .bps-article, body.lr-mobile[data-theme="light"] .reader-content, body.lr-mobile[data-theme="light"] .bps-reader-grid, html body.lr-mobile[data-theme="light"] body, body.lr-mobile[data-theme="light"] { background: #ffffff !important; color: #222222 !important; } /* Возвращаем ширину как по умолчанию у v60 (от края до края -8px). Красивый кант + подсветка — как у шапки читалки и аннотации. max-height: calc(100vh - 60px) → при 20+ главах внутри появляется скролл. */ body.lr-mobile .toc-panel, html body.lr-mobile .toc-panel { width: auto !important; max-width: none !important; left: 8px !important; right: 8px !important; max-height: calc(100vh - 60px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; background: #f0e4c6 !important; border: 2px solid var(--accent, #8b6914) !important; border-radius: 14px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32), 0 0 0 4px rgba(139, 105, 20, 0.12) !important; } /* Фон по темам — плотный (непрозрачный), чтобы не просвечивал текст под панелью. Рамка (border) и свечение (box-shadow ring) используют var(--accent), поэтому подстраиваются под каждую тему автоматически. */ body.lr-mobile[data-theme="light"] .toc-panel, html body.lr-mobile[data-theme="light"] .toc-panel { background: #ffffff !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 0 0 4px rgba(107, 90, 46, 0.16) !important; } body.lr-mobile[data-theme="sepia"] .toc-panel, html body.lr-mobile[data-theme="sepia"] .toc-panel { background: #ead8b5 !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(138, 90, 32, 0.16) !important; } body.lr-mobile[data-theme="grey"] .toc-panel, html body.lr-mobile[data-theme="grey"] .toc-panel { background: #e8e8e8 !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(85, 85, 85, 0.2) !important; } /* Тёмные темы — плотный фон + светлое glow-кольцо под тему */ body.lr-mobile[data-theme="dark"] .toc-panel, html body.lr-mobile[data-theme="dark"] .toc-panel { background: #2a2a2a !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(201, 168, 76, 0.18) !important; } body.lr-mobile[data-theme="night"] .toc-panel, html body.lr-mobile[data-theme="night"] .toc-panel { background: #1a1a1a !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(201, 168, 76, 0.16) !important; } body.lr-mobile[data-theme="medieval"] .toc-panel, html body.lr-mobile[data-theme="medieval"] .toc-panel { background: #1a1410 !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(212, 168, 76, 0.22) !important; } /* Скроллбар внутри toc-panel — тонкий, незаметный */ body.lr-mobile .toc-panel::-webkit-scrollbar { width: 4px !important; } body.lr-mobile .toc-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25) !important; border-radius: 2px !important; } body.lr-mobile .toc-panel::-webkit-scrollbar-track { background: transparent !important; } body.lr-mobile[data-theme="dark"] .toc-panel::-webkit-scrollbar-thumb, body.lr-mobile[data-theme="night"] .toc-panel::-webkit-scrollbar-thumb, body.lr-mobile[data-theme="medieval"] .toc-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25) !important; } body.lr-mobile .toc-item.current { background: #4CAF50 !important; color: #fff !important; border-radius: 8px !important; font-weight: 600 !important; box-shadow: 0 2px 6px rgba(76, 175, 80, 0.25) !important; } /* Обычные главы в оглавлении */ body.lr-mobile .toc-item { padding: 12px 14px !important; font-size: 14px !important; min-height: 42px !important; line-height: 1.3 !important; } body.lr-mobile .toc-item.locked { opacity: 0.6 !important; } body.lr-mobile .toc-item .toc-lock { font-size: 14px !important; opacity: 1 !important; margin-left: 10px !important; } /* --- Крестик оглавления: красный круглый, как у настроек --- */ body.lr-mobile .toc-close { width: 32px !important; height: 32px !important; background: #cc3333 !important; color: #fff !important; border: none !important; border-radius: 50% !important; box-shadow: 0 2px 4px rgba(204, 51, 51, 0.35) !important; top: 10px !important; right: 10px !important; z-index: 5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } body.lr-mobile .toc-close svg { stroke: #fff !important; stroke-width: 2.5 !important; width: 13px !important; height: 13px !important; } body.lr-mobile .toc-close:active { background: #b82d2d !important; transform: scale(0.94); } /* ============================================================ * ЧАСТЬ 5: КАРУСЕЛЬ «ПОХОЖИЕ КНИГИ» * ============================================================ */ body.lr-mobile .lr-related-custom { margin: -12px 0 30px !important; padding: 0 !important; position: relative !important; } /* Заголовок «ПОХОЖИЕ КНИГИ» — красивее: serif шрифт с засечками, тонкий, приглушённый, с тонкими линиями-разделителями по бокам для изящности. */ body.lr-mobile .lr-related-custom h2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; font-family: 'Merriweather', Georgia, 'Times New Roman', serif !important; text-align: center !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--muted) !important; opacity: 0.85 !important; margin: 0 0 6px !important; padding: 0 16px !important; } body.lr-mobile .lr-related-custom h2::before, body.lr-mobile .lr-related-custom h2::after { content: '' !important; flex: 0 0 22px !important; height: 1px !important; background: currentColor !important; opacity: 0.35 !important; display: block !important; } /* Обёртка трека — через неё кладём стрелки абсолютно */ body.lr-mobile .lr-related-track-wrap { position: relative !important; padding: 0 !important; overflow: visible !important; } /* Стрелки по бокам — полупрозрачные, ПРИЖАТЫ к краям экрана и выровнены по ЦЕНТРУ ОБЛОЖКИ (не центру всего трека). Центр обложки: ширина обложки = (100vw-60)/3, высота = ширина × 1.5. Середина обложки от верха трека = высота/2 + padding-top(4px). Формула: 25vw - 11px. transform:translateY(-50%) центрирует от top. */ body.lr-mobile .lr-related-custom .lr-related-arrow { position: absolute !important; top: calc(25vw - 11px) !important; transform: translateY(-50%) !important; width: 32px !important; height: 54px !important; background: rgba(245, 234, 208, 0.7) !important; border: 1px solid rgba(0,0,0,0.15) !important; border-radius: 4px !important; color: var(--text) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 10 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; padding: 0 !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; visibility: visible !important; opacity: 0.85 !important; } body.lr-mobile .lr-related-custom .lr-related-arrow.prev { left: 0 !important; } body.lr-mobile .lr-related-custom .lr-related-arrow.next { right: 0 !important; } body.lr-mobile .lr-related-custom .lr-related-arrow:active { transform: translateY(-50%) scale(0.92) !important; background: rgba(245, 234, 208, 0.95) !important; opacity: 1 !important; } /* Трек — горизонтальный скролл со snap */ body.lr-mobile .lr-related-custom .lr-related-track { display: flex !important; flex-direction: row !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; padding: 4px 16px 10px !important; margin: 0 !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } body.lr-mobile .lr-related-custom .lr-related-track::-webkit-scrollbar { display: none !important; } /* Карточка — 3 обложки в кадре, крупные */ body.lr-mobile .lr-related-custom .lr-related-item { flex: 0 0 calc((100vw - 60px) / 3) !important; max-width: calc((100vw - 60px) / 3) !important; min-width: calc((100vw - 60px) / 3) !important; scroll-snap-align: start !important; text-decoration: none !important; color: var(--text) !important; display: flex !important; flex-direction: column !important; position: relative !important; background: transparent !important; } body.lr-mobile .lr-related-custom .lr-related-item img { width: 100% !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; border-radius: 4px !important; display: block !important; margin: 0 0 2px !important; filter: saturate(1.08) contrast(1.03) !important; box-shadow: 0 0 0 1px rgba(139, 105, 20, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25), 0 6px 14px rgba(139, 105, 20, 0.22) !important; transition: box-shadow 0.25s ease, transform 0.2s ease !important; } body.lr-mobile .lr-related-custom .lr-related-item:active img, body.lr-mobile .lr-related-custom .lr-related-item:focus img { box-shadow: 0 0 0 2px rgba(139, 105, 20, 0.6), 0 3px 10px rgba(0, 0, 0, 0.28), 0 8px 22px rgba(139, 105, 20, 0.42) !important; transform: translateY(-1px) !important; } /* Свечение под цвет каждой темы */ body.lr-mobile[data-theme="light"] .lr-related-custom .lr-related-item img { box-shadow: 0 0 0 1px rgba(90, 90, 90, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2), 0 6px 14px rgba(150, 150, 150, 0.25) !important; } body.lr-mobile[data-theme="sepia"] .lr-related-custom .lr-related-item img { box-shadow: 0 0 0 1px rgba(138, 90, 32, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22), 0 6px 14px rgba(180, 120, 40, 0.25) !important; } body.lr-mobile[data-theme="grey"] .lr-related-custom .lr-related-item img { box-shadow: 0 0 0 1px rgba(100, 100, 100, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3), 0 6px 14px rgba(120, 120, 120, 0.3) !important; } body.lr-mobile[data-theme="dark"] .lr-related-custom .lr-related-item img, body.lr-mobile[data-theme="night"] .lr-related-custom .lr-related-item img { box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.45), 0 2px 8px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(201, 168, 76, 0.28) !important; } body.lr-mobile[data-theme="medieval"] .lr-related-custom .lr-related-item img { box-shadow: 0 0 0 1.5px rgba(255, 192, 64, 0.55), 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 192, 64, 0.35), 0 8px 22px rgba(255, 150, 0, 0.4) !important; animation: lrCoverGlowMedieval 3s ease-in-out infinite !important; } @keyframes lrCoverGlowMedieval { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 192, 64, 0.55), 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 192, 64, 0.35), 0 8px 22px rgba(255, 150, 0, 0.4); } 50% { box-shadow: 0 0 0 1.5px rgba(255, 210, 100, 0.7), 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 200, 80, 0.5), 0 10px 26px rgba(255, 150, 0, 0.5); } } /* Название книги — максимум 2 строки, остальное обрезается многоточием. min-height: 2.4em выравнивает высоту блока на всех карточках, поэтому авторы и цены идут строго в один ряд между карточками. */ body.lr-mobile .lr-related-custom .lr-related-item-title { font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--text) !important; margin: 3px 0 1px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-transform: none !important; min-height: 2.4em !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Автор — 9.5px чтобы гарантированно вмещать 20 знаков с пробелами (например «Виктория Троянская» = 19 символов). Карточка шириной (100vw-60)/3 на 360px viewport = ~100px. 20 × 4.8px = 96px → влезает. */ body.lr-mobile .lr-related-custom .lr-related-author { font-size: 9.5px !important; font-weight: 600 !important; color: var(--muted) !important; opacity: 0.9 !important; line-height: 1.2 !important; margin: 0 0 2px !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; letter-spacing: -0.01em !important; } /* Цена — вплотную к автору */ body.lr-mobile .lr-related-custom .lr-related-price { font-size: 12.5px !important; font-weight: 700 !important; color: var(--text) !important; margin: 0 !important; line-height: 1 !important; } /* Бейдж 18+ — через JS, если у книги 18+ */ body.lr-mobile .lr-related-custom .lr-related-badge { position: absolute !important; bottom: 62px !important; right: 4px !important; background: #cc3333 !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; padding: 2px 5px !important; border-radius: 10px !important; line-height: 1 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important; z-index: 2 !important; }