/* ============================================================ Neutralise Snordian's H5P Themer palette. The Themer writes its colours as inline custom properties on — in the page AND inside every H5P iframe — so no stylesheet can outrank them. What it currently writes is not what its own settings hold: the stored option is a lavender theme, while the generated h5p-themer-config.js carries a purple ground (#5e13c9), a red CTA (#d54d4d) and green alternatives. That purple is what learners see behind every exercise. A custom property CAN be redefined on a descendant, and every H5P widget lives inside .h5p-content — true for div and iframe embeds alike, because the iframe's own carries the inline style and .h5p-content sits within it. So we re-declare the tokens here and descendants inherit ours instead. Values are H5P's own defaults (h5p-php-library/styles/h5p-theme-variables.css), except --h5p-theme-background, which is transparent so an exercise sits directly on the page rather than on a coloured slab. Only the 20 tokens the Themer sets DIFFERENTLY are listed; the other 13 it writes already equal H5P's defaults. Density is deliberately untouched — it is spacing, not palette, and changing it would move every H5P layout. This file reads --h5p-theme-spacing-* and --h5p-theme-feedback-* elsewhere; none of those is redeclared here, so nothing below depends on a value this block changes. ============================================================ */ .h5p-content { --h5p-theme-background: transparent; --h5p-theme-alternative-base: #F1F5FB; --h5p-theme-alternative-light: #F7F9FD; --h5p-theme-alternative-dark: #DBE5F5; --h5p-theme-alternative-darker: #C7D7EF; --h5p-theme-main-cta-base: #006FBF; --h5p-theme-main-cta-light: #007CD6; --h5p-theme-main-cta-dark: #005FA3; --h5p-theme-contrast-cta: #EBF7FF; --h5p-theme-contrast-cta-light: color-mix(in srgb, var(--h5p-theme-main-cta-base), transparent 90%); --h5p-theme-contrast-cta-white: #006FBF; /* H5P core declares no default for this one; it shadows main-cta-dark. */ --h5p-theme-contrast-cta-dark: #005FA3; --h5p-theme-secondary-cta-base: #E3E9F1; --h5p-theme-secondary-cta-light: #F5F7FA; --h5p-theme-secondary-cta-dark: #D3DCE9; --h5p-theme-secondary-contrast-cta: #202122; --h5p-theme-secondary-contrast-cta-hover: #EBF7FF; --h5p-theme-stroke-1: #DCDFFA; --h5p-theme-stroke-2: #EDEEFB; --h5p-theme-stroke-3: #E5E5E5; } /* ------------------------------------------------------------ Flatten the H5P Column box. H5P.Column paints a card around every column entry — `.h5p-column-box-container` in H5P.Column-1.20/styles/h5p-column.css:17 sets a 1px stroke, an 8px radius, a drop shadow, and a spacing-token margin and padding that the Themer's `density: large` resolves to 10.4px each. Stacked inside a lesson that already frames its own exercises, that reads as a box inside a box. Specificity 0,2,0 beats the library's 0,1,0, so this wins without `!important` and without depending on load order — h5pmods is appended after the aggregated library bundle today, but that is H5P's implementation detail, not a contract. The tokens themselves are deliberately NOT zeroed: `--h5p-theme-spacing-xs` and `--h5p-theme-stroke-1` are read by other rules, so setting them to 0 here would flatten far more than this box. ------------------------------------------------------------ */ .h5p-content .h5p-column-box-container { margin: 0; padding: 0; border: 0; box-shadow: none; } .h5p-theme .joubel-speech-bubble-inner{border-radius:20px!important;} /* ========================================================= H5P BLANKS / FILL IN THE GAPS — END ========================================================= */ /* ========================================================= H5P Single Choice Set - START Modern LMS / Duolingo-inspired UI Scoped to the result slide only ========================================================= */ .h5p-question { background: rgb(255 255 255 / 0%)!important;} .h5p-theme .h5p-question-evaluation-container .h5p-question-buttons.h5p-question-visible { margin: 0 auto!important; }