diff --git a/web/src/routes/remux/+page.svelte b/web/src/routes/remux/+page.svelte index 5a83d839..5d09dd13 100644 --- a/web/src/routes/remux/+page.svelte +++ b/web/src/routes/remux/+page.svelte @@ -208,24 +208,26 @@
- {#if processing} - {#if progress && speed} -
- -
-
- processing ({progress}%, {speed}x)... -
+
+ {#if processing} + {#if progress && speed} +
+ +
+
+ processing ({progress}%, {speed}x)... +
+ {:else} + processing... + {/if} {:else} - processing... + done! {/if} - {:else} - done! - {/if} +
@@ -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; + } }