| |
|
|
| |
| @media (max-width: 1024px) { |
| .container { |
| padding: 15px; |
| max-width: 100%; |
| } |
| |
| .assessment-grid { |
| grid-template-columns: 1fr; |
| gap: 20px; |
| } |
| |
| .progress-stats { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .user-welcome { |
| flex-direction: column; |
| text-align: center; |
| gap: 10px; |
| } |
| |
| .auth-buttons { |
| flex-direction: column; |
| width: 100%; |
| } |
| |
| .auth-buttons .btn { |
| width: 100%; |
| } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 10px; |
| } |
| |
| header { |
| padding: 15px; |
| margin-bottom: 15px; |
| } |
| |
| header h1 { |
| font-size: 24px; |
| text-align: center; |
| } |
| |
| .score-display { |
| font-size: 14px; |
| padding: 8px 16px; |
| } |
| |
| |
| .lesson-section { |
| padding: 20px; |
| margin-bottom: 20px; |
| } |
| |
| .section-header { |
| flex-direction: column; |
| gap: 15px; |
| text-align: center; |
| } |
| |
| .navigation-buttons { |
| justify-content: center; |
| } |
| |
| .lesson-content { |
| font-size: 14px; |
| line-height: 1.6; |
| } |
| |
| .lesson-text { |
| margin-bottom: 15px; |
| } |
| |
| |
| .quiz-section, |
| .exercise-section { |
| padding: 20px; |
| } |
| |
| .question { |
| padding: 12px; |
| margin-bottom: 20px; |
| } |
| |
| .options { |
| gap: 8px; |
| } |
| |
| .option-label { |
| padding: 12px; |
| font-size: 14px; |
| } |
| |
| textarea { |
| font-size: 14px; |
| padding: 12px; |
| } |
| |
| |
| .progress-stats { |
| grid-template-columns: 1fr; |
| gap: 15px; |
| } |
| |
| .stat-card { |
| padding: 20px; |
| } |
| |
| .stat-value { |
| font-size: 24px; |
| } |
| |
| .stat-label { |
| font-size: 13px; |
| } |
| |
| |
| .auth-card { |
| padding: 30px 20px; |
| margin: 10px; |
| } |
| |
| .form-row { |
| grid-template-columns: 1fr; |
| } |
| |
| .auth-logo h1 { |
| font-size: 24px; |
| } |
| |
| .auth-logo p { |
| font-size: 14px; |
| } |
| |
| |
| .modal-content { |
| padding: 25px 20px; |
| margin: 20px; |
| } |
| |
| |
| .auth-section { |
| padding: 15px; |
| margin-bottom: 15px; |
| } |
| |
| .user-info { |
| text-align: center; |
| } |
| } |
|
|
| |
| @media (max-width: 480px) { |
| body { |
| font-size: 14px; |
| } |
| |
| .container { |
| padding: 8px; |
| } |
| |
| header { |
| padding: 12px; |
| border-radius: 12px; |
| } |
| |
| header h1 { |
| font-size: 20px; |
| margin-bottom: 8px; |
| } |
| |
| .score-display { |
| font-size: 12px; |
| padding: 6px 12px; |
| } |
| |
| |
| .lesson-section, |
| .quiz-section, |
| .exercise-section { |
| padding: 15px; |
| border-radius: 12px; |
| } |
| |
| h2 { |
| font-size: 18px; |
| padding-bottom: 8px; |
| margin-bottom: 15px; |
| } |
| |
| |
| .question { |
| margin-bottom: 15px; |
| padding: 10px; |
| } |
| |
| .question-text { |
| font-size: 14px; |
| margin-bottom: 12px; |
| } |
| |
| .option-label { |
| padding: 10px; |
| font-size: 13px; |
| } |
| |
| |
| textarea { |
| font-size: 13px; |
| padding: 10px; |
| min-height: 120px; |
| } |
| |
| button { |
| padding: 10px 20px; |
| font-size: 14px; |
| } |
| |
| |
| .feedback { |
| padding: 12px; |
| font-size: 13px; |
| margin-top: 15px; |
| } |
| |
| |
| .auth-container { |
| padding: 10px; |
| } |
| |
| .auth-card { |
| padding: 25px 15px; |
| border-radius: 15px; |
| } |
| |
| .auth-form input, |
| .auth-form select, |
| .auth-form textarea { |
| padding: 10px 12px; |
| font-size: 14px; |
| } |
| |
| .btn-auth { |
| padding: 12px; |
| font-size: 14px; |
| } |
| |
| |
| .progress-section { |
| padding: 15px; |
| } |
| |
| .stat-card { |
| padding: 15px; |
| } |
| |
| .stat-value { |
| font-size: 20px; |
| } |
| |
| .stat-label { |
| font-size: 12px; |
| } |
| } |
|
|
| |
| @media (max-height: 600px) { |
| .auth-container { |
| align-items: flex-start; |
| padding-top: 40px; |
| padding-bottom: 40px; |
| } |
| |
| .auth-card { |
| max-height: 90vh; |
| overflow-y: auto; |
| } |
| } |
|
|
| |
| @media (max-height: 500px) and (orientation: landscape) { |
| .auth-container { |
| padding: 20px; |
| } |
| |
| .auth-card { |
| max-width: 90%; |
| max-height: 85vh; |
| } |
| |
| .auth-form .form-group { |
| margin-bottom: 12px; |
| } |
| } |
|
|
| |
| @media (min-width: 1440px) { |
| .container { |
| max-width: 1400px; |
| } |
| |
| .assessment-grid { |
| grid-template-columns: 1fr 1fr; |
| gap: 30px; |
| } |
| |
| .progress-stats { |
| grid-template-columns: repeat(4, 1fr); |
| } |
| } |
|
|
| |
| @media print { |
| .auth-section, |
| .navigation-buttons, |
| button, |
| .feedback, |
| .auth-links { |
| display: none !important; |
| } |
| |
| .lesson-content { |
| font-size: 12pt; |
| line-height: 1.4; |
| } |
| |
| .container { |
| max-width: 100%; |
| padding: 0; |
| } |
| |
| body { |
| background: white !important; |
| color: black !important; |
| font-size: 12pt; |
| } |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --bg-primary: #1a202c; |
| --bg-secondary: #2d3748; |
| --text-primary: #f7fafc; |
| --text-secondary: #e2e8f0; |
| --border-color: #4a5568; |
| } |
| |
| .auth-card, |
| .auth-section, |
| .lesson-section, |
| .quiz-section, |
| .exercise-section, |
| .progress-section { |
| background: var(--bg-secondary); |
| color: var(--text-primary); |
| } |
| |
| .auth-form input, |
| .auth-form select, |
| .auth-form textarea { |
| background: var(--bg-primary); |
| border-color: var(--border-color); |
| color: var(--text-primary); |
| } |
| |
| .auth-form label { |
| color: var(--text-secondary); |
| } |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
| |
| @media (prefers-contrast: high) { |
| .btn-primary { |
| background: #000; |
| color: #fff; |
| border: 2px solid #000; |
| } |
| |
| .btn-secondary { |
| background: #fff; |
| color: #000; |
| border: 2px solid #000; |
| } |
| |
| .auth-card { |
| border: 2px solid #000; |
| } |
| } |
|
|
| |
| @media (hover: none) and (pointer: coarse) { |
| .btn:hover, |
| .btn-auth:hover, |
| .option-label:hover { |
| transform: none; |
| box-shadow: none; |
| } |
| |
| .option-label { |
| min-height: 44px; |
| } |
| |
| button, |
| .btn { |
| min-height: 44px; |
| min-width: 44px; |
| } |
| } |
|
|
| |
| @media speech { |
| .lesson-content { |
| line-height: 1.8; |
| } |
| |
| .question-text { |
| font-weight: bold; |
| } |
| |
| .feedback::before { |
| content: "نتیجه: "; |
| font-weight: bold; |
| } |
| } |
