signal-desktop/stylesheets/components/CallingLobby.scss

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.module-CallingLobby {
  &__local-preview {
    position: absolute;
    z-index: variables.$z-index-negative;
    top: 28px;
    -webkit-app-region: no-drag;

    &--camera-is-on {
      @include mixins.lonely-local-video-preview;
      width: auto;
      height: 100%;
      max-height: calc(100% - 140px);
      opacity: 0.6;

      // Border radius should clip children
      overflow: hidden;
    }

    &--camera-is-on video {
      width: auto;
      height: 100%;
    }

    &--camera-is-off {
      @include mixins.lonely-local-video-preview;
      width: auto;
      height: 100%;
      max-height: calc(100% - 140px);
      aspect-ratio: 4 / 3;

      .module-calling__background--blur::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background: variables.$color-black-alpha-40;
      }
    }
  }

  &__camera-is-off {
    &--visible {
      opacity: 1;
    }

    &--invisible {
      opacity: 0;
    }
  }
}

.CallingLobby__CallLinkNotice {
  @include mixins.font-caption;
  display: flex;
  padding-block: 12px;
  padding-inline: 18px;
  margin-block-end: 32px;
  width: 340px;
  background: variables.$color-gray-78;
  color: variables.$color-white;
  border-radius: 10px;
  align-items: center;
  text-align: center;
}

.CallingLobby__CallLinkNotice--join-request-pending {
  @include mixins.font-body-1;
  width: auto;
}

.CallingLobby__CallLinkJoinRequestPendingSpinner {
  margin-inline-end: 8px;
}

.CallingLobby__Footer {
  display: flex;
  width: 100%;
  justify-content: center;
}