studio/element-call
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use a consistent background colour for video tiles and avatars (#2868)

Browse Source
This commit is contained in:
Hugh Nimmo-Smith
2024-12-05 13:26:31 +00:00
committed by GitHub
parent d09efa3cfe
commit 21b62dbd89
3 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/index.css
View File

@@ -47,6 +47,11 @@ layer(compound);
--background-gradient: url("graphics/backgroundGradient.svg"); --background-gradient: url("graphics/backgroundGradient.svg");
} }
:root,
[class*="cpd-theme-"] {
--video-tile-background: var(--cpd-color-bg-subtle-secondary);
}
.cpd-theme-dark { .cpd-theme-dark {
--cpd-color-border-accent: var(--cpd-color-green-1100); --cpd-color-border-accent: var(--cpd-color-green-1100);
--stopgap-color-on-solid-accent: var(--cpd-color-text-primary); --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);

5
src/room/VideoPreview.module.css
View File

@@ -18,8 +18,7 @@ Please see LICENSE in the repository root for full details.
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
background-color: black; background-color: var(--video-tile-background);
background-color: var(--cpd-color-bg-subtle-primary);
} }
video.mirror { video.mirror {
@@ -35,7 +34,7 @@ video.mirror {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--cpd-color-bg-subtle-secondary); background-color: var(--video-tile-background);
} }
.buttonBar { .buttonBar {

4
src/tile/MediaView.module.css
View File

@@ -15,7 +15,7 @@ Please see LICENSE in the repository root for full details.
inline-size: 100%; inline-size: 100%;
block-size: 100%; block-size: 100%;
object-fit: contain; object-fit: contain;
background-color: var(--cpd-color-bg-subtle-primary); background-color: var(--video-tile-background);
/* This transform is a no-op, but it forces Firefox to use a different /* 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 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. */ the intended rounded shape. We can remove this if Firefox stops being broken. */
@@ -35,7 +35,7 @@ Please see LICENSE in the repository root for full details.
} }
.bg { .bg {
background-color: var(--cpd-color-bg-subtle-secondary); background-color: var(--video-tile-background);
inline-size: 100%; inline-size: 100%;
block-size: 100%; block-size: 100%;
border-radius: inherit; border-radius: inherit;