Няма описание

swiper-bundle.css 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. /* eslint-disable */
  2. /* If a new version is imported from swiper the selectors should all be namespaced with .jp-carousel-overlay
  3. /* to prevent clashes with other plugins that are overrding swiperjs css
  4. */
  5. /**
  6. * Swiper 6.7.0
  7. * Most modern mobile touch slider and framework with hardware accelerated transitions
  8. * https://swiperjs.com
  9. *
  10. * Copyright 2014-2021 Vladimir Kharlampidi
  11. *
  12. * Released under the MIT License
  13. *
  14. * Released on: June 22, 2021
  15. */
  16. @font-face {
  17. font-family: 'swiper-icons';
  18. src: url( 'data:application/font-woff;charset=utf-8;base64, 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' )
  19. format( 'woff' );
  20. font-weight: 400;
  21. font-style: normal;
  22. }
  23. :root {
  24. --swiper-theme-color: #007aff;
  25. }
  26. .jp-carousel-overlay .swiper-container {
  27. margin-left: auto;
  28. margin-right: auto;
  29. position: relative;
  30. overflow: hidden;
  31. list-style: none;
  32. padding: 0;
  33. /* Fix of Webkit flickering */
  34. z-index: 1;
  35. }
  36. .jp-carousel-overlay .swiper-container-vertical > .swiper-wrapper {
  37. flex-direction: column;
  38. }
  39. .jp-carousel-overlay .swiper-wrapper {
  40. position: relative;
  41. width: 100%;
  42. height: 100%;
  43. z-index: 1;
  44. display: flex;
  45. transition-property: transform;
  46. box-sizing: content-box;
  47. }
  48. .jp-carousel-overlay .swiper-container-android .swiper-slide,
  49. .jp-carousel-overlay .swiper-wrapper {
  50. transform: translate3d( 0px, 0, 0 );
  51. }
  52. .jp-carousel-overlay .swiper-container-multirow > .swiper-wrapper {
  53. flex-wrap: wrap;
  54. }
  55. .jp-carousel-overlay .swiper-container-multirow-column > .swiper-wrapper {
  56. flex-wrap: wrap;
  57. flex-direction: column;
  58. }
  59. .jp-carousel-overlay .swiper-container-free-mode > .swiper-wrapper {
  60. transition-timing-function: ease-out;
  61. margin: 0 auto;
  62. }
  63. .jp-carousel-overlay .swiper-container-pointer-events {
  64. touch-action: pan-y;
  65. }
  66. .jp-carousel-overlay .swiper-container-pointer-events.swiper-container-vertical {
  67. touch-action: pan-x;
  68. }
  69. .jp-carousel-overlay .swiper-slide {
  70. flex-shrink: 0;
  71. width: 100%;
  72. height: 100%;
  73. position: relative;
  74. transition-property: transform;
  75. }
  76. .jp-carousel-overlay .swiper-slide-invisible-blank {
  77. visibility: hidden;
  78. }
  79. /* Auto Height */
  80. .jp-carousel-overlay .swiper-container-autoheight,
  81. .jp-carousel-overlay .swiper-container-autoheight .swiper-slide {
  82. height: auto;
  83. }
  84. .jp-carousel-overlay .swiper-container-autoheight .swiper-wrapper {
  85. align-items: flex-start;
  86. transition-property: transform, height;
  87. }
  88. /* 3D Effects */
  89. .jp-carousel-overlay .swiper-container-3d {
  90. perspective: 1200px;
  91. }
  92. .jp-carousel-overlay .swiper-container-3d .swiper-wrapper,
  93. .jp-carousel-overlay .swiper-container-3d .swiper-slide,
  94. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-left,
  95. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-right,
  96. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-top,
  97. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-bottom,
  98. .jp-carousel-overlay .swiper-container-3d .swiper-cube-shadow {
  99. transform-style: preserve-3d;
  100. }
  101. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-left,
  102. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-right,
  103. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-top,
  104. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-bottom {
  105. position: absolute;
  106. left: 0;
  107. top: 0;
  108. width: 100%;
  109. height: 100%;
  110. pointer-events: none;
  111. z-index: 10;
  112. }
  113. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-left {
  114. background-image: linear-gradient( to left, rgba( 0, 0, 0, 0.5 ), rgba( 0, 0, 0, 0 ) );
  115. }
  116. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-right {
  117. background-image: linear-gradient( to right, rgba( 0, 0, 0, 0.5 ), rgba( 0, 0, 0, 0 ) );
  118. }
  119. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-top {
  120. background-image: linear-gradient( to top, rgba( 0, 0, 0, 0.5 ), rgba( 0, 0, 0, 0 ) );
  121. }
  122. .jp-carousel-overlay .swiper-container-3d .swiper-slide-shadow-bottom {
  123. background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0.5 ), rgba( 0, 0, 0, 0 ) );
  124. }
  125. /* CSS Mode */
  126. .jp-carousel-overlay .swiper-container-css-mode > .swiper-wrapper {
  127. overflow: auto;
  128. scrollbar-width: none;
  129. /* For Firefox */
  130. -ms-overflow-style: none;
  131. /* For Internet Explorer and Edge */
  132. }
  133. .jp-carousel-overlay .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  134. display: none;
  135. }
  136. .jp-carousel-overlay .swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  137. scroll-snap-align: start start;
  138. }
  139. .jp-carousel-overlay .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  140. scroll-snap-type: x mandatory;
  141. }
  142. .jp-carousel-overlay .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  143. scroll-snap-type: y mandatory;
  144. }
  145. :root {
  146. --swiper-navigation-size: 44px;
  147. /*
  148. --swiper-navigation-color: var(--swiper-theme-color);
  149. */
  150. }
  151. .jp-carousel-overlay .swiper-button-prev,
  152. .jp-carousel-overlay .swiper-button-next {
  153. position: absolute;
  154. top: 50%;
  155. width: calc( var( --swiper-navigation-size ) / 44 * 27 );
  156. height: var( --swiper-navigation-size );
  157. margin-top: calc( 0px - ( var( --swiper-navigation-size ) / 2 ) );
  158. z-index: 10;
  159. cursor: pointer;
  160. display: flex;
  161. align-items: center;
  162. justify-content: center;
  163. color: var( --swiper-navigation-color, var( --swiper-theme-color ) );
  164. }
  165. .jp-carousel-overlay .swiper-button-prev.swiper-button-disabled,
  166. .jp-carousel-overlay .swiper-button-next.swiper-button-disabled {
  167. opacity: 0.35;
  168. cursor: auto;
  169. pointer-events: none;
  170. }
  171. .jp-carousel-overlay .swiper-button-prev:after,
  172. .jp-carousel-overlay .swiper-button-next:after {
  173. font-family: swiper-icons;
  174. font-size: var( --swiper-navigation-size );
  175. text-transform: none !important;
  176. letter-spacing: 0;
  177. text-transform: none;
  178. font-variant: initial;
  179. line-height: 1;
  180. }
  181. .jp-carousel-overlay .swiper-button-prev,
  182. .jp-carousel-overlay .swiper-container-rtl .swiper-button-next {
  183. left: 10px;
  184. right: auto;
  185. }
  186. .jp-carousel-overlay .swiper-button-prev:after,
  187. .jp-carousel-overlay .swiper-container-rtl .swiper-button-next:after {
  188. content: 'prev';
  189. }
  190. .jp-carousel-overlay .swiper-button-next,
  191. .jp-carousel-overlay .swiper-container-rtl .swiper-button-prev {
  192. right: 10px;
  193. left: auto;
  194. }
  195. .jp-carousel-overlay .swiper-button-next:after,
  196. .jp-carousel-overlay .swiper-container-rtl .swiper-button-prev:after {
  197. content: 'next';
  198. }
  199. .jp-carousel-overlay .swiper-button-prev.swiper-button-white,
  200. .jp-carousel-overlay .swiper-button-next.swiper-button-white {
  201. --swiper-navigation-color: #ffffff;
  202. }
  203. .jp-carousel-overlay .swiper-button-prev.swiper-button-black,
  204. .jp-carousel-overlay .swiper-button-next.swiper-button-black {
  205. --swiper-navigation-color: #000000;
  206. }
  207. .jp-carousel-overlay .swiper-button-lock {
  208. display: none;
  209. }
  210. :root {
  211. /*
  212. --swiper-pagination-color: var(--swiper-theme-color);
  213. */
  214. }
  215. .jp-carousel-overlay .swiper-pagination {
  216. position: absolute;
  217. text-align: center;
  218. transition: 300ms opacity;
  219. transform: translate3d( 0, 0, 0 );
  220. z-index: 10;
  221. }
  222. .jp-carousel-overlay .swiper-pagination.swiper-pagination-hidden {
  223. opacity: 0;
  224. }
  225. /* Common Styles */
  226. .jp-carousel-overlay .swiper-pagination-fraction,
  227. .jp-carousel-overlay .swiper-pagination-custom,
  228. .jp-carousel-overlay .swiper-container-horizontal > .swiper-pagination-bullets {
  229. bottom: 10px;
  230. left: 0;
  231. width: 100%;
  232. }
  233. /* Bullets */
  234. .jp-carousel-overlay .swiper-pagination-bullets-dynamic {
  235. overflow: hidden;
  236. font-size: 0;
  237. }
  238. .jp-carousel-overlay .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  239. transform: scale( 0.33 );
  240. position: relative;
  241. }
  242. .jp-carousel-overlay .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  243. transform: scale( 1 );
  244. }
  245. .jp-carousel-overlay .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  246. transform: scale( 1 );
  247. }
  248. .jp-carousel-overlay .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  249. transform: scale( 0.66 );
  250. }
  251. .jp-carousel-overlay .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  252. transform: scale( 0.33 );
  253. }
  254. .jp-carousel-overlay .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  255. transform: scale( 0.66 );
  256. }
  257. .jp-carousel-overlay .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  258. transform: scale( 0.33 );
  259. }
  260. .jp-carousel-overlay .swiper-pagination-bullet {
  261. width: 8px;
  262. height: 8px;
  263. display: inline-block;
  264. border-radius: 50%;
  265. background: #000;
  266. opacity: 0.2;
  267. }
  268. .jp-carousel-overlay button.swiper-pagination-bullet {
  269. border: none;
  270. margin: 0;
  271. padding: 0;
  272. box-shadow: none;
  273. -webkit-appearance: none;
  274. appearance: none;
  275. }
  276. .jp-carousel-overlay .swiper-pagination-clickable .swiper-pagination-bullet {
  277. cursor: pointer;
  278. }
  279. .jp-carousel-overlay .swiper-pagination-bullet-active {
  280. opacity: 1;
  281. background: var( --swiper-pagination-color, var( --swiper-theme-color ) );
  282. }
  283. .jp-carousel-overlay .swiper-container-vertical > .swiper-pagination-bullets {
  284. right: 10px;
  285. top: 50%;
  286. transform: translate3d( 0px, -50%, 0 );
  287. }
  288. .jp-carousel-overlay
  289. .swiper-container-vertical
  290. > .swiper-pagination-bullets
  291. .swiper-pagination-bullet {
  292. margin: 6px 0;
  293. display: block;
  294. }
  295. .jp-carousel-overlay
  296. .swiper-container-vertical
  297. > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  298. top: 50%;
  299. transform: translateY( -50% );
  300. width: 8px;
  301. }
  302. .jp-carousel-overlay
  303. .swiper-container-vertical
  304. > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  305. .swiper-pagination-bullet {
  306. display: inline-block;
  307. transition: 200ms transform, 200ms top;
  308. }
  309. .jp-carousel-overlay
  310. .swiper-container-horizontal
  311. > .swiper-pagination-bullets
  312. .swiper-pagination-bullet {
  313. margin: 0 4px;
  314. }
  315. .jp-carousel-overlay
  316. .swiper-container-horizontal
  317. > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  318. left: 50%;
  319. transform: translateX( -50% );
  320. white-space: nowrap;
  321. }
  322. .jp-carousel-overlay
  323. .swiper-container-horizontal
  324. > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  325. .swiper-pagination-bullet {
  326. transition: 200ms transform, 200ms left;
  327. }
  328. .jp-carousel-overlay
  329. .swiper-container-horizontal.swiper-container-rtl
  330. > .swiper-pagination-bullets-dynamic
  331. .swiper-pagination-bullet {
  332. transition: 200ms transform, 200ms right;
  333. }
  334. /* Progress */
  335. .jp-carousel-overlay .swiper-pagination-progressbar {
  336. background: rgba( 0, 0, 0, 0.25 );
  337. position: absolute;
  338. }
  339. .jp-carousel-overlay .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  340. background: var( --swiper-pagination-color, var( --swiper-theme-color ) );
  341. position: absolute;
  342. left: 0;
  343. top: 0;
  344. width: 100%;
  345. height: 100%;
  346. transform: scale( 0 );
  347. transform-origin: left top;
  348. }
  349. .jp-carousel-overlay
  350. .swiper-container-rtl
  351. .swiper-pagination-progressbar
  352. .swiper-pagination-progressbar-fill {
  353. transform-origin: right top;
  354. }
  355. .jp-carousel-overlay .swiper-container-horizontal > .swiper-pagination-progressbar,
  356. .jp-carousel-overlay
  357. .swiper-container-vertical
  358. > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  359. width: 100%;
  360. height: 4px;
  361. left: 0;
  362. top: 0;
  363. }
  364. .jp-carousel-overlay .swiper-container-vertical > .swiper-pagination-progressbar,
  365. .jp-carousel-overlay
  366. .swiper-container-horizontal
  367. > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  368. width: 4px;
  369. height: 100%;
  370. left: 0;
  371. top: 0;
  372. }
  373. .jp-carousel-overlay .swiper-pagination-white {
  374. --swiper-pagination-color: #ffffff;
  375. }
  376. .jp-carousel-overlay .swiper-pagination-black {
  377. --swiper-pagination-color: #000000;
  378. }
  379. .jp-carousel-overlay .swiper-pagination-lock {
  380. display: none;
  381. }
  382. .jp-carousel-overlay .swiper-zoom-container {
  383. width: 100%;
  384. height: 100%;
  385. display: flex;
  386. justify-content: center;
  387. align-items: center;
  388. text-align: center;
  389. }
  390. .jp-carousel-overlay .swiper-zoom-container > img,
  391. .jp-carousel-overlay .swiper-zoom-container > svg,
  392. .jp-carousel-overlay .swiper-zoom-container > canvas {
  393. max-width: 100%;
  394. max-height: 100%;
  395. object-fit: contain;
  396. }
  397. .jp-carousel-overlay .swiper-slide-zoomed {
  398. cursor: move;
  399. }
  400. /* a11y */
  401. .jp-carousel-overlay .swiper-container .swiper-notification {
  402. position: absolute;
  403. left: 0;
  404. top: 0;
  405. pointer-events: none;
  406. opacity: 0;
  407. z-index: -1000;
  408. }