Lotus CIandClaude Opus 5.5
0f93368a7e
Firefox, Safari and WebKitGTK have no Capability Delegation, so the host
can't start a share from its call bar: getDisplayMedia needs the click in
this frame. Until now the host clicked EC's hidden footer button through
the DOM, which only works while the frame is same-origin.
With lotusHostControls + lotusFrameScreenshare the fork now shows EC's own
screenshare button (floating bottom-right, footer still hidden), so the
click is native. controls_state reports frameScreenshare so the host hides
its own button. New toWidget io.lotus.set_frame_screenshare { visible }
lets the host hide it while the room's call policy forbids screensharing
(never while a share is live, so it can still be stopped).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
286 lines
8.3 KiB
CSS
286 lines
8.3 KiB
CSS
/*
|
|
Copyright 2021-2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
@layer normalize, compound-legacy, compound;
|
|
|
|
@import url("@fontsource/inter/400.css");
|
|
@import url("@fontsource/inter/500.css");
|
|
@import url("@fontsource/inter/600.css");
|
|
@import url("@fontsource/inter/700.css");
|
|
@import url("@fontsource/inconsolata/400.css");
|
|
@import url("@fontsource/inconsolata/700.css");
|
|
|
|
@import url("normalize.css/normalize.css") layer(normalize);
|
|
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
|
|
@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
|
|
|
|
:root {
|
|
--font-scale: 1;
|
|
--font-size-micro: calc(10px * var(--font-scale));
|
|
--font-size-caption: calc(12px * var(--font-scale));
|
|
--font-size-body: calc(15px * var(--font-scale));
|
|
--font-size-subtitle: calc(18px * var(--font-scale));
|
|
--font-size-title: calc(24px * var(--font-scale));
|
|
--font-size-headline: calc(32px * var(--font-scale));
|
|
|
|
--cpd-color-border-accent: var(--cpd-color-green-800);
|
|
/* The distance to inset non-full-width content from the edge of the window
|
|
along the inline axis. This ramps up from 16px for typical mobile windows, to
|
|
96px for typical desktop windows, and accounts for the safe area. */
|
|
--content-inset-left: calc(
|
|
env(safe-area-inset-left) +
|
|
min(
|
|
var(--cpd-space-24x),
|
|
max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
|
|
)
|
|
);
|
|
--content-inset-right: calc(
|
|
env(safe-area-inset-right) +
|
|
min(
|
|
var(--cpd-space-24x),
|
|
max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
|
|
)
|
|
);
|
|
--small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
|
|
--big-drop-shadow: 0px 0px 24px 0px #1b1d221a;
|
|
--subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
|
|
|
--call-view-overlay-layer: 1;
|
|
--call-view-header-footer-layer: 2;
|
|
}
|
|
|
|
:root,
|
|
[class*="cpd-theme-"] {
|
|
--video-tile-background: var(--cpd-color-bg-subtle-secondary);
|
|
}
|
|
|
|
.cpd-theme-dark {
|
|
--cpd-color-border-accent: var(--cpd-color-green-1100);
|
|
--stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
|
|
--stopgap-background-85: rgba(16, 19, 23, 0.85);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--cpd-color-bg-canvas-default);
|
|
color: var(--cpd-color-text-primary);
|
|
color-scheme: dark;
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* [lotus] When embedded in the Lotus host with lotusTransparent=1, make the
|
|
app background transparent so the host's wallpaper shows through natively —
|
|
replacing the host's injected `html, body { background: none !important }`
|
|
override. */
|
|
body.lotus-transparent,
|
|
body.lotus-transparent #root {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* [lotus] Upstream v0.25.0 added a full-viewport gradient painted on
|
|
`body[data-background="gradient"]::before`. It sits above the transparent body
|
|
and would hide the host's wallpaper, so suppress it in transparent mode. */
|
|
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 (kept in the DOM but out of the layout flow). */
|
|
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 {
|
|
--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
|
|
light text-shadow/backdrop keeps name tags and header/footer controls legible
|
|
regardless of what's behind them. Kept behind `.lotus-transparent` so upstream
|
|
(non-Lotus) layouts are completely untouched. Hooked off stable data-testid/
|
|
element selectors rather than CSS-module class names, since those are hashed
|
|
per-build and owned by their own component stylesheets. */
|
|
body.lotus-transparent [data-testid="name_tag"],
|
|
body.lotus-transparent header,
|
|
body.lotus-transparent [data-testid="footer-container"] {
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
body.lotus-transparent header,
|
|
body.lotus-transparent [data-testid="footer-container"] {
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
@media (min-height: 330px) {
|
|
body[data-background="gradient"]::before {
|
|
content: "";
|
|
position: fixed;
|
|
/* Chromium abruptly fades our images to fully transparent at the edge of
|
|
the element. If we just make the element a little bigger than the viewport,
|
|
this is no longer visible. */
|
|
inset: -20px;
|
|
background-image: url("graphics/mobile-gradient.png");
|
|
background-size: 1400px 305px;
|
|
background-position: bottom;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
body[data-background="gradient"][data-platform="desktop"]::before {
|
|
background-image: url("graphics/desktop-gradient.png");
|
|
background-size: max(1440px, 100vw) max(1440px, 100vh);
|
|
background-position: center;
|
|
}
|
|
}
|
|
|
|
/* This prohibits the view to scroll for pages smaller than 122px in width
|
|
we use this for mobile pip webviews */
|
|
.no-scroll-body {
|
|
position: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
/* We use this to not render the page at all until we know the theme.*/
|
|
.no-theme {
|
|
opacity: 0;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
/* We use !important here to override vaul drawers, which have a side effect
|
|
of setting height: auto; on the body element and messing up our layouts */
|
|
height: 100% !important;
|
|
}
|
|
|
|
#root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* The root should be a separate stacking context so that portalled elements
|
|
like modals and menus always appear over top of it */
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* On Android and iOS, prefer native system fonts. The global.css file of
|
|
Compound Web is where these variables ultimately get consumed to set the page's
|
|
font-family. */
|
|
body[data-platform="android"] {
|
|
--cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif;
|
|
}
|
|
|
|
body[data-platform="ios"] {
|
|
--cpd-font-family-sans:
|
|
-apple-system, BlinkMacSystemFont, "Inter", sans-serif;
|
|
}
|
|
|
|
@layer compound-legacy {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
a {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Headline Semi Bold */
|
|
h1 {
|
|
font-weight: 600;
|
|
font-size: var(--font-size-headline);
|
|
}
|
|
|
|
/* Title */
|
|
h2 {
|
|
font-weight: 600;
|
|
font-size: var(--font-size-title);
|
|
}
|
|
|
|
/* Subtitle */
|
|
h3 {
|
|
font-weight: 600;
|
|
font-size: var(--font-size-subtitle);
|
|
}
|
|
|
|
/* Body Semi Bold */
|
|
h4 {
|
|
font-weight: 600;
|
|
font-size: var(--font-size-body);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Body */
|
|
p {
|
|
font-size: var(--font-size-body);
|
|
line-height: var(--font-size-title);
|
|
}
|
|
|
|
hr {
|
|
width: calc(100% - 24px);
|
|
border: none;
|
|
border-top: 1px solid var(--cpd-color-border-interactive-secondary);
|
|
color: var(--cpd-color-border-interactive-secondary);
|
|
overflow: visible;
|
|
text-align: center;
|
|
height: 5px;
|
|
font-weight: 600;
|
|
font-size: var(--font-size-body);
|
|
line-height: 24px;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
summary {
|
|
font-size: var(--font-size-body);
|
|
}
|
|
|
|
details > :not(summary) {
|
|
margin-left: var(--font-size-body);
|
|
}
|
|
|
|
details[open] > summary {
|
|
margin-bottom: var(--font-size-body);
|
|
}
|
|
}
|
|
|
|
#root > [data-overlay-container] {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
/* normalize.css sets the focus rings on buttons in Firefox to an unusual custom
|
|
outline, which is inconsistent with our other components and is not sufficiently
|
|
visible to be accessible. This resets it back to 'auto'. */
|
|
button:-moz-focusring,
|
|
[type="button"]:-moz-focusring,
|
|
[type="reset"]:-moz-focusring,
|
|
[type="submit"]:-moz-focusring {
|
|
outline: auto;
|
|
}
|