index.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
  2. /* stylelint-disable no-duplicate-selectors */
  3. .ant-carousel {
  4. box-sizing: border-box;
  5. margin: 0;
  6. padding: 0;
  7. color: rgba(0, 0, 0, 0.85);
  8. font-size: 14px;
  9. font-variant: tabular-nums;
  10. line-height: 1.5715;
  11. list-style: none;
  12. font-feature-settings: 'tnum';
  13. }
  14. .ant-carousel .slick-slider {
  15. position: relative;
  16. display: block;
  17. box-sizing: border-box;
  18. touch-action: pan-y;
  19. -webkit-touch-callout: none;
  20. -webkit-tap-highlight-color: transparent;
  21. }
  22. .ant-carousel .slick-list {
  23. position: relative;
  24. display: block;
  25. margin: 0;
  26. padding: 0;
  27. overflow: hidden;
  28. }
  29. .ant-carousel .slick-list:focus {
  30. outline: none;
  31. }
  32. .ant-carousel .slick-list.dragging {
  33. cursor: pointer;
  34. }
  35. .ant-carousel .slick-list .slick-slide {
  36. pointer-events: none;
  37. }
  38. .ant-carousel .slick-list .slick-slide input.ant-radio-input,
  39. .ant-carousel .slick-list .slick-slide input.ant-checkbox-input {
  40. visibility: hidden;
  41. }
  42. .ant-carousel .slick-list .slick-slide.slick-active {
  43. pointer-events: auto;
  44. }
  45. .ant-carousel .slick-list .slick-slide.slick-active input.ant-radio-input,
  46. .ant-carousel .slick-list .slick-slide.slick-active input.ant-checkbox-input {
  47. visibility: visible;
  48. }
  49. .ant-carousel .slick-list .slick-slide > div > div {
  50. vertical-align: bottom;
  51. }
  52. .ant-carousel .slick-slider .slick-track,
  53. .ant-carousel .slick-slider .slick-list {
  54. transform: translate3d(0, 0, 0);
  55. touch-action: pan-y;
  56. }
  57. .ant-carousel .slick-track {
  58. position: relative;
  59. top: 0;
  60. left: 0;
  61. display: block;
  62. }
  63. .ant-carousel .slick-track::before,
  64. .ant-carousel .slick-track::after {
  65. display: table;
  66. content: '';
  67. }
  68. .ant-carousel .slick-track::after {
  69. clear: both;
  70. }
  71. .slick-loading .ant-carousel .slick-track {
  72. visibility: hidden;
  73. }
  74. .ant-carousel .slick-slide {
  75. display: none;
  76. float: left;
  77. height: 100%;
  78. min-height: 1px;
  79. }
  80. .ant-carousel .slick-slide img {
  81. display: block;
  82. }
  83. .ant-carousel .slick-slide.slick-loading img {
  84. display: none;
  85. }
  86. .ant-carousel .slick-slide.dragging img {
  87. pointer-events: none;
  88. }
  89. .ant-carousel .slick-initialized .slick-slide {
  90. display: block;
  91. }
  92. .ant-carousel .slick-loading .slick-slide {
  93. visibility: hidden;
  94. }
  95. .ant-carousel .slick-vertical .slick-slide {
  96. display: block;
  97. height: auto;
  98. }
  99. .ant-carousel .slick-arrow.slick-hidden {
  100. display: none;
  101. }
  102. .ant-carousel .slick-prev,
  103. .ant-carousel .slick-next {
  104. position: absolute;
  105. top: 50%;
  106. display: block;
  107. width: 20px;
  108. height: 20px;
  109. margin-top: -10px;
  110. padding: 0;
  111. color: transparent;
  112. font-size: 0;
  113. line-height: 0;
  114. background: transparent;
  115. border: 0;
  116. outline: none;
  117. cursor: pointer;
  118. }
  119. .ant-carousel .slick-prev:hover,
  120. .ant-carousel .slick-next:hover,
  121. .ant-carousel .slick-prev:focus,
  122. .ant-carousel .slick-next:focus {
  123. color: transparent;
  124. background: transparent;
  125. outline: none;
  126. }
  127. .ant-carousel .slick-prev:hover::before,
  128. .ant-carousel .slick-next:hover::before,
  129. .ant-carousel .slick-prev:focus::before,
  130. .ant-carousel .slick-next:focus::before {
  131. opacity: 1;
  132. }
  133. .ant-carousel .slick-prev.slick-disabled::before,
  134. .ant-carousel .slick-next.slick-disabled::before {
  135. opacity: 0.25;
  136. }
  137. .ant-carousel .slick-prev {
  138. left: -25px;
  139. }
  140. .ant-carousel .slick-prev::before {
  141. content: '←';
  142. }
  143. .ant-carousel .slick-next {
  144. right: -25px;
  145. }
  146. .ant-carousel .slick-next::before {
  147. content: '→';
  148. }
  149. .ant-carousel .slick-dots {
  150. position: absolute;
  151. right: 0;
  152. bottom: 0;
  153. left: 0;
  154. z-index: 15;
  155. display: flex !important;
  156. justify-content: center;
  157. margin-right: 15%;
  158. margin-bottom: 0;
  159. margin-left: 15%;
  160. padding-left: 0;
  161. list-style: none;
  162. }
  163. .ant-carousel .slick-dots-bottom {
  164. bottom: 12px;
  165. }
  166. .ant-carousel .slick-dots-top {
  167. top: 12px;
  168. bottom: auto;
  169. }
  170. .ant-carousel .slick-dots li {
  171. position: relative;
  172. display: inline-block;
  173. flex: 0 1 auto;
  174. box-sizing: content-box;
  175. width: 16px;
  176. height: 3px;
  177. margin: 0 4px;
  178. padding: 0;
  179. text-align: center;
  180. text-indent: -999px;
  181. vertical-align: top;
  182. transition: all 0.5s;
  183. }
  184. .ant-carousel .slick-dots li button {
  185. position: relative;
  186. display: block;
  187. width: 100%;
  188. height: 3px;
  189. padding: 0;
  190. color: transparent;
  191. font-size: 0;
  192. background: #fff;
  193. border: 0;
  194. border-radius: 1px;
  195. outline: none;
  196. cursor: pointer;
  197. opacity: 0.3;
  198. transition: all 0.5s;
  199. }
  200. .ant-carousel .slick-dots li button:hover,
  201. .ant-carousel .slick-dots li button:focus {
  202. opacity: 0.75;
  203. }
  204. .ant-carousel .slick-dots li button::after {
  205. position: absolute;
  206. top: -4px;
  207. right: -4px;
  208. bottom: -4px;
  209. left: -4px;
  210. content: '';
  211. }
  212. .ant-carousel .slick-dots li.slick-active {
  213. width: 24px;
  214. }
  215. .ant-carousel .slick-dots li.slick-active button {
  216. background: #fff;
  217. opacity: 1;
  218. }
  219. .ant-carousel .slick-dots li.slick-active:hover,
  220. .ant-carousel .slick-dots li.slick-active:focus {
  221. opacity: 1;
  222. }
  223. .ant-carousel-vertical .slick-dots {
  224. top: 50%;
  225. bottom: auto;
  226. flex-direction: column;
  227. width: 3px;
  228. height: auto;
  229. margin: 0;
  230. transform: translateY(-50%);
  231. }
  232. .ant-carousel-vertical .slick-dots-left {
  233. right: auto;
  234. left: 12px;
  235. }
  236. .ant-carousel-vertical .slick-dots-right {
  237. right: 12px;
  238. left: auto;
  239. }
  240. .ant-carousel-vertical .slick-dots li {
  241. width: 3px;
  242. height: 16px;
  243. margin: 4px 0;
  244. vertical-align: baseline;
  245. }
  246. .ant-carousel-vertical .slick-dots li button {
  247. width: 3px;
  248. height: 16px;
  249. }
  250. .ant-carousel-vertical .slick-dots li.slick-active {
  251. width: 3px;
  252. height: 24px;
  253. }
  254. .ant-carousel-vertical .slick-dots li.slick-active button {
  255. width: 3px;
  256. height: 24px;
  257. }
  258. .ant-carousel-rtl {
  259. direction: rtl;
  260. }
  261. .ant-carousel-rtl .ant-carousel .slick-track {
  262. right: 0;
  263. left: auto;
  264. }
  265. .ant-carousel-rtl .ant-carousel .slick-prev {
  266. right: -25px;
  267. left: auto;
  268. }
  269. .ant-carousel-rtl .ant-carousel .slick-prev::before {
  270. content: '→';
  271. }
  272. .ant-carousel-rtl .ant-carousel .slick-next {
  273. right: auto;
  274. left: -25px;
  275. }
  276. .ant-carousel-rtl .ant-carousel .slick-next::before {
  277. content: '←';
  278. }
  279. .ant-carousel-rtl.ant-carousel .slick-dots {
  280. flex-direction: row-reverse;
  281. }
  282. .ant-carousel-rtl.ant-carousel-vertical .slick-dots {
  283. flex-direction: column;
  284. }
  285. nz-carousel {
  286. position: relative;
  287. display: block;
  288. width: 100%;
  289. height: 100%;
  290. overflow: hidden;
  291. }
  292. .slick-dots {
  293. display: block;
  294. }
  295. .slick-track {
  296. opacity: 1;
  297. }