LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add backdrop to progress indicator

Browse source
This commit is contained in:
infinite-persistence 2022-04-04 17:27:00 +08:00
parent 57edddb058
commit 234bd2526a
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/component/claimPreviewProgress/view.jsx
View file

@ -14,5 +14,9 @@ export default function ClaimPreviewProgress(props: Props) {
return null;
}
return <div className="claim-preview__progress" style={{ width: `${(position / duration) * 100}%` }} />;
return (
<div className="claim-preview__progress-section">
<div className="claim-preview__progress-bar" style={{ width: `${(position / duration) * 100}%` }} />
</div>
);
}

12
ui/scss/component/_claim-list.scss
View file

@ -1115,12 +1115,18 @@
}
}
.claim-preview__progress {
$claim-preview-progress-bar-height: 5px;
.claim-preview__progress-section {
position: absolute;
bottom: 0;
height: 4px;
height: $claim-preview-progress-bar-height;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.3);
}
.claim-preview__progress-bar {
height: $claim-preview-progress-bar-height;
background-color: var(--color-primary);
}