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

@@ -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",

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>

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);
+  color: var(--muted);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   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;
+  font-weight: 700;
-  color: var(--text);
+  color: var(--muted);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  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;
 }