UNPKG

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