UNPKG

16 kBCSSView Raw
1/**
2 * Swiper 6.5.9
3 * Most modern mobile touch slider and framework with hardware accelerated transitions
4 * https://swiperjs.com
5 *
6 * Copyright 2014-2021 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
10 * Released on: April 30, 2021
11 */
12
13@font-face {
14 font-family: 'swiper-icons';
15 src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
16 font-weight: 400;
17 font-style: normal;
18}
19:root {
20 --swiper-theme-color: #007aff;
21}
22.swiper-container {
23 margin-left: auto;
24 margin-right: auto;
25 position: relative;
26 overflow: hidden;
27 list-style: none;
28 padding: 0;
29 /* Fix of Webkit flickering */
30 z-index: 1;
31}
32.swiper-container-vertical > .swiper-wrapper {
33 flex-direction: column;
34}
35.swiper-wrapper {
36 position: relative;
37 width: 100%;
38 height: 100%;
39 z-index: 1;
40 display: flex;
41 transition-property: transform;
42 box-sizing: content-box;
43}
44.swiper-container-android .swiper-slide,
45.swiper-wrapper {
46 transform: translate3d(0px, 0, 0);
47}
48.swiper-container-multirow > .swiper-wrapper {
49 flex-wrap: wrap;
50}
51.swiper-container-multirow-column > .swiper-wrapper {
52 flex-wrap: wrap;
53 flex-direction: column;
54}
55.swiper-container-free-mode > .swiper-wrapper {
56 transition-timing-function: ease-out;
57 margin: 0 auto;
58}
59.swiper-container-pointer-events {
60 touch-action: pan-y;
61}
62.swiper-container-pointer-events.swiper-container-vertical {
63 touch-action: pan-x;
64}
65.swiper-slide {
66 flex-shrink: 0;
67 width: 100%;
68 height: 100%;
69 position: relative;
70 transition-property: transform;
71}
72.swiper-slide-invisible-blank {
73 visibility: hidden;
74}
75/* Auto Height */
76.swiper-container-autoheight,
77.swiper-container-autoheight .swiper-slide {
78 height: auto;
79}
80.swiper-container-autoheight .swiper-wrapper {
81 align-items: flex-start;
82 transition-property: transform, height;
83}
84/* 3D Effects */
85.swiper-container-3d {
86 perspective: 1200px;
87}
88.swiper-container-3d .swiper-wrapper,
89.swiper-container-3d .swiper-slide,
90.swiper-container-3d .swiper-slide-shadow-left,
91.swiper-container-3d .swiper-slide-shadow-right,
92.swiper-container-3d .swiper-slide-shadow-top,
93.swiper-container-3d .swiper-slide-shadow-bottom,
94.swiper-container-3d .swiper-cube-shadow {
95 transform-style: preserve-3d;
96}
97.swiper-container-3d .swiper-slide-shadow-left,
98.swiper-container-3d .swiper-slide-shadow-right,
99.swiper-container-3d .swiper-slide-shadow-top,
100.swiper-container-3d .swiper-slide-shadow-bottom {
101 position: absolute;
102 left: 0;
103 top: 0;
104 width: 100%;
105 height: 100%;
106 pointer-events: none;
107 z-index: 10;
108}
109.swiper-container-3d .swiper-slide-shadow-left {
110 background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
111}
112.swiper-container-3d .swiper-slide-shadow-right {
113 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
114}
115.swiper-container-3d .swiper-slide-shadow-top {
116 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
117}
118.swiper-container-3d .swiper-slide-shadow-bottom {
119 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
120}
121/* CSS Mode */
122.swiper-container-css-mode > .swiper-wrapper {
123 overflow: auto;
124 scrollbar-width: none;
125 /* For Firefox */
126 -ms-overflow-style: none;
127 /* For Internet Explorer and Edge */
128}
129.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
130 display: none;
131}
132.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
133 scroll-snap-align: start start;
134}
135.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
136 scroll-snap-type: x mandatory;
137}
138.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
139 scroll-snap-type: y mandatory;
140}
141:root {
142 --swiper-navigation-size: 44px;
143 /*
144 --swiper-navigation-color: var(--swiper-theme-color);
145 */
146}
147.swiper-button-prev,
148.swiper-button-next {
149 position: absolute;
150 top: 50%;
151 width: calc(var(--swiper-navigation-size) / 44 * 27);
152 height: var(--swiper-navigation-size);
153 margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
154 z-index: 10;
155 cursor: pointer;
156 display: flex;
157 align-items: center;
158 justify-content: center;
159 color: var(--swiper-navigation-color, var(--swiper-theme-color));
160}
161.swiper-button-prev.swiper-button-disabled,
162.swiper-button-next.swiper-button-disabled {
163 opacity: 0.35;
164 cursor: auto;
165 pointer-events: none;
166}
167.swiper-button-prev:after,
168.swiper-button-next:after {
169 font-family: swiper-icons;
170 font-size: var(--swiper-navigation-size);
171 text-transform: none !important;
172 letter-spacing: 0;
173 text-transform: none;
174 font-variant: initial;
175 line-height: 1;
176}
177.swiper-button-prev,
178.swiper-container-rtl .swiper-button-next {
179 left: 10px;
180 right: auto;
181}
182.swiper-button-prev:after,
183.swiper-container-rtl .swiper-button-next:after {
184 content: 'prev';
185}
186.swiper-button-next,
187.swiper-container-rtl .swiper-button-prev {
188 right: 10px;
189 left: auto;
190}
191.swiper-button-next:after,
192.swiper-container-rtl .swiper-button-prev:after {
193 content: 'next';
194}
195.swiper-button-prev.swiper-button-white,
196.swiper-button-next.swiper-button-white {
197 --swiper-navigation-color: #ffffff;
198}
199.swiper-button-prev.swiper-button-black,
200.swiper-button-next.swiper-button-black {
201 --swiper-navigation-color: #000000;
202}
203.swiper-button-lock {
204 display: none;
205}
206:root {
207 /*
208 --swiper-pagination-color: var(--swiper-theme-color);
209 */
210}
211.swiper-pagination {
212 position: absolute;
213 text-align: center;
214 transition: 300ms opacity;
215 transform: translate3d(0, 0, 0);
216 z-index: 10;
217}
218.swiper-pagination.swiper-pagination-hidden {
219 opacity: 0;
220}
221/* Common Styles */
222.swiper-pagination-fraction,
223.swiper-pagination-custom,
224.swiper-container-horizontal > .swiper-pagination-bullets {
225 bottom: 10px;
226 left: 0;
227 width: 100%;
228}
229/* Bullets */
230.swiper-pagination-bullets-dynamic {
231 overflow: hidden;
232 font-size: 0;
233}
234.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
235 transform: scale(0.33);
236 position: relative;
237}
238.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
239 transform: scale(1);
240}
241.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
242 transform: scale(1);
243}
244.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
245 transform: scale(0.66);
246}
247.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
248 transform: scale(0.33);
249}
250.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
251 transform: scale(0.66);
252}
253.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
254 transform: scale(0.33);
255}
256.swiper-pagination-bullet {
257 width: 8px;
258 height: 8px;
259 display: inline-block;
260 border-radius: 50%;
261 background: #000;
262 opacity: 0.2;
263}
264button.swiper-pagination-bullet {
265 border: none;
266 margin: 0;
267 padding: 0;
268 box-shadow: none;
269 -webkit-appearance: none;
270 appearance: none;
271}
272.swiper-pagination-clickable .swiper-pagination-bullet {
273 cursor: pointer;
274}
275.swiper-pagination-bullet-active {
276 opacity: 1;
277 background: var(--swiper-pagination-color, var(--swiper-theme-color));
278}
279.swiper-container-vertical > .swiper-pagination-bullets {
280 right: 10px;
281 top: 50%;
282 transform: translate3d(0px, -50%, 0);
283}
284.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
285 margin: 6px 0;
286 display: block;
287}
288.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
289 top: 50%;
290 transform: translateY(-50%);
291 width: 8px;
292}
293.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
294 display: inline-block;
295 transition: 200ms transform, 200ms top;
296}
297.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
298 margin: 0 4px;
299}
300.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
301 left: 50%;
302 transform: translateX(-50%);
303 white-space: nowrap;
304}
305.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
306 transition: 200ms transform, 200ms left;
307}
308.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
309 transition: 200ms transform, 200ms right;
310}
311/* Progress */
312.swiper-pagination-progressbar {
313 background: rgba(0, 0, 0, 0.25);
314 position: absolute;
315}
316.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
317 background: var(--swiper-pagination-color, var(--swiper-theme-color));
318 position: absolute;
319 left: 0;
320 top: 0;
321 width: 100%;
322 height: 100%;
323 transform: scale(0);
324 transform-origin: left top;
325}
326.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
327 transform-origin: right top;
328}
329.swiper-container-horizontal > .swiper-pagination-progressbar,
330.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
331 width: 100%;
332 height: 4px;
333 left: 0;
334 top: 0;
335}
336.swiper-container-vertical > .swiper-pagination-progressbar,
337.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
338 width: 4px;
339 height: 100%;
340 left: 0;
341 top: 0;
342}
343.swiper-pagination-white {
344 --swiper-pagination-color: #ffffff;
345}
346.swiper-pagination-black {
347 --swiper-pagination-color: #000000;
348}
349.swiper-pagination-lock {
350 display: none;
351}
352/* Scrollbar */
353.swiper-scrollbar {
354 border-radius: 10px;
355 position: relative;
356 -ms-touch-action: none;
357 background: rgba(0, 0, 0, 0.1);
358}
359.swiper-container-horizontal > .swiper-scrollbar {
360 position: absolute;
361 left: 1%;
362 bottom: 3px;
363 z-index: 50;
364 height: 5px;
365 width: 98%;
366}
367.swiper-container-vertical > .swiper-scrollbar {
368 position: absolute;
369 right: 3px;
370 top: 1%;
371 z-index: 50;
372 width: 5px;
373 height: 98%;
374}
375.swiper-scrollbar-drag {
376 height: 100%;
377 width: 100%;
378 position: relative;
379 background: rgba(0, 0, 0, 0.5);
380 border-radius: 10px;
381 left: 0;
382 top: 0;
383}
384.swiper-scrollbar-cursor-drag {
385 cursor: move;
386}
387.swiper-scrollbar-lock {
388 display: none;
389}
390.swiper-zoom-container {
391 width: 100%;
392 height: 100%;
393 display: flex;
394 justify-content: center;
395 align-items: center;
396 text-align: center;
397}
398.swiper-zoom-container > img,
399.swiper-zoom-container > svg,
400.swiper-zoom-container > canvas {
401 max-width: 100%;
402 max-height: 100%;
403 object-fit: contain;
404}
405.swiper-slide-zoomed {
406 cursor: move;
407}
408/* Preloader */
409:root {
410 /*
411 --swiper-preloader-color: var(--swiper-theme-color);
412 */
413}
414.swiper-lazy-preloader {
415 width: 42px;
416 height: 42px;
417 position: absolute;
418 left: 50%;
419 top: 50%;
420 margin-left: -21px;
421 margin-top: -21px;
422 z-index: 10;
423 transform-origin: 50%;
424 animation: swiper-preloader-spin 1s infinite linear;
425 box-sizing: border-box;
426 border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
427 border-radius: 50%;
428 border-top-color: transparent;
429}
430.swiper-lazy-preloader-white {
431 --swiper-preloader-color: #fff;
432}
433.swiper-lazy-preloader-black {
434 --swiper-preloader-color: #000;
435}
436@keyframes swiper-preloader-spin {
437 100% {
438 transform: rotate(360deg);
439 }
440}
441/* a11y */
442.swiper-container .swiper-notification {
443 position: absolute;
444 left: 0;
445 top: 0;
446 pointer-events: none;
447 opacity: 0;
448 z-index: -1000;
449}
450.swiper-container-fade.swiper-container-free-mode .swiper-slide {
451 transition-timing-function: ease-out;
452}
453.swiper-container-fade .swiper-slide {
454 pointer-events: none;
455 transition-property: opacity;
456}
457.swiper-container-fade .swiper-slide .swiper-slide {
458 pointer-events: none;
459}
460.swiper-container-fade .swiper-slide-active,
461.swiper-container-fade .swiper-slide-active .swiper-slide-active {
462 pointer-events: auto;
463}
464.swiper-container-cube {
465 overflow: visible;
466}
467.swiper-container-cube .swiper-slide {
468 pointer-events: none;
469 -webkit-backface-visibility: hidden;
470 backface-visibility: hidden;
471 z-index: 1;
472 visibility: hidden;
473 transform-origin: 0 0;
474 width: 100%;
475 height: 100%;
476}
477.swiper-container-cube .swiper-slide .swiper-slide {
478 pointer-events: none;
479}
480.swiper-container-cube.swiper-container-rtl .swiper-slide {
481 transform-origin: 100% 0;
482}
483.swiper-container-cube .swiper-slide-active,
484.swiper-container-cube .swiper-slide-active .swiper-slide-active {
485 pointer-events: auto;
486}
487.swiper-container-cube .swiper-slide-active,
488.swiper-container-cube .swiper-slide-next,
489.swiper-container-cube .swiper-slide-prev,
490.swiper-container-cube .swiper-slide-next + .swiper-slide {
491 pointer-events: auto;
492 visibility: visible;
493}
494.swiper-container-cube .swiper-slide-shadow-top,
495.swiper-container-cube .swiper-slide-shadow-bottom,
496.swiper-container-cube .swiper-slide-shadow-left,
497.swiper-container-cube .swiper-slide-shadow-right {
498 z-index: 0;
499 -webkit-backface-visibility: hidden;
500 backface-visibility: hidden;
501}
502.swiper-container-cube .swiper-cube-shadow {
503 position: absolute;
504 left: 0;
505 bottom: 0px;
506 width: 100%;
507 height: 100%;
508 opacity: 0.6;
509 z-index: 0;
510}
511.swiper-container-cube .swiper-cube-shadow:before {
512 content: '';
513 background: #000;
514 position: absolute;
515 left: 0;
516 top: 0;
517 bottom: 0;
518 right: 0;
519 filter: blur(50px);
520}
521.swiper-container-flip {
522 overflow: visible;
523}
524.swiper-container-flip .swiper-slide {
525 pointer-events: none;
526 -webkit-backface-visibility: hidden;
527 backface-visibility: hidden;
528 z-index: 1;
529}
530.swiper-container-flip .swiper-slide .swiper-slide {
531 pointer-events: none;
532}
533.swiper-container-flip .swiper-slide-active,
534.swiper-container-flip .swiper-slide-active .swiper-slide-active {
535 pointer-events: auto;
536}
537.swiper-container-flip .swiper-slide-shadow-top,
538.swiper-container-flip .swiper-slide-shadow-bottom,
539.swiper-container-flip .swiper-slide-shadow-left,
540.swiper-container-flip .swiper-slide-shadow-right {
541 z-index: 0;
542 -webkit-backface-visibility: hidden;
543 backface-visibility: hidden;
544}