Administrator/real-debrid-downloader
1
0
Fork 0
Code Issues Pull Requests Actions 132 Packages Projects Releases 238 Wiki Activity

Fix dual-layer text: use clip-path inset instead of wrapper for pixel-perfect alignment
Some checks are pending
Build and Release / build (push) Waiting to run
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe 2026-03-02 23:29:28 +01:00
parent 2d1b6de51a
commit c9bace1e5a
3 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "real-debrid-downloader",
"version": "1.5.32",
"version": "1.5.33",
"description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
"main": "build/main/main/main.js",
"author": "Sucukdeluxe",

10
src/renderer/App.tsx
View File

@ -2185,7 +2185,7 @@ export function App(): ReactElement {
<span className="progress-size">
<span className="progress-size-bar" style={{ width: `${pct}%` }} />
<span className="progress-size-text">{label}</span>
<span className="progress-size-text-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
<span className="progress-size-text-filled" style={{ clipPath: `inset(0 ${100 - pct}% 0 0)` }}>{label}</span>
</span>
) : "-";
})()}</span>
@ -2812,7 +2812,7 @@ 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-clip" style={{ width: `${dlProgress}%` }}><span className="progress-inline-text-filled" style={{ width: "70px" }}>{dlProgress}%</span></span>
<span className="progress-inline-text-filled" style={{ clipPath: `inset(0 ${100 - dlProgress}% 0 0)` }}>{dlProgress}%</span>
</span>
</span>
<span className="pkg-col pkg-col-size">{(() => {
@ -2824,7 +2824,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
<span className="progress-size">
<span className="progress-size-bar" style={{ width: `${pct}%` }} />
<span className="progress-size-text">{label}</span>
<span className="progress-size-text-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
<span className="progress-size-text-filled" style={{ clipPath: `inset(0 ${100 - pct}% 0 0)` }}>{label}</span>
</span>
) : "-";
})()}</span>
@ -2854,7 +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-clip" style={{ width: `${item.progressPercent}%` }}><span className="progress-inline-text-filled" style={{ width: "70px" }}>{item.progressPercent}%</span></span>
<span className="progress-inline-text-filled" style={{ clipPath: `inset(0 ${100 - (item.progressPercent || 0)}% 0 0)` }}>{item.progressPercent}%</span>
</span>
) : "-"}
</span>
@ -2867,7 +2867,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
<span className="progress-size progress-size-small">
<span className="progress-size-bar" style={{ width: `${pct}%` }} />
<span className="progress-size-text">{label}</span>
<span className="progress-size-text-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
<span className="progress-size-text-filled" style={{ clipPath: `inset(0 ${100 - pct}% 0 0)` }}>{label}</span>
</span>
) : "-";
})()}</span>

24
src/renderer/styles.css
View File

@ -676,25 +676,21 @@ body,
z-index: 1;
}
.progress-size-text-clip {
.progress-size-text-filled {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 2;
}
.progress-size-text-clip .progress-size-text-filled {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #0a0f1a;
white-space: nowrap;
z-index: 2;
}
.progress-size-small {
@ -702,7 +698,7 @@ body,
}
.progress-size-small .progress-size-text,
.progress-size-small .progress-size-text-clip .progress-size-text-filled {
.progress-size-small .progress-size-text-filled {
font-size: 9px;
}
@ -741,24 +737,20 @@ body,
z-index: 1;
}
.progress-inline-text-clip {
.progress-inline-text-filled {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 2;
}
.progress-inline-text-clip .progress-inline-text-filled {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 11px;
font-weight: 700;
color: #0a0f1a;
white-space: nowrap;
z-index: 2;
}
.progress-inline-small {
@ -766,7 +758,7 @@ body,
}
.progress-inline-small .progress-inline-text,
.progress-inline-small .progress-inline-text-clip .progress-inline-text-filled {
.progress-inline-small .progress-inline-text-filled {
font-size: 10px;
}