gp-designer 1.0.103 → 1.0.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,420 @@
1
+ /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
2
+
3
+ .pswp {
4
+ --pswp-bg: #000;
5
+ --pswp-placeholder-bg: #222;
6
+
7
+
8
+ --pswp-root-z-index: 100000;
9
+
10
+ --pswp-preloader-color: rgba(79, 79, 79, 0.4);
11
+ --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
12
+
13
+ /* defined via js:
14
+ --pswp-transition-duration: 333ms; */
15
+
16
+ --pswp-icon-color: #fff;
17
+ --pswp-icon-color-secondary: #4f4f4f;
18
+ --pswp-icon-stroke-color: #4f4f4f;
19
+ --pswp-icon-stroke-width: 2px;
20
+
21
+ --pswp-error-text-color: var(--pswp-icon-color);
22
+ }
23
+
24
+
25
+ /*
26
+ Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
27
+ */
28
+
29
+ .pswp {
30
+ position: fixed;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ z-index: var(--pswp-root-z-index);
36
+ display: none;
37
+ touch-action: none;
38
+ outline: 0;
39
+ opacity: 0.003;
40
+ contain: layout style size;
41
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
42
+ }
43
+
44
+ /* Prevents focus outline on the root element,
45
+ (it may be focused initially) */
46
+ .pswp:focus {
47
+ outline: 0;
48
+ }
49
+
50
+ .pswp * {
51
+ box-sizing: border-box;
52
+ }
53
+
54
+ .pswp img {
55
+ max-width: none;
56
+ }
57
+
58
+ .pswp--open {
59
+ display: block;
60
+ }
61
+
62
+ .pswp,
63
+ .pswp__bg {
64
+ transform: translateZ(0);
65
+ will-change: opacity;
66
+ }
67
+
68
+ .pswp__bg {
69
+ opacity: 0.005;
70
+ background: var(--pswp-bg);
71
+ }
72
+
73
+ .pswp,
74
+ .pswp__scroll-wrap {
75
+ overflow: hidden;
76
+ }
77
+
78
+ .pswp__scroll-wrap,
79
+ .pswp__bg,
80
+ .pswp__container,
81
+ .pswp__item,
82
+ .pswp__content,
83
+ .pswp__img,
84
+ .pswp__zoom-wrap {
85
+ position: absolute;
86
+ top: 0;
87
+ left: 0;
88
+ width: 100%;
89
+ height: 100%;
90
+ }
91
+
92
+ .pswp__img,
93
+ .pswp__zoom-wrap {
94
+ width: auto;
95
+ height: auto;
96
+ }
97
+
98
+ .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
99
+ cursor: -webkit-zoom-in;
100
+ cursor: -moz-zoom-in;
101
+ cursor: zoom-in;
102
+ }
103
+
104
+ .pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
105
+ cursor: move;
106
+ cursor: -webkit-grab;
107
+ cursor: -moz-grab;
108
+ cursor: grab;
109
+ }
110
+
111
+ .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
112
+ cursor: -webkit-grabbing;
113
+ cursor: -moz-grabbing;
114
+ cursor: grabbing;
115
+ }
116
+
117
+ /* :active to override grabbing cursor */
118
+ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
119
+ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
120
+ .pswp__img {
121
+ cursor: -webkit-zoom-out;
122
+ cursor: -moz-zoom-out;
123
+ cursor: zoom-out;
124
+ }
125
+
126
+
127
+ /* Prevent selection and tap highlights */
128
+ .pswp__container,
129
+ .pswp__img,
130
+ .pswp__button,
131
+ .pswp__counter {
132
+ -webkit-user-select: none;
133
+ -moz-user-select: none;
134
+ -ms-user-select: none;
135
+ user-select: none;
136
+ }
137
+
138
+ .pswp__item {
139
+ /* z-index for fade transition */
140
+ z-index: 1;
141
+ overflow: hidden;
142
+ }
143
+
144
+ .pswp__hidden {
145
+ display: none !important;
146
+ }
147
+
148
+ /* Allow to click through pswp__content element, but not its children */
149
+ .pswp__content {
150
+ pointer-events: none;
151
+ }
152
+ .pswp__content > * {
153
+ pointer-events: auto;
154
+ }
155
+
156
+
157
+ /*
158
+
159
+ PhotoSwipe UI
160
+
161
+ */
162
+
163
+ /*
164
+ Error message appears when image is not loaded
165
+ (JS option errorMsg controls markup)
166
+ */
167
+ .pswp__error-msg-container {
168
+ display: grid;
169
+ }
170
+ .pswp__error-msg {
171
+ margin: auto;
172
+ font-size: 1em;
173
+ line-height: 1;
174
+ color: var(--pswp-error-text-color);
175
+ }
176
+
177
+ /*
178
+ class pswp__hide-on-close is applied to elements that
179
+ should hide (for example fade out) when PhotoSwipe is closed
180
+ and show (for example fade in) when PhotoSwipe is opened
181
+ */
182
+ .pswp .pswp__hide-on-close {
183
+ opacity: 0.005;
184
+ will-change: opacity;
185
+ transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
186
+ z-index: 10; /* always overlap slide content */
187
+ pointer-events: none; /* hidden elements should not be clickable */
188
+ }
189
+
190
+ /* class pswp--ui-visible is added when opening or closing transition starts */
191
+ .pswp--ui-visible .pswp__hide-on-close {
192
+ opacity: 1;
193
+ pointer-events: auto;
194
+ }
195
+
196
+ /* <button> styles, including css reset */
197
+ .pswp__button {
198
+ position: relative;
199
+ display: block;
200
+ width: 50px;
201
+ height: 60px;
202
+ padding: 0;
203
+ margin: 0;
204
+ overflow: hidden;
205
+ cursor: pointer;
206
+ background: none;
207
+ border: 0;
208
+ box-shadow: none;
209
+ opacity: 0.85;
210
+ -webkit-appearance: none;
211
+ -webkit-touch-callout: none;
212
+ }
213
+
214
+ .pswp__button:hover,
215
+ .pswp__button:active,
216
+ .pswp__button:focus {
217
+ transition: none;
218
+ padding: 0;
219
+ background: none;
220
+ border: 0;
221
+ box-shadow: none;
222
+ opacity: 1;
223
+ }
224
+
225
+ .pswp__button:disabled {
226
+ opacity: 0.3;
227
+ cursor: auto;
228
+ }
229
+
230
+ .pswp__icn {
231
+ fill: var(--pswp-icon-color);
232
+ color: var(--pswp-icon-color-secondary);
233
+ }
234
+
235
+ .pswp__icn {
236
+ position: absolute;
237
+ top: 14px;
238
+ left: 9px;
239
+ width: 32px;
240
+ height: 32px;
241
+ overflow: hidden;
242
+ pointer-events: none;
243
+ }
244
+
245
+ .pswp__icn-shadow {
246
+ stroke: var(--pswp-icon-stroke-color);
247
+ stroke-width: var(--pswp-icon-stroke-width);
248
+ fill: none;
249
+ }
250
+
251
+ .pswp__icn:focus {
252
+ outline: 0;
253
+ }
254
+
255
+ /*
256
+ div element that matches size of large image,
257
+ large image loads on top of it,
258
+ used when msrc is not provided
259
+ */
260
+ div.pswp__img--placeholder,
261
+ .pswp__img--with-bg {
262
+ background: var(--pswp-placeholder-bg);
263
+ }
264
+
265
+ .pswp__top-bar {
266
+ position: absolute;
267
+ left: 0;
268
+ top: 0;
269
+ width: 100%;
270
+ height: 60px;
271
+ display: flex;
272
+ flex-direction: row;
273
+ justify-content: flex-end;
274
+ z-index: 10;
275
+
276
+ /* allow events to pass through top bar itself */
277
+ pointer-events: none !important;
278
+ }
279
+ .pswp__top-bar > * {
280
+ pointer-events: auto;
281
+ /* this makes transition significantly more smooth,
282
+ even though inner elements are not animated */
283
+ will-change: opacity;
284
+ }
285
+
286
+
287
+ /*
288
+
289
+ Close button
290
+
291
+ */
292
+ .pswp__button--close {
293
+ margin-right: 6px;
294
+ }
295
+
296
+
297
+ /*
298
+
299
+ Arrow buttons
300
+
301
+ */
302
+ .pswp__button--arrow {
303
+ position: absolute;
304
+ top: 0;
305
+ width: 75px;
306
+ height: 100px;
307
+ top: 50%;
308
+ margin-top: -50px;
309
+ }
310
+
311
+ .pswp__button--arrow:disabled {
312
+ display: none;
313
+ cursor: default;
314
+ }
315
+
316
+ .pswp__button--arrow .pswp__icn {
317
+ top: 50%;
318
+ margin-top: -30px;
319
+ width: 60px;
320
+ height: 60px;
321
+ background: none;
322
+ border-radius: 0;
323
+ }
324
+
325
+ .pswp--one-slide .pswp__button--arrow {
326
+ display: none;
327
+ }
328
+
329
+ /* hide arrows on touch screens */
330
+ .pswp--touch .pswp__button--arrow {
331
+ visibility: hidden;
332
+ }
333
+
334
+ /* show arrows only after mouse was used */
335
+ .pswp--has_mouse .pswp__button--arrow {
336
+ visibility: visible;
337
+ }
338
+
339
+ .pswp__button--arrow--prev {
340
+ right: auto;
341
+ left: 0px;
342
+ }
343
+
344
+ .pswp__button--arrow--next {
345
+ right: 0px;
346
+ }
347
+ .pswp__button--arrow--next .pswp__icn {
348
+ left: auto;
349
+ right: 14px;
350
+ /* flip horizontally */
351
+ transform: scale(-1, 1);
352
+ }
353
+
354
+ /*
355
+
356
+ Zoom button
357
+
358
+ */
359
+ .pswp__button--zoom {
360
+ display: none;
361
+ }
362
+
363
+ .pswp--zoom-allowed .pswp__button--zoom {
364
+ display: block;
365
+ }
366
+
367
+ /* "+" => "-" */
368
+ .pswp--zoomed-in .pswp__zoom-icn-bar-v {
369
+ display: none;
370
+ }
371
+
372
+
373
+ /*
374
+
375
+ Loading indicator
376
+
377
+ */
378
+ .pswp__preloader {
379
+ position: relative;
380
+ overflow: hidden;
381
+ width: 50px;
382
+ height: 60px;
383
+ margin-right: auto;
384
+ }
385
+
386
+ .pswp__preloader .pswp__icn {
387
+ opacity: 0;
388
+ transition: opacity 0.2s linear;
389
+ animation: pswp-clockwise 600ms linear infinite;
390
+ }
391
+
392
+ .pswp__preloader--active .pswp__icn {
393
+ opacity: 0.85;
394
+ }
395
+
396
+ @keyframes pswp-clockwise {
397
+ 0% { transform: rotate(0deg); }
398
+ 100% { transform: rotate(360deg); }
399
+ }
400
+
401
+
402
+ /*
403
+
404
+ "1 of 10" counter
405
+
406
+ */
407
+ .pswp__counter {
408
+ height: 30px;
409
+ margin-top: 15px;
410
+ margin-inline-start: 20px;
411
+ font-size: 14px;
412
+ line-height: 30px;
413
+ color: var(--pswp-icon-color);
414
+ text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
415
+ opacity: 0.85;
416
+ }
417
+
418
+ .pswp--one-slide .pswp__counter {
419
+ display: none;
420
+ }