File: /home/httpd/html/baretube.com.new/templates/default_tube2019/scss/_gallery.scss
@charset "UTF-8";
@import "libs/_lib";
@keyframes ball-triangle-path {
12.5% {
-webkit-transform:translate(18px,-25px);
transform:translate(18px,-25px);
}
25% {
-webkit-transform:translate(0,-50px);
transform:translate(0,-50px);
}
37.5% {
-webkit-transform:translate(25px,-32px);
transform:translate(25px,-32px);
}
50% {
-webkit-transform:translate(50px,-50px);
transform:translate(50px,-50px);
}
62.5% {
-webkit-transform:translate(32px,-25px);
transform:translate(32px,-25px);
}
75% {
-webkit-transform:translate(50px,0);
transform:translate(50px,0);
}
87.5% {
-webkit-transform:translate(25px,-18px);
transform:translate(25px,-18px);
}
100% {
-webkit-transform:translate(0,0);
transform:translate(0,0);
}
}
@keyframes ball-triangle-path-2 {
12.5% {
-webkit-transform:translate(25px,18px);
transform:translate(25px,18px);
}
25% {
-webkit-transform:translate(50px,0);
transform:translate(50px,0);
}
37.5% {
-webkit-transform:translate(32px,25px);
transform:translate(32px,25px);
}
50% {
-webkit-transform:translate(50px,50px);
transform:translate(50px,50px);
}
62.5% {
-webkit-transform:translate(25px,32px);
transform:translate(25px,32px);
}
75% {
-webkit-transform:translate(0,50px);
transform:translate(0,50px);
}
87.5% {
-webkit-transform:translate(18px,25px);
transform:translate(18px,25px);
}
100% {
-webkit-transform:translate(0,0);
transform:translate(0,0);
}
}
@keyframes ball-triangle-path-3 {
12.5% {
-webkit-transform:translate(-18px,25px);
transform:translate(-18px,25px);
}
25% {
-webkit-transform:translate(0,50px);
transform:translate(0,50px);
}
37.5% {
-webkit-transform:translate(-25px,32px);
transform:translate(-25px,32px);
}
50% {
-webkit-transform:translate(-50px,50px);
transform:translate(-50px,50px);
}
62.5% {
-webkit-transform:translate(-32px,25px);
transform:translate(-32px,25px);
}
75% {
-webkit-transform:translate(-50px,0);
transform:translate(-50px,0);
}
87.5% {
-webkit-transform:translate(-25px,18px);
transform:translate(-25px,18px);
}
100% {
-webkit-transform:translate(0,0);
transform:translate(0,0);
}
}
@keyframes ball-triangle-path-4 {
12.5% {
-webkit-transform:translate(-25px,-18px);
transform:translate(-25px,-18px);
}
25% {
-webkit-transform:translate(-50px,0);
transform:translate(-50px,0);
}
37.5% {
-webkit-transform:translate(-32px,-25px);
transform:translate(-32px,-25px);
}
50% {
-webkit-transform:translate(-50px,-50px);
transform:translate(-50px,-50px);
}
62.5% {
-webkit-transform:translate(-25px,-32px);
transform:translate(-25px,-32px);
}
75% {
-webkit-transform:translate(0,-50px);
transform:translate(0,-50px);
}
87.5% {
-webkit-transform:translate(-18px,-25px);
transform:translate(-18px,-25px);
}
100% {
-webkit-transform:translate(0,0);
transform:translate(0,0);
}
}
#singleImage {
text-align: center;
position: relative;
transition: all $trans-time $trans-type;
height: auto;
margin-bottom: 10px;
&.loading-img {
height: 70vh;
}
& > a {
display:inline-block;
transition:all .3s ease;
z-index: 10;
position: relative;
}
&:hover {
.gallery-nav {
opacity: 1;
}
}
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transition: opacity $trans-time $trans-type;
opacity: 0;
.loading-img & {
opacity: 1;
}
}
.loading-img .ball-triangle-path {
position: relative;
transform: translate(-30px, -30px);
width: 50px;
height: 50px;
> div {
animation-fill-mode: both;
position: absolute;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: $theme-color-1;
&:nth-child(1) {
z-index: 4;
left: 0;
top: 50px;
animation-name: ball-triangle-path;
animation-delay: 0;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(2) {
z-index: 3;
width: 8px;
height: 8px;
opacity: .8;
left: 1px;
top: 51px;
animation-name: ball-triangle-path;
animation-delay: 50ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(3) {
z-index: 2;
width: 6px;
height: 6px;
opacity: .6;
left: 2px;
top: 52px;
animation-name: ball-triangle-path;
animation-delay: 100ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(4) {
z-index: 1;
width: 4px;
height: 4px;
opacity: .4;
left: 3px;
top: 53px;
animation-name: ball-triangle-path;
animation-delay: 150ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(5) {
z-index: 4;
left: 0;
top: 0;
animation-name: ball-triangle-path-2;
animation-delay: 0;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(6) {
z-index: 3;
width: 8px;
height: 8px;
opacity: .8;
left: 1px;
top: 1px;
animation-name: ball-triangle-path-2;
animation-delay: 50ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(7) {
z-index: 2;
width: 6px;
height: 6px;
opacity: .6;
left: 2px;
top: 2px;
animation-name: ball-triangle-path-2;
animation-delay: 100ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(8) {
z-index: 1;
width: 4px;
height: 4px;
opacity: .4;
left: 3px;
top: 3px;
animation-name: ball-triangle-path-2;
animation-delay: 150ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(9) {
z-index: 4;
left: 50px;
top: 0;
animation-name: ball-triangle-path-3;
animation-delay: 0;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(10) {
z-index: 3;
width: 8px;
height: 8px;
opacity: .8;
left: 51px;
top: 1px;
animation-name: ball-triangle-path-3;
animation-delay: 50ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(11) {
z-index: 2;
width: 6px;
height: 6px;
opacity: .6;
left: 52px;
top: 2px;
animation-name: ball-triangle-path-3;
animation-delay: 100ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(12) {
z-index: 1;
width: 4px;
height: 4px;
opacity: .4;
left: 53px;
top: 3px;
animation-name: ball-triangle-path-3;
animation-delay: 150ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(13) {
z-index: 4;
left: 50px;
top: 50px;
animation-name: ball-triangle-path-4;
animation-delay: 0;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(14) {
z-index: 3;
width: 8px;
height: 8px;
opacity: .8;
left: 51px;
top: 51px;
animation-name: ball-triangle-path-4;
animation-delay: 50ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(15) {
z-index: 2;
width: 6px;
height: 6px;
opacity: .6;
left: 52px;
top: 52px;
animation-name: ball-triangle-path-4;
animation-delay: 100ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&:nth-child(16) {
z-index: 1;
width: 4px;
height: 4px;
opacity: .4;
left: 53px;
top: 53px;
animation-name: ball-triangle-path-4;
animation-delay: 150ms;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
}
}
.gallery-item-col {
max-width: 100%;
a {
position: relative;
display: block;
overflow: hidden;
height: 0;
padding-top: 56.25%;
> img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: auto;
}
}
&.active {
img {
filter: grayscale(100%);
}
}
}
.slider-prev,
.slider-next {
display: block;
height: 100%;
span {
display: block;
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
&:hover {
span {
&::before,
&::after {
background-color: #ffffff;
}
}
}
}
.slider-prev {
span {
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 1px;
width: 22px;
background-color: #575757;
transform: rotate(-45deg);
margin-left: -11px;
margin-top: -8px;
}
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 1px;
width: 22px;
background-color: #575757;
transform: rotate(45deg);
margin-left: -11px;
margin-top: 8px;
}
}
}
.slider-next {
span {
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 1px;
width: 22px;
background-color: #575757;
transform: rotate(45deg);
margin-left: -11px;
margin-top: -8px;
}
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 1px;
width: 22px;
background-color: #575757;
transform: rotate(-45deg);
margin-left: -11px;
margin-top: 8px;
}
}
}
.gallery-slider {
padding: 0 48px;
margin-bottom: 20px;
.owl-next,
.owl-prev {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 48px;
}
.owl-next {
left: auto;
right: 0;
}
}
.gallery-nav {
position: absolute;
top: 50%;
left: 20px;
height: 60px;
width: 30px;
display: block;
opacity: .5;
z-index: 10;
&.gallery-next {
left: auto;
right: 20px;
}
.slider-next,
.slider-prev {
span {
&::before,
&::after {
width: 26px;
}
&::before {
margin-top: -9px;
}
&::after {
margin-top: 9px;
}
}
}
}