https://www.gallery.am/assets/PhotoSwipe/dist/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/*
178class pswp__hide-on-close is applied to elements that
179should hide (for example fade out) when PhotoSwipe is closed
180and 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*/
260div.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);*/ /*m 2026-05-17*/
415  opacity: 0.85;
416}
417
418.pswp--one-slide .pswp__counter {
419  display: none;
420}