Файловый менеджер - Редактировать - /home/digitalm/tendemonza/wp-content/themes/trydo/assets/scss/elements/_slider.scss
Назад
/*==================== Slider Area ======================*/ .slider-fixed--height { min-height: 1080px; width: 100%; @media #{$laptop-device} { min-height: 900px; } @media #{$sm-layout} { min-height: auto; padding: 60px 0; } @media #{$md-layout} { min-height: auto; padding: 80px 0; padding-bottom: 60px; } } .react-parallax { img { object-fit: cover; } } .personal-portfolio-slider { position: relative; @media #{$sm-layout} { &::before { position: absolute; content: ""; width: 100%; height: 100%; background: #ffffff; opacity: 0.7; } } @media #{$md-layout} { &::before { position: absolute; content: ""; width: 100%; height: 100%; background: #ffffff; opacity: 0.7; } } @media #{$lg-layout} { &::before { position: absolute; content: ""; width: 100%; height: 100%; background: #ffffff; opacity: 0.7; } } } // Personal Portfolio .slide { &.personal-portfolio-slider , &.designer-portfolio { &.slider-style-3 { @media #{$lg-layout} { padding: 150px 0; min-width: auto; height: auto; } @media #{$md-layout} { padding: 150px 0; } @media #{$sm-layout} { padding: 100px 0; padding-bottom: 80px; } .inner{ @media #{$md-layout} { padding-top: 76px; } @media #{$sm-layout} { padding-top: 38px; } h1{ &.title{ @media #{$lg-layout} { font-size: 58px; line-height: 75px; } @media #{$md-layout} { font-size: 53px; line-height: 70px; } @media #{$sm-layout} { font-size: 32px; line-height: 49px; } } } } } } &.designer-portfolio { height: 700px; @media #{$md-layout} { height: auto; } @media #{$sm-layout} { height: auto; } &.slider-style-3 { @media #{$md-layout} { height: auto; padding: 100px 0; } @media #{$sm-layout} { height: auto; padding: 100px 0; } .inner { padding: 0; h1 { &.title { width: 100%; } } .description { margin-bottom: 0; @media #{$sm-layout} { font-size: 35px; line-height: 27px; } } } .designer-thumbnail { img { border-radius: 100%; padding: 0; border: 14px solid #fff; width: 394px; height: 394px; box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 20px 40px rgba(255,255,255,0.15); @media #{$large-mobile} { width: auto; height: auto; } } } } } } .header-style-two{ .header-right { .header-btn { @media #{$lg-layout} { margin-left: 7px; } } } } .bg_image--16 { @media #{$sm-layout} { background-position: 71% center; } } /*------------------------ Slider Styles --------------------------*/ .slide { .inner { padding-top: 100px; @media #{$sm-layout} { padding-top: 70px; } @media #{$large-mobile} { padding-top: 30px; } h1 { &.title { font-size: 125px; font-weight: 900; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: 130px; @media #{$laptop-device} { font-size: 100px; line-height: 112px; } @media #{$lg-layout} { font-size: 90px; line-height: 103px; } @media #{$md-layout} { font-size: 70px; line-height: 82px; margin-bottom: 0; } @media #{$sm-layout} { font-size: 50px; line-height: 70px; margin-bottom: 0; } @media #{$large-mobile} { font-size: 40px; line-height: 50px; margin-bottom: 20px; } } } } &.slide-style-1 { .inner { padding-top: 100px; @media #{$sm-layout} { padding-top: 70px; } @media #{$large-mobile} { padding-top: 30px; } @media #{$md-layout} { padding-top: 50px; } h1 { &.title { @media #{$md-layout} { font-size: 70px; line-height: 82px; margin-bottom: 26px; } } } } } // Slider Style Two [Business ,] &.slide-style-2 { padding-top: 230px; padding-bottom: 284px; overflow: hidden; @media #{$laptop-device} { padding-top: 150px; padding-bottom: 150px; } @media #{$lg-layout} { padding-top: 160px; padding-bottom: 170px; min-height: auto; } @media #{$md-layout} { padding-top: 150px; padding-bottom: 150px; min-height: auto; } @media #{$sm-layout} { padding-top: 150px; padding-bottom: 90px; min-height: auto; } &.fullscreen { min-height: 950px; @media #{$laptop-device} { padding-top: 160px; padding-bottom: 160px; min-height: auto; } @media #{$lg-layout} { min-height: auto; } @media #{$md-layout} { min-height: auto; } @media #{$sm-layout} { min-height: auto; } } .inner { padding-top: 100px; @media #{$sm-layout} { padding-top: 0; text-align: center !important; } @media #{$md-layout} { padding-top: 30px; } @media #{$lg-layout} { padding-top: 30px; } > span { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 4px; display: block; margin-bottom: 9px; } .title { color: #ffffff; font-size: 100px; font-weight: 900; font-family: 'Montserrat', sans-serif; @media #{$lg-layout} { font-size: 72px; } @media #{$md-layout} { font-size: 60px; margin-bottom: 8px; } @media #{$sm-layout} { font-size: 52px; margin-bottom: 0; } @media #{$small-mobile} { font-size: 29px; } } p { &.description { color: #c6c9d8; font-size: 24px; line-height: 40px; margin: 0; padding: 0 16%; font-weight: 300; @media #{$md-layout} { padding: 0 10%; } @media #{$sm-layout} { padding: 0; font-size: 18px; line-height: 30px; margin-top: 20px; } br { @media #{$sm-layout} { display: none; } } } } .slide-btn { margin-top: 50px; @media #{$md-layout} { margin-top: 42px; } @media #{$sm-layout} { margin-top: 32px; } } &.text-left { p { padding: 0 37% 0 0; br { @media #{$sm-layout} { display: none; } } @media #{$lg-layout} { padding: 0 20% 0 0; } @media #{$md-layout} { padding: 0; } @media #{$sm-layout} { padding: 0; } } } &.text-right { p { padding: 0 0 0 16%; br { @media #{$sm-layout} { display: none; } } @media #{$md-layout} { padding: 0; } @media #{$sm-layout} { padding: 0; } } } } } &.slider-style-3 { .inner { > span { color: #1f1f25; font-size: 15px; text-transform: uppercase; letter-spacing: 4px; display: block; margin-bottom: 20px; @media #{$sm-layout} { font-size: 13px; margin-bottom: 10px; } } h1 { &.title { color: #1f1f25; font-size: 75px; font-weight: 900; font-family: 'Montserrat', sans-serif; line-height: 90px; text-transform: inherit; width: 70%; @media #{$lg-layout} { font-size: 70px; } @media #{$md-layout} { font-size: 60px; line-height: 77px; width: 85%; } @media #{$sm-layout} { font-size: 42px; line-height: 57px; width: 100%; } span{ color: var(--color-primary); } } } } } } .slider-wrapper { &.color-white{ .inner{ p{ &.description{ color: #ffffff; } } } } .service-wrapper{ @media #{$sm-layout} { margin-bottom: -20px; } } } .slider-digital-agency { a.rn-button-style--2 { color: #fff; border-color: #fff; } } // Slick Animation For Slider .slick-slide { &.slick-current { .slide { &.slide-style-2 { .inner { h1 { &.title { -webkit-animation: 800ms ease-in-out 0s normal none 1 running customOne; animation: 800ms ease-in-out 0s normal none 1 running customOne; } } p { &.description { -webkit-animation: 1000ms ease-in-out 0s normal none 1 running customOne; animation: 1000ms ease-in-out 0s normal none 1 running customOne; } } .slide-btn { -webkit-animation: 1200ms ease-in-out 0s normal none 1 running customOne; animation: 1200ms ease-in-out 0s normal none 1 running customOne; } } } } } } @-webkit-keyframes customOne { from { opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes customOne { from { opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .customOne { -webkit-animation-name: customOne; animation-name: customOne; } /*======================= Slider Paralax =========================*/ .slider-paralax, .rn-paralax { height: 950px; @media #{$sm-layout} { height: auto; } @media #{$laptop-device} { height: auto; padding-top: 150px; padding-bottom: 150px; } @media #{$md-layout} { height: auto; } @media #{$lg-layout} { height: auto; } } .slide{ &.slide-style-2{ &.slider-paralax{ @media #{$laptop-device} { height: auto; padding-top: 100px; padding-bottom: 100px; } } } } // Slider Videi Bg .slider-video-bg { position: relative; z-index: 2; .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .inner{ position: relative; z-index: 2; } &[data-black-overlay]{ &::before{ z-index: 1; } } .video-inner { button, a { &.video-popup { margin: 0 auto !important; @media #{$md-layout} { margin: 0; margin-top: 28px; } @media #{$sm-layout} { margin: 0; margin-top: 28px; } @media #{$sm-layout} { width: 70px; height: 70px; margin: 0 auto; margin-top: 30px; } } } } } .slide { &.slide-style-2{ &.slider-video-bg{ .inner{ @media #{$md-layout} { text-align: center !important; } @media #{$sm-layout} { text-align: center !important; } .title { font-size: 60px; line-height: 80px; margin-bottom: 20px; @media #{$md-layout} { font-size: 45px; line-height: 74px; margin-bottom: 10px; } @media #{$sm-layout} { font-size: 36px; line-height: 51px; margin-bottom: 0px; } } } } } } /*---------------------- Slider Default -----------------------*/ .slider-activation { position: relative; .slick-dots { bottom: 60px; @media #{$sm-layout} { bottom: 88px; } @media #{$large-mobile} { bottom: 35px; } } button { &.slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; transition: 0.5s; opacity: 1; width: 68px; height: 68px; border: 2px solid rgba(255,255,255, 0.2); border-radius: 100%; @media #{$md-layout} { display: none !important; } @media #{$lg-layout} { display: none !important; } @media #{$sm-layout} { display: none !important; } &:hover{ background: var(--color-primary); border-color: var(--color-primary); } &::before { line-height: 1; opacity: 0.4; position: relative; top: -2px; transition: 0.5s; z-index: 2; } &.slick-prev { left: 50px; @media #{$sm-layout} { left: 10px; } &::before{ content: url(../images/icons/slick-arrow-left-small.png); } &:hover{ left: 30px; @media #{$sm-layout} { left: 20px; } &::before{ opacity: 1; } } } &.slick-next { left: auto; right: 50px; @media #{$sm-layout} { right: 10px; } &::before{ content: url(../images/icons/slick-arrow-right-small.png); } &:hover { right: 30px; @media #{$sm-layout} { right: 20px; } &::before{ opacity: 1; } } } } } &:hover{ } } .slider-creative-agency { .slider-paralax { @media #{$md-layout} { height: auto; } @media #{$sm-layout} { height: auto; } } &.with-particles { position: relative; .frame-layout__particles { width: 100%; height: 100%; position: absolute; z-index: 2; top: 0; left: 0; canvas { position: absolute; z-index: 1; } } .inner { position: relative; z-index: 4; } } } /* For Slider Service */ .slide { .service { margin-top: 50px; @media #{$lg-layout} { margin-top: 20px; } @media #{$laptop-device} { margin-top: 0px; } @media #{$md-layout} { margin-top: 20px; } @media #{$sm-layout} { margin-top: 20px; } @media #{$large-mobile} { margin-top: 0; } } } .theme-gradient { -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .box-model .service-wrapper { background-image: url(../images/bg/bg-image-1.jpg); padding: 10px 50px; border-radius: 6px; position: relative; } .box-model .service-wrapper .service { margin: 0; } .box-model .service-wrapper .service .icon { margin: auto; text-align: center; } .box-model .service-wrapper .service .content { text-align: center; } .box-model .service-wrapper:before { width: 90%; height: 80%; position: absolute; left: 0; bottom: -30px; content: ""; background-color: #f81f01; z-index: -1; margin: auto; right: 0; border-radius: 20%; background-image: linear-gradient(145deg, #f81f01 0%, #ee076e 100%); filter: blur(30px); } .box-model .inner { text-align: center; margin-bottom: 60px; } // Header Not Transparent .root-header-not-transparent { .slide { &.slide-style-1 , &.slide-style-2 { .inner { padding-top: 0; } } .inner { padding-top: 0; } } } @media only screen and (max-width: 767px) { .root-header-not-transparent { .slide { &.slide-style-1 , &.slide-style-2 { .inner { } } .inner { } } .slide { &.slide-style-2 { padding-top: 90px; } } } } .root-header-not-transparent { .rn-page-title, .breadcrumb-inner { padding-top: 0 !important; } .rn-page-title-area { padding-top: 125px !important; padding-bottom: 145px !important; @media #{$md-layout} { padding-top: 80px !important; padding-bottom: 80px !important; } @media #{$sm-layout} { padding-top: 80px !important; padding-bottom: 80px !important; } } .breadcrumb-area { padding-top: 100px !important; padding-bottom: 120px !important; @media #{$md-layout} { padding-top: 80px !important; padding-bottom: 80px !important; } @media #{$sm-layout} { padding-top: 80px !important; padding-bottom: 80px !important; } } } .active-dark { .personal-portfolio-slider { &.overlay { position: relative; z-index: 2; &::after { position: absolute; content: ""; height: 100%; width: 100%; opacity: 0.7; left: 0; top: 0; } @media #{$lg-layout} { &::after { background: #000; z-index: -1; } } @media #{$md-layout} { &::after { background: #000; z-index: -1; } } @media #{$sm-layout} { &::after { background: #000; z-index: -1; } } } } }
| ver. 1.4 |
Github
|
.
| PHP 8.3.23 | Генерация страницы: 0.05 |
proxy
|
phpinfo
|
Настройка