mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-10 21:55:19 +00:00
Valere
db0f6837ce
The component built and typechecked in the previous commit, but only because nothing had rendered it. Everything Element Call needs that `src/main.tsx` side-loads was missing from it. Its stylesheet: only main.tsx imported index.css, so the library build emitted CSS-module styles with every `--cpd-*` and `--font-size-*` unresolved. Split into base.css, which both the app and the component import, and the rules that are about owning a page, which only the app does. The split is a straight move — comment-stripped and sorted, the old file and the two new ones differ by exactly one line — and that line is the deliberate part: `.no-scroll-body` becomes `body.no-scroll-body`. Element Call adds that class to whatever it treats as its root, and since the root can now be a container, `position: fixed` would have taken that container out of the host's layout. Pinning the page is what it always meant. Its translations: `initializeElementCall` called `i18n.init` with neither resources nor a backend, so every key would have rendered as itself. English is bundled in. The app fetches locale files from URLs its own build emits, which a host serving the library from somewhere else could not resolve, so how a host picks a language is left open. And the types a host needs: `HostBridge` alone is not enough to implement `HostBridge` — `HostRequest`, `DeviceMuteState`, `DeviceMuteRequest` and `JoinCallData` all appear in its signatures, and `ConfigOptions` in `initializeElementCall`'s.
54 lines
1.6 KiB
CSS
54 lines
1.6 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.
|
|
*/
|
|
|
|
/* Styles for Element Call as a page of its own. The parts that apply wherever
|
|
Element Call is shown live in base.css; these are about owning the document,
|
|
and are not loaded when a host embeds Element Call as a component. */
|
|
|
|
@import url("./base.css");
|
|
|
|
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;
|
|
}
|
|
|
|
/* This prohibits the view to scroll for pages smaller than 122px in width
|
|
we use this for mobile pip webviews. Element Call adds this class to whatever
|
|
it treats as its root, but it is only ever the page that should be pinned like
|
|
this — done to a container inside a host application it would take that
|
|
container out of the host's layout — so the selector says so. */
|
|
body.no-scroll-body {
|
|
position: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#root > [data-overlay-container] {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|