mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 04:39:58 +00:00
web/remux: tweak progress appearance
This commit is contained in:
parent
2bcc849790
commit
b1f41cae41
1 changed files with 43 additions and 23 deletions
|
@ -208,6 +208,7 @@
|
|||
</div>
|
||||
|
||||
<div id="remux-processing" class:processing aria-hidden={!processing}>
|
||||
<div id="processing-status">
|
||||
{#if processing}
|
||||
{#if progress && speed}
|
||||
<div class="progress-bar">
|
||||
|
@ -227,6 +228,7 @@
|
|||
done!
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</DropReceiver>
|
||||
|
||||
<style>
|
||||
|
@ -258,13 +260,6 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 20px;
|
||||
width: 400px;
|
||||
border-radius: 6px;
|
||||
background: var(--button);
|
||||
}
|
||||
|
||||
#remux-processing.processing {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
|
@ -276,6 +271,27 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
#processing-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--padding);
|
||||
gap: var(--padding);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 20px;
|
||||
width: 400px;
|
||||
max-width: 400px;
|
||||
border-radius: 6px;
|
||||
background: var(--button);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.remux-description {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
@ -285,5 +301,9 @@
|
|||
.remux-description {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue