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 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; position: absolute;
bottom: 0; bottom: 0;
height: 4px; height: $claim-preview-progress-bar-height;
width: 100%; 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); background-color: var(--color-primary);
} }