mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-10 21:55:19 +00:00
Timo K.andClaude Fable 5.1
779ee7a008
The move from media queries to `@container element-call` queries left a few places still asking the viewport: the room header's compact size and the lobby's footer placement went through `useMediaQuery`, the lobby's video preview was `50vh` tall, the reaction picker was capped at `100vw`, and the content insets and the gradient background were sized from `100vw`/`100vh`. Embedded in a corner of a host's page, each of those answered for the page rather than the corner. `useRootSizeMatches` is `useMediaQuery` for the root element, built on the same `observeElementSize$` the layout uses; the lengths become container units. Container units resolve against the nearest query container, and there are others in the tree (the spotlight layouts, the media tiles), so base.css says when they may be used. jsdom gives the body no size at all, which would have every such query read as a tiny window; the test setup now gives it a desktop's, matching what the media query mock already answered. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
89 lines
1.9 KiB
CSS
89 lines
1.9 KiB
CSS
/*
|
|
Copyright 2022-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.
|
|
*/
|
|
|
|
.preview {
|
|
margin-left: var(--content-inset-left);
|
|
margin-right: var(--content-inset-right);
|
|
min-block-size: 0;
|
|
/* Half the height of Element Call's root, not of the viewport: embedded,
|
|
the two differ (see the note on container units in base.css) */
|
|
block-size: 50cqh;
|
|
aspect-ratio: 16 / 9;
|
|
max-width: 100%;
|
|
border-radius: var(--cpd-space-4x);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview > video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
background-color: var(--video-tile-background);
|
|
/* In FF if you add a transform: scale/translate/matrix filter on an element,
|
|
it'll ignore the parents' border-radius, so force back the radius to avoid UI glitch*/
|
|
border-radius: inherit;
|
|
}
|
|
|
|
video.mirror {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.preview .cameraStarting {
|
|
position: absolute;
|
|
top: var(--cpd-space-10x);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: var(--cpd-color-text-secondary);
|
|
}
|
|
|
|
.avatarContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--video-tile-background);
|
|
}
|
|
|
|
.buttonBar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: calc(30 * var(--cpd-space-1x));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--cpd-space-4x);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
var(--cpd-color-bg-canvas-default) 100%
|
|
);
|
|
}
|
|
|
|
@container element-call (max-width: 550px) {
|
|
.preview {
|
|
margin-inline: 0;
|
|
border-radius: 0;
|
|
block-size: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.buttonBar {
|
|
padding-left: var(--content-inset-left);
|
|
padding-right: var(--content-inset-right);
|
|
}
|
|
}
|