/* ============================================================ * 移动端顶栏 + 抽屉菜单（2026-09-20 移植自 pwsz.com 同款主题的 WP 版实现） * - ≤768px：隐藏左侧书本与封面，正文成为主体；顶栏（左站名/右汉堡） * + 抽屉（导航 + 目录树）由 book-main.js 配合——≤768 时把 .nav-box * 与 #secondary 挪到 body 下，跨过书本翻页的 transform 层叠上下文 * - >768px：顶栏/遮罩/抽屉全部隐藏，桌面端行为不变 * ============================================================ */ #mobile-bar, #mobile-mask { display: none; } @media (max-width: 768px) { /* ---------- 1. 顶栏：左站名 + 右汉堡 ---------- 实色背景，不用 backdrop-filter:blur——blur 会让滚动时每帧重绘整条 顶栏，是手机上下滑动掉帧的主因（pwsz v1.2.71 的实测结论）。 */ #mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: fixed; top: 0; left: 0; right: 0; height: 44px; padding: 0 12px; z-index: 10000; background: #28211e; color: #f3ead6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); touch-action: pan-y; } .mb-logo { color: #f3ead6; text-decoration: none; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; } /* 汉堡按钮：字符画在 ::before 上（button 本体必须留空， 否则与 ::before 的 ☰ 叠加显示两个，pwsz v1.2.69 的坑） */ #mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto; margin-left: auto; padding: 0; border: 0; background: transparent; color: #f3ead6; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 4px; } #mobile-menu-btn::before { content: "\2630"; } /* ☰ */ body.drawer-open #mobile-menu-btn::before { content: "\2715"; } /* ✕ */ #mobile-menu-btn:active { background: rgba(255, 255, 255, 0.08); } /* ---------- 2. 遮罩层 ---------- */ #mobile-mask { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 9990; opacity: 0; visibility: hidden; transition: opacity 0.25s; } body.drawer-open #mobile-mask { opacity: 1; visibility: visible; } /* ---------- 3. 左侧整本隐藏，正文成为主体 ---------- */ #book-left, .book-left-z, .book-shadow, #shoujizhuye { display: none !important; } /* ---------- 4. 抽屉面板 ---------- JS 已把 .nav-box 挪到 body 下、#secondary 挪进 .nav-box。 面板 = 顶栏以下整屏：上半导航、下半目录树（原生滚动）。 */ .nav-box { display: none !important; position: fixed !important; top: 44px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 720px !important; margin: 0 auto !important; /* 与桌面端右页同一张纸纹（book-bg2.png），保证抽屉和主题书页观感一致 */ background: #f1eee3 url(../static/book-img/book-bg2.png) repeat-y left top !important; background-size: 100% auto !important; border-top: 1px solid #d4c8a8 !important; border-left: 4px solid #8b6b4a !important; /* 书脊感竖条 */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); z-index: 10001 !important; opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease; flex-direction: column; overflow: visible !important; touch-action: pan-y; } body.drawer-open .nav-box { display: flex !important; opacity: 1; transform: translateY(0); } .nav-box .nav-z { display: none; } /* 书签装饰在抽屉里无意义 */ /* 导航链接：单列居中；点链接关抽屉由 JS 事件委托负责 */ #nav-menu { display: block !important; flex: 0 0 auto; margin: 0 !important; padding: 6px 0 !important; white-space: normal !important; border-bottom: 1px dashed #d4c8a8; } #nav-menu > a { display: block !important; width: 100% !important; box-sizing: border-box; text-align: center; padding: 13px 16px !important; margin: 0 !important; font-size: 15px; line-height: 1.5; color: #5a4a32; text-decoration: none; } #nav-menu > a.current { color: #a07848; font-weight: 600; } #nav-menu .page-s { display: none; } /* 目录树区：占满抽屉剩余高度，原生滚动（移动端不初始化 PerfectScrollbar） */ #secondary { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1 1 auto; min-height: 0; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; } #catalog-tree { padding: 4px 14px 20px !important; } /* ---------- 5. 正文改用原生滚动 ---------- 桌面端 #postbox 由 PerfectScrollbar 接管（overflow:hidden + JS 模拟滚动）， 手机端这套是灾难：无惯性、无滚动链，且从屏幕底部起手滑动必然落空。 ≤768 时 book-main.js 会销毁 PS 实例，这里配合放开原生滚动。 （ID 选择器 + !important 才能压过 PS 的 .ps{overflow:hidden!important}） */ #postbox { height: 100% !important; /* 顶栏是 fixed 的 44px，不补偿的话文章标题会被压在顶栏底下 */ padding-top: 44px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */ overscroll-behavior-y: auto; touch-action: pan-y; } /* PS 的伪元素滚动条在手机上不要出现 */ #postbox .ps__rail-y, #postbox .ps__rail-x { display: none !important; } /* ---------- 6. 底部固定条不许拦截触摸 ---------- #footer 是 fixed 元素，且不是 #postbox 的后代：手指落在它上面时， 触摸目标链里根本没有滚动容器 → 从屏幕最底部上滑完全没反应。 这是“滑到底后想往上滑没反应”的直接原因。 pointer-events:none 让下方正文接管触摸；ADMIN 链接单独恢复可点。 */ #footer { pointer-events: none; } #footer a { pointer-events: auto; } /* ---------- 6.1 ADMIN 入口手机端不显示 ---------- #footer-admin 是 fixed 在左下角的后台登录入口。手机端它既压住正文， 又等于把登录地址摆给所有访客看，2026-09-20 按站长要求在 ≤768px 隐藏。 （桌面端保留，老张自己进后台方便） */ #footer-admin { display: none !important; } /* ---------- 6.1b 底部版权行手机端不显示 ---------- 站长要的只是“手机端最底部那行 © … & 驱动 Typecho & 主题 日记本”消失， 不是全站删除。上一版我把