/* Theme Name: Eduma Pali Child Theme URI: https://pali-online.in.th Description: Child theme of Eduma for Pali Online project. Hooks into Eduma's built-in dark/light toggle and applies Pali brand color (#D4A017 Pali Gold). Author: Pali Online Team Author URI: https://pali-online.in.th Template: eduma Version: 1.1.0 Requires at least: 6.0 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: eduma-pali-child Tags: education, dark-mode, custom-colors */ /* ============================================================ 1. CSS CUSTOM PROPERTIES (Brand Color Tokens) ============================================================ Default = Dark theme (matches Eduma default). Light theme overrides apply when Eduma adds .light or .light-mode class to . ============================================================ */ body.pali-themed { /* ---------- Brand accent (Pali Gold) ---------- */ --pali-accent: #D4A017; --pali-accent-hover: #E6B533; --pali-accent-active: #B8860B; --pali-accent-soft: rgba(212, 160, 23, 0.12); /* ---------- Dark mode tokens (default) ---------- */ --pali-bg-page: #0a0a0a; --pali-bg-section: #111111; --pali-bg-card: #1a1a1a; --pali-bg-elevated: #262626; --pali-text-primary: #ffffff; --pali-text-secondary: #b3b3b3; --pali-text-muted: #808080; --pali-text-inverse: #0a0a0a; --pali-border: #2a2a2a; --pali-border-strong: #3d3d3d; --pali-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5); --pali-shadow-accent: 0 4px 14px rgba(212, 160, 23, 0.25); /* ---------- Layout ---------- */ --pali-radius-sm: 4px; --pali-radius-md: 8px; --pali-radius-lg: 14px; --pali-transition: all 0.25s ease; } /* ============================================================ 2. LIGHT MODE OVERRIDE ============================================================ Eduma toggles dark/light by adding class to . Common classnames Eduma uses: .light, .light-mode, .lightmode We cover all of them, plus the html[data-theme="light"] variant in case a future Eduma version uses it. ============================================================ */ body.pali-themed.light, body.pali-themed.light-mode, body.pali-themed.lightmode, html[data-theme="light"] body.pali-themed { --pali-bg-page: #ffffff; --pali-bg-section: #fafafa; --pali-bg-card: #f5f5f5; --pali-bg-elevated: #ffffff; --pali-text-primary: #1a1a1a; --pali-text-secondary: #4a4a4a; --pali-text-muted: #707070; --pali-text-inverse: #ffffff; --pali-accent: #B8860B; --pali-accent-hover: #D4A017; --pali-accent-active: #8B6914; --pali-accent-soft: rgba(184, 134, 11, 0.1); --pali-border: #e5e5e5; --pali-border-strong: #cccccc; --pali-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08); --pali-shadow-accent: 0 4px 14px rgba(184, 134, 11, 0.2); } /* ============================================================ 3. UTILITY CLASSES (Pali brand) ============================================================ ใช้ตอนเขียน custom template ใน Phase ถัดไป เช่น หน้าแรกใหม่, member dashboard, lesson player ============================================================ */ .pali-card { background: var(--pali-bg-card); border: 1px solid var(--pali-border); border-radius: var(--pali-radius-md); padding: 20px; color: var(--pali-text-primary); } .pali-btn-primary { display: inline-block; padding: 12px 28px; background: var(--pali-accent); color: var(--pali-text-inverse) !important; border: none; border-radius: var(--pali-radius-md); font-weight: 600; text-decoration: none; transition: var(--pali-transition); cursor: pointer; } .pali-btn-primary:hover { background: var(--pali-accent-hover); box-shadow: var(--pali-shadow-accent); transform: translateY(-1px); } .pali-btn-outline { display: inline-block; padding: 12px 28px; background: transparent; color: var(--pali-text-primary); border: 2px solid var(--pali-text-primary); border-radius: var(--pali-radius-md); font-weight: 600; text-decoration: none; transition: var(--pali-transition); cursor: pointer; } .pali-btn-outline:hover { background: var(--pali-text-primary); color: var(--pali-text-inverse) !important; } .pali-text-accent { color: var(--pali-accent); } .pali-text-muted { color: var(--pali-text-muted); } .pali-bg-section { background: var(--pali-bg-section); } /* ============================================================ 4. SECTION HEADER (gold accent bar - Netflix style) ============================================================ */ .pali-section-title { position: relative; padding-left: 16px; color: var(--pali-text-primary); font-weight: 700; font-size: 22px; margin: 24px 0 16px; } .pali-section-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: var(--pali-accent); border-radius: 2px; } /* ============================================================ 5. FOCUS ACCESSIBILITY ============================================================ */ body.pali-themed *:focus-visible { outline: 2px solid var(--pali-accent); outline-offset: 2px; } /* ============================================================ 6. REDUCED MOTION (Accessibility) ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ 7. PHASE-NEXT PLACEHOLDERS ============================================================ Custom CSS สำหรับหน้า/component ใหม่ จะเพิ่มที่นี่ใน Phase ถัด ๆ ไป เช่น: - .pali-hero - .pali-continue-watching - .pali-video-player - .pali-playlist - .pali-helpdesk-form ============================================================ */