mirror of
https://github.com/nairobilug/pelican-alchemy.git
synced 2024-12-30 12:15:06 +01:00
5fcab86bab
source: https://github.com/terrymun/Fluidbox author: Terry Mun license: MIT release: 1.4.3 release sha256sum: 18a775df12f943d376038d84dae5dadb52f6b0ad9a950a480c7ad98aea39e9fa jquery.fluidbox.min.js date: 2015-02-11 To be added to base template for fancy image lightboxes
76 lines
2.4 KiB
CSS
76 lines
2.4 KiB
CSS
@-webkit-keyframes fluidboxLoading {
|
|
0% {
|
|
-webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
|
|
50% {
|
|
-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
|
|
100% {
|
|
-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
|
|
@keyframes fluidboxLoading {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
|
|
50% {
|
|
transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
|
|
100% {
|
|
transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
|
|
.fluidbox {
|
|
outline: none; }
|
|
|
|
.fluidbox-overlay {
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
cursor: pointer;
|
|
cursor: -webkit-zoom-out;
|
|
cursor: -moz-zoom-out;
|
|
cursor: zoom-out;
|
|
opacity: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
/* Transition time for overlay is halved to ensure that flickering doesn't happen */
|
|
transition: all 0.125s ease-in-out 0.125s; }
|
|
|
|
.fluidbox-wrap {
|
|
background-position: center center;
|
|
background-size: cover;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
transition: all 0.25s ease-in-out;
|
|
/* To prevent flickering, we delay the showing of the image */ }
|
|
.fluidbox-closed .fluidbox-wrap img {
|
|
transition: opacity 0 ease-in-out 0.25s; }
|
|
|
|
.fluidbox-ghost {
|
|
background-size: 100% 100%;
|
|
background-position: center center;
|
|
perspective: 200px;
|
|
position: absolute;
|
|
-webkit-transition-property: opacity, -webkit-transform;
|
|
-moz-transition-property: opacity, -moz-transform;
|
|
-o-transition-property: opacity, -o-transform;
|
|
transition-property: opacity, transform;
|
|
transition-duration: 0, 0.25s;
|
|
transition-delay: 0.25s, 0; }
|
|
.fluidbox-ghost::before {
|
|
-webkit-animation: fluidboxLoading 1s infinite;
|
|
animation: fluidboxLoading 1s infinite;
|
|
/* You can replace this with any color you want, or even a loading gif if desired */
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
content: '';
|
|
transform-style: preserve-3d;
|
|
transition: all 0.25s ease-in-out;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 20%;
|
|
padding-bottom: 20%;
|
|
/* Delay disapparing of loader for graceful transition */
|
|
transition-delay: 0.125s; }
|
|
.fluidbox-loading .fluidbox-ghost::before {
|
|
opacity: 1;
|
|
transition-delay: 0; }
|
|
.fluidbox-opened .fluidbox-ghost {
|
|
transition-delay: 0, 0; }
|
|
|
|
/*# sourceMappingURL=fluidbox.css.map */
|