TRI-283: add scss posterinvideo

static/css/moover/chatterbox.css

@@ -2,27 +2,11 @@
   margin-bottom: 160px;
 }
 
-.chatterbox .title {
-  margin-bottom: 60px;
-}
-
 .chatterbox__slider {
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.slick-slide {
-  /*padding: 50px;*/
-}
-
-.chatterbox .slick-next {
-  right: -40px;
-}
-
-.chatterbox .slick-prev {
-  left: -40px;
-}
-
 .chatterbox__slide {
   width: 335px;
   height: 615px;
@@ -32,31 +16,36 @@
   position: relative;
 }
 
-.chatterbox__wrap {
-    position: absolute;
-    /* z-index: -1; */
-    left: 8px;
-    right: 8px;
-    top: 8px;
-    bottom: 8px;
-    border-radius: 25px;
-    background-color: grey;
-    overflow: hidden;
-}
-
-.slick-slide:not(.slick-center) .chatterbox__slide {
-  scale: 0.72;
-}
-
-.slick-center .chatterbox__vbtn {
+.chatterbox__slide.loaded video {
   opacity: 1;
-  pointer-events: initial;
-  z-index: 1;
 }
 
-.slick-center .chatterbox__vbox video {
-  pointer-events: initial;
-  cursor: pointer;
+.chatterbox__slide.loaded img {
+  z-index: -10;
+}
+
+.chatterbox__slide video {
+  max-width: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.chatterbox__slide img {
+  position: absolute;
+  scale: 1.32;
+  top: 11%;
+}
+
+.chatterbox__wrap {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 8px;
+  bottom: 8px;
+  border-radius: 25px;
+  background-color: grey;
+  overflow: hidden;
 }
 
 .chatterbox__vbtn {
@@ -70,9 +59,13 @@
   pointer-events: none;
 }
 
+.loaded .chatterbox__vbtn {
+  display: none;
+}
+
 .chatterbox__vbtn::before {
-  width: 20px;
-  height: 20px;
+  width: 80px;
+  height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -82,11 +75,6 @@
   transition: opacity 100ms linear;
 }
 
-.chatterbox__vbtn::before {
-  width: 80px;
-  height: 80px;
-}
-
 .chatterbox__vbtn::before, .chatterbox__vbtn::after {
   content: "";
   position: absolute;
@@ -106,27 +94,35 @@
 
 .chatterbox__vbox {
   position: relative;
-  /*z-index: -1;*/
-  padding: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   height: calc(100% - 16px);
 }
 
-.chatterbox video {
-  max-width: 100%;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  pointer-events: none;
-  
+.chatterbox .title {
+  margin-bottom: 60px;
 }
 
-.loaded .chatterbox__vbtn {
- display: none;
+.chatterbox .slick-next {
+  right: -40px;
 }
 
-.loaded video {
+.chatterbox .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;
+}