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

/*
Copyright 2021-2024 New Vector Ltd.

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

.inRoom {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  position: sticky;
  flex-shrink: 0;
  inset-block-start: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    var(--cpd-color-bg-canvas-default) 100%
  );
}

.header.filler {
  block-size: var(--cpd-space-6x);
  background: none;
}

.footer {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, var(--inline-content-inset)) 1fr auto 1fr minmax(
      0,
      var(--inline-content-inset)
    );
  grid-template-areas: ". logo buttons layout .";
  align-items: center;
  gap: var(--cpd-space-3x);
  padding-block: var(--cpd-space-10x);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    var(--cpd-color-bg-canvas-default) 100%
  );
}

.footer.hidden {
  display: none;
}

.footer.overlay {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  opacity: 1;
  transition: opacity 0.15s;
}

.footer.overlay.hidden {
  display: grid;
  opacity: 0;
}

.footer.overlay:has(:focus-visible) {
  opacity: 1;
  pointer-events: initial;
}

.logo {
  grid-area: logo;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--cpd-space-2x);
  padding-inline-start: var(--cpd-space-1x);
}

.buttons {
  grid-area: buttons;
  justify-self: center;
  display: flex;
  gap: var(--cpd-space-3x);
}

.layout {
  grid-area: layout;
  justify-self: end;
}

@media (max-width: 660px) {
  .footer {
    grid-template-areas: ". buttons buttons buttons .";
  }

  .logo {
    display: none;
  }

  .layout {
    display: none !important;
  }
}

@media (max-width: 370px) {
  .raiseHand {
    display: none;
  }
}

@media (max-width: 340px) {
  .invite,
  .switchCamera,
  .shareScreen {
    display: none;
  }

  @media (max-height: 400px) {
    .footer {
      display: none;
    }
  }
}

@media (max-height: 400px) {
  .footer {
    padding-block: var(--cpd-space-4x);
  }
}

@media (max-height: 800px) {
  .footer {
    padding-block: var(--cpd-space-8x);
  }
}

@media (min-width: 800px) {
  .buttons {
    gap: var(--cpd-space-4x);
  }
}

.fixedGrid {
  position: absolute;
  inline-size: 100%;
  align-self: center;
}

.scrollingGrid {
  position: relative;
  flex-grow: 1;
  inline-size: 100%;
  align-self: center;
}

.fixedGrid,
.scrollingGrid {
  /* Disable pointer events so the overlay doesn't block interaction with
  elements behind it */
  pointer-events: none;
}

.fixedGrid > :not(:first-child),
.scrollingGrid > :not(:first-child) {
  pointer-events: initial;
}

.tile {
  position: absolute;
  inset-block-start: 0;
}

.tile.maximised {
  position: relative;
  flex-grow: 1;
}

.floatingReaction {
  position: relative;
  display: inline;
  z-index: 2;
  font-size: 32pt;
  /* Reactions are "active" for 3 seconds (as per REACTION_ACTIVE_TIME_MS), give a bit more time for it to fade out. */
  animation-duration: 4s;
  animation-name: reaction-up;
  width: fit-content;
  pointer-events: none;
}

@keyframes reaction-up {
  from {
    opacity: 1;
    translate: 100vw 0;
    scale: 200%;
  }

  to {
    opacity: 0;
    translate: 100vw -100vh;
    scale: 100%;
  }
}

@media (prefers-reduced-motion) {
  @keyframes reaction-up-reduced {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .floatingReaction {
    font-size: 48pt;
    animation-name: reaction-up-reduced;
    top: calc(-50vh + (48pt / 2));
    left: calc(50vw - (48pt / 2)) !important;
  }
}