/* ========================================================= 拾光书城 · 阅读器样式 设计要点： - 主题/字号/行距通过 CSS 变量注入，改设置零重排 - 首屏渲染前内联脚本已应用偏好，无闪烁 - 触屏设备两侧点按翻页，桌面键盘 ←/→ 翻页 ========================================================= */ /* ---- 五种阅读主题（data-theme 在 上） ---- */ html[data-theme="light"] { --rd-bg: #f2efe6; --rd-fg: #2d2a24; --rd-dim: #8f8878; --rd-bar: rgba(242, 239, 230, .94); --rd-border: #ddd8c8; --rd-accent: #4f6ef7; } html[data-theme="dark"] { --rd-bg: #131313; --rd-fg: #c8c8c8; --rd-dim: #6f6f6f; --rd-bar: rgba(19, 19, 19, .94); --rd-border: #2a2a2a; --rd-accent: #6c86ff; } html[data-theme="green"] { --rd-bg: #c9e6cc; --rd-fg: #2c3a2d; --rd-dim: #6c7d6d; --rd-bar: rgba(201, 230, 204, .94); --rd-border: #a9c9ac; --rd-accent: #2f8f4f; } html[data-theme="sepia"] { --rd-bg: #f0e7cf; --rd-fg: #5b4636; --rd-dim: #9a8a70; --rd-bar: rgba(240, 231, 207, .94); --rd-border: #ddd0ac; --rd-accent: #b06a2a; } /* 鎏金光芒：赛博鎏金（暗黑底 + 鎏金霓虹 + 金沙粒子） */ html[data-theme="gold"] { --rd-bg: #0d0a06; --rd-fg: #f0dfc0; --rd-dim: #a88a52; --rd-bar: rgba(13, 10, 6, .94); --rd-border: #3a2c14; --rd-accent: #e8b93a; /* html 层同时铺暗底：任何背景层失效也绝不露出浅色（修复 iOS 多层 fixed 背景撕裂） */ background: #0d0a06; } html[data-theme="gold"] body { /* 底部一圈鎏金辉光。no-repeat 防长页面平铺重复； 只保留单侧辉光，避免短页面出现上下对称的"拼接感" */ background: radial-gradient(90% 42% at 50% 100%, rgba(232, 185, 58, .22), transparent 70%) no-repeat, #0d0a06; } /* 系统开启"减少动态效果"时：粒子引擎停用，用静态鎏金撒点兜底（纯 CSS 零动画） */ @media (prefers-reduced-motion: reduce) { html[data-theme="gold"] body { background-image: radial-gradient(rgba(232, 185, 58, .4) 1.2px, transparent 1.9px), radial-gradient(rgba(255, 220, 140, .3) 1.2px, transparent 1.9px), radial-gradient(rgba(255, 158, 186, .28) 1.2px, transparent 1.9px), radial-gradient(120% 60% at 50% 108%, rgba(232, 185, 58, .2), transparent 62%); background-size: 83px 83px, 61px 61px, 107px 107px, auto; background-position: 0 0, 17px 29px, 41px 7px, 0 0; background-repeat: repeat, repeat, repeat, no-repeat; background-color: #0d0a06; } } html[data-theme="gold"] .rd-sep { position: relative; background: linear-gradient(90deg, transparent, var(--rd-accent) 18%, #ffe9a8 50%, var(--rd-accent) 82%, transparent); box-shadow: 0 1px 6px rgba(232, 185, 58, .45); } /* 鎏金细节：分隔线中央菱形饰坠 */ html[data-theme="gold"] .rd-sep::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: linear-gradient(135deg, #ffe9a8, #e8b93a); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 8px rgba(232, 185, 58, .9); } /* 金色主题禁用故障撕裂，改为烫金流光标题（纯 GPU 合成动画） */ html[data-theme="gold"] .rd-glitch::before, html[data-theme="gold"] .rd-glitch::after { display: none; } html[data-theme="gold"] #rdH1 { background: linear-gradient(100deg, #c9a227 0%, #e8b93a 25%, #fff3c4 50%, #e8b93a 75%, #c9a227 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 3px rgba(232, 185, 58, .4)); animation: goldShine 6s linear infinite; } @keyframes goldShine { from { background-position: 0% 0; } to { background-position: -200% 0; } } html[data-theme="fire"] { --rd-bg: #080504; --rd-fg: #f2dfc8; --rd-dim: #9c7c5e; --rd-bar: rgba(8, 5, 4, .94); --rd-border: #241710; --rd-accent: #f59f00; } /* 烈焰主题：即使系统关闭动画（减少动效），也有静态火光渐变兜底 （no-repeat 防长页面平铺重复；不使用 fixed，iOS 不支持） */ html[data-theme="fire"] body { background: radial-gradient(120% 55% at 50% 108%, rgba(255, 122, 26, .28), transparent 62%) no-repeat, var(--rd-bg); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--rd-bg); color: var(--rd-fg); transition: background .18s ease; } a { color: inherit; } button { font-family: inherit; } /* 章目标题故障撕裂 */ .rd-glitch { position: relative; } .rd-glitch::before, .rd-glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; text-align: center; } .rd-glitch::before { color: var(--rd-accent); animation: rdGlitchA 4.2s steps(1) infinite; } .rd-glitch::after { color: #ff5c5c; animation: rdGlitchB 4.2s steps(1) infinite; animation-delay: 1.4s; } @keyframes rdGlitchA { 0%, 91% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); } 92% { opacity: 1; transform: translate(-3px, 1px); clip-path: inset(12% 0 58% 0); } 94% { opacity: 1; transform: translate(3px, -1px); clip-path: inset(55% 0 12% 0); } 96% { opacity: 1; transform: translate(-2px, 0); clip-path: inset(30% 0 42% 0); } 98% { opacity: 1; transform: translate(2px, 1px); clip-path: inset(70% 0 4% 0); } 99%, 100% { opacity: 0; } } @keyframes rdGlitchB { 0%, 91% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); } 92% { opacity: 1; transform: translate(3px, -1px); clip-path: inset(60% 0 10% 0); } 94% { opacity: 1; transform: translate(-3px, 1px); clip-path: inset(8% 0 62% 0); } 96% { opacity: 1; transform: translate(2px, 0); clip-path: inset(40% 0 30% 0); } 98% { opacity: 1; transform: translate(-2px, -1px); clip-path: inset(75% 0 2% 0); } 99%, 100% { opacity: 0; } } /* ---- 顶部栏 ---- */ .rd-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--rd-bar); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rd-border); } .rd-back { font-size: 18px; padding: 4px 10px; border-radius: 8px; color: var(--rd-dim); } .rd-back:hover { color: var(--rd-accent); } .rd-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .rd-book { font-size: 12px; color: var(--rd-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-ch { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-actions { display: flex; gap: 8px; } .rd-btn { padding: 5px 14px; border-radius: 8px; border: 1px solid var(--rd-border); background: transparent; color: var(--rd-fg); font-size: 14px; cursor: pointer; } .rd-btn:hover { color: var(--rd-accent); border-color: var(--rd-accent); } /* ---- 烈焰主题：底部火焰粒子画布（仅火焰主题可见） ---- */ #rdFlame { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .rd-main { position: relative; z-index: 1; } /* ---- 正文 ---- */ .rd-main { max-width: 760px; margin: 0 auto; padding: 26px 20px 40px; /* 短章节也铺满视口：内容不再"挤在上半"，下半不留突兀空白 */ min-height: calc(100vh - 60px); } .rd-body h1 { font-size: 22px; text-align: center; margin: 8px 0 0; font-weight: 700; } .rd-sep { width: 44px; height: 2px; margin: 16px auto 26px; background: var(--rd-accent); opacity: .55; border-radius: 2px; } #rdParas { transition: opacity .16s ease; } #rdParas.changing { opacity: 0; } #rdParas p { margin: 0 0 1em; font-size: var(--rd-fs, 18px); line-height: var(--rd-lh, 1.9); text-indent: 2em; text-align: justify; word-break: break-word; } /* ---- 底部翻页 ---- */ .rd-turn { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--rd-border); } .turn-btn { padding: 8px 20px; border-radius: 99px; border: 1px solid var(--rd-border); font-size: 14px; color: var(--rd-fg); } .turn-btn:hover { color: var(--rd-accent); border-color: var(--rd-accent); } .turn-btn.off { opacity: .35; pointer-events: none; } .rd-progress { font-size: 13px; color: var(--rd-dim); font-variant-numeric: tabular-nums; } /* ---- 遮罩与抽屉 ---- */ .rd-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .4); border: 0; } .rd-sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%); z-index: 70; width: 100%; max-width: 640px; max-height: 72vh; background: var(--rd-bg); border: 1px solid var(--rd-border); border-bottom: 0; border-radius: 16px 16px 0 0; padding: 0; margin: 0; display: flex; flex-direction: column; transition: transform .24s cubic-bezier(.3, .7, .3, 1); } .rd-sheet.open { transform: translate(-50%, 0); } .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rd-border); font-weight: 600; } .toc-list { list-style: none; margin: 0; padding: 8px 0 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .toc-list a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 15px; } .toc-list a:hover { background: color-mix(in srgb, var(--rd-accent) 10%, transparent); } .toc-list a.on { color: var(--rd-accent); font-weight: 600; } .toc-idx { width: 28px; flex-shrink: 0; text-align: right; color: var(--rd-dim); font-size: 13px; font-variant-numeric: tabular-nums; } /* ---- 设置面板 ---- */ .rd-settings { padding-bottom: 18px; } .set-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; } .set-label { width: 44px; flex-shrink: 0; color: var(--rd-dim); font-size: 14px; } .set-row-theme { flex-wrap: wrap; } .set-theme-name { margin-left: auto; color: var(--rd-accent); font-size: 12px; font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .04em; } .theme-swatches { display: flex; gap: 10px; } .theme-swatches button { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--rd-border); font-size: 15px; cursor: pointer; color: #333; } .theme-swatches button.on { border-color: var(--rd-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rd-accent) 25%, transparent); } .theme-swatches button[data-theme="light"] { background: #f2efe6; } .theme-swatches button[data-theme="dark"] { background: #131313; color: #c8c8c8; } .theme-swatches button[data-theme="green"] { background: #c9e6cc; } .theme-swatches button[data-theme="sepia"] { background: #f0e7cf; } .theme-swatches button[data-theme="fire"] { background: linear-gradient(135deg, #ff7a1a, #c92a2a); color: #1c0f02; } .theme-swatches button[data-theme="gold"] { background: linear-gradient(135deg, #f3dfa8, #c9a227); color: #3d2c05; } .set-btn { min-width: 42px; } .set-val { min-width: 34px; text-align: center; color: var(--rd-dim); font-size: 14px; font-variant-numeric: tabular-nums; } .rd-ver { text-align: center; color: var(--rd-dim); font-size: 12px; font-family: Consolas, "Cascadia Mono", monospace; padding: 10px 20px 4px; margin: 0; } /* ---- 移动端点按翻页区 ---- */ .tap-zone { display: none; } @media (pointer: coarse) { .tap-zone { display: block; position: fixed; top: 0; bottom: 0; width: 16%; z-index: 30; } .tap-left { left: 0; } .tap-right { right: 0; } } /* ---- 宽屏与动效偏好 ---- */ @media (min-width: 900px) { .rd-main { max-width: 720px; } .tap-zone { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }