body{
margin:0;
}
.gallery{
width:100%;
height:100%;
top:0;
left:0;
position:fixed;
z-index:1000;
transition: .2s linear;
opacity:1;
}
.gallery.loading{
opacity:0;
}
.gallery > .gallery-content{
display: -webkit-flex;
display: flex;
overflow: hidden;
justify-content:center;
flex-wrap:nowrap;
flex-direction:column;
align-items:center;
position:relative;
width:100%;
height:100%;
top:0;
left:0;
background-color:#666;
}
.gallery > .gallery-content > .gallery-top2,
.gallery > .gallery-content > .gallery-top1{
position:absolute;
top:0;
height:3rem;
background-image:linear-gradient(to top, rgba(0,0,0,.1), rgba(0,0,0,.5));
display: -webkit-flex;
display: flex;
justify-content:end;
align-items:center;
z-index:2;
}
.gallery > .gallery-content > .gallery-top2{
right:0;
}
.gallery > .gallery-content > .gallery-top1{
}
.gallery-top2 i{
flex:0 0 auto;
font-size:2rem;
color:#bbb;
cursor:pointer;
padding: 0 .5rem;
transition: all .15s linear;
}
.gallery-top2 i:hover{
color:#eee;
text-shadow: 2px 1px 2px black;
transform: scale(1.1);
}
.gallery-top2 div:last-child{
margin-right:1rem;
margin-left:1rem;
}
.gallery-bottom{
position:absolute;
background-image:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5));
display: -webkit-flex;
display: flex;
bottom:0;
padding:.2rem .2rem 0 .2rem;
justify-content:center;
flex-flow:row nowrap;
border-radius:.125rem;
}
.gallery-thumb{
margin:.2rem .4rem;
max-width:100px;
min-width:20px;
border-radius:.125rem;
position:relative;
border:1px solid black;
transform-origin: 50% 100% 0;
transition: .15s ease-out;
}
.gallery-bottom:not(.loading) .gallery-thumb{
cursor:pointer;
}
.gallery-bottom.loading .gallery-thumb,
.gallery-thumb.active{
pointer-events:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.gallery-thumb img{
flex: 1 1 auto;
border-radius:.125rem;
width:100%;
transition: .15s ease-out;
}
.gallery-thumb .gallery-spin,
.gallery-thumb div.gallery-magnifier{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:flex;
display: -webkit-flex;
justify-content:center;
align-items:center;
transition: .15s ease-out;
}
.gallery-thumb div.gallery-magnifier{
background-image: radial-gradient(rgba(255,255,255,.2), rgba(10,0,12,.8));
opacity:0;
}
.gallery-thumb:not(.loading) .gallery-spin{
display:none;
}
.gallery-thumb div.gallery-magnifier i{
opacity:0;
transition: .15s ease-out;
color:#eee;
transform: scale(5);
}
.gallery-thumb.active,
.gallery-thumb.loading,
.gallery-bottom:not(.loading) .gallery-thumb:hover{
transform:scale(1.1);
margin-left:1rem;
margin-right:1rem;
border:1px solid red;
}
.gallery-thumb.loading div.gallery-magnifier,
.gallery-bottom:not(.loading) .gallery-thumb:not(.loading):not(.active):hover div.gallery-magnifier{
opacity:1;
}
.gallery-bottom:not(.loading) .gallery-thumb:not(.loading):not(.active):hover div.gallery-magnifier i{
transform:scale(1.5);
text-shadow: 2px 1px 2px #333;
opacity:1;
}
@media (min-width: 576px) {
.gallery-bottom:not(.loading) .gallery-thumb:not(.loading):not(.active):hover div.gallery-magnifier i{
transform:scale(2);
}
}
.gallery-middle{
display:flex;
display: -webkit-flex;
position:relative;
flex-flow:row nowrap;
justify-content:center;
}
.gallery-img{
display:flex;
display: -webkit-flex;
background-color:#fff;
border-radius:.25rem;
box-shadow: 0px 0px 5px 2px rgba(0,0,0,.5);
opacity:0;
box-sizing:border-box;
transition: opacity .2s linear;
}
.gallery-img.hidden{
display:none;
opacity:0;
}
.gallery-img.active{
opacity:1;
}
.scale{
opacity:0;
}
.gallery-range-box{
width:35vw;
}
@media (min-width: 768px) {
.gallery-range-box{
width:25vw;
}
}
input[type=range]#gallery-scale::-moz-focus-outer {
border: 0;
}
input[type=range]#gallery-scale::-webkit-slider-thumb{
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background:white;
background-image: radial-gradient(circle at 95% 15%, hsl(50, 10%, 90%), hsl(297, 0%, 48%));
border:1px solid #666666;
position: relative;
margin: 5px 0;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: all;
}
input[type=range]#gallery-scale::-ms-thumb{
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background:white;
background-image: radial-gradient(circle at 95% 15%, hsl(50, 10%, 90%), hsl(297, 0%, 48%));
border:1px solid #666666;
position: relative;
margin: 5px 0;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: all;
}
input[type=range]#gallery-scale::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
border:1px solid #666666;
background:white;
background-image: radial-gradient(circle at 95% 10%, hsl(50, 10%, 90%), hsl(297, 0%, 48%));
position: relative;
margin: 5px 0;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: all;
}
input[type=range]#gallery-scale{
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
background-image: linear-gradient(to bottom,hsl(50, 10%, 80%), hsl(297, 0%, 50%));
height:.75rem;
border-radius: .25rem;
border: 1px solid #333;
}
input[type=range]#gallery-scale::-ms-track {
-webkit-appearance: none;
background-image: linear-gradient(to bottom,hsl(50, 10%, 80%), hsl(297, 0%, 50%));
height:.75rem;
border-radius: .25rem;
border: 1px solid #333;
}
input[type=range]#gallery-scale::-moz-range-track {
-moz-appearance: none;
background-image: linear-gradient(to bottom,hsl(50, 10%, 80%), hsl(297, 0%, 50%));
height:.75rem;
border-radius: .25rem;
border: 1px solid #333;
}
input[type=range]#gallery-scale:focus::-webkit-slider-runnable-track {
background-image: linear-gradient(to bottom,hsl(50, 10%, 80%), hsl(297, 0%, 50%));
height:.75rem;
border-radius: .25rem;
border: 1px solid #333;
}