Explorar el Código

Update style for register form

Lee Morgan hace 3 semanas
padre
commit
7cc2df391e
Se han modificado 1 ficheros con 50 adiciones y 0 borrados
  1. 50 0
      src/routes/register/+page.svelte

+ 50 - 0
src/routes/register/+page.svelte

@@ -21,6 +21,7 @@
         <span class="logo-text">ChatRPG</span>
     </a>
 
+    <div class="form-glow">
     <div id="register" class="standardForm" onsubmit={submit}>
         <h2>Join The Adventure</h2>
 
@@ -46,6 +47,7 @@
 
         <p>Already have an account? <a href="/login">Log in</a></p>
     </div>
+    </div>
 </main>
 
 <style>
@@ -85,4 +87,52 @@
     h2{
         text-align: center;
     }
+
+    .form-glow {
+        position: relative;
+        border-radius: 14px;
+        width: min(660px, 100%);
+    }
+
+    .form-glow::before {
+        content: "";
+        position: absolute;
+        inset: -2px;
+        border-radius: 14px;
+        background: conic-gradient(
+            from var(--angle, 0deg),
+            transparent 0%,
+            #c084fc 20%,
+            #5a5aff 40%,
+            transparent 60%
+        );
+        animation: spin-border 10s linear infinite;
+        z-index: 0;
+    }
+
+    .form-glow::after {
+        content: "";
+        position: absolute;
+        inset: 1px;
+        border-radius: 13px;
+        background: #1a1a2e;
+        z-index: 1;
+    }
+
+    .form-glow .standardForm {
+        position: relative;
+        z-index: 2;
+        border-color: transparent;
+        max-width: 660px;
+    }
+
+    @property --angle {
+        syntax: "<angle>";
+        inherits: false;
+        initial-value: 0deg;
+    }
+
+    @keyframes spin-border {
+        to { --angle: 360deg; }
+    }
 </style>