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: 1fr auto 1fr;
  grid-template-areas: ". buttons layout";
  align-items: center;
  gap: var(--cpd-space-3x);
  padding: var(--cpd-space-10x) var(--cpd-space-6x);
  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;
  pointer-events: none;
}

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

.settingsLogoContainer {
  display: flex;
  gap: var(--cpd-space-4x);
  flex-direction: row;
}

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

/*First hide the logo*/
@media (max-width: 660px) {
  .logo {
    display: none;
  }
}

.settingForButtonsBar {
  /*
  never show the settings button for the buttons bar
  show the settings button in the Buttons bar on width < 500px
  */
  display: none;
}
.settingForBottomLeftCorner {
  /*
  show the left corener by default (will be hidden on width < 500px)
  */
  display: inherit;
}

/*
With the logo hidden >500px is enough space to show overflow, buttons, layout.
Once we exceed 500 we hide everything except the buttons.
*/
@media (max-width: 500px) {
  .footer {
    grid-template-areas: "buttons buttons buttons";
  }

  /*.settingsLogoContainer {
    display: none;
  }*/

  .layout {
    display: none !important;
  }
}

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

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

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

  /* PIP custom css */
  @media (max-height: 400px) {
    .shareScreen {
      display: flex;
    }
    .footer {
      padding-block-start: var(--cpd-space-3x);
      padding-block-end: var(--cpd-space-2x);
    }
  }
}

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

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