style.scss
| 103.3 KB | Satir:
0
| scss
Geri
/* Template Name: Vinazine Author: Themewinter Author URI: https://themeforest.net/user/tripples Description: vinazine Version: 1.0 ===================== table of content ==================== 1. Typography 2. Global Styles 3. Top Bar 4. header middle area 5. Header area 6. Slider 7. Content area 8. blog section 9. Footer 10. Sub Pages 11. News Single 12. Sidebar 13. Error page */ @import 'base'; @import 'disable'; @import 'variable'; @import 'mixin'; /* */ /*------------------------- preloader ---------------------*/ #preloader { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 99999999999; overflow: hidden; background-color: $primary-color; -webkit-transition: all 1.5s ease-out; -o-transition: all 1.5s ease-out; transition: all 1.5s ease-out; &.loaded { top: -200%; .preloader-cancel-btn-wraper { bottom: 200%; } } } .preloader-cancel-btn-wraper { position: fixed; bottom: 0; right: 0; padding: 30px; -webkit-transition: all 1.5s ease-out; -o-transition: all 1.5s ease-out; transition: all 1.5s ease-out; .preloader-cancel-btn{ border-radius: 36px; font-size: 11px; padding: 13px 23px; background: #9a2521; } } .spinner { width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .double-bounce1 { width: 100%; height: 100%; border-radius: 50%; background-color: #FFFFFF; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #FFFFFF; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } @keyframes sk-bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } /*------------------------------ top bar ------------------------------*/ .ts-top-nav{ padding-left: 26px; li{ display: inline-block; margin-right: 16px; a{ font-size: 13px; color: #8a8a8a; line-height: 40px; font-family: $arimo; &:hover{ color: $primary-color; } } &:last-of-type{ margin-right: 0; } } } .top-social{ li{ display: inline-block; line-height: 41px; a{ color: #8a8a8a; font-size: 14px; padding: 0 7px; } &.ts-date{ padding: 0 14px; margin-left: 19px; background: $primary-color; color: $white-color; font-family: $arimo; } &.ts-subscribe{ padding: 0 30px; margin-left: 19px; background: $primary-color; color: $white-color; font-family: $heebo; text-transform: uppercase; font-weight: 700; a{ color: $white-color; } } } } .top-bar{ background: $white-color; padding: 0; .ts-temperature{ display: inline-block; padding-right: 30px; font-family: $arimo; position: relative; &:before{ position: absolute; right: 0; top: 3px; width: 1px; height: 20px; content: ''; background: #e9e9e9; } i{ color: $primary-yellow; } span{ b{ font-weight: 400; position: relative; top: -4px; } } } .ts-top-nav{ display: inline-block; } /*index 2----*/ &.v2{ background: $primary-dark; .ts-breaking-news{ margin-bottom: 0; background: transparent; padding: 0; .breaking-title{ color: $white-color; } p{ a{ color: $white-color; } } } .top-social li a{ color: $white-color; } } &.v3{ .ts-date{ display: inline-block; padding-right: 50px; font-family: $heebo; font-size: 14px; color: #8a8a8a; } .ts-temperature{ border-right: none; padding-right: 0; } } .ts-date{ font-size: 13px; font-family: $arimo; color: #606060; } .ts-date-item{ background: #d72924; display: inline-block; line-height: 42px; padding: 0 14px; color: $white-color; } /*---- version ---*/ &.top-bg{ background: #f4f4f4; } .top-nav{ li{ display: inline-block; a{ font-size: 13px; color:#606060; line-height: 26px; font-family: $arimo; line-height: 34px; margin-left: 35px; } } } &.bg-blue-dark{ background: #004e7c; .ts-date{ color: $white-color; } .ts-top-nav{ li{ a{ color: #dde7ee; } } } } &.v4{ background: #2c2c2c; .ts-breaking-news{ margin-bottom: 0; background: transparent; padding: 8px 20px 8px 0; .breaking-post-content{ p{ a{ color: $white-color; } } } } } &.v5{ .ts-breaking-news { padding: 7px 20px 7px 0; margin-bottom: 0; } } } /*============================= header middle =============================*/ .header-middle{ padding: 20px 0; .banner-img{ text-align: center; } &.v2{ background: $primary-color; padding: 4px 0; margin-bottom: 5px; .logo{ a{ text-align: left; } } } &.v3{ padding: 25px 0; } &.v4{ padding: 38px 0; } } .banner-img{ img{ max-width: 100%; } } .bg-blue{ background: $primary-blue-dark; } .currency-list-item{ ul{ li{ display: inline-block; border-right: 1px solid #1a6795; padding-right: 10px; .currency-item{ display: inline-block; padding: 0 14px; label{ display: block; font-size: 14px; font-weight: 700; color: $white-color; letter-spacing: 0.7px; text-transform: uppercase; } span{ font-size: 12px; } &.right{ text-align: right; } } &:nth-child(odd){ .currency-item{ span{ color: #ff433d; } } } &:nth-child(even){ .currency-item{ span{ color: #11e260; } } } &:last-child{ padding-right: 0; border-right: none; .currency-item.right{ padding-right: 0; } } } } } /*============================= header nav =============================*/ // header sticky @media (min-width: 992px){ .ts-menu-sticky{ &.sticky{ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); position: fixed; top: 0; z-index: 9; width: 100%; left: 0; right: 0; margin: auto; max-width: 930px; &.fade_down_effect{ -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: .1s; animation-delay: .1s; } } } } @media (min-width: 1200px){ .ts-menu-sticky{ &.sticky{ max-width: 1110px; } } } /*------ nav top ------ */ .header-nav-item{ padding-left: 5px; } .breaking-title{ font-size: 13px; text-transform: uppercase; color: $primary-color; font-weight: 700; font-family: $heebo; margin-bottom: 0; line-height: 26px; padding-right: 10px; i{ font-size: 15px; margin-right: 6px; } } .mobile-logo{ display: none; } .ts-breaking-news{ background: $white-color; padding: 12px 20px; margin-bottom: 5px; p{ margin-bottom: 0; a{ font-size: 13px; line-height: 26px; color: #5c5c5c; font-family: $arimo; } } .breaking-news-content{ width: 80%; } } #breaking_slider{ .owl-nav{ position: absolute; right: -49px; top: 1px; .owl-prev, .owl-next{ width: 24px; background: #f0f1f4; color: #222; line-height: 19px; margin-left: 5px; height: 24px; font-size: 16px; &:before{ display: none; } &:hover{ background: $primary-color; color: $white-color; } } } } .header-default{ position: relative; } .logo{ background: $primary-color; height: 115px; a{ display: block; text-align: center; line-height: 115px; } } .nav-header{ padding: 0; margin: 0; width: 0; } .navigation{ height: 60px; display: block; } .nav-menu{ >li{ >a{ height: 60px; padding: 22px 20px; text-transform: uppercase; font-weight: 700; font-family: $heebo; color: #232323; @include transition(); .submenu-indicator{ transition: all 0s; margin-top: 0px; &:before{ content: '\f0d7'; font-size: 14px; font-family: 'FontAwesome'; } .submenu-indicator-chevron{ display: none; } } &:hover{ background: $primary-color; color: $white-color !important; } } .nav-dropdown{ li{ a{ font-weight: 700; font-family: $heebo; height: 50px; padding: 16px 20px; } } } &.focus{ >a{ color: $primary-color; } } &.active{ >a{ background: $primary-color; color: $white-color; .submenu-indicator-chevron{ border-color: transparent #ffffff #ffffff transparent; } } } .nav-dropdown{ box-shadow: 0 6px 12px rgba(0, 0, 0, .175); li { a{ font-size: 14px; color: #232323; border: none; padding: 14px 16px; font-weight: 400; &:hover{ color: $primary-color;; } &:before{ position: absolute; left: 0; bottom: 0; width: 85%; right: 0; margin: auto; height: 1px; background: #eae8e8; content: ''; } } &:last-child{ a{ &:before{ display: none; } } } } } } .megamenu-panel{ box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .megamenu-lists{ .megamenu-list{ >li{ >a{ font-size: 14px; color: #232323; &:hover{ color: $primary-color;; background: transparent; } } } } } .megamenu-tabs-nav { background: #f0f1f4; >li { > a{ font-size: 14px; color: #232323; border: none; padding: 14px 16px 14px 30px; &:hover{ color: $primary-color;; background: #f0f1f4; } } &.active{ a{ background: transparent; color: $primary-color; } } } } .megamenu-tabs{ padding: 15px 0; } .megamenu-tabs-pane{ border: none; border-left: 1px solid #f0f1f4; padding-left: 30px; padding-top: 0; padding-bottom: 0; } } .right-menu{ li{ float: left; a{ line-height: 61px; width: 60px; height: 60px; font-size: 19px; display: block; text-align: center; border-left: 1px solid #e9e9e9; color: #8a8a8a; } .nav-search{ height: 60px; .nav-search-button{ height: 100%; line-height: 64px; color: $white-color; font-size: 17px; width: 60px; background: $primary-color; } } } .nav-search-inner input[type=text], .nav-search-inner input[type=search]{ height: 60px; line-height: 60px; font-size: 20px; } .nav-search-close-button{ top: 16px; } } /*----------- header-standerd---------*/ .header-standerd{ background: $primary-color; .navigation{ background: transparent; } .nav-menu{ >li{ >a{ color: $white-color; &:hover{ background: $primary-dark; } } &.active{ > a{ background: $primary-dark; } } } } .right-menu{ li{ a{ border-left: none; color: $white-color; position: relative; &:before{ position: absolute; right: 0; top: 0; width: 1px; height: 20px; content: ''; bottom: 0; margin: auto; background: $white-color; } } } } } /*------- vertion 3 ------*/ .menu-centerd{ .ts-main-menu{ text-align: center !important; } } .nav-menu-item{ position: relative; .ts-main-menu{ .nav-menu{ >li{ >a{ font-size: 16px; height: 70px; font-weight: 400; font-family: $heebo; color: #212121; padding: 22px 28px; text-transform: capitalize; &:hover{ background: #fff; } } .nav-dropdown{ li{ a{ &:hover{ background: $primary-green; color: $white-color; } } } } } li.active{ > a { background:transparent; color: $primary-green; } } } .right-menu li { .nav-search { .nav-search-button{ background: transparent; color: #212121; width: 50px; height: auto; line-height: 69px; font-size: 16px; } } } } } .nav-menu-item.nav-icon-item{ .navigation{ height: 114px; } .nav-menu{ >li{ >a{ padding: 22px 58px; height: 100% !important; font-size: 14px; font-weight: 500 !important; color: #383838; text-transform: uppercase !important; i{ display: block; width: auto; text-align: center; margin-bottom: 12px; font-size: 35px; height: auto; transform: scale(1); line-height: 34px; } } .nav-dropdown{ li{ a{ &:hover{ color: #fff; } } } } } } .ts-main-menu{ .right-menu li{ .nav-search { .nav-search-button{ width: auto; line-height: 36px; padding: 25px 61px; @include transition(); i{ font-size: 24px; } b{ display: block; text-transform: uppercase; font-weight: 500; font-family: $heebo; } &:hover{ color: $primary-green; } } } } } } /*---- vertion 4---*/ .header-transparent{ position: absolute; left: 0; top: 0; z-index:2; width: 100%; border-bottom: 1px solid #33335b; .nav-header{ width: auto; .nav-brand{ padding: 0; line-height: 80px; } } .navigation{ background: transparent; height: 80px; } .nav-menu{ >li{ >a{ color: $white-color; height: 80px; padding: 31px 26px; position: relative; .submenu-indicator{ margin-top: 0; } &:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: $primary-blue; content: ''; opacity: 0; visibility: hidden; @include transition(); transform: scale(0); } &:hover{ background: transparent; &::before{ opacity: 1; visibility: visible; transform: scale(1); } } } &.active{ >a{ background: transparent; color: $primary-blue; } } .nav-dropdown{ border-top: none; background: $white-color; } } } .right-menu{ li{ .nav-search{ width: 80px; height: 80px; margin-left: 15px; .nav-search-button{ width: 100%; height: 100%; line-height: 80px; background: transparent; border-left: 1px solid #33335b; border-right: 1px solid #33335b; } } } } } .header-box{ .navigation{ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); height: 50px; } .right-menu li .nav-search{ height: 50px; .nav-search-button{ line-height: 56px; } } .nav-menu{ >li{ > a{ padding: 16px 25px; height: 50px; &:hover{ background: $white-color; color: $primary-blue-dark !important; &::before{ opacity: 1; visibility: visible; width: 100%; } } .submenu-indicator{ margin-top: 0; } &:before{ position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background: $primary-blue-dark; content: ''; opacity: 0; visibility: hidden; @include transition(); } } &.active > a{ background: transparent; color: $primary-blue-dark; } } } .right-menu{ li { .nav-search { .nav-search-button{ background: $white-color; color: #232323; } } } } } .ts-mega-menu.megamenu-panel{ max-width: 500px; padding: 15px 0; .megamenu-list li a { height: 46px; padding: 15px 20px; } } /*------------------------------ featured post area ------------------------------*/ .ts-overlay-style{ position: relative; .item{ &:before { content: " "; position: absolute; display: block; width: 100%; height: 100%; z-index: 1; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.95) 100%); } &:after{ background: rgba(0,0,0, .2); position: absolute; display: block; width: 100%; height: 100%; z-index: 0; bottom: 0; left: 0; content: ''; opacity: 0; transition: all ease 500ms; } &:hover:after{ opacity: 1; } } &.ts-featured{ .item{ min-height: 573px; position: relative; background-position: 50% 50%; -webkit-background-size: cover; background-size: cover; -webkit-backface-visibility: hidden; .post-content{ padding: 40px; } .post-title { margin-bottom: 24px; } } } .post-meta-info{ margin-bottom: 0; } } #featured-slider-2{ .item{ min-height: 418px; } .owl-dots { right: 20px; top: 5px; .owl-dot span{ background: $white-color; } } .post-title.lg{ font-size: 30px; } } .post-content { //padding: 40px; z-index: 1; position: relative; p{ font-size: 15px; line-height: 24px; color: #232323; } } .ts-overlay-style{ .overlay-post-content { position: absolute; bottom: 0; .post-content{ padding: 24px 24px 18px; } .post-date-info{ color: #d2d2d2; } .post-title { margin-bottom: 5px; a { color: #fff; @include transition(); // &:hover{ // color: $primary-color; // } } &.md{ margin-bottom: 10px; } } .post-meta-info{ li{ color: $white-color; a{ color: $white-color; &:hover{ color: $primary-color; } } &.active{ color: $primary-color; } } } } } .post-cat{ position: relative; z-index: 1; display: inline-block; color: $white-color; font-size: 11px; font-weight: 700; font-family: $heebo; text-transform: uppercase; padding: 0px 10px; margin-left: 40px; line-height: 21px; height: 19px; top: -3px; letter-spacing: .55px; &:hover{ color: $white-color; } } .cat-name{ font-size: 11px; color: $primary-green; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 5px; } .post-date-info{ font-size: 12px; display: block; position: relative; color: #8a8a8a; } /*--------- single post ---*/ .ts-grid-box{ position: relative; margin-bottom: 30px; padding: 30px; background: $white-color; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); &.ts-grid-content{ padding:0; box-shadow: none; .post-content{ padding: 0 20px 18px 20px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); } &:hover{ .ts-post-thumb img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } .post-cat{ position: absolute; margin-left: 30px; top: 0; } .ts-post-thumb{ position: relative; width: 100%; height: 100%; overflow: hidden; margin-bottom: 20px; min-height: 10px; img{ width: 100%; transform: scale(1); @include transition(); backface-visibility: hidden; } &:hover{ img{ transform: scale(1.2); } } } /*.post-content{ padding: 20px; background: $white-color; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); }*/ &:last-of-type{ margin-bottom: 0; } &.ts-grid-content-1{ .post-cat{ position: relative; margin-bottom: 16px; margin-left: 0; } .ts-post-thumb{ margin-bottom: 0; } .post-content{ padding: 20px 22px 18px 22px; } .post-meta-info{ li{ a{ &:hover{ color: $primary-blue-dark; } } } } &.featured-item{ .post-content{ padding: 20px 28px 18px 28px; } .ts-post-thumb{ .link-img{ min-height: 290px; } } } } } .ts-post-overlay-style-1{ background: transparent; padding: 0; .ts-post-thumb{ margin-bottom: 10px; img{ min-height: 204px; } } .ts-overlay-style:last-of-type{ .ts-post-thumb{ margin-bottom: 0; } } } /*------- post tab list ---*/ .post-list-item{ position: relative; background: $white-color; .nav-tabs{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 6px; li{ flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; text-align: center; a{ font-size: 13px; text-transform: uppercase; color: #8a8a8a; line-height: 50px; font-weight: 500; font-family: $heebo; position: relative; display: block; &::before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #6200ee; content: ''; opacity: 0; @include transition(); } i{ margin-right: 6px; } &.active{ color: #6200ee; &::before{ opacity: 1; } } } } } &.blue-dark{ .nav-tabs li a{ &:before{ background: $primary-blue-dark; } &.active{ color: $primary-blue-dark; } } .post-title{ a{ &:hover{ color: $primary-blue-dark; } } } } } /*---------- tab list -----*/ .post-tab-list{ margin-bottom: 0; padding: 15px; .post-content.media{ border-bottom: 1px solid #ededed; margin-bottom: 16px; padding-bottom: 15px; .post-title{ margin-bottom: 0; } &:last-of-type{ padding-bottom: 0; border-bottom: none; margin-bottom: 5px; } } .post-tag{ line-height: 10px; margin-bottom: 6px; display: block; a{ font-size: 11px; text-transform: uppercase; font-weight: 700; font-family: $heebo; } } } img.sidebar-img{ width: 70px; height: 50px; margin-right: 15px; } /*--------------------------- hot topics ---------------------------*/ #hot-topics-slider{ margin-bottom: -60px; } .heighlight{ background: $blue-color; .ts-post-thumb{ .post-cat{ position: absolute; margin-left: 0; top: auto; bottom: 0; padding: 4px 15px 0 20px; &:before{ border-style: solid; border-width: 28px 0 0 20px; border-color: transparent transparent transparent #007bff; position: absolute; right: -20px; top: 0; content: ''; } } } .post-content{ padding: 0 20px 20px; .post-title{ a{ color: $white-color; &:hover{ opacity: .8; } } } .post-meta-info{ li{ color: $white-color; } } .post-date-info{ color: $white-color; } } &.ts-green-heighlight{ background: $green-color; .post-cat{ background: $green-color; &:before{ border-color: transparent transparent transparent $green-color; } } } &.ts-blue-heighlight{ background: $blue-color; .post-cat{ background: $blue-color; &:before{ border-color: transparent transparent transparent $blue-color; } } } &.ts-blue-light-heighlight{ background: $blue-light-color; .post-cat{ background: $blue-light-color; &:before{ border-color: transparent transparent transparent $blue-light-color; } } } &.ts-pink-heighlight{ background: $pink-color; .post-cat{ background: $pink-color; &:before{ border-color: transparent transparent transparent $pink-color; } } } &.ts-yellow-heighlight{ background: $yellow-color; .post-cat{ background: $yellow-color; &:before{ border-color: transparent transparent transparent $yellow-color; } } } } /*---------------------------- watch now featured ------------------------------*/ .ts-video-btn{ position: absolute; bottom: 0; font-size: 80px; right: 0; left: 0; top: 100px; margin: auto; display: block; text-align: center; color: $white-color; z-index: 1; &:hover{ color: $white-color; } } .post-list-box{ .nav-link{ padding: 20px 0; border-bottom: 1px solid #e7e7e7; &:first-of-type{ padding-top: 0; } &:last-of-type{ border-bottom: none; padding-bottom: 0; } } .post-content{ img{ width: 128px; height: 85px; margin-right: 15px; } .post-title{ &:hover{ color: $primary-color; } } } &.ts-list-post-box.ts-grid-content{ .post-content{ img{ width: 110px; height: auto; margin-right: 15px; } } } } .watch-post{ .ts-overlay-style{ .item{ min-height: 343px; } } } .item{ &:hover{ .ts-post-thumb{ img{ transform: scale(1.2); } } } } /*--------------------------------- tranding post ------------------------------------*/ .ts-grid-box.ts-col-box{ padding: 40px 15px 22px 20px; .post-cat{ margin-left: 0; } .ts-title{ &:before{ left: -15px; } } .item{ margin-bottom: 26px; &:last-of-type{ margin-bottom: 0; } } .post-date-info{ display: block; } .post-content{ p{ margin-top: 8px; } } } .ts-tranding-post{ padding: 30px 0 0 0; .ts-post-thumb{ margin-bottom: 0; } .ts-title{ margin-left: 30px; } .ts-arrow{ position: absolute; right: 15px; top: 28px; a{ padding: 0 8px; color: #101010; display: inline-block; position: relative; font-size: 20px; &:hover{ color: $primary-color; } &.control-prev{ &::before{ position: absolute; right: -2px; top: -3px; width: 1px; height: 17px; background: #ddd; content: ''; bottom: 0; margin: auto; display: block; text-align: center; } } } } .slider-indicators { background: #2e55bd; } .slider-indicators.carousel-indicators{ list-style: none; padding: 0; position: relative; display: block; margin: 0; width: 100%; bottom: 0; > li{ float: left; cursor: pointer; width: 50%; display: inline-block; margin: 0; height: auto; text-indent: 1px; background: transparent; &:before{ position: absolute; right: -4px; left: auto; display: block; width: 1px; height: 48px; content: ""; background: #233f88; bottom: 0; top: 0; margin: auto; } &:after{ position: absolute; right: -3px; left: auto; display: block; width: 1px; height: 48px; content: ""; background: #6c7ca5; bottom: 0; top: 0; margin: auto; } &:last-child{ &:before, &:after{ display: none; } } &.active{ border-bottom: 4px solid $yellow-color; } } } .slider-indicators .post-content { padding: 20px 20px 17px; .post-count{ width: 60px; height: 60px; @include border-radius(50%); border: 1px solid #adc3ff; font-size: 20px; text-align: center; color: #fff; align-items: center; align-self: center; /* margin: auto; */ display: block; align-content: center; padding: 0 17px; margin-right: 10px; background: #2b50b1; } } } /*-------------------------- social list ----*/ .ts-social-list{ display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ flex: 0 0 33.3%; max-width: 33.3%; text-align: center; font-size: 13px; font-weight: 500; font-family: $heebo; a{ i{ font-size: 16px; width: 45px; height: 45px; display: block; text-align: center; color: $white-color; @include border-radius(4px); padding: 15px 0; margin: auto auto 8px; } } b{ display: block; color: $title-color; margin-bottom: 2px; line-height: 13px; font-size: 13px; font-weight: 500; font-family: $heebo; } span{ display: block; color: $gray-color; font-size: 13px; line-height: 19px; } } } /*-------------- right sidebar ---*/ .widgets{ margin-bottom: 30px; .ts-social-list{ li{ margin-bottom: 15px; &:nth-last-child(1), &:nth-last-child(2), &:nth-last-child(3){ margin-bottom: 0; } } } &:last-of-type{ margin-bottom: 0 } .ts-overlay-style{ .item{ min-height: inherit; .post-content{ padding: 13px 20px; } } } ul{ li{ font-size: 14px; color: #232323; font-family: $arimo; a{ font-size: 14px; color: #232323; &:hover{ color: $primary-color; } } } } .category-list{ li{ display: block; clear: both; margin-bottom: 20px; a{ span{ float: right; color: $white-color; padding: 1px 5px; display: inline-block; @include border-radius(50%); } } &:last-child{ margin-bottom: 0; } } } &.post-tab-list{ .widget-title:before{ left: -15px; } .post-content.media{ margin-bottom: 10px; padding-bottom: 10px; &:last-of-type{ margin-bottom: 0; padding-bottom: 0px; } } } &.tag-list{ ul{ li{ display: inline-block; a{ border: 1px solid #e7e7e7; padding: 5px 10px; @include border-radius(36px); line-height: 36px; &:hover{ background: $primary-color; border-color: $primary-color; color: $white-color; } } } } } &.ts-grid-box.ts-col-box{ padding: 30px 15px 22px; } &.widgets-populer-post{ padding: 30px 15px 20px; .widget-title{ margin-left: 15px; } .post-content.media{ margin-bottom: 12px; padding-bottom: 12px; &:last-of-type{ margin-bottom: 0; padding-bottom: 0; } } } &.ts-social-list-item{ ul{ margin: -4px 0; li{ display: inline-block; a{ text-align: center; display: block; min-width: 57px; font-size: 13px; padding: 8px 0; margin: 4px 2px; color: #fff; i{ display: block; font-size: 16px; margin-bottom: 9px; } b, span{ display: block; margin-bottom: 0; line-height: 13px; cursor: pointer; } b{ font-weight: 600; margin-bottom: 4px; } span{ font-size: 10px; } } } .ts-facebook{ a{ background: $facebook; } } .ts-twitter{ a{ background: $twitter; } } .ts-google-plus{ a{ background: $google-plus; } } .ts-linkedin{ a{ background: $linkedin; } } .ts-pinterest{ a{ background: $pinterest; } } .ts-youtube{ a{ background: $youtube; } } .ts-instragram{ a{ background: $instragram; } } .ts-dribble{ a{ background: $dribble; } } .ts-behance{ a{ background: $behance; } } } } &.widgets-item{ .widget-title{ margin-left: 20px; &:before{ left: -20px; background: $primary-green; } } } .ts-widget-newsletter{ background: $primary-color; padding: 30px; .newsletter-introtext{ h4{ font-size: 20px; color: $white-color; font-weight: 500; font-family: $heebo; margin-bottom: 10px; } p{ color: #fff; font-size: 15px; margin-bottom: 18px; } } .newsletter-form{ .form-group{ margin-bottom: 0; } .form-control{ width: 100%; border-radius: 0; outline: none; margin-bottom: 25px; height: 40px; font-size: 12px; } .btn{ background:#861714; padding: 12px 30px; &:hover{ background: $primary-color; } } } } &.single-widget{ .widget-title{ margin-left: 20px; &:before{ left: -20px; background: $primary-blue; } } .post-tab-list{ padding: 0; } } .blue-dark-heighlight{ .post-cat{ color: $primary-blue-dark; } .post-content{ .post-title{ a{ color: $white-color; &:hover{ color: $white-color; } } &.md{ margin-bottom: 15px; } } p{ color: $white-color; } .post-date-info{ color: #a3b7ca; } } } } .widget-banner, .posts-ad{ img{ max-width: 100%; } } .ts-block-social-list{ li{ margin-bottom: 10px; &:last-child{ margin-bottom: 0; } a{ display: block; padding: 7px 10px; color: $white-color; position: relative; i{ width: 34px; height: 34px; @include border-radius(2px); text-align: center; color: $white-color; padding: 10px 0; margin-right: 5px; } b, span{ color: $white-color; font-weight: 500; font-family: $heebo; text-transform: capitalize; } span{ position: absolute; right: 10px; top: 14px; bottom: 0; margin: auto; font-weight: 400; } } &.ts-facebook{ a{ background: $facebook; i{ background: #324c82; } } } &.ts-twitter{ a{ background: $twitter; i{ background: #4892cb; } } } &.ts-google-plus{ a{ background: $google-plus; i{ background: #bc4031; } } } &.ts-pinterest{ a{ background: $pinterest; i{ background: #a10718; } } } &.ts-linkedin{ a{ background: $linkedin; i{ background: #11638a; } } } &.ts-youtube{ a{ background: $youtube; i{ background: #ce3425; } } } } } .widget-title{ font-size: 20px; font-weight: 500; margin-bottom: 25px; position: relative; &:before{ position: absolute; left: -30px; top: 0; width: 3px; height: 100%; content: ''; background: #d72924; } } .widgets-title{ margin-bottom: 30px; position: relative; span{ position: relative; font-family: $heebo; font-size: 14px; font-weight: 400; background: $primary-green; color: $white-color; line-height: 26px; padding: 0 5px; padding: 2px 15px; display: inline-block; &:before{ position: absolute; width: 20px; height: 100%; content: ''; background: $white-color; right: -20px; top: 0; } } &:after{ position: absolute; right: 0; bottom: 13px; width: 100%; height: 1px; background: #84be38; content: ''; z-index: -1; } } .topic-list{ text-align: center; position: relative; display: block; margin: -30px auto 30px; border: none; background: $primary-color; color: $white-color; padding: 10px 40px; outline: none; font-size: 15px; font-weight: 700; font-family: $heebo; text-transform: uppercase; appearance: none; min-width: 200px; } /*------------------------ more news --------------------------*/ .ts-grid-box-heighlight{ background:#7f85ff; .ts-title{ color: $white-color; &::before{ background: $white-color; } } } #more-news-slider { margin-bottom: -80px; } /*----------------------- footer social --------------------------*/ .ts-footer-social-list{ background: $white-color; padding: 30px 0; margin-bottom: 5px; margin-top: 3px; &.section-bg{ background: #f7f7f7; } } .footer-social{ li{ display: inline-block; margin-right: 38px; a{ font-size: 13px; color: $white-color; font-weight: 500; color: #888888; text-transform: uppercase; font-family: $heebo; i{ font-size: 16px; color: $white-color; width: 35px; height: 35px; @include border-radius(50%); text-align: center; padding: 9px 0px; margin-right: 8px; } span{ font-family: $heebo; &:hover{ color: #222; } } } &:last-child{ margin-right: 0; } } } .footer-social-list{ li{ display: inline-block; a{ font-size: 14px; margin-left: 18px; i{ background: transparent; } } &.ts-facebook{ a{ color: $facebook; } } &.ts-twitter{ a{ color: $twitter; } } &.ts-google-plus{ a{ color: $google-plus; } } &.ts-pinterest{ a{ color: $pinterest; } } &.ts-youtube{ a{ color: $youtube; } } &.ts-linkedin{ a{ color: $linkedin; } } } } /*----------------------------- ts-newslatter ------------------------------*/ .ts-newslatter{ background: $white-color; padding: 40px 0; &.section-bg{ background: #f7f7f7; .newsletter-form .email-form-group .form-control{ background: transparent; } } .ts-newslatter-content{ h2{ margin-bottom: 17px; font-size: 30px; font-weight: 500; } p{ margin-bottom: 0; padding-right: 50px; color: #888; } } .newsletter-form{ .email-form-group{ padding-left: 40px; position: relative; i{ position: absolute; left: 0; font-size: 20px; top: 15px; } .form-control{ border: none; outline: none; border-bottom: 1px solid $gray-color; @include border-radius(0); padding: 9px 0; font-family: $heebo; font-size: 12px; &:focus{ outline: none; box-shadow: none; } &::placeholder{ font-family: $heebo; letter-spacing: 1.2px; } } } .ts-submit-btn{ margin-left: 20px; .btn{ background: #e91e63; &:hover{ background: $primary-color; } } } } } /*--------------------------- ts-footer --------------------------*/ .footer-menu{ margin-bottom: 14px; ul{ li{ display: inline-block; a{ font-size: 14px; color: $white-color; margin: 0 22px; font-family: $arimo; opacity: .7; &:hover{ opacity: 1; } } } } } .ts-footer{ background: #4e65ff; padding: 25px 0; &.ts-footer-1{ background: #f8f8f8; padding-bottom: 15px; .footer-social{ padding-bottom: 22px; border-bottom: 1px solid #ddd; li{ a{ i{ background: transparent; color: #888888; width: auto; height: auto; } span{ letter-spacing: 1px; } } } } .copyright-text{ padding-top: 15px; p{ color: #888; a{ color: $primary-green; text-transform: uppercase; } } } } &.ts-footer-2{ background: transparent; .copyright-text{ p{ color: #232323; a{ color: $primary-green; } } } } &.ts-footer-3{ background: #000032; .footer-logo{ padding: 34px 0 44px; } .footer-menu{ margin-bottom: 22px; li{ a{ text-transform: uppercase; opacity: 1; font-weight: 700; font-family: $heebo; position: relative; &:hover{ color: $primary-blue; } &:after{ position: absolute; right: -24px; top: 4px; width: 1px; height: 12px; background: #4d4d70; content: ''; transform: rotate(-20deg); } } &:last-child{ a{ &:after{ display: none; } } } } } .copyright-text{ margin-top: 32px; p{ font-size: 14px; font-weight: 700; font-family: $heebo; text-transform: uppercase; opacity: 1; color: $white-color; } span,a{ font-size: 14px; font-weight: 400; color: #6f6f8b; } } .footer-social-list{ margin-top: 32px; li{ a{ color: $white-color; margin-left: 54px; &:hover{ color: $primary-blue; } } } } } } .copyright-text{ p{ color: #cad0ff; margin-bottom: 0; font-size: 14px; } } /*------------------------------ single post page -------------------------------*/ .single-post-wrapper{ padding: 30px 0; } /*-------------- breadcrumb ---------------- */ .post-featured-image{ position: relative; img{ width: 100%; max-height: 550px; } } .breadcrumb{ background: $white-color; webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); padding: 0; border-radius: 0; li{ display: inline-block; padding: 7px 34px 7px 17px; color: $primary-color; position: relative; &:before{ position: absolute; right: 0; top: 0; content: ''; background: url(../images/icon/angle.png) no-repeat center center /contain; width: 20px; height: 100%; } a{ font-size: 13px; color: #5c5c5c; i{ margin-right: 8px; } } } } .ts-breadcrumb{ padding: 0; li{ display: inline-block; list-style: none; font-size: 13px; color: #a9a9a9; a{ color: #a9a9a9; } } >li+li:before { content: "\f105"; font-family: FontAwesome; padding: 0 6px; color: #777; } } .single-post.content-wrapper, .comments-form.ts-grid-box{ padding: 30px 80px 40px; } .single-post{ .post-meta-info{ margin-bottom: 35px; padding-left: 0; li{ &.author{ padding-left: 60px; a{ img{ top: -6px; width: 40px; height: 40px; } } } a{ &.post-cat{ position: relative; } } &.share-post{ a{ color: $white-color; i{ font-size: 16px; width: 35px; height: 35px; border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; text-align: center; padding: 9px 0px; margin-right: 0px; background: $primary-color; } } } } } .post-media{ margin: 0 -80px; } p{ font-size: 16px; line-height: 28px; color: #232323; margin-bottom: 25px; span{ background: #fff9b5; padding: 5px 6px; } } .text-bg{ background: #f7f7f7; font-size: 13px; font-style: italic; text-align: center; padding: 9px; margin-bottom: 30px; } .entry-content{ .tie-dropcap { // &::first-letter{ // color: #a7a7a7; // float: left; // font-family: $heebo; // font-size: 120px; // line-height: 80px; // padding-top: 4px; // padding-right: 12px; // padding-left: 3px; // font-weight: 700; // } color: #a7a7a7; float: left; font-family: $heebo; font-size: 120px; line-height: 80px; font-weight: 700; background: transparent; margin-right: 17px; padding: 0; } h3{ font-size: 20px; font-weight: 500; margin-bottom: 26px; line-height: 28px; } } ul{ margin-bottom: 25px; padding-left: 20px; li{ font-size: 16px; line-height: 28px; color: #232323; list-style: inside; } } .gallery-img{ position: relative; padding: 20px 0; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; margin-bottom: 30px; &:after{ display: block; clear: both; content: ""; } img{ float: left; width: 20%; } } } p{ img.float-left{ margin-right: 30px; margin-bottom: 30px; } } .post-video{ position: relative; margin-bottom: 35px; img{ width: 100%; } &:before{ content: " "; position: absolute; display: block; width: 100%; height: 100%; z-index: 1; bottom: 0; left: 0; background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.85))); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(14%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.85))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); } .post-video-content{ padding: 20px; position: absolute; left: 0; bottom: 0; z-index: 1; h3{ margin-bottom: 0; a{ color: $white-color; &:hover{ color: $primary-color; } } } } .ts-play-btn{ position: relative; top: 0; left: 0; right: auto; font-size: 20px; width: 60px; height: 60px; border: 1px solid #92999a; border-radius: 50%; padding: 18px 0; display: block; text-align: center; font-size: 15px; background: #00292f; float: left; color: $white-color; margin-right: 20px; &:hover{ background: $primary-color; } } } /* author box --*/ .author-box{ position: relative; padding: 20px 0 20px 100px; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; margin-bottom: 30px; .author-img{ position: absolute; left: 0; top: 0; width: 80px; height: 80px; @include border-radius(50%); top: 16px; } .author-name{ font-size: 14px; text-transform: uppercase; font-weight: 500; float: left; } p{ margin-bottom: 0; } .authors-social{ float: right; a{ font-size: 14px; margin-left: 33px; &:first-of-type{ margin-left: 0; } &.ts-twitter{ color: $twitter; } &.ts-google-plus{ color: $google-plus; } &.ts-facebook{ color: $facebook; } &.ts-linkedin{ color: $linkedin; } &:hover{ color: $primary-color; } } } &.author-box-item{ border: none; padding: 0 0 0 100px; margin-bottom: 0; .author-name{ a{ text-transform: lowercase; } } p{ margin: 15px 0 20px; } .post-meta-info{ margin-bottom: 0; li{ a{ font-size: 14px; color: #232323; } } } } } /* post navigation --*/ .post-navigation{ a{ span{ font-size: 12px; font-weight: 600; font-family: $heebo; text-transform: uppercase; display: block; color: $title-color; } p{ font-size: 14px; font-weight: 500; font-family: $heebo; margin-bottom: 0; line-height: 20px; } } .post-previous, .post-next{ width: 50%; position: relative; &:hover{ span{ color: $primary-color; } } } .post-next{ text-align: right; padding-right: 120px; img{ right: 0; left: auto; } } .post-previous{ padding-left: 120px; border-right: 1px solid #e7e7e7; img{ left: 0; } } img{ position: absolute; top: 0; width: 100px; height: 70px; } } /*------------------------- comments-form --------------------------*/ .comments-form{ .comment-reply-title{ font-weight: 500; line-height: 32px; margin-bottom: 20px; } .comment-form-cookies-consent{ margin-bottom: 30px; label{ font-size: 15px; font-family: $arimo; color: #232323; cursor: pointer; display: inline; } } } .ts-form{ .form-group{ margin-bottom: 26px; .form-control{ height: 45px; width: 100%; @include border-radius(0); &:focus{ box-shadow: none; border-color: $primary-color; } &.msg-box{ height: 185px; resize: none; } } } } .view-all-link { font-size: 14px; color: #a9a9a9; } /*------------- single post style 2 ---------------*/ .category-name-list{ margin-bottom: 20px; .post-cat{ position: relative; margin-left: 0; margin-right: 10px; } } .post-layout-1{ .post-meta-info{ margin-bottom: 40px; li{ &.author{ padding-left: 60px; a{ text-transform: uppercase; font-weight: 500; color: #232323; img{ width: 40px; height: 40px; top: -8px; } } } } } .breadcrumb{ margin-bottom: 2px; } .single-post p span{ background: transparent; color: $primary-color; } .gallery-img{ margin: 40px 0; } } .single-big-img{ min-height: 550px; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; display: block; .ts-video-btn{ top: 50%; transform: translateY(-15%); } } .img-ovarlay{ &:before{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: rgba(0,0,0, .3); } } /*------------ post layout 3 ----------------*/ .post-layout-2{ .single-big-img{ &:before{ position: absolute; left: 0; top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); content: ''; width: 100%; height: 100%; } .entry-header{ position: absolute; left: 0; bottom: 0; padding: 30px 80px; .post-title{ color: $white-color; } } } .post-meta-info{ li{ a{ color: $white-color; } &.author{ a{ text-transform: uppercase; } } &.share-post{ a{ i{ font-size: 16px; width: 35px; height: 35px; border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; text-align: center; padding: 9px 0px; margin-right: 0px; background: #d72924; } } } } } .breadcrumb{ margin-bottom: 2px; } } /*--------------------post-layout-4 ------------*/ .post-layout-3{ .content-wrapper.single-post{ padding-top: 0; } } .post-layout-7{ padding-top: 0; .single-big-img{ &:before{ position: absolute; left: 0; top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.85) 100%); content: ''; width: 100%; height: 100%; } .entry-header-item{ padding-top: 332px; padding-bottom: 40px; } .entry-header{ .post-title{ color: $white-color; } } } .post-meta-info{ li{ a{ color: $white-color; } &.author{ a{ text-transform: uppercase; } } &.share-post{ a{ i{ font-size: 16px; width: 35px; height: 35px; border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; text-align: center; padding: 9px 0px; margin-right: 0px; background: #d72924; } } } } } } /*------------------ pos layout 6 -----------*/ .post-layout-6{ .single-post.content-wrapper{ margin-top: -150px; } } /*-------------- post-layout-10--------*/ .post-layout-10{ .entry-header{ background: $white-color; padding: 30px; .post-cat{ margin-left: 0; margin-right: 15px; margin-bottom: 20px; } } } /*----------- ---------------------------------- home 2 ----------------------------------*/ .ts-grid-box{ &.ts-category-title{ padding: 18px 30px; .ts-title{ margin-bottom: 0; } } } .ts-list-post-box{ .ts-post-thumb{ margin-bottom: 0; } &.ts-grid-content{ .post-content{ padding-top: 20px ; padding-bottom: 15px; box-shadow: none; border-bottom: 1px solid #f0f1f4; } .item{ .post-title{ margin-bottom: 5px; } &:last-of-type{ .post-content{ border-bottom: none; } box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); } } } } .post-list-box.ts-list-post-box.ts-grid-content{ .post-content{ &:last-of-type{ border-bottom: none; } } } /*-------- video slider ----*/ .flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;} .video-slider{ overflow: hidden; position: relative; .slider-link.next{ position: relative; } .post-video { margin-bottom: 0; .post-video-content{ padding: 40px; h3{ margin-bottom: 12px; } } .ts-play-btn{ position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin: auto; z-index: 1; background: $primary-color; border-color: $primary-color; } img{ max-height: 500px; } } .uk-position-small{ position: absolute; left: 40px; bottom: 170px; z-index: 1; font-size: 19px; background: #373839; color: #fff; width: 28px; height: 28px; float: left; position: relative; margin: 0; padding: 3px 0; text-align: center; &::after{ position: absolute; right: 0; top: 0; bottom: 0; width: 1px; height: 15px; background: #686869; content: ''; margin: auto; } &:last-of-type{ &:after{ display: none; } } svg{ width: 7px; } } } .category-style{ .ts-col-box.ts-grid-box{ padding: 30px 15px 22px; .post-cat{ margin-left: 20px; } .ts-title{ padding-left: 15px; } } } .ts-video-icon{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); right: 0; margin: auto; display: block; text-align: center; font-size: 48px; color: #fff; z-index: 2; &:hover{ color: $white-color; } } .category-box-item{ .ts-grid-box{ .ts-post-thumb{ img{ max-height: 340px; } } } } .category-post-item1{ .ts-grid-box{ .ts-post-thumb{ img{ max-height:194px; } } } } .category-item{ padding-bottom: 24px; } .category-box-item-3{ .item{ p{ margin-bottom: 0; } } } .category-layout-1{ margin-bottom: -80px; } .category-layout-2{ .ts-grid-box.ts-grid-content{ margin-bottom: 30px; } } .entry-cat-header{ .ts-title{ margin-bottom: 0; } } .category-layout-3{ .post-meta-info li a{ color: #232323; text-transform: uppercase; } } .post-cat.no-bg{ margin-left: 0; background: transparent; color: $primary-color; margin-bottom: 10px; } .post-cat.no-bg.pink-color{ color: #ff5575; } .post-cat.orange-color.no-bg{ color: $orange-color; } .post-cat.blue-color.no-bg{ color: $blue-color; } .post-cat.green-color.no-bg{ color: $green-color; } .post-cat.yellow-color.no-bg{ color: $yellow-color; } .category-layout-5{ .ts-grid-box{ box-shadow: none; } } .category-layout-6{ .entry-cat-header{ .ts-title{ margin-left: 30px; } } } .ts-post-thumb{ position: relative; width: 100%; height: 100%; overflow: hidden; margin-bottom: 20px; .post-cat{ position: absolute; left: 0; top: 0; margin-left: 30px; } img{ @include transition(); } } /*--------------------- ts-category-list----------*/ .ts-category-list{ li{ display: inline-block; a{ font-size: 13px; color: #232323; background: #e9e9e9; display: block; line-height: 22px; padding: 2px 11px; margin-left: 6px; @include border-radius(2px); &.ts-blue-bg{ background: $blue-color; color: $white-color; } } } } /*------------------------- pagination --------------*/ .pagination{ display: block; li{ display: inline-block; a{ display: block; width: 30px; height: 30px; text-align: center; @include border-radius(50%); line-height: 31px; font-size: 14px; color: #888888; } &.active, &:hover{ a{ background: $primary-color; color: $white-color; } } } } .ts-pagination-1{ margin-top: 30px; .pagination{ li{ a{ &:hover{ background: $primary-green; } } &.active{ a{ background: $primary-green; } } } } } /*-------- vertion css -----*/ .post-style-1{ position: relative; margin: 0; .p-1{ padding:0 2px !important; } .item{ min-height: 500px; } &.ts-overlay-style .overlay-post-content{ .post-title{ margin-bottom: 5px; } } } .post-box-style{ .ts-grid-box{ box-shadow: none; background: transparent; } .ts-grid-content{ .post-content{ background: transparent; box-shadow: none; } .item:last-of-type{ box-shadow: none !important; .post-content{ border-bottom: none; } } } .ts-overlay-style .overlay-post-content{ .post-meta-info{ li.active{ color: $primary-green; } } } } /*---------- ts-title-item -------------*/ .ts-title-item{ position: relative; margin-bottom: 30px; .view-all-link { position: relative; top: -8px; } &.title-item-1{ .ts-title{ &:before{ background: $primary-blue-dark; } &:after{ display: none; } } } &.white{ .ts-title{ color: $white-color; } } } .ts-cat-title{ margin-bottom: 0; line-height: 0; span{ position: relative; font-family: $heebo; font-size: 14px; font-weight: 400; background: $primary-green; color: $white-color; line-height: 26px; padding: 0 5px; padding: 2px 15px; display: inline-block; z-index: 1; &:before{ position: absolute; width: 20px; height: 100%; content: ''; background: $white-color; right: -20px; top: 0; } } &:after{ position: absolute; right: 0; bottom: 13px; width: 100%; height: 1px; background: #84be38; content: ''; z-index: 0; } } .section-bg{ .ts-cat-title{ span{ &:before{ background: #f7f7f7; } } } } .ts-grid-item{ .overlay-post-content{ .post-title{ a{ &:hover{ color: $white-color; } } } } padding: 0; background: transparent; box-shadow: none; &.widgets-populer-post{ padding: 0; .post-content.media{ padding-bottom: 17px; margin-bottom: 17px; border-bottom: 1px solid #ededed; &:last-of-type{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } } } .ts-grid-content .item:last-of-type{ box-shadow: none; .post-content{ border-bottom: none; } } &.ts-grid-item1{ .col-lg-6{ .ts-post-thumb{ img{ max-height: 230px; width: 100%; } } } } .ts-overlay-style{ .post-meta-info{ li{ &.author{ a{ &:hover{ color: $primary-green; } } } } } } } .ts-post-style-2{ .ts-overlay-style{ .item { min-height: 450px; } } } .grid-style-1{ .ts-post-thumb{ margin-bottom: 15px; } } .ts-grid-style-2{ .post-cat{ margin-left: 0; margin-bottom: 12px; } } /*--------------------- food css -----*/ #featured-slider-3{ .item{ min-height: 430px; } .owl-dots { position: absolute; right: 0; top: auto; z-index: 1; bottom: 21px; left: 0; margin: auto; display: block; text-align: center; .owl-dot{ span{ background: #fff; } &.active{ span{ background: #fff; } } } } } .ts-featured-post{ .item{ position: relative; background-position: 50% 50%; -webkit-background-size: cover; background-size: cover; -webkit-backface-visibility: hidden; &:before{ background: linear-gradient(to right, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.95) 100%); } } .overlay-post-content{ max-width: 520px; right: 0; top: 46%; bottom: 0; margin: auto; transform: translateY(-50%); z-index: 1; text-align: center; .post-cat-name{ margin-bottom: 30px; padding-bottom: 25px; position: relative; display: block; &:before{ position: absolute; left: 0; bottom: 0; right: 0; width: 45px; height: 1px; background: #897f7a; margin: auto; content: ''; } } .post-title{ margin-bottom: 20px; } } } .post-cat-name{ font-size: 13px; font-weight: 700; text-transform: uppercase; font-family: $heebo; color: $primary-green; margin-bottom: 10px; display: inline-block; letter-spacing: 0.65px; &:hover{ color: $primary-green; } } .post-author-name{ font-size: 12px; line-height: 26px; color: $white-color; text-transform: uppercase; font-family: $arimo; &:hover{ color: $primary-green; } } .post-content-box{ .ts-post-thumb{ margin-bottom: 0; } .post-content{ padding: 18px 15px; margin: -20px 20px 0px; background: $white-color; text-align: center; } // .post-title{ // a{ // &:hover{ // color: $primary-green; // } // } // } } .featured-content-box{ .post-content{ padding: 35px 35px; margin: -40px 40px 0px; } } /*----- post-list-tab------*/ .post-list-tab{ .post-tab-list{ padding: 20px 0 0; } } .widgets{ &.post-list-tab{ .nav-tabs li a{ line-height: 20px; padding-bottom: 12px; } img.sidebar-img { width: 86px; height: 63px; } } } .ts-title-item{ .ts-title{ margin-left: 20px; &:before{ background: $primary-green; left: -20px; } &:after{ position: absolute; right: 0; bottom: 10px; width: 100%; height: 1px; background: #e4e4e4; content: ''; z-index: 0; } span{ background: #fff; z-index: 1; position: relative; padding: 0px 20px 0 0; } } &.bg-gray{ .ts-title{ span{ background: #f7f7f7 } } } } .ts-overlay-item{ .ts-overlay-style{ .item{ .ts-post-thumb{ margin-bottom: 0; } } .ts-video-icon{ &:hover{ color: $white-color; } } } } .post-list{ .post-meta-info li{ margin-right: 18px; a{ color: #232323; font-weight: 500; } } .post-content-box .post-content { padding: 26px 15px; margin: -40px 20px 0px; } } .hot-topics-item{ .post-list{ .post-content p{ padding-right: 20px; } } .widgets.widgets-item.widgets-populer-post{ padding: 0; } } /*----------------------------- instragram photo --------------------------*/ .instagramPhoto{ padding: 0; position: relative; } .ts-single-inst { width: 100%; overflow: hidden; img{ width: 100%; @include transition(); &:hover{ opacity: 0.7; transform: scale(1.06); } } } /*----------- --------------- technology index css ----------------------------*/ .featured-section-item{ background: #000032; } .ts-grid-features-box{ padding: 60px 40px 100px; background: $white-color; .post-cat{ margin-left: 0; margin-bottom: 20px; } .post-content{ .post-title{ a{ &:hover{ color: $primary-blue; } } } p{ font-size: 15px; margin-bottom: 25px; color: #777777; } } .post-meta-info{ li{ &.active{ color: $primary-blue; } } } } #featured-slider-4{ .row{ margin: 0; } .item{ min-height: 485px; } .owl-nav { position: absolute; right: auto; top: auto; left: 25px; bottom: 50px; .owl-prev:before{ display: none; } } .owl-nav .owl-next i, .owl-nav .owl-prev i{ font-size: 16px; } } .overlay-heighlight-blue{ .item{ .post-date-info{ color: $white-color; } &:before{ background-image: linear-gradient( 0deg, rgb(64,195,246) 0%, rgba(43,192,245,0) 100%); opacity: .6; } } } .overlay-heighlight-green{ .post-date-info{ color: $white-color; } .item{ &:before{ background-image: linear-gradient( 0deg, rgb(12,211,31) 0%, rgba(12,211,31,0) 100%); opacity: .6; } } } .overlay-heighlight-red{ .post-date-info{ color: $white-color; } .item{ &:before{ background-image: linear-gradient( 0deg, rgb(247,27,48) 0%, rgba(211,12,35,0) 100%); opacity: .6; } } } .overlay-heighlight-blue{ .post-date-info{ color: $white-color; } .item{ &:before{ background-image: linear-gradient( 0deg, rgb(64,195,246) 0%, rgba(43,192,245,0) 100%); opacity: .6; } } } .overlay-heighlight-orange{ .post-date-info{ color: $white-color; } .item{ &:before{ background-image: linear-gradient( 0deg, rgb(242,82,11) 0%, rgba(43,192,245,0) 100%); opacity: .7; } } } .overlay-heighlight-blue-dark{ .post-date-info{ color: $white-color; } .item{ &:before{ background-image: linear-gradient( 0deg, rgb(0,125,255) 0%, rgba(43,192,245,0) 100%); opacity: .7; } } .post-meta-info li.active { color: $primary-blue !important; } } .overlay-heighlight-yellow{ .post-date-info{ color: $white-color; } .item{ &:before{ background-image: linear-gradient( 0deg, rgb(177,142,21) 0%, rgba(255,178,45,0) 100%); opacity: .8; } } .post-meta-info li.active { color: $primary-blue !important; } } .ts-heading{ margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; .ts-title{ margin-left: 20px; margin-bottom: 0; &:before{ left: -20px; background: $primary-blue; } } .view-all-link{ &:hover{ color: $primary-blue; } } &.white{ .ts-title{ color: $white-color; } .view-all-link{ position: relative; color: $white-color; } } } .featured-post{ .item{ background-position: 50% 50%; -webkit-background-size: cover; background-size: cover; -webkit-backface-visibility: hidden; } } .featured-post-1{ .item{ min-height: 460px; } } .featured-post-2{ .item{ min-height: 314px; } } /*---------------------------- vedio-section ------------------------------*/ .vedio-section{ padding: 30px 0 10px; position: relative; &:before{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: rgba(0,0,50, .7); } } .post-category-item{ .item{ min-height: 330px; } } /*----------------------- load-more -------------------------*/ .load-more{ margin-top: 20px; a{ color: #a9a9a9; font-size: 14px; } i{ display: block; font-size: 50px; margin-bottom: 5px; } } .blue-dark-heighlight{ background: $primary-blue-dark; color: $white-color; } /*---------------------------- footer 4 ------------------------*/ .ts-footer-4{ background:#1a2130; padding: 40px 0; .footer-top{ padding: 0px 0 35px; } .border-top{ border-color: #313845; } .footer-social-list{ li{ a{ color: $white-color; } } } } .footer-widget{ position: relative; .widget-title{ color: $white-color; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; &:before{ display: none; } } ul{ li{ font-size: 14px; line-height: 32px; color: #a8a9ad; a{ color: #a8a9ad; &:hover{ color: $primary-blue-dark; } } } } p{ color: #f0f0f1; font-size: 15px; } &.newsletter-widgets{ padding-left: 50px; padding-top: 20px; h4{ font-size: 20px; font-weight: 500; color: $white-color; margin-bottom: 40px; } .newsletter-widgets-form{ position: relative; margin-bottom: 30px; .newsletter-email{ width: 100%; height: 40px; padding: 0 100px 0 20px; &::placeholder{ letter-spacing: 1.2px; color: #a9a9a9; } } .btn{ position: absolute; right: 0; top: 0; height: 40px; padding: 10px 37px; background: $primary-yellow; &:hover{ background: #232323; } } p{ color: #8b9196; } } } } .ts-footer-5{ .footer-widget{ &.border-right{ &:after{ position: absolute; right: -10px; top: 0; width: 1px; height: 150px; bottom: 0; margin: auto; content: ''; background: #454e56; } } .footer-logo{ padding: 20px 0; } .footer-social-list{ li{ a{ &:hover{ color: $primary-yellow; } } &:first-child{ a{ margin-left: 0; } } } } p{ padding-right: 50px; } } } .copyright-section{ background: #101727; .footer-menu{ margin-bottom: 0; } } .link-img{ display: block; width: 100%; min-height: 100px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .img-height-310{ min-height: 324px; } /*--------------- crypto css --------------*/ .header-box-right{ background: #10181f; .navigation{ height: 85px; background: $primary-yellow; position: relative; &:before{ position: absolute; right: -100%; top: 0; width: 100%; content: ''; height: 100%; background: $primary-yellow; } } .nav-menu{ >li{ >a{ height: 85px; line-height: 45px; &:before{ position: absolute; width: 5px; height: 5px; @include border-radius(50%); background: $white-color; content: ''; left: 0; right: 0; margin: auto; bottom: 0px; opacity: 0; visibility: hidden; @include transition(); } &:hover{ background: transparent; color: $white-color; &:before{ opacity: 1; visibility: visible; bottom: 20px; } } } &.active{ >a{ background: transparent; color: $white-color; &:before{ opacity: 1; visibility: visible; bottom: 20px; } } } .megamenu-list{ li{ a{ &:hover{ color: $primary-yellow; } } } } .nav-dropdown{ li{ a{ // background: #232323; // color: $white-color; &:hover{ color: $primary-yellow; } } } } &:first-child{ a{ padding-left: 35px; } } } } .right-menu li .nav-search { height: 85px; .nav-search-button{ line-height: 88px; text-align: right; background: transparent; color: #232323; } } } .top-bar-item{ .ts-date{ color: $white-color; } .ts-top-nav{ li{ a{ color: $white-color; } } } } .category-post-style1{ .post-content{ .post-cat{ margin-left: 0; margin-bottom: 15px; } p{ font-size: 15px; color: #232323; } } } /*-------------- ------------- breakink-news-section ----------------------------------*/ .breakink-news-section{ border-bottom: 1px solid #e5e5e5; .ts-breaking-news { padding: 7px 20px 1px 0; .breaking-news-content { width: 85%; } } #breaking_slider { .owl-nav { top: -7px; .owl-prev, .owl-next { width: 34px; margin-left: 0; height: 38px; font-size: 24px; border-left: 1px solid #e5e5e5; background: transparent; &:hover{ color: $primary-yellow; } } .owl-next{ border-right: 1px solid #e5e5e5; } } } } .featured-post-style{ .item{ min-height: 498px; } .post-cat{ margin-left: 0; margin-bottom: 19px; } .overlay-post-content{ .post-title{ margin-bottom: 15px; } } } .ts-grid-style-3{ .ts-overlay-style{ margin-bottom: 4px; .item{ min-height: 247px; .post-cat{ margin-left: 0; margin-bottom: 13px; } } } &.p-1{ padding-top: 0 !important; } } .currency-list-items{ padding: 18px; position: relative; overflow: hidden; padding-right: 80px; display: block; h4{ font-size: 14px; font-weight: 700; color: $white-color; text-transform: uppercase; letter-spacing: 0.7px; } span{ font-size: 11px; text-transform: uppercase; line-height: 15px; color: #efefef; display: block; } .currency-right-content{ position: absolute; right: 15px; bottom: 0; margin: auto; transform: translateY(-50%); z-index: 1; } img{ position: absolute; right: 29px; bottom: -15px; opacity: .8; } &.currency-blue-dark-heighlight{ background-image: linear-gradient(to right, #242279 , #6663ae); } &.currency-yellow-heighlight{ background-image: linear-gradient(to right, #ff8f00 , #ffbd00); } &.currency-gray-heighlight{ background-image: linear-gradient(to right, #556685 , #98a2b5); } &.currency-blue-heighlight{ background-image: linear-gradient(to right, #0d21b6 , #2a6cd4); } &.currency-green-heighlight{ background-image: linear-gradient(to right, #63a20a , #a2c821); } } .bg-dark-item{ background: #121524; .ts-grid-box{ background: transparent; } .nav-tabs { border-bottom: none; margin-bottom: 8px; li { a{ color: $white-color; &:hover{ color: $white-color; } &.active{ background: transparent; &:before{ opacity: 0; } } } } } .post-title{ a{ color: $white-color; } } .post-tag{ a{ color: $primary-yellow; } } .post-tab-list { .post-content.media{ border-bottom: 1px solid #2b2b2b; &:last-of-type{ border-bottom: none; } } } } /*-------------------------- navbar-standerd ---------------------------*/ .navbar-standerd{ background: $white-color; border-top: 1px solid #ddd; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); .navigation{ height: 80px; .nav-brand{ padding: 0; } } .nav-menu{ >li{ >a{ height: 80px; line-height: 42px; &:hover{ background: $white-color; } } &.active{ > a{ color:$primary-color; background: $white-color; } } } } .right-menu{ li{ a{ border-left: none; position: relative; color: #232323; height: 80px; line-height: 82px; &:before{ position: absolute; right: 0; top: 0; width: 1px; height: 20px; content: ''; bottom: 0; margin: auto; background: #232323; } } .nav-search .nav-search-button{ background: transparent; color: #232323; line-height: 84px; } } } &.nav-item{ .navigation{ height: 60px; } .nav-menu > li{ > a{ height: 60px; line-height: 19px; position: relative; &:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: $primary-color; content: ''; opacity: 0; visibility: hidden; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } } &.active{ >a{ &:before{ opacity: 1; visibility: visible; } } } } .right-menu li { a { height: 60px; line-height: 61px; color: #888888; &:before{ background: #888888; } } .nav-search .nav-search-button { line-height: 62px; color: #888888; } } } &.nav-bar-dark{ background: #272727; border-top: none; .navigation{ background: #272727; .nav-menu { >li{ >a{ color: $white-color; &:hover{ background: $primary-color; } } &.active{ > a{ background: $primary-color; } } } } .right-menu{ li{ a{ color: $white-color; &:before{ background: #5d5d5d; } } .nav-search .nav-search-button{ color: $white-color; } } } } } } .post-style-3{ .featured-post.ts-overlay-style{ .item{ min-height: 500px; } } .post-cat{ margin-left: 20px; } .post-title.large{ margin-bottom: 15px; font-weight: 500; } } .height-310{ min-height: 305px !important; } .height-190{ height: 190px !important; } .post-style-4{ .ts-overlay-style{ margin-bottom: 4px; } } .ts-heading-item{ .ts-title{ margin-left: 0; span{ background: $white-color; padding-right: 10px; position: relative; z-index: 1; } &:before{ display: none; } &:after{ position: absolute; right: 0; top: 13px; width: 100%; height: 1px; background: #616161; content: ''; } } } .ts-grid-box.bg-dark-item{ .ts-heading-item{ .ts-title{ span{ background: #121212; color: $white-color; } &:after{ background: #252525; } } } .post-content{ border-color:#252525; } .post-meta-info{ li.active{ a{ color: $primary-color; } } } } .ts-grid-item-2{ .post-cat{ margin-left: 0; margin-bottom: 16px; } .ts-post-thumb{ margin-bottom: 0; } .item{ .post-content { padding: 18px 0; border-bottom: 1px solid #e8e8e8; } &:last-of-type{ .post-content { border-bottom: none; } } } } .right-sidebar-1{ .widgets.widgets-item { .widget-title{ margin-left: 0; span{ background: $white-color; padding-right: 10px; position: relative; } &:before{ left: 0; background: $primary-color; width: 100%; height: 1px; bottom: 0; margin: auto; } } } } .ts-grid-box.widgets.border{ box-shadow: none; border: 1px solid #e3e3e3; } /*------------------ home default 5------------*/ #featured-slider-5{ .item{ min-height: 500px; &:hover:after{ display: none; } &:before{ background: rgba(0,0,0, .3); } } .overlay-post-content{ z-index: 1; top: 50%; transform: translateY(-31%); max-width: 570px; .post-content{ padding: 0 40px; } .post-title.lg{ margin-bottom: 20px; } } .post-cat{ margin-left: 0; margin-bottom: 15px; } .owl-dots{ top: 50%; right: 30px; transform: translateY(-50%); .owl-dot{ display: block; margin: 0; top: 0; line-height: 16px; span{ background: $white-color; } &.active{ span{ margin: 0; } } } } } /*------------------------------ 404 ------------------------------*/ .error-page{ padding: 80px 30px; .error-code{ h2{ font-size: 220px; font-weight: 500; color: #222222; line-height: 220px; } } .error-message{ h3{ font-size: 40px; margin-bottom: 16px; } } .error-body{ h4{ font-size: 22px; font-weight: 400; margin-bottom: 34px; } a{ background: $primary-color; &.btn{ padding: 17px 37px; &:hover{ background: $primary-dark; } } } } } /*-------------------------------- sport index css ------------------------------------*/ .top-bar{ &.transparent{ position: absolute; left: 0; top: 0; width: 100%; background: transparent; z-index: 2; #breaking_slider .owl-nav{ top: 0; right: -46px; .owl-prev, .owl-next{ color: $white-color; background:#111c20; } } .ts-breaking-news{ background: transparent; padding: 8px 20px 8px 0; .breaking-news-content{ width: 85%; } p{ a{ color: $white-color; } } } } } .header-box-transprent{ position: absolute; right: 0; left: 0; width: 100%; top: 40px; height: auto; z-index: 2; .ts-main-menu{ height: 65px; background: rgba(0,0,0, .6); .nav-header{ width: auto; height: 100%;; .nav-brand{ line-height: 64px; padding: 0 18px; } } .nav-menu{ >li{ >a{ height: 65px; padding: 24px 20px; font-weight: 500; color: $white-color; &:hover{ background: transparent; } .submenu-indicator:before{ content: '\f107'; } } &.active{ a{ background: transparent; } } &:first-child{ a{ padding-left: 30px; } } } } .right-menu li{ a{ height: 65px; line-height: 65px; width: 65px; color: $white-color; border-left: none; border-right: 1px solid #ff3639; } .nav-search{ height: 65px; width: 65px; border-left: 1px solid #bb1619; .nav-search-button{ line-height: 67px; width: 100%; background: transparent; } } } } } /*--------------------- hero section -----------------*/ .featured-table{ width: 100%; height: 100%; display:table; .table-cell{ display: table-cell; width: 100%; height: 100%; vertical-align: middle; } } .hero-area{ padding: 0; position: relative; &:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 130px; content: ''; background-image: linear-gradient( 0, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%); z-index: 1; } } .featured-slider-item{ background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; height: 960px; &::before{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: rgba(0,0,0, .2); } } .hero-content{ position: relative; padding: 20px; margin-top: -180px; .post-cat{ margin-bottom: 12px; margin-left: 0; } h2{ font-size: 42px; font-weight: 700; color: $white-color; margin-bottom: 22px; } p{ font-size: 18px; line-height: 24px; font-family: $arimo; color: $white-color; } } .featured-bottom-post{ margin-top: -260px; position: relative; z-index: 1; } /*-------------- tab-menu-item -----------*/ .tab-menu-item{ li{ a{ font-size: 15px; font-weight: 400; font-family: $heebo; color: #5a5c66; padding: 0 15px; &.active{ color: $white-color; } } &:last-child{ a{ padding-right: 0; } } } } .ts-tabs-content{ .tab-pane.fade.active{ opacity: 1; } } .video-item{ background-repeat: no-repeat; background-size: cover; background-position: center center; height: 450px; position: relative; overflow: hidden; .post-video{ position: absolute; top: 46%; margin: auto; text-align: center; transform: translateX(50%); left: 0; right: 0; z-index: 2; margin: auto; &:before{ display: none; } .ts-play-btn{ z-index: 1; border: none; } } } .video-tab-list{ height: 450px; padding: 30px 5px 30px 30px; overflow: hidden; img.sidebar-img{ width: 100px; height: auto;; } .post-tab-list{ padding: 0; li{ margin-bottom: 15px; .post-title{ color: $white-color; } &:last-child{ margin-bottom: 0; } } } } .fade.in{ opacity: 1; } .post-style-item4{ padding-bottom: 0; .ts-post-thumb{ margin-bottom: 0; } .item{ &:before{ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.75) 100%); } } } #hero-slider{ .owl-nav { position: relative; right: auto; top: 0%; left: 0%; z-index: 3; } .owl-prev { font-size: 20px; text-transform: uppercase; padding: 20px; &:before{ display: none; } } .owl-next { font-size: 20px; text-transform: uppercase; padding: 20px; margin-left: 80px; } .owl-dots { counter-reset: slides-num; margin-top: 15px; right: auto; left: 0; &:after { content: "0" counter(slides-num); display: inline-block; font-size: 12px; font-weight: 700; vertical-align: middle; padding-left: 20px; margin-top: -10px; font-weight: 400; color: $white-color; } } .owl-dot { display: inline-block; counter-increment: slides-num; /* Increment counter */ margin-right: 5px; span { display: none; } &.active { &:before { content: "0" counter(slides-num) " / " ; /* Use the same counter to get current item. */ display: inline-block; vertical-align: middle; font-size: 20px; position: absolute; left: 0; top: 0; color: $primary-color; } } } .owl-item.active{ .hero-content{ a.post-cat{ -webkit-animation-name: animLeft; animation-name: animLeft; -webkit-animation: animLeft 1s ease 100ms both; animation: animLeft 1s ease 100ms both; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-delay: 500ms; animation-delay: 500ms; } h2{ -webkit-animation-name: animLeft; animation-name: animLeft; -webkit-animation: animLeft 1s ease 100ms both; animation: animLeft 1s ease 100ms both; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-delay: 800ms; animation-delay: 800ms; } p{ -webkit-animation-name: animLeft; animation-name: animLeft; -webkit-animation: animLeft 1s ease 100ms both; animation: animLeft 1s ease 100ms both; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-delay: 1200ms; animation-delay: 1200ms; } } } } @-webkit-keyframes animLeft { from { opacity: 0; -webkit-transform: translate3d(40%, 0, 0); transform: translate3d(40%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .slider-dot-item{ position: absolute; left: 0; width: 100%; top: 59.6%; right: 0; margin: auto; padding-left: 90px; } .slider-arrow-item{ position: absolute; left: 0; width: 100%; top: 55.8%; right: 0; margin: auto; .owl-nav .owl-next i, .owl-nav .owl-prev i{ font-size: 16px; color: $white-color; } } .mCSB_scrollTools .mCSB_draggerRail{ width: 5px; background-color: #414450; } /*---------------------------- travel index css ---------------------------*/ .header-transprent{ top: 25px; .ts-main-menu{ background: transparent; .nav-menu{ >li{ >a{ font-weight: 400; font-family: $heebo; } &.header-search{ .header-search-form{ position: absolute; left: 0; width: 100%; background: #fff; display: none; } } } } } } .featured-area{ &:before{ display: none; } .item{ background-repeat: no-repeat; background-position: center center; background-size: cover; height: 900px; .hero-content{ margin-top: 0; h2{ font-weight: 500; margin-bottom: 60px; font-size: 48px; } .featurd-video-icon{ font-size: 80px; color: $white-color; } } } } @media (min-width: 1400px){ .featured-area .item{ height: 1050px; } } .grid-style-2{ .ts-overlay-style{ .item{ min-height: 456px; } } } /*------------------ accordion post style ------------*/ .accordion-post-style{ .card{ background-repeat: no-repeat; background-size: cover; background-position: center center; &:before{ content: " "; position: absolute; display: block; width: 100%; height: 100%; z-index: 1; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(24, 106, 179, .7) 100%); } .space{ height: 125px; text-align: center; display: block; } .btn{ position: relative; z-index: 1; padding: 8px 20px; @include border-radius(36px); opacity: 0; @include transition(); transform: scale(0); &:hover{ color: #fff; } } .card-header{ padding: 0; a{ display: block; padding: 20px 20px 15px 55px; position: relative; color: $white-color; z-index: 1; .post-title{ color: $white-color; margin-bottom: 0; font-weight: 500; } i{ position: absolute; left: 0; top: 0; font-size: 35px; left: 20px; top: 20px; } } } &:hover{ .btn{ opacity: 1; transform: scale(1); } } } } .post-overflow-style{ .ts-title{ &:after{ display: none; } } .ts-post-thumb{ overflow: visible; margin-right: -230px; width: auto; z-index: 2; } .post-content-item{ background: #f7f7f7; padding: 70px 20px 55px 200px; margin-top: -55px; margin-left: 30px; .post-title{ margin-bottom: 24px; } p{ margin-bottom: 28px; } } } .watching-section { padding: 60px 0 50px; .post-title{ a{ color: $white-color; &:hover{ color: $white-color; } } } } .border-style { .post-cat{ margin-left: 0; top: -12px; } &.ts-grid-box.ts-grid-content{ .post-content{ box-shadow: none; padding-top: 25px; border: 1px solid #e6e6e6; border-top: none; } .ts-post-thumb{ margin-bottom: 0; } } } /*----------------- featured tab personal blog --------------*/ .featured-tab-item{ .featured-tab-post{ margin:0; border-bottom: none; .post-content{ padding: 26px 30px 10px; background: $white-color; } >li{ padding: 0; border-right: 1px solid #e6e6e6; &:last-child{ border-right: none; } .active{ &:before{ position: absolute; right: 0; top: -15px; width: 100%; height: 15px; content: ''; } .post-title, .post-meta-info li, .post-meta-info li.cat-name{ color: $white-color; } } } } } .view-link-btn{ position: absolute; left: 0; top: 50%; right: 0; margin: auto; text-align: center; margin: auto; transform: translateY(-20%); span{ background: $white-color; height: 48px; line-height: 48px; padding: 2px 20px; min-width: 140px; display: inline-block; text-transform: uppercase; font-size: 11px; color: #222222; font-family: $heebo; font-weight: 500; } } .blog-post-slider-item{ .ts-grid-box{ padding: 90px 230px 90px 30px; } .ts-post-thumb{ overflow: visible; margin-left: -244px; width: auto; z-index: 2; margin-bottom: 0; img{ max-height: 310px; width: 100%; } } .owl-nav { position: absolute; right: auto; top: auto; left: 14px; bottom: 41px; } } .read-more-btn{ font-size: 11px; font-weight: 500; color: #888888; text-transform: uppercase; border: 1px solid #ddd; display: inline-block; padding: 4px 20px; } .older-post-btn{ .read-more-btn{ background: $white-color; color: #232323; border: none; } } .author-box-widget{ padding: 0; .ts-post-thumb{ margin-bottom: 0; } .post-content{ padding: 20px; text-align: center; p{ font-size: 14px; color: #585858; } } .authors-social{ a{ color: #8a8a8a; margin: 0 8px; } } } .ts-post-style-3{ margin-left: -2px; margin-right: -2px; .ts-post-thumb{ margin-bottom: 0; } .p-1{ padding: 2px !important; } .post-content{ .post-cat{ margin-left: 0; margin-bottom: 10px; } } } .sidebar-2{ .widgets-populer-post{ .post-content.media{ margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; &:last-of-type{ margin-bottom: 0; border-bottom: none; } } } } .ts-grid-content-1.ts-blue-light-heighlight{ background: $blue-light-color; } .ts-grid-content-1.ts-blue-light-heighlight { p, .post-date-info, .post-title a{ color: $white-color; } .post-cat{ color: $blue-light-color; } } .img-height-520{ min-height: 522px; } .ts-post-style-4{ .ts-grid-style-3{ .item{ min-height: 235px; margin-bottom: 10px; } } } .border-top1{ border-color: #cfd2da; }
Kaydet
Ctrl+S ile kaydet