index.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  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-skeleton {
  4. display: table;
  5. width: 100%;
  6. }
  7. .ant-skeleton-header {
  8. display: table-cell;
  9. padding-right: 16px;
  10. vertical-align: top;
  11. }
  12. .ant-skeleton-header .ant-skeleton-avatar {
  13. display: inline-block;
  14. vertical-align: top;
  15. background: rgba(190, 190, 190, 0.2);
  16. width: 32px;
  17. height: 32px;
  18. line-height: 32px;
  19. }
  20. .ant-skeleton-header .ant-skeleton-avatar.ant-skeleton-avatar-circle {
  21. border-radius: 50%;
  22. }
  23. .ant-skeleton-header .ant-skeleton-avatar-lg {
  24. width: 40px;
  25. height: 40px;
  26. line-height: 40px;
  27. }
  28. .ant-skeleton-header .ant-skeleton-avatar-lg.ant-skeleton-avatar-circle {
  29. border-radius: 50%;
  30. }
  31. .ant-skeleton-header .ant-skeleton-avatar-sm {
  32. width: 24px;
  33. height: 24px;
  34. line-height: 24px;
  35. }
  36. .ant-skeleton-header .ant-skeleton-avatar-sm.ant-skeleton-avatar-circle {
  37. border-radius: 50%;
  38. }
  39. .ant-skeleton-content {
  40. display: table-cell;
  41. width: 100%;
  42. vertical-align: top;
  43. }
  44. .ant-skeleton-content .ant-skeleton-title {
  45. width: 100%;
  46. height: 16px;
  47. background: rgba(190, 190, 190, 0.2);
  48. border-radius: 2px;
  49. }
  50. .ant-skeleton-content .ant-skeleton-title + .ant-skeleton-paragraph {
  51. margin-top: 24px;
  52. }
  53. .ant-skeleton-content .ant-skeleton-paragraph {
  54. padding: 0;
  55. }
  56. .ant-skeleton-content .ant-skeleton-paragraph > li {
  57. width: 100%;
  58. height: 16px;
  59. list-style: none;
  60. background: rgba(190, 190, 190, 0.2);
  61. border-radius: 2px;
  62. }
  63. .ant-skeleton-content .ant-skeleton-paragraph > li:last-child:not(:first-child):not(:nth-child(2)) {
  64. width: 61%;
  65. }
  66. .ant-skeleton-content .ant-skeleton-paragraph > li + li {
  67. margin-top: 16px;
  68. }
  69. .ant-skeleton-with-avatar .ant-skeleton-content .ant-skeleton-title {
  70. margin-top: 12px;
  71. }
  72. .ant-skeleton-with-avatar .ant-skeleton-content .ant-skeleton-title + .ant-skeleton-paragraph {
  73. margin-top: 28px;
  74. }
  75. .ant-skeleton-round .ant-skeleton-content .ant-skeleton-title,
  76. .ant-skeleton-round .ant-skeleton-content .ant-skeleton-paragraph > li {
  77. border-radius: 100px;
  78. }
  79. .ant-skeleton-active .ant-skeleton-title,
  80. .ant-skeleton-active .ant-skeleton-paragraph > li,
  81. .ant-skeleton-active .ant-skeleton-avatar,
  82. .ant-skeleton-active .ant-skeleton-button,
  83. .ant-skeleton-active .ant-skeleton-input,
  84. .ant-skeleton-active .ant-skeleton-image {
  85. position: relative;
  86. /* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
  87. z-index: 0;
  88. overflow: hidden;
  89. background: transparent;
  90. }
  91. .ant-skeleton-active .ant-skeleton-title::after,
  92. .ant-skeleton-active .ant-skeleton-paragraph > li::after,
  93. .ant-skeleton-active .ant-skeleton-avatar::after,
  94. .ant-skeleton-active .ant-skeleton-button::after,
  95. .ant-skeleton-active .ant-skeleton-input::after,
  96. .ant-skeleton-active .ant-skeleton-image::after {
  97. position: absolute;
  98. top: 0;
  99. right: -150%;
  100. bottom: 0;
  101. left: -150%;
  102. background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
  103. animation: ant-skeleton-loading 1.4s ease infinite;
  104. content: '';
  105. }
  106. .ant-skeleton.ant-skeleton-block {
  107. width: 100%;
  108. }
  109. .ant-skeleton.ant-skeleton-block .ant-skeleton-button {
  110. width: 100%;
  111. }
  112. .ant-skeleton.ant-skeleton-block .ant-skeleton-input {
  113. width: 100%;
  114. }
  115. .ant-skeleton-element {
  116. display: inline-block;
  117. width: auto;
  118. }
  119. .ant-skeleton-element .ant-skeleton-button {
  120. display: inline-block;
  121. vertical-align: top;
  122. background: rgba(190, 190, 190, 0.2);
  123. border-radius: 2px;
  124. width: 64px;
  125. min-width: 64px;
  126. height: 32px;
  127. line-height: 32px;
  128. }
  129. .ant-skeleton-element .ant-skeleton-button.ant-skeleton-button-square {
  130. width: 32px;
  131. min-width: 32px;
  132. }
  133. .ant-skeleton-element .ant-skeleton-button.ant-skeleton-button-circle {
  134. width: 32px;
  135. min-width: 32px;
  136. border-radius: 50%;
  137. }
  138. .ant-skeleton-element .ant-skeleton-button.ant-skeleton-button-round {
  139. border-radius: 32px;
  140. }
  141. .ant-skeleton-element .ant-skeleton-button-lg {
  142. width: 80px;
  143. min-width: 80px;
  144. height: 40px;
  145. line-height: 40px;
  146. }
  147. .ant-skeleton-element .ant-skeleton-button-lg.ant-skeleton-button-square {
  148. width: 40px;
  149. min-width: 40px;
  150. }
  151. .ant-skeleton-element .ant-skeleton-button-lg.ant-skeleton-button-circle {
  152. width: 40px;
  153. min-width: 40px;
  154. border-radius: 50%;
  155. }
  156. .ant-skeleton-element .ant-skeleton-button-lg.ant-skeleton-button-round {
  157. border-radius: 40px;
  158. }
  159. .ant-skeleton-element .ant-skeleton-button-sm {
  160. width: 48px;
  161. min-width: 48px;
  162. height: 24px;
  163. line-height: 24px;
  164. }
  165. .ant-skeleton-element .ant-skeleton-button-sm.ant-skeleton-button-square {
  166. width: 24px;
  167. min-width: 24px;
  168. }
  169. .ant-skeleton-element .ant-skeleton-button-sm.ant-skeleton-button-circle {
  170. width: 24px;
  171. min-width: 24px;
  172. border-radius: 50%;
  173. }
  174. .ant-skeleton-element .ant-skeleton-button-sm.ant-skeleton-button-round {
  175. border-radius: 24px;
  176. }
  177. .ant-skeleton-element .ant-skeleton-avatar {
  178. display: inline-block;
  179. vertical-align: top;
  180. background: rgba(190, 190, 190, 0.2);
  181. width: 32px;
  182. height: 32px;
  183. line-height: 32px;
  184. }
  185. .ant-skeleton-element .ant-skeleton-avatar.ant-skeleton-avatar-circle {
  186. border-radius: 50%;
  187. }
  188. .ant-skeleton-element .ant-skeleton-avatar-lg {
  189. width: 40px;
  190. height: 40px;
  191. line-height: 40px;
  192. }
  193. .ant-skeleton-element .ant-skeleton-avatar-lg.ant-skeleton-avatar-circle {
  194. border-radius: 50%;
  195. }
  196. .ant-skeleton-element .ant-skeleton-avatar-sm {
  197. width: 24px;
  198. height: 24px;
  199. line-height: 24px;
  200. }
  201. .ant-skeleton-element .ant-skeleton-avatar-sm.ant-skeleton-avatar-circle {
  202. border-radius: 50%;
  203. }
  204. .ant-skeleton-element .ant-skeleton-input {
  205. display: inline-block;
  206. vertical-align: top;
  207. background: rgba(190, 190, 190, 0.2);
  208. width: 160px;
  209. min-width: 160px;
  210. height: 32px;
  211. line-height: 32px;
  212. }
  213. .ant-skeleton-element .ant-skeleton-input-lg {
  214. width: 200px;
  215. min-width: 200px;
  216. height: 40px;
  217. line-height: 40px;
  218. }
  219. .ant-skeleton-element .ant-skeleton-input-sm {
  220. width: 120px;
  221. min-width: 120px;
  222. height: 24px;
  223. line-height: 24px;
  224. }
  225. .ant-skeleton-element .ant-skeleton-image {
  226. display: flex;
  227. align-items: center;
  228. justify-content: center;
  229. vertical-align: top;
  230. background: rgba(190, 190, 190, 0.2);
  231. width: 96px;
  232. height: 96px;
  233. line-height: 96px;
  234. }
  235. .ant-skeleton-element .ant-skeleton-image.ant-skeleton-image-circle {
  236. border-radius: 50%;
  237. }
  238. .ant-skeleton-element .ant-skeleton-image-path {
  239. fill: #bfbfbf;
  240. }
  241. .ant-skeleton-element .ant-skeleton-image-svg {
  242. width: 48px;
  243. height: 48px;
  244. line-height: 48px;
  245. max-width: 192px;
  246. max-height: 192px;
  247. }
  248. .ant-skeleton-element .ant-skeleton-image-svg.ant-skeleton-image-circle {
  249. border-radius: 50%;
  250. }
  251. @keyframes ant-skeleton-loading {
  252. 0% {
  253. transform: translateX(-37.5%);
  254. }
  255. 100% {
  256. transform: translateX(37.5%);
  257. }
  258. }
  259. .ant-skeleton-rtl {
  260. direction: rtl;
  261. }
  262. .ant-skeleton-rtl .ant-skeleton-header {
  263. padding-right: 0;
  264. padding-left: 16px;
  265. }
  266. .ant-skeleton-rtl.ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-title,
  267. .ant-skeleton-rtl.ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-paragraph > li {
  268. animation-name: ant-skeleton-loading-rtl;
  269. }
  270. .ant-skeleton-rtl.ant-skeleton.ant-skeleton-active .ant-skeleton-avatar {
  271. animation-name: ant-skeleton-loading-rtl;
  272. }
  273. @keyframes ant-skeleton-loading-rtl {
  274. 0% {
  275. background-position: 0% 50%;
  276. }
  277. 100% {
  278. background-position: 100% 50%;
  279. }
  280. }