style: update auth ui

Sye0w · Oct 4, 2024 · 0a9d411 · 0a9d411
1 parent 0ba1bf4
commit 0a9d411
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/src/app/views/auth/auth/auth.component.scss b/src/app/views/auth/auth/auth.component.scss
@@ -1,15 +1,47 @@
 @use '../../../../partials/_variables.scss' as *;
 @use '../../../../partials/mixins' as *;
 
+// Shine effect mixin
+@mixin shine-effect {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.3) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    transform: rotate(30deg);
+    animation: shine 3s infinite linear;
+  }
+}
+
+@keyframes shine {
+  0% {
+    transform: translateX(-100%) rotate(30deg);
+  }
+  100% {
+    transform: translateX(100%) rotate(30deg);
+  }
+}
+
 main {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
 
-
   h2 {
     @include title-text;
+    @include shine-effect;
     span {
       @include gradient-text;
     }

diff --git a/src/partials/_mixins.scss b/src/partials/_mixins.scss
@@ -122,3 +122,4 @@
     margin-right: 8px;
   }
 }
+