diff options
Diffstat (limited to 'dist/imagelightbox.css')
| -rw-r--r-- | dist/imagelightbox.css | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/dist/imagelightbox.css b/dist/imagelightbox.css new file mode 100644 index 0000000..0f03f50 --- /dev/null +++ b/dist/imagelightbox.css @@ -0,0 +1,269 @@ +html { + -ms-touch-action: manipulation; + touch-action: manipulation; +} + +#imagelightbox { + -ms-touch-action: none; + touch-action: none; + -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; + -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; + box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; + cursor: pointer; + position: fixed; + z-index: 10000; +} + +#imagelightbox-loading, +#imagelightbox-loading div { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} + +#imagelightbox-loading { + -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; + -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; + box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; + background: #444; + background: rgba(0, 0, 0, 0.5); + height: 20px; + left: 50%; + margin: -1.25em 0 0 -1.25em; + padding: 10px; + position: fixed; + top: 50%; + width: 20px; + z-index: 10003; +} +#imagelightbox-loading div { + -moz-animation: imagelightbox-loading .5s ease infinite; + -o-animation: imagelightbox-loading .5s ease infinite; + -webkit-animation: imagelightbox-loading .5s ease infinite; + animation: imagelightbox-loading .5s ease infinite; + background-color: #fff; + height: 20px; + width: 20px; +} + +@-webkit-keyframes imagelightbox-loading { + from { + opacity: .5; + -webkit-transform: scale(0.75); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1); + } + + to { + opacity: .5; + -webkit-transform: scale(0.75); + } +} +@-moz-keyframes imagelightbox-loading { + from { + opacity: .5; + -moz-transform: scale(0.75); + } + + 50% { + opacity: 1; + -moz-transform: scale(1); + } + + to { + opacity: .5; + -moz-transform: scale(0.75); + } +} +@-o-keyframes imagelightbox-loading { + from { + opacity: .5; + -o-transform: scale(0.75); + } + + 50% { + opacity: 1; + -o-transform: scale(1); + } + + to { + opacity: .5; + -o-transform: scale(0.75); + } +} +@keyframes imagelightbox-loading { + from { + opacity: .5; + transform: scale(0.75); + } + + 50% { + opacity: 1; + transform: scale(1); + } + + to { + opacity: .5; + transform: scale(0.75); + } +} +#imagelightbox-overlay { + background: #fff; + background: rgba(255, 255, 255, 0.9); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 9998; +} + +#imagelightbox-close { + -moz-border-radius: 50%; + -moz-transition: color .3s ease; + -ms-transition: color .3s ease; + -o-transition: color .3s ease; + -webkit-border-radius: 50%; + -webkit-transition: color .3s ease; + background-color: #666; + border-radius: 50%; + height: 40px; + position: fixed; + right: 40px; + text-align: left; + text-indent: -9999px; + top: 40px; + transition: color .3s ease; + width: 40px; + z-index: 10002; +} +#imagelightbox-close:hover { + background-color: #111; +} +#imagelightbox-close:before, #imagelightbox-close:after { + background-color: #fff; + bottom: 20%; + content: ''; + left: 50%; + margin-left: -1px; + position: absolute; + top: 20%; + width: 2px; +} +#imagelightbox-close:before { + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +#imagelightbox-close:after { + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +#imagelightbox-caption { + background-color: #666; + bottom: 0; + color: #fff; + left: 0; + padding: 10px; + position: fixed; + right: 0; + text-align: center; + z-index: 10001; +} + +#imagelightbox-nav { + -moz-border-radius: 20px; + -webkit-border-radius: 20px; + border-radius: 20px; + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background-color: #444; + background-color: rgba(0, 0, 0, 0.5); + bottom: 60px; + left: 50%; + padding: 5px 2px 1px; + position: fixed; + z-index: 10001; +} +#imagelightbox-nav a { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + border: 1px solid #fff; + display: inline-block; + height: 20px; + margin: 0 5px; + width: 20px; +} +#imagelightbox-nav a.active { + background-color: #fff; +} + +#imagelightbox-loading, +#imagelightbox-overlay, +#imagelightbox-close, +#imagelightbox-caption, +#imagelightbox-nav { + -webkit-animation: fade-in .25s linear; + -moz-animation: fade-in .25s linear; + -o-animation: fade-in .25s linear; + animation: fade-in .25s linear; +} + +@-webkit-keyframes fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} +@-moz-keyframes fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} +@-o-keyframes fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} +@keyframes fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} +@media only screen and (max-width: 660px) { + #imagelightbox-close { + right: 20px; + top: 20px; + } + + #imagelightbox-nav { + bottom: 20px; + } +} + +/*# sourceMappingURL=imagelightbox.css.map */ |