/* =================================================================== ЧИТАЛЬНЯ — reader.css Отдельная страница, ничего не наследует от styles.css: у читалки свои темы и свои переменные. Раскладка: одна колонка на весь экран. header → шапка (4 элемента) main → заголовок раздела, страница текста, нижняя навигация В режиме «Страницы» main занимает ровно оставшуюся высоту, а прокрутка запрещена и у , и у . ВАЖНО. Каждый интерактивный элемент получает appearance:none и все пять состояний. Ни одна кнопка не должна доехать до системного вида браузера — раньше это случалось, когда новая разметка рендерилась со старым кэшированным CSS. =================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Атрибут hidden должен побеждать любые display из правил ниже. */ [hidden] { display: none !important; } :root { --rd-size: 19px; --rd-lh: 1.7; --rd-width: 760px; --rd-align: left; --rd-font: Georgia, "Times New Roman", serif; --rd-ui: ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif; --rd-bg: #eef1f0; --rd-fg: #1b2224; --rd-muted: #5d6b6d; --rd-line: rgba(30, 45, 45, .16); --rd-line-soft: rgba(30, 45, 45, .09); --rd-panel: #f7f9f8; --rd-accent: #3d5d59; --rd-accent-soft: rgba(61, 93, 89, .1); --rd-head: rgba(238, 241, 240, .88); /* страница отличается от фона очень деликатно */ --rd-paper: rgba(255, 255, 255, .5); } /* ---------- темы ---------- */ html[data-reader-theme="paper"] { --rd-bg: #f5efe2; --rd-fg: #2b2723; --rd-muted: #6d6357; --rd-line: rgba(70, 58, 44, .18); --rd-line-soft: rgba(70, 58, 44, .1); --rd-panel: #fbf6ec; --rd-accent: #7a6242; --rd-accent-soft: rgba(122, 98, 66, .1); --rd-head: rgba(245, 239, 226, .9); --rd-paper: rgba(255, 252, 245, .55); } html[data-reader-theme="sepia"] { --rd-bg: #e8d9c0; --rd-fg: #3a2e21; --rd-muted: #6f5c45; --rd-line: rgba(80, 62, 40, .26); --rd-line-soft: rgba(80, 62, 40, .14); --rd-panel: #f0e4d0; --rd-accent: #8a6a3f; --rd-accent-soft: rgba(138, 106, 63, .12); --rd-head: rgba(232, 217, 192, .9); --rd-paper: rgba(250, 242, 228, .5); } html[data-reader-theme="dark"] { --rd-bg: #232729; --rd-fg: #d9dedf; --rd-muted: #98a2a4; --rd-line: rgba(220, 230, 230, .16); --rd-line-soft: rgba(220, 230, 230, .09); --rd-panel: #2c3133; --rd-accent: #8fb3ad; --rd-accent-soft: rgba(143, 179, 173, .14); --rd-head: rgba(35, 39, 41, .9); --rd-paper: rgba(255, 255, 255, .035); } html[data-reader-theme="midnight"] { --rd-bg: #0b0c0f; --rd-fg: #c9d1d4; --rd-muted: #8b949a; --rd-line: rgba(198, 72, 90, .26); --rd-line-soft: rgba(198, 72, 90, .14); --rd-panel: #121418; --rd-accent: #c6485a; --rd-accent-soft: rgba(198, 72, 90, .14); --rd-head: rgba(11, 12, 15, .92); --rd-paper: rgba(255, 255, 255, .03); } /* ---------- шрифты: только системные, ничего не подгружается ---------- */ html[data-reader-font="georgia"] { --rd-font: Georgia, "Times New Roman", serif; } html[data-reader-font="serif"] { --rd-font: ui-serif, "Times New Roman", Times, serif; } html[data-reader-font="sans"] { --rd-font: ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif; } html[data-reader-font="arial"] { --rd-font: Arial, Helvetica, sans-serif; } /* ---------- каркас ---------- */ .rd-body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--rd-bg); color: var(--rd-fg); font-family: var(--rd-font); -webkit-text-size-adjust: 100%; } /* Постраничный режим: ни одной вертикальной полосы прокрутки. */ html[data-mode="paged"], html[data-mode="paged"] body { height: 100%; overflow: hidden; } .rd-body[data-mode="paged"] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } /* при открытой панели фон не прокручивается */ html.rd-locked, html.rd-locked body { overflow: hidden; } .rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* =================================================================== БАЗОВЫЕ КОНТРОЛЫ. Всё, что кликается, наследует отсюда. =================================================================== */ .rd-ctl, .rd-cta, .rd-chip, .rd-menuitem, .rd-navbtn, .rd-markbtn, .rd-page-arrow, .rd-panel-back, .rd-panel-close, .rd-extras-link, .rd-toclist button, .rd-results button, .rd-mark-del, .rd-back, .rd-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; font: inherit; font-family: var(--rd-ui); margin: 0; cursor: pointer; background: transparent; color: inherit; border: 0; border-radius: 0; } .rd-ctl:focus-visible, .rd-cta:focus-visible, .rd-chip:focus-visible, .rd-menuitem:focus-visible, .rd-navbtn:focus-visible, .rd-markbtn:focus-visible, .rd-page-arrow:focus-visible, .rd-panel-back:focus-visible, .rd-panel-close:focus-visible, .rd-extras-link:focus-visible, .rd-toclist button:focus-visible, .rd-results button:focus-visible, .rd-mark-del:focus-visible, .rd-back:focus-visible, .rd-input:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; } /* обведённая кнопка-таблетка */ .rd-ctl { font-size: 14px; line-height: 1; min-height: 38px; padding: .5rem .85rem; border: 1px solid var(--rd-line); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: border-color .18s ease, color .18s ease, background-color .18s ease; } .rd-ctl:hover { border-color: var(--rd-accent); color: var(--rd-accent); } .rd-ctl:active { background: var(--rd-accent-soft); } .rd-ctl[aria-expanded="true"], .rd-ctl[aria-pressed="true"] { border-color: var(--rd-accent); color: var(--rd-accent); background: var(--rd-accent-soft); } .rd-ctl:disabled { opacity: .38; cursor: default; border-color: var(--rd-line-soft); } .rd-ctl-aa { font-family: Georgia, "Times New Roman", serif; font-size: 16px; min-width: 46px; } .rd-ctl-solid { border-color: var(--rd-accent); background: var(--rd-accent); color: var(--rd-bg); } .rd-ctl-solid:hover { color: var(--rd-bg); filter: brightness(1.08); } /* основная кнопка */ .rd-cta { font-size: 15px; min-height: 44px; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid var(--rd-accent); background: var(--rd-accent); color: var(--rd-bg); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: filter .18s ease; } .rd-cta:hover { filter: brightness(1.08); } .rd-cta:active { filter: brightness(.95); } .rd-cta:disabled { opacity: .4; cursor: default; filter: none; } /* поле ввода */ .rd-input { flex: 1; min-width: 0; font-size: 15px; padding: .6rem .8rem; min-height: 42px; border: 1px solid var(--rd-line); border-radius: 10px; background: var(--rd-bg); color: inherit; cursor: text; transition: border-color .18s ease; } .rd-input::placeholder { color: var(--rd-muted); opacity: .8; } .rd-input:hover { border-color: var(--rd-accent); } .rd-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* ---------- шапка: ровно четыре элемента ---------- */ .rd-header { flex: none; z-index: 30; display: flex; align-items: center; gap: .7rem; padding: 0 clamp(.7rem, 2.5vw, 1.5rem); min-height: 60px; background: var(--rd-head); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--rd-line); } .rd-body[data-mode="scroll"] .rd-header { position: sticky; top: 0; } .rd-back { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .45rem .7rem .45rem .55rem; font-size: 14px; text-decoration: none; color: var(--rd-muted); border-radius: 999px; transition: color .18s ease, background-color .18s ease; } .rd-back:hover { color: var(--rd-accent); background: var(--rd-accent-soft); } .rd-back-arrow { font-size: 15px; line-height: 1; } /* тонкий разделитель, чтобы название книги не слипалось с возвратом */ .rd-header-sep { flex: none; width: 1px; height: 20px; background: var(--rd-line); } .rd-booktitle { flex: 1; min-width: 0; font-family: var(--rd-font); font-size: 1rem; font-weight: 600; letter-spacing: .01em; color: var(--rd-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- прогресс ---------- */ .rd-progressbar { flex: none; height: 2px; background: var(--rd-line-soft); z-index: 29; } .rd-progressbar span { display: block; height: 100%; width: 0; background: var(--rd-accent); transition: width .25s ease; } /* ---------- ошибка ---------- */ .rd-error { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 3rem); text-align: center; } .rd-error h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 .6rem; } .rd-error p { color: var(--rd-muted); margin: 0 0 1.4rem; } /* ---------- стартовый экран ---------- */ .rd-start { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: clamp(1rem, 4vw, 2.4rem) clamp(.9rem, 3vw, 2rem) 2rem; overflow-y: auto; } .rd-start-card { display: flex; gap: clamp(1rem, 3vw, 1.8rem); align-items: flex-start; width: 100%; max-width: 42rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--rd-line); border-radius: 16px; background: var(--rd-panel); } .rd-start-cover { flex: none; width: clamp(104px, 20vw, 164px); height: auto; border-radius: 8px; border: 1px solid var(--rd-line); object-fit: cover; background: var(--rd-bg); } .rd-start-body { min-width: 0; display: flex; flex-direction: column; gap: .45rem; } .rd-start-title { margin: 0; font-size: clamp(21px, 3vw, 30px); line-height: 1.15; } .rd-start-author { margin: 0; font-size: clamp(14px, 1.7vw, 16px); color: var(--rd-muted); } .rd-start-meta, .rd-start-where, .rd-start-migrated { margin: 0; font-family: var(--rd-ui); font-size: 13px; line-height: 1.45; color: var(--rd-muted); } .rd-start-migrated { padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--rd-accent); color: var(--rd-accent); } .rd-start-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; } @media (max-width: 560px) { .rd-start-card { flex-direction: column; align-items: center; text-align: center; } .rd-start-body { align-items: center; } .rd-start-actions { justify-content: center; } } /* ---------- зона чтения ---------- Поля живут на .rd-main, поэтому шапка раздела, страница, уведомление и блок допматериалов делят одну колонку и не разъезжаются. */ .rd-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-inline: clamp(.9rem, 3vw, 2rem); } .rd-body[data-mode="paged"] .rd-main { padding-inline: 44px; } .rd-chapterhead, .rd-sourcenote, .rd-extras, .rd-page { width: min(calc(var(--rd-width) + 4rem), 100%); margin-inline: auto; padding-inline: 2rem; } .rd-chapterhead { flex: none; padding-block: clamp(28px, 4vh, 56px) clamp(14px, 2vh, 22px); display: flex; flex-direction: column; justify-content: flex-end; } .rd-chapternum { margin: 0 0 .25rem; font-family: var(--rd-ui); font-size: 12px; letter-spacing: .06em; color: var(--rd-muted); } /* Ровно две строки всегда: и «Пролог», и «Глава семнадцатая · Ну, как я выгляжу?…» занимают одинаковую высоту, поэтому текст начинается в одной и той же точке при переходе между главами. */ .rd-chaptertitle { margin: 0; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.22; min-height: 2.44em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rd-sourcenote { flex: none; margin-bottom: clamp(10px, 1.6vh, 16px); padding-block: .55rem; font-family: var(--rd-ui); font-size: 13px; line-height: 1.45; color: var(--rd-muted); border-left: 2px solid var(--rd-line); background: var(--rd-paper); } .rd-stage { position: relative; display: flex; justify-content: center; } .rd-pageclip { width: 100%; } .rd-body[data-mode="paged"] .rd-stage { flex: 1; min-height: 0; } .rd-body[data-mode="paged"] .rd-page { height: 100%; padding-block: 1.1rem; background: var(--rd-paper); border-radius: 10px; } .rd-body[data-mode="paged"] .rd-pageclip { height: 100%; overflow: hidden; } .rd-text { width: 100%; font-size: var(--rd-size); line-height: var(--rd-lh); text-align: var(--rd-align); /* Переносы внутри слов выключены намеренно: браузер рвал «коле-бался», «Хо-рошо», «сде-лать». */ hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; word-break: normal; overflow-wrap: normal; word-wrap: normal; } .rd-text p { margin: 0 0 .35em; text-indent: 1.35em; hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; word-break: normal; overflow-wrap: normal; } .rd-text p:first-child { text-indent: 0; } .rd-text p.r-i { font-style: italic; } .rd-text p.r-note { color: var(--rd-muted); font-size: .95em; } .rd-text p.is-hit { background: var(--rd-accent-soft); box-shadow: 0 0 0 4px var(--rd-accent-soft); } .rd-body[data-mode="scroll"] .rd-text { padding-bottom: clamp(1.5rem, 4vh, 3rem); } /* ---------- постраничный режим ---------- */ .rd-body[data-mode="paged"] .rd-text { height: var(--rd-pageh, 60vh); column-width: var(--rd-colw, 700px); column-gap: var(--rd-colgap, 48px); column-fill: auto; transform: translateX(var(--rd-shift, 0px)); transition: transform .24s ease; } .rd-body[data-mode="paged"] .rd-text p { break-inside: avoid-column; } @media (prefers-reduced-motion: reduce) { .rd-body[data-mode="paged"] .rd-text { transition: none; } .rd-progressbar span { transition: none; } } .rd-page-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 76px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; border: 1px solid transparent; border-radius: 10px; color: var(--rd-muted); transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .rd-page-arrow:hover:not(:disabled) { color: var(--rd-accent); border-color: var(--rd-line); background: var(--rd-accent-soft); } .rd-page-arrow:active:not(:disabled) { background: var(--rd-accent-soft); } .rd-page-arrow:disabled { opacity: .18; cursor: default; } .rd-page-prev { left: -42px; } .rd-page-next { right: -42px; } .rd-body[data-mode="scroll"] .rd-page-arrow { display: none; } /* ---------- дополнительные материалы после финала ---------- */ .rd-extras { flex: none; padding-block: .9rem 0; display: flex; flex-direction: column; gap: .45rem; } .rd-extras-head { margin: 0; font-family: var(--rd-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); } .rd-extras-list { display: flex; flex-wrap: wrap; gap: .4rem; } .rd-extras-link { font-size: 14px; min-height: 38px; padding: .45rem .9rem; border: 1px solid var(--rd-line); border-radius: 999px; text-align: left; transition: border-color .18s ease, color .18s ease, background-color .18s ease; } .rd-extras-link:hover { border-color: var(--rd-accent); color: var(--rd-accent); background: var(--rd-accent-soft); } .rd-extras-link:active { background: var(--rd-accent-soft); } /* ---------- нижняя навигация ---------- */ .rd-nav { flex: none; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: .45rem clamp(.7rem, 2.5vw, 1.5rem); padding-bottom: calc(.45rem + env(safe-area-inset-bottom, 0px)); min-height: 54px; background: var(--rd-head); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-top: 1px solid var(--rd-line); } .rd-body[data-mode="scroll"] .rd-nav { position: sticky; bottom: 0; } .rd-navbtn { font-size: 13px; min-height: 40px; padding: .45rem .7rem; display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; color: var(--rd-muted); max-width: 100%; overflow: hidden; transition: color .18s ease, background-color .18s ease; } .rd-navbtn:hover { color: var(--rd-accent); background: var(--rd-accent-soft); } .rd-navbtn:active { background: var(--rd-accent-soft); } /* Недоступного соседа не показываем вовсе — серая системная кнопка в нижней панели читалки выглядит как недоделка. */ .rd-navbtn:disabled { visibility: hidden; } .rd-navbtn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-navbtn-arrow { flex: none; font-size: 14px; line-height: 1; } .rd-navbtn-prev { justify-self: start; } .rd-navbtn-next { justify-self: end; } .rd-navcenter { display: flex; align-items: center; gap: .3rem; justify-self: center; } .rd-pageinfo { font-family: var(--rd-ui); font-size: 12px; color: var(--rd-muted); white-space: nowrap; letter-spacing: .01em; } .rd-markbtn { flex: none; width: 34px; height: 34px; padding: 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--rd-muted); transition: color .18s ease, background-color .18s ease; } .rd-markbtn svg { width: 100%; height: 100%; display: block; } .rd-markbtn:hover { color: var(--rd-accent); background: var(--rd-accent-soft); } .rd-markbtn:active { background: var(--rd-accent-soft); } /* ---------- уведомление ---------- */ .rd-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; margin: 0; padding: .55rem 1rem; border-radius: 999px; font-family: var(--rd-ui); font-size: 13px; background: var(--rd-fg); color: var(--rd-bg); box-shadow: 0 8px 24px rgba(10, 14, 16, .18); } /* =================================================================== ЕДИНСТВЕННАЯ ПАНЕЛЬ. Меню, содержание, поиск, закладки, «О книге» и вид — экраны внутри неё. =================================================================== */ .rd-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: clamp(360px, 32vw, 400px); display: flex; flex-direction: column; background: var(--rd-panel); border-left: 1px solid var(--rd-line); box-shadow: -18px 0 44px rgba(10, 14, 16, .1); } .rd-panel-head { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; min-height: 60px; padding: .5rem .75rem .5rem 1rem; border-bottom: 1px solid var(--rd-line); } .rd-panel-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .4rem .6rem .4rem .45rem; font-size: 13px; color: var(--rd-muted); border-radius: 999px; transition: color .18s ease, background-color .18s ease; } .rd-panel-back:hover { color: var(--rd-accent); background: var(--rd-accent-soft); } .rd-panel-title { grid-column: 2; margin: 0; justify-self: start; font-family: var(--rd-font); font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-panel-close { width: 38px; height: 38px; padding: 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--rd-muted); transition: color .18s ease, background-color .18s ease; } .rd-panel-close svg { width: 100%; height: 100%; display: block; } .rd-panel-close:hover { color: var(--rd-accent); background: var(--rd-accent-soft); } .rd-panel-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .rd-view { display: block; padding: .4rem 0 1.5rem; } .rd-view-note { margin: 0; padding: .7rem 1rem; font-family: var(--rd-ui); font-size: 13px; line-height: 1.45; color: var(--rd-muted); } .rd-view-group { margin: .9rem 0 .2rem; padding: 0 1rem; font-family: var(--rd-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); } /* ---------- строки меню ---------- */ .rd-menulist { list-style: none; margin: 0; padding: 0; } .rd-menuitem { width: 100%; min-height: 56px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--rd-line-soft); transition: background-color .18s ease, color .18s ease; } .rd-menulist li:last-child .rd-menuitem { border-bottom: 0; } .rd-menuitem-name { font-size: 15.5px; } .rd-menuitem-meta { font-size: 12.5px; color: var(--rd-muted); white-space: nowrap; } .rd-menuitem-chevron { font-size: 17px; line-height: 1; color: var(--rd-muted); } .rd-menuitem:hover { background: var(--rd-accent-soft); color: var(--rd-accent); } .rd-menuitem:hover .rd-menuitem-chevron { color: var(--rd-accent); } .rd-menuitem:active { background: var(--rd-accent-soft); } .rd-menuitem[aria-pressed="true"] { color: var(--rd-accent); } /* ---------- содержание, результаты, закладки ---------- */ .rd-toclist, .rd-results { list-style: none; margin: 0; padding: 0; } .rd-toclist button, .rd-results button { width: 100%; text-align: left; font-size: 14px; line-height: 1.4; padding: .75rem 1rem; min-height: 48px; border-bottom: 1px solid var(--rd-line-soft); transition: background-color .18s ease, color .18s ease; } .rd-toclist button:hover, .rd-results button:hover { background: var(--rd-accent-soft); color: var(--rd-accent); } .rd-toclist button:active, .rd-results button:active { background: var(--rd-accent-soft); } .rd-toclist button[aria-current="true"] { color: var(--rd-accent); font-weight: 600; box-shadow: inset 2px 0 0 var(--rd-accent); } .rd-hit-ctx { display: block; color: var(--rd-muted); font-size: 12.5px; margin-top: .25rem; font-weight: 400; } .rd-mark-row { display: grid; grid-template-columns: 1fr auto; align-items: stretch; border-bottom: 1px solid var(--rd-line-soft); } .rd-mark-row button:first-child { border-bottom: 0; } .rd-mark-del { width: 46px; color: var(--rd-muted); font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: color .18s ease, background-color .18s ease; } .rd-mark-del:hover { color: var(--rd-accent); background: var(--rd-accent-soft); } /* ---------- поиск ---------- */ .rd-searchform { display: flex; gap: .45rem; padding: .8rem 1rem .2rem; } /* ---------- о книге ---------- */ .rd-about-top { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1rem .2rem; } .rd-about-cover { flex: none; width: 112px; height: auto; border-radius: 6px; border: 1px solid var(--rd-line); object-fit: cover; background: var(--rd-bg); } .rd-about-id { min-width: 0; display: flex; flex-direction: column; gap: .25rem; } .rd-about-title { margin: 0; font-size: 18px; line-height: 1.2; } .rd-about-author { margin: 0; font-family: var(--rd-ui); font-size: 13.5px; color: var(--rd-muted); } .rd-about-meta { margin: 0; font-family: var(--rd-ui); font-size: 12.5px; line-height: 1.45; color: var(--rd-muted); } .rd-about-front { padding: 0 1rem; display: grid; gap: .45rem; } .rd-about-front p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rd-fg); } .rd-about-front .rd-view-note { padding: 0; } /* ---------- вид ---------- */ .rd-set { display: grid; gap: .5rem; padding: .9rem 1rem 0; } .rd-set-label { margin: 0; font-family: var(--rd-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); } .rd-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .rd-chip { font-size: 13.5px; min-height: 38px; padding: .45rem .8rem; border: 1px solid var(--rd-line); border-radius: 999px; transition: border-color .18s ease, color .18s ease, background-color .18s ease; } .rd-chip:hover { border-color: var(--rd-accent); color: var(--rd-accent); } .rd-chip:active { background: var(--rd-accent-soft); } .rd-chip[aria-pressed="true"] { border-color: var(--rd-accent); color: var(--rd-accent); background: var(--rd-accent-soft); box-shadow: inset 0 0 0 1px var(--rd-accent); } .rd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; } .rd-range:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; } .rd-range::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: var(--rd-line); } .rd-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 999px; background: var(--rd-accent); border: 0; } .rd-range::-moz-range-track { height: 3px; border-radius: 999px; background: var(--rd-line); } .rd-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: var(--rd-accent); border: 0; } /* ---------- затемнение ---------- Мягче прежнего: за панелью должно читаться, что там книга. */ .rd-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(10, 12, 14, .52); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } /* ---------- узкие экраны ---------- */ @media (max-width: 700px) { .rd-back-word { display: none; } /* короткая кнопка возврата */ .rd-back { padding: .45rem .55rem; } .rd-header { gap: .5rem; padding-inline: .6rem; min-height: 58px; } .rd-booktitle { font-size: .92rem; } .rd-ctl { font-size: 13px; padding: .5rem .7rem; } .rd-panel { width: 100vw; border-left: 0; box-shadow: none; } .rd-page-arrow { width: 30px; height: 60px; font-size: 22px; } .rd-navbtn { font-size: 12px; } /* на телефоне 2rem полей внутри страницы съедали треть строки */ .rd-chapterhead, .rd-sourcenote, .rd-extras, .rd-page { padding-inline: 1rem; } .rd-body[data-mode="paged"] .rd-main { padding-inline: 34px; } .rd-page-prev { left: -32px; } .rd-page-next { right: -32px; } } @media (max-width: 380px) { .rd-navbtn { max-width: 10ch; } .rd-pageinfo { font-size: 11px; } .rd-menuitem-meta { display: none; } }