diff --git a/.gitignore b/.gitignore index 07e6e472..f01c42c0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,11 @@ -/node_modules +*.DS_Store +*._* +*Thumbs.db +*.thumbnails + +.project +.settings +.idea + +.sass-cache +node_modules diff --git a/dist/jquery.fancybox.css b/dist/jquery.fancybox.css index b477fa9a..a94588f1 100644 --- a/dist/jquery.fancybox.css +++ b/dist/jquery.fancybox.css @@ -11,9 +11,9 @@ height: 100%; z-index: 99993; -webkit-backface-visibility: hidden; - backface-visibility: hidden; } + backface-visibility: hidden; + /* Make sure that the first one is on the top */ } -/* Make sure that the first one is on the top */ .fancybox-container ~ .fancybox-container { z-index: 99992; } @@ -117,7 +117,7 @@ -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; } -.fancybox-slide::before { +.fancybox-slide:before { content: ''; display: inline-block; vertical-align: middle; @@ -327,8 +327,7 @@ .fancybox-button:hover { background: rgba(0, 0, 0, 0.8); } -.fancybox-button::before, -.fancybox-button::after { +.fancybox-button:before, .fancybox-button:after { content: ''; pointer-events: none; position: absolute; @@ -339,7 +338,10 @@ box-sizing: border-box; display: inline-block; } -.fancybox-button--left::after { +.fancybox-button--left { + border-bottom-left-radius: 5px; } + +.fancybox-button--left:after { left: 20px; top: 18px; width: 6px; @@ -351,7 +353,10 @@ -ms-transform: rotate(-135deg); transform: rotate(-135deg); } -.fancybox-button--right::after { +.fancybox-button--right { + border-bottom-right-radius: 5px; } + +.fancybox-button--right:after { right: 20px; top: 18px; width: 6px; @@ -363,16 +368,10 @@ -ms-transform: rotate(45deg); transform: rotate(45deg); } -.fancybox-button--left { - border-bottom-left-radius: 5px; } - -.fancybox-button--right { - border-bottom-right-radius: 5px; } - .fancybox-button--close { float: right; } -.fancybox-button--close::before, .fancybox-button--close::after { +.fancybox-button--close:before, .fancybox-button--close:after { content: ''; display: inline-block; position: absolute; @@ -381,12 +380,12 @@ top: calc(50% - 1px); left: calc(50% - 8px); } -.fancybox-button--close::before { +.fancybox-button--close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } -.fancybox-button--close::after { +.fancybox-button--close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -437,7 +436,7 @@ margin: 0; } } /* Fullscreen */ -.fancybox-button--fullscreen::before { +.fancybox-button--fullscreen:before { width: 15px; height: 11px; left: 15px; @@ -446,7 +445,7 @@ background: none; } /* Slideshow button */ -.fancybox-button--play::before { +.fancybox-button--play:before { top: 16px; left: 18px; width: 0; @@ -457,7 +456,7 @@ border-radius: 1px; background: transparent; } -.fancybox-button--pause::before { +.fancybox-button--pause:before { top: 16px; left: 18px; width: 7px; @@ -470,12 +469,12 @@ .fancybox-button--grid span { font-size: 23px; } -.fancybox-button--grid::before { +.fancybox-button--grid:before { top: 20px; left: 21px; width: 3px; height: 3px; - box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0; } + box-shadow: 0 -4px 0 #FFF, -4px -4px 0 #FFF, 4px -4px 0 #FFF, inset 0 0 0 32px #FFF, -4px 0 0 #FFF, 4px 0 0 #FFF, 0 4px 0 #FFF, -4px 4px 0 #FFF, 4px 4px 0 #FFF; } .fancybox-container--thumbs .fancybox-controls, .fancybox-container--thumbs .fancybox-slider-wrap, @@ -500,7 +499,6 @@ .fancybox-grid > ul { list-style: none; - position: absolute; position: relative; width: 100%; height: 100%; @@ -529,9 +527,6 @@ backface-visibility: hidden; box-sizing: border-box; } -li.fancybox-grid-loading { - background: rgba(0, 0, 0, 0.1); } - .fancybox-grid > ul > li > img { position: absolute; top: 0; @@ -546,6 +541,9 @@ li.fancybox-grid-loading { -ms-user-select: none; user-select: none; } +.fancybox-grid > ul > li.fancybox-grid-active:before { + opacity: 1; } + .fancybox-grid > ul > li:before { content: ''; position: absolute; @@ -559,8 +557,8 @@ li.fancybox-grid-loading { opacity: 0; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } -.fancybox-grid > ul > li.fancybox-grid-active:before { - opacity: 1; } +li.fancybox-grid-loading { + background: rgba(0, 0, 0, 0.1); } /* Styling for Small-Screen Devices */ @media all and (max-width: 800px) { diff --git a/dist/jquery.fancybox.min.css b/dist/jquery.fancybox.min.css index 45f87c6e..9eb943c7 100644 --- a/dist/jquery.fancybox.min.css +++ b/dist/jquery.fancybox.min.css @@ -1 +1 @@ -.fancybox-enabled{overflow:hidden;-ms-touch-action:none;touch-action:none}.fancybox-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99993;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-container~.fancybox-container{z-index:99992}.fancybox-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f0f11;opacity:0;transition:opacity .3s cubic-bezier(.55,.06,.68,.19);-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-container--ready .fancybox-bg{opacity:.87;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-controls{position:absolute;top:0;left:0;right:0;text-align:center;opacity:0;z-index:99994;transition:opacity .1s;pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-show-controls .fancybox-controls{opacity:1}.fancybox-infobar{display:none}.fancybox-show-infobar .fancybox-infobar{display:inline-block;pointer-events:all}.fancybox-infobar__body{display:inline-block;width:70px;line-height:44px;font-size:13px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;text-align:center;color:#ddd;background-color:rgba(30,30,30,.7);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:subpixel-antialiased}.fancybox-buttons{position:absolute;top:0;right:0;display:none;pointer-events:all}.fancybox-show-buttons .fancybox-buttons{display:block}.fancybox-slider-wrap{overflow:hidden}.fancybox-slider,.fancybox-slider-wrap{position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;z-index:99993;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-slide{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow:auto;outline:none;white-space:normal;box-sizing:border-box;text-align:center;z-index:99994;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent}.fancybox-slide:before{content:"";height:100%;width:0}.fancybox-slide:before,.fancybox-slide>*{display:inline-block;vertical-align:middle}.fancybox-slide>*{position:relative;padding:24px;margin:44px 0;border-width:0;text-align:left;background-color:#fff;overflow:auto;box-sizing:border-box}.fancybox-slide--image{overflow:hidden}.fancybox-content{display:inline-block;position:relative;margin:44px auto;padding:0;border:0;width:800px;height:600px;vertical-align:middle;line-height:normal;text-align:left;white-space:normal;outline:none;font-size:16px;font-family:Arial,sans-serif;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch}.fancybox-iframe{display:block;margin:0;padding:0;border:0;width:100%;height:100%;background:#fff}.fancybox-image,.fancybox-slide--video .fancybox-content,.fancybox-slide--video .fancybox-iframe{background:transparent}.fancybox-image{position:absolute;top:0;left:0;margin:0;padding:0;border:0;z-index:99995;cursor:default;-webkit-transform-origin:top left;transform-origin:top left;max-width:none;max-height:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-controls--canzoomOut .fancybox-image{cursor:zoom-out}.fancybox-controls--canzoomIn .fancybox-image{cursor:zoom-in}.fancybox-controls--canGrab .fancybox-image{cursor:-webkit-grab;cursor:grab}.fancybox-controls--isGrabbing .fancybox-image{cursor:-webkit-grabbing;cursor:grabbing}.fancybox-image div{width:100%;height:100%}.fancybox-spaceball{position:absolute;top:0;left:0;z-index:1}.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;visibility:hidden;width:100%;height:9999px}.fancybox-error{margin:0;padding:40px;background:#fff;cursor:default}.fancybox-error p{margin:0;padding:0;color:#444;font:16px/20px Helvetica Neue,Helvetica,Arial,sans-serif}.fancybox-close-small{position:absolute;top:4px;right:4px;padding:0;margin:0;width:30px;height:30px;font:21px/1 Arial,Helvetica Neue,Helvetica,sans-serif;color:#888;font-weight:300;text-align:center;border-radius:50%;border-width:0;cursor:pointer;background:#fff;transition:all .2s;box-sizing:border-box;outline:none;z-index:2}.fancybox-slide--video .fancybox-close-small{top:-36px;right:-36px;background:transparent}.fancybox-close-small:hover{color:#555;background:#eee}.fancybox-caption-wrap{position:absolute;bottom:0;left:0;right:0;padding:60px 30px 0;z-index:99998;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.8));opacity:0;transition:opacity .2s;pointer-events:none}.fancybox-show-caption .fancybox-caption-wrap{opacity:1}.fancybox-caption{padding:30px 0;border-top:1px solid hsla(0,0%,100%,.4);font-size:14px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;line-height:20px;-webkit-text-size-adjust:none}.fancybox-caption a,.fancybox-caption button{pointer-events:all}.fancybox-caption a{color:#fff;text-decoration:underline}.fancybox-button{display:inline-block;position:relative;width:44px;height:44px;line-height:44px;margin:0;padding:0;border:0;cursor:pointer;background:transparent;color:#fff;box-sizing:border-box;vertical-align:top;outline:none}.fancybox-button--disabled{cursor:default}.fancybox-button,.fancybox-infobar__body{background:rgba(30,30,30,.6)}.fancybox-button:hover{background:rgba(0,0,0,.8)}.fancybox-button:after,.fancybox-button:before{content:"";pointer-events:none;position:absolute;border-color:#fff;background-color:currentColor;color:currentColor;opacity:.9;box-sizing:border-box;display:inline-block}.fancybox-button--left:after{left:20px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.fancybox-button--left:after,.fancybox-button--right:after{top:18px;width:6px;height:6px;background:transparent;border-top:2px solid currentColor;border-right:2px solid currentColor}.fancybox-button--right:after{right:20px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancybox-button--left{border-bottom-left-radius:5px}.fancybox-button--right{border-bottom-right-radius:5px}.fancybox-button--close{float:right}.fancybox-button--close:after,.fancybox-button--close:before{content:"";display:inline-block;position:absolute;height:2px;width:16px;top:calc(50% - 1px);left:calc(50% - 8px)}.fancybox-button--close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancybox-button--close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.fancybox-loading{border:6px solid hsla(0,0%,39%,.4);border-top:6px solid hsla(0,0%,100%,.6);border-radius:100%;height:50px;width:50px;-webkit-animation:a .6s infinite linear;animation:a .6s infinite linear;background:transparent;position:absolute;top:50%;left:50%;margin-top:-25px;margin-left:-25px;z-index:99999}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@media (max-width:800px){.fancybox-controls{text-align:left}.fancybox-button--left,.fancybox-button--right,.fancybox-buttons button:not(.fancybox-button--close){display:none!important}.fancybox-caption{padding:20px 0;margin:0}}.fancybox-button--fullscreen:before{width:15px;height:11px;left:15px;top:16px;border:2px solid;background:none}.fancybox-button--play:before{top:16px;left:18px;width:0;height:0;border-top:6px inset transparent;border-bottom:6px inset transparent;border-left:10px solid;border-radius:1px;background:transparent}.fancybox-button--pause:before{top:16px;left:18px;width:7px;height:11px;border-style:solid;border-width:0 2px;background:transparent}.fancybox-button--grid span{font-size:23px}.fancybox-button--grid:before{top:20px;left:21px;width:3px;height:3px;box-shadow:0 -4px 0,-4px -4px 0,4px -4px 0,inset 0 0 0 32px,-4px 0 0,4px 0 0,0 4px 0,-4px 4px 0,4px 4px 0}.fancybox-container--thumbs .fancybox-caption-wrap,.fancybox-container--thumbs .fancybox-controls,.fancybox-container--thumbs .fancybox-slider-wrap{right:220px}.fancybox-grid{position:absolute;top:0;right:0;bottom:0;left:auto;width:220px;margin:0;padding:5px 5px 0 0;background:#fff;z-index:99993;word-break:normal;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;box-sizing:border-box}.fancybox-grid>ul{list-style:none;position:absolute;position:relative;width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;font-size:0}.fancybox-grid>ul>li{float:left;overflow:hidden;max-width:50%;padding:0;margin:0;width:105px;height:75px;position:relative;cursor:pointer;outline:none;border:5px solid #fff;border-top-width:0;border-right-width:0;-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box}li.fancybox-grid-loading{background:rgba(0,0,0,.1)}.fancybox-grid>ul>li>img{position:absolute;top:0;left:0;min-width:100%;min-height:100%;max-width:none;max-height:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-grid>ul>li:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2px;border:4px solid #4ea7f9;z-index:99991;opacity:0;transition:all .2s cubic-bezier(.25,.46,.45,.94)}.fancybox-grid>ul>li.fancybox-grid-active:before{opacity:1}@media (max-width:800px){.fancybox-grid{display:none!important}.fancybox-container--thumbs .fancybox-infobar{margin-left:auto}.fancybox-container--thumbs .fancybox-buttons,.fancybox-container--thumbs .fancybox-caption-wrap,.fancybox-container--thumbs .fancybox-slider-wrap{right:0}} \ No newline at end of file +.fancybox-enabled{overflow:hidden;-ms-touch-action:none;touch-action:none}.fancybox-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99993;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-container~.fancybox-container{z-index:99992}.fancybox-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f0f11;opacity:0;transition:opacity .3s cubic-bezier(.55,.06,.68,.19);-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-container--ready .fancybox-bg{opacity:.87;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-controls{position:absolute;top:0;left:0;right:0;text-align:center;opacity:0;z-index:99994;transition:opacity .1s;pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-show-controls .fancybox-controls{opacity:1}.fancybox-infobar{display:none}.fancybox-show-infobar .fancybox-infobar{display:inline-block;pointer-events:all}.fancybox-infobar__body{display:inline-block;width:70px;line-height:44px;font-size:13px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;text-align:center;color:#ddd;background-color:rgba(30,30,30,.7);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:subpixel-antialiased}.fancybox-buttons{position:absolute;top:0;right:0;display:none;pointer-events:all}.fancybox-show-buttons .fancybox-buttons{display:block}.fancybox-slider-wrap{overflow:hidden}.fancybox-slider,.fancybox-slider-wrap{position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;z-index:99993;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-slide{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow:auto;outline:none;white-space:normal;box-sizing:border-box;text-align:center;z-index:99994;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent}.fancybox-slide:before{content:"";height:100%;width:0}.fancybox-slide:before,.fancybox-slide>*{display:inline-block;vertical-align:middle}.fancybox-slide>*{position:relative;padding:24px;margin:44px 0;border-width:0;text-align:left;background-color:#fff;overflow:auto;box-sizing:border-box}.fancybox-slide--image{overflow:hidden}.fancybox-content{display:inline-block;position:relative;margin:44px auto;padding:0;border:0;width:800px;height:600px;vertical-align:middle;line-height:normal;text-align:left;white-space:normal;outline:none;font-size:16px;font-family:Arial,sans-serif;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch}.fancybox-iframe{display:block;margin:0;padding:0;border:0;width:100%;height:100%;background:#fff}.fancybox-image,.fancybox-slide--video .fancybox-content,.fancybox-slide--video .fancybox-iframe{background:transparent}.fancybox-image{position:absolute;top:0;left:0;margin:0;padding:0;border:0;z-index:99995;cursor:default;-webkit-transform-origin:top left;transform-origin:top left;max-width:none;max-height:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-controls--canzoomOut .fancybox-image{cursor:zoom-out}.fancybox-controls--canzoomIn .fancybox-image{cursor:zoom-in}.fancybox-controls--canGrab .fancybox-image{cursor:-webkit-grab;cursor:grab}.fancybox-controls--isGrabbing .fancybox-image{cursor:-webkit-grabbing;cursor:grabbing}.fancybox-image div{width:100%;height:100%}.fancybox-spaceball{position:absolute;top:0;left:0;z-index:1}.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;visibility:hidden;width:100%;height:9999px}.fancybox-error{margin:0;padding:40px;background:#fff;cursor:default}.fancybox-error p{margin:0;padding:0;color:#444;font:16px/20px Helvetica Neue,Helvetica,Arial,sans-serif}.fancybox-close-small{position:absolute;top:4px;right:4px;padding:0;margin:0;width:30px;height:30px;font:21px/1 Arial,Helvetica Neue,Helvetica,sans-serif;color:#888;font-weight:300;text-align:center;border-radius:50%;border-width:0;cursor:pointer;background:#fff;transition:all .2s;box-sizing:border-box;outline:none;z-index:2}.fancybox-slide--video .fancybox-close-small{top:-36px;right:-36px;background:transparent}.fancybox-close-small:hover{color:#555;background:#eee}.fancybox-caption-wrap{position:absolute;bottom:0;left:0;right:0;padding:60px 30px 0;z-index:99998;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.8));opacity:0;transition:opacity .2s;pointer-events:none}.fancybox-show-caption .fancybox-caption-wrap{opacity:1}.fancybox-caption{padding:30px 0;border-top:1px solid hsla(0,0%,100%,.4);font-size:14px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;line-height:20px;-webkit-text-size-adjust:none}.fancybox-caption a,.fancybox-caption button{pointer-events:all}.fancybox-caption a{color:#fff;text-decoration:underline}.fancybox-button{display:inline-block;position:relative;width:44px;height:44px;line-height:44px;margin:0;padding:0;border:0;cursor:pointer;background:transparent;color:#fff;box-sizing:border-box;vertical-align:top;outline:none}.fancybox-button--disabled{cursor:default}.fancybox-button,.fancybox-infobar__body{background:rgba(30,30,30,.6)}.fancybox-button:hover{background:rgba(0,0,0,.8)}.fancybox-button:after,.fancybox-button:before{content:"";pointer-events:none;position:absolute;border-color:#fff;background-color:currentColor;color:currentColor;opacity:.9;box-sizing:border-box;display:inline-block}.fancybox-button--left{border-bottom-left-radius:5px}.fancybox-button--left:after{left:20px;top:18px;width:6px;height:6px;background:transparent;border-top:2px solid currentColor;border-right:2px solid currentColor;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.fancybox-button--right{border-bottom-right-radius:5px}.fancybox-button--right:after{right:20px;top:18px;width:6px;height:6px;background:transparent;border-top:2px solid currentColor;border-right:2px solid currentColor;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancybox-button--close{float:right}.fancybox-button--close:after,.fancybox-button--close:before{content:"";display:inline-block;position:absolute;height:2px;width:16px;top:calc(50% - 1px);left:calc(50% - 8px)}.fancybox-button--close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancybox-button--close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.fancybox-loading{border:6px solid hsla(0,0%,39%,.4);border-top:6px solid hsla(0,0%,100%,.6);border-radius:100%;height:50px;width:50px;-webkit-animation:a .6s infinite linear;animation:a .6s infinite linear;background:transparent;position:absolute;top:50%;left:50%;margin-top:-25px;margin-left:-25px;z-index:99999}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@media (max-width:800px){.fancybox-controls{text-align:left}.fancybox-button--left,.fancybox-button--right,.fancybox-buttons button:not(.fancybox-button--close){display:none!important}.fancybox-caption{padding:20px 0;margin:0}}.fancybox-button--fullscreen:before{width:15px;height:11px;left:15px;top:16px;border:2px solid;background:none}.fancybox-button--play:before{top:16px;left:18px;width:0;height:0;border-top:6px inset transparent;border-bottom:6px inset transparent;border-left:10px solid;border-radius:1px;background:transparent}.fancybox-button--pause:before{top:16px;left:18px;width:7px;height:11px;border-style:solid;border-width:0 2px;background:transparent}.fancybox-button--grid span{font-size:23px}.fancybox-button--grid:before{top:20px;left:21px;width:3px;height:3px;box-shadow:0 -4px 0 #fff,-4px -4px 0 #fff,4px -4px 0 #fff,inset 0 0 0 32px #fff,-4px 0 0 #fff,4px 0 0 #fff,0 4px 0 #fff,-4px 4px 0 #fff,4px 4px 0 #fff}.fancybox-container--thumbs .fancybox-caption-wrap,.fancybox-container--thumbs .fancybox-controls,.fancybox-container--thumbs .fancybox-slider-wrap{right:220px}.fancybox-grid{position:absolute;top:0;right:0;bottom:0;left:auto;width:220px;margin:0;padding:5px 5px 0 0;background:#fff;z-index:99993;word-break:normal;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;box-sizing:border-box}.fancybox-grid>ul{list-style:none;position:relative;width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;font-size:0}.fancybox-grid>ul>li{float:left;overflow:hidden;max-width:50%;padding:0;margin:0;width:105px;height:75px;position:relative;cursor:pointer;outline:none;border:5px solid #fff;border-top-width:0;border-right-width:0;-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box}.fancybox-grid>ul>li>img{position:absolute;top:0;left:0;min-width:100%;min-height:100%;max-width:none;max-height:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-grid>ul>li.fancybox-grid-active:before{opacity:1}.fancybox-grid>ul>li:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2px;border:4px solid #4ea7f9;z-index:99991;opacity:0;transition:all .2s cubic-bezier(.25,.46,.45,.94)}li.fancybox-grid-loading{background:rgba(0,0,0,.1)}@media (max-width:800px){.fancybox-grid{display:none!important}.fancybox-container--thumbs .fancybox-infobar{margin-left:auto}.fancybox-container--thumbs .fancybox-buttons,.fancybox-container--thumbs .fancybox-caption-wrap,.fancybox-container--thumbs .fancybox-slider-wrap{right:0}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index c1785992..bd5122ef 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -51,5 +51,17 @@ gulp.task('css', function() { .pipe(gulp.dest('dist')); }); +// scss files +gulp.task('sass', function() { + return gulp.src('src/scss/*.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('src/css')); +}); + +// scss watcher +gulp.task('watch', function() { + gulp.watch('src/scss/*.scss', ['sass']); +}); + // Default Task gulp.task('default', ['scripts', 'css']); diff --git a/src/css/core.css b/src/css/core.css index 348a2b9b..cf29bd1e 100644 --- a/src/css/core.css +++ b/src/css/core.css @@ -1,463 +1,392 @@ .fancybox-enabled { - overflow: hidden; - touch-action: none; -} + overflow: hidden; + touch-action: none; } .fancybox-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 99993; - backface-visibility: hidden; -} - -/* Make sure that the first one is on the top */ -.fancybox-container ~ .fancybox-container { - z-index: 99992; -} + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99993; + backface-visibility: hidden; + /* Make sure that the first one is on the top */ } + .fancybox-container ~ .fancybox-container { + z-index: 99992; } .fancybox-bg { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: #0f0f11; - opacity: 0; - transition: opacity 300ms cubic-bezier(.55,.06,.68,.19); - backface-visibility: hidden; -} + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #0f0f11; + opacity: 0; + transition: opacity 300ms cubic-bezier(0.55, 0.06, 0.68, 0.19); + backface-visibility: hidden; } .fancybox-container--ready .fancybox-bg { - opacity: 0.87; - transition-timing-function: cubic-bezier(.22,.61,.36,1); -} + opacity: 0.87; + transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .fancybox-controls { - position: absolute; - top: 0; - left: 0; - right: 0; - text-align: center; - opacity: 0; - z-index: 99994; - transition: opacity 100ms; - pointer-events: none; - backface-visibility: hidden; -} + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; + opacity: 0; + z-index: 99994; + transition: opacity 100ms; + pointer-events: none; + backface-visibility: hidden; } .fancybox-show-controls .fancybox-controls { - opacity: 1; -} + opacity: 1; } .fancybox-infobar { - display: none; -} + display: none; } .fancybox-show-infobar .fancybox-infobar { - display: inline-block; - pointer-events: all; -} + display: inline-block; + pointer-events: all; } .fancybox-infobar__body { - display: inline-block; - width: 70px; - line-height: 44px; - font-size: 13px; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - text-align: center; - color: #ddd; - background-color: rgba(30,30,30,0.7); - pointer-events: none; - user-select: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: rgba(0,0,0,0); - -webkit-font-smoothing: subpixel-antialiased; -} + display: inline-block; + width: 70px; + line-height: 44px; + font-size: 13px; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + text-align: center; + color: #ddd; + background-color: rgba(30, 30, 30, 0.7); + pointer-events: none; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: subpixel-antialiased; } .fancybox-buttons { - position: absolute; - top: 0; - right: 0; - display: none; - pointer-events: all; -} + position: absolute; + top: 0; + right: 0; + display: none; + pointer-events: all; } .fancybox-show-buttons .fancybox-buttons { - display: block; -} + display: block; } .fancybox-slider-wrap { - overflow: hidden; -} + overflow: hidden; } .fancybox-slider-wrap, .fancybox-slider { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - padding: 0; - margin: 0; - z-index: 99993; - backface-visibility: hidden; -} + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + z-index: 99993; + backface-visibility: hidden; } .fancybox-slide { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow: auto; - outline: none; - white-space: normal; - box-sizing: border-box; - text-align: center; - z-index: 99994; - -webkit-overflow-scrolling: touch; - -webkit-tap-highlight-color: rgba(0,0,0,0); -} - -.fancybox-slide::before { - content: ''; - display: inline-block; - vertical-align: middle; - height: 100%; - width: 0; -} - -.fancybox-slide > * { - display: inline-block; - position: relative; - padding: 24px; - margin: 44px 0 44px; - border-width: 0; - vertical-align: middle; - text-align: left; - background-color: #fff; - overflow: auto; - box-sizing: border-box; -} + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: auto; + outline: none; + white-space: normal; + box-sizing: border-box; + text-align: center; + z-index: 99994; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: transparent; } + .fancybox-slide:before { + content: ''; + display: inline-block; + vertical-align: middle; + height: 100%; + width: 0; } + .fancybox-slide > * { + display: inline-block; + position: relative; + padding: 24px; + margin: 44px 0 44px; + border-width: 0; + vertical-align: middle; + text-align: left; + background-color: #fff; + overflow: auto; + box-sizing: border-box; } .fancybox-slide--image { - overflow: hidden; -} + overflow: hidden; } .fancybox-content { - display: inline-block; - position: relative; - margin: 44px auto; - padding: 0; - border: 0; - width: 800px; - height: 600px; - vertical-align: middle; - line-height: normal; - text-align: left; - white-space: normal; - outline: none; - font-size: 16px; - font-family: Arial, sans-serif; - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0,0,0,0); - -webkit-overflow-scrolling: touch; -} + display: inline-block; + position: relative; + margin: 44px auto; + padding: 0; + border: 0; + width: 800px; + height: 600px; + vertical-align: middle; + line-height: normal; + text-align: left; + white-space: normal; + outline: none; + font-size: 16px; + font-family: Arial, sans-serif; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + -webkit-overflow-scrolling: touch; } .fancybox-iframe { - display: block; - margin: 0; - padding: 0; - border: 0; - width: 100%; - height: 100%; - background: #fff; -} + display: block; + margin: 0; + padding: 0; + border: 0; + width: 100%; + height: 100%; + background: #fff; } .fancybox-slide--video .fancybox-content, .fancybox-slide--video .fancybox-iframe { - background: transparent; -} + background: transparent; } .fancybox-image { - position: absolute; - top: 0; - left: 0; - margin: 0; - padding: 0; - border: 0; - z-index: 99995; - background: transparent; - cursor: default; - transform-origin: top left; - max-width: none; - max-height: none; - backface-visibility: hidden; -} + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + border: 0; + z-index: 99995; + background: transparent; + cursor: default; + transform-origin: top left; + max-width: none; + max-height: none; + backface-visibility: hidden; } .fancybox-controls--canzoomOut .fancybox-image { - cursor: zoom-out; -} + cursor: zoom-out; } .fancybox-controls--canzoomIn .fancybox-image { - cursor: zoom-in; -} + cursor: zoom-in; } .fancybox-controls--canGrab .fancybox-image { - cursor: grab; -} + cursor: grab; } .fancybox-controls--isGrabbing .fancybox-image { - cursor: grabbing; -} + cursor: grabbing; } .fancybox-image div { - width: 100%; - height: 100%; -} + width: 100%; + height: 100%; } .fancybox-spaceball { - position: absolute; - top: 0; - left: 0; - z-index: 1; -} + position: absolute; + top: 0; + left: 0; + z-index: 1; } .fancybox-tmp { - position: absolute; - top: -9999px; - left: -9999px; - visibility: hidden; - width: 100%; - height: 9999px; -} + position: absolute; + top: -9999px; + left: -9999px; + visibility: hidden; + width: 100%; + height: 9999px; } .fancybox-error { - margin: 0; - padding: 40px; - background: #fff; - cursor: default; -} - -.fancybox-error p { - margin: 0; - padding: 0; - color: #444; - font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; -} + margin: 0; + padding: 40px; + background: #fff; + cursor: default; } + .fancybox-error p { + margin: 0; + padding: 0; + color: #444; + font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; } .fancybox-close-small { - position: absolute; - top: 4px; - right: 4px; - padding: 0; - margin: 0; - width: 30px; - height: 30px; - font: 21px/1 Arial,"Helvetica Neue",Helvetica,sans-serif; - color: #888; - font-weight: 300; - text-align: center; - border-radius: 50%; - border-width: 0; - cursor: pointer; - background: #fff; - transition: all 0.2s; - box-sizing: border-box; - outline: none; - z-index: 2; -} + position: absolute; + top: 4px; + right: 4px; + padding: 0; + margin: 0; + width: 30px; + height: 30px; + font: 21px/1 Arial,"Helvetica Neue",Helvetica,sans-serif; + color: #888; + font-weight: 300; + text-align: center; + border-radius: 50%; + border-width: 0; + cursor: pointer; + background: #fff; + transition: all 0.2s; + box-sizing: border-box; + outline: none; + z-index: 2; } .fancybox-slide--video .fancybox-close-small { - top : -36px; - right : -36px; - background: transparent; -} + top: -36px; + right: -36px; + background: transparent; } .fancybox-close-small:hover { - color: #555; - background: #eee; -} + color: #555; + background: #eee; } /* Caption */ - .fancybox-caption-wrap { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 60px 30px 0 30px; - z-index: 99998; - backface-visibility: hidden; - box-sizing: border-box; - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.8) 100%); - opacity: 0; - transition: opacity .2s; - pointer-events: none; -} + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 60px 30px 0 30px; + z-index: 99998; + backface-visibility: hidden; + box-sizing: border-box; + background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%); + opacity: 0; + transition: opacity .2s; + pointer-events: none; } .fancybox-show-caption .fancybox-caption-wrap { - opacity: 1; -} + opacity: 1; } .fancybox-caption { - padding: 30px 0; - border-top: 1px solid rgba(255,255,255,0.4); - font-size: 14px; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - color: #fff; - line-height: 20px; - -webkit-text-size-adjust: none; -} + padding: 30px 0; + border-top: 1px solid rgba(255, 255, 255, 0.4); + font-size: 14px; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + color: #fff; + line-height: 20px; + -webkit-text-size-adjust: none; } .fancybox-caption a, .fancybox-caption button { - pointer-events: all; -} + pointer-events: all; } .fancybox-caption a { - color: #fff; - text-decoration: underline; -} + color: #fff; + text-decoration: underline; } /* Buttons */ - .fancybox-button { - display: inline-block; - position : relative; - width: 44px; - height: 44px; - line-height: 44px; - margin: 0; - padding: 0; - border: 0; - cursor: pointer; - background: transparent; - color: #fff; - box-sizing: border-box; - vertical-align: top; - outline: none; -} + display: inline-block; + position: relative; + width: 44px; + height: 44px; + line-height: 44px; + margin: 0; + padding: 0; + border: 0; + cursor: pointer; + background: transparent; + color: #fff; + box-sizing: border-box; + vertical-align: top; + outline: none; } .fancybox-button--disabled { - cursor: default; -} + cursor: default; } .fancybox-infobar__body, .fancybox-button { - background: rgba(30,30,30,0.6); -} + background: rgba(30, 30, 30, 0.6); } .fancybox-button:hover { - background: rgba(0,0,0,0.8); -} - -.fancybox-button::before, -.fancybox-button::after { - content: ''; - pointer-events: none; - position: absolute; - border-color: #fff; - background-color: currentColor; - color: currentColor; - opacity: 0.9; - box-sizing: border-box; - display: inline-block; -} - -.fancybox-button--left::after { - left: 20px; - top: 18px; - width: 6px; - height: 6px; - background: transparent; - border-top: solid 2px currentColor; - border-right: solid 2px currentColor; - transform: rotate(-135deg); -} - -.fancybox-button--right::after { - right: 20px; - top: 18px; - width: 6px; - height: 6px; - background: transparent; - border-top: solid 2px currentColor; - border-right: solid 2px currentColor; - transform: rotate(45deg); -} + background: rgba(0, 0, 0, 0.8); } + +.fancybox-button:before, .fancybox-button:after { + content: ''; + pointer-events: none; + position: absolute; + border-color: #fff; + background-color: currentColor; + color: currentColor; + opacity: 0.9; + box-sizing: border-box; + display: inline-block; } .fancybox-button--left { - border-bottom-left-radius: 5px; -} + border-bottom-left-radius: 5px; } + .fancybox-button--left:after { + left: 20px; + top: 18px; + width: 6px; + height: 6px; + background: transparent; + border-top: solid 2px currentColor; + border-right: solid 2px currentColor; + transform: rotate(-135deg); } .fancybox-button--right { - border-bottom-right-radius: 5px; -} + border-bottom-right-radius: 5px; } + .fancybox-button--right:after { + right: 20px; + top: 18px; + width: 6px; + height: 6px; + background: transparent; + border-top: solid 2px currentColor; + border-right: solid 2px currentColor; + transform: rotate(45deg); } .fancybox-button--close { - float: right; -} - -.fancybox-button--close::before, .fancybox-button--close::after { - content: ''; - display: inline-block; - position: absolute; - height: 2px; - width: 16px; - top: calc(50% - 1px); - left: calc(50% - 8px); -} -.fancybox-button--close::before { - transform: rotate(45deg); -} -.fancybox-button--close::after { - transform: rotate(-45deg); -} -/* Loading spinner */ + float: right; } + .fancybox-button--close:before, .fancybox-button--close:after { + content: ''; + display: inline-block; + position: absolute; + height: 2px; + width: 16px; + top: calc(50% - 1px); + left: calc(50% - 8px); } + .fancybox-button--close:before { + transform: rotate(45deg); } + .fancybox-button--close:after { + transform: rotate(-45deg); } +/* Loading spinner */ .fancybox-loading { - border: 6px solid rgba(100, 100, 100, .4); - border-top: 6px solid rgba(255, 255, 255, .6); - border-radius: 100%; - height: 50px; - width: 50px; - animation: fancybox-rotate .6s infinite linear; - background: transparent; - position: absolute; - top: 50%; - left: 50%; - margin-top: -25px; - margin-left: -25px; - z-index: 99999; -} + border: 6px solid rgba(100, 100, 100, 0.4); + border-top: 6px solid rgba(255, 255, 255, 0.6); + border-radius: 100%; + height: 50px; + width: 50px; + animation: fancybox-rotate .6s infinite linear; + background: transparent; + position: absolute; + top: 50%; + left: 50%; + margin-top: -25px; + margin-left: -25px; + z-index: 99999; } @keyframes fancybox-rotate { - from {transform: rotate(0deg);} - to {transform: rotate(359deg);} -} + from { + transform: rotate(0deg); } + to { + transform: rotate(359deg); } } /* Styling for Small-Screen Devices */ - @media all and (max-width: 800px) { - - .fancybox-controls { - text-align: left; - } - - .fancybox-button--left, - .fancybox-button--right, - .fancybox-buttons button:not(.fancybox-button--close) - { - display: none !important; - } - - .fancybox-caption { - padding: 20px 0; - margin: 0; - } -} + .fancybox-controls { + text-align: left; } + .fancybox-button--left, + .fancybox-button--right, + .fancybox-buttons button:not(.fancybox-button--close) { + display: none !important; } + .fancybox-caption { + padding: 20px 0; + margin: 0; } } diff --git a/src/css/fullscreen.css b/src/css/fullscreen.css index 67397f4d..1fc0be93 100644 --- a/src/css/fullscreen.css +++ b/src/css/fullscreen.css @@ -1,11 +1,8 @@ - /* Fullscreen */ - -.fancybox-button--fullscreen::before { - width: 15px; - height: 11px; - left: 15px; - top: 16px; - border: 2px solid; - background: none; -} +.fancybox-button--fullscreen:before { + width: 15px; + height: 11px; + left: 15px; + top: 16px; + border: 2px solid; + background: none; } diff --git a/src/css/slideshow.css b/src/css/slideshow.css index 2affd118..6108c2f3 100644 --- a/src/css/slideshow.css +++ b/src/css/slideshow.css @@ -1,25 +1,20 @@ /* Slideshow button */ +.fancybox-button--play:before { + top: 16px; + left: 18px; + width: 0; + height: 0; + border-top: 6px inset transparent; + border-bottom: 6px inset transparent; + border-left: 10px solid; + border-radius: 1px; + background: transparent; } -.fancybox-button--play {} - -.fancybox-button--play::before { - top: 16px; - left: 18px; - width: 0; - height: 0; - border-top: 6px inset transparent; - border-bottom: 6px inset transparent; - border-left: 10px solid; - border-radius: 1px; - background: transparent; -} - -.fancybox-button--pause::before { - top: 16px; - left: 18px; - width: 7px; - height: 11px; - border-style: solid; - border-width: 0 2px 0 2px; - background: transparent; -} +.fancybox-button--pause:before { + top: 16px; + left: 18px; + width: 7px; + height: 11px; + border-style: solid; + border-width: 0 2px 0 2px; + background: transparent; } diff --git a/src/css/thumbs.css b/src/css/thumbs.css index 23dc76bc..0ae48c85 100644 --- a/src/css/thumbs.css +++ b/src/css/thumbs.css @@ -1,123 +1,96 @@ - /* Thumbs */ +.fancybox-button--grid span { + font-size: 23px; } -.fancybox-button--grid span{ - font-size: 23px; -} - -.fancybox-button--grid::before { - top: 20px; - left: 21px; - width: 3px; - height: 3px; - box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0; -} +.fancybox-button--grid:before { + top: 20px; + left: 21px; + width: 3px; + height: 3px; + box-shadow: 0 -4px 0 #FFF, -4px -4px 0 #FFF, 4px -4px 0 #FFF, inset 0 0 0 32px #FFF, -4px 0 0 #FFF, 4px 0 0 #FFF, 0 4px 0 #FFF, -4px 4px 0 #FFF, 4px 4px 0 #FFF; } .fancybox-container--thumbs .fancybox-controls, .fancybox-container--thumbs .fancybox-slider-wrap, .fancybox-container--thumbs .fancybox-caption-wrap { - right: 220px; -} + right: 220px; } .fancybox-grid { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: auto; - width: 220px; - margin: 0; - padding: 5px 5px 0 0; - background: #fff; - z-index: 99993; - word-break: normal; - -webkit-overflow-scrolling: touch; - -webkit-tap-highlight-color: rgba(0,0,0,0); - box-sizing: border-box; -} - -.fancybox-grid > ul { - list-style: none; - position: absolute; - position: relative; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow-x: hidden; - overflow-y: auto; - font-size: 0; -} - -.fancybox-grid > ul > li { - float: left; - overflow: hidden; - max-width: 50%; - padding: 0; - margin: 0; - width: 105px; - height: 75px; - position: relative; - cursor: pointer; - outline: none; - border: 5px solid #fff; - border-top-width: 0; - border-right-width: 0; - -webkit-tap-highlight-color: transparent; - backface-visibility: hidden; - box-sizing: border-box; -} + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: auto; + width: 220px; + margin: 0; + padding: 5px 5px 0 0; + background: #fff; + z-index: 99993; + word-break: normal; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; } + .fancybox-grid > ul { + list-style: none; + position: relative; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + font-size: 0; } + .fancybox-grid > ul > li { + float: left; + overflow: hidden; + max-width: 50%; + padding: 0; + margin: 0; + width: 105px; + height: 75px; + position: relative; + cursor: pointer; + outline: none; + border: 5px solid #fff; + border-top-width: 0; + border-right-width: 0; + -webkit-tap-highlight-color: transparent; + backface-visibility: hidden; + box-sizing: border-box; } + .fancybox-grid > ul > li > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + min-height: 100%; + max-width: none; + max-height: none; + -webkit-touch-callout: none; + user-select: none; } + .fancybox-grid > ul > li.fancybox-grid-active:before { + opacity: 1; } + .fancybox-grid > ul > li:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: 2px; + border: 4px solid #4ea7f9; + z-index: 99991; + opacity: 0; + transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } li.fancybox-grid-loading { - background: rgba(0,0,0,0.1); -} - -.fancybox-grid > ul > li > img { - position: absolute; - top: 0; - left: 0; - min-width: 100%; - min-height: 100%; - max-width: none; - max-height: none; - -webkit-touch-callout: none; - user-select: none; -} - -.fancybox-grid > ul > li:before { - content:''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: 2px; - border: 4px solid #4ea7f9; - z-index: 99991; - opacity: 0; - transition: all 0.2s cubic-bezier(.25,.46,.45,.94); -} - -.fancybox-grid > ul > li.fancybox-grid-active:before { - opacity: 1; -} + background: rgba(0, 0, 0, 0.1); } /* Styling for Small-Screen Devices */ - @media all and (max-width: 800px) { - - .fancybox-grid { - display: none !important; - } - - .fancybox-container--thumbs .fancybox-infobar { - margin-left: auto; - } - - .fancybox-container--thumbs .fancybox-buttons, - .fancybox-container--thumbs .fancybox-slider-wrap, - .fancybox-container--thumbs .fancybox-caption-wrap { - right: 0; - } - -} + .fancybox-grid { + display: none !important; } + .fancybox-container--thumbs .fancybox-infobar { + margin-left: auto; } + .fancybox-container--thumbs .fancybox-buttons, + .fancybox-container--thumbs .fancybox-slider-wrap, + .fancybox-container--thumbs .fancybox-caption-wrap { + right: 0; } } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 00000000..a8221f5c --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,6 @@ + +$zindex: 99991; + +$border-color: #4ea7f9; + +$screen-small-max: 800px; diff --git a/src/scss/core.scss b/src/scss/core.scss new file mode 100644 index 00000000..e327f58a --- /dev/null +++ b/src/scss/core.scss @@ -0,0 +1,464 @@ +@import "variables"; + +.fancybox-enabled { + overflow: hidden; + touch-action: none; +} + +.fancybox-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: $zindex + 2; + backface-visibility: hidden; + + /* Make sure that the first one is on the top */ + ~ .fancybox-container { + z-index: $zindex + 1; + } +} + +.fancybox-bg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #0f0f11; + opacity: 0; + transition: opacity 300ms cubic-bezier(.55,.06,.68,.19); + backface-visibility: hidden; +} + +.fancybox-container--ready .fancybox-bg { + opacity: 0.87; + transition-timing-function: cubic-bezier(.22,.61,.36,1); +} + +.fancybox-controls { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; + opacity: 0; + z-index: $zindex + 3; + transition: opacity 100ms; + pointer-events: none; + backface-visibility: hidden; +} + +.fancybox-show-controls .fancybox-controls { + opacity: 1; +} + +.fancybox-infobar { + display: none; +} + +.fancybox-show-infobar .fancybox-infobar { + display: inline-block; + pointer-events: all; +} + +.fancybox-infobar__body { + display: inline-block; + width: 70px; + line-height: 44px; + font-size: 13px; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + text-align: center; + color: #ddd; + background-color: rgba(30,30,30,0.7); + pointer-events: none; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-font-smoothing: subpixel-antialiased; +} + +.fancybox-buttons { + position: absolute; + top: 0; + right: 0; + display: none; + pointer-events: all; +} + +.fancybox-show-buttons .fancybox-buttons { + display: block; +} + +.fancybox-slider-wrap { + overflow: hidden; +} + +.fancybox-slider-wrap, +.fancybox-slider { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + z-index: $zindex + 2; + backface-visibility: hidden; +} + +.fancybox-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: auto; + outline: none; + white-space: normal; + box-sizing: border-box; + text-align: center; + z-index: $zindex + 3; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0,0,0,0); + &:before { + content: ''; + display: inline-block; + vertical-align: middle; + height: 100%; + width: 0; + } + > * { + display: inline-block; + position: relative; + padding: 24px; + margin: 44px 0 44px; + border-width: 0; + vertical-align: middle; + text-align: left; + background-color: #fff; + overflow: auto; + box-sizing: border-box; + } +} + +.fancybox-slide--image { + overflow: hidden; +} + +.fancybox-content { + display: inline-block; + position: relative; + margin: 44px auto; + padding: 0; + border: 0; + width: 800px; + height: 600px; + vertical-align: middle; + line-height: normal; + text-align: left; + white-space: normal; + outline: none; + font-size: 16px; + font-family: Arial, sans-serif; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-overflow-scrolling: touch; +} + +.fancybox-iframe { + display: block; + margin: 0; + padding: 0; + border: 0; + width: 100%; + height: 100%; + background: #fff; +} + +.fancybox-slide--video { + .fancybox-content, + .fancybox-iframe { + background: transparent; + } +} + +.fancybox-image { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + border: 0; + z-index: $zindex + 4; + background: transparent; + cursor: default; + transform-origin: top left; + max-width: none; + max-height: none; + backface-visibility: hidden; +} + +.fancybox-controls--canzoomOut .fancybox-image { + cursor: zoom-out; +} + +.fancybox-controls--canzoomIn .fancybox-image { + cursor: zoom-in; +} + +.fancybox-controls--canGrab .fancybox-image { + cursor: grab; +} + +.fancybox-controls--isGrabbing .fancybox-image { + cursor: grabbing; +} + +.fancybox-image div { + width: 100%; + height: 100%; +} + +.fancybox-spaceball { + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +.fancybox-tmp { + position: absolute; + top: -9999px; + left: -9999px; + visibility: hidden; + width: 100%; + height: 9999px; +} + +.fancybox-error { + margin: 0; + padding: 40px; + background: #fff; + cursor: default; + p { + margin: 0; + padding: 0; + color: #444; + font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; + } +} + +.fancybox-close-small { + position: absolute; + top: 4px; + right: 4px; + padding: 0; + margin: 0; + width: 30px; + height: 30px; + font: 21px/1 Arial,"Helvetica Neue",Helvetica,sans-serif; + color: #888; + font-weight: 300; + text-align: center; + border-radius: 50%; + border-width: 0; + cursor: pointer; + background: #fff; + transition: all 0.2s; + box-sizing: border-box; + outline: none; + z-index: 2; +} + +.fancybox-slide--video .fancybox-close-small { + top : -36px; + right : -36px; + background: transparent; +} + +.fancybox-close-small:hover { + color: #555; + background: #eee; +} + +/* Caption */ + +.fancybox-caption-wrap { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 60px 30px 0 30px; + z-index: $zindex + 7; + backface-visibility: hidden; + box-sizing: border-box; + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.8) 100%); + opacity: 0; + transition: opacity .2s; + pointer-events: none; +} + +.fancybox-show-caption .fancybox-caption-wrap { + opacity: 1; +} + +.fancybox-caption { + padding: 30px 0; + border-top: 1px solid rgba(255,255,255,0.4); + font-size: 14px; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + color: #fff; + line-height: 20px; + -webkit-text-size-adjust: none; +} + +.fancybox-caption a, +.fancybox-caption button { + pointer-events: all; +} + +.fancybox-caption a { + color: #fff; + text-decoration: underline; +} + +/* Buttons */ + +.fancybox-button { + display: inline-block; + position : relative; + width: 44px; + height: 44px; + line-height: 44px; + margin: 0; + padding: 0; + border: 0; + cursor: pointer; + background: transparent; + color: #fff; + box-sizing: border-box; + vertical-align: top; + outline: none; +} + +.fancybox-button--disabled { + cursor: default; +} + +.fancybox-infobar__body, .fancybox-button { + background: rgba(30,30,30,0.6); +} + +.fancybox-button { + &:hover { + background: rgba(#000, 0.8); + } + &:before, + &:after { + content: ''; + pointer-events: none; + position: absolute; + border-color: #fff; + background-color: currentColor; + color: currentColor; + opacity: 0.9; + box-sizing: border-box; + display: inline-block; + } +} + +.fancybox-button--left { + border-bottom-left-radius: 5px; + &:after { + left: 20px; + top: 18px; + width: 6px; + height: 6px; + background: transparent; + border-top: solid 2px currentColor; + border-right: solid 2px currentColor; + transform: rotate(-135deg); + } +} + +.fancybox-button--right { + border-bottom-right-radius: 5px; + &:after { + right: 20px; + top: 18px; + width: 6px; + height: 6px; + background: transparent; + border-top: solid 2px currentColor; + border-right: solid 2px currentColor; + transform: rotate(45deg); + } +} + +.fancybox-button--close { + float: right; + &:before, + &:after { + content: ''; + display: inline-block; + position: absolute; + height: 2px; + width: 16px; + top: calc(50% - 1px); + left: calc(50% - 8px); + } + &:before { + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } +} + +/* Loading spinner */ + +.fancybox-loading { + border: 6px solid rgba(100, 100, 100, .4); + border-top: 6px solid rgba(255, 255, 255, .6); + border-radius: 100%; + height: 50px; + width: 50px; + animation: fancybox-rotate .6s infinite linear; + background: transparent; + position: absolute; + top: 50%; + left: 50%; + margin-top: -25px; + margin-left: -25px; + z-index: $zindex + 8; +} + +@keyframes fancybox-rotate { + from {transform: rotate(0deg);} + to {transform: rotate(359deg);} +} + +/* Styling for Small-Screen Devices */ + +@media all and (max-width: $screen-small-max) { + + .fancybox-controls { + text-align: left; + } + + .fancybox-button--left, + .fancybox-button--right, + .fancybox-buttons button:not(.fancybox-button--close) + { + display: none !important; + } + + .fancybox-caption { + padding: 20px 0; + margin: 0; + } +} diff --git a/src/scss/fullscreen.scss b/src/scss/fullscreen.scss new file mode 100644 index 00000000..2361fd71 --- /dev/null +++ b/src/scss/fullscreen.scss @@ -0,0 +1,12 @@ +/* Fullscreen */ + +@import "variables"; + +.fancybox-button--fullscreen:before { + width: 15px; + height: 11px; + left: 15px; + top: 16px; + border: 2px solid; + background: none; +} diff --git a/src/scss/slideshow.scss b/src/scss/slideshow.scss new file mode 100644 index 00000000..d31323a9 --- /dev/null +++ b/src/scss/slideshow.scss @@ -0,0 +1,29 @@ +/* Slideshow button */ + +@import "variables"; + +.fancybox-button--play { + &:before { + top: 16px; + left: 18px; + width: 0; + height: 0; + border-top: 6px inset transparent; + border-bottom: 6px inset transparent; + border-left: 10px solid; + border-radius: 1px; + background: transparent; + } +} + +.fancybox-button--pause { + &:before { + top: 16px; + left: 18px; + width: 7px; + height: 11px; + border-style: solid; + border-width: 0 2px 0 2px; + background: transparent; + } +} diff --git a/src/scss/thumbs.scss b/src/scss/thumbs.scss new file mode 100644 index 00000000..67bbfe3a --- /dev/null +++ b/src/scss/thumbs.scss @@ -0,0 +1,130 @@ +/* Thumbs */ + +@import "variables"; + +.fancybox-button--grid { + span { + font-size: 23px; + } + &:before { + top: 20px; + left: 21px; + width: 3px; + height: 3px; + box-shadow: 0 -4px 0 #FFF, + -4px -4px 0 #FFF, + 4px -4px 0 #FFF, + inset 0 0 0 32px #FFF, + -4px 0 0 #FFF, + 4px 0 0 #FFF, + 0 4px 0 #FFF, + -4px 4px 0 #FFF, + 4px 4px 0 #FFF; + } +} + +.fancybox-container--thumbs { + .fancybox-controls, + .fancybox-slider-wrap, + .fancybox-caption-wrap { + right: 220px; + } +} + +.fancybox-grid { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: auto; + width: 220px; + margin: 0; + padding: 5px 5px 0 0; + background: #fff; + z-index: $zindex + 2; + word-break: normal; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0,0,0,0); + box-sizing: border-box; + > ul { + list-style: none; + position: relative; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + font-size: 0; + > li { + float: left; + overflow: hidden; + max-width: 50%; + padding: 0; + margin: 0; + width: 105px; + height: 75px; + position: relative; + cursor: pointer; + outline: none; + border: 5px solid #fff; + border-top-width: 0; + border-right-width: 0; + -webkit-tap-highlight-color: transparent; + backface-visibility: hidden; + box-sizing: border-box; + > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + min-height: 100%; + max-width: none; + max-height: none; + -webkit-touch-callout: none; + user-select: none; + } + &.fancybox-grid-active:before { + opacity: 1; + } + &:before { + content:''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: 2px; + border: 4px solid $border-color; + z-index: $zindex; + opacity: 0; + transition: all 0.2s cubic-bezier(.25,.46,.45,.94); + } + } + } +} + +li.fancybox-grid-loading { + background: rgba(0,0,0,0.1); +} + +/* Styling for Small-Screen Devices */ + +@media all and (max-width: $screen-small-max) { + + .fancybox-grid { + display: none !important; + } + + .fancybox-container--thumbs { + .fancybox-infobar { + margin-left: auto; + } + .fancybox-buttons, + .fancybox-slider-wrap, + .fancybox-caption-wrap { + right: 0; + } + } + +}