From 55dd9c0eb787818588009b3f5415bd81dfa5314d Mon Sep 17 00:00:00 2001
From: Realmy <163438634+RealmyTheMan@users.noreply.github.com>
Date: Sun, 9 Feb 2025 18:55:26 +0100
Subject: [PATCH] feat: pretty dragover animation

---
 src/routes/+layout.svelte | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b0dccb3..c09e8b1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -168,7 +168,8 @@
 >
 	{#if dropping}
 		<div
-			class="fixed w-screen h-screen bg-accent-blue opacity-40 dynadark:opacity-20 z-[100] pointer-events-none"
+			class="dragoverlay fixed w-screen h-screen opacity-50 dynadark:opacity-20 z-[100] pointer-events-none blur-2xl"
+			class:_dragover={dropping}
 			transition:fade={{
 				duration,
 				easing: quintOut,
@@ -329,3 +330,31 @@
 		style="background: var(--bg-gradient-pink);"
 	></div>
 {/if}
+
+<style>
+	.dragoverlay {
+		animation: dragoverlay-animation 3s infinite linear;
+	}
+
+	@keyframes dragoverlay-animation {
+		0% {
+			@apply bg-accent-pink;
+		}
+
+		25% {
+			@apply bg-accent-blue;
+		}
+
+		50% {
+			@apply bg-accent-purple;
+		}
+
+		75% {
+			@apply bg-accent-red;
+		}
+
+		100% {
+			@apply bg-accent-pink;
+		}
+	}
+</style>