/* * Totem brand theme for Frappe LMS — slimmed to load-bearing rules * only. The single goal is making the LMS Vue SPA at /lms look like * Totem when iframed inside earthbind: * * 1. Remap the Tailwind --blue-* design tokens so every LMS * utility class resolves to Totem navy instead of LMS bright * blue (#0289F7). * 2. Hide LMS / portal chrome when embedded — Totem's clr-header * is the only chrome we want around the iframe. * 3. Force light theme since Totem is light-only and the dark * LMS surfaces clash with the navy Totem shell. * * Anything else (Frappe Desk theming, Bootstrap-era portal styling, * legacy navbar/footer overrides) was removed because nothing in * the current iframe-embed flow renders those surfaces. */ :root { --totem-navy: #203166; --totem-navy-hover: #182648; } /* ---------- 1. LMS Vue SPA token remap ---------- */ /* * The LMS frontend (apps/lms/frontend, Vue + Tailwind) compiles its * utility classes against semantic CSS custom properties at :root. * Overriding the vars here recolors every LMS component (buttons, * links, badges, focus rings, etc.) without having to know which * utility classes get used at runtime. */ :root, html[data-theme], html[data-theme="light"], html[data-theme="dark"] { --blue-50: #F2F4FA !important; --blue-100: #E1E4ED !important; --blue-200: #B8C0D5 !important; --blue-300: #8B96B8 !important; --blue-400: #5B6991 !important; --blue-500: #203166 !important; /* Totem primary — was #0289F7 */ --blue-600: #182648 !important; /* hover — was #007BE0 */ --blue-700: #142039 !important; --blue-800: #101A30 !important; --blue-900: #0C1424 !important; --surface-blue-1: #F2F4FA !important; --surface-blue-2: #E1E4ED !important; --surface-blue-3: #203166 !important; /* filled-button bg */ --outline-blue-1: #203166 !important; } /* * Tailwind ring colors compiled into the LMS bundle reference the * literal `rgb(2 137 247 / ...)` triplet rather than the --blue-500 * var, so we re-color focus rings explicitly. */ *:focus-visible { outline-color: var(--totem-navy) !important; --tw-ring-color: rgba(32, 49, 102, 0.5) !important; } /* ---------- 2. Embed-mode chrome hide ---------- */ /* * embed-detect.js sets `data-embedded="true"` on when loaded * inside an iframe. We use that to hide LMS's own chrome so only the * content area shows, with Totem's clr-header providing the wrapper. * * Standalone admin access (top-level navigation) leaves chrome * visible. */ /* Frappe legacy portal chrome — only visible during the brief flash * of the /login page before head_html auto-redirects to Cognito. */ html[data-embedded="true"] header.navbar, html[data-embedded="true"] nav.navbar, html[data-embedded="true"] .navbar-default, html[data-embedded="true"] .web-footer, html[data-embedded="true"] footer.web-footer { display: none !important; } /* ---------- 3. Force light theme ---------- */ /* * embed-detect.js sets `data-theme=light` at boot, but if any path * bypasses the script we explicitly remap the LMS dark-mode tokens * back to light. Otherwise dark surfaces leak through against the * light Totem shell. */ html[data-theme="dark"] { --surface-white: #FFFFFF !important; --surface-gray-1: #F8F8F8 !important; --surface-gray-2: #F3F3F3 !important; --surface-gray-3: #EDEDED !important; --surface-menu-bar: #F7F7F9 !important; --bg: #FFFFFF !important; color-scheme: light !important; }