mirror of
https://github.com/vector-im/element-call.git
synced 2026-05-10 10:24:44 +00:00
f093946a29
By adding viewport-fit=cover to the <meta name="viewport"> header, the page now requests to be displayed edge-to-edge across the entire screen. This gives us control over what we display around camera cut-outs and system navigation UI, if the user agent supports it. I then adjusted the styles of various UI elements to ensure that they still lie within the screen's safe area.
54 lines
1.0 KiB
CSS
54 lines
1.0 KiB
CSS
/*
|
|
Copyright 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.
|
|
*/
|
|
|
|
.fixed,
|
|
.scrolling {
|
|
block-size: 100%;
|
|
}
|
|
|
|
.scrolling {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.scrolling > .slot {
|
|
width: var(--width);
|
|
height: var(--height);
|
|
}
|
|
|
|
.fixed {
|
|
position: relative;
|
|
}
|
|
|
|
.fixed > .slot {
|
|
position: absolute;
|
|
inline-size: 404px;
|
|
block-size: 233px;
|
|
/* Ensure that spotlight tile lies within the safe area */
|
|
inset: 0 calc(env(safe-area-inset-right) + var(--cpd-space-3x)) 0
|
|
calc(env(safe-area-inset-left) + var(--cpd-space-3x));
|
|
}
|
|
|
|
.fixed > .slot[data-block-alignment="start"] {
|
|
inset-block-end: unset;
|
|
}
|
|
|
|
.fixed > .slot[data-block-alignment="end"] {
|
|
inset-block-start: unset;
|
|
}
|
|
|
|
.fixed > .slot[data-inline-alignment="start"] {
|
|
inset-inline-end: unset;
|
|
}
|
|
|
|
.fixed > .slot[data-inline-alignment="end"] {
|
|
inset-inline-start: unset;
|
|
}
|