Spaces:
Sleeping
Sleeping
| /* ======================================== | |
| Student Dashboard Styles | |
| Mobile-First Design | |
| ======================================== */ | |
| .auth-check-screen { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| gap: 16px; | |
| color: var(--gray); | |
| font-size: 14px; | |
| } | |
| .student-app { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| min-height: 100vh; | |
| background: var(--bg); | |
| position: relative; | |
| } | |
| /* Header */ | |
| .student-header { | |
| background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%); | |
| padding: 16px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| .header-brand { display: flex; align-items: center; gap: 10px; } | |
| .header-logo { | |
| width: 32px; height: 32px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border-radius: 8px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 12px; font-weight: 800; color: white; | |
| } | |
| .header-brand span { font-size: 15px; font-weight: 700; color: white; } | |
| .header-user { display: flex; align-items: center; gap: 10px; } | |
| /* Welcome Section */ | |
| .student-welcome { | |
| background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); | |
| padding: 24px 20px 20px; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .student-welcome::before { | |
| content: ''; | |
| position: absolute; | |
| top: -40px; right: -40px; | |
| width: 180px; height: 180px; | |
| border-radius: 50%; | |
| background: rgba(79,70,229,0.15); | |
| } | |
| .welcome-avatar-wrap { position: relative; display: inline-block; margin-bottom: 12px; } | |
| .welcome-avatar { width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.3); object-fit: cover; } | |
| .online-indicator { | |
| position: absolute; | |
| bottom: 2px; right: 2px; | |
| width: 14px; height: 14px; | |
| background: var(--success); | |
| border-radius: 50%; | |
| border: 2px solid var(--dark); | |
| } | |
| .welcome-text h2 { font-size: 1.2rem; font-weight: 800; color: white; margin-bottom: 4px; } | |
| .welcome-text p { font-size: 13px; color: rgba(255,255,255,0.5); } | |
| /* Overview Stats */ | |
| .attendance-overview { | |
| display: flex; | |
| align-items: center; | |
| background: rgba(255,255,255,0.07); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| border-radius: 14px; | |
| padding: 14px; | |
| margin-top: 16px; | |
| gap: 0; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .overview-stat { flex: 1; text-align: center; } | |
| .ov-value { font-size: 1.5rem; font-weight: 900; line-height: 1; } | |
| .ov-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 3px; font-weight: 500; } | |
| .ov-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.1); } | |
| /* Nav Tabs */ | |
| .student-nav-tabs { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| background: white; | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; | |
| top: 64px; | |
| z-index: 40; | |
| } | |
| .s-tab { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 3px; | |
| padding: 10px 6px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--gray); | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| border-bottom: 2px solid transparent; | |
| font-family: var(--font); | |
| } | |
| .s-tab.active { color: var(--primary); border-bottom-color: var(--primary); } | |
| .tab-icon { font-size: 1.2rem; } | |
| /* Tab Content */ | |
| .tab-content { padding: 16px; display: flex; flex-direction: column; gap: 0; } | |
| .tab-pane { display: flex; flex-direction: column; gap: 16px; } | |
| /* Home Tab */ | |
| .home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } | |
| .action-card { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| padding: 20px 16px; | |
| border: 1.5px solid var(--border); | |
| cursor: pointer; | |
| transition: all 0.25s; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .action-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } | |
| .scan-action { border-color: rgba(79,70,229,0.2); background: linear-gradient(145deg, rgba(79,70,229,0.04), white); } | |
| .scan-action:hover { border-color: var(--primary); } | |
| .records-action { border-color: rgba(16,185,129,0.2); background: linear-gradient(145deg, rgba(16,185,129,0.04), white); } | |
| .records-action:hover { border-color: var(--success); } | |
| .action-icon { font-size: 2.2rem; margin-bottom: 10px; } | |
| .action-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; } | |
| .action-card p { font-size: 12px; color: var(--gray); } | |
| .action-arrow { position: absolute; bottom: 12px; right: 14px; color: var(--gray-light); font-size: 1rem; } | |
| /* Quick Stats */ | |
| .quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } | |
| .qstat-card { background: white; border-radius: var(--radius); padding: 14px 10px; text-align: center; border: 1px solid var(--border); } | |
| .qstat-label { font-size: 10px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } | |
| .qstat-value { font-size: 1.6rem; font-weight: 900; color: var(--text); line-height: 1; } | |
| .qstat-sub { font-size: 10px; color: var(--gray-light); margin-top: 3px; } | |
| /* Scan Steps */ | |
| .scan-step { display: flex; flex-direction: column; gap: 16px; } | |
| .scan-title { font-size: 1.2rem; font-weight: 800; color: var(--text); text-align: center; } | |
| .scan-desc { font-size: 13.5px; color: var(--gray); text-align: center; line-height: 1.6; } | |
| .step-indicator { text-align: center; } | |
| .step-badge { display: inline-block; background: var(--primary); color: white; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; } | |
| /* QR Scan Box */ | |
| .qr-scan-box { width: 100%; background: var(--dark); border-radius: 16px; overflow: hidden; min-height: 260px; position: relative; } | |
| .qr-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,0.5); font-size: 14px; } | |
| .qr-placeholder-icon { font-size: 3rem; } | |
| /* Scan separator */ | |
| .scan-separator { text-align: center; color: var(--gray-light); font-size: 12px; font-weight: 600; position: relative; } | |
| .scan-separator::before, .scan-separator::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--border); } | |
| .scan-separator::before { left: 0; } | |
| .scan-separator::after { right: 0; } | |
| /* Session info */ | |
| .session-info-card { background: rgba(79,70,229,0.05); border: 1px solid rgba(79,70,229,0.15); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } | |
| .sinfo-item { font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 8px; } | |
| /* Verification Checklist */ | |
| .verification-checklist { display: flex; flex-direction: column; gap: 10px; background: #F8FAFC; border-radius: 12px; padding: 16px; } | |
| .check-item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--text); } | |
| .check-item.done { color: var(--success); } | |
| .check-item.failed { color: var(--danger); } | |
| .check-item.loading { color: var(--warning); } | |
| /* Records Tab */ | |
| .records-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } | |
| .records-header h2 { font-size: 1rem; font-weight: 800; } | |
| .records-filter select { width: auto; font-size: 13px; padding: 6px 28px 6px 10px; } | |
| .records-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } | |
| .rsummary-card { background: white; border-radius: 12px; padding: 14px 10px; text-align: center; border: 1.5px solid var(--border); } | |
| .rsummary-card.green { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05); } | |
| .rsummary-card.red { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); } | |
| .rs-value { font-size: 1.6rem; font-weight: 900; color: var(--text); } | |
| .rs-label { font-size: 11px; color: var(--gray); font-weight: 600; } | |
| .rsummary-card.green .rs-value { color: var(--success); } | |
| .rsummary-card.red .rs-value { color: var(--danger); } | |
| .record-card { display: flex; align-items: center; gap: 14px; background: white; border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--border); } | |
| .record-status { font-size: 1.4rem; width: 36px; text-align: center; flex-shrink: 0; } | |
| .record-info { flex: 1; min-width: 0; } | |
| .record-subject { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .record-meta { font-size: 12px; color: var(--gray); margin-top: 2px; } | |
| .form-hint { font-size: 12px; color: var(--gray); margin-top: 5px; } | |
| .form-control-lg { font-size: 18px; padding: 14px; } | |