Novault/Novault-Frontend-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增登录页面的样式文件。

Browse Source
This commit is contained in:
admin
2026-01-28 16:09:03 +08:00
parent d0ffdae94e
commit d122d11ad5
1 changed files with 344 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

478
src/pages/Login/Login.css
View File

@@ -1,100 +1,144 @@
/* "Morning Mist" Premium Light Theme */ /* "Aurora Borealis" Ultra Premium Login Theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
:root { :root {
--glass-bg: rgba(255, 255, 255, 0.7); --glass-bg: rgba(255, 255, 255, 0.85);
--glass-border: rgba(255, 255, 255, 0.8); --glass-border: rgba(255, 255, 255, 0.9);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); --glass-shadow: 0 20px 60px -10px rgba(31, 38, 135, 0.12);
--text-primary: #1e293b; --text-primary: #0f172a;
--text-secondary: #64748b; --text-secondary: #64748b;
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
--accent-primary: #667eea;
--accent-secondary: #764ba2;
} }
/* ===================== PAGE LAYOUT ===================== */
.login-page { .login-page {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* Luxurious light gradient */ padding: 2rem;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f5f3ff 100%);
/* Premium Gradient Background */
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 140, 183, 0.12) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
font-family: 'Plus Jakarta Sans', sans-serif; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-primary); color: var(--text-primary);
} }
/* 1. Artistic Background Elements */ /* Floating Orbs Animation */
.login-page::before { .login-page::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -10%; top: -20%;
right: -5%; right: -10%;
width: 50vw; width: 600px;
height: 50vw; height: 600px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(255, 255, 255, 0) 70%); background: radial-gradient(circle, rgba(102, 126, 234, 0.25) 0%, transparent 70%);
filter: blur(60px); filter: blur(80px);
animation: floatBlue 20s ease-in-out infinite alternate; animation: floatOrb1 15s ease-in-out infinite;
pointer-events: none;
} }
.login-page::after { .login-page::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -10%; bottom: -20%;
left: -10%; left: -10%;
width: 60vw; width: 700px;
height: 60vw; height: 700px;
background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background: radial-gradient(circle, rgba(240, 147, 251, 0.2) 0%, transparent 70%);
filter: blur(80px); filter: blur(100px);
animation: floatPink 25s ease-in-out infinite alternate-reverse; animation: floatOrb2 20s ease-in-out infinite;
pointer-events: none;
} }
@keyframes floatBlue { @keyframes floatOrb1 {
0% {
transform: translate(0, 0);
}
0%,
100% { 100% {
transform: translate(-30px, 50px); transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(-30px, 40px) rotate(90deg);
}
50% {
transform: translate(-50px, -20px) rotate(180deg);
}
75% {
transform: translate(20px, 30px) rotate(270deg);
} }
} }
@keyframes floatPink { @keyframes floatOrb2 {
0% {
transform: translate(0, 0);
}
0%,
100% { 100% {
transform: translate(30px, -50px); transform: translate(0, 0) scale(1);
}
33% {
transform: translate(40px, -30px) scale(1.05);
}
66% {
transform: translate(-20px, 50px) scale(0.95);
} }
} }
/* 2. Frosted Glass Card */ /* Decorative Grid Pattern */
.login-page>.login-container::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: -1;
}
/* ===================== GLASS CARD ===================== */
.login-container { .login-container {
width: 100%; width: 100%;
max-width: 420px; max-width: 440px;
padding: 3rem; padding: 2.5rem 2.75rem;
margin: 1rem;
/* Lighter, brighter glass */ /* Premium Frosted Glass */
background: var(--glass-bg); background: var(--glass-bg);
backdrop-filter: blur(20px); backdrop-filter: blur(30px) saturate(150%);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(30px) saturate(150%);
border-radius: 24px; border-radius: 28px;
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
box-shadow: box-shadow:
var(--glass-shadow), var(--glass-shadow),
0 1px 2px 0 rgba(255, 255, 255, 0.5) inset; 0 0 0 1px rgba(255, 255, 255, 0.4) inset,
0 -20px 40px -20px rgba(255, 255, 255, 0.8) inset;
animation: cardEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation: cardFloat 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) backwards;
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
@keyframes cardEntrance { @keyframes cardFloat {
from { from {
opacity: 0; opacity: 0;
transform: translateY(20px) scale(0.98); transform: translateY(40px) scale(0.95);
} }
to { to {
@@ -103,60 +147,96 @@
} }
} }
/* 3. Header & Logo */ /* Subtle Glow Effect */
.login-container::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 29px;
padding: 1px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(240, 147, 251, 0.2), rgba(255, 255, 255, 0));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.login-container:hover::after {
opacity: 1;
}
/* ===================== HEADER ===================== */
.login-header { .login-header {
text-align: center; text-align: center;
margin-bottom: 2.5rem; margin-bottom: 2.25rem;
} }
.login-logo { .login-logo {
width: 68px; width: 72px;
height: 68px; height: 72px;
margin: 0 auto 1.5rem; margin: 0 auto 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: white; /* 3D Effect Logo */
border-radius: 18px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
color: #6366f1; border-radius: 20px;
/* Indigo 500 */ color: var(--accent-primary);
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.15); box-shadow:
transform: rotate(-3deg); 8px 8px 20px rgba(102, 126, 234, 0.12),
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); -4px -4px 12px rgba(255, 255, 255, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transform: perspective(500px) rotateY(-5deg) rotateX(3deg);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
.login-container:hover .login-logo { .login-container:hover .login-logo {
transform: rotate(0deg) scale(1.05); transform: perspective(500px) rotateY(0deg) rotateX(0deg) scale(1.08);
box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.25);
background: var(--accent-gradient); background: var(--accent-gradient);
color: white; color: white;
border-color: transparent; box-shadow:
0 15px 35px rgba(102, 126, 234, 0.35),
0 5px 15px rgba(118, 75, 162, 0.25);
}
.login-logo svg {
filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.2));
} }
.login-title { .login-title {
font-size: 1.875rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%); background: linear-gradient(135deg, #0f172a 0%, #334155 50%, #475569 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
margin-bottom: 0.5rem; background-clip: text;
letter-spacing: -0.025em; margin-bottom: 0.625rem;
letter-spacing: -0.03em;
line-height: 1.2;
} }
.login-subtitle { .login-subtitle {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 400; font-weight: 400;
line-height: 1.5;
} }
/* 4. Soft Form Inputs */ /* ===================== FORM ===================== */
.login-form { .login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.25rem; gap: 1.125rem;
} }
.login-field { .login-field {
@@ -169,121 +249,183 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-size: 0.85rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: #475569; color: #374151;
margin-left: 0.25rem; margin-left: 0.125rem;
} }
.login-label svg {
color: var(--accent-primary);
opacity: 0.8;
}
/* Premium Input Fields */
.login-input { .login-input {
width: 100%; width: 100%;
padding: 0.875rem 1rem; padding: 0.9375rem 1.125rem;
font-size: 0.95rem; font-size: 0.9375rem;
font-family: inherit; font-family: inherit;
font-weight: 450;
background: white; background: rgba(255, 255, 255, 0.9);
border: 1px solid #e2e8f0; border: 1.5px solid #e5e7eb;
border-radius: 12px; border-radius: 14px;
color: #1e293b; color: #0f172a;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow:
0 2px 4px rgba(0, 0, 0, 0.02),
inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
.login-input::placeholder {
color: #9ca3af;
font-weight: 400;
}
.login-input:hover {
border-color: #c7d2fe;
background: #fff;
} }
.login-input:focus { .login-input:focus {
outline: none; outline: none;
border-color: #8b5cf6; border-color: var(--accent-primary);
background: #fff; background: #fff;
box-shadow: box-shadow:
0 0 0 4px rgba(139, 92, 246, 0.1), 0 0 0 4px rgba(102, 126, 234, 0.12),
0 4px 12px rgba(0, 0, 0, 0.05); 0 4px 16px rgba(102, 126, 234, 0.08);
transform: translateY(-1px); transform: translateY(-1px);
} }
/* Password Toggle */ /* Password Field */
.login-password-wrapper { .login-password-wrapper {
position: relative; position: relative;
} }
.login-password-wrapper .login-input {
padding-right: 3rem;
}
.login-password-toggle { .login-password-toggle {
position: absolute; position: absolute;
right: 1rem; right: 0.875rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background: none; background: none;
border: none; border: none;
color: #94a3b8; color: #94a3b8;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 6px;
transition: color 0.2s; border-radius: 8px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
} }
.login-password-toggle:hover { .login-password-toggle:hover {
color: #64748b; color: var(--accent-primary);
background: rgba(102, 126, 234, 0.08);
} }
/* 5. Elegant Buttons */ /* ===================== BUTTONS ===================== */
.login-button { .login-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.6rem; gap: 0.625rem;
padding: 0.875rem; padding: 0.9375rem 1.25rem;
border: none; border: none;
border-radius: 12px; border-radius: 14px;
font-size: 1rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
font-family: inherit;
cursor: pointer; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 0.5rem; margin-top: 0.625rem;
position: relative;
overflow: hidden;
} }
/* Gradient Primary */ /* Primary Gradient Button */
.login-button--primary { .login-button--primary {
color: white; color: white;
background: var(--accent-gradient); background: var(--accent-gradient);
background-size: 200% auto; background-size: 200% 200%;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); box-shadow:
0 4px 15px rgba(102, 126, 234, 0.35),
0 1px 3px rgba(118, 75, 162, 0.2);
}
.login-button--primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s;
} }
.login-button--primary:hover:not(:disabled) { .login-button--primary:hover:not(:disabled) {
background-position: right center; background-position: 100% 100%;
transform: translateY(-1px); transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); box-shadow:
0 8px 25px rgba(102, 126, 234, 0.45),
0 4px 10px rgba(118, 75, 162, 0.25);
}
.login-button--primary:hover:not(:disabled)::before {
opacity: 1;
}
.login-button--primary:active:not(:disabled) {
transform: translateY(0);
} }
.login-button--primary:disabled { .login-button--primary:disabled {
opacity: 0.7; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
filter: grayscale(0.5); filter: grayscale(0.3);
} }
/* Clean GitHub Button */ /* GitHub Button */
.login-button--github { .login-button--github {
background: #ffffff; background: #ffffff;
color: #1e293b; color: #1f2937;
border: 1px solid #e2e8f0; border: 1.5px solid #e5e7eb;
margin-top: 0; margin-top: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
} }
.login-button--github:hover { .login-button--github:hover {
background: #f8fafc; background: #f9fafb;
border-color: #cbd5e1; border-color: #d1d5db;
color: #0f172a; color: #111827;
transform: translateY(-1px); transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
} }
/* 6. Footer & Utils */ .login-button--github svg {
transition: transform 0.3s;
}
.login-button--github:hover svg {
transform: rotate(-8deg) scale(1.1);
}
/* ===================== DIVIDER ===================== */
.login-divider { .login-divider {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
color: #94a3b8; color: #9ca3af;
font-size: 0.85rem; font-size: 0.8125rem;
margin: 0.75rem 0; margin: 0.875rem 0;
font-weight: 500; font-weight: 500;
letter-spacing: 0.025em;
text-transform: uppercase;
} }
.login-divider::before, .login-divider::before,
@@ -291,50 +433,118 @@
content: ''; content: '';
flex: 1; flex: 1;
height: 1px; height: 1px;
background: #e2e8f0; background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
} }
/* ===================== FOOTER ===================== */
.login-footer { .login-footer {
text-align: center; text-align: center;
margin-top: 2rem; margin-top: 1.75rem;
padding-top: 1.5rem; padding-top: 1.5rem;
border-top: 1px solid #f1f5f9; border-top: 1px solid rgba(229, 231, 235, 0.6);
} }
.login-footer p { .login-footer p {
color: #64748b; color: var(--text-secondary);
font-size: 0.95rem; font-size: 0.9375rem;
} }
.login-footer a { .login-footer a {
color: #6366f1; color: var(--accent-primary);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
margin-left: 0.4rem; margin-left: 0.375rem;
position: relative;
transition: color 0.2s; transition: color 0.2s;
} }
.login-footer a:hover { .login-footer a::after {
color: #4f46e5; content: '';
text-decoration: underline; position: absolute;
text-decoration-color: rgba(79, 70, 229, 0.4); bottom: -2px;
text-underline-offset: 4px; left: 0;
width: 100%;
height: 2px;
background: var(--accent-gradient);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
border-radius: 1px;
} }
/* Error Message */ .login-footer a:hover {
color: var(--accent-secondary);
}
.login-footer a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* ===================== ERROR & HINTS ===================== */
.login-error { .login-error {
background: #fef2f2; background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
border: 1px solid #fecaca; border: 1px solid #fecaca;
color: #ef4444; color: #dc2626;
padding: 0.75rem 1rem; padding: 0.875rem 1rem;
border-radius: 10px; border-radius: 12px;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500;
text-align: center; text-align: center;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.05); display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
animation: shakeError 0.4s ease;
}
@keyframes shakeError {
0%,
100% {
transform: translateX(0);
}
20%,
60% {
transform: translateX(-6px);
}
40%,
80% {
transform: translateX(6px);
}
} }
.login-hint { .login-hint {
font-size: 0.8rem; font-size: 0.8125rem;
color: #94a3b8; color: #9ca3af;
margin-top: 0.25rem; margin-top: 0.375rem;
margin-left: 0.125rem;
}
/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
.login-page {
padding: 1rem;
}
.login-container {
padding: 2rem 1.5rem;
border-radius: 24px;
}
.login-logo {
width: 64px;
height: 64px;
}
.login-title {
font-size: 1.75rem;
}
}
/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
/* Keep light theme for login - looks more premium */
} }