From 3612cc17f8c62013ad5f3e5625e94ca1c241b782 Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Sun, 22 Feb 2026 03:14:48 +0100
Subject: [PATCH] Clean up BookPlayer UI: remove button borders, move close
 into top bar

Remove borders from all buttons (bar, nav) for a minimal ghost style,
remove the viewport border, relocate the close button from the overlay
corner into the reader bar, and tighten spacing around controls.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/components/book/BookPlayer.vue | 58 ++++++++----------------------
 1 file changed, 14 insertions(+), 44 deletions(-)

diff --git a/app/components/book/BookPlayer.vue b/app/components/book/BookPlayer.vue
index 931a254..b025d93 100644
--- a/app/components/book/BookPlayer.vue
+++ b/app/components/book/BookPlayer.vue
@@ -23,11 +23,6 @@
           aria-hidden="true"
         />
 
-        <!-- Close -->
-        <button class="bp-close" @click="close" aria-label="Fermer">
-          <div class="i-lucide-x h-5 w-5" />
-        </button>
-
         <!-- ═══ READER ═══ -->
           <div class="bp-phase bp-reader">
             <!-- Top bar -->
@@ -55,6 +50,9 @@
                 <template v-if="isScrollMode">{{ scrollPercent }}%</template>
                 <template v-else>{{ currentPage + 1 }}<span class="op-40">/</span>{{ totalPages }}</template>
               </span>
+              <button class="reader-bar-btn" @click="close" aria-label="Fermer">
+                <div class="i-lucide-x h-5 w-5" />
+              </button>
             </div>
 
             <!-- Sommaire sidebar -->
@@ -543,29 +541,6 @@ onUnmounted(() => {
   50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
 }
 
-/* ─── CLOSE ─── */
-.bp-close {
-  position: absolute;
-  top: 1rem; right: 1rem;
-  z-index: 75;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem; height: 2.5rem;
-  border-radius: 50%;
-  background: hsl(20 8% 8% / 0.6);
-  backdrop-filter: blur(12px);
-  color: hsl(20 8% 55%);
-  border: 1px solid hsl(20 8% 18% / 0.5);
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.bp-close:hover {
-  background: hsl(var(--scene-h1) 60% 45% / 0.25);
-  color: white;
-  border-color: hsl(var(--scene-h1) 60% 50% / 0.4);
-}
-
 /* ─── HINT ─── */
 .bp-hint {
   position: absolute;
@@ -605,8 +580,8 @@ onUnmounted(() => {
 .reader-bar {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
   width: 100%;
 }
 .reader-bar-btn {
@@ -615,18 +590,16 @@ onUnmounted(() => {
   justify-content: center;
   width: 2.25rem; height: 2.25rem;
   border-radius: 0.5rem;
-  background: hsl(20 8% 8% / 0.5);
-  backdrop-filter: blur(8px);
-  color: hsl(20 8% 55%);
-  border: 1px solid hsl(20 8% 16% / 0.5);
+  background: transparent;
+  color: hsl(20 8% 45%);
+  border: none;
   cursor: pointer;
   transition: all 0.3s;
   flex-shrink: 0;
 }
 .reader-bar-btn:hover {
   color: white;
-  background: hsl(var(--scene-h1) 50% 40% / 0.2);
-  border-color: hsl(var(--scene-h1) 50% 50% / 0.3);
+  background: hsl(0 0% 100% / 0.06);
 }
 .reader-bar-title {
   flex: 1;
@@ -744,7 +717,6 @@ onUnmounted(() => {
   background: hsl(20 8% 5% / 0.4);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid hsl(20 8% 14% / 0.4);
 }
 
 .reader-columns {
@@ -815,7 +787,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.5rem 0;
+  padding: 0.25rem 0;
   gap: 1rem;
 }
 .reader-nav-btn {
@@ -824,18 +796,16 @@ onUnmounted(() => {
   justify-content: center;
   width: 2.5rem; height: 2.5rem;
   border-radius: 50%;
-  background: hsl(20 8% 8% / 0.5);
-  backdrop-filter: blur(8px);
-  color: hsl(20 8% 55%);
-  border: 1px solid hsl(20 8% 16% / 0.5);
+  background: transparent;
+  color: hsl(20 8% 45%);
+  border: none;
   cursor: pointer;
   transition: all 0.3s;
   flex-shrink: 0;
 }
 .reader-nav-btn:hover {
-  background: hsl(var(--scene-h1) 60% 42% / 0.2);
+  background: hsl(0 0% 100% / 0.06);
   color: white;
-  border-color: hsl(var(--scene-h1) 60% 50% / 0.35);
 }
 .reader-nav-btn--hidden {
   opacity: 0;