TRI-283: edit chatterbox

This commit is contained in:
2024-11-21 14:24:47 +03:00
parent e3adbeeea4
commit 7a345a6c80
4 changed files with 214 additions and 1 deletions

View File

@@ -1231,6 +1231,14 @@ b {
}
}
@media (max-width: 767.98px) {
.chatterbox {
max-width: 100vw;
margin: 0 auto 100px;
position: relative;
}
}
.chatterbox__slider {
max-width: 1200px;
margin: 0 auto;
@@ -1254,6 +1262,21 @@ b {
}
}
@media (max-width: 767.98px) {
.chatterbox__slider {
width: 720px;
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 479.98px) {
.chatterbox__slider {
width: 830px;
max-width: initial;
}
}
.chatterbox__slide {
width: 335px;
height: 615px;
@@ -1287,6 +1310,14 @@ b {
}
}
@media (max-width: 767.98px) {
.chatterbox__slide {
width: 234px;
height: 429px;
background-size: 234px 429px;
}
}
.chatterbox__slide.loaded video {
opacity: 1;
}
@@ -1302,6 +1333,13 @@ b {
pointer-events: none;
}
@media (max-width: 767.98px) {
.chatterbox__slide video {
position: relative;
top: -4px;
}
}
.chatterbox__slide img {
position: absolute;
scale: 1.32;
@@ -1422,6 +1460,20 @@ b {
}
}
.chatterbox__mbtns {
position: absolute;
top: 58%;
transform: translateY(-50%);
left: 0;
right: 0;
}
@media (max-width: 479.98px) {
.chatterbox__mbtns {
top: 61%;
}
}
.chatterbox .title {
margin-bottom: 60px;
}
@@ -1451,6 +1503,12 @@ b {
}
}
@media (max-width: 479.98px) {
.chatterbox .slick-next {
right: 0;
}
}
.chatterbox .slick-prev {
left: -40px;
}
@@ -1470,6 +1528,12 @@ b {
}
}
@media (max-width: 479.98px) {
.chatterbox .slick-prev {
left: 0;
}
}
@media (max-width: 991.98px) {
.chatterbox .slick-list {
overflow: visible;
@@ -1492,6 +1556,12 @@ b {
}
}
@media (max-width: 479.98px) {
.slick-slide:not(.slick-center) .chatterbox__slide {
scale: 0.85;
}
}
.slick-center .chatterbox__vbtn {
opacity: 1;
pointer-events: initial;

View File

@@ -22,6 +22,14 @@
}
}
@media (max-width: 767.98px) {
.chatterbox {
max-width: 100vw;
margin: 0 auto 100px;
position: relative;
}
}
.chatterbox__slider {
max-width: 1200px;
margin: 0 auto;
@@ -45,6 +53,21 @@
}
}
@media (max-width: 767.98px) {
.chatterbox__slider {
width: 720px;
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 479.98px) {
.chatterbox__slider {
width: 830px;
max-width: initial;
}
}
.chatterbox__slide {
width: 335px;
height: 615px;
@@ -78,6 +101,14 @@
}
}
@media (max-width: 767.98px) {
.chatterbox__slide {
width: 234px;
height: 429px;
background-size: 234px 429px;
}
}
.chatterbox__slide.loaded video {
opacity: 1;
}
@@ -93,6 +124,13 @@
pointer-events: none;
}
@media (max-width: 767.98px) {
.chatterbox__slide video {
position: relative;
top: -4px;
}
}
.chatterbox__slide img {
position: absolute;
scale: 1.32;
@@ -213,6 +251,20 @@
}
}
.chatterbox__mbtns {
position: absolute;
top: 58%;
transform: translateY(-50%);
left: 0;
right: 0;
}
@media (max-width: 479.98px) {
.chatterbox__mbtns {
top: 61%;
}
}
.chatterbox .title {
margin-bottom: 60px;
}
@@ -242,6 +294,12 @@
}
}
@media (max-width: 479.98px) {
.chatterbox .slick-next {
right: 0;
}
}
.chatterbox .slick-prev {
left: -40px;
}
@@ -261,6 +319,12 @@
}
}
@media (max-width: 479.98px) {
.chatterbox .slick-prev {
left: 0;
}
}
@media (max-width: 991.98px) {
.chatterbox .slick-list {
overflow: visible;
@@ -283,6 +347,12 @@
}
}
@media (max-width: 479.98px) {
.slick-slide:not(.slick-center) .chatterbox__slide {
scale: 0.85;
}
}
.slick-center .chatterbox__vbtn {
opacity: 1;
pointer-events: initial;