signal-desktop/stylesheets/components/CallingStatusIndicator.scss

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

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

.CallingStatusIndicator {
  $size: 28px;

  display: flex;
  align-items: center;
  justify-content: center;
  height: $size;
  min-width: $size;
  width: $size;
  z-index: variables.$z-index-base;
  border-radius: calc($size / 2);
  background: rgba(variables.$color-gray-80, 0.7);

  &::after {
    content: '';
    $icon-size: 16px;
    width: $icon-size;
    height: $icon-size;
  }
}

.CallingStatusIndicator--HandRaised {
  background: variables.$color-white;
}

.CallingStatusIndicator--HandRaised::after {
  @include mixins.color-svg(
    '../images/icons/v3/raise_hand/raise_hand-light.svg',
    variables.$color-black
  );
}

.CallingStatusIndicator--Video::after {
  @include mixins.color-svg(
    '../images/icons/v3/video/video-slash-fill-light.svg',
    variables.$color-white
  );
}

.module-ongoing-call__footer__local-preview .CallingStatusIndicator {
  position: absolute;
  z-index: variables.$z-index-base;
}

.module-ongoing-call__footer__local-preview .CallingStatusIndicator--Video {
  top: 6px;
  inset-inline-start: 6px;
}

.module-ongoing-call__footer__local-preview
  .CallingStatusIndicator--HandRaised {
  bottom: 6px;
  inset-inline-start: 6px;
}

.module-ongoing-call__participants__grid
  .module-ongoing-call__group-call-remote-participant--hand-raised
  .CallingStatusIndicator--HandRaised {
  margin-block: 1px;
  margin-inline-start: 5px;
}