pswp-rails 4.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +3 -0
  3. data/LICENSE +21 -0
  4. data/README.md +23 -0
  5. data/lib/pswp-rails.rb +23 -0
  6. data/lib/pswp-rails/version.rb +3 -0
  7. data/pswp-rails.gemspec +18 -0
  8. data/vendor/assets/images/photoswipe/LICENSE +21 -0
  9. data/vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/Data +0 -0
  10. data/vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/metadata +18 -0
  11. data/vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/version +1 -0
  12. data/vendor/assets/images/photoswipe/default-skin/default-skin.png +0 -0
  13. data/vendor/assets/images/photoswipe/default-skin/default-skin.psd +0 -0
  14. data/vendor/assets/images/photoswipe/default-skin/default-skin.svg +1 -0
  15. data/vendor/assets/images/photoswipe/default-skin/preloader.gif +0 -0
  16. data/vendor/assets/javascripts/photoswipe.js +2 -0
  17. data/vendor/assets/javascripts/photoswipe/LICENSE +21 -0
  18. data/vendor/assets/javascripts/photoswipe/index.js +2 -0
  19. data/vendor/assets/javascripts/photoswipe/photoswipe-ui-default.js +861 -0
  20. data/vendor/assets/javascripts/photoswipe/photoswipe.js +3718 -0
  21. data/vendor/assets/stylesheets/photoswipe-compass.scss +3 -0
  22. data/vendor/assets/stylesheets/photoswipe-compass/LICENSE +21 -0
  23. data/vendor/assets/stylesheets/photoswipe-compass/_main-settings.scss +9 -0
  24. data/vendor/assets/stylesheets/photoswipe-compass/_main.scss +203 -0
  25. data/vendor/assets/stylesheets/photoswipe-compass/default-skin/_default-skin.scss +587 -0
  26. data/vendor/assets/stylesheets/photoswipe-eskimo.scss +3 -0
  27. data/vendor/assets/stylesheets/photoswipe-eskimo/LICENSE +21 -0
  28. data/vendor/assets/stylesheets/photoswipe-eskimo/_main-settings.scss +9 -0
  29. data/vendor/assets/stylesheets/photoswipe-eskimo/_main.scss +194 -0
  30. data/vendor/assets/stylesheets/photoswipe-eskimo/default-skin/_default-skin.scss +585 -0
  31. data/vendor/assets/stylesheets/photoswipe.scss +3 -0
  32. data/vendor/assets/stylesheets/photoswipe/LICENSE +21 -0
  33. data/vendor/assets/stylesheets/photoswipe/_main-settings.scss +9 -0
  34. data/vendor/assets/stylesheets/photoswipe/_main.scss +209 -0
  35. data/vendor/assets/stylesheets/photoswipe/default-skin/_default-skin.scss +588 -0
  36. metadata +79 -0
@@ -0,0 +1,3 @@
1
+ @import './photoswipe-eskimo/main-settings.scss';
2
+ @import './photoswipe-eskimo/main.scss';
3
+ @import './photoswipe-eskimo/default-skin/default-skin.scss';
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2014-2016 Dmitry Semenov, http://dimsemenov.com
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,9 @@
1
+ $pswp__show-hide-transition-duration: 333ms !default;
2
+ $pswp__controls-transition-duration: 333ms !default;
3
+ $pswp__background-color: #000 !default;
4
+ $pswp__placeholder-color: #222 !default;
5
+ $pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
6
+ $pswp__root-z-index: 1500 !default;
7
+ $pswp__assets-path: '' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
8
+ $pswp__error-text-color: #CCC !default; // "Image not loaded" text color
9
+ $pswp__include-minimal-style: true !default;
@@ -0,0 +1,194 @@
1
+ /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
2
+
3
+ /*
4
+ Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
5
+ */
6
+
7
+ // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
8
+
9
+ @import "main-settings";
10
+
11
+
12
+ /* pswp = photoswipe */
13
+ .pswp {
14
+ display: none;
15
+ position:absolute;
16
+ width: 100%;
17
+ height: 100%;
18
+ left:0;
19
+ top:0;
20
+ overflow: hidden;
21
+ -ms-touch-action: none;
22
+ touch-action: none;
23
+ z-index: $pswp__root-z-index;
24
+ @include text-size-adjust(100%);
25
+ /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
26
+ @include backface-visibility(hidden);
27
+ outline: none;
28
+
29
+ @if $pswp__box-sizing-border-box == true {
30
+ * {
31
+ @include box-sizing(border-box);
32
+ }
33
+ }
34
+
35
+ img {
36
+ max-width: none;
37
+ }
38
+ }
39
+
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 */
43
+ @include opacity(0);
44
+ will-change:opacity;
45
+ /* for open/close transition */
46
+ @include transition(opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
47
+ }
48
+
49
+ .pswp--open {
50
+ display: block;
51
+ }
52
+
53
+ .pswp--zoom-allowed .pswp__img {
54
+ @include cursor(zoom-in);
55
+ }
56
+
57
+ .pswp--zoomed-in .pswp__img {
58
+ @include cursor(grab);
59
+ }
60
+
61
+ .pswp--dragging .pswp__img {
62
+ @include cursor(grabbing);
63
+ }
64
+
65
+ /*
66
+ Background is added as a separate element.
67
+ As animating opacity is much faster than animating rgba() background-color.
68
+ */
69
+ .pswp__bg {
70
+ position: absolute;
71
+ left: 0;
72
+ top: 0;
73
+ width: 100%;
74
+ height: 100%;
75
+ background: $pswp__background-color;
76
+ @include opacity(0);
77
+ @include backface-visibility(hidden);
78
+ will-change:opacity;
79
+ }
80
+
81
+ .pswp__scroll-wrap {
82
+ position: absolute;
83
+ left: 0;
84
+ top: 0;
85
+ width: 100%;
86
+ height: 100%;
87
+ overflow:hidden;
88
+ }
89
+
90
+ .pswp__container,
91
+ .pswp__zoom-wrap {
92
+ -ms-touch-action: none;
93
+ touch-action: none;
94
+ position: absolute;
95
+ left: 0;
96
+ right: 0;
97
+ top: 0;
98
+ bottom: 0;
99
+ }
100
+
101
+ /* Prevent selection and tap highlights */
102
+ .pswp__container,
103
+ .pswp__img {
104
+ @include user-select(none);
105
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
106
+ -webkit-touch-callout: none;
107
+ }
108
+
109
+ .pswp__zoom-wrap {
110
+ position: absolute;
111
+ width: 100%;
112
+ @include transform-origin(left, top);
113
+ /* for open/close transition */
114
+ @include transition(transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
115
+ }
116
+
117
+ .pswp__bg {
118
+ will-change: opacity;
119
+ /* for open/close transition */
120
+ @include transition(opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
121
+ }
122
+
123
+ .pswp--animated-in {
124
+ .pswp__bg,
125
+ .pswp__zoom-wrap {
126
+ @include transition(none);
127
+ }
128
+ }
129
+
130
+ .pswp__container,
131
+ .pswp__zoom-wrap {
132
+ @include backface-visibility(hidden);
133
+ }
134
+
135
+ .pswp__item {
136
+ position: absolute;
137
+ left: 0;
138
+ right: 0;
139
+ top: 0;
140
+ bottom: 0;
141
+ overflow: hidden;
142
+ }
143
+
144
+ .pswp__img {
145
+ position: absolute;
146
+ width: auto;
147
+ height: auto;
148
+ top: 0;
149
+ left: 0;
150
+ }
151
+
152
+ /*
153
+ stretched thumbnail or div placeholder element (see below)
154
+ style is added to avoid flickering in webkit/blink when layers overlap
155
+ */
156
+ .pswp__img--placeholder {
157
+ @include backface-visibility(hidden);
158
+ }
159
+
160
+ /*
161
+ div element that matches size of large image
162
+ large image loads on top of it
163
+ */
164
+ .pswp__img--placeholder--blank {
165
+ background: $pswp__placeholder-color;
166
+ }
167
+
168
+ .pswp--ie .pswp__img {
169
+ width: 100% !important;
170
+ height: auto !important;
171
+ left: 0;
172
+ top: 0;
173
+ }
174
+
175
+ /*
176
+ Error message appears when image is not loaded
177
+ (JS option errorMsg controls markup)
178
+ */
179
+ .pswp__error-msg {
180
+ position: absolute;
181
+ left: 0;
182
+ top: 50%;
183
+ width: 100%;
184
+ text-align: center;
185
+ font-size: 14px;
186
+ line-height: 16px;
187
+ margin-top: -8px;
188
+ color: $pswp__error-text-color;
189
+ }
190
+
191
+ .pswp__error-msg a {
192
+ color: $pswp__error-text-color;
193
+ text-decoration: underline;
194
+ }
@@ -0,0 +1,585 @@
1
+ /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
2
+
3
+ /*
4
+
5
+ Contents:
6
+
7
+ 1. Buttons
8
+ 2. Share modal and links
9
+ 3. Index indicator ("1 of X" counter)
10
+ 4. Caption
11
+ 5. Loading indicator
12
+ 6. Additional styles (root element, top bar, idle state, hidden state, etc.)
13
+
14
+ */
15
+
16
+ // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
17
+
18
+
19
+
20
+ @import "../main-settings";
21
+
22
+
23
+ /*
24
+
25
+ 1. Buttons
26
+
27
+ */
28
+
29
+ /* <button> css reset */
30
+ .pswp__button {
31
+ width: 44px;
32
+ height: 44px;
33
+ position: relative;
34
+ background: none;
35
+ @include cursor(pointer);
36
+ overflow: visible;
37
+ @include appearance(none);
38
+ display: block;
39
+ border: 0;
40
+ padding: 0;
41
+ margin: 0;
42
+ float: right;
43
+ @include opacity(0.75);
44
+ @include transition(opacity 0.2s);
45
+ @include box-shadow(none);
46
+
47
+ &:focus,
48
+ &:hover {
49
+ @include opacity(1);
50
+ }
51
+
52
+ &:active {
53
+ outline: none;
54
+ @include opacity(0.9);
55
+ }
56
+
57
+ &::-moz-focus-inner {
58
+ padding: 0;
59
+ border: 0
60
+ }
61
+ }
62
+
63
+ /* pswp__ui--over-close class it added when mouse is over element that should close gallery */
64
+ .pswp__ui--over-close .pswp__button--close {
65
+ @include opacity(1);
66
+ }
67
+
68
+ .pswp__button,
69
+ .pswp__button--arrow--left:before,
70
+ .pswp__button--arrow--right:before {
71
+ background: asset-data-url('photoswipe/default-skin/default-skin.png') 0 0 no-repeat;
72
+ background-size: 264px 88px;
73
+ width: 44px;
74
+ height: 44px;
75
+ }
76
+
77
+ @media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
78
+
79
+ /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
80
+ .pswp--svg .pswp__button,
81
+ .pswp--svg .pswp__button--arrow--left:before,
82
+ .pswp--svg .pswp__button--arrow--right:before {
83
+ background-image: asset-data-url('photoswipe/default-skin/default-skin.svg');
84
+ }
85
+
86
+ .pswp--svg .pswp__button--arrow--left,
87
+ .pswp--svg .pswp__button--arrow--right {
88
+ background: none;
89
+ }
90
+ }
91
+
92
+ .pswp__button--close {
93
+ background-position: 0 -44px;
94
+ }
95
+
96
+ .pswp__button--share {
97
+ background-position: -44px -44px;
98
+ }
99
+
100
+ .pswp__button--fs {
101
+ display: none;
102
+ }
103
+
104
+ .pswp--supports-fs .pswp__button--fs {
105
+ display: block;
106
+ }
107
+
108
+ .pswp--fs .pswp__button--fs {
109
+ background-position: -44px 0;
110
+ }
111
+
112
+ .pswp__button--zoom {
113
+ display: none;
114
+ background-position: -88px 0;
115
+ }
116
+
117
+ .pswp--zoom-allowed .pswp__button--zoom {
118
+ display: block;
119
+ }
120
+
121
+ .pswp--zoomed-in .pswp__button--zoom {
122
+ background-position: -132px 0;
123
+ }
124
+
125
+ /* no arrows on touch screens */
126
+ .pswp--touch {
127
+ .pswp__button--arrow--left,
128
+ .pswp__button--arrow--right {
129
+ visibility: hidden;
130
+ }
131
+ }
132
+
133
+ /*
134
+ Arrow buttons hit area
135
+ (icon is added to :before pseudo-element)
136
+ */
137
+ .pswp__button--arrow--left,
138
+ .pswp__button--arrow--right {
139
+ background: none;
140
+ top: 50%;
141
+ margin-top: -50px;
142
+ width: 70px;
143
+ height: 100px;
144
+ position: absolute;
145
+ }
146
+
147
+ .pswp__button--arrow--left {
148
+ left: 0;
149
+ }
150
+
151
+ .pswp__button--arrow--right {
152
+ right: 0;
153
+ }
154
+
155
+ .pswp__button--arrow--left:before,
156
+ .pswp__button--arrow--right:before {
157
+ content: '';
158
+ top: 35px;
159
+ background-color: rgba(0,0,0,0.3);
160
+ height: 30px;
161
+ width: 32px;
162
+ position: absolute;
163
+ }
164
+
165
+ .pswp__button--arrow--left:before {
166
+ left: 6px;
167
+ background-position: -138px -44px;
168
+ }
169
+
170
+ .pswp__button--arrow--right:before {
171
+ right: 6px;
172
+ background-position: -94px -44px;
173
+ }
174
+
175
+
176
+ /*
177
+
178
+ 2. Share modal/popup and links
179
+
180
+ */
181
+
182
+ .pswp__counter,
183
+ .pswp__share-modal {
184
+ @include user-select(none);
185
+ }
186
+
187
+ .pswp__share-modal {
188
+ display: block;
189
+ background: rgba(0, 0, 0, 0.5);
190
+ width: 100%;
191
+ height: 100%;
192
+ top: 0;
193
+ left: 0;
194
+ padding: 10px;
195
+ position: absolute;
196
+ z-index: $pswp__root-z-index + 100;
197
+ @include opacity(0);
198
+ @include transition(opacity 0.25s ease-out);
199
+ @include backface-visibility(hidden);
200
+ will-change: opacity;
201
+ }
202
+
203
+ .pswp__share-modal--hidden {
204
+ display: none;
205
+ }
206
+
207
+ .pswp__share-tooltip {
208
+ z-index: $pswp__root-z-index + 120;
209
+ position: absolute;
210
+ background: #FFF;
211
+ top: 56px;
212
+ @include border-radius(2px);
213
+ display: block;
214
+ width: auto;
215
+ right: 44px;
216
+ @include box-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
217
+ @include transform(translateY(6px));
218
+ @include transition(transform 0.25s);
219
+ @include backface-visibility(hidden);
220
+ will-change: transform;
221
+
222
+ a {
223
+ display: block;
224
+ padding: 8px 12px;
225
+ color: #000;
226
+ text-decoration: none;
227
+ font-size: 14px;
228
+ line-height: 18px;
229
+
230
+ &:hover {
231
+ text-decoration: none;
232
+ color: #000;
233
+ }
234
+
235
+
236
+ &:first-child {
237
+ /* round corners on the first/last list item */
238
+ @include border-radius(2px 2px 0 0);
239
+ }
240
+
241
+ &:last-child {
242
+ @include border-radius(0 0 2px 2px);
243
+ }
244
+ }
245
+ }
246
+
247
+ .pswp__share-modal--fade-in {
248
+ @include opacity(1);
249
+
250
+ .pswp__share-tooltip {
251
+ @include transform(translateY(0));
252
+ }
253
+ }
254
+
255
+ /* increase size of share links on touch devices */
256
+ .pswp--touch .pswp__share-tooltip a {
257
+ padding: 16px 12px;
258
+ }
259
+
260
+ a.pswp__share--facebook {
261
+ &:before {
262
+ content: '';
263
+ display: block;
264
+ width: 0;
265
+ height: 0;
266
+ position: absolute;
267
+ top: -12px;
268
+ right: 15px;
269
+ border: 6px solid rgba(0, 0, 0, 0);
270
+ border-bottom-color: #FFF;
271
+ @include pointer-events(none);
272
+
273
+ }
274
+
275
+ &:hover {
276
+ background: #3E5C9A;
277
+ color: #FFF;
278
+
279
+ &:before {
280
+ border-bottom-color: #3E5C9A;
281
+ }
282
+ }
283
+ }
284
+
285
+ a.pswp__share--twitter {
286
+ &:hover {
287
+ background: #55ACEE;
288
+ color: #FFF;
289
+ }
290
+ }
291
+
292
+ a.pswp__share--pinterest {
293
+ &:hover {
294
+ background: #CCC;
295
+ color: #CE272D;
296
+ }
297
+ }
298
+
299
+ a.pswp__share--download {
300
+ &:hover {
301
+ background: #DDD;
302
+ }
303
+ }
304
+
305
+
306
+ /*
307
+
308
+ 3. Index indicator ("1 of X" counter)
309
+
310
+ */
311
+
312
+ .pswp__counter {
313
+ position: absolute;
314
+ left: 0;
315
+ top: 0;
316
+ height: 44px;
317
+ font-size: 13px;
318
+ line-height: 44px;
319
+ color: #FFF;
320
+ @include opacity(0.75);
321
+ padding: 0 10px;
322
+ }
323
+
324
+
325
+ /*
326
+
327
+ 4. Caption
328
+
329
+ */
330
+
331
+ .pswp__caption {
332
+ position: absolute;
333
+ left: 0;
334
+ bottom: 0;
335
+ width: 100%;
336
+ min-height: 44px;
337
+
338
+ small {
339
+ font-size: 11px;
340
+ color: #BBB;
341
+ }
342
+ }
343
+
344
+ .pswp__caption__center {
345
+ text-align: left;
346
+ max-width: 420px;
347
+ margin: 0 auto;
348
+ font-size: 13px;
349
+ padding: 10px;
350
+ line-height: 20px;
351
+ color: #CCC;
352
+ }
353
+
354
+ .pswp__caption--empty {
355
+ display: none;
356
+ }
357
+
358
+ /* Fake caption element, used to calculate height of next/prev image */
359
+ .pswp__caption--fake {
360
+ visibility: hidden;
361
+ }
362
+
363
+
364
+ /*
365
+
366
+ 5. Loading indicator (preloader)
367
+
368
+ You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
369
+
370
+ */
371
+
372
+ .pswp__preloader {
373
+ width: 44px;
374
+ height: 44px;
375
+ position: absolute;
376
+ top: 0;
377
+ left: 50%;
378
+ margin-left: -22px;
379
+ @include opacity(0);
380
+ @include transition(opacity 0.25s ease-out);
381
+ will-change: opacity;
382
+ direction: ltr;
383
+ }
384
+
385
+ .pswp__preloader__icn {
386
+ width: 20px;
387
+ height: 20px;
388
+ margin: 12px;
389
+ }
390
+
391
+ .pswp__preloader--active {
392
+ @include opacity(1);
393
+
394
+ .pswp__preloader__icn {
395
+ /* We use .gif in browsers that don't support CSS animation */
396
+ background: asset-data-url('photoswipe/default-skin/preloader.gif') 0 0 no-repeat;
397
+ }
398
+ }
399
+
400
+ .pswp--css_animation {
401
+ .pswp__preloader--active {
402
+ @include opacity(1);
403
+
404
+ .pswp__preloader__icn {
405
+ @include animation(clockwise 500ms linear infinite);
406
+ }
407
+
408
+ .pswp__preloader__donut {
409
+ @include animation(donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite);
410
+ }
411
+ }
412
+
413
+ .pswp__preloader__icn {
414
+ background: none;
415
+ @include opacity(0);
416
+ width: 14px;
417
+ height: 14px;
418
+ position: absolute;
419
+ left: 15px;
420
+ top: 15px;
421
+ margin: 0;
422
+ }
423
+
424
+
425
+ .pswp__preloader__cut {
426
+ /*
427
+ The idea of animating inner circle is based on Polymer ("material") loading indicator
428
+ by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
429
+ */
430
+ position: relative;
431
+ width: 7px;
432
+ height: 14px;
433
+ overflow: hidden;
434
+ }
435
+
436
+ .pswp__preloader__donut {
437
+ @include box-sizing(border-box);
438
+ width: 14px;
439
+ height: 14px;
440
+ border: 2px solid #FFF;
441
+ @include border-radius(50%);
442
+ border-left-color: transparent;
443
+ border-bottom-color: transparent;
444
+ position: absolute;
445
+ top: 0;
446
+ left: 0;
447
+ background: none;
448
+ margin: 0;
449
+ }
450
+ }
451
+
452
+ @media screen and (max-width: 1024px) {
453
+ .pswp__preloader {
454
+ position: relative;
455
+ left: auto;
456
+ top: auto;
457
+ margin: 0;
458
+ float: right;
459
+ }
460
+ }
461
+
462
+ @include keyframes(clockwise) {
463
+ 0% { @include transform(rotate(0deg)) }
464
+ 100% { @include transform(rotate(360deg)) }
465
+ }
466
+
467
+ @include keyframes(donut-rotate) {
468
+ 0% { @include transform(rotate(0)) }
469
+ 50% { @include transform(rotate(-140deg)) }
470
+ 100% { @include transform(rotate(0)) }
471
+ }
472
+
473
+
474
+ /*
475
+
476
+ 6. Additional styles
477
+
478
+ */
479
+
480
+ /* root element of UI */
481
+ .pswp__ui {
482
+ @include font-smoothing(auto);
483
+ visibility: visible;
484
+ @include opacity(1);
485
+ z-index: $pswp__root-z-index + 50;
486
+ }
487
+
488
+ /* top black bar with buttons and "1 of X" indicator */
489
+ .pswp__top-bar {
490
+ position: absolute;
491
+ left: 0;
492
+ top: 0;
493
+ height: 44px;
494
+ width: 100%;
495
+ }
496
+
497
+ .pswp__caption,
498
+ .pswp__top-bar,
499
+ .pswp--has_mouse .pswp__button--arrow--left,
500
+ .pswp--has_mouse .pswp__button--arrow--right {
501
+ @include backface-visibility(hidden);
502
+ will-change: opacity;
503
+ @include transition(opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1));
504
+ }
505
+
506
+ /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
507
+ .pswp--has_mouse {
508
+ .pswp__button--arrow--left,
509
+ .pswp__button--arrow--right {
510
+ visibility: visible;
511
+ }
512
+ }
513
+
514
+ .pswp__top-bar,
515
+ .pswp__caption {
516
+ background-color: rgba(0,0,0,0.5);
517
+ }
518
+
519
+ /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
520
+ .pswp__ui--fit {
521
+ .pswp__top-bar,
522
+ .pswp__caption {
523
+ background-color: rgba(0,0,0,0.3);
524
+ }
525
+ }
526
+
527
+ /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
528
+
529
+ .pswp__ui--idle {
530
+ .pswp__top-bar {
531
+ @include opacity(0);
532
+ }
533
+
534
+ .pswp__button--arrow--left,
535
+ .pswp__button--arrow--right {
536
+ @include opacity(0);
537
+ }
538
+ }
539
+
540
+ /*
541
+ pswp__ui--hidden class is added when controls are hidden
542
+ e.g. when user taps to toggle visibility of controls
543
+ */
544
+ .pswp__ui--hidden {
545
+ .pswp__top-bar,
546
+ .pswp__caption,
547
+ .pswp__button--arrow--left,
548
+ .pswp__button--arrow--right {
549
+ /* Force paint & create composition layer for controls. */
550
+ @include opacity(0.001);
551
+ }
552
+ }
553
+
554
+ /* pswp__ui--one-slide class is added when there is just one item in gallery */
555
+ .pswp__ui--one-slide {
556
+ .pswp__button--arrow--left,
557
+ .pswp__button--arrow--right,
558
+ .pswp__counter {
559
+ display: none;
560
+ }
561
+ }
562
+
563
+ .pswp__element--disabled {
564
+ display: none !important;
565
+ }
566
+
567
+ @if $pswp__include-minimal-style == true {
568
+ .pswp--minimal--dark {
569
+ .pswp__top-bar {
570
+ background: none;
571
+ }
572
+ }
573
+ }
574
+
575
+
576
+
577
+
578
+
579
+
580
+
581
+
582
+
583
+
584
+
585
+