From 60d6c5f3e46b887806e252d5dea1f04715a81e0d Mon Sep 17 00:00:00 2001 From: Victor Häggqvist Date: Sat, 16 Jan 2016 22:00:36 +0100 Subject: write some docs and fixup demo --- dist/touch-imagelightbox.css | 270 +------------------------------------------ 1 file changed, 1 insertion(+), 269 deletions(-) (limited to 'dist/touch-imagelightbox.css') diff --git a/dist/touch-imagelightbox.css b/dist/touch-imagelightbox.css index cb28641..f1ca31d 100644 --- a/dist/touch-imagelightbox.css +++ b/dist/touch-imagelightbox.css @@ -1,269 +1 @@ -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: -20px 0 0 -20px; - 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 { - 0% { - opacity: .5; - -webkit-transform: scale(0.75); - } - - 50% { - opacity: 1; - -webkit-transform: scale(1); - } - - 100% { - opacity: .5; - -webkit-transform: scale(0.75); - } -} -@-moz-keyframes imagelightbox-loading { - 0% { - opacity: .5; - -moz-transform: scale(0.75); - } - - 50% { - opacity: 1; - -moz-transform: scale(1); - } - - 100% { - opacity: .5; - -moz-transform: scale(0.75); - } -} -@-o-keyframes imagelightbox-loading { - 0% { - opacity: .5; - -o-transform: scale(0.75); - } - - 50% { - opacity: 1; - -o-transform: scale(1); - } - - 100% { - opacity: .5; - -o-transform: scale(0.75); - } -} -@keyframes imagelightbox-loading { - 0% { - opacity: .5; - transform: scale(0.75); - } - - 50% { - opacity: 1; - transform: scale(1); - } - - 100% { - 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%; - -webkit-border-radius: 50%; - border-radius: 50%; - background-color: #666; - height: 40px; - position: fixed; - right: 40px; - text-align: left; - text-indent: -9999px; - top: 40px; - -moz-transition: color .3s ease; - -ms-transition: color .3s ease; - -o-transition: color .3s ease; - -webkit-transition: color .3s ease; - 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 .active { - background-color: #fff; -} - -#imagelightbox-loading, -#imagelightbox-overlay, -#imagelightbox-close, -#imagelightbox-caption, -#imagelightbox-nav { - -moz-animation: fade-in .25s linear; - -o-animation: fade-in .25s linear; - -webkit-animation: fade-in .25s linear; - animation: fade-in .25s linear; -} - -@-webkit-keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} -@-moz-keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} -@-o-keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} -@media only screen and (max-width: 660px) { - #imagelightbox-close { - right: 20px; - top: 20px; - } - - #imagelightbox-nav { - bottom: 20px; - } -} - -/*# sourceMappingURL=touch-imagelightbox.css.map */ +#imagelightbox-loading,#imagelightbox-loading div{border-radius:50%}#imagelightbox-loading{box-shadow:rgba(0,0,0,.75)0 0 40px;background:rgba(0,0,0,.5);height:20px;left:50%;margin:-20px 0 0 -20px;padding:10px;position:fixed;top:50%;width:20px;z-index:10003;animation:fade-in .25s linear}#imagelightbox-loading div{animation:imagelightbox-loading .5s ease infinite;background-color:#fff;height:20px;width:20px}@keyframes imagelightbox-loading{0%{opacity:.5;transform:scale(.75)}50%{opacity:1;transform:scale(1)}100%{opacity:.5;transform:scale(.75)}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}#imagelightbox-overlay{background:rgba(255,255,255,.9);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9998;animation:fade-in .25s linear}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}#imagelightbox-close{border-radius:50%;background-color:#666;height:40px;position:fixed;right:40px;text-align:left;text-indent:-9999px;top:40px;transition:color .3s ease;width:40px;z-index:10002;cursor:pointer;animation:fade-in .25s linear}#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{rotate:45deg}#imagelightbox-close:after{rotate:-45deg}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@media only screen and (max-width:660px){#imagelightbox-close{right:20px;top:20px}}#imagelightbox-nav-sink{display:flex;justify-content:center}#imagelightbox-nav{border-radius:20px;animation:fade-in .25s linear;background-color:rgba(0,0,0,.5);bottom:60px;padding:5px 2px 1px;position:fixed;z-index:10001}#imagelightbox-nav a{border-radius:50%;border:1px solid #fff;display:inline-block;height:20px;margin:0 5px;width:20px}#imagelightbox-nav .active{background-color:#fff}@media only screen and (max-width:660px){#imagelightbox-nav{bottom:20px}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}#imagelightbox-caption{background-color:#666;bottom:0;color:#fff;left:0;padding:10px;position:fixed;right:0;text-align:center;z-index:10001;animation:fade-in .25s linear}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}html{-ms-touch-action:manipulation;touch-action:manipulation}#imagelightbox{-ms-touch-action:none;touch-action:none;box-shadow:rgba(0,0,0,.75)0 0 50px;cursor:pointer;position:fixed;z-index:10000} \ No newline at end of file -- cgit v1.2.3