component.css 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257
  1. .ezuikit-spin {
  2. box-sizing: border-box;
  3. margin: 0;
  4. padding: 0;
  5. color: #595959;
  6. font-size: 14px;
  7. line-height: 1.5715;
  8. list-style: none;
  9. font-feature-settings: "tnum";
  10. position: absolute;
  11. display: none;
  12. color: #407AFF;
  13. text-align: center;
  14. vertical-align: middle;
  15. opacity: 0;
  16. transition: transform .3s cubic-bezier(.78,.14,.15,.86)
  17. }
  18. .ezuikit-spin-spinning {
  19. position: static;
  20. display: inline-block;
  21. opacity: 1
  22. }
  23. .ezuikit-spin-nested-loading {
  24. position: relative
  25. }
  26. .ezuikit-spin-nested-loading>div>.ezuikit-spin {
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. z-index: 4;
  31. display: block;
  32. width: 100%;
  33. height: 100%;
  34. max-height: 400px
  35. }
  36. .ezuikit-spin-nested-loading>div>.ezuikit-spin .ezuikit-spin-dot {
  37. position: absolute;
  38. top: 50%;
  39. left: 50%;
  40. margin: -10px
  41. }
  42. .ezuikit-spin-nested-loading>div>.ezuikit-spin .ezuikit-spin-text {
  43. position: absolute;
  44. top: 50%;
  45. width: 100%;
  46. padding-top: 5px;
  47. text-shadow: 0 1px 2px #fff
  48. }
  49. .ezuikit-spin-nested-loading>div>.ezuikit-spin.ezuikit-spin-show-text .ezuikit-spin-dot {
  50. margin-top: -20px
  51. }
  52. .ezuikit-spin-nested-loading>div>.ezuikit-spin-sm .ezuikit-spin-dot {
  53. margin: -10px
  54. }
  55. .ezuikit-spin-nested-loading>div>.ezuikit-spin-sm .ezuikit-spin-text {
  56. padding-top: 5px
  57. }
  58. .ezuikit-spin-nested-loading>div>.ezuikit-spin-sm.ezuikit-spin-show-text .ezuikit-spin-dot {
  59. margin-top: -20px
  60. }
  61. .ezuikit-spin-nested-loading>div>.ezuikit-spin-lg .ezuikit-spin-dot {
  62. margin: -15px
  63. }
  64. .ezuikit-spin-nested-loading>div>.ezuikit-spin-lg .ezuikit-spin-text {
  65. padding-top: 10px
  66. }
  67. .ezuikit-spin-nested-loading>div>.ezuikit-spin-lg.ezuikit-spin-show-text .ezuikit-spin-dot {
  68. margin-top: -25px
  69. }
  70. .ezuikit-spin-container {
  71. position: relative;
  72. transition: opacity .3s
  73. }
  74. .ezuikit-spin-container:after {
  75. position: absolute;
  76. inset: 0;
  77. z-index: 10;
  78. display: none \ ;
  79. width: 100%;
  80. height: 100%;
  81. background: #fff;
  82. opacity: 0;
  83. transition: all .3s;
  84. content: "";
  85. pointer-events: none
  86. }
  87. .ezuikit-spin-blur {
  88. clear: both;
  89. opacity: .5;
  90. -webkit-user-select: none;
  91. -moz-user-select: none;
  92. -ms-user-select: none;
  93. user-select: none;
  94. pointer-events: none
  95. }
  96. .ezuikit-spin-blur:after {
  97. opacity: .4;
  98. pointer-events: auto
  99. }
  100. .ezuikit-spin-tip {
  101. color: #00000073
  102. }
  103. .ezuikit-spin-dot {
  104. position: relative;
  105. display: inline-block;
  106. font-size: 20px;
  107. width: 1em;
  108. height: 1em
  109. }
  110. .ezuikit-spin-dot-white i {
  111. background-color: #fff
  112. }
  113. .ezuikit-spin-dot-item {
  114. position: absolute;
  115. display: block;
  116. width: 9px;
  117. height: 9px;
  118. background-color: #407AFF;
  119. border-radius: 2px;
  120. transform-origin: 50% 50%
  121. }
  122. .ezuikit-spin-dot-item:nth-child(1) {
  123. top: 0;
  124. left: 0;
  125. animation: smallAnimationShape1 2s linear 0s infinite normal;
  126. opacity: 1
  127. }
  128. .ezuikit-spin-dot-item:nth-child(2) {
  129. top: 0;
  130. left: 12px;
  131. animation: smallAnimationShape2 2s linear 0s infinite normal;
  132. opacity: .8
  133. }
  134. .ezuikit-spin-dot-item:nth-child(3) {
  135. top: 12px;
  136. left: 0;
  137. animation: smallAnimationShape3 2s linear 0s infinite normal;
  138. opacity: .5
  139. }
  140. .ezuikit-spin-dot-item:nth-child(4) {
  141. top: 12px;
  142. left: 12px;
  143. animation: smallAnimationShape4 2s linear 0s infinite normal;
  144. opacity: .3
  145. }
  146. .ezuikit-spin-dot-spin {
  147. animation: rotation 1s infinite
  148. }
  149. .ezuikit-spin-sm .ezuikit-spin-dot {
  150. font-size: 20px
  151. }
  152. .ezuikit-spin-sm .ezuikit-spin-dot i {
  153. width: 8px;
  154. height: 8px
  155. }
  156. .ezuikit-spin-lg .ezuikit-spin-dot {
  157. font-size: 30px
  158. }
  159. .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(1) {
  160. top: 0;
  161. left: 0;
  162. opacity: 1;
  163. animation: animationShape1 2s linear 0s infinite normal
  164. }
  165. .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(2) {
  166. top: 0;
  167. left: 18px;
  168. opacity: .8;
  169. animation: animationShape2 2s linear 0s infinite normal
  170. }
  171. .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(3) {
  172. top: 18px;
  173. left: 0;
  174. opacity: .5;
  175. animation: animationShape3 2s linear 0s infinite normal
  176. }
  177. .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(4) {
  178. top: 18px;
  179. left: 18px;
  180. opacity: .3;
  181. animation: animationShape4 2s linear 0s infinite normal
  182. }
  183. .ezuikit-spin-lg .ezuikit-spin-dot i {
  184. width: 12px;
  185. height: 12px
  186. }
  187. .ezuikit-spin.ezuikit-spin-show-text .ezuikit-spin-text {
  188. display: block
  189. }
  190. @keyframes ezuikitSpinMove {
  191. to {
  192. opacity: 1
  193. }
  194. }
  195. @keyframes ezuikitRotate {
  196. to {
  197. transform: rotate(405deg)
  198. }
  199. }
  200. @keyframes rotation {
  201. 0% {
  202. transform: rotate(0)
  203. }
  204. to {
  205. transform: rotate(360deg)
  206. }
  207. }
  208. @keyframes smallAnimationShape1 {
  209. 0% {
  210. transform: translate(0)
  211. }
  212. 25% {
  213. transform: translateY(12px)
  214. }
  215. 50% {
  216. transform: translate(12px,12px)
  217. }
  218. 75% {
  219. transform: translate(12px)
  220. }
  221. }
  222. @keyframes smallAnimationShape2 {
  223. 0% {
  224. transform: translate(0)
  225. }
  226. 25% {
  227. transform: translate(-12px)
  228. }
  229. 50% {
  230. transform: translate(-12px,12px)
  231. }
  232. 75% {
  233. transform: translateY(12px)
  234. }
  235. }
  236. @keyframes smallAnimationShape3 {
  237. 0% {
  238. transform: translate(0)
  239. }
  240. 25% {
  241. transform: translate(12px)
  242. }
  243. 50% {
  244. transform: translate(12px,-12px)
  245. }
  246. 75% {
  247. transform: translateY(-12px)
  248. }
  249. }
  250. @keyframes smallAnimationShape4 {
  251. 0% {
  252. transform: translate(0)
  253. }
  254. 25% {
  255. transform: translateY(-12px)
  256. }
  257. 50% {
  258. transform: translate(-12px,-12px)
  259. }
  260. 75% {
  261. transform: translate(-12px)
  262. }
  263. }
  264. @keyframes animationShape1 {
  265. 0% {
  266. transform: translate(0)
  267. }
  268. 25% {
  269. transform: translateY(18px)
  270. }
  271. 50% {
  272. transform: translate(18px,18px)
  273. }
  274. 75% {
  275. transform: translate(18px)
  276. }
  277. }
  278. @keyframes animationShape2 {
  279. 0% {
  280. transform: translate(0)
  281. }
  282. 25% {
  283. transform: translate(-18px)
  284. }
  285. 50% {
  286. transform: translate(-18px,18px)
  287. }
  288. 75% {
  289. transform: translateY(18px)
  290. }
  291. }
  292. @keyframes animationShape3 {
  293. 0% {
  294. transform: translate(0)
  295. }
  296. 25% {
  297. transform: translate(18px)
  298. }
  299. 50% {
  300. transform: translate(18px,-18px)
  301. }
  302. 75% {
  303. transform: translateY(-18px)
  304. }
  305. }
  306. @keyframes animationShape4 {
  307. 0% {
  308. transform: translate(0)
  309. }
  310. 25% {
  311. transform: translateY(-18px)
  312. }
  313. 50% {
  314. transform: translate(-18px,-18px)
  315. }
  316. 75% {
  317. transform: translate(-18px)
  318. }
  319. }
  320. .ezuikit-btn {
  321. position: relative;
  322. display: inline-block;
  323. font-weight: 400;
  324. white-space: nowrap;
  325. text-align: center;
  326. background-image: none;
  327. border: 1px solid transparent;
  328. box-shadow: 0 2px #00000004;
  329. cursor: pointer;
  330. -webkit-user-select: none;
  331. -moz-user-select: none;
  332. -ms-user-select: none;
  333. user-select: none;
  334. touch-action: manipulation;
  335. min-width: 60px;
  336. height: 32px;
  337. padding: 4px 15px;
  338. font-size: 14px;
  339. border-radius: 2px;
  340. color: #595959;
  341. border-color: #d9d9d9;
  342. background: #fff
  343. }
  344. .ezuikit-btn::before {
  345. position: absolute;
  346. top: -1px;
  347. right: -1px;
  348. bottom: -1px;
  349. left: -1px;
  350. z-index: 1;
  351. display: none;
  352. background: #fff;
  353. border-radius: inherit;
  354. opacity: 0.35;
  355. transition: opacity 0.2s;
  356. content: '';
  357. pointer-events: none;
  358. }
  359. .ezuikit-btn-primary {
  360. color: #fff;
  361. border-color: #407AFF;
  362. background:#407AFF;
  363. text-shadow: 0 -1px 0 rgba(0,0,0,.12);
  364. box-shadow: 0 2px #0000000b
  365. }
  366. .ezuikit-btn-primary>a:only-child {
  367. color: currentColor
  368. }
  369. .ezuikit-btn-primary>a:only-child:after {
  370. position: absolute;
  371. inset: 0;
  372. background: transparent;
  373. content: ""
  374. }
  375. .ezuikit-btn-primary:hover {
  376. color: #fff;
  377. border-color: #699bff;
  378. background: #699bff
  379. }
  380. .ezuikit-btn[disabled] {
  381. cursor: not-allowed;
  382. }
  383. .ezuikit-btn[disabled] > * {
  384. pointer-events: none;
  385. }
  386. .ezuikit-btn[disabled],
  387. .ezuikit-btn[disabled]:hover,
  388. .ezuikit-btn[disabled]:focus,
  389. .ezuikit-btn[disabled]:active {
  390. color: #fff;
  391. border-color: #bfbfbf;
  392. background: #BFBFBF;
  393. text-shadow: none;
  394. box-shadow: none;
  395. }
  396. .ezuikit-btn[disabled] > a:only-child,
  397. .ezuikit-btn[disabled]:hover > a:only-child,
  398. .ezuikit-btn[disabled]:focus > a:only-child,
  399. .ezuikit-btn[disabled]:active > a:only-child {
  400. color: currentColor;
  401. }
  402. .ezuikit-btn[disabled] > a:only-child::after,
  403. .ezuikit-btn[disabled]:hover > a:only-child::after,
  404. .ezuikit-btn[disabled]:focus > a:only-child::after,
  405. .ezuikit-btn[disabled]:active > a:only-child::after {
  406. position: absolute;
  407. top: 0;
  408. right: 0;
  409. bottom: 0;
  410. left: 0;
  411. background: transparent;
  412. content: '';
  413. }
  414. .ezuikit-input {
  415. box-sizing: border-box;
  416. margin: 0;
  417. padding: 0;
  418. list-style: none;
  419. font-feature-settings: 'tnum';
  420. position: relative;
  421. display: inline-block;
  422. width: 100%;
  423. min-width: 0;
  424. padding: 4px 11px;
  425. color: #595959;
  426. font-size: 14px;
  427. line-height: 1.5715;
  428. background-color: #fff;
  429. background-image: none;
  430. border: 1px solid #d9d9d9;
  431. border-radius: 2px;
  432. transition: all 0.3s;
  433. /* stylelint-disable-next-line selector-no-vendor-prefix */
  434. /* stylelint-disable-next-line selector-no-vendor-prefix */
  435. padding: 4px 8px;
  436. }
  437. .ezuikit-input.input-has-error {
  438. background-color: #fff;
  439. border-color: #ff4d4f!important;
  440. }
  441. .ezuikit-input.input-has-error:focus {
  442. border-color: #ff4d4f!important;
  443. box-shadow: none;
  444. outline: 0;
  445. }
  446. .ezuikit-input::-moz-placeholder {
  447. opacity: 1;
  448. }
  449. .ezuikit-input:-ms-input-placeholder {
  450. color: #bfbfbf;
  451. }
  452. .ezuikit-input::placeholder {
  453. color: #bfbfbf;
  454. }
  455. .ezuikit-input:-moz-placeholder-shown {
  456. text-overflow: ellipsis;
  457. }
  458. .ezuikit-input:-ms-input-placeholder {
  459. text-overflow: ellipsis;
  460. }
  461. .ezuikit-input:placeholder-shown {
  462. text-overflow: ellipsis;
  463. }
  464. .ezuikit-input::-webkit-input-placeholder {
  465. -webkit-user-select: none;
  466. user-select: none;
  467. }
  468. .ezuikit-input:hover {
  469. border-color: #699bff;
  470. }
  471. .ezuikit-input-rtl .ezuikit-input:hover {
  472. border-right-width: 0;
  473. border-left-width: 1px !important;
  474. }
  475. .ezuikit-input:focus,
  476. .ezuikit-input-focused {
  477. border-color: #699bff;
  478. box-shadow: 0 0 0 2px rgba(64, 122, 255, 0.2);
  479. border-right-width: 1px !important;
  480. outline: 0;
  481. }
  482. .ezuikit-input-rtl .ezuikit-input:focus,
  483. .ezuikit-input-rtl .ezuikit-input-focused {
  484. border-right-width: 0;
  485. border-left-width: 1px !important;
  486. }
  487. .ezuikit-input-disabled {
  488. color: #BFBFBF;
  489. background-color: #f5f5f5;
  490. border-color: #d9d9d9;
  491. box-shadow: none;
  492. cursor: not-allowed;
  493. opacity: 1;
  494. }
  495. .ezuikit-input-disabled:hover {
  496. border-color: #d9d9d9;
  497. }
  498. .ezuikit-input[disabled] {
  499. color: #BFBFBF;
  500. background-color: #f5f5f5;
  501. border-color: #d9d9d9;
  502. box-shadow: none;
  503. cursor: not-allowed;
  504. opacity: 1;
  505. }
  506. .ezuikit-input[disabled]:hover {
  507. border-color: #d9d9d9;
  508. }
  509. .ezuikit-input-borderless,
  510. .ezuikit-input-borderless:hover,
  511. .ezuikit-input-borderless:focus,
  512. .ezuikit-input-borderless-focused,
  513. .ezuikit-input-borderless-disabled,
  514. .ezuikit-input-borderless[disabled] {
  515. background-color: transparent;
  516. border: none;
  517. box-shadow: none;
  518. }
  519. textarea.ezuikit-input {
  520. max-width: 100%;
  521. height: auto;
  522. min-height: 32px;
  523. line-height: 1.5715;
  524. vertical-align: bottom;
  525. transition: all 0.3s, height 0s;
  526. border: 0;
  527. margin-bottom: 24px;
  528. resize: none;
  529. }
  530. textarea.ezuikit-input:focus {
  531. box-shadow: none;
  532. }
  533. .ezuikit-input-textarea-focus {
  534. box-shadow: 0 0 0 2px rgba(64, 122, 255, 0.2);
  535. border: 1px solid #699bff !important;
  536. }
  537. .ezuikit-input-textarea {
  538. position: relative;
  539. border: 1px solid #d9d9d9;
  540. }
  541. .ezuikit-input-textarea-show-count::after {
  542. position: absolute;
  543. right: 9px;
  544. bottom: 1px;
  545. color: #bfbfbf;
  546. font-size: 12px;
  547. white-space: nowrap;
  548. content: attr(data-count);
  549. pointer-events: none;
  550. background-color: #fff;
  551. left: 1px;
  552. text-align: right;
  553. }
  554. .ezuikit-form-item-explain-error {
  555. color: #ff4d4f;
  556. font-size: 12px;
  557. color: #FF4D4F;
  558. line-height: 20px;
  559. }
  560. .ezuikit-btn.ezuikit-btn-loading {
  561. position: relative;
  562. cursor: default;
  563. }
  564. .ezuikit-btn.ezuikit-btn-loading::before {
  565. display: block;
  566. }
  567. .ezuikit-btn-loading svg {
  568. animation: loadingCircle 1s infinite linear;
  569. margin-right: 8px;
  570. }
  571. @keyframes loadingCircle {
  572. 100% {
  573. transform: rotate(360deg);
  574. }
  575. }
  576. .ezuikit-image,
  577. .ezuikit-video {
  578. position: relative;
  579. display: inline-block;
  580. }
  581. .ezuikit-image-img,
  582. .ezuikit-video-img {
  583. display: block;
  584. width: 100%;
  585. height: 100%;
  586. object-fit: contain;
  587. }
  588. .ezuikit-image-mask,
  589. .ezuikit-video-mask {
  590. position: absolute;
  591. top: 0;
  592. right: 0;
  593. bottom: 0;
  594. left: 0;
  595. display: flex;
  596. align-items: center;
  597. justify-content: center;
  598. color: #fff;
  599. cursor: pointer;
  600. opacity: 0;
  601. transition: opacity 0.3s;
  602. }
  603. .ezuikit-video-mask {
  604. opacity: 1;
  605. }
  606. .ezuikit-image-mask-info,
  607. .ezuikit-video-mask-info {
  608. padding: 0 4px;
  609. overflow: hidden;
  610. white-space: nowrap;
  611. text-overflow: ellipsis;
  612. }
  613. .ezuikit-image-anticon-eye,
  614. .ezuikit-video-anticon-eye {
  615. font-size: 14px;
  616. display: flex;
  617. align-items: center;
  618. }
  619. .ezuikit-image-anticon-eye svg {
  620. fill: #ffffff !important;;
  621. margin-right: 4px;
  622. }
  623. .ezuikit-image-mask:hover {
  624. /* background: rgba(0, 0, 0, 0.5); */
  625. opacity: 1;
  626. }
  627. .ezuikit-image-preview,
  628. .ezuikit-video-preview {
  629. pointer-events: none;
  630. height: 100%;
  631. text-align: center;
  632. }
  633. .ezuikit-image-preview-mask,
  634. .ezuikit-video-preview-mask {
  635. position: fixed;
  636. top: 0;
  637. right: 0;
  638. bottom: 0;
  639. left: 0;
  640. z-index: 1000;
  641. height: 100%;
  642. background-color: rgba(0, 0, 0, 0.45);
  643. }
  644. .ezuikit-image-preview-wrap,
  645. .ezuikit-video-preview-wrap {
  646. position: fixed;
  647. top: 0;
  648. right: 0;
  649. bottom: 0;
  650. left: 0;
  651. overflow: auto;
  652. outline: 0;
  653. -webkit-overflow-scrolling: touch;
  654. }
  655. .ezuikit-image-preview-body,
  656. .ezuikit-video-preview-body {
  657. position: absolute;
  658. top: 0;
  659. right: 0;
  660. bottom: 0;
  661. left: 0;
  662. overflow: hidden;
  663. }
  664. .ezuikit-image-preview-img,
  665. .ezuikit-video-preview-img {
  666. max-width: 80%;
  667. max-height: 80%;
  668. vertical-align: middle;
  669. transform: scale3d(1, 1, 1);
  670. transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  671. -webkit-user-select: none;
  672. -moz-user-select: none;
  673. -ms-user-select: none;
  674. user-select: none;
  675. pointer-events: auto;
  676. }
  677. .ezuikit-image-preview-img-wrapper,
  678. .ezuikit-image-preview-img-main,
  679. .ezuikit-video-preview-img-wrapper {
  680. top: 40px !important;
  681. bottom: 40px !important;
  682. position: absolute;
  683. top: 0;
  684. right: 0;
  685. bottom: 0;
  686. left: 0;
  687. transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  688. }
  689. .ezuikit-video-preview-img-wrapper {
  690. text-align: center;
  691. }
  692. .ezuikit-image-preview-img-wrapper::before,
  693. .ezuikit-image-preview-img-main::before,
  694. .ezuikit-video-preview-img-wrapper::before {
  695. display: inline-block;
  696. width: 1px;
  697. height: 50%;
  698. margin-right: -1px;
  699. content: '';
  700. }
  701. .ezuikit-image-preview-wrap,
  702. .ezuikit-video-preview-wrap {
  703. z-index: 1080;
  704. }
  705. .ezuikit-image-preview-operations,
  706. .ezuikit-video-preview-operations {
  707. box-sizing: border-box;
  708. margin: 0;
  709. padding: 0;
  710. color: #595959;
  711. font-size: 14px;
  712. line-height: 1.5715;
  713. font-feature-settings: 'tnum';
  714. position: fixed;
  715. top: 40px;
  716. right: 0;
  717. z-index: 1100;
  718. display: flex;
  719. flex-direction: row-reverse;
  720. align-items: center;
  721. width: 100%;
  722. color: rgba(255, 255, 255, 0.85);
  723. list-style: none;
  724. pointer-events: auto;
  725. }
  726. .ezuikit-image-preview-operations-operation,
  727. .ezuikit-video-preview-operations-operation {
  728. cursor: pointer;
  729. background: rgba(0, 0, 0, 0.7);
  730. margin-right: 40px;
  731. border-radius: 20px;
  732. width: 40px;
  733. height: 40px;
  734. display: flex;
  735. align-items: center;
  736. justify-content: center;
  737. }
  738. .ezuikit-image-preview-operations-icon,
  739. .ezuikit-video-preview-operations-icon {
  740. font-size: 18px;
  741. color: #fff;
  742. display: flex;
  743. }
  744. .ezuikit-message {
  745. box-sizing: border-box;
  746. margin: 0;
  747. padding: 0;
  748. color: #595959;
  749. font-size: 14px;
  750. line-height: 1.5715;
  751. list-style: none;
  752. font-feature-settings: 'tnum';
  753. position: absolute;
  754. top: 8px;
  755. left: 0;
  756. z-index: 1200;
  757. width: 100%;
  758. pointer-events: none;
  759. }
  760. .ezuikit-message-notice {
  761. padding: 8px;
  762. text-align: center;
  763. }
  764. .ezuikit-message-notice-content {
  765. display: inline-block;
  766. padding: 10px 16px;
  767. background: #fff;
  768. border-radius: 2px;
  769. box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  770. pointer-events: all;
  771. }
  772. .ezuikit-message-success .ezdicon {
  773. color: #52c41a;
  774. }
  775. .ezuikit-message-error .ezdicon {
  776. color: #ff4d4f;
  777. }
  778. .ezuikit-message-warning .ezdicon {
  779. color: #faad14;
  780. }
  781. .ezuikit-message-info .ezdicon,
  782. .ezuikit-message-loading .ezdicon {
  783. color: #407AFF;
  784. }
  785. .ezuikit-message-custom-content {
  786. display: flex;
  787. text-align: left;
  788. }
  789. .ezuikit-message .ezdicon {
  790. position: relative;
  791. margin-right: 8px;
  792. font-size: 14px;
  793. display: flex;
  794. padding-top: 3px;
  795. }
  796. .ezuikit-popover {
  797. box-sizing: border-box;
  798. margin: 0;
  799. padding: 0;
  800. color: #595959;
  801. font-size: 14px;
  802. line-height: 1.5715;
  803. list-style: none;
  804. font-feature-settings: 'tnum';
  805. position: absolute;
  806. top: 0;
  807. left: 0;
  808. z-index: 1030;
  809. font-weight: normal;
  810. white-space: normal;
  811. text-align: left;
  812. cursor: auto;
  813. -webkit-user-select: text;
  814. -moz-user-select: text;
  815. -ms-user-select: text;
  816. user-select: text;
  817. }
  818. .ezuikit-popover::after {
  819. position: absolute;
  820. background: rgba(255, 255, 255, 0.01);
  821. content: '';
  822. }
  823. .ezuikit-popover-hidden {
  824. display: none;
  825. }
  826. .ezuikit-popover-placement-top,
  827. .ezuikit-popover-placement-topLeft,
  828. .ezuikit-popover-placement-topRight {
  829. padding-bottom: 8.48528137px;
  830. }
  831. .ezuikit-popover-placement-right,
  832. .ezuikit-popover-placement-rightTop,
  833. .ezuikit-popover-placement-rightBottom {
  834. padding-left: 8.48528137px;
  835. }
  836. .ezuikit-popover-placement-bottom,
  837. .ezuikit-popover-placement-bottomLeft,
  838. .ezuikit-popover-placement-bottomRight {
  839. padding-top: 8.48528137px;
  840. }
  841. .ezuikit-popover-placement-left,
  842. .ezuikit-popover-placement-leftTop,
  843. .ezuikit-popover-placement-leftBottom {
  844. padding-right: 8.48528137px;
  845. }
  846. .ezuikit-popover-inner {
  847. background-color: #fff;
  848. background-clip: padding-box;
  849. border-radius: 2px;
  850. box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  851. box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
  852. }
  853. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  854. .ezuikit-popover {
  855. /* IE10+ */
  856. }
  857. .ezuikit-popover-inner {
  858. box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  859. }
  860. }
  861. .ezuikit-popover-title {
  862. min-width: 177px;
  863. min-height: 32px;
  864. margin: 0;
  865. padding: 5px 16px 4px;
  866. color: rgba(0, 0, 0, 0.85);
  867. font-weight: 500;
  868. line-height: 32px;
  869. border-bottom: 1px solid #f0f0f0;
  870. }
  871. .ezuikit-popover-inner-content {
  872. padding: 12px 16px;
  873. color: #595959;
  874. }
  875. .ezuikit-popover-message {
  876. position: relative;
  877. padding: 4px 0 12px;
  878. color: #595959;
  879. font-size: 14px;
  880. }
  881. .ezuikit-popover-message > .ezdicon {
  882. position: absolute;
  883. top: 8.0005px;
  884. color: #faad14;
  885. font-size: 14px;
  886. }
  887. .ezuikit-popover-message-title {
  888. padding-left: 22px;
  889. }
  890. .ezuikit-popover-buttons {
  891. margin-bottom: 4px;
  892. text-align: right;
  893. }
  894. .ezuikit-popover-buttons button {
  895. margin-left: 8px;
  896. }
  897. .ezuikit-popover-arrow {
  898. position: absolute;
  899. display: block;
  900. width: 8.48528137px;
  901. height: 8.48528137px;
  902. overflow: hidden;
  903. background: transparent;
  904. pointer-events: none;
  905. }
  906. .ezuikit-popover-arrow-content {
  907. position: absolute;
  908. top: 0;
  909. right: 0;
  910. bottom: 0;
  911. left: 0;
  912. display: block;
  913. width: 6px;
  914. height: 6px;
  915. margin: auto;
  916. background-color: #fff;
  917. content: '';
  918. pointer-events: auto;
  919. }
  920. .ezuikit-popover-placement-top .ezuikit-popover-arrow,
  921. .ezuikit-popover-placement-topLeft .ezuikit-popover-arrow,
  922. .ezuikit-popover-placement-topRight .ezuikit-popover-arrow {
  923. bottom: 1.51471863px;
  924. }
  925. .ezuikit-popover-placement-top .ezuikit-popover-arrow-content,
  926. .ezuikit-popover-placement-topLeft .ezuikit-popover-arrow-content,
  927. .ezuikit-popover-placement-topRight .ezuikit-popover-arrow-content {
  928. box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
  929. transform: translateY(-4.24264069px) rotate(45deg);
  930. }
  931. .ezuikit-popover-placement-top .ezuikit-popover-arrow {
  932. left: 50%;
  933. transform: translateX(-50%);
  934. }
  935. .ezuikit-popover-placement-topLeft .ezuikit-popover-arrow {
  936. left: 16px;
  937. }
  938. .ezuikit-popover-placement-topRight .ezuikit-popover-arrow {
  939. right: 16px;
  940. }
  941. .ezuikit-popover-placement-right .ezuikit-popover-arrow,
  942. .ezuikit-popover-placement-rightTop .ezuikit-popover-arrow,
  943. .ezuikit-popover-placement-rightBottom .ezuikit-popover-arrow {
  944. left: 1.51471863px;
  945. }
  946. .ezuikit-popover-placement-right .ezuikit-popover-arrow-content,
  947. .ezuikit-popover-placement-rightTop .ezuikit-popover-arrow-content,
  948. .ezuikit-popover-placement-rightBottom .ezuikit-popover-arrow-content {
  949. box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
  950. transform: translateX(4.24264069px) rotate(45deg);
  951. }
  952. .ezuikit-popover-placement-right .ezuikit-popover-arrow {
  953. top: 50%;
  954. transform: translateY(-50%);
  955. }
  956. .ezuikit-popover-placement-rightTop .ezuikit-popover-arrow {
  957. top: 12px;
  958. }
  959. .ezuikit-popover-placement-rightBottom .ezuikit-popover-arrow {
  960. bottom: 12px;
  961. }
  962. .ezuikit-popover-placement-bottom .ezuikit-popover-arrow,
  963. .ezuikit-popover-placement-bottomLeft .ezuikit-popover-arrow,
  964. .ezuikit-popover-placement-bottomRight .ezuikit-popover-arrow {
  965. top: 1.51471863px;
  966. }
  967. .ezuikit-popover-placement-bottom .ezuikit-popover-arrow-content,
  968. .ezuikit-popover-placement-bottomLeft .ezuikit-popover-arrow-content,
  969. .ezuikit-popover-placement-bottomRight .ezuikit-popover-arrow-content {
  970. box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
  971. transform: translateY(4.24264069px) rotate(45deg);
  972. }
  973. .ezuikit-popover-placement-bottom .ezuikit-popover-arrow {
  974. left: 50%;
  975. transform: translateX(-50%);
  976. }
  977. .ezuikit-popover-placement-bottomLeft .ezuikit-popover-arrow {
  978. left: 16px;
  979. }
  980. .ezuikit-popover-placement-bottomRight .ezuikit-popover-arrow {
  981. right: 16px;
  982. }
  983. .ezuikit-popover-placement-left .ezuikit-popover-arrow,
  984. .ezuikit-popover-placement-leftTop .ezuikit-popover-arrow,
  985. .ezuikit-popover-placement-leftBottom .ezuikit-popover-arrow {
  986. right: 1.51471863px;
  987. }
  988. .ezuikit-popover-placement-left .ezuikit-popover-arrow-content,
  989. .ezuikit-popover-placement-leftTop .ezuikit-popover-arrow-content,
  990. .ezuikit-popover-placement-leftBottom .ezuikit-popover-arrow-content {
  991. box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
  992. transform: translateX(-4.24264069px) rotate(45deg);
  993. }
  994. .ezuikit-popover-placement-left .ezuikit-popover-arrow {
  995. top: 50%;
  996. transform: translateY(-50%);
  997. }
  998. .ezuikit-popover-placement-leftTop .ezuikit-popover-arrow {
  999. top: 12px;
  1000. }
  1001. .ezuikit-popover-placement-leftBottom .ezuikit-popover-arrow {
  1002. bottom: 12px;
  1003. }
  1004. .ezuikit-popover-pink .ezuikit-popover-inner {
  1005. background-color: #eb2f96;
  1006. }
  1007. .ezuikit-popover-pink .ezuikit-popover-arrow-content {
  1008. background-color: #eb2f96;
  1009. }
  1010. .ezuikit-popover-magenta .ezuikit-popover-inner {
  1011. background-color: #eb2f96;
  1012. }
  1013. .ezuikit-popover-magenta .ezuikit-popover-arrow-content {
  1014. background-color: #eb2f96;
  1015. }
  1016. .ezuikit-popover-red .ezuikit-popover-inner {
  1017. background-color: #f5222d;
  1018. }
  1019. .ezuikit-popover-red .ezuikit-popover-arrow-content {
  1020. background-color: #f5222d;
  1021. }
  1022. .ezuikit-popover-volcano .ezuikit-popover-inner {
  1023. background-color: #fa541c;
  1024. }
  1025. .ezuikit-popover-volcano .ezuikit-popover-arrow-content {
  1026. background-color: #fa541c;
  1027. }
  1028. .ezuikit-popover-orange .ezuikit-popover-inner {
  1029. background-color: #FAAD14;
  1030. }
  1031. .ezuikit-popover-orange .ezuikit-popover-arrow-content {
  1032. background-color: #FAAD14;
  1033. }
  1034. .ezuikit-popover-yellow .ezuikit-popover-inner {
  1035. background-color: #fadb14;
  1036. }
  1037. .ezuikit-popover-yellow .ezuikit-popover-arrow-content {
  1038. background-color: #fadb14;
  1039. }
  1040. .ezuikit-popover-gold .ezuikit-popover-inner {
  1041. background-color: #faad14;
  1042. }
  1043. .ezuikit-popover-gold .ezuikit-popover-arrow-content {
  1044. background-color: #faad14;
  1045. }
  1046. .ezuikit-popover-cyan .ezuikit-popover-inner {
  1047. background-color: #13c2c2;
  1048. }
  1049. .ezuikit-popover-cyan .ezuikit-popover-arrow-content {
  1050. background-color: #13c2c2;
  1051. }
  1052. .ezuikit-popover-lime .ezuikit-popover-inner {
  1053. background-color: #a0d911;
  1054. }
  1055. .ezuikit-popover-lime .ezuikit-popover-arrow-content {
  1056. background-color: #a0d911;
  1057. }
  1058. .ezuikit-popover-green .ezuikit-popover-inner {
  1059. background-color: #52c41a;
  1060. }
  1061. .ezuikit-popover-green .ezuikit-popover-arrow-content {
  1062. background-color: #52c41a;
  1063. }
  1064. .ezuikit-popover-blue .ezuikit-popover-inner {
  1065. background-color: #407AFF;
  1066. }
  1067. .ezuikit-popover-blue .ezuikit-popover-arrow-content {
  1068. background-color: #407AFF;
  1069. }
  1070. .ezuikit-popover-geekblue .ezuikit-popover-inner {
  1071. background-color: #2f54eb;
  1072. }
  1073. .ezuikit-popover-geekblue .ezuikit-popover-arrow-content {
  1074. background-color: #2f54eb;
  1075. }
  1076. .ezuikit-popover-purple .ezuikit-popover-inner {
  1077. background-color: #722ed1;
  1078. }
  1079. .ezuikit-popover-purple .ezuikit-popover-arrow-content {
  1080. background-color: #722ed1;
  1081. }
  1082. .ezuikit-popover-rtl {
  1083. direction: rtl;
  1084. text-align: right;
  1085. }
  1086. .ezuikit-popover-rtl .ezuikit-popover-message-title {
  1087. padding-right: 22px;
  1088. padding-left: 16px;
  1089. }
  1090. .ezuikit-popover-rtl .ezuikit-popover-buttons {
  1091. text-align: left;
  1092. }
  1093. .ezuikit-popover-rtl .ezuikit-popover-buttons button {
  1094. margin-right: 8px;
  1095. margin-left: 0;
  1096. }
  1097. .ezuikit-confirm {
  1098. padding: 12px 8px;
  1099. }
  1100. .ezuikit-confirm-content {
  1101. width: 272px;
  1102. box-sizing: border-box;
  1103. margin-bottom: 24px;
  1104. }
  1105. .ezuikit-confirm-content {
  1106. display: flex;
  1107. }
  1108. .ezuikit-confirm-content-label {
  1109. font-size: 16px;
  1110. color: #262626;
  1111. line-height: 24px;
  1112. font-weight: bold;
  1113. }
  1114. .ezuikit-confirm-content .ezuikit-confirm-icon {
  1115. color: #FAAD14 ;
  1116. margin-right: 16px;
  1117. }
  1118. /* 隐藏 Safari 和 Chrome 浏览器中的控制按钮 */
  1119. video::-webkit-media-controls-rewind-button,
  1120. video::-webkit-media-controls-fast-forward-button,
  1121. video::-webkit-media-controls-seek-forward-button,
  1122. video::-webkit-media-controls-seek-back-button,
  1123. video::-webkit-media-controls-toggle-closed-captions-button,
  1124. video::-webkit-media-controls-picture-in-picture-button,
  1125. video::-webkit-media-controls-step-forward-button,
  1126. video::-webkit-media-controls-step-back-button{
  1127. display: none !important;
  1128. }
  1129. /* 隐藏 Firefox 浏览器中的控制按钮 */
  1130. video::-moz-full-screen-button,
  1131. video::-moz-focus-outer {
  1132. display: none;
  1133. }
  1134. /* 隐藏 Edge 浏览器中的控制按钮 */
  1135. video:-ms-fullscreen {
  1136. display: none;
  1137. }
  1138. :focus-visible {
  1139. outline: none;
  1140. }