Spaces:
Sleeping
Sleeping
| /** | |
| * QuestionTimer Styles | |
| * | |
| * Countdown timer with urgency-based styling for strict interviews | |
| */ | |
| .question-timer { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 12px 16px; | |
| margin: 0 16px 0; | |
| flex-shrink: 0; | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1)); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .question-timer.paused { | |
| opacity: 0.7; | |
| } | |
| /* Urgency States */ | |
| .question-timer.warning { | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.1)); | |
| border-color: rgba(245, 158, 11, 0.5); | |
| } | |
| .question-timer.critical { | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15)); | |
| border-color: rgba(239, 68, 68, 0.6); | |
| animation: pulse-border 1s ease-in-out infinite; | |
| } | |
| @keyframes pulse-border { | |
| 0%, | |
| 100% { | |
| border-color: rgba(239, 68, 68, 0.6); | |
| } | |
| 50% { | |
| border-color: rgba(239, 68, 68, 1); | |
| box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); | |
| } | |
| } | |
| /* Timer Header */ | |
| .timer-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .timer-icon { | |
| color: rgba(59, 130, 246, 0.9); | |
| } | |
| .timer-icon.pulse { | |
| animation: icon-pulse 0.5s ease-in-out infinite; | |
| color: #ef4444; | |
| } | |
| @keyframes icon-pulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.2); | |
| } | |
| } | |
| /* Timer Display */ | |
| .timer-display { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .timer-value { | |
| font-size: 32px; | |
| font-weight: 700; | |
| font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; | |
| color: #60a5fa; | |
| text-shadow: 0 0 10px rgba(96, 165, 250, 0.3); | |
| letter-spacing: 2px; | |
| } | |
| .timer-value.warning { | |
| color: #fbbf24; | |
| text-shadow: 0 0 10px rgba(251, 191, 36, 0.4); | |
| } | |
| .timer-value.critical { | |
| color: #f87171; | |
| text-shadow: 0 0 15px rgba(248, 113, 113, 0.5); | |
| animation: time-pulse 0.5s ease-in-out infinite; | |
| } | |
| @keyframes time-pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| /* Progress Bar */ | |
| .timer-progress-bar { | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .timer-progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #60a5fa, #818cf8); | |
| border-radius: 2px; | |
| transition: width 1s linear; | |
| } | |
| .timer-progress-fill.warning { | |
| background: linear-gradient(90deg, #fbbf24, #f59e0b); | |
| } | |
| .timer-progress-fill.critical { | |
| background: linear-gradient(90deg, #f87171, #ef4444); | |
| } | |
| .timer-progress-fill.low { | |
| background: linear-gradient(90deg, #fb923c, #f59e0b); | |
| } | |
| /* Warnings */ | |
| .timer-warning { | |
| text-align: center; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #fbbf24; | |
| padding: 4px 8px; | |
| background: rgba(251, 191, 36, 0.1); | |
| border-radius: 6px; | |
| animation: warning-fade 0.5s ease-in-out infinite; | |
| } | |
| .timer-warning.critical { | |
| color: #f87171; | |
| background: rgba(248, 113, 113, 0.15); | |
| } | |
| @keyframes warning-fade { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| .timer-timeout { | |
| text-align: center; | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: #ef4444; | |
| padding: 8px; | |
| background: rgba(239, 68, 68, 0.2); | |
| border-radius: 8px; | |
| animation: timeout-shake 0.3s ease-in-out; | |
| } | |
| @keyframes timeout-shake { | |
| 0%, | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| 25% { | |
| transform: translateX(-5px); | |
| } | |
| 75% { | |
| transform: translateX(5px); | |
| } | |
| } | |
| /* Dark Mode Adjustments */ | |
| .question-timer.normal .timer-label { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .question-timer { | |
| padding: 10px 12px; | |
| } | |
| .timer-value { | |
| font-size: 26px; | |
| } | |
| .timer-warning, | |
| .timer-timeout { | |
| font-size: 11px; | |
| } | |
| } |