/* Base Styles & Theme Variables */ :root { /* Light theme */ --background-color: #f8f9fa; --text-color: #212529; --primary-color: #3498db; --secondary-color: #2ecc71; --accent-color: #e74c3c; --muted-color: #95a5a6; --border-color: #dee2e6; --card-bg: #ffffff; --header-bg: #ffffff; --footer-bg: #f1f1f1; --shadow: 0 2px 5px rgba(0, 0, 0, 0.1); --hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --block-bg: #f8f9fa; --block-border: 1px solid #dee2e6; --input-bg: #ffffff; --btn-primary-bg: var(--primary-color); --btn-primary-text: #ffffff; --btn-secondary-bg: #6c757d; --btn-secondary-text: #ffffff; --modal-bg: #ffffff; --sidebar-bg: #ffffff; /* Added for consistency */ --sidebar-border: #dee2e6; /* Added */ --sidebar-hover-bg: rgba(52, 152, 219, 0.1); /* Added */ } [data-theme="dark"] { /* Dark theme */ --background-color: #121212; --text-color: #e0e0e0; --primary-color: #3498db; --secondary-color: #2ecc71; --accent-color: #e74c3c; --muted-color: #95a5a6; --border-color: #333333; --card-bg: #1e1e1e; --header-bg: #1a1a1a; --footer-bg: #1a1a1a; --shadow: 0 2px 5px rgba(0, 0, 0, 0.3); --hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); --block-bg: #1e1e1e; --block-border: 1px solid #333333; --input-bg: #2c2c2c; --btn-primary-bg: var(--primary-color); --btn-primary-text: #ffffff; --btn-secondary-bg: #555555; --btn-secondary-text: #ffffff; --modal-bg: #1e1e1e; --sidebar-bg: #1e1e1e; /* Added for dark theme */ --sidebar-border: #333333; /* Added */ --sidebar-hover-bg: rgba(52, 152, 219, 0.2); /* Slightly different hover for dark */ } /* General Styles */ body { background-color: var(--background-color); color: var(--text-color); font-family: 'Roboto', 'Segoe UI', 'Arial', sans-serif; line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: #2980b9; text-decoration: underline; } /* Header Styles */ .main-header { background-color: var(--header-bg); padding: 1rem 0; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 1030; /* Ensure header is above general content but below modals/sidebars if needed */ transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* MODIFIED: Header Container Layout */ .header-container { display: flex; align-items: center; /* Removed justify-content: space-between; to accommodate burger */ } /* NEW: Burger Menu Button */ .burger-menu-button { background: none; border: none; font-size: 1.8rem; /* Match site title size */ color: var(--text-color); cursor: pointer; padding: 0.5rem; margin-right: 1rem; /* Space between burger and title */ line-height: 1; transition: color 0.3s ease; } .burger-menu-button:hover { color: var(--primary-color); } /* MODIFIED: Site Title Layout */ .site-title { flex-grow: 1; /* Allow title to take available space */ text-align: center; /* Center title between burger and actions */ font-size: 1.8rem; font-weight: bold; margin: 0; /* Remove default margins */ } .site-title a { color: var(--text-color); text-decoration: none; } /* Header Actions (Theme toggle, Admin) - Ensure they stay aligned */ .header-actions { display: flex; align-items: center; margin-left: 1rem; /* Space between title and actions */ } /* Theme Toggle */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--text-color); font-size: 1.5rem; padding: 0.5rem; transition: color 0.3s ease, transform 0.3s ease; } .theme-toggle:hover { color: var(--primary-color); transform: rotate(15deg); } /* Main Content */ .main-content { flex: 1; padding: 2rem 0; /* Maintain padding for content area */ /* Removed container adjustments, rely on bootstrap's container inside */ } /* --- NEW: Sidebar Styles --- */ /* Sidebar Overlay */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ z-index: 1040; /* Below sidebars, above content */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* Sidebar Base Styles */ .sidebar { position: fixed; top: 0; left: 0; /* Both sidebars originate from the left */ width: 300px; /* Default width, adjust as needed */ height: 100%; background-color: var(--sidebar-bg); /* Use theme variable */ box-shadow: var(--shadow); z-index: 1050; /* Above overlay */ display: flex; flex-direction: column; transform: translateX(-100%); /* Initially hidden off-screen to the left */ transition: transform 0.3s ease-in-out; border-right: 1px solid var(--sidebar-border); /* Use theme variable */ } .sidebar.active { transform: translateX(0); /* Slide in from the left */ } /* Sidebar Header */ .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--sidebar-border); /* Use theme variable */ background-color: var(--header-bg); /* Optional: Match header background */ flex-shrink: 0; /* Prevent header from shrinking */ } .sidebar-header h4 { margin: 0; font-size: 1.2rem; font-weight: 600; flex-grow: 1; /* Allow title to take space */ margin-left: 10px; /* Space after back button if present */ overflow: hidden; /* Prevent long titles from breaking layout */ white-space: nowrap; text-overflow: ellipsis; } /* Sidebar Back and Close Buttons */ .sidebar-back-button, .close-sidebar-btn { background: none; border: none; font-size: 1.5rem; color: var(--muted-color); cursor: pointer; padding: 0.25rem; line-height: 1; transition: color 0.2s ease; } .sidebar-back-button:hover, .close-sidebar-btn:hover { color: var(--text-color); } /* Sidebar List (Matières & Sous-catégories) */ .sidebar-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; /* Take remaining vertical space */ overflow-y: auto; /* Enable vertical scrolling for long lists */ overflow-x: hidden; /* Prevent horizontal scrollbars */ } .sidebar-list li { padding: 0.8rem 1.5rem; cursor: pointer; border-bottom: 1px solid var(--sidebar-border); /* Use theme variable */ transition: background-color 0.2s ease; display: flex; justify-content: space-between; /* Push icon to the right */ align-items: center; white-space: nowrap; /* Prevent text wrapping */ } .sidebar-list li:last-child { border-bottom: none; /* Remove border from last item */ } .sidebar-list li:hover { background-color: var(--sidebar-hover-bg); /* Use theme variable */ } .sidebar-list li i.fa-chevron-right, .sidebar-list li i.fa-arrow-left { /* Style for icons inside list items */ color: var(--muted-color); font-size: 0.9em; margin-left: 0.5rem; /* Space between text and icon */ } /* Optional: Style for active/selected item in sidebar */ .sidebar-list li.active { background-color: var(--primary-color); color: white; } .sidebar-list li.active i { /* Make icon white too */ color: white; } /* --- End of Sidebar Styles --- */ /* NEW: Initial Instructions Area */ .initial-instructions { background-color: var(--card-bg); padding: 2rem; border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border-color); margin-top: 2rem; /* Adjust as needed */ text-align: center; /* Center content */ } /* --- Original Styles (with minor adjustments if needed) --- */ /* Flash Messages Container */ .flash-container { position: relative; /* Keep in normal flow */ z-index: 100; /* Below header but above main content */ } /* Subject Selection Cards (Original - No longer used on index, but might be elsewhere) */ .subject-card { background-color: var(--card-bg); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); transition: box-shadow 0.3s ease, transform 0.3s ease; cursor: pointer; } .subject-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-5px); } .subject-card h3 { margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; color: var(--text-color); } /* Subject Color-Coding */ .subject-indicator { width: 100%; height: 8px; border-radius: 4px; margin-bottom: 1rem; } /* Content Blocks Styling (Used in Content Display Section) */ .content-block { background-color: var(--block-bg); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow); border: var(--block-border); transition: box-shadow 0.3s ease; overflow: hidden; /* Prevent content spill */ /* border-left: 4px solid transparent; -> Now handled dynamically by JS or remove if not needed */ } .content-block:hover { box-shadow: var(--hover-shadow); } .content-block-title { font-size: 1.4rem; font-weight: bold; margin-top: 0; margin-bottom: 1rem; color: var(--text-color); padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-color); /* Default color, JS might override */ } .content-block-content { line-height: 1.7; } /* Image positioning styles */ .block-with-image { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; } .block-with-image.image-left { flex-direction: row; } .block-with-image.image-right { flex-direction: row-reverse; } .block-with-image.image-top { flex-direction: column; } .block-image-container { flex: 0 0 auto; max-width: 30%; /* Default max width for side images */ margin-bottom: 1rem; /* Spacing below image if wrapped */ } .block-with-image.image-top .block-image-container { max-width: 100%; /* Full width for top images */ margin-bottom: 1.5rem; } .block-image { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow); display: block; /* Prevent extra space below image */ } .block-content-container { flex: 1; /* Take remaining space */ min-width: 60%; /* Ensure text has enough space on wider screens */ } /* Category Selection UI (Original - No longer used on index) */ .selection-container { background-color: var(--card-bg); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow); } .selection-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .selection-list { list-style: none; padding: 0; margin: 0; } .selection-item { padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .selection-item:hover { background-color: rgba(52, 152, 219, 0.1); } .selection-item.active { background-color: var(--primary-color); color: white; } /* Content Viewer (Container for title and blocks) */ .content-viewer { background-color: var(--card-bg); border-radius: 8px; padding: 2rem; box-shadow: var(--shadow); margin-bottom: 2rem; } .content-title { font-size: 2rem; margin-top: 0; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-color); /* Default color, JS might override */ } /* Buttons */ .btn { display: inline-block; font-weight: 500; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.5rem 1rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: all 0.15s ease-in-out; cursor: pointer; } .btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); /* Added for consistency */ } .btn-primary:hover { background-color: #2980b9; /* Darken primary */ border-color: #2980b9; color: white; } .btn-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-bg); /* Added for consistency */ } .btn-secondary:hover { background-color: #5a6268; /* Darken secondary */ border-color: #5a6268; color: white; } /* Form Elements */ input, select, textarea { background-color: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.75rem 1rem; width: 100%; transition: border-color 0.3s ease, box-shadow 0.3s ease; } input:focus, select:focus, textarea:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25); } label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .form-group { margin-bottom: 1.5rem; } /* Footer */ .main-footer { background-color: var(--footer-bg); padding: 2rem 0; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05); margin-top: auto; /* Push footer to bottom */ flex-shrink: 0; /* Prevent footer from shrinking */ } .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; /* Add gap for wrapping */ } .footer-links { list-style: none; padding: 0; margin: 0; /* Reset margin */ display: flex; flex-wrap: wrap; /* Allow links to wrap */ gap: 1.5rem; } .feedback-form { margin-top: 1rem; max-width: 400px; /* Limit width of feedback form */ } .feedback-title { font-size: 1.2rem; margin-bottom: 0.75rem; } /* Admin specific styles (Keep if used on other pages) */ .admin-container { /* ... Keep original ... */ } .admin-title { /* ... Keep original ... */ } .admin-sidebar { /* ... Keep original ... */ } .admin-nav { /* ... Keep original ... */ } .admin-nav-item { /* ... Keep original ... */ } .admin-nav-link { /* ... Keep original ... */ } .admin-nav-link i { /* ... Keep original ... */ } .admin-card { /* ... Keep original ... */ } .admin-card-title { /* ... Keep original ... */ } .admin-stat { /* ... Keep original ... */ } /* Editor styles (Keep if used on other pages) */ .editor-container { /* ... Keep original ... */ } .block-editor { /* ... Keep original ... */ } .block-editor-header { /* ... Keep original ... */ } .block-editor-title { /* ... Keep original ... */ } .block-editor-actions { /* ... Keep original ... */ } .block-handle { /* ... Keep original ... */ } .image-preview { /* ... Keep original ... */ } .image-gallery { /* ... Keep original ... */ } .gallery-item { /* ... Keep original ... */ } .gallery-image { /* ... Keep original ... */ } .gallery-image-select { /* ... Keep original ... */ } /* Login screen (Keep if used) */ .login-container { /* ... Keep original ... */ } .login-logo { /* ... Keep original ... */ } .login-title { /* ... Keep original ... */ } /* Responsive design adjustments */ @media (max-width: 992px) { /* No change needed here if using Bootstrap's container correctly */ } @media (max-width: 768px) { /* Content Block Images: Stack vertically */ .block-with-image { flex-direction: column !important; /* Force column layout */ } .block-image-container { max-width: 100%; /* Image takes full width */ margin-bottom: 1.5rem; /* Space below image */ } .block-content-container { min-width: 100%; /* Text takes full width */ } /* Sidebar width adjustment */ .sidebar { width: 85%; /* Make sidebar wider on mobile */ max-width: 320px; /* Optional: Set a max width */ } /* Optional: Adjust header layout on smaller screens */ .site-title { font-size: 1.5rem; /* Slightly smaller title */ text-align: left; /* Align title next to burger */ margin-left: 0.5rem; /* Adjust spacing */ } .header-actions { margin-left: auto; /* Push actions to the right */ } } @media (max-width: 576px) { .subject-card { /* Style for cards if used elsewhere */ padding: 1rem; } .content-viewer { padding: 1.5rem; /* Less padding inside content area */ } .admin-container { padding: 1.5rem; } .content-title { font-size: 1.6rem; /* Smaller main title */ } .footer-content { flex-direction: column; /* Stack footer sections */ align-items: center; text-align: center; } .footer-links { justify-content: center; /* Center footer links */ margin-top: 0.5rem; } .feedback-form { width: 100%; /* Full width feedback form */ margin-top: 1.5rem; } } /* Animation keyframes (Keep original) */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease-in forwards; /* Added forwards to keep state */ } @keyframes slideInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .slide-in-up { animation: slideInUp 0.5s ease-out forwards; /* Added forwards */ } /* Utility classes (Keep original) */ .text-center { text-align: center; } .mb-1 { margin-bottom: 0.5rem !important; } .mb-2 { margin-bottom: 1rem !important; } .mb-3 { margin-bottom: 1.5rem !important; } .mb-4 { margin-bottom: 2rem !important; } .mt-1 { margin-top: 0.5rem !important; } .mt-2 { margin-top: 1rem !important; } .mt-3 { margin-top: 1.5rem !important; } .mt-4 { margin-top: 2rem !important; } .ms-2 { margin-left: 0.5rem !important; } /* Bootstrap utility */ .float-end { float: right !important; } /* Bootstrap utility */ .d-none { display: none !important; } /* Bootstrap utility */ /* Alert Styles (Keep original) */ .alert { padding: 1rem; margin-bottom: 1rem; border-radius: 4px; border: 1px solid transparent; /* Base border */ } .alert-dismissible .btn-close { padding: 1.25rem 1rem; /* Adjust close button padding */ } .alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; } [data-theme="dark"] .alert-success { color: #75b798; background-color: #192c23; border-color: #254134; } .alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; } [data-theme="dark"] .alert-danger { color: #ea868f; background-color: #341a1d; border-color: #50272c; } .alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; } [data-theme="dark"] .alert-warning { color: #ffda6a; background-color: #33270a; border-color: #4d3b0f; } .alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; } [data-theme="dark"] .alert-info { color: #6edff6; background-color: #0f2d36; border-color: #164350; }