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

fix: respect effects setting for hover/clicks transitions 

is this necessary?
This commit is contained in:
JovannMC 2025-02-10 21:14:45 +03:00
parent 0ab08c84ae
commit 98fadbbe76
No known key found for this signature in database
6 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/functional/ConversionPanel.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { files } from "$lib/store/index.svelte";
import { effects, files } from "$lib/store/index.svelte";
import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
import Panel from "../visual/Panel.svelte";
import Dropdown from "./Dropdown.svelte";
@ -11,14 +11,14 @@
<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
<button
onclick={() => files.convertAll()}
class="btn highlight flex gap-3 max-md:w-full"
class="btn {$effects ? "" : "!scale-100"} highlight flex gap-3 max-md:w-full"
disabled={!files.ready}
>
<RefreshCw size="24" />
<p>Convert all</p>
</button>
<button
class="btn flex gap-3 max-md:w-full"
class="btn {$effects ? "" : "!scale-100"} flex gap-3 max-md:w-full"
disabled={!files.ready || !files.results}
onclick={() => files.downloadAll()}
>

4
src/lib/components/functional/Uploader.svelte
View File

@ -3,7 +3,7 @@
import Panel from "../visual/Panel.svelte";
import clsx from "clsx";
import { onMount } from "svelte";
import { files } from "$lib/store/index.svelte";
import { effects, files } from "$lib/store/index.svelte";
import { converters } from "$lib/converters";
import { goto } from "$app/navigation";
@ -61,7 +61,7 @@
<button
onclick={uploadFiles}
bind:this={uploaderButton}
class={clsx(`hover:scale-105 active:scale-100 duration-200 ${classList}`)}
class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)}
>
<Panel
class="flex justify-center items-center w-full h-full flex-col pointer-events-none"

13
src/lib/sections/about/Donate.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import FancyInput from "$lib/components/functional/FancyInput.svelte";
import Panel from "$lib/components/visual/Panel.svelte";
import { effects } from "$lib/store/index.svelte";
import {
CalendarHeartIcon,
HandCoinsIcon,
@ -41,29 +42,29 @@
<div class="flex flex-col gap-3 w-full">
<div class="flex gap-3 w-full">
<button
class="btn flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
>
<HandCoinsIcon size="24" class="inline-block mr-2" />
One-time
</button>
<button
class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
>
<CalendarHeartIcon size="24" class="inline-block mr-2" />
Monthly
</button>
</div>
<div class="flex gap-3 w-full">
<button class="btn bg-accent-red text-black p-4 rounded-lg flex-1"
<button class="btn {$effects ? "" : "!scale-100"} bg-accent-red text-black p-4 rounded-lg flex-1"
>$1 USD</button
>
<button
class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
class="btn {$effects ? "" : "!scale-100"} bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$5 USD</button
>
<button
class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
class="btn {$effects ? "" : "!scale-100"} bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$10 USD</button
>
<!-- <div class="relative flex items-center flex-[2]">
@ -86,7 +87,7 @@
</p>
<button
class="btn flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
>
<WalletIcon size="24" class="inline-block mr-2" />
Pay now

5
src/lib/sections/about/Resources.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte";
import { DISCORD_URL, GITHUB_URL_VERT } from "$lib/consts";
import { effects } from "$lib/store/index.svelte";
import { GithubIcon, LinkIcon, MessageCircleMoreIcon } from "lucide-svelte";
</script>
@ -18,7 +19,7 @@
href={DISCORD_URL}
target="_blank"
rel="noopener noreferrer"
class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
Discord
@ -27,7 +28,7 @@
href={GITHUB_URL_VERT}
target="_blank"
rel="noopener noreferrer"
class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source

13
src/lib/sections/settings/Appearance.svelte
View File

@ -55,6 +55,11 @@
if (effectsUnsubscribe) effectsUnsubscribe();
if (themeUnsubscribe) themeUnsubscribe();
});
$effect(() => {
updateEffectsClasses($effects);
updateThemeClasses($theme);
});
</script>
<Panel class="flex flex-col gap-8 p-6">
@ -80,7 +85,7 @@
<button
bind:this={lightElement}
onclick={() => setTheme("light")}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<SunIcon size="24" class="inline-block mr-2" />
Light
@ -89,7 +94,7 @@
<button
bind:this={darkElement}
onclick={() => setTheme("dark")}
class="btn flex-1 p-4 rounded-lg text-black flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black flex items-center justify-center"
>
<MoonIcon size="24" class="inline-block mr-2" />
Dark
@ -110,7 +115,7 @@
<button
bind:this={enableEffectsElement}
onclick={() => setEffects(true)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PlayIcon size="24" class="inline-block mr-2" />
Enable
@ -119,7 +124,7 @@
<button
bind:this={disableEffectsElement}
onclick={() => setEffects(false)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PauseIcon size="24" class="inline-block mr-2" />
Disable

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

@ -5,6 +5,7 @@
import Panel from "$lib/components/visual/Panel.svelte";
import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
import {
effects,
files,
gradientColor,
showGradient,
@ -148,7 +149,9 @@
/>
<div class="w-full flex items-center justify-between">
<button
class="btn p-0 w-14 h-14 text-black {isAudio
class="btn {$effects
? ''
: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
? 'bg-accent-purple'
: isVideo
? 'bg-accent-red'
@ -159,7 +162,9 @@
<RotateCwIcon size="24" />
</button>
<button
class="btn p-0 w-14 h-14"
class="btn {$effects
? ''
: '!scale-100'} p-0 w-14 h-14"
onclick={file.download}
disabled={!file.result}
>