Source code of my website
💄 : add photoswipe stylesheet for gallery
+421
+420
assets/css/photoswipe.css
+420
assets/css/photoswipe.css
···
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
+
}
+1
themes/poison/layouts/partials/head/stylesheets.html
+1
themes/poison/layouts/partials/head/stylesheets.html
···
6
6
(resources.Get "css/fonts.css")
7
7
(resources.Get "css/tabs.css")
8
8
(resources.Get "css/custom.css")
9
+
(resources.Get "css/photoswipe.css")
9
10
| resources.Concat "css/bundle.css" | minify | fingerprint }}
10
11
11
12
<link type="text/css" rel="stylesheet" href="{{ $css_bundle.RelPermalink }}">