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.
- package/README.md +12 -1
- package/dist/gp-designer.es.js +592 -586
- package/dist/gp-designer.umd.js +11 -11
- package/dist/spa/topic/js/index.js +2 -1
- package/dist/spa/topic/js/photoswipe.js +32 -0
- package/dist/spa/topic/photoswipe/photoswipe-lightbox.esm.js +1960 -0
- package/dist/spa/topic/photoswipe/photoswipe-lightbox.esm.js.map +1 -0
- package/dist/spa/topic/photoswipe/photoswipe-lightbox.esm.min.js +5 -0
- package/dist/spa/topic/photoswipe/photoswipe.css +420 -0
- package/dist/spa/topic/photoswipe/photoswipe.esm.js +7081 -0
- package/dist/spa/topic/photoswipe/photoswipe.esm.js.map +1 -0
- package/dist/spa/topic/photoswipe/photoswipe.esm.min.js +5 -0
- package/dist/style.css +1 -1
- package/dist/types/components/Designer.vue.d.ts +2 -0
- package/package.json +1 -1
@@ -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
|
+
}
|