/* ═══════════════════════════════════════════════════════════════════════ STUDENT PAGES — Dashboard Uyum CSS v1.0 ═══════════════════════════════════════════════════════════════════════ Tüm öğrenci sayfalarını student_dashboard.html ile görsel uyuma kavuşturur. ewu-theme.css design token'ları temel alınır. Ekleme: base.html içine ewu-theme.css'den SONRA ekleyin: ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ 1. ORTAK PAGE HEADER — Dashboard welcome-header ile uyumlu ═══════════════════════════════════════════════════════════════════════ */ .page-header { background: linear-gradient(135deg, var(--ewu-blue-700) 0%, var(--ewu-blue-500) 60%, var(--ewu-blue-400) 100%) !important; color: white !important; border: none !important; border-left: none !important; border-radius: 16px !important; padding: 2rem !important; margin-bottom: 1.5rem !important; box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25) !important; position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; top: -50%; right: -5%; width: 280px; height: 280px; background: rgba(251, 191, 36, 0.15); border-radius: 50%; pointer-events: none; } .page-header::after { content: ''; position: absolute; bottom: -30%; right: 15%; width: 150px; height: 150px; background: rgba(220, 38, 38, 0.1); border-radius: 50%; pointer-events: none; } .page-header h1, .page-header h2, .page-header h3, .page-header .h3, .page-header .fw-bold { color: white !important; position: relative; z-index: 1; } .page-header p, .page-header .text-muted { color: rgba(255, 255, 255, 0.85) !important; position: relative; z-index: 1; } .page-header .badge { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.2) !important; color: white !important; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.3); } /* ═══════════════════════════════════════════════════════════════════════ 2. KURS KARTLARI — list_courses.html ═══════════════════════════════════════════════════════════════════════ */ .course-card { background: #fff !important; border-radius: 14px !important; border: 1px solid var(--ewu-gray-200) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; transition: all 0.3s var(--ewu-ease-out, ease) !important; overflow: hidden; } .course-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; border-color: var(--ewu-blue-300) !important; } .course-icon { background: var(--ewu-blue-50) !important; color: var(--ewu-blue-500) !important; border-radius: 14px !important; width: 52px !important; height: 52px !important; } .course-title { color: var(--ewu-gray-900) !important; font-weight: 700 !important; } .course-teacher { color: var(--ewu-gray-500) !important; } .btn-course-action { border-radius: 10px !important; font-weight: 600 !important; transition: all 0.2s ease !important; } .progress-custom { background: var(--ewu-gray-100) !important; border-radius: 99px !important; height: 8px !important; } .progress-custom .progress-bar { background: linear-gradient(90deg, var(--ewu-blue-500), var(--ewu-blue-400)) !important; border-radius: 99px !important; } /* Empty state */ .empty-placeholder { background: white !important; border: 2px dashed var(--ewu-gray-200) !important; border-radius: 16px !important; padding: 3rem 1.5rem !important; } .empty-placeholder .btn-primary { background: var(--ewu-blue-500) !important; border-color: var(--ewu-blue-500) !important; border-radius: 99px !important; } /* ═══════════════════════════════════════════════════════════════════════ 3. CANLI DERS TAKVİMİ — list_live_sessions.html ═══════════════════════════════════════════════════════════════════════ */ .calendar-nav { background: white !important; border-radius: 14px !important; border: 1px solid var(--ewu-gray-200) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .nav-btn { border: 1px solid var(--ewu-gray-200) !important; color: var(--ewu-blue-500) !important; border-radius: 50% !important; transition: all 0.2s ease !important; } .nav-btn:hover { background: var(--ewu-blue-500) !important; color: white !important; border-color: var(--ewu-blue-500) !important; } .day-column { background: white !important; border-radius: 14px !important; border: 1px solid var(--ewu-gray-200) !important; } .day-column.today { border-color: var(--ewu-blue-500) !important; background: var(--ewu-blue-50) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } .day-header { background: var(--ewu-gray-50) !important; border-bottom: 1px solid var(--ewu-gray-200) !important; border-radius: 14px 14px 0 0 !important; } .day-header.today { background: linear-gradient(135deg, var(--ewu-blue-500), var(--ewu-blue-400)) !important; color: white !important; } .session-card { background: white !important; border-radius: 12px !important; border-left: 4px solid var(--ewu-yellow-500) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; transition: all 0.2s ease !important; } .session-card:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; } .session-title { color: var(--ewu-blue-700) !important; } /* ═══════════════════════════════════════════════════════════════════════ 4. DERS DETAY — course_detail.html ═══════════════════════════════════════════════════════════════════════ */ .course-hero-section { background: linear-gradient(135deg, var(--ewu-blue-700) 0%, var(--ewu-blue-500) 60%, var(--ewu-blue-400) 100%) !important; border-radius: 16px !important; box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25) !important; position: relative; overflow: hidden; } .course-hero-section::before { content: ''; position: absolute; top: -50%; right: -5%; width: 280px; height: 280px; background: rgba(251, 191, 36, 0.15); border-radius: 50%; pointer-events: none; } .btn-glass { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 10px !important; color: white !important; font-weight: 600 !important; transition: all 0.2s ease !important; } .btn-glass:hover { background: rgba(255, 255, 255, 0.25) !important; color: white !important; transform: translateY(-2px) !important; } .teacher-toolbar { background: white !important; border: 1px solid var(--ewu-gray-200) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .progress-container { background: white !important; border: 1px solid var(--ewu-gray-200) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .custom-tabs { border-bottom: 2px solid var(--ewu-gray-200) !important; } .custom-tabs .nav-link { color: var(--ewu-gray-500) !important; font-weight: 600 !important; } .custom-tabs .nav-link.active { color: var(--ewu-blue-500) !important; } .custom-tabs .nav-link.active::after { background: var(--ewu-blue-500) !important; } .accordion-item { border: 1px solid var(--ewu-gray-200) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .accordion-button:not(.collapsed) { background-color: var(--ewu-blue-50) !important; color: var(--ewu-blue-700) !important; } .content-row { border-bottom: 1px solid var(--ewu-gray-100) !important; transition: background 0.2s ease !important; } .content-row:hover { background-color: var(--ewu-gray-50) !important; } .content-row.completed { background-color: rgba(16, 185, 129, 0.05) !important; border-left: 3px solid var(--ewu-success) !important; } .icon-box { border-radius: 10px !important; } .icon-video { background: var(--ewu-red-50) !important; color: var(--ewu-red-500) !important; } .icon-quiz { background: var(--ewu-yellow-50) !important; color: var(--ewu-yellow-600) !important; } .icon-doc { background: var(--ewu-blue-50) !important; color: var(--ewu-blue-500) !important; } .icon-check { background: var(--ewu-success-light) !important; color: var(--ewu-success) !important; } .icon-interactive { background: #F3E8FF !important; color: #7C3AED !important; } /* ═══════════════════════════════════════════════════════════════════════ 5. QUIZ — solve_quiz.html & quiz_result.html ═══════════════════════════════════════════════════════════════════════ */ /* Quiz kartı */ .container .card.shadow-sm { border-radius: 14px !important; border: 1px solid var(--ewu-gray-200) !important; } .card-header.bg-light { background: var(--ewu-gray-50) !important; border-bottom: 1px solid var(--ewu-gray-200) !important; } .card-header .text-primary, h2.text-primary, .fw-bold.text-primary { color: var(--ewu-blue-700) !important; } /* Quiz progress circle */ .container .card-body svg circle:last-child { stroke: var(--ewu-blue-500) !important; } /* Quiz result tablosu */ .table-primary th { background-color: var(--ewu-blue-500) !important; color: white !important; } /* Quiz soru stili */ .question-text { color: var(--ewu-gray-900) !important; } .form-check-input:checked { background-color: var(--ewu-blue-500) !important; border-color: var(--ewu-blue-500) !important; } .matching-grid select.form-select { border-radius: 10px !important; } /* ═══════════════════════════════════════════════════════════════════════ 6. KÜTÜPHANE — library.html ═══════════════════════════════════════════════════════════════════════ */ .library-card { background: white !important; border-radius: 14px !important; border: 1px solid var(--ewu-gray-200) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; transition: all 0.3s ease !important; } .library-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; border-color: var(--ewu-blue-300) !important; } .file-icon-box { background: var(--ewu-blue-50) !important; color: var(--ewu-blue-500) !important; border-radius: 14px !important; } .file-title { color: var(--ewu-gray-900) !important; } .btn-download { border-radius: 10px !important; background: var(--ewu-blue-500) !important; border-color: var(--ewu-blue-500) !important; color: white !important; font-weight: 600 !important; } .btn-download:hover { background: var(--ewu-blue-600) !important; border-color: var(--ewu-blue-600) !important; color: white !important; } .upload-card { background: var(--ewu-blue-50) !important; border: 2px dashed var(--ewu-blue-300) !important; border-radius: 16px !important; } .upload-card:hover { border-color: var(--ewu-blue-500) !important; background: white !important; } .form-control-custom { border: 2px solid var(--ewu-gray-200) !important; border-radius: 10px !important; } .form-control-custom:focus { border-color: var(--ewu-blue-500) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important; } /* ═══════════════════════════════════════════════════════════════════════ 7. DUYURULAR — announcements.html ═══════════════════════════════════════════════════════════════════════ */ .filter-btn { background: white !important; border: 1px solid var(--ewu-gray-200) !important; border-radius: 99px !important; color: var(--ewu-gray-500) !important; font-weight: 600 !important; transition: all 0.2s ease !important; box-shadow: none !important; } .filter-btn.active, .filter-btn:hover { background: var(--ewu-blue-500) !important; color: white !important; border-color: var(--ewu-blue-500) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important; } .announcement-card { background: white !important; border: 1px solid var(--ewu-gray-200) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; transition: all 0.2s ease !important; } .announcement-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; border-color: var(--ewu-gray-300) !important; } .card-header-custom { border-bottom: 1px solid var(--ewu-gray-100) !important; } .author-avatar { background: var(--ewu-blue-50) !important; color: var(--ewu-blue-500) !important; } .badge-course { background: var(--ewu-blue-50) !important; color: var(--ewu-blue-600) !important; } .badge-general { background: var(--ewu-gray-100) !important; color: var(--ewu-gray-500) !important; border: 1px solid var(--ewu-gray-200) !important; } .read-more-btn { color: var(--ewu-blue-500) !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════════════════ 8. BLOG — student_blog.html & student_blog_post.html & blog.html ═══════════════════════════════════════════════════════════════════════ */ /* Blog kartlarını dashboard paletine al */ .blog-card { border-radius: 16px !important; border: 1px solid var(--ewu-gray-200) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .blog-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important; } /* Gradient text renkleri EWU uyumlu */ .gradient-text { background: linear-gradient(135deg, var(--ewu-blue-700) 0%, var(--ewu-red-500) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Featured badge */ .featured-badge { background: linear-gradient(135deg, var(--ewu-red-500) 0%, var(--ewu-red-600) 100%) !important; box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3) !important; } /* Blog post header */ .blog-header { background: linear-gradient(135deg, var(--ewu-blue-700) 0%, var(--ewu-blue-500) 100%) !important; border-radius: 16px !important; box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25) !important; } /* Blog category badge */ .blog-category { background: linear-gradient(135deg, var(--ewu-blue-500) 0%, var(--ewu-blue-700) 100%) !important; } /* Blog post content headers */ .blog-body h2 { color: var(--ewu-blue-700) !important; } .blog-body h3 { color: var(--ewu-gray-800) !important; } .blog-body blockquote { border-left-color: var(--ewu-blue-500) !important; } .blog-body a { color: var(--ewu-blue-500) !important; } /* Table of Contents */ .toc-box { background: var(--ewu-blue-50) !important; border-left: 5px solid var(--ewu-blue-500) !important; border-radius: 12px !important; } .toc-box h5 { color: var(--ewu-blue-700) !important; } .toc-box a { color: var(--ewu-blue-500) !important; } /* Author card */ .author-card { background: linear-gradient(135deg, var(--ewu-blue-500) 0%, var(--ewu-blue-700) 100%) !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(37, 99, 235, 0.3) !important; } /* Reading progress bar */ .reading-progress { background: linear-gradient(90deg, var(--ewu-blue-500), var(--ewu-yellow-500)) !important; } /* Blog share buttons */ .blog-share { background: var(--ewu-gray-50) !important; border-radius: 14px !important; } /* ═══════════════════════════════════════════════════════════════════════ 9. PROFİL — profile.html ═══════════════════════════════════════════════════════════════════════ */ .profile-container { border-radius: 16px !important; border: 1px solid var(--ewu-gray-200) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; } .profile-container h2 { color: var(--ewu-blue-700) !important; } .profile-container input, .profile-container select, .profile-container textarea { border: 2px solid var(--ewu-gray-200) !important; border-radius: 10px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .profile-container input:focus, .profile-container select:focus, .profile-container textarea:focus { border-color: var(--ewu-blue-500) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important; outline: none !important; } .profile-container button[type="submit"] { background: var(--ewu-blue-500) !important; border-radius: 10px !important; font-weight: 600 !important; transition: all 0.2s ease !important; } .profile-container button[type="submit"]:hover { background: var(--ewu-blue-600) !important; } /* ═══════════════════════════════════════════════════════════════════════ 10. İÇERİK GÖRÜNTÜLEME — view_content.html ═══════════════════════════════════════════════════════════════════════ */ .content-display { background: white !important; border: 1px solid var(--ewu-gray-200) !important; border-radius: 14px !important; padding: 2rem !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .embed-wrapper { border-radius: 14px !important; overflow: hidden !important; } .completion-section .btn-info, .completion-section .btn-success { border-radius: 10px !important; font-weight: 600 !important; } #timerWarning { border-radius: 12px !important; } #timerWarning.alert-success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.04) 100%) !important; border-left: 4px solid var(--ewu-success) !important; color: #047857 !important; } /* ═══════════════════════════════════════════════════════════════════════ 11. BADGES — student/badges.html ═══════════════════════════════════════════════════════════════════════ */ .badge-box { border-radius: 14px !important; transition: all 0.3s ease !important; } .badge-box.earned { background: var(--ewu-blue-50) !important; border: 2px solid var(--ewu-blue-300) !important; } .badge-box.locked { background: var(--ewu-gray-100) !important; border: 2px solid var(--ewu-gray-200) !important; } .badge-box.earned:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15) !important; } .earned-icon { color: var(--ewu-blue-500) !important; } .badge-lock i { color: var(--ewu-gray-400) !important; } .badge-title { color: var(--ewu-gray-800) !important; } .badge-desc { color: var(--ewu-gray-500) !important; } /* ═══════════════════════════════════════════════════════════════════════ 12. FLASHCARDS — student/flashcards/*.html ═══════════════════════════════════════════════════════════════════════ */ /* Flashcard set kartları */ .card.shadow-sm.border-0.h-100 { border: 1px solid var(--ewu-gray-200) !important; border-radius: 14px !important; transition: all 0.3s ease !important; } .card.shadow-sm.border-0.h-100:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; } /* Flashcard set başlık */ .card-title.text-primary { color: var(--ewu-blue-700) !important; } /* Flip card */ .flip-card { border-radius: 16px !important; border: 1px solid var(--ewu-gray-200) !important; } .flip-card-front { background: white !important; } .flip-card-front h3.text-primary { color: var(--ewu-blue-500) !important; } .flip-card-back { background: var(--ewu-blue-50) !important; } /* Learn mode butonlar */ #knownBtn { background: var(--ewu-success) !important; border-color: var(--ewu-success) !important; } #unknownBtn { background: var(--ewu-red-500) !important; border-color: var(--ewu-red-500) !important; } /* ═══════════════════════════════════════════════════════════════════════ 13. DERS KAYITLARI — student/zoom_recordings.html ═══════════════════════════════════════════════════════════════════════ */ .card.h-100.shadow-sm.border-0 { border: 1px solid var(--ewu-gray-200) !important; border-radius: 14px !important; transition: all 0.3s ease !important; } .card.h-100.shadow-sm.border-0:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; } /* ═══════════════════════════════════════════════════════════════════════ 14. AI TEACHER — ai_teacher/chat.html & profile.html ═══════════════════════════════════════════════════════════════════════ */ .chat-card { border: 1px solid var(--ewu-gray-200) !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; } .chat-header { border-bottom: 1px solid var(--ewu-gray-200) !important; } .avatar-circle { background: linear-gradient(135deg, var(--ewu-blue-500), var(--ewu-blue-700)) !important; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25) !important; } /* ═══════════════════════════════════════════════════════════════════════ 15. MESAJLAŞMA — messaging/inbox.html & chat.html ═══════════════════════════════════════════════════════════════════════ */ .avatar-blue { background: linear-gradient(135deg, var(--ewu-blue-500), var(--ewu-blue-700)) !important; } .conversation-item:hover { background: var(--ewu-blue-50) !important; } .unread { background: var(--ewu-yellow-50) !important; border-left: 3px solid var(--ewu-yellow-500) !important; } .badge-count { background: var(--ewu-red-500) !important; } /* Chat balonları */ .bubble.mine { background: linear-gradient(135deg, var(--ewu-blue-500), var(--ewu-blue-700)) !important; border-radius: 18px 18px 4px 18px !important; } .bubble.mine .msg-check { color: var(--ewu-yellow-400) !important; } /* ═══════════════════════════════════════════════════════════════════════ 16. ŞİFRE DEĞİŞTİR — change_password.html ═══════════════════════════════════════════════════════════════════════ */ .container .btn-success.w-100 { background: var(--ewu-blue-500) !important; border-color: var(--ewu-blue-500) !important; border-radius: 10px !important; font-weight: 600 !important; } .container .btn-success.w-100:hover { background: var(--ewu-blue-600) !important; border-color: var(--ewu-blue-600) !important; } /* ═══════════════════════════════════════════════════════════════════════ 17. YAKLAŞAN CANLI DERSLER — list_courses.html alt kısım ═══════════════════════════════════════════════════════════════════════ */ .live-list-item { background: white !important; border-radius: 14px !important; border: 1px solid var(--ewu-gray-200) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; transition: all 0.2s ease !important; } .live-list-item:hover { border-color: var(--ewu-blue-300) !important; background: var(--ewu-blue-50) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; } .date-box { background: var(--ewu-red-50) !important; color: var(--ewu-red-500) !important; border-radius: 10px !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════════════════════ 18. TAILWIND OVERRIDE — Tailwind kullanan sayfalar için uyum ═══════════════════════════════════════════════════════════════════════ list_assignments, submit_assignment, help, messaging sayfaları Tailwind CDN kullanıyor. Renk uyumu için override. ═══════════════════════════════════════════════════════════════════════ */ /* Tailwind blue override → EWU blue */ [style*="--ewu-blue"], [style*="color: var(--ewu-blue)"] { color: var(--ewu-blue-500); } /* Tailwind bg-indigo → EWU blue */ .bg-indigo-600, .from-indigo-600 { background-color: var(--ewu-blue-500) !important; } .hover\:bg-indigo-700:hover, .hover\:from-indigo-700:hover { background-color: var(--ewu-blue-600) !important; } .text-indigo-600, .text-indigo-700 { color: var(--ewu-blue-500) !important; } .bg-indigo-100, .bg-indigo-50 { background-color: var(--ewu-blue-50) !important; } /* Focus ring EWU blue */ .focus\:ring-indigo-500:focus { --tw-ring-color: var(--ewu-blue-500) !important; } .focus\:border-indigo-500:focus { border-color: var(--ewu-blue-500) !important; } /* Tailwind kullanan sayfalardaki rounded override */ .rounded-2xl { border-radius: 14px !important; } .rounded-xl { border-radius: 12px !important; } /* ═══════════════════════════════════════════════════════════════════════ 19. GENEL EMPTY STATE — Tüm sayfalar ═══════════════════════════════════════════════════════════════════════ */ .empty-state, .empty-placeholder, .empty-state-bento { border-radius: 16px !important; } .empty-state i, .empty-placeholder i, .empty-state-bento i { color: var(--ewu-gray-300) !important; } .empty-state-text, .empty-state p, .empty-placeholder h5 { color: var(--ewu-gray-500) !important; } /* ═══════════════════════════════════════════════════════════════════════ 20. RESPONSIVE FINE-TUNING ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .page-header { padding: 1.5rem !important; flex-direction: column !important; text-align: center !important; } .page-header .badge { align-self: center !important; } .course-hero-section { padding: 1.5rem !important; } .course-hero-section h1 { font-size: 1.4rem !important; } .calendar-grid { gap: 10px !important; } .library-card { padding: 1.25rem !important; } }