element-call/src/room/VideoPreview.module.css

/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/

.preview {
  margin-inline: var(--inline-content-inset);
  min-block-size: 0;
  block-size: 50vh;
  border-radius: var(--cpd-space-4x);
  position: relative;
  overflow: hidden;
}

.preview > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black;
  transform: scaleX(-1);
  background-color: var(--cpd-color-bg-subtle-primary);
}

.avatarContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--cpd-color-bg-subtle-secondary);
}

.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%
  );
}

@media (min-aspect-ratio: 1 / 1) {
  .preview > video {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 550px) {
  .preview {
    margin-inline: 0;
    border-radius: 0;
    block-size: 100%;
  }

  .buttonBar {
    padding-inline: var(--inline-content-inset);
  }
}