sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: fix video2

Browse Source
This commit is contained in:
Artyom Pratsko
2024-12-04 15:00:44 +03:00
parent 4a58a47a8e
commit 7ba65e73ae
3 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/moover.css
View File

File diff suppressed because one or more lines are too long

2
static/css/moover/chatterbox.css
View File

@@ -1 +1 @@
.chatterbox{margin-bottom:160px}@media (min-width: 1720px){.chatterbox{margin-bottom:180px}}@media (max-width: 1304.98px){.chatterbox{margin-bottom:142px}}@media (max-width: 991.98px){.chatterbox{margin-left:-50vw;margin-right:-50vw;margin-bottom:122px}}@media (max-width: 767.98px){.chatterbox{max-width:100vw;margin:0 auto 121px;position:relative}}.chatterbox__slider{max-width:1200px;margin:0 auto}@media (min-width: 1720px){.chatterbox__slider{max-width:1640px}}@media (max-width: 1304.98px){.chatterbox__slider{max-width:1100px}}@media (max-width: 991.98px){.chatterbox__slider{max-width:720px}}@media (max-width: 767.98px){.chatterbox__slider{max-width:830px;width:830px;left:50%;transform:translateX(-50%)}}@media (max-width: 479.98px){.chatterbox__slider{max-width:initial}}.chatterbox__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}@media (min-width: 1720px){.chatterbox__slide{width:456px;height:836px;background-size:456px 836px}}@media (max-width: 1304.98px){.chatterbox__slide{width:308px;height:565px;background-size:308px 565px}}@media (max-width: 991.98px){.chatterbox__slide{width:206px;height:377px;background-size:206px 377px}}@media (max-width: 767.98px){.chatterbox__slide{width:234px;height:429px;background-size:234px 429px}}.chatterbox__slide.loaded video{opacity:1}.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}@media (max-width: 767.98px){.chatterbox__slide video{position:relative;top:-4px}}.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}@media (min-width: 1720px){.chatterbox__wrap{border-radius:50px}}.chatterbox__vbtn{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;transition:opacity 0.2s ease-in-out;pointer-events:none}.loaded .chatterbox__vbtn{display:none}.chatterbox__vbtn::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}@media (min-width: 1720px){.chatterbox__vbtn::before{width:109px;height:109px}}@media (max-width: 991.98px){.chatterbox__vbtn::before{width:48px;height:48px}}@media (max-width: 767.98px){.chatterbox__vbtn::before{width:55px;height:55px}}.chatterbox__vbtn::before,.chatterbox__vbtn::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);cursor:pointer}.chatterbox__vbtn::after{border-color:transparent transparent transparent #ffffff;border-style:solid;border-width:15px 0 15px 25px;display:inline-block;margin-left:2px}@media (min-width: 1720px){.chatterbox__vbtn::after{border-width:23px 0 23px 35px;margin-left:4px}}@media (max-width: 991.98px){.chatterbox__vbtn::after{border-width:10px 0 10px 14px}}.chatterbox__vbox{position:relative;display:flex;justify-content:center;align-items:center;height:600px}@media (min-width: 1720px){.chatterbox__vbox{height:827px}}@media (max-width: 1304.98px){.chatterbox__vbox{height:530px}}@media (max-width: 991.98px){.chatterbox__vbox{height:370px}}.chatterbox__mbtns{position:absolute;top:58%;transform:translateY(-50%);left:0;right:0}@media (max-width: 479.98px){.chatterbox__mbtns{top:61.6%}}.chatterbox .title{margin-bottom:60px}@media (max-width: 1304.98px){.chatterbox .title{margin-bottom:39px}}@media (max-width: 767.98px){.chatterbox .title{margin-bottom:50px}}.chatterbox .slick-next{right:-40px}@media (max-width: 1304.98px){.chatterbox .slick-next{right:-10px}}@media (max-width: 991.98px){.chatterbox .slick-next{width:40px;height:40px;background-size:32%;right:5%}}@media (max-width: 479.98px){.chatterbox .slick-next{right:0}}.chatterbox .slick-prev{left:-40px}@media (max-width: 1304.98px){.chatterbox .slick-prev{left:-10px}}@media (max-width: 991.98px){.chatterbox .slick-prev{width:40px;height:40px;background-size:32%;left:5%}}@media (max-width: 479.98px){.chatterbox .slick-prev{left:0}}@media (max-width: 991.98px){.chatterbox .slick-list{overflow:visible}}.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.72}@media (max-width: 1304.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.69}}@media (max-width: 991.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.8}}@media (max-width: 479.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.85}}.slick-center .chatterbox__vbtn{opacity:1;pointer-events:initial;z-index:1}.slick-center .chatterbox__vbox video{pointer-events:initial;cursor:pointer}
.chatterbox{margin-bottom:160px}@media (min-width: 1720px){.chatterbox{margin-bottom:180px}}@media (max-width: 1304.98px){.chatterbox{margin-bottom:142px}}@media (max-width: 991.98px){.chatterbox{margin-left:-50vw;margin-right:-50vw;margin-bottom:122px}}@media (max-width: 767.98px){.chatterbox{max-width:100vw;margin:0 auto 121px;position:relative}}.chatterbox__slider{max-width:1200px;margin:0 auto}@media (min-width: 1720px){.chatterbox__slider{max-width:1640px}}@media (max-width: 1304.98px){.chatterbox__slider{max-width:1100px}}@media (max-width: 991.98px){.chatterbox__slider{max-width:720px}}@media (max-width: 767.98px){.chatterbox__slider{max-width:830px;width:830px;left:50%;transform:translateX(-50%)}}@media (max-width: 479.98px){.chatterbox__slider{max-width:initial}}.chatterbox__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}@media (min-width: 1720px){.chatterbox__slide{width:456px;height:836px;background-size:456px 836px}}@media (max-width: 1304.98px){.chatterbox__slide{width:308px;height:565px;background-size:308px 565px}}@media (max-width: 991.98px){.chatterbox__slide{width:206px;height:377px;background-size:206px 377px}}@media (max-width: 767.98px){.chatterbox__slide{width:234px;height:429px;background-size:234px 429px}}.chatterbox__slide.loaded video{opacity:1}.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;position:relative}@media (min-width: 1720px){.chatterbox__slide video{top:-2px}}@media (max-width: 1304.98px){.chatterbox__slide video{top:10px}}@media (max-width: 991.98px){.chatterbox__slide video{top:-4px}}@media (max-width: 767.98px){.chatterbox__slide video{top:22px}}.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}@media (min-width: 1720px){.chatterbox__wrap{border-radius:50px}}.chatterbox__vbtn{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;transition:opacity 0.2s ease-in-out;pointer-events:none}.loaded .chatterbox__vbtn{display:none}.chatterbox__vbtn::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}@media (min-width: 1720px){.chatterbox__vbtn::before{width:109px;height:109px}}@media (max-width: 991.98px){.chatterbox__vbtn::before{width:48px;height:48px}}@media (max-width: 767.98px){.chatterbox__vbtn::before{width:55px;height:55px}}.chatterbox__vbtn::before,.chatterbox__vbtn::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);cursor:pointer}.chatterbox__vbtn::after{border-color:transparent transparent transparent #ffffff;border-style:solid;border-width:15px 0 15px 25px;display:inline-block;margin-left:2px}@media (min-width: 1720px){.chatterbox__vbtn::after{border-width:23px 0 23px 35px;margin-left:4px}}@media (max-width: 991.98px){.chatterbox__vbtn::after{border-width:10px 0 10px 14px}}.chatterbox__vbox{position:relative;display:flex;justify-content:center;align-items:center;height:600px}@media (min-width: 1720px){.chatterbox__vbox{height:827px}}@media (max-width: 1304.98px){.chatterbox__vbox{height:530px}}@media (max-width: 991.98px){.chatterbox__vbox{height:370px}}.chatterbox__mbtns{position:absolute;top:58%;transform:translateY(-50%);left:0;right:0}@media (max-width: 479.98px){.chatterbox__mbtns{top:61.6%}}.chatterbox .title{margin-bottom:60px}@media (max-width: 1304.98px){.chatterbox .title{margin-bottom:39px}}@media (max-width: 767.98px){.chatterbox .title{margin-bottom:50px}}.chatterbox .slick-next{right:-40px}@media (max-width: 1304.98px){.chatterbox .slick-next{right:-10px}}@media (max-width: 991.98px){.chatterbox .slick-next{width:40px;height:40px;background-size:32%;right:5%}}@media (max-width: 479.98px){.chatterbox .slick-next{right:0}}.chatterbox .slick-prev{left:-40px}@media (max-width: 1304.98px){.chatterbox .slick-prev{left:-10px}}@media (max-width: 991.98px){.chatterbox .slick-prev{width:40px;height:40px;background-size:32%;left:5%}}@media (max-width: 479.98px){.chatterbox .slick-prev{left:0}}@media (max-width: 991.98px){.chatterbox .slick-list{overflow:visible}}.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.72}@media (max-width: 1304.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.69}}@media (max-width: 991.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.8}}@media (max-width: 479.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.85}}.slick-center .chatterbox__vbtn{opacity:1;pointer-events:initial;z-index:1}.slick-center .chatterbox__vbox video{pointer-events:initial;cursor:pointer}

16
styles/moover/chatterbox.scss
View File

@@ -96,10 +96,22 @@
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
position: relative;
@media (min-width: 1720px) {
top: -2px;
}
@media (max-width: 1304.98px) {
top: 10px;
}
@media (max-width: 991.98px) {
top: -4px;
}
@media (max-width: 767.98px) {
position: relative;
top: -4px;
top: 22px;
}
}