From c146a8f7ec00e86a40e14b1612c60429f9895b8f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 22:20:01 +0200
Subject: [PATCH] style: make reading progress indicator smaller and more
 subtle

- Reduced bar height from 4px to 2px (h-0.5)
- Made container more compact: py-1 instead of py-2
- Tiny text size: 0.625rem (10px) with tabular numbers
- Simplified background: less opacity, lighter blur
- Show just % or checkmark when complete
- Reduced reader bottom padding from 4rem to 2rem
- More minimalist and less intrusive design
---
 src/components/ReadingProgressIndicator.tsx | 16 ++++++++--------
 src/styles/components/reader.css            |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ReadingProgressIndicator.tsx b/src/components/ReadingProgressIndicator.tsx
index e772f525..8de3f907 100644
--- a/src/components/ReadingProgressIndicator.tsx
+++ b/src/components/ReadingProgressIndicator.tsx
@@ -16,13 +16,13 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
   const clampedProgress = Math.min(100, Math.max(0, progress))
   
   return (
-    <div className={`fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.95)] backdrop-blur-md border-t border-white/10 px-4 py-2 flex items-center gap-4 transition-all duration-300 shadow-[0_-4px_12px_rgba(0,0,0,0.3)] ${className}`}>
-      <div className="flex-1 h-1 bg-white/10 rounded-sm overflow-hidden relative">
+    <div className={`fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}>
+      <div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
         <div 
-          className={`h-full rounded-sm transition-all duration-300 relative ${
+          className={`h-full rounded-full transition-all duration-300 relative ${
             isComplete 
-              ? 'bg-gradient-to-r from-green-400 to-green-600' 
-              : 'bg-gradient-to-r from-indigo-500 to-blue-400'
+              ? 'bg-green-500' 
+              : 'bg-indigo-500'
           }`}
           style={{ width: `${clampedProgress}%` }}
         >
@@ -30,10 +30,10 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
         </div>
       </div>
       {showPercentage && (
-        <div className={`text-sm font-medium min-w-[80px] text-right ${
-          isComplete ? 'text-green-400' : 'text-gray-400'
+        <div className={`text-[0.625rem] font-normal min-w-[32px] text-right tabular-nums ${
+          isComplete ? 'text-green-500' : 'text-gray-500'
         }`}>
-          {isComplete ? '✓ Complete' : `${clampedProgress}%`}
+          {isComplete ? '✓' : `${clampedProgress}%`}
         </div>
       )}
     </div>
diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css
index 992f82ed..4d9675f4 100644
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -8,7 +8,7 @@
   overflow: hidden; 
   max-width: 900px;
   margin: 0 auto;
-  padding-bottom: 4rem; /* Add space for progress indicator */
+  padding-bottom: 2rem; /* Add space for progress indicator */
 }
 
 /* Video container - responsive wrapper following react-player docs */