feat: add progress bar, auto-hide header, active thumb tracking to series reader

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-20 08:59:29 -04:00
parent 8599ffb37c
commit 1e96208533
3 changed files with 268 additions and 155 deletions
+41 -8
View File
@@ -2376,6 +2376,12 @@ body.select-mode .gallery-infinite-container {
background: var(--panel);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.reader-header.hidden {
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
}
.reader-header-left {
@@ -2623,20 +2629,47 @@ body.select-mode .gallery-infinite-container {
color: var(--text-muted);
}
/* Reading progress bar */
.reader-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
background: var(--btn-primary);
z-index: 1100;
transition: width 0.1s linear;
pointer-events: none;
}
/* Active nav thumbnail */
.reader-nav-thumb.active {
border-left: 3px solid var(--btn-primary);
opacity: 1;
}
.reader-nav-thumb:not(.active) {
opacity: 0.5;
transition: opacity 0.2s ease;
}
.reader-nav-thumb:hover {
opacity: 1;
}
/* Floating page indicator */
.floating-page-indicator {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
color: white;
padding: 0.5rem 1rem;
right: 1.5rem;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow-2);
font-size: 0.8rem;
color: var(--text-muted);
z-index: 100;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Quick nav buttons */