Spaces:
Running
Running
| /* 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; | |
| } | |
| [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; | |
| } | |
| /* 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: 1000; | |
| transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .site-title { | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| margin: 0; | |
| } | |
| .site-title a { | |
| color: var(--text-color); | |
| text-decoration: none; | |
| } | |
| /* 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; | |
| } | |
| /* Subject Selection Cards */ | |
| .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 */ | |
| .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; | |
| } | |
| .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); | |
| } | |
| .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%; | |
| margin-bottom: 1rem; | |
| } | |
| .block-with-image.image-top .block-image-container { | |
| max-width: 100%; | |
| margin-bottom: 1.5rem; | |
| } | |
| .block-image { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 6px; | |
| box-shadow: var(--shadow); | |
| } | |
| .block-content-container { | |
| flex: 1; | |
| } | |
| @media (max-width: 768px) { | |
| .block-with-image { | |
| flex-direction: column ; | |
| } | |
| .block-image-container { | |
| max-width: 100%; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| /* Category Selection UI */ | |
| .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 */ | |
| .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); | |
| } | |
| /* 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); | |
| } | |
| .btn-primary:hover { | |
| background-color: #2980b9; | |
| color: white; | |
| } | |
| .btn-secondary { | |
| background-color: var(--btn-secondary-bg); | |
| color: var(--btn-secondary-text); | |
| } | |
| .btn-secondary:hover { | |
| background-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; | |
| } | |
| .footer-content { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links { | |
| list-style: none; | |
| padding: 0; | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| .feedback-form { | |
| margin-top: 1rem; | |
| } | |
| .feedback-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| /* Admin specific styles */ | |
| .admin-container { | |
| background-color: var(--card-bg); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .admin-title { | |
| margin-top: 0; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.8rem; | |
| color: var(--text-color); | |
| border-bottom: 2px solid var(--primary-color); | |
| padding-bottom: 0.5rem; | |
| } | |
| .admin-sidebar { | |
| background-color: var(--block-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .admin-nav { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .admin-nav-item { | |
| margin-bottom: 0.5rem; | |
| } | |
| .admin-nav-link { | |
| display: block; | |
| padding: 0.75rem 1rem; | |
| border-radius: 4px; | |
| color: var(--text-color); | |
| text-decoration: none; | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| .admin-nav-link:hover, .admin-nav-link.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .admin-nav-link i { | |
| margin-right: 0.5rem; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .admin-card { | |
| background-color: var(--block-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| box-shadow: var(--shadow); | |
| border-left: 4px solid var(--primary-color); | |
| } | |
| .admin-card-title { | |
| font-size: 1.2rem; | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| color: var(--text-color); | |
| } | |
| .admin-stat { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| color: var(--primary-color); | |
| } | |
| /* Editor styles */ | |
| .editor-container { | |
| background-color: var(--block-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .block-editor { | |
| background-color: var(--card-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| box-shadow: var(--shadow); | |
| border: var(--block-border); | |
| position: relative; | |
| } | |
| .block-editor-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .block-editor-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .block-editor-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .block-handle { | |
| cursor: move; | |
| padding: 0.25rem 0.5rem; | |
| margin-right: 0.5rem; | |
| background-color: var(--border-color); | |
| border-radius: 4px; | |
| } | |
| .image-preview { | |
| max-width: 100%; | |
| height: auto; | |
| margin-top: 1rem; | |
| border-radius: 6px; | |
| box-shadow: var(--shadow); | |
| } | |
| .image-gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .gallery-item { | |
| position: relative; | |
| border-radius: 6px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| cursor: pointer; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.05); | |
| box-shadow: var(--hover-shadow); | |
| } | |
| .gallery-image { | |
| width: 100%; | |
| height: 120px; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .gallery-image-select { | |
| position: absolute; | |
| top: 5px; | |
| right: 5px; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Login screen */ | |
| .login-container { | |
| max-width: 400px; | |
| margin: 3rem auto; | |
| background-color: var(--card-bg); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .login-logo { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .login-title { | |
| font-size: 1.8rem; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| /* Responsive design adjustments */ | |
| @media (max-width: 992px) { | |
| .container { | |
| max-width: 100%; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .subject-card { | |
| padding: 1rem; | |
| } | |
| .content-viewer { | |
| padding: 1.5rem; | |
| } | |
| .admin-container { | |
| padding: 1.5rem; | |
| } | |
| .content-title { | |
| font-size: 1.6rem; | |
| } | |
| } | |
| /* Animation keyframes */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes slideInUp { | |
| from { | |
| transform: translateY(50px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .slide-in-up { | |
| animation: slideInUp 0.5s ease-out; | |
| } | |
| /* Utility classes */ | |
| .text-center { | |
| text-align: center; | |
| } | |
| .mb-1 { margin-bottom: 0.5rem; } | |
| .mb-2 { margin-bottom: 1rem; } | |
| .mb-3 { margin-bottom: 1.5rem; } | |
| .mb-4 { margin-bottom: 2rem; } | |
| .mt-1 { margin-top: 0.5rem; } | |
| .mt-2 { margin-top: 1rem; } | |
| .mt-3 { margin-top: 1.5rem; } | |
| .mt-4 { margin-top: 2rem; } | |
| .alert { | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| border-radius: 4px; | |
| } | |
| .alert-success { | |
| background-color: rgba(46, 204, 113, 0.2); | |
| color: #2ecc71; | |
| border: 1px solid rgba(46, 204, 113, 0.3); | |
| } | |
| .alert-danger { | |
| background-color: rgba(231, 76, 60, 0.2); | |
| color: #e74c3c; | |
| border: 1px solid rgba(231, 76, 60, 0.3); | |
| } | |
| .alert-warning { | |
| background-color: rgba(241, 196, 15, 0.2); | |
| color: #f1c40f; | |
| border: 1px solid rgba(241, 196, 15, 0.3); | |
| } | |
| .alert-info { | |
| background-color: rgba(52, 152, 219, 0.2); | |
| color: #3498db; | |
| border: 1px solid rgba(52, 152, 219, 0.3); | |
| } | |