1 /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
4 Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
7 // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
9 @import "main-settings";
12 /* pswp = photoswipe */
21 -ms-touch-action: none;
23 z-index: $pswp__root-z-index;
24 -webkit-text-size-adjust: 100%;
25 /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
26 -webkit-backface-visibility: hidden;
29 @if $pswp__box-sizing-border-box == true {
31 box-sizing: border-box;
40 /* style is added when JS option showHideOpacity is set to true */
41 .pswp--animate_opacity {
42 /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
45 /* for open/close transition */
46 transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
53 .pswp--zoom-allowed .pswp__img {
54 /* autoprefixer: off */
55 cursor: -webkit-zoom-in;
60 .pswp--zoomed-in .pswp__img {
61 /* autoprefixer: off */
67 .pswp--dragging .pswp__img {
68 /* autoprefixer: off */
69 cursor: -webkit-grabbing;
70 cursor: -moz-grabbing;
75 Background is added as a separate element.
76 As animating opacity is much faster than animating rgba() background-color.
84 background: $pswp__background-color;
86 transform: translateZ(0);
87 -webkit-backface-visibility: hidden;
102 -ms-touch-action: none;
111 /* Prevent selection and tap highlights */
114 -webkit-user-select: none;
115 -moz-user-select: none;
117 -webkit-tap-highlight-color: rgba(0,0,0,0);
118 -webkit-touch-callout: none;
124 -webkit-transform-origin: left top;
125 -moz-transform-origin: left top;
126 -ms-transform-origin: left top;
127 transform-origin: left top;
128 /* for open/close transition */
129 transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
133 will-change: opacity;
134 /* for open/close transition */
135 transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
141 -webkit-transition: none;
148 -webkit-backface-visibility: hidden;
169 stretched thumbnail or div placeholder element (see below)
170 style is added to avoid flickering in webkit/blink when layers overlap
172 .pswp__img--placeholder {
173 -webkit-backface-visibility: hidden;
177 div element that matches size of large image
178 large image loads on top of it
180 .pswp__img--placeholder--blank {
181 background: $pswp__placeholder-color;
184 .pswp--ie .pswp__img {
185 width: 100% !important;
186 height: auto !important;
192 Error message appears when image is not loaded
193 (JS option errorMsg controls markup)
204 color: $pswp__error-text-color;
208 color: $pswp__error-text-color;
209 text-decoration: underline;