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"> <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 { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
import Panel from "../visual/Panel.svelte"; import Panel from "../visual/Panel.svelte";
import Dropdown from "./Dropdown.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"> <div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
<button <button
onclick={() => files.convertAll()} 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} disabled={!files.ready}
> >
<RefreshCw size="24" /> <RefreshCw size="24" />
<p>Convert all</p> <p>Convert all</p>
</button> </button>
<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} disabled={!files.ready || !files.results}
onclick={() => files.downloadAll()} onclick={() => files.downloadAll()}
> >

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

@ -3,7 +3,7 @@
import Panel from "../visual/Panel.svelte"; import Panel from "../visual/Panel.svelte";
import clsx from "clsx"; import clsx from "clsx";
import { onMount } from "svelte"; 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 { converters } from "$lib/converters";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
@ -61,7 +61,7 @@
<button <button
onclick={uploadFiles} onclick={uploadFiles}
bind:this={uploaderButton} 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 <Panel
class="flex justify-center items-center w-full h-full flex-col pointer-events-none" 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"> <script lang="ts">
import FancyInput from "$lib/components/functional/FancyInput.svelte"; import FancyInput from "$lib/components/functional/FancyInput.svelte";
import Panel from "$lib/components/visual/Panel.svelte"; import Panel from "$lib/components/visual/Panel.svelte";
import { effects } from "$lib/store/index.svelte";
import { import {
CalendarHeartIcon, CalendarHeartIcon,
HandCoinsIcon, HandCoinsIcon,
@ -41,29 +42,29 @@
<div class="flex flex-col gap-3 w-full"> <div class="flex flex-col gap-3 w-full">
<div class="flex gap-3 w-full"> <div class="flex gap-3 w-full">
<button <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" /> <HandCoinsIcon size="24" class="inline-block mr-2" />
One-time One-time
</button> </button>
<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" /> <CalendarHeartIcon size="24" class="inline-block mr-2" />
Monthly Monthly
</button> </button>
</div> </div>
<div class="flex gap-3 w-full"> <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 >$1 USD</button
> >
<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 >$5 USD</button
> >
<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 >$10 USD</button
> >
<!-- <div class="relative flex items-center flex-[2]"> <!-- <div class="relative flex items-center flex-[2]">
@ -86,7 +87,7 @@
</p> </p>
<button <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" /> <WalletIcon size="24" class="inline-block mr-2" />
Pay now Pay now

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

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte"; import Panel from "$lib/components/visual/Panel.svelte";
import { DISCORD_URL, GITHUB_URL_VERT } from "$lib/consts"; import { DISCORD_URL, GITHUB_URL_VERT } from "$lib/consts";
import { effects } from "$lib/store/index.svelte";
import { GithubIcon, LinkIcon, MessageCircleMoreIcon } from "lucide-svelte"; import { GithubIcon, LinkIcon, MessageCircleMoreIcon } from "lucide-svelte";
</script> </script>
@ -18,7 +19,7 @@
href={DISCORD_URL} href={DISCORD_URL}
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <MessageCircleMoreIcon size="24" class="inline-block mr-2" />
Discord Discord
@ -27,7 +28,7 @@
href={GITHUB_URL_VERT} href={GITHUB_URL_VERT}
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <GithubIcon size="24" class="inline-block mr-2" />
Source Source

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

@ -55,6 +55,11 @@
if (effectsUnsubscribe) effectsUnsubscribe(); if (effectsUnsubscribe) effectsUnsubscribe();
if (themeUnsubscribe) themeUnsubscribe(); if (themeUnsubscribe) themeUnsubscribe();
}); });
$effect(() => {
updateEffectsClasses($effects);
updateThemeClasses($theme);
});
</script> </script>
<Panel class="flex flex-col gap-8 p-6"> <Panel class="flex flex-col gap-8 p-6">
@ -80,7 +85,7 @@
<button <button
bind:this={lightElement} bind:this={lightElement}
onclick={() => setTheme("light")} 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" /> <SunIcon size="24" class="inline-block mr-2" />
Light Light
@ -89,7 +94,7 @@
<button <button
bind:this={darkElement} bind:this={darkElement}
onclick={() => setTheme("dark")} 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" /> <MoonIcon size="24" class="inline-block mr-2" />
Dark Dark
@ -110,7 +115,7 @@
<button <button
bind:this={enableEffectsElement} bind:this={enableEffectsElement}
onclick={() => setEffects(true)} 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" /> <PlayIcon size="24" class="inline-block mr-2" />
Enable Enable
@ -119,7 +124,7 @@
<button <button
bind:this={disableEffectsElement} bind:this={disableEffectsElement}
onclick={() => setEffects(false)} 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" /> <PauseIcon size="24" class="inline-block mr-2" />
Disable Disable

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

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