aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-18 23:24:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: position reading progress indicator at bottom of screen

Browse Source 
- Move progress indicator from top to bottom of viewport
- Add box shadow for better visual separation
- Update hide animation to slide up from bottom
- Add padding to reader content to prevent overlap
- Ensure indicator is always visible while scrolling
This commit is contained in:
Gigi
2025-10-13 21:02:52 +02:00
parent 96ce12b952
commit ec34bc3d04
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/styles/components/reader.css
View File

@@ -8,6 +8,7 @@
overflow: hidden; overflow: hidden;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding-bottom: 4rem; /* Add space for progress indicator */
} }
/* Video container - responsive wrapper following react-player docs */ /* Video container - responsive wrapper following react-player docs */
@@ -105,18 +106,19 @@
/* Reading Progress Indicator */ /* Reading Progress Indicator */
.reading-progress-indicator { .reading-progress-indicator {
position: fixed; position: fixed;
top: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
background: rgba(26, 26, 26, 0.9); background: rgba(26, 26, 26, 0.95);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
} }
.reading-progress-bar { .reading-progress-bar {
@@ -170,7 +172,7 @@
/* Hide progress indicator when not needed */ /* Hide progress indicator when not needed */
.reading-progress-indicator.hidden { .reading-progress-indicator.hidden {
transform: translateY(-100%); transform: translateY(100%);
opacity: 0; opacity: 0;
} }