diff --git a/app/assets/stylesheets/desktop/magnific-popup.scss b/app/assets/stylesheets/desktop/magnific-popup.scss index 872ae8f2b7b..43b07f76837 100644 --- a/app/assets/stylesheets/desktop/magnific-popup.scss +++ b/app/assets/stylesheets/desktop/magnific-popup.scss @@ -1,46 +1,5 @@ /* Magnific Popup CSS */ -//////////////////////// -// Settings // -//////////////////////// - -// overlay -$overlay-color: #0b0b0b; // Color of overlay screen -$overlay-opacity: 0.8; // Opacity of overlay screen -$shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe - -// spacing -$popup-padding-left: 8px; // Padding from left and from right side -$popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px - -$z-index-base: 1050; // Base z-index of popup - -// controls -$include-arrows: true; // Include styles for nav arrows -$controls-opacity: 0.65; // Opacity of controls -$controls-color: #FFF; // Color of controls -$inner-close-icon-color: #333; // Color of close button when inside -$controls-text-color: #CCC; // Color of preloader and "1 of X" indicator -$controls-text-color-hover: #FFF; // Hover color of preloader and "1 of X" indicator -$IE7support: false; // Very basic IE7 support - -// Iframe-type options -$include-iframe-type: false; // Enable Iframe-type popups -$iframe-padding-top: 40px; // Iframe padding top -$iframe-background: #000; // Background color of iframes -$iframe-max-width: 900px; // Maximum width of iframes -$iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) - -// Image-type options -$include-image-type: true; // Enable Image-type popups -$image-padding-top: 40px; // Image padding top -$image-padding-bottom: 40px; // Image padding bottom -$include-mobile-layout-for-image: true; // Removes paddings from top and bottom - -// Image caption options -$caption-title-color: #F3F3F3; // Caption title color -$caption-subtitle-color: #BDBDBD; // Caption subtitle color - //////////////////////// // // Contents: @@ -76,7 +35,7 @@ $shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow $popup-padding-left: 8px !default; // Padding from left and from right side $popup-padding-left-mobile: 6px !default; // Same as above, but is applied when width of window is less than 800px -$z-index-base: 500 !default; // Base z-index of popup +$z-index-base: 1040 !default; // Base z-index of popup $include-arrows: true !default; // include styles for nav arrows $controls-opacity: 0.65 !default; $controls-color: #FFF !default; @@ -94,6 +53,7 @@ $iframe-ratio: 9/16 !default; // Image-type options $include-image-type: true !default; +$image-background: #444 !default; $image-padding-top: 40px !default; $image-padding-bottom: 40px !default; $include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom @@ -102,6 +62,9 @@ $include-mobile-layout-for-image: true !default; // Removes paddings from top an $caption-title-color: #F3F3F3 !default; $caption-subtitle-color: #BDBDBD !default; +// A11y +$use-visuallyhidden: false !default; // Hide content from browsers, but make it available for screen readers + //////////////////////// @@ -121,7 +84,7 @@ $caption-subtitle-color: #BDBDBD !default; background: $overlay-color; opacity: $overlay-opacity; @if $IE7support { - filter: alpha(opacity=$overlay-opacity*100); + filter: unquote("alpha(opacity=#{$overlay-opacity*100})"); } } @@ -139,7 +102,6 @@ $caption-subtitle-color: #BDBDBD !default; // Root container .mfp-container { - height: 100%; text-align: center; position: absolute; width: 100%; @@ -153,16 +115,22 @@ $caption-subtitle-color: #BDBDBD !default; } // Vertical centerer helper -.mfp-container:before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; +.mfp-container { + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + } } // Remove vertical centering when popup has class `mfp-align-top` -.mfp-align-top .mfp-container:before { - display: none; +.mfp-align-top { + .mfp-container { + &:before { + display: none; + } + } } // Popup content holder @@ -174,21 +142,24 @@ $caption-subtitle-color: #BDBDBD !default; text-align: left; z-index: $z-index-base + 5; } -.mfp-inline-holder .mfp-content, -.mfp-ajax-holder .mfp-content { - width: 100%; - cursor: auto; +.mfp-inline-holder, +.mfp-ajax-holder { + .mfp-content { + width: 100%; + cursor: auto; + } } // Cursors .mfp-ajax-cur { cursor: progress; } -.mfp-zoom-out-cur, -.mfp-zoom-out-cur .mfp-image-holder .mfp-close { - cursor: -moz-zoom-out; - cursor: -webkit-zoom-out; - cursor: zoom-out; +.mfp-zoom-out-cur { + &, .mfp-image-holder .mfp-close { + cursor: -moz-zoom-out; + cursor: -webkit-zoom-out; + cursor: zoom-out; + } } .mfp-zoom { cursor: pointer; @@ -196,8 +167,10 @@ $caption-subtitle-color: #BDBDBD !default; cursor: -moz-zoom-in; cursor: zoom-in; } -.mfp-auto-cursor .mfp-content { - cursor: auto; +.mfp-auto-cursor { + .mfp-content { + cursor: auto; + } } .mfp-close, @@ -210,17 +183,32 @@ $caption-subtitle-color: #BDBDBD !default; } // Hide the image during the loading -.mfp-loading.mfp-figure { - display: none; +.mfp-loading { + &.mfp-figure { + display: none; + } } // Helper class that hides stuff -.mfp-hide { - display: none !important; +@if $use-visuallyhidden { + // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden + .mfp-hide { + border: 0 !important; + clip: rect(0 0 0 0) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + } +} @else { + .mfp-hide { + display: none !important; + } } - //////////////////////// // 3. Appearance //////////////////////// @@ -236,47 +224,55 @@ $caption-subtitle-color: #BDBDBD !default; left: 8px; right: 8px; z-index: $z-index-base + 4; -} -.mfp-preloader a { - color: $controls-text-color; -} -.mfp-preloader a:hover { - color: $controls-text-color-hover; + a { + color: $controls-text-color; + &:hover { + color: $controls-text-color-hover; + } + } } // Hide preloader when content successfully loaded -.mfp-s-ready .mfp-preloader { - display: none; +.mfp-s-ready { + .mfp-preloader { + display: none; + } } // Hide content when it was not loaded -.mfp-s-error .mfp-content { - display: none; +.mfp-s-error { + .mfp-content { + display: none; + } } - // CSS-reset for buttons -button.mfp-close, -button.mfp-arrow { - overflow: visible; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; - display: block; - padding: 0; - z-index: $z-index-base + 6; -} -button::-moz-focus-inner { +button { + &.mfp-close, + &.mfp-arrow { + overflow: visible; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + display: block; + outline: none; padding: 0; - border: 0 + z-index: $z-index-base + 6; + -webkit-box-shadow: none; + box-shadow: none; + } + &::-moz-focus-inner { + padding: 0; + border: 0 + } } // Close icon .mfp-close { width: 44px; - height:44px; + height: 44px; line-height: 44px; position: absolute; @@ -285,6 +281,9 @@ button::-moz-focus-inner { text-decoration: none; text-align: center; opacity: $controls-opacity; + @if $IE7support { + filter: unquote("alpha(opacity=#{$controls-opacity*100})"); + } padding: 0 0 18px 10px; color: $controls-color; @@ -295,28 +294,35 @@ button::-moz-focus-inner { &:hover, &:focus { opacity: 1; + @if $IE7support { + filter: unquote("alpha(opacity=#{1*100})"); + } } &:active { top: 1px; } } -.mfp-close-btn-in .mfp-close { - color: $inner-close-icon-color; +.mfp-close-btn-in { + .mfp-close { + color: $inner-close-icon-color; + } } -.mfp-image-holder .mfp-close, -.mfp-iframe-holder .mfp-close { - color: $controls-color; - right: -6px; - text-align: right; - padding-right: 6px; - width: 100%; +.mfp-image-holder, +.mfp-iframe-holder { + .mfp-close { + color: $controls-color; + right: -6px; + text-align: right; + padding-right: 6px; + width: 100%; + } } // "1 of X" counter .mfp-counter { position: absolute; - top:0; + top: 0; right: 0; color: $controls-text-color; font-size: 12px; @@ -327,8 +333,10 @@ button::-moz-focus-inner { @if $include-arrows { .mfp-arrow { position: absolute; - top: 0; opacity: $controls-opacity; + @if $IE7support { + filter: unquote("alpha(opacity=#{$controls-opacity*100})"); + } margin: 0; top: 50%; margin-top: -55px; @@ -336,17 +344,16 @@ button::-moz-focus-inner { width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0,0,0,0); - } - .mfp-arrow:active { - margin-top: -54px; - } - .mfp-arrow:hover, - .mfp-arrow:focus { - opacity: 1; - } - - .mfp-arrow { - + &:active { + margin-top: -54px; + } + &:hover, + &:focus { + opacity: 1; + @if $IE7support { + filter: unquote("alpha(opacity=#{1*100})"); + } + } &:before, &:after, .mfp-b, @@ -360,21 +367,21 @@ button::-moz-focus-inner { top: 0; margin-top: 35px; margin-left: 35px; - border: solid transparent; + border: medium inset transparent; } &:after, .mfp-a { - opacity: $overlay-opacity; - border-top-width: 12px; - border-bottom-width: 12px; + + border-top-width: 13px; + border-bottom-width: 13px; top:8px; } &:before, .mfp-b { - border-top-width: 20px; - border-bottom-width: 20px; + border-top-width: 21px; + border-bottom-width: 21px; } } @@ -384,12 +391,13 @@ button::-moz-focus-inner { &:after, .mfp-a { - border-right: 12px solid #000; - left: 5px; + border-right: 17px solid #FFF; + margin-left: 31px; } &:before, .mfp-b { - border-right: 20px solid #FFF; + margin-left: 25px; + border-right: 27px solid #3f3f3f; } } @@ -397,12 +405,12 @@ button::-moz-focus-inner { right: 0; &:after, .mfp-a { - border-left: 12px solid #000; - left: 3px; + border-left: 17px solid #FFF; + margin-left: 39px } &:before, .mfp-b { - border-left: 20px solid #FFF; + border-left: 27px solid #3f3f3f; } } } @@ -414,30 +422,30 @@ button::-moz-focus-inner { .mfp-iframe-holder { padding-top: $iframe-padding-top; padding-bottom: $iframe-padding-top; - } - .mfp-iframe-holder .mfp-content { - line-height: 0; - width: 100%; - max-width: $iframe-max-width; + .mfp-content { + line-height: 0; + width: 100%; + max-width: $iframe-max-width; + } + .mfp-close { + top: -40px; + } } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: $iframe-ratio * 100%; - } - .mfp-iframe-scaler iframe { - position: absolute; - display: block; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-shadow: $shadow; - background: $iframe-background; - } - .mfp-iframe-holder .mfp-close { - top: -40px; + iframe { + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: $shadow; + background: $iframe-background; + } } } @@ -447,38 +455,50 @@ button::-moz-focus-inner { @if $include-image-type { /* Main image in popup */ - img.mfp-img { - width: auto; - max-width: 100%; - height: auto; - display: block; - line-height: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: $image-padding-top 0 $image-padding-bottom; - margin: 0 auto; + img { + &.mfp-img { + width: auto; + max-width: 100%; + height: auto; + display: block; + line-height: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: $image-padding-top 0 $image-padding-bottom; + margin: 0 auto; + } } /* The shadow behind the image */ - .mfp-figure:after { - content: ''; - position: absolute; - left: 0; - top: $image-padding-top; - bottom: $image-padding-bottom; - display: block; - right: 0; - width: auto; - height: auto; - z-index: -1; - box-shadow: $shadow; - } .mfp-figure { line-height: 0; + &:after { + content: ''; + position: absolute; + left: 0; + top: $image-padding-top; + bottom: $image-padding-bottom; + display: block; + right: 0; + width: auto; + height: auto; + z-index: -1; + box-shadow: $shadow; + background: $image-background; + } + small { + color: $caption-subtitle-color; + display: block; + font-size: 12px; + line-height: 14px; + } + figure { + margin: 0; + } } .mfp-bottom-bar { - margin-top: -36px; + margin-top: -$image-padding-bottom + 4; position: absolute; top: 100%; left: 0; @@ -489,45 +509,52 @@ button::-moz-focus-inner { text-align: left; line-height: 18px; color: $caption-title-color; - word-break: break-word; + word-wrap: break-word; padding-right: 36px; // leave some space for counter at right side } - .mfp-figure small { - color: $caption-subtitle-color; - display: block; - font-size: 12px; - line-height: 14px; - } - .mfp-image-holder .mfp-content { - max-width: 100%; + .mfp-image-holder { + .mfp-content { + max-width: 100%; + } } - .mfp-gallery .mfp-image-holder .mfp-figure { - cursor: pointer; + .mfp-gallery { + .mfp-image-holder { + .mfp-figure { + cursor: pointer; + } + } } @if $include-mobile-layout-for-image { - - @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { - /** - * Remove all paddings around the image on small screen - */ - .mfp-img-mobile .mfp-image-holder { + @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { + /** + * Remove all paddings around the image on small screen + */ + .mfp-img-mobile { + .mfp-image-holder { padding-left: 0; padding-right: 0; } - .mfp-img-mobile img.mfp-img { - padding: 0; + img { + &.mfp-img { + padding: 0; + } } - /* The shadow behind the image */ - .mfp-img-mobile .mfp-figure:after { - top: 0; - bottom: 0; + .mfp-figure { + /* The shadow behind the image */ + &:after { + top: 0; + bottom: 0; + } + small { + display: inline; + margin-left: 5px; + } } - - .mfp-img-mobile .mfp-bottom-bar { + .mfp-bottom-bar { background: rgba(0,0,0,0.6); bottom: 0; margin: 0; @@ -537,15 +564,15 @@ button::-moz-focus-inner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + &:empty { + padding: 0; + } } - .mfp-img-mobile .mfp-bottom-bar:empty { - padding: 0; - } - .mfp-img-mobile .mfp-counter { + .mfp-counter { right: 5px; top: 3px; } - .mfp-img-mobile .mfp-close { + .mfp-close { top: 0; right: 0; width: 35px; @@ -556,19 +583,15 @@ button::-moz-focus-inner { text-align: center; padding: 0; } - .mfp-img-mobile .mfp-figure small { - display: inline; - margin-left: 5px; - } } + } } - } // Scale navigation arrows and reduce padding from sides -@media all and (max-width: 800px) { +@media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); @@ -578,7 +601,7 @@ button::-moz-focus-inner { transform-origin: 0; } .mfp-arrow-right { - -webkit-transform-origin: 100%; + -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { diff --git a/app/assets/stylesheets/mobile/magnific-popup.scss b/app/assets/stylesheets/mobile/magnific-popup.scss index c2ff7391bb0..43b07f76837 100644 --- a/app/assets/stylesheets/mobile/magnific-popup.scss +++ b/app/assets/stylesheets/mobile/magnific-popup.scss @@ -1,46 +1,5 @@ /* Magnific Popup CSS */ -//////////////////////// -// Settings // -//////////////////////// - -// overlay -$overlay-color: #0b0b0b; // Color of overlay screen -$overlay-opacity: 0.8; // Opacity of overlay screen -$shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe - -// spacing -$popup-padding-left: 8px; // Padding from left and from right side -$popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px - -$z-index-base: 1050; // Base z-index of popup - -// controls -$include-arrows: true; // Include styles for nav arrows -$controls-opacity: 0.65; // Opacity of controls -$controls-color: #FFF; // Color of controls -$inner-close-icon-color: #333; // Color of close button when inside -$controls-text-color: #CCC; // Color of preloader and "1 of X" indicator -$controls-text-color-hover: #FFF; // Hover color of preloader and "1 of X" indicator -$IE7support: false; // Very basic IE7 support - -// Iframe-type options -$include-iframe-type: false; // Enable Iframe-type popups -$iframe-padding-top: 40px; // Iframe padding top -$iframe-background: #000; // Background color of iframes -$iframe-max-width: 900px; // Maximum width of iframes -$iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) - -// Image-type options -$include-image-type: true; // Enable Image-type popups -$image-padding-top: 40px; // Image padding top -$image-padding-bottom: 40px; // Image padding bottom -$include-mobile-layout-for-image: true; // Removes paddings from top and bottom - -// Image caption options -$caption-title-color: #F3F3F3; // Caption title color -$caption-subtitle-color: #BDBDBD; // Caption subtitle color - //////////////////////// // // Contents: @@ -76,7 +35,7 @@ $shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow $popup-padding-left: 8px !default; // Padding from left and from right side $popup-padding-left-mobile: 6px !default; // Same as above, but is applied when width of window is less than 800px -$z-index-base: 500 !default; // Base z-index of popup +$z-index-base: 1040 !default; // Base z-index of popup $include-arrows: true !default; // include styles for nav arrows $controls-opacity: 0.65 !default; $controls-color: #FFF !default; @@ -94,6 +53,7 @@ $iframe-ratio: 9/16 !default; // Image-type options $include-image-type: true !default; +$image-background: #444 !default; $image-padding-top: 40px !default; $image-padding-bottom: 40px !default; $include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom @@ -102,6 +62,9 @@ $include-mobile-layout-for-image: true !default; // Removes paddings from top an $caption-title-color: #F3F3F3 !default; $caption-subtitle-color: #BDBDBD !default; +// A11y +$use-visuallyhidden: false !default; // Hide content from browsers, but make it available for screen readers + //////////////////////// @@ -121,7 +84,7 @@ $caption-subtitle-color: #BDBDBD !default; background: $overlay-color; opacity: $overlay-opacity; @if $IE7support { - filter: alpha(opacity=$overlay-opacity*100); + filter: unquote("alpha(opacity=#{$overlay-opacity*100})"); } } @@ -139,7 +102,6 @@ $caption-subtitle-color: #BDBDBD !default; // Root container .mfp-container { - height: 100%; text-align: center; position: absolute; width: 100%; @@ -148,21 +110,27 @@ $caption-subtitle-color: #BDBDBD !default; top: 0; padding: 0 $popup-padding-left; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } // Vertical centerer helper -.mfp-container:before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; +.mfp-container { + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + } } // Remove vertical centering when popup has class `mfp-align-top` -.mfp-align-top .mfp-container:before { - display: none; +.mfp-align-top { + .mfp-container { + &:before { + display: none; + } + } } // Popup content holder @@ -174,21 +142,24 @@ $caption-subtitle-color: #BDBDBD !default; text-align: left; z-index: $z-index-base + 5; } -.mfp-inline-holder .mfp-content, -.mfp-ajax-holder .mfp-content { - width: 100%; - cursor: auto; +.mfp-inline-holder, +.mfp-ajax-holder { + .mfp-content { + width: 100%; + cursor: auto; + } } // Cursors .mfp-ajax-cur { cursor: progress; } -.mfp-zoom-out-cur, -.mfp-zoom-out-cur .mfp-image-holder .mfp-close { - cursor: -moz-zoom-out; - cursor: -webkit-zoom-out; - cursor: zoom-out; +.mfp-zoom-out-cur { + &, .mfp-image-holder .mfp-close { + cursor: -moz-zoom-out; + cursor: -webkit-zoom-out; + cursor: zoom-out; + } } .mfp-zoom { cursor: pointer; @@ -196,8 +167,10 @@ $caption-subtitle-color: #BDBDBD !default; cursor: -moz-zoom-in; cursor: zoom-in; } -.mfp-auto-cursor .mfp-content { - cursor: auto; +.mfp-auto-cursor { + .mfp-content { + cursor: auto; + } } .mfp-close, @@ -210,17 +183,32 @@ $caption-subtitle-color: #BDBDBD !default; } // Hide the image during the loading -.mfp-loading.mfp-figure { - display: none; +.mfp-loading { + &.mfp-figure { + display: none; + } } // Helper class that hides stuff -.mfp-hide { - display: none !important; +@if $use-visuallyhidden { + // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden + .mfp-hide { + border: 0 !important; + clip: rect(0 0 0 0) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + } +} @else { + .mfp-hide { + display: none !important; + } } - //////////////////////// // 3. Appearance //////////////////////// @@ -236,47 +224,55 @@ $caption-subtitle-color: #BDBDBD !default; left: 8px; right: 8px; z-index: $z-index-base + 4; -} -.mfp-preloader a { - color: $controls-text-color; -} -.mfp-preloader a:hover { - color: $controls-text-color-hover; + a { + color: $controls-text-color; + &:hover { + color: $controls-text-color-hover; + } + } } // Hide preloader when content successfully loaded -.mfp-s-ready .mfp-preloader { - display: none; +.mfp-s-ready { + .mfp-preloader { + display: none; + } } // Hide content when it was not loaded -.mfp-s-error .mfp-content { - display: none; +.mfp-s-error { + .mfp-content { + display: none; + } } - // CSS-reset for buttons -button.mfp-close, -button.mfp-arrow { - overflow: visible; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; - display: block; - padding: 0; - z-index: $z-index-base + 6; -} -button::-moz-focus-inner { +button { + &.mfp-close, + &.mfp-arrow { + overflow: visible; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + display: block; + outline: none; padding: 0; - border: 0 + z-index: $z-index-base + 6; + -webkit-box-shadow: none; + box-shadow: none; + } + &::-moz-focus-inner { + padding: 0; + border: 0 + } } // Close icon .mfp-close { width: 44px; - height:44px; + height: 44px; line-height: 44px; position: absolute; @@ -285,6 +281,9 @@ button::-moz-focus-inner { text-decoration: none; text-align: center; opacity: $controls-opacity; + @if $IE7support { + filter: unquote("alpha(opacity=#{$controls-opacity*100})"); + } padding: 0 0 18px 10px; color: $controls-color; @@ -295,28 +294,35 @@ button::-moz-focus-inner { &:hover, &:focus { opacity: 1; + @if $IE7support { + filter: unquote("alpha(opacity=#{1*100})"); + } } &:active { top: 1px; } } -.mfp-close-btn-in .mfp-close { - color: $inner-close-icon-color; +.mfp-close-btn-in { + .mfp-close { + color: $inner-close-icon-color; + } } -.mfp-image-holder .mfp-close, -.mfp-iframe-holder .mfp-close { - color: $controls-color; - right: -6px; - text-align: right; - padding-right: 6px; - width: 100%; +.mfp-image-holder, +.mfp-iframe-holder { + .mfp-close { + color: $controls-color; + right: -6px; + text-align: right; + padding-right: 6px; + width: 100%; + } } // "1 of X" counter .mfp-counter { position: absolute; - top:0; + top: 0; right: 0; color: $controls-text-color; font-size: 12px; @@ -327,8 +333,10 @@ button::-moz-focus-inner { @if $include-arrows { .mfp-arrow { position: absolute; - top: 0; opacity: $controls-opacity; + @if $IE7support { + filter: unquote("alpha(opacity=#{$controls-opacity*100})"); + } margin: 0; top: 50%; margin-top: -55px; @@ -336,17 +344,16 @@ button::-moz-focus-inner { width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0,0,0,0); - } - .mfp-arrow:active { - margin-top: -54px; - } - .mfp-arrow:hover, - .mfp-arrow:focus { - opacity: 1; - } - - .mfp-arrow { - + &:active { + margin-top: -54px; + } + &:hover, + &:focus { + opacity: 1; + @if $IE7support { + filter: unquote("alpha(opacity=#{1*100})"); + } + } &:before, &:after, .mfp-b, @@ -360,21 +367,21 @@ button::-moz-focus-inner { top: 0; margin-top: 35px; margin-left: 35px; - border: solid transparent; + border: medium inset transparent; } &:after, .mfp-a { - opacity: $overlay-opacity; - border-top-width: 12px; - border-bottom-width: 12px; + + border-top-width: 13px; + border-bottom-width: 13px; top:8px; } &:before, .mfp-b { - border-top-width: 20px; - border-bottom-width: 20px; + border-top-width: 21px; + border-bottom-width: 21px; } } @@ -384,12 +391,13 @@ button::-moz-focus-inner { &:after, .mfp-a { - border-right: 12px solid #000; - left: 5px; + border-right: 17px solid #FFF; + margin-left: 31px; } &:before, .mfp-b { - border-right: 20px solid #FFF; + margin-left: 25px; + border-right: 27px solid #3f3f3f; } } @@ -397,12 +405,12 @@ button::-moz-focus-inner { right: 0; &:after, .mfp-a { - border-left: 12px solid #000; - left: 3px; + border-left: 17px solid #FFF; + margin-left: 39px } &:before, .mfp-b { - border-left: 20px solid #FFF; + border-left: 27px solid #3f3f3f; } } } @@ -414,30 +422,30 @@ button::-moz-focus-inner { .mfp-iframe-holder { padding-top: $iframe-padding-top; padding-bottom: $iframe-padding-top; - } - .mfp-iframe-holder .mfp-content { - line-height: 0; - width: 100%; - max-width: $iframe-max-width; + .mfp-content { + line-height: 0; + width: 100%; + max-width: $iframe-max-width; + } + .mfp-close { + top: -40px; + } } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: $iframe-ratio * 100%; - } - .mfp-iframe-scaler iframe { - position: absolute; - display: block; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-shadow: $shadow; - background: $iframe-background; - } - .mfp-iframe-holder .mfp-close { - top: -40px; + iframe { + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: $shadow; + background: $iframe-background; + } } } @@ -447,38 +455,50 @@ button::-moz-focus-inner { @if $include-image-type { /* Main image in popup */ - img.mfp-img { - width: auto; - max-width: 100%; - height: auto; - display: block; - line-height: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: $image-padding-top 0 $image-padding-bottom; - margin: 0 auto; + img { + &.mfp-img { + width: auto; + max-width: 100%; + height: auto; + display: block; + line-height: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: $image-padding-top 0 $image-padding-bottom; + margin: 0 auto; + } } /* The shadow behind the image */ - .mfp-figure:after { - content: ''; - position: absolute; - left: 0; - top: $image-padding-top; - bottom: $image-padding-bottom; - display: block; - right: 0; - width: auto; - height: auto; - z-index: -1; - box-shadow: $shadow; - } .mfp-figure { line-height: 0; + &:after { + content: ''; + position: absolute; + left: 0; + top: $image-padding-top; + bottom: $image-padding-bottom; + display: block; + right: 0; + width: auto; + height: auto; + z-index: -1; + box-shadow: $shadow; + background: $image-background; + } + small { + color: $caption-subtitle-color; + display: block; + font-size: 12px; + line-height: 14px; + } + figure { + margin: 0; + } } .mfp-bottom-bar { - margin-top: -36px; + margin-top: -$image-padding-bottom + 4; position: absolute; top: 100%; left: 0; @@ -489,45 +509,52 @@ button::-moz-focus-inner { text-align: left; line-height: 18px; color: $caption-title-color; - word-break: break-word; + word-wrap: break-word; padding-right: 36px; // leave some space for counter at right side } - .mfp-figure small { - color: $caption-subtitle-color; - display: block; - font-size: 12px; - line-height: 14px; - } - .mfp-image-holder .mfp-content { - max-width: 100%; + .mfp-image-holder { + .mfp-content { + max-width: 100%; + } } - .mfp-gallery .mfp-image-holder .mfp-figure { - cursor: pointer; + .mfp-gallery { + .mfp-image-holder { + .mfp-figure { + cursor: pointer; + } + } } @if $include-mobile-layout-for-image { - - @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { - /** - * Remove all paddings around the image on small screen - */ - .mfp-img-mobile .mfp-image-holder { + @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { + /** + * Remove all paddings around the image on small screen + */ + .mfp-img-mobile { + .mfp-image-holder { padding-left: 0; padding-right: 0; } - .mfp-img-mobile img.mfp-img { - padding: 0; + img { + &.mfp-img { + padding: 0; + } } - /* The shadow behind the image */ - .mfp-img-mobile .mfp-figure:after { - top: 0; - bottom: 0; + .mfp-figure { + /* The shadow behind the image */ + &:after { + top: 0; + bottom: 0; + } + small { + display: inline; + margin-left: 5px; + } } - - .mfp-img-mobile .mfp-bottom-bar { + .mfp-bottom-bar { background: rgba(0,0,0,0.6); bottom: 0; margin: 0; @@ -535,17 +562,17 @@ button::-moz-focus-inner { padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + &:empty { + padding: 0; + } } - .mfp-img-mobile .mfp-bottom-bar:empty { - padding: 0; - } - .mfp-img-mobile .mfp-counter { + .mfp-counter { right: 5px; top: 3px; } - .mfp-img-mobile .mfp-close { + .mfp-close { top: 0; right: 0; width: 35px; @@ -556,19 +583,15 @@ button::-moz-focus-inner { text-align: center; padding: 0; } - .mfp-img-mobile .mfp-figure small { - display: inline; - margin-left: 5px; - } } + } } - } // Scale navigation arrows and reduce padding from sides -@media all and (max-width: 800px) { +@media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); @@ -578,7 +601,7 @@ button::-moz-focus-inner { transform-origin: 0; } .mfp-arrow-right { - -webkit-transform-origin: 100%; + -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { diff --git a/public/javascripts/jquery.magnific-popup-min.js b/public/javascripts/jquery.magnific-popup-min.js index f0a22563e68..31248530331 100644 --- a/public/javascripts/jquery.magnific-popup-min.js +++ b/public/javascripts/jquery.magnific-popup-min.js @@ -1,3 +1,3 @@ -// Magnific Popup v0.8.9 by Dmitry Semenov +// Magnific Popup v0.9.9 by Dmitry Semenov // http://bit.ly/magnific-popup#build=image -(function(a){var b="Close",c="AfterClose",d="BeforeAppend",e="MarkupParse",f="Open",g="Change",h="mfp",i="."+h,j="mfp-ready",k="mfp-removing",l="mfp-prevent-close",m,n=function(){},o=!!window.jQuery,p,q=a(window),r,s,t,u,v,w=function(a,b){m.ev.on(h+a+i,b)},x=function(b,c,d,e){var f=document.createElement("div");return f.className="mfp-"+b,d&&(f.innerHTML=d),e?c&&c.appendChild(f):(f=a(f),c&&f.appendTo(c)),f},y=function(b,c){m.ev.triggerHandler(h+b,c),m.st.callbacks&&(b=b.charAt(0).toLowerCase()+b.slice(1),m.st.callbacks[b]&&m.st.callbacks[b].apply(m,a.isArray(c)?c:[c]))},z=function(){(m.st.focus?m.content.find(m.st.focus).eq(0):m.wrap).focus()},A=function(b){if(b!==v||!m.currTemplate.closeBtn)m.currTemplate.closeBtn=a(m.st.closeMarkup.replace("%title%",m.st.tClose)),v=b;return m.currTemplate.closeBtn},B=function(){a.magnificPopup.instance||(m=new n,m.init(),a.magnificPopup.instance=m)},C=function(b){if(a(b).hasClass(l))return;var c=m.st.closeOnContentClick,d=m.st.closeOnBgClick;if(c&&d)return!0;if(!m.content||a(b).hasClass("mfp-close")||m.preloader&&b===m.preloader[0])return!0;if(b!==m.content[0]&&!a.contains(m.content[0],b)){if(d)return!0}else if(c)return!0;return!1};n.prototype={constructor:n,init:function(){var b=navigator.appVersion;m.isIE7=b.indexOf("MSIE 7.")!==-1,m.isIE8=b.indexOf("MSIE 8.")!==-1,m.isLowIE=m.isIE7||m.isIE8,m.isAndroid=/android/gi.test(b),m.isIOS=/iphone|ipad|ipod/gi.test(b),m.probablyMobile=m.isAndroid||m.isIOS||/(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent),r=a(document.body),s=a(document),m.popupsCache={}},open:function(b){var c;if(b.isObj===!1){m.items=b.items.toArray(),m.index=0;var d=b.items,g;for(c=0;c(a||q.height())},_parseMarkup:function(b,c,d){var f;d.data&&(c=a.extend(d.data,c)),y(e,[b,c,d]),a.each(c,function(a,c){if(c===undefined||c===!1)return!0;f=a.split("_");if(f.length>1){var d=b.find(i+"-"+f[0]);if(d.length>0){var e=f[1];e==="replaceWith"?d[0]!==c[0]&&d.replaceWith(c):e==="img"?d.is("img")?d.attr("src",c):d.replaceWith(''):d.attr(f[1],c)}}else b.find(i+"-"+a).html(c)})},_getScrollbarSize:function(){if(m.scrollbarSize===undefined){var a=document.createElement("div");a.id="mfp-sbm",a.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(a),m.scrollbarSize=a.offsetWidth-a.clientWidth,document.body.removeChild(a)}return m.scrollbarSize}},a.magnificPopup={instance:null,proto:n.prototype,modules:[],open:function(a,b){return B(),a||(a={}),a.isObj=!0,a.index=b||0,this.instance.open(a)},close:function(){return a.magnificPopup.instance.close()},registerModule:function(b,c){c.options&&(a.magnificPopup.defaults[b]=c.options),a.extend(this.proto,c.proto),this.modules.push(b)},defaults:{disableOn:0,key:null,midClick:!1,mainClass:"",preloader:!0,focus:"",closeOnContentClick:!1,closeOnBgClick:!0,closeBtnInside:!0,alignTop:!1,removalDelay:0,fixedContentPos:"auto",fixedBgPos:"auto",overflowY:"auto",closeMarkup:'',tClose:"Close (Esc)",tLoading:"Loading..."}},a.fn.magnificPopup=function(b){B();var c=a(this);if(typeof b=="string")if(b==="open"){var d,e=o?c.data("magnificPopup"):c[0].magnificPopup,f=parseInt(arguments[1],10)||0;e.items?d=e.items[f]:(d=c,e.delegate&&(d=d.find(e.delegate)),d=d.eq(f)),m._openClick({mfpEl:d},c,e)}else m.isOpen&&m[b].apply(m,Array.prototype.slice.call(arguments,1));else o?c.data("magnificPopup",b):c[0].magnificPopup=b,m.addGroup(c,b);return c};var D,E=function(b){if(b.data&&b.data.title!==undefined)return b.data.title;var c=m.st.image.titleSrc;if(c){if(a.isFunction(c))return c.call(m,b);if(b.el)return b.el.attr(c)||""}return""};a.magnificPopup.registerModule("image",{options:{markup:'
',cursor:"mfp-zoom-out-cur",titleSrc:"title",verticalFit:!0,tError:'The image could not be loaded.'},proto:{initImage:function(){var a=m.st.image,c=".image";m.types.push("image"),w(f+c,function(){m.currItem.type==="image"&&a.cursor&&r.addClass(a.cursor)}),w(b+c,function(){a.cursor&&r.removeClass(a.cursor),q.off("resize"+i)}),w("Resize"+c,m.resizeImage),m.isLowIE&&w("AfterChange",m.resizeImage)},resizeImage:function(){var a=m.currItem;if(!a.img)return;if(m.st.image.verticalFit){var b=0;m.isLowIE&&(b=parseInt(a.img.css("padding-top"),10)+parseInt(a.img.css("padding-bottom"),10)),a.img.css("max-height",m.wH-b)}},_onImageHasSize:function(a){a.img&&(a.hasSize=!0,D&&clearInterval(D),a.isCheckingImgSize=!1,y("ImageHasSize",a),a.imgHidden&&(m.content&&m.content.removeClass("mfp-loading"),a.imgHidden=!1))},findImageSize:function(a){var b=0,c=a.img[0],d=function(e){D&&clearInterval(D),D=setInterval(function(){if(c.naturalWidth>0){m._onImageHasSize(a);return}b>200&&clearInterval(D),b++,b===3?d(10):b===40?d(50):b===100&&d(500)},e)};d(1)},getImage:function(b,c){var d=0,e=function(){b&&(b.img[0].complete?(b.img.off(".mfploader"),b===m.currItem&&(m._onImageHasSize(b),m.updateStatus("ready")),b.hasSize=!0,b.loaded=!0):(d++,d<200?setTimeout(e,100):f()))},f=function(){b&&(b.img.off(".mfploader"),b===m.currItem&&(m._onImageHasSize(b),m.updateStatus("error",g.tError.replace("%url%",b.src))),b.hasSize=!0,b.loaded=!0,b.loadError=!0)},g=m.st.image,h=c.find(".mfp-img");if(h.length){var i=new Image;i.className="mfp-img",b.img=a(i).on("load.mfploader",e).on("error.mfploader",f),i.src=b.src,h.is("img")&&(b.img=b.img.clone())}return m._parseMarkup(c,{title:E(b),img_replaceWith:b.img},b),m.resizeImage(),b.hasSize?(D&&clearInterval(D),b.loadError?(c.addClass("mfp-loading"),m.updateStatus("error",g.tError.replace("%url%",b.src))):(c.removeClass("mfp-loading"),m.updateStatus("ready")),c):(m.updateStatus("loading"),b.loading=!0,b.hasSize||(b.imgHidden=!0,c.addClass("mfp-loading"),m.findImageSize(b)),c)}}})})(window.jQuery||window.Zepto) +(function(a){var b="Close",c="BeforeClose",d="AfterClose",e="BeforeAppend",f="MarkupParse",g="Open",h="Change",i="mfp",j="."+i,k="mfp-ready",l="mfp-removing",m="mfp-prevent-close",n,o=function(){},p=!!window.jQuery,q,r=a(window),s,t,u,v,w,x=function(a,b){n.ev.on(i+a+j,b)},y=function(b,c,d,e){var f=document.createElement("div");return f.className="mfp-"+b,d&&(f.innerHTML=d),e?c&&c.appendChild(f):(f=a(f),c&&f.appendTo(c)),f},z=function(b,c){n.ev.triggerHandler(i+b,c),n.st.callbacks&&(b=b.charAt(0).toLowerCase()+b.slice(1),n.st.callbacks[b]&&n.st.callbacks[b].apply(n,a.isArray(c)?c:[c]))},A=function(b){if(b!==w||!n.currTemplate.closeBtn)n.currTemplate.closeBtn=a(n.st.closeMarkup.replace("%title%",n.st.tClose)),w=b;return n.currTemplate.closeBtn},B=function(){a.magnificPopup.instance||(n=new o,n.init(),a.magnificPopup.instance=n)},C=function(){var a=document.createElement("p").style,b=["ms","O","Moz","Webkit"];if(a.transition!==undefined)return!0;while(b.length)if(b.pop()+"Transition"in a)return!0;return!1};o.prototype={constructor:o,init:function(){var b=navigator.appVersion;n.isIE7=b.indexOf("MSIE 7.")!==-1,n.isIE8=b.indexOf("MSIE 8.")!==-1,n.isLowIE=n.isIE7||n.isIE8,n.isAndroid=/android/gi.test(b),n.isIOS=/iphone|ipad|ipod/gi.test(b),n.supportsTransition=C(),n.probablyMobile=n.isAndroid||n.isIOS||/(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent),s=a(document.body),t=a(document),n.popupsCache={}},open:function(b){var c;if(b.isObj===!1){n.items=b.items.toArray(),n.index=0;var d=b.items,e;for(c=0;c(a||r.height())},_setFocus:function(){(n.st.focus?n.content.find(n.st.focus).eq(0):n.wrap).focus()},_onFocusIn:function(b){if(b.target!==n.wrap[0]&&!a.contains(n.wrap[0],b.target))return n._setFocus(),!1},_parseMarkup:function(b,c,d){var e;d.data&&(c=a.extend(d.data,c)),z(f,[b,c,d]),a.each(c,function(a,c){if(c===undefined||c===!1)return!0;e=a.split("_");if(e.length>1){var d=b.find(j+"-"+e[0]);if(d.length>0){var f=e[1];f==="replaceWith"?d[0]!==c[0]&&d.replaceWith(c):f==="img"?d.is("img")?d.attr("src",c):d.replaceWith(''):d.attr(e[1],c)}}else b.find(j+"-"+a).html(c)})},_getScrollbarSize:function(){if(n.scrollbarSize===undefined){var a=document.createElement("div");a.id="mfp-sbm",a.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(a),n.scrollbarSize=a.offsetWidth-a.clientWidth,document.body.removeChild(a)}return n.scrollbarSize}},a.magnificPopup={instance:null,proto:o.prototype,modules:[],open:function(b,c){return B(),b?b=a.extend(!0,{},b):b={},b.isObj=!0,b.index=c||0,this.instance.open(b)},close:function(){return a.magnificPopup.instance&&a.magnificPopup.instance.close()},registerModule:function(b,c){c.options&&(a.magnificPopup.defaults[b]=c.options),a.extend(this.proto,c.proto),this.modules.push(b)},defaults:{disableOn:0,key:null,midClick:!1,mainClass:"",preloader:!0,focus:"",closeOnContentClick:!1,closeOnBgClick:!0,closeBtnInside:!0,showCloseBtn:!0,enableEscapeKey:!0,modal:!1,alignTop:!1,removalDelay:0,fixedContentPos:"auto",fixedBgPos:"auto",overflowY:"auto",closeMarkup:'',tClose:"Close (Esc)",tLoading:"Loading..."}},a.fn.magnificPopup=function(b){B();var c=a(this);if(typeof b=="string")if(b==="open"){var d,e=p?c.data("magnificPopup"):c[0].magnificPopup,f=parseInt(arguments[1],10)||0;e.items?d=e.items[f]:(d=c,e.delegate&&(d=d.find(e.delegate)),d=d.eq(f)),n._openClick({mfpEl:d},c,e)}else n.isOpen&&n[b].apply(n,Array.prototype.slice.call(arguments,1));else b=a.extend(!0,{},b),p?c.data("magnificPopup",b):c[0].magnificPopup=b,n.addGroup(c,b);return c};var D,E=function(b){if(b.data&&b.data.title!==undefined)return b.data.title;var c=n.st.image.titleSrc;if(c){if(a.isFunction(c))return c.call(n,b);if(b.el)return b.el.attr(c)||""}return""};a.magnificPopup.registerModule("image",{options:{markup:'
',cursor:"mfp-zoom-out-cur",titleSrc:"title",verticalFit:!0,tError:'The image could not be loaded.'},proto:{initImage:function(){var a=n.st.image,c=".image";n.types.push("image"),x(g+c,function(){n.currItem.type==="image"&&a.cursor&&s.addClass(a.cursor)}),x(b+c,function(){a.cursor&&s.removeClass(a.cursor),r.off("resize"+j)}),x("Resize"+c,n.resizeImage),n.isLowIE&&x("AfterChange",n.resizeImage)},resizeImage:function(){var a=n.currItem;if(!a||!a.img)return;if(n.st.image.verticalFit){var b=0;n.isLowIE&&(b=parseInt(a.img.css("padding-top"),10)+parseInt(a.img.css("padding-bottom"),10)),a.img.css("max-height",n.wH-b)}},_onImageHasSize:function(a){a.img&&(a.hasSize=!0,D&&clearInterval(D),a.isCheckingImgSize=!1,z("ImageHasSize",a),a.imgHidden&&(n.content&&n.content.removeClass("mfp-loading"),a.imgHidden=!1))},findImageSize:function(a){var b=0,c=a.img[0],d=function(e){D&&clearInterval(D),D=setInterval(function(){if(c.naturalWidth>0){n._onImageHasSize(a);return}b>200&&clearInterval(D),b++,b===3?d(10):b===40?d(50):b===100&&d(500)},e)};d(1)},getImage:function(b,c){var d=0,e=function(){b&&(b.img[0].complete?(b.img.off(".mfploader"),b===n.currItem&&(n._onImageHasSize(b),n.updateStatus("ready")),b.hasSize=!0,b.loaded=!0,z("ImageLoadComplete")):(d++,d<200?setTimeout(e,100):f()))},f=function(){b&&(b.img.off(".mfploader"),b===n.currItem&&(n._onImageHasSize(b),n.updateStatus("error",g.tError.replace("%url%",b.src))),b.hasSize=!0,b.loaded=!0,b.loadError=!0)},g=n.st.image,h=c.find(".mfp-img");if(h.length){var i=document.createElement("img");i.className="mfp-img",b.img=a(i).on("load.mfploader",e).on("error.mfploader",f),i.src=b.src,h.is("img")&&(b.img=b.img.clone()),i=b.img[0],i.naturalWidth>0?b.hasSize=!0:i.width||(b.hasSize=!1)}return n._parseMarkup(c,{title:E(b),img_replaceWith:b.img},b),n.resizeImage(),b.hasSize?(D&&clearInterval(D),b.loadError?(c.addClass("mfp-loading"),n.updateStatus("error",g.tError.replace("%url%",b.src))):(c.removeClass("mfp-loading"),n.updateStatus("ready")),c):(n.updateStatus("loading"),b.loading=!0,b.hasSize||(b.imgHidden=!0,c.addClass("mfp-loading"),n.findImageSize(b)),c)}}});var F,G=function(){return F===undefined&&(F=document.createElement("p").style.MozTransform!==undefined),F};a.magnificPopup.registerModule("zoom",{options:{enabled:!1,easing:"ease-in-out",duration:300,opener:function(a){return a.is("img")?a:a.find("img")}},proto:{initZoom:function(){var a=n.st.zoom,d=".zoom",e;if(!a.enabled||!n.supportsTransition)return;var f=a.duration,g=function(b){var c=b.clone().removeAttr("style").removeAttr("class").addClass("mfp-animated-image"),d="all "+a.duration/1e3+"s "+a.easing,e={position:"fixed",zIndex:9999,left:0,top:0,"-webkit-backface-visibility":"hidden"},f="transition";return e["-webkit-"+f]=e["-moz-"+f]=e["-o-"+f]=e[f]=d,c.css(e),c},h=function(){n.content.css("visibility","visible")},i,j;x("BuildControls"+d,function(){if(n._allowZoom()){clearTimeout(i),n.content.css("visibility","hidden"),e=n._getItemToZoom();if(!e){h();return}j=g(e),j.css(n._getOffset()),n.wrap.append(j),i=setTimeout(function(){j.css(n._getOffset(!0)),i=setTimeout(function(){h(),setTimeout(function(){j.remove(),e=j=null,z("ZoomAnimationEnded")},16)},f)},16)}}),x(c+d,function(){if(n._allowZoom()){clearTimeout(i),n.st.removalDelay=f;if(!e){e=n._getItemToZoom();if(!e)return;j=g(e)}j.css(n._getOffset(!0)),n.wrap.append(j),n.content.css("visibility","hidden"),setTimeout(function(){j.css(n._getOffset())},16)}}),x(b+d,function(){n._allowZoom()&&(h(),j&&j.remove(),e=null)})},_allowZoom:function(){return n.currItem.type==="image"},_getItemToZoom:function(){return n.currItem.hasSize?n.currItem.img:!1},_getOffset:function(b){var c;b?c=n.currItem.img:c=n.st.zoom.opener(n.currItem.el||n.currItem);var d=c.offset(),e=parseInt(c.css("padding-top"),10),f=parseInt(c.css("padding-bottom"),10);d.top-=a(window).scrollTop()-e;var g={width:c.width(),height:(p?c.innerHeight():c[0].offsetHeight)-f-e};return G()?g["-moz-transform"]=g.transform="translate("+d.left+"px,"+d.top+"px)":(g.left=d.left,g.top=d.top),g}}}),B()})(window.jQuery||window.Zepto)