@testgorilla/tgo-immersive-test 2.0.0 → 2.0.2

package/src/lib/components/immersive-test/immersive-test.component.scss

@@ -1,247 +0,0 @@
-@import '@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/variables';
-
-$border-radius: 10px;
-
-.immersive-test {
-  padding: 0 64px;
-  margin-top: 40px;
-
-  .media-info {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: rgba(36, 36, 36, 0.66);
-    background-color: $black;
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    padding: 13px 32px;
-    color: $tgo-white;
-
-    ::ng-deep ui-button button {
-      border-color: $tgo-white;
-      color: $tgo-white;
-    }
-  }
-
-  .test-container {
-    min-width: 360px;
-    max-width: 1312px;
-    min-height: 725px;
-    height: min(
-      725px,
-      100%,
-      max(calc(100vw - 200px), calc(100vh - 200px), 200px)
-    );
-    border-radius: $border-radius;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    position: relative;
-    background-color: $black;
-  }
-
-  .media-container {
-    position: relative;
-    color: $tgo-white;
-    flex-grow: 1;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    aspect-ratio: 16 / 9;
-
-    .candidate-no-camera {
-      position: absolute;
-      width: 200px;
-      aspect-ratio: 16 / 9;
-      z-index: 3;
-      top: 32px;
-      left: 32px;
-      border-radius: $border-radius;
-      background-color: #1a47aa;
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-      padding: 16px;
-
-      ui-icon {
-        margin: auto;
-      }
-    }
-
-    .candidate-camera {
-      position: absolute;
-      width: 200px;
-      top: 32px;
-      left: 32px;
-      z-index: 3;
-
-      video {
-        width: 200px;
-        border-radius: $border-radius;
-      }
-
-      h3 {
-        position: absolute;
-        bottom: 16px;
-        left: 16px;
-      }
-    }
-
-    tgo-audio-animation {
-      position: absolute;
-      top: 32px;
-      right: 32px;
-      z-index: 1;
-    }
-
-    tgo-vimeo-video {
-      display: none;
-      position: absolute;
-      height: 100%;
-      width: 100%;
-    }
-
-    &.is-video-visible {
-      tgo-vimeo-video {
-        display: block;
-      }
-    }
-
-    &.is-playing {
-      border: 4px solid $informative-40;
-      border-bottom-width: 3px;
-    }
-
-    &.is-answering {
-      .candidate-camera,
-      .candidate-no-camera {
-        tgo-audio-animation {
-          position: absolute;
-          top: 16px;
-          right: 16px;
-        }
-      }
-
-      .candidate-camera video,
-      .candidate-no-camera {
-        border: 3px solid $informative-40;
-        border-radius: $border-radius;
-      }
-
-      tgo-vimeo-video {
-        display: block;
-      }
-    }
-
-    .start,
-    .audio-info,
-    .overlay,
-    .answer {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      gap: 40px;
-      height: 100%;
-    }
-
-    .preview {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      justify-content: flex-end;
-      padding: 24px;
-
-      p {
-        color: $grayscale-30;
-        margin: 8px 0;
-      }
-
-      audio {
-        margin: 16px 0;
-      }
-
-      &.hidden {
-        display: none;
-      }
-    }
-  }
-
-  h3,
-  h4 {
-    color: $tgo-white;
-  }
-
-  .bold {
-    font-weight: 700;
-  }
-
-  ui-button.review-button ::ng-deep button {
-    border: 1px solid $tgo-white;
-  }
-
-  ui-button.white-btn ::ng-deep button {
-    background-color: $tgo-white;
-    border-color: $tgo-white;
-    color: $tgo-black;
-
-    &:hover {
-      background-color: $grayscale-50 !important;
-    }
-  }
-
-  .overlay {
-    top: 0;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(36 36 36 / 88%);
-    z-index: 2;
-    border-radius: $border-radius;
-
-    h1,
-    h3 {
-      color: $tgo-white;
-      text-align: center;
-    }
-
-    h3 {
-      margin-bottom: 10px;
-    }
-  }
-
-  tgo-radial-progress {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .uppercase {
-    text-transform: uppercase;
-  }
-
-  .recording-started {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-  }
-
-  .recording-dot {
-    background-color: $error-40;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .immersive-test {
-    padding: 0 24px;
-    margin-top: 16px;
-  }
-}
-