UNPKG

16.1 kBCSSView Raw
1/**
2 * Swiper 6.8.4
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: August 23, 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:only-child {
276 display: none !important;
277}
278.swiper-pagination-bullet-active {
279 opacity: 1;
280 background: var(--swiper-pagination-color, var(--swiper-theme-color));
281}
282.swiper-container-vertical > .swiper-pagination-bullets {
283 right: 10px;
284 top: 50%;
285 transform: translate3d(0px, -50%, 0);
286}
287.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
288 margin: 6px 0;
289 display: block;
290}
291.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
292 top: 50%;
293 transform: translateY(-50%);
294 width: 8px;
295}
296.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
297 display: inline-block;
298 transition: 200ms transform, 200ms top;
299}
300.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
301 margin: 0 4px;
302}
303.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
304 left: 50%;
305 transform: translateX(-50%);
306 white-space: nowrap;
307}
308.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
309 transition: 200ms transform, 200ms left;
310}
311.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
312 transition: 200ms transform, 200ms right;
313}
314/* Progress */
315.swiper-pagination-progressbar {
316 background: rgba(0, 0, 0, 0.25);
317 position: absolute;
318}
319.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
320 background: var(--swiper-pagination-color, var(--swiper-theme-color));
321 position: absolute;
322 left: 0;
323 top: 0;
324 width: 100%;
325 height: 100%;
326 transform: scale(0);
327 transform-origin: left top;
328}
329.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
330 transform-origin: right top;
331}
332.swiper-container-horizontal > .swiper-pagination-progressbar,
333.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
334 width: 100%;
335 height: 4px;
336 left: 0;
337 top: 0;
338}
339.swiper-container-vertical > .swiper-pagination-progressbar,
340.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
341 width: 4px;
342 height: 100%;
343 left: 0;
344 top: 0;
345}
346.swiper-pagination-white {
347 --swiper-pagination-color: #ffffff;
348}
349.swiper-pagination-black {
350 --swiper-pagination-color: #000000;
351}
352.swiper-pagination-lock {
353 display: none;
354}
355/* Scrollbar */
356.swiper-scrollbar {
357 border-radius: 10px;
358 position: relative;
359 -ms-touch-action: none;
360 background: rgba(0, 0, 0, 0.1);
361}
362.swiper-container-horizontal > .swiper-scrollbar {
363 position: absolute;
364 left: 1%;
365 bottom: 3px;
366 z-index: 50;
367 height: 5px;
368 width: 98%;
369}
370.swiper-container-vertical > .swiper-scrollbar {
371 position: absolute;
372 right: 3px;
373 top: 1%;
374 z-index: 50;
375 width: 5px;
376 height: 98%;
377}
378.swiper-scrollbar-drag {
379 height: 100%;
380 width: 100%;
381 position: relative;
382 background: rgba(0, 0, 0, 0.5);
383 border-radius: 10px;
384 left: 0;
385 top: 0;
386}
387.swiper-scrollbar-cursor-drag {
388 cursor: move;
389}
390.swiper-scrollbar-lock {
391 display: none;
392}
393.swiper-zoom-container {
394 width: 100%;
395 height: 100%;
396 display: flex;
397 justify-content: center;
398 align-items: center;
399 text-align: center;
400}
401.swiper-zoom-container > img,
402.swiper-zoom-container > svg,
403.swiper-zoom-container > canvas {
404 max-width: 100%;
405 max-height: 100%;
406 object-fit: contain;
407}
408.swiper-slide-zoomed {
409 cursor: move;
410}
411/* Preloader */
412:root {
413 /*
414 --swiper-preloader-color: var(--swiper-theme-color);
415 */
416}
417.swiper-lazy-preloader {
418 width: 42px;
419 height: 42px;
420 position: absolute;
421 left: 50%;
422 top: 50%;
423 margin-left: -21px;
424 margin-top: -21px;
425 z-index: 10;
426 transform-origin: 50%;
427 animation: swiper-preloader-spin 1s infinite linear;
428 box-sizing: border-box;
429 border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
430 border-radius: 50%;
431 border-top-color: transparent;
432}
433.swiper-lazy-preloader-white {
434 --swiper-preloader-color: #fff;
435}
436.swiper-lazy-preloader-black {
437 --swiper-preloader-color: #000;
438}
439@keyframes swiper-preloader-spin {
440 100% {
441 transform: rotate(360deg);
442 }
443}
444/* a11y */
445.swiper-container .swiper-notification {
446 position: absolute;
447 left: 0;
448 top: 0;
449 pointer-events: none;
450 opacity: 0;
451 z-index: -1000;
452}
453.swiper-container-fade.swiper-container-free-mode .swiper-slide {
454 transition-timing-function: ease-out;
455}
456.swiper-container-fade .swiper-slide {
457 pointer-events: none;
458 transition-property: opacity;
459}
460.swiper-container-fade .swiper-slide .swiper-slide {
461 pointer-events: none;
462}
463.swiper-container-fade .swiper-slide-active,
464.swiper-container-fade .swiper-slide-active .swiper-slide-active {
465 pointer-events: auto;
466}
467.swiper-container-cube {
468 overflow: visible;
469}
470.swiper-container-cube .swiper-slide {
471 pointer-events: none;
472 -webkit-backface-visibility: hidden;
473 backface-visibility: hidden;
474 z-index: 1;
475 visibility: hidden;
476 transform-origin: 0 0;
477 width: 100%;
478 height: 100%;
479}
480.swiper-container-cube .swiper-slide .swiper-slide {
481 pointer-events: none;
482}
483.swiper-container-cube.swiper-container-rtl .swiper-slide {
484 transform-origin: 100% 0;
485}
486.swiper-container-cube .swiper-slide-active,
487.swiper-container-cube .swiper-slide-active .swiper-slide-active {
488 pointer-events: auto;
489}
490.swiper-container-cube .swiper-slide-active,
491.swiper-container-cube .swiper-slide-next,
492.swiper-container-cube .swiper-slide-prev,
493.swiper-container-cube .swiper-slide-next + .swiper-slide {
494 pointer-events: auto;
495 visibility: visible;
496}
497.swiper-container-cube .swiper-slide-shadow-top,
498.swiper-container-cube .swiper-slide-shadow-bottom,
499.swiper-container-cube .swiper-slide-shadow-left,
500.swiper-container-cube .swiper-slide-shadow-right {
501 z-index: 0;
502 -webkit-backface-visibility: hidden;
503 backface-visibility: hidden;
504}
505.swiper-container-cube .swiper-cube-shadow {
506 position: absolute;
507 left: 0;
508 bottom: 0px;
509 width: 100%;
510 height: 100%;
511 opacity: 0.6;
512 z-index: 0;
513}
514.swiper-container-cube .swiper-cube-shadow:before {
515 content: '';
516 background: #000;
517 position: absolute;
518 left: 0;
519 top: 0;
520 bottom: 0;
521 right: 0;
522 filter: blur(50px);
523}
524.swiper-container-flip {
525 overflow: visible;
526}
527.swiper-container-flip .swiper-slide {
528 pointer-events: none;
529 -webkit-backface-visibility: hidden;
530 backface-visibility: hidden;
531 z-index: 1;
532}
533.swiper-container-flip .swiper-slide .swiper-slide {
534 pointer-events: none;
535}
536.swiper-container-flip .swiper-slide-active,
537.swiper-container-flip .swiper-slide-active .swiper-slide-active {
538 pointer-events: auto;
539}
540.swiper-container-flip .swiper-slide-shadow-top,
541.swiper-container-flip .swiper-slide-shadow-bottom,
542.swiper-container-flip .swiper-slide-shadow-left,
543.swiper-container-flip .swiper-slide-shadow-right {
544 z-index: 0;
545 -webkit-backface-visibility: hidden;
546 backface-visibility: hidden;
547}