/* ========================================================================== LMS COURSEWARE DESIGN SYSTEM Shared CSS for TinyMCE content rendering across the LearnKusto platform. Loaded in: TinyMCE editor iframe, student views, preview, print/PDF. Architecture: - .lms-courseware wrapper scopes all styles (prevents Bootstrap bleed) - CSS custom properties enable theme switching - Dark mode: detected via [data-bs-theme="dark"] ancestor (front-end) or data-mode="dark" on .lms-courseware itself (TinyMCE iframe) - 5 theme palettes applied via .lms-theme-* class on .lms-courseware - Semantic content blocks for structured lesson authoring ========================================================================== */ /* -------------------------------------------------------------------------- 0) Default tokens (Technical — the KQL/cyber default) -------------------------------------------------------------------------- */ .lms-courseware { /* Light tokens */ --cw-bg-light: #fbfdff; --cw-panel-light: #ffffff; --cw-panel-2-light: #f4f8fb; --cw-text-light: #0b1320; --cw-muted-light: #475569; --cw-border-light: #cbd5e1; --cw-accent-light: #0ea5a8; --cw-accent-contrast-light: #06292a; --cw-shadow-light: 0 8px 28px rgba(17, 24, 39, 0.08); /* Dark tokens */ --cw-bg-dark: #071014; --cw-panel-dark: #0b171d; --cw-panel-2-dark: #10212a; --cw-text-dark: #e6fbff; --cw-muted-dark: #b4d7de; --cw-border-dark: #2a434e; --cw-accent-dark: #5eead4; --cw-accent-contrast-dark: #06211f; --cw-shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.35); /* Semantic status colors */ --cw-info: #2563eb; --cw-success: #059669; --cw-warning: #d97706; --cw-danger: #dc2626; /* Active tokens (default = light) */ --cw-bg: var(--cw-bg-light); --cw-panel: var(--cw-panel-light); --cw-panel-2: var(--cw-panel-2-light); --cw-text: var(--cw-text-light); --cw-muted: var(--cw-muted-light); --cw-border: var(--cw-border-light); --cw-accent: var(--cw-accent-light); --cw-accent-contrast: var(--cw-accent-contrast-light); --cw-shadow: var(--cw-shadow-light); color: var(--cw-text); font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; font-size: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- 0a) Dark mode switching Front-end: inherit from Bootstrap's data-bs-theme on ancestor TinyMCE: explicit data-mode attribute on .lms-courseware itself -------------------------------------------------------------------------- */ /* Front-end dark mode (data-bs-theme on ) */ [data-bs-theme="dark"] .lms-courseware, /* TinyMCE iframe dark mode (data-mode on body.lms-courseware) */ .lms-courseware[data-mode="dark"] { --cw-bg: var(--cw-bg-dark); --cw-panel: var(--cw-panel-dark); --cw-panel-2: var(--cw-panel-2-dark); --cw-text: var(--cw-text-dark); --cw-muted: var(--cw-muted-dark); --cw-border: var(--cw-border-dark); --cw-accent: var(--cw-accent-dark); --cw-accent-contrast: var(--cw-accent-contrast-dark); --cw-shadow: var(--cw-shadow-dark); } /* Explicit light mode override */ .lms-courseware[data-mode="light"] { --cw-bg: var(--cw-bg-light); --cw-panel: var(--cw-panel-light); --cw-panel-2: var(--cw-panel-2-light); --cw-text: var(--cw-text-light); --cw-muted: var(--cw-muted-light); --cw-border: var(--cw-border-light); --cw-accent: var(--cw-accent-light); --cw-accent-contrast: var(--cw-accent-contrast-light); --cw-shadow: var(--cw-shadow-light); } /* -------------------------------------------------------------------------- 1) Theme palettes — add class on .lms-courseware to override tokens -------------------------------------------------------------------------- */ /* A) Executive Consulting — polished boardroom / Big-4 feel */ .lms-theme-executive { --cw-bg-light: #ffffff; --cw-panel-light: #ffffff; --cw-panel-2-light: #f5f7fb; --cw-text-light: #0f172a; --cw-muted-light: #475569; --cw-border-light: #dbe3ee; --cw-accent-light: #0b5cab; --cw-accent-contrast-light: #ffffff; --cw-bg-dark: #0a1220; --cw-panel-dark: #101a2c; --cw-panel-2-dark: #16233a; --cw-text-dark: #e5edf8; --cw-muted-dark: #b8c7dd; --cw-border-dark: #2b3a52; --cw-accent-dark: #7fb9ff; --cw-accent-contrast-dark: #08101d; } /* B) Boutique Editorial — premium, warm, crafted */ .lms-theme-boutique { --cw-bg-light: #fffdf8; --cw-panel-light: #fffefb; --cw-panel-2-light: #faf6ef; --cw-text-light: #2a211a; --cw-muted-light: #6b5b4d; --cw-border-light: #e9dfd2; --cw-accent-light: #8c5a2b; --cw-accent-contrast-light: #fffaf4; --cw-bg-dark: #17120f; --cw-panel-dark: #201915; --cw-panel-2-dark: #2a221c; --cw-text-dark: #f7efe6; --cw-muted-dark: #dcccbc; --cw-border-dark: #4a3b31; --cw-accent-dark: #efb17a; --cw-accent-contrast-dark: #20160e; } /* C) Enterprise Blueprint — Fortune 500 / platform docs */ .lms-theme-enterprise { --cw-bg-light: #f8fafc; --cw-panel-light: #ffffff; --cw-panel-2-light: #f1f5f9; --cw-text-light: #0f172a; --cw-muted-light: #475569; --cw-border-light: #cbd5e1; --cw-accent-light: #0369a1; --cw-accent-contrast-light: #ffffff; --cw-bg-dark: #020617; --cw-panel-dark: #0f172a; --cw-panel-2-dark: #111827; --cw-text-dark: #e2e8f0; --cw-muted-dark: #cbd5e1; --cw-border-dark: #334155; --cw-accent-dark: #38bdf8; --cw-accent-contrast-dark: #06263a; } /* D) Academy Focus — training-first, engaging, student-friendly */ .lms-theme-academy { --cw-bg-light: #ffffff; --cw-panel-light: #ffffff; --cw-panel-2-light: #f7faff; --cw-text-light: #111827; --cw-muted-light: #4b5563; --cw-border-light: #d6e4ff; --cw-accent-light: #4f46e5; --cw-accent-contrast-light: #ffffff; --cw-bg-dark: #0f1020; --cw-panel-dark: #15172b; --cw-panel-2-dark: #1d2138; --cw-text-dark: #eef2ff; --cw-muted-dark: #c7d2fe; --cw-border-dark: #3a3f66; --cw-accent-dark: #a5b4fc; --cw-accent-contrast-dark: #17172b; } /* E) Technical Lab — cyber / KQL / code-heavy (this is also the default) */ .lms-theme-technical { --cw-bg-light: #fbfdff; --cw-panel-light: #ffffff; --cw-panel-2-light: #f4f8fb; --cw-text-light: #0b1320; --cw-muted-light: #475569; --cw-border-light: #cbd5e1; --cw-accent-light: #0ea5a8; --cw-accent-contrast-light: #06292a; --cw-bg-dark: #071014; --cw-panel-dark: #0b171d; --cw-panel-2-dark: #10212a; --cw-text-dark: #e6fbff; --cw-muted-dark: #b4d7de; --cw-border-dark: #2a434e; --cw-accent-dark: #5eead4; --cw-accent-contrast-dark: #06211f; } /* -------------------------------------------------------------------------- 2) Base typography -------------------------------------------------------------------------- */ .lms-courseware *, .lms-courseware *::before, .lms-courseware *::after { box-sizing: border-box; } .lms-courseware h1, .lms-courseware h2, .lms-courseware h3, .lms-courseware h4, .lms-courseware h5, .lms-courseware h6 { color: var(--cw-text); line-height: 1.25; margin: 1.2em 0 0.45em; font-weight: 700; letter-spacing: -0.015em; } .lms-courseware h1 { font-size: 2rem; border-bottom: 2px solid var(--cw-border); padding-bottom: 0.4rem; } .lms-courseware h2 { font-size: 1.5rem; border-left: 4px solid var(--cw-accent); padding-left: 0.6rem; } .lms-courseware h3 { font-size: 1.2rem; } .lms-courseware h4 { font-size: 1.05rem; } .lms-courseware p, .lms-courseware li { color: var(--cw-text); } .lms-courseware p { margin: 0.6rem 0 0.95rem; } .lms-courseware .cw-lead { font-size: 1.08rem; color: var(--cw-muted); margin-top: 0.2rem; } .lms-courseware .cw-muted { color: var(--cw-muted); } .lms-courseware a { color: var(--cw-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .lms-courseware a:hover { opacity: 0.85; } .lms-courseware ul, .lms-courseware ol { margin: 0.4rem 0 1rem 1.25rem; padding: 0; } .lms-courseware li + li { margin-top: 0.25rem; } .lms-courseware hr { border: none; border-top: 1px solid var(--cw-border); margin: 1.2rem 0; } .lms-courseware img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--cw-border); } .lms-courseware blockquote { margin: 1rem 0; border-left: 4px solid var(--cw-border); padding: 0.35rem 0 0.35rem 0.85rem; color: var(--cw-muted); background: transparent; } /* -------------------------------------------------------------------------- 3) Code / technical content (KQL, PowerShell, JSON, etc.) -------------------------------------------------------------------------- */ .lms-courseware code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.92em; background: var(--cw-panel-2); border: 1px solid var(--cw-border); border-radius: 6px; padding: 0.08rem 0.35rem; } .lms-courseware pre { background: var(--cw-panel-2); color: var(--cw-text); border: 1px solid var(--cw-border); border-radius: 12px; padding: 0.9rem 1rem; overflow: auto; box-shadow: var(--cw-shadow); margin: 0.9rem 0 1rem; } .lms-courseware pre code { background: transparent; border: none; padding: 0; border-radius: 0; font-size: 0.9rem; line-height: 1.55; } /* -------------------------------------------------------------------------- 4) Tables -------------------------------------------------------------------------- */ .lms-courseware table { width: 100%; border-collapse: collapse; border: 1px solid var(--cw-border); margin: 1rem 0 1.15rem; background: var(--cw-panel); border-radius: 12px; overflow: hidden; box-shadow: var(--cw-shadow); } .lms-courseware th, .lms-courseware td { border-bottom: 1px solid var(--cw-border); padding: 0.65rem 0.75rem; text-align: left; vertical-align: top; } .lms-courseware th { background: var(--cw-panel-2); color: var(--cw-text); font-weight: 700; } .lms-courseware tr:last-child td { border-bottom: none; } /* -------------------------------------------------------------------------- 5) Semantic content blocks -------------------------------------------------------------------------- */ /* --- Card (generic container) --- */ .lms-courseware .cw-card { background: var(--cw-panel); border: 1px solid var(--cw-border); border-radius: 14px; padding: 0.95rem 1rem; margin: 0.9rem 0; box-shadow: var(--cw-shadow); } .lms-courseware .cw-card h3, .lms-courseware .cw-card h4 { margin-top: 0.1rem; } /* --- Callout (info / success / warning / danger) --- */ .lms-courseware .cw-callout { border: 1px solid var(--cw-border); border-left: 5px solid var(--cw-accent); background: var(--cw-panel-2); border-radius: 12px; padding: 0.85rem 0.9rem; margin: 0.9rem 0; } .lms-courseware .cw-callout > :first-child { margin-top: 0; } .lms-courseware .cw-callout > :last-child { margin-bottom: 0; } .lms-courseware .cw-callout--info { border-left-color: var(--cw-info); } .lms-courseware .cw-callout--success { border-left-color: var(--cw-success); } .lms-courseware .cw-callout--warning { border-left-color: var(--cw-warning); } .lms-courseware .cw-callout--danger { border-left-color: var(--cw-danger); } /* --- Objectives box --- */ .lms-courseware .cw-objectives { border: 1px solid var(--cw-border); background: var(--cw-panel); border-radius: 14px; padding: 0.9rem 1rem; margin: 1rem 0; box-shadow: var(--cw-shadow); } .lms-courseware .cw-objectives .cw-title { display: inline-block; font-weight: 700; color: var(--cw-accent); margin-bottom: 0.4rem; } .lms-courseware .cw-objectives ul { margin-top: 0.2rem; } /* --- Numbered steps --- */ .lms-courseware .cw-steps { counter-reset: cw-step; list-style: none; margin: 0.9rem 0; padding: 0; } .lms-courseware .cw-steps li { counter-increment: cw-step; display: grid; grid-template-columns: 2rem 1fr; gap: 0.7rem; align-items: start; background: var(--cw-panel); border: 1px solid var(--cw-border); border-radius: 12px; padding: 0.65rem 0.75rem; margin-bottom: 0.55rem; } .lms-courseware .cw-steps li::before { content: counter(cw-step); width: 1.7rem; height: 1.7rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--cw-accent); color: var(--cw-accent-contrast); font-weight: 700; font-size: 0.85rem; margin-top: 0.05rem; } /* --- KPI grid --- */ .lms-courseware .cw-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0.9rem 0 1rem; } .lms-courseware .cw-kpi { background: var(--cw-panel); border: 1px solid var(--cw-border); border-radius: 14px; padding: 0.75rem 0.85rem; box-shadow: var(--cw-shadow); } .lms-courseware .cw-kpi .cw-kpi-label { display: block; color: var(--cw-muted); font-size: 0.82rem; margin-bottom: 0.15rem; } .lms-courseware .cw-kpi .cw-kpi-value { display: block; font-size: 1.2rem; font-weight: 700; color: var(--cw-text); } /* --- Chip / tag --- */ .lms-courseware .cw-chip { display: inline-block; border: 1px solid var(--cw-border); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.8rem; color: var(--cw-muted); background: var(--cw-panel-2); margin-right: 0.35rem; margin-bottom: 0.35rem; } /* --- Quiz block --- */ .lms-courseware .cw-quiz { background: var(--cw-panel); border: 1px solid var(--cw-border); border-top: 4px solid var(--cw-accent); border-radius: 14px; padding: 0.95rem 1rem; margin: 1rem 0; box-shadow: var(--cw-shadow); } .lms-courseware .cw-quiz .cw-quiz-title { font-weight: 700; margin-bottom: 0.35rem; color: var(--cw-text); } /* --- Lab / hands-on block --- */ .lms-courseware .cw-lab { background: var(--cw-panel); border: 1px solid var(--cw-border); border-left: 5px solid var(--cw-accent); border-radius: 14px; padding: 0.95rem 1rem; margin: 1rem 0; box-shadow: var(--cw-shadow); } .lms-courseware .cw-lab .cw-lab-title { font-weight: 700; margin-bottom: 0.35rem; color: var(--cw-text); } /* --- Report metadata block --- */ .lms-courseware .cw-report-meta { background: var(--cw-panel); border: 1px solid var(--cw-border); border-radius: 14px; padding: 0.95rem 1rem; margin: 1rem 0; box-shadow: var(--cw-shadow); } .lms-courseware .cw-report-meta .cw-report-title { font-weight: 700; margin-bottom: 0.35rem; color: var(--cw-text); } /* -------------------------------------------------------------------------- 5b) Accordion (TinyMCE
/ ) -------------------------------------------------------------------------- */ .lms-courseware details.mce-accordion { background: var(--cw-panel); border: 1px solid var(--cw-border); border-radius: 12px; margin: 0.9rem 0; box-shadow: var(--cw-shadow); overflow: hidden; } .lms-courseware details.mce-accordion summary { padding: 0.7rem 0.9rem; font-weight: 700; color: var(--cw-text); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; background: var(--cw-panel-2); border-bottom: 1px solid transparent; } .lms-courseware details.mce-accordion[open] summary { border-bottom-color: var(--cw-border); } .lms-courseware details.mce-accordion summary::before { content: '\25B6'; font-size: 0.7em; color: var(--cw-accent); transition: transform 0.15s ease; flex-shrink: 0; } .lms-courseware details.mce-accordion[open] summary::before { transform: rotate(90deg); } .lms-courseware details.mce-accordion summary::-webkit-details-marker { display: none; } .lms-courseware details.mce-accordion > *:not(summary) { padding: 0.75rem 0.9rem; } /* -------------------------------------------------------------------------- 6) Layout helpers -------------------------------------------------------------------------- */ .lms-courseware .cw-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin: 0.9rem 0; } .lms-courseware .cw-center { text-align: center; } .lms-courseware .cw-break-avoid { break-inside: avoid; page-break-inside: avoid; } /* Hidden during print — actual rule in lms-courseware-print.css */ .lms-courseware .cw-no-print {} /* -------------------------------------------------------------------------- 7) Theme-aware images (light/dark screenshot pairs) -------------------------------------------------------------------------- */ /* Front-end: follow data-bs-theme from ancestor */ [data-bs-theme="dark"] .lms-courseware .theme-img-light, [data-bs-theme="light"] .lms-courseware .theme-img-dark { display: none !important; } /* TinyMCE iframe: follow data-mode on .lms-courseware */ .lms-courseware[data-mode="dark"] .theme-img-light, .lms-courseware[data-mode="light"] .theme-img-dark { display: none !important; } /* -------------------------------------------------------------------------- 8) Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .lms-courseware { font-size: 15px; } .lms-courseware .cw-kpi-grid { grid-template-columns: 1fr; } .lms-courseware .cw-two-col { grid-template-columns: 1fr; } .lms-courseware table { display: block; overflow-x: auto; white-space: nowrap; } }