diff --git a/src/index.css b/src/index.css index cf3caea1..e9539472 100644 --- a/src/index.css +++ b/src/index.css @@ -90,16 +90,29 @@ body.lotus-transparent[data-background="gradient"]::before { display: none !important; } +/* [cinny #43] lotusHostControls=1: the host renders its own call bar, so EC's +footer is hidden but stays in the DOM and in layout-independent position. */ +body.lotus-host-controls [data-testid="footer-container"] { + position: absolute !important; + visibility: hidden !important; +} + /* [lotus] Native Lotus/TDS theme, applied when lotusTheme=1, instead of the host injecting CSS into the iframe after load. Overrides Compound design tokens with Lotus values at the source so theming is complete and flash-free. Extend this block with the full Lotus token map from the design system; the canvas override below is a safe starting point that matches the Lotus dark surface. */ body.lotus-theme { - --cpd-color-bg-canvas-default: #0c0d10; --video-tile-background: var(--cpd-color-bg-subtle-secondary); } +/* Dark themes only: in the light theme this near-black canvas sat behind +light-theme (dark) text, e.g. the tile name tags were unreadable. */ +body.lotus-theme.cpd-theme-dark, +body.lotus-theme.cpd-theme-dark-hc { + --cpd-color-bg-canvas-default: #0c0d10; +} + /* [lotus #21] Subtle contrast guard for elements that sit directly on the transparent canvas (no opaque tile background behind them) when lotusTransparent is set: the host's real wallpaper is unknown to us, so a diff --git a/src/useTheme.ts b/src/useTheme.ts index 1e3a2e16..eee8699a 100644 --- a/src/useTheme.ts +++ b/src/useTheme.ts @@ -76,7 +76,17 @@ export const useTheme = (): void => { "lotusTheme anyway since the two flags are only meaningful together.", ); } - if (lotusTheme || lotusTransparent) + if (lotusTheme || lotusTransparent) { document.body.classList.add("lotus-theme"); + // [cinny #43] The frame's root colour scheme must match the host's, or + // the browser paints an opaque backdrop behind the transparent frame. + // (The host used to inject `:root { color-scheme }` for this.) + document.documentElement.style.colorScheme = theme; + } + // [cinny #43] The host draws its own call bar: hide EC's footer, but keep + // it in the DOM (the host still clicks its screenshare button on engines + // without Capability Delegation). Replaces the host's injected styles. + if (lotusFlag("lotusHostControls")) + document.body.classList.add("lotus-host-controls"); }, [previousTheme, requestedTheme]); };