Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/remux: tweak progress appearance

Browse source
This commit is contained in:
wukko 2024-09-09 01:17:34 +06:00
parent 2bcc849790
commit b1f41cae41
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 43 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
web/src/routes/remux/+page.svelte
View file

@ -208,24 +208,26 @@
</div> </div>
<div id="remux-processing" class:processing aria-hidden={!processing}> <div id="remux-processing" class:processing aria-hidden={!processing}>
{#if processing} <div id="processing-status">
{#if progress && speed} {#if processing}
<div class="progress-bar"> {#if progress && speed}
<Skeleton <div class="progress-bar">
width="{progress}%" <Skeleton
height="20px" width="{progress}%"
class="elevated" height="20px"
/> class="elevated"
</div> />
<div class="progress-text"> </div>
processing ({progress}%, {speed}x)... <div class="progress-text">
</div> processing ({progress}%, {speed}x)...
</div>
{:else}
processing...
{/if}
{:else} {:else}
processing... done!
{/if} {/if}
{:else} </div>
done!
{/if}
</div> </div>
</DropReceiver> </DropReceiver>
@ -258,13 +260,6 @@
pointer-events: none; pointer-events: none;
} }
.progress-bar {
height: 20px;
width: 400px;
border-radius: 6px;
background: var(--button);
}
#remux-processing.processing { #remux-processing.processing {
opacity: 1; opacity: 1;
transform: none; transform: none;
@ -276,6 +271,27 @@
pointer-events: none; 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 { .remux-description {
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
@ -285,5 +301,9 @@
.remux-description { .remux-description {
font-size: 12px; font-size: 12px;
} }
.progress-bar {
width: 350px;
}
} }
</style> </style>