From 1470c9d6ad5ad59c085f5237403e7897b8159072 Mon Sep 17 00:00:00 2001 From: L-Nafaryus Date: Mon, 1 Apr 2024 23:48:18 +0500 Subject: [PATCH] frontend: fancy animations --- crates/frontend/index.html | 2 +- crates/frontend/src/assets/style.css | 22 +++++++++++++++++++ crates/frontend/src/components/NavBar.vue | 19 +++++++++------- crates/frontend/src/views/Base.vue | 8 +++++-- .../frontend/src/views/user/Preferencies.vue | 6 ++++- crates/frontend/tailwind.config.js | 19 +++++++++++++++- 6 files changed, 63 insertions(+), 13 deletions(-) diff --git a/crates/frontend/index.html b/crates/frontend/index.html index ca5262b..3c765bb 100644 --- a/crates/frontend/index.html +++ b/crates/frontend/index.html @@ -6,7 +6,7 @@ Elnafo Dev - +
diff --git a/crates/frontend/src/assets/style.css b/crates/frontend/src/assets/style.css index 6f35bae..f52eb77 100644 --- a/crates/frontend/src/assets/style.css +++ b/crates/frontend/src/assets/style.css @@ -7,3 +7,25 @@ @apply text-green-500 hover:text-green-400; } } + +@layer utilities { + .bg-roll::before { + background: linear-gradient(90deg, #fb0094, #0000ff, #fb0093); + background-size: 200%; + + @apply absolute w-[100%] h-[100%] content-[''] animate-border-roll; + } + + .bg-grid { + background: + linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(113, 113, 122, 1) 0%, + rgba(113, 113, 122, 1) 2px, rgba(0, 0, 0, 0) 0px), + linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(113, 113, 122, 1) 0%, + rgba(113, 113, 122, 1) 2px, rgba(0, 0, 0, 0) 0px); + background-size: 2em 4em, 6em 2em; + transform: perspective(300px) rotateX(30deg) scale(1); + z-index: -1; + + @apply absolute w-[200%] -left-[50%] h-full; + } +} diff --git a/crates/frontend/src/components/NavBar.vue b/crates/frontend/src/components/NavBar.vue index 815415b..0cb03a2 100644 --- a/crates/frontend/src/components/NavBar.vue +++ b/crates/frontend/src/components/NavBar.vue @@ -1,10 +1,13 @@ diff --git a/crates/frontend/src/views/Base.vue b/crates/frontend/src/views/Base.vue index 84224bb..3ea3e5a 100644 --- a/crates/frontend/src/views/Base.vue +++ b/crates/frontend/src/views/Base.vue @@ -87,11 +87,15 @@ async function user_logout() { -
+
+
+
+
-