@charset "UTF-8"; /* ============================================================================ 新中式东方漫画馆 · reader.css 阅读器视觉与阅读舒适度（orient.css 的独立配套） 设计原则（第一优先级是"读得舒服"，不是"看起来中国风"）： 1. 默认深墨阅读模式：漫画是画面主体，界面必须退到后面 2. 图片区最大化：单列居中，按原图比例，不裁切不拉伸不加边 3. 工具栏自动隐藏：滚动时退场，回滚或停顿后复现 4. 全部可调：背景色 / 亮度 / 阅读方向 / 图片宽度 / 自动翻页 5. 装饰为零：这一页不放任何纹样、印章、渐变 运行时开关（由 js/orient.js 写在 上）： data-rd-bg="ink|paper|sepia|night" 阅读底色 data-rd-dir="v|paged" 阅读方向 style="--rd-lum: 0.8" 亮度滤镜 ========================================================================== */ /* 阅读页独立令牌 —— 不继承站点纸色，自成一套 */ :root { --rd-bg: #1A1815; /* 深墨底（默认） */ --rd-bg-soft: #232019; /* 工具栏/浮层底 */ --rd-fg: #C9C1B2; /* 界面前景 */ --rd-fg-dim: #8B8375; --rd-line: rgba(201, 193, 178, .13); --rd-accent: #C96A5F; /* 朱砂在深底上的提亮值 */ --rd-img-max: 900px; /* 图片最大宽度（可调） */ --rd-lum: 1; /* 亮度 */ --rd-bar-h: 54px; --rd-ease: cubic-bezier(.32, .72, .28, 1); } /* 阅读底色四档 */ html[data-rd-bg="paper"] { --rd-bg: #EDEAE3; --rd-bg-soft: #E2DED4; --rd-fg: #3A3630; --rd-fg-dim: #7D766A; --rd-line: rgba(42,39,35,.14); --rd-accent: #B5453A; } html[data-rd-bg="sepia"] { --rd-bg: #E8DFCB; --rd-bg-soft: #DCD1B8; --rd-fg: #3E362A; --rd-fg-dim: #7E7461; --rd-line: rgba(62,54,42,.15); --rd-accent: #A8453A; } html[data-rd-bg="night"] { --rd-bg: #0B0A09; --rd-bg-soft: #14120F; --rd-fg: #A69E90; --rd-fg-dim: #6B6559; --rd-line: rgba(166,158,144,.11); --rd-accent: #B5604F; } /* ========================================================================== 页面骨架 ========================================================================== */ body.p-read { background: var(--rd-bg); background-image: none; color: var(--rd-fg); padding-bottom: 0; padding-top: 0; min-height: 100vh; transition: background-color 220ms var(--rd-ease); } body.p-read .topbar, body.p-read .footer, body.p-read .m-tabbar, body.p-read .backtop, body.p-read .noticebar { display: none !important; } /* ========================================================================== 吸顶工具栏 ========================================================================== */ .rd-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 400; height: var(--rd-bar-h); display: flex; align-items: center; gap: 14px; padding: 0 clamp(12px, 2.4vw, 26px); background: color-mix(in srgb, var(--rd-bg-soft) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rd-line); transform: translateY(0); transition: transform 260ms var(--rd-ease), opacity 200ms var(--rd-ease); will-change: transform; } .rd-bar.is-hidden { transform: translateY(-102%); opacity: 0; } /* 鼠标靠近顶部或暂停时复现 */ .rd-bar:hover { transform: none !important; opacity: 1 !important; } .rd-back { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px; font-size: 13.5px; letter-spacing: .06em; color: var(--rd-fg); border: 1px solid var(--rd-line); border-radius: 3px; transition: all 180ms var(--rd-ease); } .rd-back:hover { color: var(--rd-accent); border-color: var(--rd-accent); } .rd-back svg { width: 14px; height: 14px; } .rd-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; } .rd-title a { font-size: 14.5px; color: var(--rd-fg); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%; } .rd-title a:hover { color: var(--rd-accent); } .rd-title .rd-chap { font-size: 13.5px; color: var(--rd-fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-title .rd-sep { color: var(--rd-fg-dim); opacity: .5; flex: none; } .rd-bar-acts { flex: none; display: flex; align-items: center; gap: 6px; } .rd-btn { height: 34px; min-width: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--rd-fg); border: 1px solid var(--rd-line); border-radius: 3px; background: transparent; transition: all 180ms var(--rd-ease); white-space: nowrap; } .rd-btn:hover:not([disabled]) { color: var(--rd-accent); border-color: var(--rd-accent); } .rd-btn[disabled], .rd-btn.is-off { opacity: .34; pointer-events: none; } .rd-btn svg { width: 15px; height: 15px; } .rd-btn--icon { padding: 0; } .rd-progress-num { font-family: var(--f-num, monospace); font-size: 12.5px; color: var(--rd-fg-dim); letter-spacing: .06em; flex: none; padding: 0 4px; } /* ========================================================================== 阅读进度细线 ========================================================================== */ .rd-line-progress { position: fixed; left: 0; right: 0; top: var(--rd-bar-h); z-index: 399; height: 2px; background: transparent; pointer-events: none; } .rd-line-progress i { display: block; height: 100%; width: 0; background: var(--rd-accent); opacity: .8; transition: width 90ms linear; } /* ========================================================================== 图片流：单列居中，最大显示区域 ========================================================================== */ .rd-stage { padding-top: calc(var(--rd-bar-h) + 2px); padding-bottom: 96px; filter: brightness(var(--rd-lum)); transition: filter 200ms var(--rd-ease); } .rd-flow { max-width: var(--rd-img-max); margin: 0 auto; display: flex; flex-direction: column; transition: max-width 220ms var(--rd-ease); } /* 每张图：无边框、无圆角、无间距，紧跟成一条连续画面 */ .rd-pic { position: relative; line-height: 0; background: var(--rd-bg-soft); min-height: 120px; } .rd-pic img { width: 100%; height: auto; display: block; border: 0; border-radius: 0; background: var(--rd-bg-soft); /* 未加载完时给一个安静的底，避免白闪 */ } .rd-pic img.is-failed { min-height: 160px; opacity: 1; background: linear-gradient(var(--rd-bg-soft), var(--rd-bg-soft)), var(--rd-bg); } /* 加载中：一枚极淡的墨点呼吸，不打断阅读 */ .rd-pic.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--rd-fg-dim); border-radius: 50%; animation: rd-pulse 1.3s ease-in-out infinite; } @keyframes rd-pulse { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: .55; transform: scale(1.1); } } /* 页码角标：极淡，不干扰画面 */ .rd-pic-no { position: absolute; right: 10px; bottom: 8px; z-index: 2; padding: 1px 7px; font-family: var(--f-num, monospace); font-size: 11.5px; color: var(--rd-fg); background: rgba(0, 0, 0, .42); border-radius: 2px; line-height: 1.7; opacity: 0; transition: opacity 200ms var(--rd-ease); pointer-events: none; } .rd-pic:hover .rd-pic-no { opacity: .8; } /* 图片宽度四档 */ html[data-rd-w="narrow"] { --rd-img-max: 680px; } html[data-rd-w="normal"] { --rd-img-max: 900px; } html[data-rd-w="wide"] { --rd-img-max: 1160px; } html[data-rd-w="full"] { --rd-img-max: 100%; } /* 分页阅读方向：一次一屏 */ html[data-rd-dir="paged"] .rd-stage { padding-top: calc(var(--rd-bar-h) + 2px); padding-bottom: var(--rd-bar-h); height: 100vh; overflow: hidden; } html[data-rd-dir="paged"] .rd-flow { height: 100%; max-width: 100%; justify-content: center; } html[data-rd-dir="paged"] .rd-pic { display: none; background: transparent; min-height: 0; } html[data-rd-dir="paged"] .rd-pic.is-cur { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; } html[data-rd-dir="paged"] .rd-pic.is-cur img { width: auto; max-width: 100%; max-height: calc(100vh - var(--rd-bar-h) * 2 - 4px); object-fit: contain; margin: 0 auto; } /* 分页模式下的点击区 */ .rd-pagezone { position: fixed; top: var(--rd-bar-h); bottom: var(--rd-bar-h); width: 32%; z-index: 350; display: none; cursor: pointer; } html[data-rd-dir="paged"] .rd-pagezone { display: block; } .rd-pagezone--prev { left: 0; } .rd-pagezone--next { right: 0; } .rd-pagezone:hover { background: linear-gradient(90deg, rgba(255,255,255,.03), transparent); } .rd-pagezone--next:hover { background: linear-gradient(270deg, rgba(255,255,255,.03), transparent); } /* ========================================================================== 章末区（读完一话） ========================================================================== */ .rd-end { max-width: var(--rd-img-max); margin: 0 auto; padding: 48px clamp(16px, 3vw, 26px) 24px; text-align: center; } .rd-end-rule { height: 1px; margin-bottom: 30px; background: linear-gradient(90deg, transparent, var(--rd-line), transparent); } .rd-end-title { font-family: var(--f-display, serif); font-size: 16px; letter-spacing: .22em; color: var(--rd-fg-dim); } .rd-end-sub { margin-top: 12px; font-size: 13.5px; line-height: 2; color: var(--rd-fg-dim); } .rd-end-acts { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .rd-end-acts .rd-btn { height: 40px; padding: 0 20px; font-size: 14px; } /* 章末收藏/月票/打赏：保留系统类名契约，重绘外观 */ .rd-end .btn--collect, .rd-end .btn--ticket, .rd-end .btn--reward, .rd-end .j-rd-collect, .rd-end .j-rd-ticket, .rd-end .j-rd-gift { height: 40px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--rd-fg); border: 1px solid var(--rd-line); border-radius: 3px; cursor: pointer; transition: all 180ms var(--rd-ease); } .rd-end .btn--collect:hover, .rd-end .btn--ticket:hover, .rd-end .btn--reward:hover, .rd-end .j-rd-collect:hover, .rd-end .j-rd-ticket:hover, .rd-end .j-rd-gift:hover { color: var(--rd-accent); border-color: var(--rd-accent); } .rd-end .txt-hl { display: none; } .rd-end .is-on .txt-hl, .rd-end .btn--collect.is-on .txt-hl { display: inline; } .rd-end .is-on .txt, .rd-end .btn--collect.is-on .txt { display: none; } /* 末话 / 下架 / 无图 三种状态文案 */ .rd-end .last-chapter, .rd-end .rd-article__down { margin-top: 18px; font-size: 13.5px; line-height: 2; color: var(--rd-fg-dim); } .rd-end .last-chapter .txt1 { font-family: var(--f-display, serif); font-size: 15px; letter-spacing: .16em; color: var(--rd-fg); } .rd-end .btn--next-chapter { display: none; } /* 章末按钮已在 .rd-end-acts 提供 */ /* ========================================================================== 右侧工具轨（桌面）→ 底部横排（窄屏） ========================================================================== */ .rd-rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 397; display: flex; flex-direction: column; gap: 4px; padding: 7px 5px; background: color-mix(in srgb, var(--rd-bg-soft) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--rd-line); border-radius: 4px; transition: transform 280ms var(--rd-ease), opacity 220ms var(--rd-ease); } .rd-bar.is-hidden ~ .rd-rail { transform: translateY(-50%) translateX(64px); opacity: 0; } .rd-rail:hover { transform: translateY(-50%) !important; opacity: 1 !important; } .rd-rail-item { position: relative; width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 10px; letter-spacing: .04em; color: var(--rd-fg-dim); border-radius: 3px; cursor: pointer; transition: all 180ms var(--rd-ease); } .rd-rail-item:hover { color: var(--rd-fg); background: rgba(255, 255, 255, .06); } .rd-rail-item.is-on { color: var(--rd-accent); } .rd-rail-item svg { width: 17px; height: 17px; } .rd-rail-item .txt { line-height: 1; } /* ========================================================================== 设置面板（右侧滑出） ========================================================================== */ .rd-setting { position: fixed; right: 0; top: 0; bottom: 0; z-index: 410; width: min(336px, 90vw); display: flex; flex-direction: column; background: color-mix(in srgb, var(--rd-bg-soft) 96%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-left: 1px solid var(--rd-line); transform: translateX(102%); transition: transform 300ms var(--rd-ease); } .rd-setting.is-open { transform: none; } .rd-setting-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--rd-line); } .rd-setting-head h3 { font-family: var(--f-display, serif); font-size: 15px; letter-spacing: .2em; color: var(--rd-fg); font-weight: 400; } .rd-setting-body { flex: 1; overflow-y: auto; padding: 4px 18px 30px; } .rd-set-group { padding: 18px 0; border-bottom: 1px solid var(--rd-line); } .rd-set-group:last-child { border-bottom: 0; } .rd-set-label { font-size: 12.5px; letter-spacing: .12em; color: var(--rd-fg-dim); margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rd-set-label b { font-family: var(--f-num, monospace); font-weight: 400; color: var(--rd-fg); font-size: 12.5px; } .rd-set-opts { display: flex; gap: 7px; flex-wrap: wrap; } .rd-opt { min-width: 56px; padding: 7px 13px; font-size: 13px; text-align: center; color: var(--rd-fg-dim); border: 1px solid var(--rd-line); border-radius: 3px; background: transparent; cursor: pointer; transition: all 180ms var(--rd-ease); } .rd-opt:hover { color: var(--rd-fg); border-color: var(--rd-fg-dim); } .rd-opt.is-on { color: var(--rd-bg); background: var(--rd-fg); border-color: var(--rd-fg); } /* 底色选项带色块 */ .rd-opt--swatch { display: inline-flex; align-items: center; gap: 7px; } .rd-opt--swatch i { width: 13px; height: 13px; border-radius: 2px; border: 1px solid var(--rd-line); flex: none; } /* 亮度滑杆 */ .rd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--rd-line); outline: none; cursor: pointer; } .rd-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--rd-fg); border: 0; cursor: pointer; transition: transform 160ms var(--rd-ease); } .rd-range::-webkit-slider-thumb:hover { transform: scale(1.15); } .rd-range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--rd-fg); border: 0; cursor: pointer; } .rd-range-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--rd-fg-dim); } /* 自动翻页 */ .rd-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rd-switch { position: relative; width: 42px; height: 23px; flex: none; background: var(--rd-line); border-radius: var(--r-pill, 999px); cursor: pointer; transition: background 200ms var(--rd-ease); } .rd-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--rd-fg); transition: transform 200ms var(--rd-ease); } .rd-switch.is-on { background: var(--rd-accent); } .rd-switch.is-on::after { transform: translateX(19px); } /* 设置面板遮罩 */ .rd-veil { position: fixed; inset: 0; z-index: 405; background: rgba(0, 0, 0, .42); opacity: 0; visibility: hidden; transition: opacity 240ms var(--rd-ease), visibility 240ms var(--rd-ease); } .rd-veil.is-open { opacity: 1; visibility: visible; } /* ========================================================================== 目录抽屉（复用站点 .drawer 组件，此处做阅读器内的覆盖） ========================================================================== */ .rd-catalog.drawer { background: var(--rd-bg-soft); background-image: none; border-left-color: var(--rd-line); color: var(--rd-fg); } .rd-catalog .drawer-head { border-bottom-color: var(--rd-line); } .rd-catalog .drawer-head .dh-title { color: var(--rd-fg); } .rd-catalog .drawer-head .dh-count { color: var(--rd-fg-dim); } .rd-catalog .drawer-close { color: var(--rd-fg-dim); } .rd-catalog .drawer-close:hover { color: var(--rd-accent); background: rgba(255, 255, 255, .07); } .rd-catalog .cat-item { color: var(--rd-fg-dim); background: rgba(255, 255, 255, .03); border-color: var(--rd-line); } .rd-catalog .cat-item:hover { color: var(--rd-fg); border-color: var(--rd-fg-dim); background: rgba(255, 255, 255, .07); } .rd-catalog .cat-item.is-cur { color: var(--rd-bg); background: var(--rd-fg); border-color: var(--rd-fg); } .rd-catalog .cat-item .ci-no { color: var(--rd-fg-dim); } .rd-catalog .cat-item.is-cur .ci-no { color: rgba(26, 24, 21, .6); } .rd-catalog .ci-flag--vip { color: #C9A87C; background: rgba(201, 168, 124, .14); } .rd-catalog .ci-flag--cion { color: var(--rd-accent); background: rgba(201, 106, 95, .16); } /* 目录搜索 */ .rd-cat-search { padding: 12px 18px; border-bottom: 1px solid var(--rd-line); } .rd-cat-search input { width: 100%; height: 34px; padding: 0 12px; font-size: 13.5px; color: var(--rd-fg); background: rgba(255, 255, 255, .04); border: 1px solid var(--rd-line); border-radius: 3px; outline: none; } .rd-cat-search input:focus { border-color: var(--rd-accent); } .rd-cat-search input::placeholder { color: var(--rd-fg-dim); } /* ========================================================================== 付费 / VIP 引导（保留系统类名，重绘外观） ========================================================================== */ .rd-gate { max-width: 520px; margin: 0 auto; padding: clamp(28px, 6vh, 60px) clamp(18px, 4vw, 30px); text-align: center; } .rd-gate-mark { width: 46px; height: 46px; margin: 0 auto 20px; color: var(--rd-accent); opacity: .85; } .rd-gate-mark .seal-body { fill: none; stroke: currentColor; stroke-width: 1.5; } .rd-gate h2 { font-family: var(--f-display, serif); font-size: 19px; letter-spacing: .16em; color: var(--rd-fg); font-weight: 400; } .rd-gate .rd-gate-name { margin-top: 10px; font-size: 14px; color: var(--rd-fg-dim); } .rd-gate-price { margin: 22px 0; font-family: var(--f-num, monospace); font-size: 26px; color: var(--rd-accent); } .rd-gate-price small { font-size: 13px; margin-left: 4px; color: var(--rd-fg-dim); } .rd-gate-acts { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .rd-gate .fund-info { margin-top: 14px; font-size: 13px; color: var(--rd-fg-dim); } .rd-gate .fund-info b { font-family: var(--f-num, monospace); color: var(--rd-fg); font-weight: 400; } /* 系统弹层（buy-box / vip-box / gift-box）：阅读器内深色化 */ .rd-buy-box, .rd-vip-box { padding: 30px 24px; text-align: center; color: var(--rd-fg); } .rd-buy-box h2, .rd-vip-box h2 { font-family: var(--f-display, serif); font-size: 18px; letter-spacing: .14em; font-weight: 400; } .rd-buy-box p, .rd-vip-box p { margin-top: 10px; font-size: 14px; color: var(--rd-fg-dim); } .rd-buy-box .handle__confirm, .rd-vip-box .vip-go { margin-top: 22px; height: 42px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 14.5px; letter-spacing: .1em; cursor: pointer; color: var(--rd-bg); background: var(--rd-accent); border-radius: 3px; } .rd-buy-box .handle__check { display: block; margin-top: 16px; font-size: 13px; color: var(--rd-fg-dim); cursor: pointer; } /* ========================================================================== 打赏面板 ========================================================================== */ .gift-handles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: var(--sp-4); } .gift-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; font-size: 13px; color: var(--ink-2); background: rgba(251, 250, 246, .8); border: 1px solid var(--line-soft); border-radius: var(--r-s); cursor: pointer; transition: all 180ms var(--ease); } .gift-item:hover { border-color: var(--line-seal); background: var(--paper-white); } .gift-item.is-on { border-color: var(--seal); background: var(--seal-wash); } .gift-item .gift-name { font-family: var(--f-display); } .gift-item .gift-price { font-family: var(--f-num); font-size: 12px; color: var(--ink-4); } /* ========================================================================== 响应式：窄屏 —— 沉浸式 ========================================================================== */ @media (max-width: 1099px) { /* 工具轨改为底部横排 */ .rd-rail { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%); flex-direction: row; border-radius: 4px 4px 0 0; border-bottom: 0; padding: 5px 7px; width: auto; } .rd-bar.is-hidden ~ .rd-rail { transform: translateX(-50%) translateY(70px); } .rd-rail:hover { transform: translateX(-50%) !important; } .rd-rail-item { width: 46px; height: 42px; } .rd-stage { padding-bottom: 68px; } } @media (max-width: 767px) { :root { --rd-bar-h: 50px; } /* 工具栏：只留最必要的四项 */ .rd-bar { padding: 0 10px; gap: 8px; } .rd-back { padding: 0 10px; } .rd-back .rd-back-txt { display: none; } .rd-title { gap: 8px; } .rd-title a { max-width: 34%; font-size: 13.5px; } .rd-title .rd-chap { font-size: 12.5px; } .rd-bar-acts .rd-btn--desk { display: none; } /* 上一话/下一话移到工具轨 */ .rd-progress-num { display: none; } /* 图片流：窄屏默认铺满，去掉左右留白 */ :root, html[data-rd-w="narrow"], html[data-rd-w="normal"], html[data-rd-w="wide"] { --rd-img-max: 100%; } .rd-stage { padding-bottom: 62px; } .rd-flow { max-width: 100%; } /* 沉浸：默认收起工具栏，点屏幕中部唤出 */ body.p-read.is-immersive .rd-bar { transform: translateY(-102%); opacity: 0; } body.p-read.is-immersive .rd-rail { transform: translateX(-50%) translateY(70px); } body.p-read:not(.is-immersive) .rd-bar { transform: none; opacity: 1; } .rd-pagezone { display: none !important; } /* 手机用滚动阅读，不做点击翻页 */ .rd-end { padding: 36px 16px 20px; } .rd-end-acts { gap: 8px; } .rd-end-acts .rd-btn { flex: 1; min-width: 108px; padding: 0 14px; font-size: 13.5px; } .rd-end .btn--collect, .rd-end .btn--ticket, .rd-end .btn--reward, .rd-end .j-rd-collect, .rd-end .j-rd-ticket, .rd-end .j-rd-gift { flex: 1; min-width: 92px; padding: 0 12px; font-size: 13.5px; } .rd-rail { left: 0; right: 0; bottom: 0; width: 100%; transform: none; border-radius: 0; border-left: 0; border-right: 0; justify-content: space-around; padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0)); } .rd-bar.is-hidden ~ .rd-rail { transform: translateY(70px); } .rd-rail:hover { transform: none !important; } .rd-rail-item { width: auto; flex: 1; height: 44px; } .rd-rail-item .txt { font-size: 10px; } .rd-setting { width: 100%; } .drawer.rd-catalog { width: 100%; } .rd-catalog .cat-list { grid-template-columns: 1fr; } } /* 横屏手机：进一步压扁工具栏 */ @media (max-width: 900px) and (orientation: landscape) { :root { --rd-bar-h: 44px; } .rd-stage { padding-bottom: 52px; } } /* 打印章节列表（阅读页本身不打印） */ @media print { .rd-bar, .rd-rail, .rd-setting, .rd-veil, .rd-line-progress, .rd-pagezone { display: none !important; } body.p-read { background: #fff; color: #000; } .rd-stage { padding-top: 0; } } /* 减少动态效果 */ @media (prefers-reduced-motion: reduce) { .rd-bar, .rd-rail, .rd-setting, .rd-veil, .rd-stage, .rd-flow { transition: none !important; } .rd-pic.is-loading::after { animation: none; opacity: .4; } /* 不再自动隐藏工具栏（避免用户找不到界面） */ .rd-bar.is-hidden { transform: none; opacity: 1; } }