element-call/src/tile/MediaView.module.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);
  transition: padding 0.3s;
  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;
}

@media (prefers-reduced-motion) {
  .fg {
    transition: none;
  }
}

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