/* * Cinematic Scholar – Global Theme Variables * Defined on :root so every element in the document inherits them, * including elements inside Vue component slots and scoped components. * * Dark mode: add class="dark" to (default admin palette) * Light mode: no dark class on */ /* ── Light Mode (default when no .dark class on ) ─────────────────── */ :root { color-scheme: light; --cs-bg: #f4f7ff; --cs-surface: #ffffff; --cs-surface-low: #eef1fb; --cs-surface-base: #e4e9f5; --cs-surface-high: #d8dff0; --cs-surface-highest: #ccd4eb; --cs-surface-lowest: #f9faff; --cs-text-primary: #1a2036; --cs-text-muted: #4a5068; --cs-accent: #005ac2; --cs-accent-vivid: #004395; --cs-tertiary: #8c4500; --cs-secondary: #304671; --cs-error: #ba1a1a; --cs-success: #146c2e; --cs-warning: #8c4500; --cs-nav-bg: rgba(255, 255, 255, 0.95); --cs-overlay: rgba(0, 0, 0, 0.07); --cs-border: rgba(0, 0, 0, 0.08); --cs-input-bg: #ffffff; --cs-input-border: rgba(26, 32, 54, 0.18); --cs-shadow: 0 4px 24px -6px rgba(26, 32, 54, 0.12); } /* ── Dark Mode (html.dark) ───────────────────────────────────────────────── */ html.dark { color-scheme: dark; --cs-bg: #0c1322; --cs-surface: #0c1322; --cs-surface-low: #141b2b; --cs-surface-base: #191f2f; --cs-surface-high: #232a3a; --cs-surface-highest: #2e3545; --cs-surface-lowest: #070e1d; --cs-text-primary: #dce2f7; --cs-text-muted: #c2c6d6; --cs-accent: #adc6ff; --cs-accent-vivid: #4d8eff; --cs-tertiary: #ffb786; --cs-secondary: #b1c6f9; --cs-error: #ffb4ab; --cs-success: #7ddf9a; --cs-warning: #ffb786; --cs-nav-bg: rgba(12, 19, 34, 0.88); --cs-overlay: rgba(255, 255, 255, 0.05); --cs-border: rgba(255, 255, 255, 0.06); --cs-input-bg: #070e1d; --cs-input-border: rgba(220, 226, 247, 0.16); --cs-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6); } /* ── Base resets that respond to theme ───────────────────────────────────── */ body { background-color: var(--cs-bg); color: var(--cs-text-primary); transition: background-color 0.2s, color 0.2s; } /* ── Semantic utility classes ────────────────────────────────────────────── */ /* Backgrounds */ .cs-card { background: var(--cs-surface-low); border: 1px solid var(--cs-border); } .cs-card-high { background: var(--cs-surface-high); } .cs-card-lowest { background: var(--cs-surface-lowest); } .cs-surface-base { background: var(--cs-surface-base); } .cs-surface-highest { background: var(--cs-surface-highest); } .cs-footer { background: var(--cs-surface-low); } .cs-mobile-menu { background: var(--cs-surface-high); } /* Navigation */ .cs-nav { background: var(--cs-nav-bg); } .cs-nav-link { color: var(--cs-text-muted); } .cs-nav-active { color: var(--cs-accent) !important; border-color: var(--cs-accent) !important; } /* Icons & buttons */ .cs-icon-btn { color: var(--cs-text-muted); } .cs-icon-btn:hover { color: var(--cs-text-primary); background: var(--cs-overlay); } /* Live date/time pill in the navbar */ .cs-datetime { background: var(--cs-overlay); border: 1px solid color-mix(in srgb, var(--cs-accent) 18%, transparent); transition: background 0.2s ease, border-color 0.2s ease; } .cs-datetime:hover { background: color-mix(in srgb, var(--cs-accent) 8%, var(--cs-overlay)); } .cs-btn-gradient { background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-vivid)); color: #fff; } html.dark .cs-btn-gradient { color: #002e6a; } .cs-btn-gradient:hover { box-shadow: 0 0 20px rgba(77, 142, 255, 0.4); } .cs-btn-secondary { background: var(--cs-surface-high); color: var(--cs-text-primary); } .cs-btn-secondary:hover { background: var(--cs-surface-highest); } /* Text */ .cs-text-primary { color: var(--cs-text-primary); } .cs-text-muted { color: var(--cs-text-muted); } .cs-text-accent { color: var(--cs-accent); } .cs-text-tertiary { color: var(--cs-tertiary); } .cs-text-secondary { color: var(--cs-secondary); } .cs-text-error { color: var(--cs-error); } .cs-text-success { color: var(--cs-success); } .cs-text-warning { color: var(--cs-warning); } .cs-inset { border: 1px solid var(--cs-border); background: var(--cs-overlay); } .cs-alert-success { border: 1px solid color-mix(in srgb, var(--cs-success) 35%, transparent); background: color-mix(in srgb, var(--cs-success) 12%, transparent); color: var(--cs-text-primary); } .cs-alert-error { border: 1px solid color-mix(in srgb, var(--cs-error) 35%, transparent); background: color-mix(in srgb, var(--cs-error) 12%, transparent); color: var(--cs-text-primary); } .cs-alert-warning { border: 1px solid color-mix(in srgb, var(--cs-warning) 40%, transparent); background: color-mix(in srgb, var(--cs-warning) 12%, transparent); color: var(--cs-text-primary); } .cs-badge-success { background: color-mix(in srgb, var(--cs-success) 15%, transparent); color: var(--cs-success); } .cs-badge-warning { background: color-mix(in srgb, var(--cs-warning) 15%, transparent); color: var(--cs-warning); } .cs-badge-error { background: color-mix(in srgb, var(--cs-error) 15%, transparent); color: var(--cs-error); } .cs-btn-danger { background: color-mix(in srgb, var(--cs-error) 15%, transparent); color: var(--cs-error); } .cs-root .form-control, .cs-root .form-select, .cs-root textarea.form-control { width: 100%; border-radius: 0.75rem; border: 1px solid var(--cs-input-border); background-color: var(--cs-input-bg); color: var(--cs-text-primary); padding: 0.55rem 0.75rem; } .cs-root .form-control:focus, .cs-root .form-select:focus, .cs-root textarea.form-control:focus { border-color: color-mix(in srgb, var(--cs-accent) 45%, var(--cs-input-border)); outline: none; box-shadow: none; background-color: var(--cs-input-bg); color: var(--cs-text-primary); } .cs-root .form-control::placeholder { color: var(--cs-text-muted); opacity: 0.8; } .cs-root input[type='time'], .cs-root input[type='date'], .cs-root input[type='number'], .cs-root input[type='password'] { color-scheme: inherit; } /* Teleported modals sit on body, outside .cs-root. */ .admin-filter-input, .admin-filter-select { width: 100%; border-radius: 0.75rem; border: 1px solid var(--cs-input-border); background-color: var(--cs-input-bg); color: var(--cs-text-primary); padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.5; min-height: 2.5rem; color-scheme: inherit; } textarea.admin-filter-input { min-height: 5rem; resize: vertical; } .admin-filter-input::placeholder { color: var(--cs-text-muted); opacity: 1; } .admin-filter-input:focus, .admin-filter-select:focus { border-color: color-mix(in srgb, var(--cs-accent) 45%, var(--cs-input-border)); outline: none; box-shadow: none; background-color: var(--cs-input-bg); } .admin-filter-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 0.75rem center; background-size: 1rem; padding-inline-end: 0.75rem; padding-inline-start: 2.25rem; } html[dir='rtl'] .admin-filter-select { background-position: right 0.75rem center; padding-inline-start: 0.75rem; padding-inline-end: 2.25rem; } .admin-filter-select option { background: var(--cs-surface-high); color: var(--cs-text-primary); } .admin-date-range-dp .dp__input { border: 1px solid var(--cs-input-border) !important; background-color: var(--cs-input-bg) !important; color: var(--cs-text-primary) !important; } :is(input, select, textarea).border-white\/10 { background-color: var(--cs-input-bg) !important; border-color: var(--cs-input-border) !important; color: var(--cs-text-primary); } :is(input, select, textarea).border-white\/10:focus { border-color: color-mix(in srgb, var(--cs-accent) 45%, var(--cs-input-border)) !important; } /** * Light theme only — builder/modals still ship dark-oriented input scoped * styles (white/10 border + transparent fill). Override those in light mode * without touching html.dark appearance. */ html:not(.dark) .cs-input, html:not(.dark) .coupon-input, html:not(.dark) .withdraw-input, html:not(.dark) .payment-input { border: 1px solid var(--cs-input-border) !important; background-color: var(--cs-input-bg) !important; color: var(--cs-text-primary) !important; } html:not(.dark) .cs-input:focus, html:not(.dark) .coupon-input:focus, html:not(.dark) .withdraw-input:focus, html:not(.dark) .payment-input:focus { border-color: color-mix(in srgb, var(--cs-accent) 45%, var(--cs-input-border)) !important; outline: none; box-shadow: none; background-color: var(--cs-input-bg) !important; } html:not(.dark) .course-expiration-dp .dp__input, html:not(.dark) .quiz-expiration-dp .dp__input, html:not(.dark) .coupon-validity-dp .dp__input { border: 1px solid var(--cs-input-border) !important; background-color: var(--cs-input-bg) !important; color: var(--cs-text-primary) !important; } html:not(.dark) .border-white\/5, html:not(.dark) .border-white\/10, html:not(.dark) .border-white\/15, html:not(.dark) .border-white\/20 { border-color: var(--cs-border) !important; } html:not(.dark) .hover\:border-white\/20:hover { border-color: color-mix(in srgb, var(--cs-accent) 28%, var(--cs-border)) !important; } html:not(.dark) .bg-white\/5, html:not(.dark) .bg-white\/\[0\.02\] { background-color: var(--cs-overlay) !important; } /** * Light theme only — some builders still force VueDatePicker dark theme. * Remap the dark palette tokens to the light ones so the popup matches light * UI without changing html.dark appearance. */ html:not(.dark) .dp__theme_dark { --dp-background-color: #fff; --dp-text-color: #212121; --dp-hover-color: #f3f3f3; --dp-hover-text-color: #212121; --dp-hover-icon-color: #959595; --dp-primary-color: #1976d2; --dp-primary-disabled-color: #6bacea; --dp-primary-text-color: #fff; --dp-secondary-color: #c0c4cc; --dp-border-color: #ddd; --dp-menu-border-color: #ddd; --dp-border-color-hover: #aaaeb7; --dp-border-color-focus: #aaaeb7; --dp-disabled-color: #f6f6f6; --dp-disabled-color-text: #8e8e8e; --dp-scroll-bar-background: #f3f3f3; --dp-scroll-bar-color: #959595; --dp-success-color: #76d275; --dp-success-color-disabled: #a3d9b1; --dp-icon-color: #959595; --dp-danger-color: #ff6f60; --dp-marker-color: #ff6f60; --dp-tooltip-color: #fafafa; --dp-highlight-color: rgb(25 118 210 / 10%); --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3); --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121); --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3); --dp-loader: 5px solid #1976d2; } .tenant-input { background-color: var(--cs-input-bg); border-color: var(--cs-input-border); color: var(--cs-text-primary); } .tenant-input--invalid { border-color: #f87171; } /* Borders */ .cs-border-accent { border-color: var(--cs-accent); } .cs-border-secondary { border-color: var(--cs-secondary); } .cs-border-tertiary { border-color: var(--cs-tertiary); } .cs-hairline { border-color: var(--cs-border); } .cs-rule-b { border-bottom: 1px solid var(--cs-border); } .cs-rule-t { border-top: 1px solid var(--cs-border); } .cs-rule-s { border-inline-start: 1px solid var(--cs-border); } .cs-rule-e { border-inline-end: 1px solid var(--cs-border); } .cs-fill-soft { background: var(--cs-overlay); } .cs-fill-soft-hover:hover { background: var(--cs-overlay); } /* Dropdowns */ .cs-dropdown { background: var(--cs-surface-high); border: 1px solid var(--cs-border); } .cs-dropdown-item { color: var(--cs-text-primary); } .cs-dropdown-item:hover { background: var(--cs-overlay); color: var(--cs-accent); } /* Progress bar track */ .cs-track { background: var(--cs-surface-highest); } /* Fonts */ .font-headline { font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif; } .font-body { font-family: 'Inter', 'Cairo', sans-serif; } html[dir='rtl'] .font-headline { font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif; } html[dir='rtl'] .font-body { font-family: 'Cairo', 'Inter', sans-serif; } /* ── Stat card (primary KPI) ─────────────────────────────────────────────── */ .cs-stat-card { background: var(--cs-surface-low); border: 1px solid var(--cs-border); } .cs-stat-card:hover { background: var(--cs-surface-high); } /* ── KPI icon circle ────────────────────────────────────────────────────── */ .cs-kpi-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cs-kpi-icon--accent { background: color-mix(in srgb, var(--cs-accent) 15%, transparent); } .cs-kpi-icon--tertiary { background: color-mix(in srgb, var(--cs-tertiary) 15%, transparent); } .cs-kpi-icon--secondary { background: color-mix(in srgb, var(--cs-secondary) 15%, transparent); } /* ── Course list rows ────────────────────────────────────────────────────── */ .cs-course-row { background: var(--cs-surface-base); } .cs-course-row:hover { background: var(--cs-surface-highest); } /* ── Avatar border ───────────────────────────────────────────────────────── */ .cs-avatar { border: 1px solid var(--cs-border); } /* ── Badge ───────────────────────────────────────────────────────────────── */ .cs-badge-accent { background: color-mix(in srgb, var(--cs-accent) 12%, transparent); color: var(--cs-accent); }