| """ | |
| 🎨 Styling and CSS for CourseCrafter UI | |
| Custom styling for Gradio components. | |
| """ | |
| def get_custom_css() -> str: | |
| """Get custom CSS for the CourseCrafter interface""" | |
| return """ | |
| /* CourseCrafter AI Custom Styling - Dark Theme */ | |
| /* Global dark theme overrides */ | |
| .gradio-container { | |
| background: #1a1a2e !important; | |
| color: #e0e7ff !important; | |
| } | |
| .header-container { | |
| text-align: center; | |
| padding: 2rem; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border-radius: 10px; | |
| margin-bottom: 2rem; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3); | |
| } | |
| .header-container h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 0.5rem; | |
| font-weight: bold; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .header-container p { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| } | |
| .progress-container { | |
| padding: 1rem; | |
| background: #2d2d54; | |
| border-radius: 8px; | |
| border-left: 4px solid #667eea; | |
| margin: 1rem 0; | |
| color: #e0e7ff; | |
| } | |
| .success { | |
| color: #28a745 !important; | |
| font-weight: bold; | |
| padding: 0.5rem; | |
| background: #1e4d2b; | |
| border-radius: 4px; | |
| border: 1px solid #28a745; | |
| } | |
| .error { | |
| color: #dc3545 !important; | |
| font-weight: bold; | |
| padding: 0.5rem; | |
| background: #4d1e1e; | |
| border-radius: 4px; | |
| border: 1px solid #dc3545; | |
| } | |
| .warning { | |
| color: #ffc107 !important; | |
| font-weight: bold; | |
| padding: 0.5rem; | |
| background: #4d3d1e; | |
| border-radius: 4px; | |
| border: 1px solid #ffc107; | |
| } | |
| .progress { | |
| color: #17a2b8 !important; | |
| font-weight: bold; | |
| padding: 0.5rem; | |
| background: #1e3d4d; | |
| border-radius: 4px; | |
| border: 1px solid #17a2b8; | |
| } | |
| .flashcard { | |
| background: #fff; | |
| border: 1px solid #dee2e6; | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin: 0.5rem 0; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .quiz { | |
| background: #e3f2fd; | |
| border: 1px solid #bbdefb; | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin: 0.5rem 0; | |
| } | |
| /* Dark theme form inputs */ | |
| .gradio-textbox, .gradio-dropdown, .gradio-slider { | |
| background: #2d2d54 !important; | |
| border: 2px solid #4a4a7a !important; | |
| border-radius: 8px !important; | |
| color: #e0e7ff !important; | |
| transition: border-color 0.3s ease !important; | |
| } | |
| .gradio-textbox:focus, .gradio-dropdown:focus { | |
| border-color: #667eea !important; | |
| box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important; | |
| background: #3a3a6b !important; | |
| } | |
| .gradio-textbox::placeholder { | |
| color: #8b9dc3 !important; | |
| } | |
| /* Button styling */ | |
| .gradio-button { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; | |
| border: none !important; | |
| border-radius: 8px !important; | |
| color: white !important; | |
| font-weight: bold !important; | |
| transition: all 0.3s ease !important; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; | |
| } | |
| .gradio-button:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important; | |
| } | |
| /* Ensure all buttons use the same blue theme */ | |
| button { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; | |
| border: none !important; | |
| border-radius: 8px !important; | |
| color: white !important; | |
| font-weight: bold !important; | |
| transition: all 0.3s ease !important; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; | |
| } | |
| button:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important; | |
| } | |
| /* Tab styling */ | |
| .gradio-tabs { | |
| border-radius: 8px !important; | |
| overflow: hidden !important; | |
| background: #2d2d54 !important; | |
| } | |
| .gradio-tab { | |
| background: #3a3a6b !important; | |
| border: 1px solid #4a4a7a !important; | |
| padding: 0.75rem 1.5rem !important; | |
| font-weight: 500 !important; | |
| color: #b8c5d6 !important; | |
| transition: all 0.3s ease !important; | |
| } | |
| .gradio-tab.selected { | |
| background: #667eea !important; | |
| color: white !important; | |
| border-color: #667eea !important; | |
| } | |
| .gradio-tab:hover:not(.selected) { | |
| background: #4a4a7a !important; | |
| color: #e0e7ff !important; | |
| } | |
| /* Labels and text */ | |
| label { | |
| color: #e0e7ff !important; | |
| font-weight: 500 !important; | |
| } | |
| /* Slider styling */ | |
| .gradio-slider input[type="range"] { | |
| background: #4a4a7a !important; | |
| } | |
| .gradio-slider input[type="range"]::-webkit-slider-thumb { | |
| background: #667eea !important; | |
| } | |
| .gradio-slider input[type="range"]::-moz-range-thumb { | |
| background: #667eea !important; | |
| } | |
| /* Course content styling */ | |
| .lessons-container { | |
| max-height: 600px; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| } | |
| .lesson-card { | |
| background: white; | |
| border: 1px solid #dee2e6; | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| margin: 1rem 0; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .lesson-card h3 { | |
| color: #667eea; | |
| margin-bottom: 1rem; | |
| } | |
| .flashcards-container { | |
| max-height: none !important; | |
| overflow: visible !important; | |
| padding: 1rem; | |
| } | |
| .quiz-container { | |
| max-height: none !important; | |
| overflow: visible !important; | |
| padding: 1rem; | |
| } | |
| /* Chat interface styling - Dark Theme */ | |
| .chat-window { | |
| background: #2d2d54 !important; | |
| border-radius: 12px !important; | |
| padding: 1rem !important; | |
| margin: 1rem 0 !important; | |
| border: 1px solid #4a4a7a !important; | |
| } | |
| .chat-messages { | |
| max-height: 400px !important; | |
| overflow-y: auto !important; | |
| padding: 0.5rem !important; | |
| } | |
| .chat-message { | |
| margin: 1rem 0 !important; | |
| display: flex !important; | |
| align-items: flex-start !important; | |
| gap: 0.75rem !important; | |
| } | |
| .chat-message.user-message { | |
| flex-direction: row-reverse !important; | |
| } | |
| .chat-message.assistant-message { | |
| flex-direction: row !important; | |
| } | |
| .message-avatar { | |
| width: 40px !important; | |
| height: 40px !important; | |
| border-radius: 50% !important; | |
| background: #667eea !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| font-size: 1.2rem !important; | |
| flex-shrink: 0 !important; | |
| } | |
| .user-message .message-avatar { | |
| background: #764ba2 !important; | |
| } | |
| .message-content { | |
| flex: 1 !important; | |
| max-width: 70% !important; | |
| } | |
| .message-text { | |
| background: #3a3a6b !important; | |
| color: #e0e7ff !important; | |
| padding: 0.75rem 1rem !important; | |
| border-radius: 12px !important; | |
| line-height: 1.5 !important; | |
| word-wrap: break-word !important; | |
| } | |
| .user-message .message-text { | |
| background: #667eea !important; | |
| color: white !important; | |
| } | |
| .assistant-message .message-text { | |
| background: #4a4a7a !important; | |
| color: #e0e7ff !important; | |
| } | |
| .info { | |
| background: #2d3748 !important; | |
| border: 1px solid #4a5568 !important; | |
| border-radius: 8px !important; | |
| padding: 1rem !important; | |
| color: #a0aec0 !important; | |
| text-align: center !important; | |
| font-style: italic !important; | |
| } | |
| /* Note: Flashcard styling is now handled inline in the format_flashcards function */ | |
| /* Note: Quiz styling is now handled inline in the format_quiz function */ | |
| /* Note: Lesson styling is now handled inline in the format_lessons function */ | |
| /* Enhanced Course Header Styling */ | |
| .course-header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; | |
| color: white !important; | |
| padding: 2rem !important; | |
| border-radius: 12px !important; | |
| margin: 1rem 0 !important; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; | |
| text-align: center !important; | |
| } | |
| .course-header h1 { | |
| font-size: 2.2rem !important; | |
| margin-bottom: 1rem !important; | |
| font-weight: bold !important; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; | |
| color: white !important; | |
| } | |
| .course-stats { | |
| display: flex !important; | |
| justify-content: center !important; | |
| gap: 1.5rem !important; | |
| flex-wrap: wrap !important; | |
| margin-top: 1rem !important; | |
| } | |
| .course-stats .stat { | |
| background: rgba(255,255,255,0.2) !important; | |
| padding: 0.5rem 1rem !important; | |
| border-radius: 20px !important; | |
| font-size: 0.9rem !important; | |
| font-weight: 500 !important; | |
| color: white !important; | |
| backdrop-filter: blur(10px) !important; | |
| } | |
| /* Progress Tracker Styling */ | |
| .step-indicator { | |
| background: #2d2d54 !important; | |
| border: 2px solid #4a4a7a !important; | |
| border-radius: 12px !important; | |
| padding: 1.5rem !important; | |
| margin: 1rem 0 !important; | |
| color: #e0e7ff !important; | |
| text-align: center !important; | |
| } | |
| .step-indicator.active { | |
| border-color: #667eea !important; | |
| background: #3a3a6b !important; | |
| } | |
| .step-indicator.complete { | |
| border-color: #28a745 !important; | |
| background: #1e4d2b !important; | |
| color: #28a745 !important; | |
| } | |
| .step-icon { | |
| font-size: 2rem !important; | |
| margin-bottom: 0.5rem !important; | |
| } | |
| .step-text { | |
| font-size: 1.2rem !important; | |
| font-weight: bold !important; | |
| margin-bottom: 0.5rem !important; | |
| } | |
| .step-message { | |
| font-size: 0.9rem !important; | |
| opacity: 0.8 !important; | |
| } | |
| /* Note: All component-specific styling is now handled inline for better dark theme support */ | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .header-container h1 { | |
| font-size: 2rem; | |
| } | |
| .header-container p { | |
| font-size: 1rem; | |
| } | |
| .lesson-card { | |
| padding: 1rem; | |
| } | |
| } | |
| """ | |
| def get_theme_colors() -> dict: | |
| """Get theme color palette""" | |
| return { | |
| "primary": "#d068a5", | |
| "secondary": "#764ba2", | |
| "success": "#37cb5a", | |
| "error": "#dc3545", | |
| "warning": "#eec54c", | |
| "info": "#09a6be", | |
| "light": "#f5f7e6", | |
| "dark": "#343a40" | |
| } | |
| def get_component_styles() -> dict: | |
| """Get component-specific styles""" | |
| return { | |
| "button_primary": { | |
| "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", | |
| "color": "white", | |
| "border": "none", | |
| "border_radius": "8px", | |
| "font_weight": "bold" | |
| }, | |
| "card": { | |
| "background": "white", | |
| "border": "1px solid #dee2e6", | |
| "border_radius": "8px", | |
| "padding": "1rem", | |
| "box_shadow": "0 2px 4px rgba(0,0,0,0.1)" | |
| }, | |
| "progress_bar": { | |
| "background": "#d1f0e7", | |
| "border_radius": "4px", | |
| "height": "8px" | |
| } | |
| } |