diff --git a/.cursor/totoga2-video-notes.md b/.cursor/totoga2-video-notes.md new file mode 100644 index 0000000..10c888d --- /dev/null +++ b/.cursor/totoga2-video-notes.md @@ -0,0 +1,3 @@ +# 影片頁筆記(索引) + +編輯規格以 **`docs/totoga2-video-notes.md`** 為準;對應頁面為 `extra/totoga2-video.html`。 diff --git a/assets/css/style.css b/assets/css/style.css index 3f56bb6..060bfde 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -61,8 +61,8 @@ header { position: relative; } -/* 導覽列 */ -nav { +/* 導覽列(排除 portal、B 站分集 tab 等自帶版面之 nav,避免 space-between/大 padding 破壞) */ +nav:not(.portal-nav):not(.bilivideo-episode-nav) { background-color: var(--black); padding: 0.8rem; display: flex; @@ -86,25 +86,20 @@ nav { } -nav ul { +nav:not(.portal-nav):not(.bilivideo-episode-nav) ul { list-style: none; display: flex; justify-content: center; gap: 24px; } +/* 不寫 color:主色/hover 交給 .portal-nav 與全站 `a {}`;避免黃字規則意外影響可及元件 */ nav a { - color: var(--primary); text-decoration: none; font-size: 0.95rem; letter-spacing: 1px; } - -nav a:hover { - color: white; -} - .portal-nav li { position: relative; padding-bottom: 8px; @@ -2119,7 +2114,7 @@ body.ebook-ssg2-page .ebook-intro.section { body.ebook-ssg2-page .flip-ebook-shell { position: relative; width: 100%; - max-width: 1100px; + max-width: min(1000px, 96vw); margin: 0 auto 2rem; border-radius: 14px; overflow: hidden; @@ -2143,6 +2138,63 @@ body.ebook-ssg2-page .flip-ebook-aspect iframe { top: 0; } +/* PDF.js + PageFlip:與 iframe 相同,填滿 padding-top 預留區,否則父層 height:0 會看不到內容 */ +body.ebook-ssg2-page .flip-ebook-aspect > #my-flipbook { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + overflow: auto; +} + +body.ebook-ssg2-page .flip-ebook-aspect .ebook-pdf-error { + margin: 0; + padding: 1rem 1.25rem; + color: #5c3d00; + background: #fff7da; + border-radius: 10px; + font-size: 0.95rem; + line-height: 1.55; +} + +body.ebook-ssg2-page .flip-ebook-aspect .ebook-pdf-error code { + font-size: 0.85em; + word-break: break-all; +} + +/* PageFlip + PDF.js:不用 iframe 的 padding-top 比例盒,避免書被壓小、擠扁 */ +body.ebook-ssg2-page .flip-ebook-aspect.flip-ebook-aspect--pageflip { + height: auto; + padding-top: 0; + min-height: 0; + display: flex; + align-items: center; + justify-content: center; + padding: clamp(12px, 2vw, 20px); + background: #0a0a0a; +} + +body.ebook-ssg2-page .flip-ebook-aspect--pageflip > #my-flipbook { + position: static; + width: auto; + height: auto; + max-width: 100%; + overflow: visible; +} + +body.ebook-ssg2-page #my-flipbook .page { + background: #fff; +} + +body.ebook-ssg2-page #my-flipbook .page canvas { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + body.ebook-ssg2-page .ebook-back-link { text-align: center; margin: 0 0 2.5rem; @@ -2178,7 +2230,7 @@ body.totoga2-page.totoga2-video-copy-page { overflow-x: hidden; } -/* 節目影片複本:上/中/下集在播放器外殼內、緊貼 iframe 上方;維持全站 .btn 黃膠囊 */ +/* 節目影片複本:上/中/下集在播放器外殼內、緊貼 iframe 下方;維持全站 .btn 黃膠囊 */ body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell { max-width: 960px; margin-left: auto; @@ -2208,29 +2260,48 @@ body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep { opacity: 0.55; } -body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav { +/* DOM 上 tablist 在 panels 前(見 totoga2-video.html);order 讓畫面仍為「影片在上、分集在下」 */ +body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav { + order: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; - padding: 12px 14px 14px; + width: 100%; + max-width: none; + box-sizing: border-box; + padding: 14px 14px 12px; margin: 0; background: #0a0a0a; - border-bottom: 1px solid rgba(255, 204, 0, 0.28); + border-top: 1px solid rgba(255, 204, 0, 0.28); + flex-shrink: 0; } -body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .btn { +body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .btn { margin: 0; + flex: 0 0 auto; opacity: 0.92; + color: #141414; + -webkit-text-fill-color: #141414; + font-family: inherit; } -body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .bilivideo-episode-nav__tab--active { +body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .btn:hover, +body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .btn:focus-visible { + color: #141414; + -webkit-text-fill-color: #141414; +} + +body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .bilivideo-episode-nav__tab--active { opacity: 1; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.32); } body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell { + display: flex; + flex-direction: column; + align-items: stretch; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 204, 0, 0.38); @@ -2239,6 +2310,9 @@ body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell { } body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panels { + order: 1; + flex: 0 0 auto; + min-width: 0; overflow: hidden; background: #000; } diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg b/assets/images/totoga2/ebook/totoga2_ebook01.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg rename to assets/images/totoga2/ebook/totoga2_ebook01.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_02.jpg b/assets/images/totoga2/ebook/totoga2_ebook02.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_02.jpg rename to assets/images/totoga2/ebook/totoga2_ebook02.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_03.jpg b/assets/images/totoga2/ebook/totoga2_ebook03.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_03.jpg rename to assets/images/totoga2/ebook/totoga2_ebook03.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_04.jpg b/assets/images/totoga2/ebook/totoga2_ebook04.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_04.jpg rename to assets/images/totoga2/ebook/totoga2_ebook04.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_05.jpg b/assets/images/totoga2/ebook/totoga2_ebook05.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_05.jpg rename to assets/images/totoga2/ebook/totoga2_ebook05.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_06.jpg b/assets/images/totoga2/ebook/totoga2_ebook06.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_06.jpg rename to assets/images/totoga2/ebook/totoga2_ebook06.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_07.jpg b/assets/images/totoga2/ebook/totoga2_ebook07.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_07.jpg rename to assets/images/totoga2/ebook/totoga2_ebook07.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_08.jpg b/assets/images/totoga2/ebook/totoga2_ebook08.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_08.jpg rename to assets/images/totoga2/ebook/totoga2_ebook08.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_09.jpg b/assets/images/totoga2/ebook/totoga2_ebook09.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_09.jpg rename to assets/images/totoga2/ebook/totoga2_ebook09.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_10.jpg b/assets/images/totoga2/ebook/totoga2_ebook10.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_10.jpg rename to assets/images/totoga2/ebook/totoga2_ebook10.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_11.jpg b/assets/images/totoga2/ebook/totoga2_ebook11.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_11.jpg rename to assets/images/totoga2/ebook/totoga2_ebook11.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_12.jpg b/assets/images/totoga2/ebook/totoga2_ebook12.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_12.jpg rename to assets/images/totoga2/ebook/totoga2_ebook12.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_13.jpg b/assets/images/totoga2/ebook/totoga2_ebook13.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_13.jpg rename to assets/images/totoga2/ebook/totoga2_ebook13.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_14.jpg b/assets/images/totoga2/ebook/totoga2_ebook14.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_14.jpg rename to assets/images/totoga2/ebook/totoga2_ebook14.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_15.jpg b/assets/images/totoga2/ebook/totoga2_ebook15.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_15.jpg rename to assets/images/totoga2/ebook/totoga2_ebook15.jpg diff --git a/assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_16.jpg b/assets/images/totoga2/ebook/totoga2_ebook16.jpg similarity index 100% rename from assets/images/totoga2/ebook/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_16.jpg rename to assets/images/totoga2/ebook/totoga2_ebook16.jpg diff --git a/assets/images/2023_電子書_無限挑戰六六歌2_final跨頁.pdf b/assets/images/totoga2/totoga2.pdf similarity index 100% rename from assets/images/2023_電子書_無限挑戰六六歌2_final跨頁.pdf rename to assets/images/totoga2/totoga2.pdf diff --git a/assets/images/totoga2/web/cover.jpg b/assets/images/totoga2/web/cover.jpg new file mode 100644 index 0000000..77c3b8c Binary files /dev/null and b/assets/images/totoga2/web/cover.jpg differ diff --git a/docs/totoga2-copy-video-notes.md b/docs/totoga2-video-notes.md similarity index 87% rename from docs/totoga2-copy-video-notes.md rename to docs/totoga2-video-notes.md index 07d4f26..f5a204b 100644 --- a/docs/totoga2-copy-video-notes.md +++ b/docs/totoga2-video-notes.md @@ -1,6 +1,6 @@ -# 筆記:`extra/totoga2-copy-video.html`(站主/編輯用,不對讀者顯示) +# 筆記:`extra/totoga2-video.html`(站主/編輯用,不對讀者顯示) -對應檔案:`extra/totoga2-copy-video.html`。 +對應檔案:`extra/totoga2-video.html`。 - 以下為 Bilibili 嵌入播放器(16:9)。請用上集/中集/下集分頁切換;若無法播放請至站內搜尋同一 BV 號。中集、下集可將 iframe 的 `bvid` 換成分集連結。 - 中集、下集 iframe 使用 `data-src`,第一次切到該分頁時由頁內 script 寫入 `src`;改連結時請改 `data-src`(或已寫入後的 `src`)。 diff --git a/extra/site-guide.html b/extra/site-guide.html index 9411dec..93426ab 100644 --- a/extra/site-guide.html +++ b/extra/site-guide.html @@ -119,9 +119,9 @@
extra/totoga2-copy-video.htmlextra/totoga2-video.html#story 不在頂欄白名單)totoga2-copy-video.htmltotoga2-video.html複本總覽:totoga2 copy.html。章節錨點僅在網頁版(TOTOGA2)內。