132 lines
2.1 KiB
SCSS
132 lines
2.1 KiB
SCSS
.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;
|
|
}
|