Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/www/wp-content/themes/dt-the7/css/static-less/ |
/* #Images Styling & Hovers
================================================== */
.rollover,
.rollover-video,
.post-rollover,
.rollover-project > a {
position: relative;
display: block;
line-height: 0;
text-decoration: none;
}
.rollover:hover {
text-decoration: none;
}
.rollover img {
max-width: 100%;
height: auto;
}
.rsShor .rollover-video {
position: static;
}
.gallery-item .gallery-icon .rollover {
display: inline-block;
}
.format-gallery .rollover {
overflow: hidden;
}
/*rollover background*/
.rollover i,
.rollover-video i,
.post-rollover i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.rollover i,
.post-rollover i,
.rollover-video i:after,
.rollover-thumbnails,
.rollover-video .video-icon,
.rollover-video i,
.rollover-content-container,
.hover-style-two .links-container,
.hover-style-one .links-container,
.hover-style-two .rollover-thumbnails,
.hover-style-one .rollover-thumbnails,
.hover-style-one .rollover-project > a:after,
.hover-style-three .rollover-project > a:after {
transition: all 450ms ease;
}
/*hide default rollover when turn on description on hover*/
.description-on-hover > .wf-cell .rollover i {
visibility: hidden;
}
.description-on-hover > .wf-cell .forward-post .rollover i,
.description-on-hover > .wf-cell .description-off .rollover i
{
visibility: visible;
}
/*rollover icon*/
.project-list-media .rollover-video i:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
content: "";
}
/*video hover styling*/
.rollover-video .video-icon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background-position: center center;
background-repeat: no-repeat;
}
.rollover-video .video-icon:before {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background-color: rgba(0,0,0,0.4);
background-position: 30px center;
background-repeat: no-repeat;
content: "";
.static-border-radius;
}
/*show rollover on hover*/
.mobile-false .rollover:hover i,
.mobile-false .images-list:hover i,
.mobile-false .post-rollover:hover i,
.rollover-video:hover i {
display: block;
opacity: 1;
}
.rollover-video:hover .video-icon:before,
.images-list:hover .rollover-video .video-icon:before {
background-color: rgba(0,0,0,0.4);
opacity: 1;
}
.rollover-video .video-icon:hover {
opacity: 1;
}
/*Video rollover icon*/
.rollover-video .video-icon:before,
.blog .format-video .rollover i:after,
.dt-blog-shortcode .format-video .rollover i:after,
.rollover-video i:after {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='white'%3E%3Cpath d='M3.125,4L10.2,8.001L3.125,12V3.8 M1,0v16l13-8L1,0L1,0z'/%3E%3C/svg%3E");
}
.hover-style-one .rollover:hover i {
display: none;
}
/* #Styling -> Grayscale
================================================== */
.filter-grayscale .royalSlider img,
.filter-grayscale .content img,
.filter-grayscale .sidebar img,
.filter-grayscale .footer img,
.filter-grayscale .shortcode-banner,
.filter-grayscale .map-container,
.filter-grayscale iframe,
.filter-grayscale embed,
.filter-grayscale object,
.filter-grayscale-static .royalSlider img,
.filter-grayscale-static .content img,
.filter-grayscale-static .sidebar img,
.filter-grayscale-static .footer img,
.filter-grayscale-static .shortcode-banner,
.filter-grayscale-static .map-container,
.filter-grayscale-static iframe,
.filter-grayscale-static embed,
.filter-grayscale-static object {
-webkit-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
/* Make sure that it will not flicker in Desktop Safari due to usage of CSS3 animation in RoyalSlider */
}
.mobile-false .filter-grayscale .royalSlider img,
.mobile-false .filter-grayscale .content img,
.mobile-false .filter-grayscale .sidebar img,
.mobile-false .filter-grayscale .footer img,
.mobile-false .filter-grayscale .shortcode-banner,
.mobile-false .filter-grayscale .map-container,
.mobile-false .filter-grayscale iframe,
.mobile-false .filter-grayscale embed,
.mobile-false .filter-grayscale object,
.mobile-false .filter-grayscale-static .royalSlider img,
.mobile-false .filter-grayscale-static .content img,
.mobile-false .filter-grayscale-static .sidebar img,
.mobile-false .filter-grayscale-static .footer img,
.mobile-false .filter-grayscale-static .shortcode-banner,
.mobile-false .filter-grayscale-static .map-container,
.mobile-false .filter-grayscale-static iframe,
.mobile-false .filter-grayscale-static embed,
.mobile-false .filter-grayscale-static object {
-webkit-backface-visibility: visible !important;
}
/* .filter-grayscale img:hover, */
.filter-grayscale img.filter-disable,
.filter-grayscale .filter-disable img,
.filter-grayscale img.dt-hovered,
.filter-grayscale .dt-hovered img,
.filter-grayscale .rollover:hover img,
.filter-grayscale .post-thumbnail-rollover:hover img,
.filter-grayscale .post-thumbnail:hover img,
.filter-grayscale .gradient-overlap-layout-list article:hover img,
.mobile-false .gradient-overlay-layout-list article:hover img,
.mobile-false .content-rollover-layout-list article:hover img,
.filter-grayscale .cs-style-3 .link:hover img,
.filter-grayscale .rollover-video:hover img,
.filter-grayscale .post-rollover:hover img,
.filter-grayscale .dt-owl-item:hover img,
.filter-grayscale .rsThumb:hover img,
.filter-grayscale .royalSlider:hover img,
.filter-grayscale .content img:hover,
.filter-grayscale .sidebar img:hover,
.filter-grayscale .footer img:hover,
.filter-grayscale .shortcode-banner:hover,
.filter-grayscale .content .rev_slider_wrapper:hover img,
.filter-grayscale .map-container:hover,
.filter-grayscale iframe:hover,
.filter-grayscale embed:hover,
.filter-grayscale object:hover,
.filter-grayscale .rollover-project:hover img,
.filter-grayscale .buttons-on-img:hover img,
.filter-grayscale #branding-bottom img,
.filter-grayscale-static #branding-bottom img {
-webkit-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
filter: none;
}
//Gallery shortcode
.gallery-shortcode figure {
position: relative;
overflow: hidden;
transform: translateZ(0);
}
.gallery-rollover {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 400ms ease;
.gallery-shortcode figure:hover & {
opacity: 1;
}
}
.album-gallery-shortcode .rollover {
float: left;
}
.gallery-zoom-ico {
.blog-shortcode &,
.blog-carousel-shortcode & {
opacity: 0;
transition: opacity 400ms ease;
}
.blog-shortcode .post-thumbnail-rollover:hover &,
.blog-carousel-shortcode .post-thumbnail-rollover:hover &,
.gradient-overlay-layout-list &,
.content-rollover-layout-list & {
opacity: 1;
}
}
.gallery-zoom-ico {
.gallery-shortcode &,
.albums-shortcode &,
.blog-shortcode &,
.blog-carousel-shortcode & {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
z-index: 10;
border-style: solid;
box-sizing: border-box;
.flex-display(@display: flex);
.align-items(@align: center);
.justify-content(@justify: center);
& span {
position: relative;
z-index: 11;
}
.gradient-overlay-layout-list&,
.content-rollover-layout-list& {
position: static;
}
}
.gradient-overlay-layout-list .post-thumbnail-wrap &,
.content-rollover-layout-list .post-thumbnail-wrap & {
display: none;
}
}
.gallery-shortcode.album-gallery-shortcode.hover-scale article:after {
display: none;
}
.gallery-shortcode .rollover > i {
display: none !important;
}
.scale-img .rollover,
.quick-scale-img .rollover {
transform: translateZ(0);
overflow: hidden;
}
.rollover img,
.post-thumbnail-rollover img,
.trigger-img-hover .img-wrap img {
.quick-scale-img & {
transition: transform 0.25s ease-out, opacity 0.25s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
&.lazy-load,
&.lazy-scroll,
&.blog-thumb-lazy-load {
transition: transform 0.25s ease-out, opacity 0.25s;
}
}
.rollover img,
.post-thumbnail-rollover img,
.trigger-img-hover .img-wrap img {
.scale-img & {
transition: transform 0.3s ease-out, opacity 0.35s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
&.lazy-load,
&.lazy-scroll,
&.blog-thumb-lazy-load {
transition: transform 0.3s ease-out, opacity 0.35s;
}
}
.mobile-false .scale-img figure:hover .rollover img,
.mobile-false .scale-img article:hover .rollover img,
.mobile-false .scale-img .post-thumbnail:not(.overlay-placeholder):hover > .post-thumbnail-rollover img,
.mobile-false .scale-img .trigger-img-hover:hover .img-wrap img,
.scale-img .on-hover .post-thumbnail > .post-thumbnail-rollover img {
transform: scale(1.2);
transition: transform 4s ease-out, opacity 0.25s ease-out;
}
.mobile-false .quick-scale-img figure:hover .rollover img,
.mobile-false .quick-scale-img article:hover .rollover img,
.mobile-false .quick-scale-img .post-thumbnail:not(.overlay-placeholder):hover > .post-thumbnail-rollover img,
.mobile-false .quick-scale-img .trigger-img-hover:hover .img-wrap img,
.quick-scale-img .on-hover .post-thumbnail > .post-thumbnail-rollover img {
transform: scale(1.2);
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
/* #Scale In
-------------------------------------------------- */
.mobile-false .hover-scale.gallery-shortcode .rollover-content {
background: none !important;
background-color: transparent;
transform: scale(1);
}
.hover-scale.gallery-shortcode .post,
.hover-scale.gallery-shortcode .post .rollover {
overflow: hidden;
}
.hover-scale.gallery-shortcode .rollover:after {
display: block;
background-color: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
content: "";
.static-border-radius;
padding-bottom: 100%;
transform: scale(0);
transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s;
}
.hover-scale.gallery-shortcode .rollover:after {
padding-bottom: 100%;
transform: scale(0);
transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s;
}
.hover-scale.gallery-shortcode .ratio-2 .rollover:after {
top: -50%;
}
.hover-scale .ratio_3-2 .rollover:after {
top: -25%;
}
.hover-scale.gallery-shortcode .ratio_0-5 .rollover:after,
.hover-scale article.ratio_0-5:after {
top: 25%;
}
.hover-scale.gallery-shortcode .ratio_4-3 .rollover:after {
top: -16.6666%;
}
.hover-scale.gallery-shortcode .ratio_2-3 .rollover:after {
top: 16.6666%;
}
.hover-scale.gallery-shortcode .ratio_3-4 .rollover:after {
top: 14.5%;
}
.mobile-false .hover-scale.gallery-shortcode .post:hover .rollover:after,
.mobile-true .hover-scale.gallery-shortcode .post.is-clicked .rollover:after {
opacity: 1;
transform: scale(1.42);
}
.mobile-false .hover-scale.gallery-shortcode .post.ratio_3-2:hover .rollover:after,
.mobile-true .hover-scale.gallery-shortcode .post.is-clicked.ratio_3-2 .rollover:after {
transform: scale(1.2);
}
.mobile-false .hover-scale.gallery-shortcode .post.ratio_0-5:hover .rollover:after,
.mobile-false .hover-scale article.ratio_0-5:hover:after {
transform: scale(2.5);
}
.mobile-false .hover-scale.gallery-shortcode .post.ratio_4-3:hover .rollover:after,
.mobile-true .hover-scale.gallery-shortcode .post.is-clicked.ratio_4-3 .rollover:after {
transform: scale(1.5);
}
.mobile-false .hover-scale.gallery-shortcode .post.ratio_3-4:hover .rollover:after,
.mobile-true .hover-scale.gallery-shortcode .post.is-clicked.ratio_3-4 .rollover:after {
transform: scale(2);
}
.mobile-false .hover-scale.gallery-shortcode .post.ratio_2-3:hover .rollover:after,
.mobile-true .hover-scale.gallery-shortcode .post.is-clicked.ratio_2-3 .rollover:after {
transform: scale(2);
}
.mobile-false .hover-scale .rollover-content {
background: none !important;
background-color: transparent;
transform: scale(0);
transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
}