From c07c0fbdf75ed44e335e4a7dea79d0d32986beba Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Mon, 2 Mar 2026 23:21:21 +0100
Subject: [PATCH] Dual-layer text on progress bars: dark text on bar, light
 text on track (JDownloader style)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json            |  2 +-
 src/renderer/App.tsx    | 14 +++++++++---
 src/renderer/styles.css | 50 ++++++++++++++++++++++++++++++++++-------
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index a07f44b..b4ac694 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "real-debrid-downloader",
-  "version": "1.5.30",
+  "version": "1.5.31",
   "description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
   "main": "build/main/main/main.js",
   "author": "Sucukdeluxe",
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 4b077a8..fee5211 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -2180,10 +2180,12 @@ export function App(): ReactElement {
                       <span className="pkg-col pkg-col-progress">{entry.status === "completed" ? "100%" : "-"}</span>
                       <span className="pkg-col pkg-col-size">{(() => {
                         const pct = entry.totalBytes > 0 ? Math.min(100, Math.round((entry.downloadedBytes / entry.totalBytes) * 100)) : 0;
+                        const label = `${humanSize(entry.downloadedBytes)} / ${humanSize(entry.totalBytes)}`;
                         return entry.totalBytes > 0 ? (
                           <span className="progress-size">
                             <span className="progress-size-bar" style={{ width: `${pct}%` }} />
-                            <span className="progress-size-text">{humanSize(entry.downloadedBytes)} / {humanSize(entry.totalBytes)}</span>
+                            <span className="progress-size-text">{label}</span>
+                            <span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
                           </span>
                         ) : "-";
                       })()}</span>
@@ -2810,16 +2812,19 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
             <span className="progress-inline">
               <span className="progress-inline-bar" style={{ width: `${dlProgress}%` }} />
               <span className="progress-inline-text">{dlProgress}%</span>
+              <span className="progress-inline-text-filled" style={{ width: `${dlProgress}%` }}><span style={{ width: "70px", textAlign: "center", flexShrink: 0 }}>{dlProgress}%</span></span>
             </span>
           </span>
           <span className="pkg-col pkg-col-size">{(() => {
             const totalBytes = items.reduce((sum, item) => sum + (item.totalBytes || item.downloadedBytes || 0), 0);
             const dlBytes = items.reduce((sum, item) => sum + (item.downloadedBytes || 0), 0);
             const pct = totalBytes > 0 ? Math.min(100, Math.round((dlBytes / totalBytes) * 100)) : 0;
+            const label = `${humanSize(dlBytes)} / ${humanSize(totalBytes)}`;
             return totalBytes > 0 ? (
               <span className="progress-size">
                 <span className="progress-size-bar" style={{ width: `${pct}%` }} />
-                <span className="progress-size-text">{humanSize(dlBytes)} / {humanSize(totalBytes)}</span>
+                <span className="progress-size-text">{label}</span>
+                <span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
               </span>
             ) : "-";
           })()}</span>
@@ -2849,6 +2854,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
               <span className="progress-inline progress-inline-small">
                 <span className="progress-inline-bar" style={{ width: `${item.progressPercent}%` }} />
                 <span className="progress-inline-text">{item.progressPercent}%</span>
+                <span className="progress-inline-text-filled" style={{ width: `${item.progressPercent}%` }}><span style={{ width: "70px", textAlign: "center", flexShrink: 0 }}>{item.progressPercent}%</span></span>
               </span>
             ) : "-"}
           </span>
@@ -2856,10 +2862,12 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
             const total = item.totalBytes || item.downloadedBytes || 0;
             const dl = item.downloadedBytes || 0;
             const pct = total > 0 ? Math.min(100, Math.round((dl / total) * 100)) : 0;
+            const label = `${humanSize(dl)} / ${humanSize(total)}`;
             return total > 0 ? (
               <span className="progress-size progress-size-small">
                 <span className="progress-size-bar" style={{ width: `${pct}%` }} />
-                <span className="progress-size-text">{humanSize(dl)} / {humanSize(total)}</span>
+                <span className="progress-size-text">{label}</span>
+                <span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
               </span>
             ) : "-";
           })()}</span>
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index c7f6b5d..d44b8fe 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -669,18 +669,36 @@ body,
   align-items: center;
   justify-content: center;
   font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
   font-variant-numeric: tabular-nums;
-  color: var(--text);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  color: var(--muted);
   white-space: nowrap;
+  z-index: 1;
+}
+
+.progress-size-text-filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: #0a0f1a;
+  white-space: nowrap;
+  z-index: 2;
+  overflow: hidden;
 }
 
 .progress-size-small {
   height: 14px;
 }
 
-.progress-size-small .progress-size-text {
+.progress-size-small .progress-size-text,
+.progress-size-small .progress-size-text-filled {
   font-size: 9px;
 }
 
@@ -714,16 +732,32 @@ body,
   align-items: center;
   justify-content: center;
   font-size: 11px;
-  font-weight: 600;
-  color: var(--text);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  font-weight: 700;
+  color: var(--muted);
+  z-index: 1;
+}
+
+.progress-inline-text-filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #0a0f1a;
+  z-index: 2;
+  overflow: hidden;
 }
 
 .progress-inline-small {
   height: 14px;
 }
 
-.progress-inline-small .progress-inline-text {
+.progress-inline-small .progress-inline-text,
+.progress-inline-small .progress-inline-text-filled {
   font-size: 10px;
 }