RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: missing gradient transitions

This commit is contained in:
JovannMC 2025-02-10 23:35:31 +03:00
parent 63e9cb3cd8
commit 1f1b8d68de
No known key found for this signature in database
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/layout/Gradients.svelte
View File

@ -4,12 +4,16 @@
import VertVBig from "$lib/assets/vert-bg.svg?component";
import { files, gradientColor, showGradient } from "$lib/store/index.svelte";
import { quintOut } from "svelte/easing";
import { fade } from "svelte/transition";
import { fade } from "$lib/animation";
</script>
{#if page.url.pathname === "/"}
<div
class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
transition:fade={{
duration,
easing: quintOut,
}}
>
<VertVBig
class="fill-[--fg] opacity-10 dynadark:opacity-5 scale-[200%] md:scale-[80%]"
@ -19,13 +23,23 @@
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient);"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{:else if page.url.pathname === "/convert" && $showGradient}
{#key $gradientColor}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{/key}
{:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
<div
class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1 scale-105"
@ -61,11 +75,19 @@
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-blue);"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{:else if page.url.pathname === "/about"}
<div
id="gradient-bg"
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-pink);"
transition:fade={{
duration,
easing: quintOut,
}}
></div>
{/if}

12
src/routes/convert/+page.svelte
View File

@ -27,12 +27,6 @@
} from "lucide-svelte";
$effect(() => {
if (files.files.length === 1 && files.files[0].blobUrl) {
showGradient.set(false);
} else {
showGradient.set(true);
}
// Set gradient color depending on the file types
// TODO: if more file types added, add a "fileType" property to the file object
const allAudio = files.files.every(
@ -47,6 +41,12 @@
(file) => file.converter?.name === "vertd",
);
if (files.files.length === 1 && files.files[0].blobUrl && !allVideos) {
showGradient.set(false);
} else {
showGradient.set(true);
}
if (
files.files.length === 0 ||
(!allAudio && !allImages && !allVideos)