EHV/librodrome
18
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up BookPlayer UI: remove button borders, move close into top bar

Browse Source 
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>
This commit is contained in:
Yvv
2026-02-22 03:14:48 +01:00
parent 837b5394fe
commit 3612cc17f8
1 changed files with 14 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/components/book/BookPlayer.vue
View File

@@ -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;