tweb-i2p/src/scss/partials/popups/_call.scss

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.popup-call {
  $parent: ".popup";

  #{$parent} {
    &-header {
      width: 100%;
      justify-content: space-between;
    }

    &-title {
      flex: 1 1 auto;
    }
  }
}

.call {
  width: 100%;
  height: 100%;
  color: #fff;
  align-items: center;

  &.is-full-screen,
  html.is-mobile & {
    border-radius: 0;
  }

  &.is-full-screen:not(.show-controls) {
    cursor: none;
  }

  &.show-controls,
  &.no-video {
    .call-title,
    .call-subtitle,
    .popup-header,
    .call-button,
    .call-button-text,
    .call-emojis,
    .call-party-state {
      opacity: 1;
    }
  }

  &.show-controls {
    .call-video {
      opacity: .8;
    }

    .call-video-blur {
      opacity: .56;
    }
  }

  .popup-header {
    .btn-icon {
      color: #fff;
    }

    .call-emojis {
      transform: scale(1.3125);
      margin-right: 1rem;
    }
  }

  &-avatar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: .7;
    border-radius: inherit;
    
    .avatar-full {
      font-size: 6rem;
    }
  }

  &-title {
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
  }

  &-subtitle {
    font-size: 1rem;
  }

  &-title,
  &-subtitle,
  &-emojis,
  .popup-header {
    opacity: 0;
    
    @include animation-level(2) {
      transition: opacity var(--transition-standard-in);
    }
  }

  &-buttons {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 1.75rem;
    align-self: center;
    z-index: 1;
    pointer-events: none; // ! fix backdrop-filter transition

    .call-button {
      pointer-events: all; // ! fix backdrop-filter transition

      &-container {
        --scale: 1;

        &.hide-me {
          --scale: 0 !important;
          transform: scale(var(--scale));
    
          @include animation-level(2) {
            transition: transform var(--transition-standard-in);
          }
    
          .call-button,
          .call-button-text { // ! fix backdrop-filter transition
            opacity: 0;
          }
        }
      }
    }

    @include animation-level(2) {
      .call-button { // ! fix backdrop-filter transition
        &,
        &-text {
          transition: opacity var(--transition-standard-in), transform var(--transition-standard-in);
        }
      }
    }
      

    &.is-first {
      .call-button { // ! fix backdrop-filter transition
        &,
        &-text {
          transform: /* scale(var(--scale))  */translateX(calc(var(--call-button-size) * -.5 + var(--call-button-margin) * -.5));
        }
      }
    }

    &.is-second {
      --margin-length: 2;

      .call-button { // ! fix backdrop-filter transition
        &,
        &-text {
          transform: /* scale(var(--scale))  */translateX(calc(var(--call-button-size) * 2 + var(--call-button-margin) * var(--margin-length)));
        }
      }
    }
  }

  &.no-screen {
    .call-buttons.is-second {
      --margin-length: .656875;
    }
  }

  &-button {
    background-color: rgba(255, 255, 255, .1);

    &-red {
      background-color: var(--danger-color) !important;
    }

    &-green {
      background-color: var(--gc-green-text-color) !important;
    }

    &.active {
      background-color: #fff !important;

      &:before {
        color: #9e9e9e;
      }
    }

    &,
    &-text {
      opacity: 0;
    }
  }

  &-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    border-radius: inherit;
    opacity: 1;

    &-container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      background-color: #000;
      z-index: -1;

      &.small {
        bottom: 8rem;
        right: 1rem;
        left: auto;
        top: auto;
        z-index: 1;
        border-radius: $border-radius-medium;
        cursor: pointer;
      }
    }

    &-blur {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: .7;
      border-radius: inherit;
    }

    &,
    &-blur {
      @include animation-level(2) {
        transition: opacity var(--transition-standard-in);
      }
    }
  }

  // html.emoji-supported & {
    .call-emojis {
      transform: scale(1.125);

      .emoji {
        margin: 0 .125rem;
      }
    }
  // }

  // html:not(.emoji-supported) & {
  //   .emoji {

  //   }
  // }

  &-party-states {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: calc(1.75rem + var(--call-button-size) + 1.5rem + 1rem);
    z-index: 2;
    width: 100%;
    align-items: center;
    padding: 0 1rem;
    pointer-events: none;
  }

  &-party-state {
    height: 1.625rem;
    border-radius: 1.625rem;
    line-height: 1.625rem;
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
    padding: 0 .625rem;
    font-size: .875rem;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    backdrop-filter: blur(25px);
    font-weight: var(--font-weight-bold);
    opacity: 0;
    transform: scale(0) translateY(0);
    max-width: 100%;

    @include animation-level(2) {
      transition: opacity var(--transition-standard-in), transform var(--transition-standard-in);
    }

    .rlottie-icon {
      width: 1.875rem !important;
      height: 1.875rem !important;
      margin-right: .25rem;
      margin-left: -.25rem;
      flex: 0 0 auto;
    }

    &.is-visible {
      &:not(.backwards) {
        transform: scale(1) translateY(0);
      }

      // &.backwards {
      //   opacity: 0 !important;
      // }
    }
  }

  &-party-state-text,
  &-title {
    max-width: 100%;
    @include text-overflow();
  }

  &.two-button-rows {
    .call-buttons {
      &.is-first {
        .call-button { // ! fix backdrop-filter transition
          &,
          &-text {
            transform: /* scale(var(--scale))  */translateY(calc((var(--call-button-size) + var(--call-button-margin) + 1.125rem) * -1));
          }
        }
      }

      &.is-second {
        .call-button { // ! fix backdrop-filter transition
          &,
          &-text {
            transform: /* scale(var(--scale))  */translateX(0);
          }
        }
      }
    }
  }
}