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

/*
Copyright 2021-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.
*/

.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: var(--call-view-header-footer-layer);
  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: var(--call-view-header-footer-layer);
  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,
  .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;
}