ext-component-swiper.css 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. /*=========================================================================================
  2. File Name: ext-component-swiper.scss
  3. Description: swiper plugin scss.
  4. ----------------------------------------------------------------------------------------
  5. Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  6. Author: PIXINVENT
  7. Author URL: http://www.themeforest.net/user/pixinvent
  8. ==========================================================================================*/
  9. /* Swiper css */
  10. /* ---------- */
  11. /* swiper slide shadow */
  12. .swiper-container .swiper-shadow {
  13. box-shadow: 2px 8px 10px 0 rgba(25, 42, 70, 0.13) !important; }
  14. .swiper-pagination .swiper-pagination-bullet:focus {
  15. outline: none; }
  16. .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  17. background-color: #7367f0; }
  18. .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  19. background-color: #7367f0; }
  20. .swiper-centered-slides.swiper-container .swiper-slide {
  21. text-align: center;
  22. font-weight: 500;
  23. background-color: #fff;
  24. height: auto;
  25. width: auto !important;
  26. padding: 2rem 5.5rem;
  27. cursor: pointer; }
  28. .swiper-centered-slides.swiper-container .swiper-slide.swiper-slide-active {
  29. border: 2px solid #7367f0; }
  30. .swiper-centered-slides.swiper-container .swiper-slide.swiper-slide-active i,
  31. .swiper-centered-slides.swiper-container .swiper-slide.swiper-slide-active svg {
  32. color: #7367f0; }
  33. .swiper-centered-slides .swiper-button-next:after {
  34. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); }
  35. .swiper-centered-slides .swiper-button-prev:after {
  36. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"); }
  37. .swiper-centered-slides .swiper-button-next,
  38. .swiper-centered-slides .swiper-button-prev {
  39. height: 40px !important;
  40. width: 40px !important; }
  41. .swiper-centered-slides .swiper-button-next:after,
  42. .swiper-centered-slides .swiper-button-prev:after {
  43. border-radius: 50%;
  44. background-color: #7367f0;
  45. box-shadow: 0 2px 4px 0 rgba(34, 41, 47, 0.5) !important;
  46. background-size: 24px !important;
  47. height: 40px !important;
  48. width: 40px !important; }
  49. .swiper-centered-slides.swiper-container-rtl .swiper-button-next:after {
  50. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"); }
  51. .swiper-centered-slides.swiper-container-rtl .swiper-button-prev:after {
  52. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); }
  53. .swiper-centered-slides-2.swiper-container .swiper-slide {
  54. font-weight: 500;
  55. background-color: #f2f4f4;
  56. height: auto;
  57. width: auto !important;
  58. cursor: pointer; }
  59. .swiper-centered-slides-2.swiper-container .swiper-slide.swiper-slide-active {
  60. color: #fff;
  61. background-color: #7367f0 !important;
  62. box-shadow: 0 3px 6px 0 rgba(115, 103, 240, 0.5) !important; }
  63. /* cube effect */
  64. .swiper-cube-effect.swiper-container {
  65. width: 300px;
  66. left: 50%;
  67. margin-left: -150px;
  68. margin-top: -12px; }
  69. /* swiper coverflow slide width */
  70. .swiper-coverflow.swiper-container .swiper-slide {
  71. width: 300px; }
  72. .gallery-thumbs {
  73. padding: 10px 0;
  74. background: #22292f; }
  75. .gallery-thumbs .swiper-slide {
  76. opacity: 0.4; }
  77. .gallery-thumbs .swiper-slide-thumb-active {
  78. opacity: 1; }
  79. .swiper-parallax .swiper-slide {
  80. padding: 2.67rem 4rem; }
  81. .swiper-parallax .swiper-slide .title {
  82. font-size: 1.07rem;
  83. padding: 0.5rem 0; }
  84. .swiper-parallax .swiper-slide .text {
  85. font-size: 1rem; }
  86. .swiper-parallax .parallax-bg {
  87. position: absolute;
  88. width: 130%; }
  89. .swiper-virtual.swiper-container {
  90. height: 300px; }
  91. .swiper-virtual.swiper-container .swiper-slide {
  92. /* virtual slides */
  93. font-size: 1.5rem;
  94. background-color: #eee;
  95. display: flex;
  96. justify-content: center;
  97. align-items: center; }
  98. .swiper-button-prev,
  99. .swiper-button-next,
  100. .swiper-container-rtl .swiper-button-prev,
  101. .swiper-container-rtl .swiper-button-next {
  102. background-image: none;
  103. color: #fff;
  104. width: 38px;
  105. font-size: 2rem; }
  106. .swiper-button-prev:focus,
  107. .swiper-button-next:focus,
  108. .swiper-container-rtl .swiper-button-prev:focus,
  109. .swiper-container-rtl .swiper-button-next:focus {
  110. outline: none; }
  111. .swiper-button-prev:after {
  112. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237367f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
  113. background-repeat: no-repeat;
  114. background-position: center;
  115. background-size: 44px;
  116. color: #6e6b7b;
  117. width: 44px;
  118. height: 44px;
  119. content: '';
  120. padding-right: 1px; }
  121. .swiper-button-next:after {
  122. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237367f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  123. background-repeat: no-repeat;
  124. background-position: center;
  125. background-size: 44px;
  126. color: #6e6b7b;
  127. width: 44px;
  128. height: 44px;
  129. content: '';
  130. padding-right: 2px; }
  131. .swiper-container-rtl .swiper-button-prev:after {
  132. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237367f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  133. background-repeat: no-repeat;
  134. background-position: center;
  135. background-size: 44px;
  136. color: #6e6b7b;
  137. width: 44px;
  138. height: 44px;
  139. content: ''; }
  140. .swiper-container-rtl .swiper-button-next:after {
  141. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237367f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
  142. background-repeat: no-repeat;
  143. background-position: center;
  144. background-size: 44px;
  145. color: #6e6b7b;
  146. width: 44px;
  147. height: 44px;
  148. content: ''; }
  149. @media only screen and (max-width: 768px) {
  150. .swiper-button-prev {
  151. font-size: 1.286rem;
  152. top: 55%; }
  153. .swiper-button-prev:after {
  154. height: 28px;
  155. width: 28px;
  156. background-size: 24px; }
  157. .swiper-button-next {
  158. font-size: 1.286rem;
  159. top: 55%; }
  160. .swiper-button-next:after {
  161. background-size: 24px; }
  162. .swiper-centered-slides .swiper-button-next:after,
  163. .swiper-centered-slides .swiper-button-prev:after {
  164. height: 28px;
  165. width: 28px;
  166. background-size: 18px; }
  167. .swiper-parallax .swiper-slide {
  168. padding: 1rem 1.2rem; }
  169. .swiper-parallax img {
  170. height: 100% !important; } }
  171. @media only screen and (max-width: 576px) {
  172. .swiper-centered-slides.swiper-container .swiper-slide {
  173. padding: 1.6rem 2.5rem; }
  174. .swiper-centered-slides.swiper-container .swiper-slide i,
  175. .swiper-centered-slides.swiper-container .swiper-slide svg {
  176. height: 1.07rem !important;
  177. width: 1.07rem !important;
  178. font-size: 1.07rem !important; }
  179. .swiper-cube-effect.swiper-container {
  180. width: 150px;
  181. left: 70%; }
  182. .swiper-parallax .swiper-slide {
  183. padding: 1rem 1.3rem; }
  184. .swiper-virtual.swiper-container .swiper-slide {
  185. font-size: 1rem; } }
  186. .dark-layout .swiper-container:not(.swiper-parallax) .swiper-slide {
  187. background-color: #161d31; }
  188. .dark-layout .swiper-container.swiper-centered-slides .swiper-slide {
  189. background-color: #283046; }
  190. .dark-layout .swiper-container.swiper-parallax .swiper-slide * {
  191. color: #6e6b7b; }