Spaces:
Sleeping
Sleeping
| /* ======================================== | |
| Authentication Pages Styles | |
| ======================================== */ | |
| .auth-body { background: #F8FAFC; min-height: 100vh; } | |
| .auth-page { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| min-height: 100vh; | |
| } | |
| /* Left Panel */ | |
| .auth-left { | |
| background: linear-gradient(145deg, #0F172A 0%, #1E293B 60%, #0F172A 100%); | |
| padding: 40px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .auth-left::before { | |
| content: ''; | |
| position: absolute; | |
| top: -100px; right: -100px; | |
| width: 400px; height: 400px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(79,70,229,0.2), transparent); | |
| } | |
| .auth-left::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -80px; left: -80px; | |
| width: 300px; height: 300px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(6,182,212,0.15), transparent); | |
| } | |
| .auth-left-content { position: relative; z-index: 1; } | |
| .auth-back { color: rgba(255,255,255,0.45); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 48px; transition: color 0.2s; font-weight: 500; } | |
| .auth-back:hover { color: rgba(255,255,255,0.8); } | |
| .auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 48px; } | |
| .auth-logo-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; } | |
| .student-gradient { background: linear-gradient(135deg, #06B6D4, #3B82F6); } | |
| .teacher-gradient { background: linear-gradient(135deg, #4F46E5, #7C3AED); } | |
| .admin-gradient { background: linear-gradient(135deg, #F59E0B, #EF4444); } | |
| .auth-app-name { font-size: 1.1rem; font-weight: 800; color: white; } | |
| .auth-portal-name { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; } | |
| .auth-headline { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: white; line-height: 1.3; margin-bottom: 16px; letter-spacing: -0.5px; } | |
| .auth-desc { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.7; margin-bottom: 40px; } | |
| .auth-features { display: flex; flex-direction: column; gap: 14px; } | |
| .auth-feature { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 500; } | |
| .auth-feature span { font-size: 1.1rem; } | |
| .auth-left-footer { position: relative; z-index: 1; } | |
| .auth-security-badges { display: flex; gap: 12px; flex-wrap: wrap; } | |
| .auth-security-badges span { font-size: 12px; color: rgba(255,255,255,0.35); font-weight: 500; } | |
| /* Right Panel */ | |
| .auth-right { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px 24px; | |
| background: #F8FAFC; | |
| } | |
| .auth-form-wrapper { width: 100%; max-width: 440px; } | |
| /* Auth Card */ | |
| .auth-card { | |
| background: white; | |
| border-radius: 24px; | |
| padding: 36px; | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 6px rgba(0,0,0,0.04); | |
| border: 1px solid #E2E8F0; | |
| margin-bottom: 16px; | |
| } | |
| .auth-card-header { margin-bottom: 24px; } | |
| .auth-card-header h1 { font-size: 1.5rem; font-weight: 800; color: #1E293B; margin-bottom: 6px; } | |
| .auth-card-header p { font-size: 14px; color: #64748B; } | |
| /* Role reminder */ | |
| .role-reminder { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 14px 16px; | |
| border-radius: 12px; | |
| margin-bottom: 4px; | |
| font-size: 13px; | |
| } | |
| .student-reminder { background: rgba(6,182,212,0.07); border: 1px solid rgba(6,182,212,0.2); color: #0E7490; } | |
| .teacher-reminder { background: rgba(79,70,229,0.07); border: 1px solid rgba(79,70,229,0.2); color: #4338CA; } | |
| .admin-reminder { background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.2); color: #B45309; } | |
| .reminder-icon { font-size: 1.4rem; } | |
| .role-reminder strong { display: block; font-weight: 700; margin-bottom: 3px; } | |
| .role-reminder p { font-size: 12px; color: inherit; opacity: 0.8; margin: 0; } | |
| /* Loading state */ | |
| .auth-loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 20px; | |
| color: #64748B; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| /* Divider */ | |
| .auth-divider { | |
| text-align: center; | |
| position: relative; | |
| margin: 20px 0; | |
| font-size: 12px; | |
| color: #94A3B8; | |
| font-weight: 500; | |
| } | |
| .auth-divider::before, .auth-divider::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| width: calc(50% - 80px); | |
| height: 1px; | |
| background: #E2E8F0; | |
| } | |
| .auth-divider::before { left: 0; } | |
| .auth-divider::after { right: 0; } | |
| /* Auth steps preview */ | |
| .auth-steps-preview { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0; | |
| padding: 16px; | |
| background: #F8FAFC; | |
| border-radius: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .auth-step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; } | |
| .step-dot { | |
| width: 28px; height: 28px; | |
| border-radius: 50%; | |
| background: #E2E8F0; | |
| color: #94A3B8; | |
| font-size: 12px; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .auth-step-item.active .step-dot { background: #4F46E5; color: white; } | |
| .auth-step-item span { font-size: 10px; color: #94A3B8; font-weight: 600; text-align: center; } | |
| .step-connector { flex: 1; height: 2px; background: #E2E8F0; max-width: 40px; } | |
| /* Notice Box */ | |
| .auth-notice-box { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| padding: 12px 14px; | |
| background: #F8FAFC; | |
| border-radius: 10px; | |
| font-size: 12px; | |
| color: #64748B; | |
| line-height: 1.5; | |
| border: 1px solid #E2E8F0; | |
| } | |
| /* Error/Unauthorized */ | |
| .auth-error-state, .auth-success-state { | |
| text-align: center; | |
| padding: 16px 0; | |
| } | |
| .error-icon { font-size: 4rem; margin-bottom: 16px; } | |
| .auth-error-state h2 { color: #EF4444; font-size: 1.3rem; margin-bottom: 12px; } | |
| .auth-error-state p { font-size: 14px; color: #64748B; line-height: 1.6; margin-bottom: 20px; } | |
| .error-details { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #991B1B; font-family: monospace; margin-bottom: 20px; } | |
| .auth-success-state h2 { color: #10B981; font-size: 1.3rem; margin-bottom: 8px; } | |
| .auth-success-state p { font-size: 14px; color: #64748B; } | |
| /* Footer text */ | |
| .auth-footer-text { text-align: center; font-size: 13px; color: #94A3B8; } | |
| .auth-footer-text a { color: #4F46E5; font-weight: 600; } | |
| /* Password field with toggle (for admin) */ | |
| .input-group { position: relative; } | |
| .input-group .form-control { padding-right: 44px; } | |
| .input-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #94A3B8; font-size: 1rem; } | |
| /* Admin specific */ | |
| .admin-pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; } | |
| .pin-btn { | |
| aspect-ratio: 1; | |
| border: 1.5px solid #E2E8F0; | |
| border-radius: 12px; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: #1E293B; | |
| background: white; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: var(--font); | |
| } | |
| .pin-btn:hover { background: #F1F5F9; border-color: #4F46E5; } | |
| .pin-btn:active { background: #4F46E5; color: white; transform: scale(0.95); } | |
| .pin-display { display: flex; gap: 12px; justify-content: center; margin: 16px 0; } | |
| .pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E2E8F0; transition: all 0.2s; } | |
| .pin-dot.filled { background: #4F46E5; border-color: #4F46E5; } | |
| /* Responsive */ | |
| @media (max-width: 900px) { | |
| .auth-page { grid-template-columns: 1fr; } | |
| .auth-left { display: none; } | |
| .auth-right { padding: 24px 16px; min-height: 100vh; align-items: flex-start; padding-top: 40px; } | |
| } | |