From 6200ab7a1b57ec07a84ceed6011cb7fa74752724 Mon Sep 17 00:00:00 2001
From: lethdat <imdat2999@gmail.com>
Date: Tue, 27 Jan 2026 02:31:25 +0700
Subject: [PATCH] enhance layout with glow effects and animations

---
 src/routes/auth/layout.vue |  4 +++-
 uno.config.ts              | 26 +++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/routes/auth/layout.vue b/src/routes/auth/layout.vue
index 7b8db21..44644b3 100644
--- a/src/routes/auth/layout.vue
+++ b/src/routes/auth/layout.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="w-full max-w-md bg-white p-8 rounded-xl border border-primary m-auto overflow-hidden">
+    <div class=":uno: w-full max-w-md shadow-xl bg-white p-8 rounded-xl m-auto relative before:(content-[''] absolute inset-[-5px] translate-0 z-[-1] opacity-50 rounded-xl bg-[linear-gradient(135deg,var(--glow-stop-1)_0,var(--glow-stop-2)_25%,var(--glow-stop-3)_50%,var(--glow-stop-4)_75%,var(--glow-stop-5)_100%)] animate-[glow-enter-blur_1s_ease_.5s_both]) after:(content-[''] absolute inset-[-1px] translate-0 z-[-1] opacity-50 rounded-xl
+ bg-[linear-gradient(135deg,transparent_0,transparent_34%,transparent_49%,#fff_57%,#fff_64%,var(--glow-stop-1)_66%,var(--glow-stop-2)_75%,var(--glow-stop-3)_83%,var(--glow-stop-4)_92%,var(--glow-stop-5)_100%)] bg-[length:300%_300%] bg-[position:0_0] bg-no-repeat
+ transition-[background-position_.8s_ease] animate-[glow-enter-stroke_.5s_ease_.5s_both])">
         <div class="text-center mb-8">
             <router-link to="/" class="inline-flex items-center justify-center w-12 h-12 mb-4">
                 <img class="w-12 h-12" src="/apple-touch-icon.png" alt="Logo" />
diff --git a/uno.config.ts b/uno.config.ts
index a9385cc..b9fbf77 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -204,6 +204,11 @@ export default defineConfig({
       :root {
         --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
         --font-serif: 'Playfair Display', serif, 'Times New Roman', Times, serif;
+        --glow-stop-1: #ffc400;
+        --glow-stop-2: #ff9100;
+        --glow-stop-3: #f8682f;
+        --glow-stop-4: #e62c6d;
+        --glow-stop-5: #b25aff;
       }
       :focus {
         outline-color: ${context.theme.colors?.primary?.active};
@@ -233,7 +238,26 @@ export default defineConfig({
 .fade-leave-to {
   opacity: 0;
 }
-
+@keyframes glow-enter-blur {
+    0% {
+      opacity: 0;
+      filter: blur(0);
+      }
+      100% {
+        opacity: 0.5;
+        filter: blur(60px);
+    }
+}
+@keyframes glow-enter-stroke {
+    0% {
+    background-position-x: 0%;
+    background-position-y: 0%;
+    }
+    100% {
+    background-position-x: 100%;
+    background-position-y: 100%;
+      }
+}
       `;
       },
     },