TRI-283: add scss posterinvideo

styles/moover/chatterbox.scss

@@ -0,0 +1,131 @@
+.chatterbox {
+  margin-bottom: 160px;
+
+  &__slider {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  &__slide {
+    width: 335px;
+    height: 615px;
+    background: url("/static/img/webp/phone-border.webp") center no-repeat;
+    transition: scale 0.2s ease-in-out;
+    margin: auto;
+    position: relative;
+
+    &.loaded {
+      video {
+        opacity: 1;
+      }
+
+      img {
+        z-index: -10;
+      }
+    }
+
+    video {
+      max-width: 100%;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+      pointer-events: none;
+    }
+
+    img {
+      position: absolute;
+      scale: 1.32;
+      top: 11%;
+    }
+  }
+
+  &__wrap {
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    top: 8px;
+    bottom: 8px;
+    border-radius: 25px;
+    background-color: grey;
+    overflow: hidden;
+  }
+
+  &__vbtn {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    pointer-events: none;
+
+    .loaded & {
+      display: none;
+    }
+
+    &::before {
+      width: 80px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-primary);
+      border: 0;
+      border-radius: 50%;
+      transition: opacity 100ms linear;
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      cursor: pointer;
+    }
+
+    &::after {
+      border-color: transparent transparent transparent #ffffff;
+      border-style: solid;
+      border-width: 15px 0 15px 25px;
+      display: inline-block;
+      margin-left: 2px;
+    }
+  }
+
+  &__vbox {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100% - 16px);
+  }
+
+  .title {
+    margin-bottom: 60px;
+  }
+
+  .slick-next {
+    right: -40px;
+  }
+
+  .slick-prev {
+    left: -40px;
+  }
+}
+
+.slick-slide:not(.slick-center) .chatterbox__slide {
+  scale: 0.72;
+}
+
+.slick-center .chatterbox__vbtn {
+  opacity: 1;
+  pointer-events: initial;
+  z-index: 1;
+}
+
+.slick-center .chatterbox__vbox video {
+  pointer-events: initial;
+  cursor: pointer;
+}