From bd3e2ba6a5835740bb7e8cfb207c8a435964c52a Mon Sep 17 00:00:00 2001
From: admin <1297598740@qq.com>
Date: Mon, 26 Jan 2026 15:57:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=83=8C=E6=99=AF=EF=BC=9A=E6=9E=81?=
 =?UTF-8?q?=E4=B8=BA=E6=9F=94=E5=92=8C=E7=9A=84=E6=B7=A1=E8=93=9D=E8=89=B2?=
 =?UTF-8?q?=E6=B8=90=E5=8F=98=EF=BC=8C=E6=90=AD=E9=85=8D=E6=B5=81=E5=8A=A8?=
 =?UTF-8?q?=E7=9A=84=E7=B2=89=E8=93=9D=E5=85=89=E6=96=91=E3=80=82=20?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=EF=BC=9A=E9=80=9A=E9=80=8F=E7=9A=84=E7=99=BD?=
 =?UTF-8?q?=E8=89=B2=E7=A3=A8=E7=A0=82=E7=8E=BB=E7=92=83=EF=BC=8C=E5=B8=A6?=
 =?UTF-8?q?=E6=9C=89=E7=BB=86=E8=85=BB=E7=9A=84=E9=98=B4=E5=BD=B1=EF=BC=8C?=
 =?UTF-8?q?=E5=83=8F=E6=BC=82=E6=B5=AE=E5=9C=A8=E7=A9=BA=E4=B8=AD=E4=B8=80?=
 =?UTF-8?q?=E6=A0=B7=E3=80=82=20=E9=85=8D=E8=89=B2=EF=BC=9A=E4=B8=BB?=
 =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=98=AF=E9=9D=9B=E8=93=9D=E5=88=B0=E7=B4=AB?=
 =?UTF-8?q?=E8=89=B2=E7=9A=84=E6=B8=90=E5=8F=98=EF=BC=88Linear=20Gradient?=
 =?UTF-8?q?=EF=BC=89=EF=BC=8C=E6=97=A2=E4=B8=93=E4=B8=9A=E5=8F=88=E4=B8=8D?=
 =?UTF-8?q?=E5=A4=B1=E6=B4=BB=E5=8A=9B=E3=80=82=20=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=EF=BC=9A=E4=BD=BF=E7=94=A8=E4=BA=86=20Plus=20Jakarta=20Sans?=
 =?UTF-8?q?=EF=BC=8C=E8=BF=99=E6=98=AF=E8=BF=91=E5=B9=B4=E6=9D=A5=E9=9D=9E?=
 =?UTF-8?q?=E5=B8=B8=E6=B5=81=E8=A1=8C=E7=9A=84=E5=87=A0=E4=BD=95=E6=97=A0?=
 =?UTF-8?q?=E8=A1=AC=E7=BA=BF=E5=AD=97=E4=BD=93=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/Login.css | 356 +++++++++++++++++---------------------
 1 file changed, 163 insertions(+), 193 deletions(-)

diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css
index acbb7a2..a8bf41d 100644
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@@ -1,10 +1,13 @@
-/* "Ethereal Void" Ultra-Modern Theme */
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
+/* "Morning Mist" Premium Light Theme */
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
 
 :root {
-  --primary-glow: conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg);
-  --glass-surface: rgba(255, 255, 255, 0.03);
-  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.8);
+  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
 }
 
 .login-page {
@@ -12,105 +15,86 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #000000;
+  /* Luxurious light gradient */
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f5f3ff 100%);
   position: relative;
   overflow: hidden;
-  font-family: 'Inter', sans-serif;
-  color: #fff;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  color: var(--text-primary);
 }
 
-/* 1. Dynamic "Void" Background */
+/* 1. Artistic Background Elements */
 .login-page::before {
   content: '';
   position: absolute;
-  width: 150vw;
-  height: 150vw;
-  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.08) 0%, rgba(0, 0, 0, 0) 50%);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: pulseLight 8s ease-in-out infinite alternate;
-  pointer-events: none;
+  top: -10%;
+  right: -5%;
+  width: 50vw;
+  height: 50vw;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
+  filter: blur(60px);
+  animation: floatBlue 20s ease-in-out infinite alternate;
 }
 
 .login-page::after {
   content: '';
   position: absolute;
-  top: -20%;
+  bottom: -10%;
   left: -10%;
-  width: 50vw;
-  height: 50vw;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
-  filter: blur(60px);
-  animation: floatOrb 15s ease-in-out infinite;
+  width: 60vw;
+  height: 60vw;
+  background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+  filter: blur(80px);
+  animation: floatPink 25s ease-in-out infinite alternate-reverse;
 }
 
-@keyframes pulseLight {
+@keyframes floatBlue {
   0% {
-    opacity: 0.5;
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1.2);
-  }
-}
-
-@keyframes floatOrb {
-
-  0%,
-  100% {
     transform: translate(0, 0);
   }
 
-  50% {
-    transform: translate(20px, 40px);
+  100% {
+    transform: translate(-30px, 50px);
   }
 }
 
-/* 2. The Monolith Card */
+@keyframes floatPink {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(30px, -50px);
+  }
+}
+
+/* 2. Frosted Glass Card */
 .login-container {
   width: 100%;
-  max-width: 400px;
+  max-width: 420px;
   padding: 3rem;
   margin: 1rem;
-  position: relative;
-  z-index: 10;
 
-  /* Ultra-refined Glass */
-  background: rgba(10, 10, 10, 0.6);
-  backdrop-filter: blur(40px);
-  -webkit-backdrop-filter: blur(40px);
+  /* Lighter, brighter glass */
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 
-  border-radius: 32px;
+  border-radius: 24px;
   border: 1px solid var(--glass-border);
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 1),
-    /* inner black line */
-    0 20px 60px rgba(0, 0, 0, 0.8),
-    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-  /* subtle inner highlight */
+    var(--glass-shadow),
+    0 1px 2px 0 rgba(255, 255, 255, 0.5) inset;
 
-  animation: slideUpFade 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+  animation: cardEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
+  position: relative;
+  z-index: 10;
 }
 
-/* Top "Spotlight" Border Effect */
-.login-container::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 20%;
-  right: 20%;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-  width: 60%;
-}
-
-@keyframes slideUpFade {
+@keyframes cardEntrance {
   from {
     opacity: 0;
-    transform: translateY(40px) scale(0.98);
+    transform: translateY(20px) scale(0.98);
   }
 
   to {
@@ -119,56 +103,56 @@
   }
 }
 
-/* 3. Minimalist Header */
+/* 3. Header & Logo */
 .login-header {
   text-align: center;
-  margin-bottom: 3rem;
+  margin-bottom: 2.5rem;
 }
 
 .login-logo {
-  width: 64px;
-  height: 64px;
+  width: 68px;
+  height: 68px;
   margin: 0 auto 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  /* Gem-like appearance */
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01));
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 20px;
-  color: #fff;
-  position: relative;
+  background: white;
+  border-radius: 18px;
+  color: #6366f1;
+  /* Indigo 500 */
+  border: 1px solid rgba(226, 232, 240, 0.8);
+
+  box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.15);
+  transform: rotate(-3deg);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-/* The neon ring */
-.login-logo::before {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  z-index: -1;
-  border-radius: 21px;
-  background: var(--primary-glow);
-  opacity: 0.5;
-  filter: blur(8px);
+.login-container:hover .login-logo {
+  transform: rotate(0deg) scale(1.05);
+  box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.25);
+  background: var(--accent-gradient);
+  color: white;
+  border-color: transparent;
 }
 
 .login-title {
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 1.75rem;
-  font-weight: 600;
-  color: white;
+  font-size: 1.875rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
   margin-bottom: 0.5rem;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.025em;
 }
 
 .login-subtitle {
-  color: #8899a6;
-  font-size: 0.9rem;
-  letter-spacing: 0.01em;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  font-weight: 400;
 }
 
-/* 4. "Carved" Inputs */
+/* 4. Soft Form Inputs */
 .login-form {
   display: flex;
   flex-direction: column;
@@ -178,50 +162,42 @@
 .login-field {
   display: flex;
   flex-direction: column;
-  gap: 0.6rem;
+  gap: 0.5rem;
 }
 
 .login-label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.8rem;
-  font-weight: 500;
-  font-family: 'Space Grotesk', sans-serif;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #6b7280;
-  margin-left: 4px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #475569;
+  margin-left: 0.25rem;
 }
 
 .login-input {
   width: 100%;
-  padding: 1rem 1.25rem;
+  padding: 0.875rem 1rem;
   font-size: 0.95rem;
-  font-family: 'Inter', sans-serif;
+  font-family: inherit;
 
-  /* Seamless dark background */
-  background: rgba(0, 0, 0, 0.4);
-  color: #fff;
-
-  /* No visible border initially, just depth */
-  border: 1px solid transparent;
-  border-radius: 16px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) inset;
-  /* Inner shadow depth */
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  color: #1e293b;
 
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .login-input:focus {
   outline: none;
-  background: rgba(0, 0, 0, 0.6);
-  border-color: rgba(255, 255, 255, 0.1);
+  border-color: #8b5cf6;
+  background: #fff;
   box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.4) inset,
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-  /* Subtle ring */
-  color: #fff;
+    0 0 0 4px rgba(139, 92, 246, 0.1),
+    0 4px 12px rgba(0, 0, 0, 0.05);
+  transform: translateY(-1px);
 }
 
 /* Password Toggle */
@@ -231,98 +207,83 @@
 
 .login-password-toggle {
   position: absolute;
-  right: 1.25rem;
+  right: 1rem;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
-  color: #4b5563;
+  color: #94a3b8;
   cursor: pointer;
   padding: 4px;
   transition: color 0.2s;
 }
 
 .login-password-toggle:hover {
-  color: #e5e7eb;
+  color: #64748b;
 }
 
-/* 5. Holographic Button */
+/* 5. Elegant Buttons */
 .login-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
-  padding: 1.1rem;
+  gap: 0.6rem;
+  padding: 0.875rem;
   border: none;
-  border-radius: 16px;
-  font-size: 0.95rem;
+  border-radius: 12px;
+  font-size: 1rem;
   font-weight: 600;
-  font-family: 'Space Grotesk', sans-serif;
   cursor: pointer;
-  margin-top: 1rem;
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: 0.5rem;
 }
 
-/* Primary "Glow" Button */
+/* Gradient Primary */
 .login-button--primary {
   color: white;
-  background: #fff;
-  color: #000;
-  z-index: 1;
-}
-
-/* The gradient hover effect sits behind */
-.login-button--primary::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-  z-index: -1;
-  opacity: 0;
-  transition: opacity 0.3s ease;
+  background: var(--accent-gradient);
+  background-size: 200% auto;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 }
 
 .login-button--primary:hover:not(:disabled) {
-  color: white;
-  transform: translateY(-2px);
-  box-shadow: 0 10px 30px -4px rgba(139, 92, 246, 0.5);
+  background-position: right center;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
 }
 
-.login-button--primary:hover:not(:disabled)::before {
-  opacity: 1;
+.login-button--primary:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  filter: grayscale(0.5);
 }
 
-/* Minimal GitHub Button */
+/* Clean GitHub Button */
 .login-button--github {
-  background: transparent;
-  color: #94a3b8;
-  border: 1px dashed rgba(255, 255, 255, 0.2);
-  margin-top: 0.5rem;
-  padding: 0.9rem;
+  background: #ffffff;
+  color: #1e293b;
+  border: 1px solid #e2e8f0;
+  margin-top: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .login-button--github:hover {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(255, 255, 255, 0.5);
-  border-style: solid;
-  color: #fff;
+  background: #f8fafc;
+  border-color: #cbd5e1;
+  color: #0f172a;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }
 
-/* 6. Refined Footer */
+/* 6. Footer & Utils */
 .login-divider {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
-  color: #4b5563;
-  font-size: 0.75rem;
-  margin: 1rem 0;
+  gap: 1rem;
+  color: #94a3b8;
+  font-size: 0.85rem;
+  margin: 0.75rem 0;
   font-weight: 500;
-  text-transform: uppercase;
 }
 
 .login-divider::before,
@@ -330,41 +291,50 @@
   content: '';
   flex: 1;
   height: 1px;
-  background: #1f2937;
+  background: #e2e8f0;
 }
 
 .login-footer {
   text-align: center;
   margin-top: 2rem;
-  font-size: 0.9rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #f1f5f9;
 }
 
 .login-footer p {
-  color: #6b7280;
+  color: #64748b;
+  font-size: 0.95rem;
 }
 
 .login-footer a {
-  color: white;
-  font-weight: 500;
+  color: #6366f1;
   text-decoration: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  padding-bottom: 2px;
-  transition: border-color 0.2s;
-  margin-left: 4px;
+  font-weight: 600;
+  margin-left: 0.4rem;
+  transition: color 0.2s;
 }
 
 .login-footer a:hover {
-  border-color: white;
+  color: #4f46e5;
+  text-decoration: underline;
+  text-decoration-color: rgba(79, 70, 229, 0.4);
+  text-underline-offset: 4px;
 }
 
-/* Errors */
+/* Error Message */
 .login-error {
-  background: rgba(255, 59, 48, 0.1);
-  color: #ff3b30;
-  padding: 0.8rem;
-  border-radius: 12px;
-  font-size: 0.85rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #ef4444;
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+  font-size: 0.875rem;
   text-align: center;
-  margin-bottom: 0.5rem;
-  border: 1px solid rgba(255, 59, 48, 0.2);
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.05);
+}
+
+.login-hint {
+  font-size: 0.8rem;
+  color: #94a3b8;
+  margin-top: 0.25rem;
 }
\ No newline at end of file