/* Reader page desktop adaptations; mobile keeps original styles */ .pt-pc-header { display: none; } .pt-reader-menubar { display: none; } /* 移動端與首屏：head 內腳本會先寫入 --reader-*，此處在 read.js 前即套用，避免灰底閃爍 */ .pt-read { background-color: var(--reader-inner-bg, #ffffff); } /* 章節頁廣告溫馨提示（檢舉按鈕下方、正文前） */ .pt-reader-ad-tip { margin: 0 0 0.1rem; padding: 0 0.15rem 0.08rem; font-size: 0.12rem; line-height: 1.5; text-align: center; color: #999; } body.pt-body-night .pt-reader-ad-tip { color: #a8a8a8; } /* * 夜間正文色與 read.js 一致；tpl 在開頭即加 pt-body-night（#1a1a1a）， * 若僅在 read.js 尾端才寫 .pt-read-cont 內聯色，首屏會先繼承 .pt-read.color32 導致字色閃爍。 */ body.pt-body-night .pt-read .pt-read-cont, body.pt-body-night .pt-read-cont { color: #c0c0c0 !important; } body.pt-body-night .pt-read .pt-read-cont #pt-pop, body.pt-body-night .pt-read-cont #pt-pop { color: #c0c0c0 !important; } body.pt-body-night .pt-read > .size18 { color: #d6d6d6 !important; } @media (max-width: 767px) { /* 100vw 含垂直滾動條寬度時會略大於可視區，整頁可被橫向拖出空白；改為 100% + 禁止橫向平移 */ html { overflow-x: hidden; overflow-x: clip; max-width: 100%; width: 100%; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; } body { background: var(--reader-outer-bg, #f2f2f7) !important; overflow-x: hidden !important; overflow-x: clip; max-width: 100%; width: 100%; touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; } /* 與 PC 卡片式佈局脫鉤，避免窄屏下寬度/長單詞撐破版心 */ .pt-read { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; border: none; border-radius: 0; box-shadow: none; overflow-x: hidden; box-sizing: border-box; } .pt-read .pt-read-cont, .pt-read-cont { max-width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; } .pt-read .pt-read-cont #pt-pop, .pt-read-cont #pt-pop { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* * 從 PC 切到窄屏時，須與 global.css 移動端一致（勿改翻頁鈕為塊級—原版為 fixed 貼左右中線）。 * global: .pt-mask-title/.pt-tip=absolute; .pt-pre/.pt-next=fixed+top50%+left0/right0; .pt-mask-btm/.pt-pop-set=fixed底 */ .pt-mask { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; background: transparent !important; } .pt-mask .pt-mask-title { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: 100% !important; height: 0.48rem !important; line-height: 0.48rem !important; background-color: #000 !important; margin: 0 !important; box-sizing: border-box !important; transform: none !important; } /* 與 global.css：.pt-next-btn,.pt-pre-btn{top:50%;margin-top:-.2rem;position:fixed;...} + left/right */ .pt-mask .pt-pre-btn, .pt-mask .pt-next-btn { position: fixed !important; top: 50% !important; margin-top: -0.2rem !important; width: 0.75rem !important; height: 0.4rem !important; line-height: 0.4rem !important; text-align: center !important; background-color: rgba(0, 0, 0, 0.8) !important; transform: none !important; box-sizing: border-box !important; } .pt-mask .pt-pre-btn { left: 0 !important; right: auto !important; } .pt-mask .pt-next-btn { right: 0 !important; left: auto !important; } .pt-mask .pt-mask-btm { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: 0.5rem !important; margin: 0 !important; transform: none !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-around !important; box-sizing: border-box !important; border-radius: 0 !important; box-shadow: none !important; background-color: #000 !important; } .pt-mask .pt-pop-set { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0.5rem !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0.2rem !important; transform: none !important; box-sizing: border-box !important; } .pt-mask .pt-tip { position: absolute !important; transform: none !important; box-sizing: border-box !important; } } @media (min-width: 768px) { body { background: var(--reader-outer-bg, #edf0f4) !important; transition: background-color .2s ease; } .pt-pc-header { display: block; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(960px, calc(100vw - 24px)); z-index: 2147483647 !important; background: #fff; border: 1px solid var(--reader-inner-border, #e5e5e5); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: background-color .2s ease, box-shadow .2s ease; } .pt-pc-header-inner { height: 64px; margin: 0; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; max-width: none; } .pt-pc-logo { font-size: 24px; font-weight: 700; line-height: 1; } .pt-pc-menu { display: flex; align-items: center; gap: 18px; } .pt-pc-menu-item { font-size: 15px; color: #333; padding: 8px 12px; border-radius: 6px; transition: background-color .2s ease, color .2s ease; } .pt-pc-menu-item:visited { color: #333; } .pt-pc-menu-item:hover { color: #f55; background: #fff1f1; } .pt-pc-header.pt-header-dark { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .pt-pc-header.pt-header-dark .pt-pc-logo, .pt-pc-header.pt-header-dark .pt-pc-menu-item { color: #d0d0d0; } .pt-pc-header.pt-header-dark .pt-pc-menu-item:visited { color: #d0d0d0; } .pt-pc-header.pt-header-dark .pt-pc-menu-item:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } .pt-read { max-width: 960px; margin: 0 auto; padding-top: 76px; /* * 右側固定菜單是相對視口定位的，寬屏時在 960 卡片外的留白裡，不需要在卡片內再留 84px。 * 僅在視口較窄、菜單可能壓到正文時用 clamp 留出少量右內邊距。 */ padding-right: clamp(0px, 1120px - 100vw, 72px); background-color: var(--reader-inner-bg, #ffffff); border: 1px solid var(--reader-inner-border, #e5e5e5); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .pt-reader-menubar { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 12px; margin: 0 24px 16px; border-radius: 8px; border: 1px solid #ececec; background: var(--reader-inner-bg, #ffffff); color: #777; font-size: 14px; } .pt-reader-menu-item { color: #666; } .pt-reader-menu-item:hover { color: #f55; } .pt-reader-menu-sep { color: #aaa; } .pt-reader-menu-current { color: #333; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-read .pt-read-cont { font-size: 20px; line-height: 1.9; padding-left: 24px; padding-right: 24px; box-sizing: border-box; max-width: 100%; } .pt-read .pt-read-cont #pt-pop { max-width: 100%; } .pt-read > .size18 { margin-top: 0; } .pt-read .pt-read-cont p { line-height: 1.9; margin-bottom: 16px; } .pt-read .pt-chapter-nav { margin: 0 24px 12px; padding: 6px 8px; border: 1px solid var(--reader-inner-border, #ececec); border-radius: 8px; background: var(--reader-inner-bg, #ffffff); } .pt-read .pt-chapter-nav .border-c { border: 0; } .pt-read .pt-chapter-nav .pt-prechapter, .pt-read .pt-chapter-nav .pt-catalogue, .pt-read .pt-chapter-nav .pt-nextchapter { width: 25%; height: 34px; line-height: 34px; border-right: 1px solid #e1e1e1; text-align: center; } .pt-read .pt-chapter-nav a, .pt-read .pt-chapter-nav .color62 { color: #444 !important; font-weight: 500; } .pt-read .pt-chapter-nav .pt-nextchapter { border-right: 0; } .pt-read .pt-recomment { background: var(--reader-inner-bg, #ffffff); border-radius: 10px; margin: 12px 0; padding-bottom: 8px; } .pt-read .pt-recomment-cont { display: flex !important; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0; padding: 0 15px; } .pt-read .pt-recomment-item.flex-wrp { padding-left: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 12px; box-sizing: border-box; } .pt-read .pt-recomment-item { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); width: calc(50% - 9px); min-width: 0; margin: 0; border-bottom: 1px solid #f0f0f0; } .pt-read .pt-recomment-item > a:first-child { flex: 0 0 auto; display: block; line-height: 0; width: 96px; overflow: hidden; border-radius: 4px; align-self: flex-start; } .pt-read .pt-recomment-item > a:first-child img { width: 96px !important; height: 128px !important; max-width: none !important; margin: 0 !important; object-fit: cover; display: block; } .pt-read .pt-recomment-item > .flex-item { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; width: auto !important; padding-top: 0; } .pt-read .pt-recomment-item .flex-between > .size14:first-child { flex: 1 1 0; min-width: 0; padding-right: 8px; } .pt-read .pt-recomment-item .flex-between > .size14:first-child a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-read .pt-recomment-item .flex-between > .color2.size14 { flex-shrink: 0; white-space: nowrap; font-size: 13px; } .pt-read .pt-recomment-item .compulsory-row { min-width: 0; } .pt-read .pt-recomment-item .flex-between:last-child { min-width: 0; } .pt-read .pt-recomment-item .flex-between:last-child .color5 { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-read .pt-recomment-item .flex-between:last-child .color5 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-read .pt-recomment-item .flex-between:last-child .pt-recomment-label { flex-shrink: 0; margin-left: 8px; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* PC: cancel swipe-to-show menu and pin controls on right */ .tishi { display: none !important; } .pt-mask { display: block !important; position: fixed !important; top: 50% !important; right: max(12px, calc((100vw - 960px) / 2 - 68px)) !important; left: auto !important; bottom: auto !important; width: 56px !important; height: auto !important; transform: translateY(-50%); z-index: 2000 !important; background: transparent !important; } .pt-mask .pt-pre-btn, .pt-mask .pt-next-btn, .pt-mask .pt-mask-title { z-index: 1500 !important; } .pt-mask .pt-mask-title, .pt-mask .pt-pre-btn, .pt-mask .pt-next-btn, .pt-mask .pt-pop-shade, .pt-mask .pt-pop-shade2 { display: none !important; } .pt-mask .pt-mask-btm { display: flex !important; flex-direction: column; align-items: center; justify-content: center; position: static !important; width: 56px; height: auto; padding: 8px 0; border-radius: 10px; border: 1px solid var(--reader-inner-border, #e2e6ed); background: var(--reader-inner-bg, #ffffff); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } .pt-mask .pt-mask-btm > div { width: 100%; padding: 8px 0; } .pt-mask .pt-mask-btm .flex-wrp { width: 100%; min-height: 54px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .pt-mask .pt-mask-btm .pt-catalog-icon { width: 18px; height: 18px; margin: 0 auto; filter: brightness(0) saturate(100%) invert(34%) sepia(5%) saturate(10%) hue-rotate(314deg) brightness(98%) contrast(88%); } .pt-mask .pt-mask-btm .size10 { width: 100%; text-align: center; line-height: 1.2; font-size: 11px; margin: 0; white-space: nowrap; color: #555 !important; } .pt-mask .pt-pop-set { position: fixed !important; top: 50% !important; right: max(78px, calc((100vw - 960px) / 2 + 4px)) !important; bottom: auto !important; left: auto !important; transform: translateY(-50%); width: 320px; padding: 16px 14px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.92); z-index: 2001 !important; } /* Newly added blocks should follow runtime background color changes */ .pt-read .pt-reader-menubar, .pt-read .pt-chapter-nav, .pt-read .pt-recomment { background-color: var(--reader-inner-bg, #ffffff) !important; } } @media (min-width: 1200px) { .pt-read .pt-recomment-item { flex-basis: calc(33.3333% - 12px); max-width: calc(33.3333% - 12px); width: calc(33.3333% - 12px); } /* 三列時卡片更窄，封面略縮小以與書名/簡介比例協調 */ .pt-read .pt-recomment-item > a:first-child { width: 78px; } .pt-read .pt-recomment-item > a:first-child img { width: 78px !important; height: 104px !important; } } /* Reader night mode adaptation for newly added desktop blocks */ @media (min-width: 768px) { body.pt-body-night .pt-reader-menubar { background: #232323; border-color: #353535; color: #a9a9a9; } body.pt-body-night .pt-reader-menu-item { color: #bcbcbc; } body.pt-body-night .pt-reader-menu-item:hover { color: #ff8f8f; } body.pt-body-night .pt-reader-menu-sep { color: #666; } body.pt-body-night .pt-reader-menu-current { color: #d1d1d1; } body.pt-body-night .pt-read .pt-chapter-nav { background: #232323; border-color: #353535; } body.pt-body-night .pt-read .pt-chapter-nav .border-c { border-color: #3a3a3a; } body.pt-body-night .pt-read .pt-chapter-nav a, body.pt-body-night .pt-read .pt-chapter-nav .color62 { color: #c4c4c4 !important; } body.pt-body-night .pt-read .pt-prechapter, body.pt-body-night .pt-read .pt-catalogue { border-right-color: #3a3a3a; } body.pt-body-night .pt-read .pt-recomment { background: #232323; } body.pt-body-night .pt-read .pt-recomment-title { color: #d6d6d6; } body.pt-body-night .pt-read .pt-recomment-item { border-bottom-color: #343434; } body.pt-body-night .pt-read .pt-recomment-item .color7, body.pt-body-night .pt-read .pt-recomment-item .color5, body.pt-body-night .pt-read .pt-recomment-item .color4 { color: #bdbdbd !important; } body.pt-body-night .pt-read .pt-recomment-item .pt-recomment-label { border-color: #4a4a4a; color: #b0b0b0; } body.pt-body-night .pt-mask .pt-mask-btm { border-color: #3a3a3a; background: var(--reader-inner-bg, #1f1f1f); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } body.pt-body-night .pt-mask .pt-mask-btm .size10 { color: #d0d0d0 !important; } body.pt-body-night .pt-mask .pt-mask-btm .pt-catalog-icon { filter: brightness(0) saturate(100%) invert(86%) sepia(2%) saturate(0%) hue-rotate(185deg) brightness(90%) contrast(90%); } }