From 3323ef4acce4196358ca1ba0c699fd6d056e5325 Mon Sep 17 00:00:00 2001 From: Ralph Bolliger Date: Wed, 12 Apr 2017 16:26:15 +0200 Subject: [PATCH 1/2] Created SCSS files in order to get it working on Foundation 6 Sass configuration. --- .gitignore | 1 + dist/jquery.fancybox.scss | 616 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 617 insertions(+) create mode 100644 dist/jquery.fancybox.scss diff --git a/.gitignore b/.gitignore index 8d87b1d2..a49130e3 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules/* +.idea \ No newline at end of file diff --git a/dist/jquery.fancybox.scss b/dist/jquery.fancybox.scss new file mode 100644 index 00000000..a068b974 --- /dev/null +++ b/dist/jquery.fancybox.scss @@ -0,0 +1,616 @@ +@charset "UTF-8"; +.fancybox-enabled { + overflow: hidden; } + +.fancybox-enabled body { + overflow: visible; + height: 100%; } + +.fancybox-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99993; + -webkit-backface-visibility: hidden; + 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-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fancybox-container--ready .fancybox-bg { + 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 .2s; + pointer-events: none; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + direction: ltr; } + +.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; + -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; + direction: ltr; } + +.fancybox-slider-wrap, +.fancybox-slider { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + z-index: 99993; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-tap-highlight-color: transparent; } + +.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; } + +.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; } + +.fancybox-slide--image::before { + display: none; } + +.fancybox-content { + display: inline-block; + position: relative; + margin: 44px auto; + padding: 0; + border: 0; + width: 80%; + height: calc(100% - 88px); + 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-slide--video .fancybox-content, +.fancybox-slide--video .fancybox-iframe { + background: transparent; } + +.fancybox-placeholder { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + border: 0; + z-index: 99995; + background: transparent; + cursor: default; + overflow: visible; + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + background-size: 100% 100%; + background-repeat: no-repeat; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fancybox-image, +.fancybox-spaceball { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 0; + max-width: none; + max-height: none; + background: transparent; + background-size: 100% 100%; } + +.fancybox-controls--canzoomOut .fancybox-placeholder { + cursor: -webkit-zoom-out; + cursor: zoom-out; } + +.fancybox-controls--canzoomIn .fancybox-placeholder { + cursor: -webkit-zoom-in; + cursor: zoom-in; } + +.fancybox-controls--canGrab .fancybox-placeholder { + cursor: -webkit-grab; + cursor: grab; } + +.fancybox-controls--isGrabbing .fancybox-placeholder { + cursor: -webkit-grabbing; + cursor: grabbing; } + +.fancybox-spaceball { + z-index: 1; } + +.fancybox-tmp { + position: absolute; + top: -9999px; + left: -9999px; + visibility: hidden; } + +.fancybox-error { + position: absolute; + margin: 0; + padding: 40px; + top: 50%; + left: 50%; + width: 380px; + max-width: 100%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + 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: 0; + right: 0; + width: 44px; + height: 44px; + padding: 0; + margin: 0; + border: 0; + border-radius: 0; + outline: none; + background: transparent; + z-index: 10; + cursor: pointer; } + +.fancybox-close-small:after { + content: '×'; + position: absolute; + top: 5px; + right: 5px; + width: 30px; + height: 30px; + font: 20px/30px Arial,"Helvetica Neue",Helvetica,sans-serif; + color: #888; + font-weight: 300; + text-align: center; + border-radius: 50%; + border-width: 0; + background: #fff; + transition: background .2s; + box-sizing: border-box; + z-index: 2; } + +.fancybox-close-small:focus:after { + outline: 1px dotted #888; } + +.fancybox-slide--video .fancybox-close-small { + top: -36px; + right: -36px; + background: transparent; } + +.fancybox-close-small:hover:after { + color: #555; + background: #eee; } + +/* Caption */ +.fancybox-caption-wrap { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 60px 30px 0 30px; + z-index: 99998; + -webkit-backface-visibility: hidden; + 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; } + +.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; + border-radius: 0; + cursor: pointer; + background: transparent; + color: #fff; + box-sizing: border-box; + vertical-align: top; + outline: none; } + +.fancybox-button--disabled { + cursor: default; + pointer-events: none; } + +.fancybox-infobar__body, .fancybox-button { + 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--disabled::before, +.fancybox-button--disabled::after { + opacity: 0.5; } + +.fancybox-button--left::after { + left: 20px; + top: 18px; + width: 6px; + height: 6px; + background: transparent; + border-top: solid 2px currentColor; + border-right: solid 2px currentColor; + -webkit-transform: rotate(-135deg); + -ms-transform: rotate(-135deg); + 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; + -webkit-transform: rotate(45deg); + -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 { + 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); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.fancybox-button--close::after { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); } + +/* Loading spinner */ +.fancybox-loading { + 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; + -webkit-animation: fancybox-rotate .8s infinite linear; + animation: fancybox-rotate .8s infinite linear; + background: transparent; + position: absolute; + top: 50%; + left: 50%; + margin-top: -25px; + margin-left: -25px; + z-index: 99999; } + +@-webkit-keyframes fancybox-rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + +@keyframes fancybox-rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + 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; } } + +/* Fullscreen */ +.fancybox-button--fullscreen::before { + width: 15px; + height: 11px; + left: 15px; + top: 16px; + border: 2px solid; + background: none; } + +/* 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--pause::before { + top: 16px; + left: 18px; + width: 7px; + height: 11px; + border-style: solid; + border-width: 0 2px 0 2px; + background: transparent; } + +/* Thumbs */ +.fancybox-button--thumbs span { + font-size: 23px; } + +.fancybox-button--thumbs::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-container--thumbs .fancybox-controls, +.fancybox-container--thumbs .fancybox-slider-wrap, +.fancybox-container--thumbs .fancybox-caption-wrap { + right: 220px; } + +.fancybox-thumbs { + 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-thumbs > 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-thumbs > 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-thumbs-loading { + background: rgba(0, 0, 0, 0.1); } + +.fancybox-thumbs > 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-thumbs > 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); } + +.fancybox-thumbs > ul > li.fancybox-thumbs-active:before { + opacity: 1; } + +/* Styling for Small-Screen Devices */ +@media all and (max-width: 800px) { + .fancybox-thumbs { + display: none !important; } + .fancybox-container--thumbs .fancybox-controls, + .fancybox-container--thumbs .fancybox-slider-wrap, + .fancybox-container--thumbs .fancybox-caption-wrap { + right: 0; } } From 657c35792a9e2a128632a2be4737d053a90c537d Mon Sep 17 00:00:00 2001 From: Ralph Bolliger Date: Thu, 21 Sep 2017 13:01:51 +0200 Subject: [PATCH 2/2] no message --- dist/jquery.fancybox.scss | 690 +++++++++++++++++++++++--------------- 1 file changed, 411 insertions(+), 279 deletions(-) diff --git a/dist/jquery.fancybox.scss b/dist/jquery.fancybox.scss index a068b974..0b8f9103 100644 --- a/dist/jquery.fancybox.scss +++ b/dist/jquery.fancybox.scss @@ -6,6 +6,12 @@ overflow: visible; height: 100%; } +.fancybox-is-hidden { + position: absolute; + top: -9999px; + left: -9999px; + visibility: hidden; } + .fancybox-container { position: fixed; top: 0; @@ -13,52 +19,63 @@ width: 100%; height: 100%; z-index: 99993; + -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; - backface-visibility: hidden; } + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); } /* Make sure that the first one is on the top */ .fancybox-container ~ .fancybox-container { z-index: 99992; } -.fancybox-bg { +.fancybox-outer, +.fancybox-inner, +.fancybox-bg, +.fancybox-stage { position: absolute; top: 0; right: 0; bottom: 0; - left: 0; - background: #0f0f11; + left: 0; } + +.fancybox-outer { + overflow-y: auto; + -webkit-overflow-scrolling: touch; } + +.fancybox-bg { + background: #1e1e1e; opacity: 0; - transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } + transition-duration: inherit; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } -.fancybox-container--ready .fancybox-bg { +.fancybox-is-open .fancybox-bg { opacity: 0.87; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } -.fancybox-controls { +.fancybox-infobar, +.fancybox-toolbar, +.fancybox-caption-wrap { position: absolute; - top: 0; - left: 0; - right: 0; - text-align: center; + direction: ltr; + z-index: 99997; opacity: 0; - z-index: 99994; - transition: opacity .2s; - pointer-events: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - direction: ltr; } + visibility: hidden; + transition: opacity .25s, visibility 0s linear .25s; + box-sizing: border-box; } -.fancybox-show-controls .fancybox-controls { - opacity: 1; } +.fancybox-show-infobar .fancybox-infobar, +.fancybox-show-toolbar .fancybox-toolbar, +.fancybox-show-caption .fancybox-caption-wrap { + opacity: 1; + visibility: visible; + transition: opacity .25s, visibility 0s; } .fancybox-infobar { - display: none; } - -.fancybox-show-infobar .fancybox-infobar { - display: inline-block; - pointer-events: all; } + top: 0; + left: 50%; + margin-left: -79px; } .fancybox-infobar__body { display: inline-block; @@ -78,33 +95,15 @@ -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; } -.fancybox-buttons { - position: absolute; +.fancybox-toolbar { top: 0; - right: 0; - display: none; - pointer-events: all; } - -.fancybox-show-buttons .fancybox-buttons { - display: block; } + right: 0; } -.fancybox-slider-wrap { +.fancybox-stage { overflow: hidden; - direction: ltr; } - -.fancybox-slider-wrap, -.fancybox-slider { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - padding: 0; - margin: 0; - z-index: 99993; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-tap-highlight-color: transparent; } + direction: ltr; + z-index: 99994; + -webkit-transform: translate3d(0, 0, 0); } .fancybox-slide { position: absolute; @@ -120,7 +119,15 @@ box-sizing: border-box; text-align: center; z-index: 99994; - -webkit-overflow-scrolling: touch; } + -webkit-overflow-scrolling: touch; + display: none; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition-property: opacity, -webkit-transform; + transition-property: transform, opacity; + transition-property: transform, opacity, -webkit-transform; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } .fancybox-slide::before { content: ''; @@ -129,57 +136,42 @@ 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-is-sliding .fancybox-slide, +.fancybox-slide--previous, +.fancybox-slide--current, +.fancybox-slide--next { + display: block; } .fancybox-slide--image { - overflow: hidden; } + overflow: visible; } .fancybox-slide--image::before { display: none; } -.fancybox-content { +.fancybox-slide--video .fancybox-content, +.fancybox-slide--video iframe { + background: #000; } + +.fancybox-slide--map .fancybox-content, +.fancybox-slide--map iframe { + background: #E5E3DF; } + +.fancybox-slide--next { + z-index: 99995; } + +.fancybox-slide > div { display: inline-block; position: relative; - margin: 44px auto; - padding: 0; - border: 0; - width: 80%; - height: calc(100% - 88px); + padding: 24px; + margin: 44px 0 44px; + border-width: 0; 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-slide--video .fancybox-content, -.fancybox-slide--video .fancybox-iframe { - background: transparent; } + background-color: #fff; + overflow: auto; + box-sizing: border-box; } -.fancybox-placeholder { +.fancybox-slide .fancybox-image-wrap { position: absolute; top: 0; left: 0; @@ -196,7 +188,27 @@ background-size: 100% 100%; background-repeat: no-repeat; -webkit-backface-visibility: hidden; - backface-visibility: hidden; } + backface-visibility: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.fancybox-can-zoomOut .fancybox-image-wrap { + cursor: -webkit-zoom-out; + cursor: zoom-out; } + +.fancybox-can-zoomIn .fancybox-image-wrap { + cursor: -webkit-zoom-in; + cursor: zoom-in; } + +.fancybox-can-drag .fancybox-image-wrap { + cursor: -webkit-grab; + cursor: grab; } + +.fancybox-is-dragging .fancybox-image-wrap { + cursor: -webkit-grabbing; + cursor: grabbing; } .fancybox-image, .fancybox-spaceball { @@ -210,45 +222,37 @@ border: 0; max-width: none; max-height: none; - background: transparent; - background-size: 100% 100%; } - -.fancybox-controls--canzoomOut .fancybox-placeholder { - cursor: -webkit-zoom-out; - cursor: zoom-out; } - -.fancybox-controls--canzoomIn .fancybox-placeholder { - cursor: -webkit-zoom-in; - cursor: zoom-in; } - -.fancybox-controls--canGrab .fancybox-placeholder { - cursor: -webkit-grab; - cursor: grab; } - -.fancybox-controls--isGrabbing .fancybox-placeholder { - cursor: -webkit-grabbing; - cursor: grabbing; } + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .fancybox-spaceball { z-index: 1; } -.fancybox-tmp { - position: absolute; - top: -9999px; - left: -9999px; - visibility: hidden; } +.fancybox-slide--iframe .fancybox-content { + padding: 0; + width: 80%; + height: 80%; + max-width: calc(100% - 100px); + max-height: calc(100% - 88px); + overflow: visible; + background: #fff; } + +.fancybox-iframe { + display: block; + margin: 0; + padding: 0; + border: 0; + width: 100%; + height: 100%; + background: #fff; } .fancybox-error { - position: absolute; margin: 0; padding: 40px; - top: 50%; - left: 50%; - width: 380px; - max-width: 100%; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + width: 100%; + max-width: 380px; background: #fff; cursor: default; } @@ -287,41 +291,38 @@ border-radius: 50%; border-width: 0; background: #fff; - transition: background .2s; + transition: background .25s; box-sizing: border-box; z-index: 2; } .fancybox-close-small:focus:after { outline: 1px dotted #888; } -.fancybox-slide--video .fancybox-close-small { - top: -36px; - right: -36px; - background: transparent; } - .fancybox-close-small:hover:after { color: #555; background: #eee; } +.fancybox-slide--iframe .fancybox-close-small { + top: 0; + right: -44px; } + +.fancybox-slide--iframe .fancybox-close-small:after { + background: transparent; + font-size: 35px; + color: #aaa; } + +.fancybox-slide--iframe .fancybox-close-small:hover:after { + color: #fff; } + /* Caption */ .fancybox-caption-wrap { - position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 30px 0 30px; - z-index: 99998; - -webkit-backface-visibility: hidden; - 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; } - .fancybox-caption { padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.4); @@ -332,7 +333,8 @@ -webkit-text-size-adjust: none; } .fancybox-caption a, -.fancybox-caption button { +.fancybox-caption button, +.fancybox-caption select { pointer-events: all; } .fancybox-caption a { @@ -343,28 +345,29 @@ .fancybox-button { display: inline-block; position: relative; - width: 44px; - height: 44px; - line-height: 44px; margin: 0; padding: 0; border: 0; + width: 44px; + height: 44px; + line-height: 44px; + text-align: center; + background: transparent; + color: #ddd; border-radius: 0; cursor: pointer; - background: transparent; - color: #fff; - box-sizing: border-box; vertical-align: top; outline: none; } -.fancybox-button--disabled { +.fancybox-button[disabled] { cursor: default; pointer-events: none; } .fancybox-infobar__body, .fancybox-button { background: rgba(30, 30, 30, 0.6); } -.fancybox-button:hover { +.fancybox-button:hover:not([disabled]) { + color: #fff; background: rgba(0, 0, 0, 0.8); } .fancybox-button::before, @@ -372,37 +375,33 @@ 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--disabled::before, -.fancybox-button--disabled::after { - opacity: 0.5; } +.fancybox-button[disabled]::before, +.fancybox-button[disabled]::after { + opacity: 0.3; } -.fancybox-button--left::after { - left: 20px; +.fancybox-button--left::after, +.fancybox-button--right::after { top: 18px; width: 6px; height: 6px; background: transparent; border-top: solid 2px currentColor; - border-right: solid 2px currentColor; + border-right: solid 2px currentColor; } + +.fancybox-button--left::after { + left: 20px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); 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; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @@ -413,9 +412,6 @@ .fancybox-button--right { border-bottom-right-radius: 5px; } -.fancybox-button--close { - float: right; } - .fancybox-button--close::before, .fancybox-button--close::after { content: ''; display: inline-block; @@ -435,8 +431,59 @@ -ms-transform: rotate(-45deg); transform: rotate(-45deg); } -/* Loading spinner */ -.fancybox-loading { +/* Navigation arrows */ +.fancybox-arrow { + position: absolute; + top: 50%; + margin: -50px 0 0 0; + height: 100px; + width: 54px; + padding: 0; + border: 0; + outline: none; + background: none; + cursor: pointer; + z-index: 99995; + opacity: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: opacity .25s; } + +.fancybox-arrow::after { + content: ''; + position: absolute; + top: 28px; + width: 44px; + height: 44px; + background-color: rgba(30, 30, 30, 0.8); + background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=); + background-repeat: no-repeat; + background-position: center center; + background-size: 24px 24px; } + +.fancybox-arrow--right { + right: 0; } + +.fancybox-arrow--left { + left: 0; + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); } + +.fancybox-arrow--right::after, +.fancybox-arrow--left::after { + left: 0; } + +.fancybox-show-nav .fancybox-arrow { + opacity: 0.6; } + +.fancybox-show-nav .fancybox-arrow[disabled] { + opacity: 0.3; } + +/* Loading indicator */ +.fancybox-slide > .fancybox-loading { border: 6px solid rgba(100, 100, 100, 0.4); border-top: 6px solid rgba(255, 255, 255, 0.6); border-radius: 100%; @@ -468,13 +515,106 @@ -webkit-transform: rotate(359deg); transform: rotate(359deg); } } +/* Transition effects */ +.fancybox-animated { + transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } + +/* transitionEffect: slide */ +.fancybox-fx-slide.fancybox-slide--previous { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + opacity: 0; } + +.fancybox-fx-slide.fancybox-slide--next { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: 0; } + +.fancybox-fx-slide.fancybox-slide--current { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; } + +/* transitionEffect: fade */ +.fancybox-fx-fade.fancybox-slide--previous, +.fancybox-fx-fade.fancybox-slide--next { + opacity: 0; + transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } + +.fancybox-fx-fade.fancybox-slide--current { + opacity: 1; } + +/* transitionEffect: zoom-in-out */ +.fancybox-fx-zoom-in-out.fancybox-slide--previous { + -webkit-transform: scale3d(1.5, 1.5, 1.5); + transform: scale3d(1.5, 1.5, 1.5); + opacity: 0; } + +.fancybox-fx-zoom-in-out.fancybox-slide--next { + -webkit-transform: scale3d(0.5, 0.5, 0.5); + transform: scale3d(0.5, 0.5, 0.5); + opacity: 0; } + +.fancybox-fx-zoom-in-out.fancybox-slide--current { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + opacity: 1; } + +/* transitionEffect: rotate */ +.fancybox-fx-rotate.fancybox-slide--previous { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + opacity: 0; } + +.fancybox-fx-rotate.fancybox-slide--next { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + opacity: 0; } + +.fancybox-fx-rotate.fancybox-slide--current { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 1; } + +/* transitionEffect: circular */ +.fancybox-fx-circular.fancybox-slide--previous { + -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); + transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); + opacity: 0; } + +.fancybox-fx-circular.fancybox-slide--next { + -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); + transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); + opacity: 0; } + +.fancybox-fx-circular.fancybox-slide--current { + -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); + transform: scale3d(1, 1, 1) translate3d(0, 0, 0); + opacity: 1; } + +/* transitionEffect: tube */ +.fancybox-fx-tube.fancybox-slide--previous { + -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); + transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); } + +.fancybox-fx-tube.fancybox-slide--next { + -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); + transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); } + +.fancybox-fx-tube.fancybox-slide--current { + -webkit-transform: translate3d(0, 0, 0) scale(1); + transform: translate3d(0, 0, 0) scale(1); } + /* Styling for Small-Screen Devices */ @media all and (max-width: 800px) { - .fancybox-controls { - text-align: left; } + .fancybox-infobar { + left: 0; + margin-left: 0; } .fancybox-button--left, - .fancybox-button--right, - .fancybox-buttons button:not(.fancybox-button--close) { + .fancybox-button--right { display: none !important; } .fancybox-caption { padding: 20px 0; @@ -484,133 +624,125 @@ .fancybox-button--fullscreen::before { width: 15px; height: 11px; - left: 15px; - top: 16px; + left: calc(50% - 7px); + top: calc(50% - 6px); border: 2px solid; background: none; } /* Slideshow button */ +.fancybox-button--play::before, +.fancybox-button--pause::before { + top: calc(50% - 6px); + left: calc(50% - 4px); + background: transparent; } + .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; } + border-radius: 1px; } .fancybox-button--pause::before { - top: 16px; - left: 18px; width: 7px; height: 11px; border-style: solid; - border-width: 0 2px 0 2px; - background: transparent; } + border-width: 0 2px 0 2px; } /* Thumbs */ -.fancybox-button--thumbs span { - font-size: 23px; } - -.fancybox-button--thumbs::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-container--thumbs .fancybox-controls, -.fancybox-container--thumbs .fancybox-slider-wrap, -.fancybox-container--thumbs .fancybox-caption-wrap { - right: 220px; } - .fancybox-thumbs { - 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-thumbs > 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-thumbs > 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-thumbs-loading { - background: rgba(0, 0, 0, 0.1); } - -.fancybox-thumbs > 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-thumbs > 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); } + display: none; } -.fancybox-thumbs > ul > li.fancybox-thumbs-active:before { - opacity: 1; } +.fancybox-button--thumbs { + display: none; } -/* Styling for Small-Screen Devices */ -@media all and (max-width: 800px) { +@media all and (min-width: 800px) { + .fancybox-button--thumbs { + display: inline-block; } + .fancybox-button--thumbs span { + font-size: 23px; } + .fancybox-button--thumbs::before { + width: 3px; + height: 3px; + top: calc(50% - 2px); + left: calc(50% - 2px); + 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-thumbs { - display: none !important; } - .fancybox-container--thumbs .fancybox-controls, - .fancybox-container--thumbs .fancybox-slider-wrap, - .fancybox-container--thumbs .fancybox-caption-wrap { - right: 0; } } + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: auto; + width: 220px; + margin: 0; + padding: 5px 5px 0 0; + background: #fff; + word-break: normal; + -webkit-tap-highlight-color: transparent; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + box-sizing: border-box; + z-index: 99995; } + .fancybox-show-thumbs .fancybox-thumbs { + display: block; } + .fancybox-show-thumbs .fancybox-inner { + right: 220px; } + .fancybox-thumbs > 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-thumbs > 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 transparent; + 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-thumbs-loading { + background: rgba(0, 0, 0, 0.1); } + .fancybox-thumbs > 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-thumbs > 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); } + .fancybox-thumbs > ul > li.fancybox-thumbs-active:before { + opacity: 1; } }