Fix rounded corners in progress bars

This commit is contained in:
wvffle 2022-07-21 21:46:23 +00:00 committed by Georg Krause
parent fae4788000
commit db167ad80b
4 changed files with 6 additions and 4 deletions

View File

@ -228,11 +228,11 @@ const touchProgress = (event: MouseEvent) => {
> >
<div <div
class="buffer bar" class="buffer bar"
:style="{ 'transform': `scaleX(${bufferProgress / 100})` }" :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
/> />
<div <div
class="position bar" class="position bar"
:style="{ 'transform': `scaleX(${progress / 100})` }" :style="{ 'transform': `translateX(${progress - 100}%)` }"
/> />
</div> </div>
</div> </div>

View File

@ -126,11 +126,11 @@ const touchProgress = (event: MouseEvent) => {
> >
<div <div
class="buffer bar" class="buffer bar"
:style="{ 'transform': `scaleX(${bufferProgress / 100})` }" :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
/> />
<div <div
class="position bar" class="position bar"
:style="{ 'transform': `scaleX(${progress / 100})` }" :style="{ 'transform': `translateX(${progress - 100}%)` }"
/> />
</div> </div>
<div class="controls-row"> <div class="controls-row">

View File

@ -9,6 +9,7 @@
height: 1rem; height: 1rem;
z-index: 1; z-index: 1;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
border-radius: 0;
.bar { .bar {
height: 0.2rem; height: 0.2rem;

View File

@ -165,6 +165,7 @@
} }
.progress-area .progress { .progress-area .progress {
border-radius: 0.28571429rem; border-radius: 0.28571429rem;
overflow: hidden;
} }
.progress-wrapper, .warning.message { .progress-wrapper, .warning.message {
max-width: 25em; max-width: 25em;