/* ========================================================================== PrepSora — Tutor LMS frontend re-skin Recolours Tutor's default blue UI to the PrepSora palette by overriding Tutor's CSS custom properties, with a few targeted fallbacks for the most visible elements. Scoped to Tutor's own wrappers + the body classes WordPress guarantees on each Tutor screen, so nothing leaks. Loaded on: the learning dashboard, single course, lesson, quiz, assignment, and the course archive (see prepsora_is_tutor_screen() in functions.php). NOTE: Tutor's exact class names for the course/quiz player vary by version. The colour-variable re-point below is version-stable and does most of the work; any blue that survives it is hardcoded and gets pinned against real markup in the deep quiz re-skin pass. Depends on tokens in prepsora-design-system.css. ========================================================================== */ /* -------------------------------------------------------------------------- Re-point Tutor's colour variables to the PrepSora palette. This alone recolours most buttons, links, active states and icon tints. Anchored to the body classes WordPress guarantees on each Tutor screen (single-courses / single-lesson / single-tutor_quiz / post-type-archive- courses / tax-course-*), so the re-point reaches the course + quiz player even when Tutor's own wrapper class isn't on . Defining the variables at body level lets them cascade to every Tutor element on the page. -------------------------------------------------------------------------- */ .tutor-dashboard, .tutor-wrap, .tutor-frontend-dashboard, .tutor-dashboard-content, .tutor-course-single, .tutor-single-course, .tutor-quiz-wrapper, .tutor-quiz-single-wrap, body.single-courses, body.single-lesson, body.single-tutor_quiz, body.single-tutor_assignments, body.post-type-archive-courses, body.tax-course-category, body.tax-course-tag, body[class*="tutor"] { --tutor-color-primary: var(--ps-teal-600); --tutor-color-primary-hover: var(--ps-teal-700); --tutor-color-primary-active: var(--ps-teal-800); --tutor-color-primary-light: var(--ps-teal-100); --tutor-color-primary-50: var(--ps-teal-50); --tutor-color-primary-30: var(--ps-teal-50); --tutor-color-brand: var(--ps-teal-600); --tutor-color-success: var(--ps-green-600); --tutor-color-success-light: var(--ps-green-100); --tutor-fontfamily-body: var(--ps-font-body); --tutor-fontfamily-heading: var(--ps-font-display); } /* -------------------------------------------------------------------------- Targeted fallbacks (in case some elements don't use the variables above) -------------------------------------------------------------------------- */ /* Active item in the left dashboard menu */ .tutor-dashboard-permalinks li.active > a, .tutor-dashboard-menu li.active > a, .tutor-dashboard-menu-item.active, .tutor-dashboard-menu-item.active > a { background-color: var(--ps-primary); color: #fff; } .tutor-dashboard-permalinks li > a:hover, .tutor-dashboard-menu li > a:hover { color: var(--ps-primary-hover); } /* Stat-card icon tiles + brand-coloured icons */ .tutor-dashboard-info-card [class*="tutor-icon"], .tutor-dashboard-info-card svg [fill]:not([fill="none"]) { color: var(--ps-primary); } /* Primary + outline buttons (e.g. "New Course") */ .tutor-btn-primary, .tutor-btn.tutor-btn-primary { background-color: var(--ps-primary); border-color: var(--ps-primary); color: #fff; } .tutor-btn-primary:hover, .tutor-btn.tutor-btn-primary:hover { background-color: var(--ps-primary-hover); border-color: var(--ps-primary-hover); color: #fff; } .tutor-btn-outline-primary { color: var(--ps-primary); border-color: var(--ps-primary); background-color: transparent; } .tutor-btn-outline-primary:hover { background-color: var(--ps-primary-soft); color: var(--ps-primary-hover); } /* Links inside the dashboard */ .tutor-dashboard a:not(.tutor-btn) { color: var(--ps-link); } .tutor-dashboard a:not(.tutor-btn):hover { color: var(--ps-link-hover); } /* Headings use the display font + brand navy */ .tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3, .tutor-dashboard h4 { font-family: var(--ps-font-display); color: var(--ps-heading); }