mirror of
https://github.com/vector-im/element-call.git
synced 2026-05-01 09:54:37 +00:00
7e39889f78
They were not properly being contained to where the MediaView is supposed to appear, causing them to all stack up on the first screen share in the spotlight tile.
203 lines
4.3 KiB
CSS
203 lines
4.3 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.
|
|
*/
|
|
|
|
.media {
|
|
container-name: mediaView;
|
|
container-type: size;
|
|
border-radius: var(--media-view-border-radius);
|
|
/*Add spacing for the hover boarder. Otherwise it might get clipped.*/
|
|
margin: var(--hover-space-margin);
|
|
display: grid;
|
|
grid-template-areas: "content";
|
|
place-items: stretch;
|
|
}
|
|
|
|
.media video {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
object-fit: contain;
|
|
background-color: var(--video-tile-background);
|
|
/* This transform is a no-op, but it forces Firefox to use a different
|
|
rendering path, one that actually clips the corners of <video> elements into
|
|
the intended rounded shape. We can remove this if Firefox stops being broken. */
|
|
transform: translate(0);
|
|
}
|
|
|
|
.media.mirror video {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.media[data-video-fit="cover"] video {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.media[data-video-fit="contain"] video {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.bg {
|
|
grid-area: content;
|
|
background-color: var(--video-tile-background);
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
border-radius: inherit;
|
|
contain: strict;
|
|
}
|
|
|
|
.avatar {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.translucent {
|
|
opacity: 50%;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
/* CSS makes us put a condition here, even though all we want to do is
|
|
unconditionally select the container so we can use cqmin units */
|
|
@container mediaView (width > 0) {
|
|
.avatar {
|
|
/* Half of the smallest dimension of the tile */
|
|
inline-size: 50cqmin;
|
|
block-size: 50cqmin;
|
|
}
|
|
}
|
|
|
|
.avatar > img {
|
|
/* To make avatars scale smoothly with their tiles during animations, we
|
|
override the styles set on the element */
|
|
inline-size: 100% !important;
|
|
block-size: 100% !important;
|
|
}
|
|
|
|
.fg {
|
|
grid-area: content;
|
|
--fg-inset: var(
|
|
--media-view-fg-inset,
|
|
calc(var(--media-view-border-radius) - var(--cpd-space-3x))
|
|
);
|
|
padding: var(--fg-inset);
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: 1fr auto;
|
|
grid-template-areas: "status reactions" "nameTag button";
|
|
gap: var(--cpd-space-1x);
|
|
place-items: start;
|
|
contain: strict;
|
|
}
|
|
|
|
.nameTag {
|
|
grid-area: nameTag;
|
|
place-self: end start;
|
|
padding: var(--cpd-space-1x);
|
|
padding-block: var(--cpd-space-1x);
|
|
color: var(--cpd-color-text-primary);
|
|
background-color: var(--cpd-color-bg-canvas-default);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: var(--cpd-radius-pill-effect);
|
|
user-select: none;
|
|
overflow: hidden;
|
|
box-shadow: var(--small-drop-shadow);
|
|
box-sizing: border-box;
|
|
max-inline-size: 100%;
|
|
}
|
|
|
|
.status {
|
|
grid-area: status;
|
|
color: var(--cpd-color-text-primary);
|
|
display: flex;
|
|
flex-wrap: none;
|
|
align-items: center;
|
|
gap: 3px;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
margin-block-start: calc(var(--cpd-space-3x) - var(--fg-inset));
|
|
margin-inline-start: calc(var(--cpd-space-4x) - var(--fg-inset));
|
|
}
|
|
|
|
.status svg {
|
|
color: var(--cpd-color-icon-tertiary);
|
|
}
|
|
|
|
.reactions {
|
|
grid-area: reactions;
|
|
place-self: start end;
|
|
display: flex;
|
|
gap: var(--cpd-space-1x);
|
|
}
|
|
|
|
.nameTag > svg,
|
|
.nameTag > span {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nameTag > .name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
padding-inline: var(--cpd-space-2x);
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.errorIcon {
|
|
display: block;
|
|
color: var(--cpd-color-icon-critical-primary);
|
|
}
|
|
|
|
.fg > button {
|
|
appearance: none;
|
|
border: none;
|
|
border-radius: var(--cpd-radius-pill-effect);
|
|
padding: var(--cpd-space-1x);
|
|
background: var(--cpd-color-bg-action-primary-rest);
|
|
box-shadow: var(--small-drop-shadow);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.15s,
|
|
background-color 0.1s;
|
|
}
|
|
|
|
.fg:has(:focus-visible) > button,
|
|
.fg > button[data-enabled="true"],
|
|
.fg > button[data-state="open"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover) {
|
|
.fg:hover > button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.fg > button:hover {
|
|
background: var(--cpd-color-bg-action-primary-hovered);
|
|
}
|
|
}
|
|
|
|
.fg > button:active {
|
|
background: var(--cpd-color-bg-action-primary-pressed);
|
|
}
|
|
|
|
.fg > button[data-state="open"] {
|
|
background: var(--cpd-color-bg-action-primary-pressed);
|
|
}
|
|
|
|
.fg > button > svg {
|
|
display: block;
|
|
color: var(--cpd-color-icon-on-solid-primary);
|
|
}
|
|
|
|
.fg > button:first-of-type {
|
|
grid-area: button;
|
|
place-self: end;
|
|
}
|