From e568ecbf302d2f659041b381dc2e9ea3a024ecb6 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Thu, 20 Nov 2025 13:16:20 +0900
Subject: [PATCH 1/3] modify TOC and button layout in book player

---
 src/plugins/bookPlayer/style.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/plugins/bookPlayer/style.scss b/src/plugins/bookPlayer/style.scss
index db43730188..90d928c867 100644
--- a/src/plugins/bookPlayer/style.scss
+++ b/src/plugins/bookPlayer/style.scss
@@ -22,12 +22,12 @@
 
     #btnBookplayerToc {
         float: left;
-        margin-left: 2vw;
+        margin: 0.5vh 0.5vh 0.5vh 2vw;
     }
 
     #btnBookplayerExit {
         float: right;
-        margin-right: 2vw;
+        margin: 0.5vh 2vw 0.5vh 0.5vh;
     }
 
     .bookplayerErrorMsg {
@@ -80,3 +80,10 @@
         }
     }
 }
+
+@media (max-width: 60em) {
+    #dialogToc {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}

From 74f98bb120a864137544ff669e3caf9245ab4d2b Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Thu, 27 Nov 2025 16:00:19 +0900
Subject: [PATCH 2/3] use book player theme in TOC element

---
 src/plugins/bookPlayer/plugin.js          |  1 +
 src/plugins/bookPlayer/style.scss         | 11 +++++++++--
 src/plugins/bookPlayer/tableOfContents.js |  4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index 1e0ad2a001..880a31a38d 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -32,6 +32,7 @@ export class BookPlayer {
         this.type = PluginType.MediaPlayer;
         this.id = 'bookplayer';
         this.priority = 1;
+        this.THEMES = THEMES;
         if (!userSettings.theme() || userSettings.theme() === 'dark') {
             this.theme = 'dark';
         } else {
diff --git a/src/plugins/bookPlayer/style.scss b/src/plugins/bookPlayer/style.scss
index 90d928c867..d5c7f43a36 100644
--- a/src/plugins/bookPlayer/style.scss
+++ b/src/plugins/bookPlayer/style.scss
@@ -46,13 +46,20 @@
     width: fit-content;
     max-height: 80%;
     max-width: 60%;
-    padding-right: 50px;
-    padding-bottom: 15px;
 
     .bookplayerButtonIcon {
         color: black;
     }
 
+    .bookplayerButton {
+        margin: 0.5vh;
+    }
+
+    .toc {
+        margin: 0;
+        padding: 30px;
+    }
+
     .toc li {
         margin-bottom: 5px;
 
diff --git a/src/plugins/bookPlayer/tableOfContents.js b/src/plugins/bookPlayer/tableOfContents.js
index 4c2012d0ec..fb2162121a 100644
--- a/src/plugins/bookPlayer/tableOfContents.js
+++ b/src/plugins/bookPlayer/tableOfContents.js
@@ -57,7 +57,7 @@ export default class TableOfContents {
 
         // remove parent directory reference from href to fix certain books
         const link = chapter.href.startsWith('../') ? chapter.href.slice(3) : chapter.href;
-        itemHtml += `<a href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
+        itemHtml += `<a style="color: ${this.bookPlayer.THEMES[this.bookPlayer.theme].body.color}" href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
 
         if (chapter.subitems?.length) {
             const subHtml = chapter.subitems
@@ -85,7 +85,7 @@ export default class TableOfContents {
         let tocHtml = '<div class="topRightActionButtons">';
         tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span></button>';
         tocHtml += '</div>';
-        tocHtml += '<ul class="toc">';
+        tocHtml += `<ul style="background-color: ${this.bookPlayer.THEMES[this.bookPlayer.theme].body.background}" class="toc">`;
         rendition.book.navigation.forEach((chapter) => {
             tocHtml += this.chapterTocItem(rendition.book, chapter);
         });

From 9af155b291610fbd668c9652fdca900460fa06d2 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Thu, 27 Nov 2025 16:00:39 +0900
Subject: [PATCH 3/3] keep existing dialog style on desktop layout

---
 src/plugins/bookPlayer/tableOfContents.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/plugins/bookPlayer/tableOfContents.js b/src/plugins/bookPlayer/tableOfContents.js
index fb2162121a..cb2686aa6b 100644
--- a/src/plugins/bookPlayer/tableOfContents.js
+++ b/src/plugins/bookPlayer/tableOfContents.js
@@ -1,5 +1,6 @@
 import escapeHTML from 'escape-html';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
+import layoutManager from 'components/layoutManager';
 
 export default class TableOfContents {
     constructor(bookPlayer) {
@@ -57,7 +58,7 @@ export default class TableOfContents {
 
         // remove parent directory reference from href to fix certain books
         const link = chapter.href.startsWith('../') ? chapter.href.slice(3) : chapter.href;
-        itemHtml += `<a style="color: ${this.bookPlayer.THEMES[this.bookPlayer.theme].body.color}" href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
+        itemHtml += `<a style="color: ${layoutManager.mobile ? this.bookPlayer.THEMES[this.bookPlayer.theme].body.color : 'inherit'}" href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
 
         if (chapter.subitems?.length) {
             const subHtml = chapter.subitems
@@ -85,7 +86,7 @@ export default class TableOfContents {
         let tocHtml = '<div class="topRightActionButtons">';
         tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span></button>';
         tocHtml += '</div>';
-        tocHtml += `<ul style="background-color: ${this.bookPlayer.THEMES[this.bookPlayer.theme].body.background}" class="toc">`;
+        tocHtml += `<ul style="background-color: ${layoutManager.mobile ? this.bookPlayer.THEMES[this.bookPlayer.theme].body.background : 'inherit'}" class="toc">`;
         rendition.book.navigation.forEach((chapter) => {
             tocHtml += this.chapterTocItem(rendition.book, chapter);
         });