You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1263 lines
32 KiB

2 years ago
  1. /**
  2. * Fileuploader
  3. * Copyright (c) 2017 Innostudio.de
  4. * Website: http://innostudio.de/fileuploader/
  5. * Version: 1.3 (21-Sep-2017)
  6. * Requires: jQuery v1.7.1 or later
  7. * License: https://innostudio.de/fileuploader/documentation/#license
  8. */
  9. .fileuploader, .fileuploader *, .fileuploader :before, .fileuploader :after {
  10. box-sizing: border-box;
  11. }
  12. .fileuploader {
  13. display: block;
  14. width: 100%;
  15. padding: 15px;
  16. margin: 15px 0;
  17. background: #f5f6fA;
  18. border-radius: 4px;
  19. line-height: normal;
  20. text-align: left;
  21. }
  22. .fileuploader-input {
  23. position: relative;
  24. display: -webkit-box;
  25. display: -ms-flexbox;
  26. display: flex;
  27. border: 1px solid transparent;
  28. cursor: pointer;
  29. overflow: hidden;
  30. }
  31. .fileuploader-input-caption {
  32. position: relative;
  33. display: inline-block;
  34. -webkit-box-flex: 1;
  35. -ms-flex: 1;
  36. flex: 1;
  37. -ms-flex-item-align: start;
  38. align-self: flex-start;
  39. padding: 11px 15px;
  40. margin-right: 15px;
  41. background: #fff;
  42. border: 1px solid #dde4f6;
  43. border-radius: 4px;
  44. color: #789BEC;
  45. font-weight: bold;
  46. white-space: nowrap;
  47. text-overflow: ellipsis;
  48. overflow: hidden;
  49. -webkit-transition: all .2s ease-out;
  50. transition: all .2s ease-out;
  51. }
  52. .fileuploader-input-button {
  53. display: inline-block;
  54. background: #6381E6;
  55. padding: 12px 20px;
  56. border-radius: 4px;
  57. color: #fff;
  58. text-align: center;
  59. font-weight: bold;
  60. vertical-align: top;
  61. cursor: pointer;
  62. -webkit-transition: all .2s ease-out;
  63. transition: all .2s ease-out;
  64. }
  65. .fileuploader-input-button:hover {
  66. background: #758fe9;
  67. }
  68. .fileuploader-input-button:active {
  69. background: #6381E6;
  70. box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1);
  71. }
  72. .fileuploader-focused .fileuploader-input-caption {
  73. border-color: #b8c2ef;
  74. }
  75. .fileuploader-focused .fileuploader-input-button {
  76. background: #758fe9;
  77. border-color: #758fe9;
  78. }
  79. .fileuploader-disabled .fileuploader-input {
  80. opacity: 0.7;
  81. cursor: default;
  82. pointer-events: none !important;
  83. }
  84. .fileuploader-theme-default .fileuploader-dragging {
  85. background: #fff;
  86. border: 1px dashed #dde4f6;
  87. }
  88. .fileuploader-theme-default .fileuploader-dragging .fileuploader-input-caption {
  89. border-color: transparent;
  90. }
  91. .fileuploader-theme-default .fileuploader-dragging .fileuploader-input-button {
  92. -webkit-transform: translateY(100%);
  93. transform: translateY(100%);
  94. opacity: 0;
  95. }
  96. .fileuploader.fileuploader-is-uploading .fileuploader-input-caption:after {
  97. width: 14px;
  98. height: 14px;
  99. right: 10px;
  100. top: 50%;
  101. margin-top: -10px;
  102. opacity: 0.8;
  103. }
  104. .fileuploader.fileuploader-is-uploading .fileuploader-input-caption:after, .fileuploader-item .fileuploader-item-image.fileuploader-loading:after, .fileuploader-item.upload-pending .fileuploader-action-remove:after {
  105. content: '';
  106. position: absolute;
  107. width: 20px;
  108. height: 20px;
  109. border-radius: 50%;
  110. border-top: 3px solid #dde4f6;
  111. border-right: 3px solid #dde4f6;
  112. border-bottom: 3px solid #dde4f6;
  113. border-left: 3px solid #979fb8;
  114. -webkit-transform: translateZ(0);
  115. transform: translateZ(0);
  116. -webkit-animation: fileuploaderSpin 1s infinite linear;
  117. animation: fileuploaderSpin 1s infinite linear;
  118. }
  119. .fileuploader-items-list {
  120. display: block;
  121. margin: 0 -15px;
  122. padding: 0;
  123. list-style: none;
  124. }
  125. .fileuploader-item {
  126. position: relative;
  127. margin: 0;
  128. padding: 20px 15px;
  129. border-bottom: 1px solid #e8e8e8;
  130. -webkit-animation: fileuploaderSlideIn 0.4s ease;
  131. animation: fileuploaderSlideIn 0.4s ease;
  132. }
  133. .fileuploader-item:last-child {
  134. border-bottom: 0;
  135. margin-bottom: -15px;
  136. }
  137. .fileuploader-item.upload-failed {
  138. background: rgba(219, 104, 104, 0.08);
  139. }
  140. .fileuploader-item.upload-pending .fileuploader-action-remove:after {
  141. width: 26px;
  142. height: 26px;
  143. right: -5px;
  144. top: 50%;
  145. margin-top: -13px;
  146. opacity: 0.2;
  147. }
  148. .fileuploader-item .columns {
  149. position: relative;
  150. z-index: 2;
  151. }
  152. .fileuploader-item .column-thumbnail {
  153. position: absolute;
  154. width: 36px;
  155. height: 36px;
  156. line-height: 36px;
  157. left: 0;
  158. top: 0;
  159. }
  160. .fileuploader-item .column-thumbnail .fileuploader-item-image {
  161. position: relative;
  162. width: 100%;
  163. height: 100%;
  164. border-radius: 4px;
  165. overflow: hidden;
  166. }
  167. .fileuploader-item .fileuploader-item-image img {
  168. max-width: none;
  169. max-height: 100%;
  170. min-height: 100%;
  171. }
  172. .fileuploader-item .fileuploader-item-image img, .fileuploader-item .fileuploader-item-image canvas {
  173. position: absolute;
  174. top: 50%;
  175. left: 50%;
  176. -webkit-transform: translateX(-50%) translateY(-50%);
  177. -moz-transform: translateX(-50%) translateY(-50%);
  178. transform: translateX(-50%) translateY(-50%);
  179. -webkit-animation: fileuploaderFadeIn .2s ease;
  180. animation: fileuploaderFadeIn .2s ease;
  181. }
  182. .fileuploader-item .column-thumbnail .fileuploader-item-image.fileuploader-loading:after {
  183. width: 24px;
  184. height: 24px;
  185. left: 50%;
  186. top: 50%;
  187. margin-left: -12px;
  188. margin-top: -12px;
  189. border-radius: 50%;
  190. opacity: 0.12;
  191. }
  192. .fileuploader-item .column-thumbnail .fileuploader-action-popup {
  193. display: none;
  194. position: absolute;
  195. top: 0;
  196. left: 0;
  197. width: 100%;
  198. height: 100%;
  199. background: rgba(0,0,0,0.2);
  200. border-radius: 4px;
  201. cursor: pointer;
  202. opacity: 0;
  203. -webkit-transition: all 0.2s ease-out;
  204. transition: all 0.2s ease-out;
  205. }
  206. .fileuploader-item.file-has-popup .column-thumbnail .fileuploader-action-popup {
  207. display: block;
  208. }
  209. .fileuploader-item .column-thumbnail .fileuploader-action-popup:hover {
  210. opacity: 1;
  211. }
  212. .fileuploader-item .column-thumbnail .fileuploader-action-popup:active {
  213. background: rgba(0,0,0,0.4);
  214. }
  215. .fileuploader-item.file-type-video .column-thumbnail .fileuploader-action-popup:after, .fileuploader-item.file-type-audio .column-thumbnail .fileuploader-action-popup:after {
  216. content: '';
  217. position: absolute;
  218. left: 50%;
  219. top: 50%;
  220. margin-left: -4px;
  221. margin-top: -8px;
  222. width: 0;
  223. height: 0;
  224. border-top: 8px solid rgba(0, 0, 0, 0);
  225. border-bottom: 8px solid rgba(0, 0, 0, 0);
  226. border-left: 10px solid #fff;
  227. }
  228. .fileuploader-item .fileuploader-item-icon {
  229. position: relative;
  230. width: 100%;
  231. height: 100%;
  232. text-align: center;
  233. color: #fff;
  234. font-size: 11px;
  235. background: #ddd;
  236. border-radius: 4px;
  237. cursor: default;
  238. -webkit-user-select: none;
  239. -moz-user-select: none;
  240. -ms-user-select: none;
  241. user-select: none;
  242. -webkit-animation: fileuploaderFadeIn .2s ease;
  243. animation: fileuploaderFadeIn .2s ease;
  244. }
  245. .fileuploader-item .fileuploader-item-icon.is-bright-color {
  246. color: #888;
  247. }
  248. .fileuploader-item .fileuploader-item-icon i {
  249. display: block;
  250. width: 90%;
  251. margin: 0 auto;
  252. overflow: hidden;
  253. text-overflow: ellipsis;
  254. font-style: normal;
  255. font-weight: bold;
  256. }
  257. .fileuploader-item .column-title {
  258. display: block;
  259. padding-left: 51px;
  260. padding-right: 81px;
  261. color: #74809D;
  262. }
  263. .fileuploader-item a {
  264. color: #74809D;
  265. text-decoration: none;
  266. }
  267. .fileuploader-item .column-title div {
  268. width: 100%;
  269. font-weight: bold;
  270. text-overflow: ellipsis;
  271. white-space: nowrap;
  272. overflow: hidden;
  273. }
  274. .fileuploader-item .column-title span {
  275. font-size: 12px;
  276. color: #979fb8;
  277. }
  278. .fileuploader-item .column-actions {
  279. position: absolute;
  280. right: 15px;
  281. top: 50%;
  282. margin-top: -9px;
  283. }
  284. .fileuploader-action {
  285. display: inline-block;
  286. position: relative;
  287. width: 18px;
  288. height: 18px;
  289. border-radius: 50%;
  290. cursor: pointer;
  291. vertical-align: top;
  292. -webkit-transform: translateZ(0px);
  293. transform: translateZ(0px);
  294. -webkit-transition: all 0.2s ease-out;
  295. transition: all 0.2s ease-out;
  296. }
  297. .fileuploader-item .column-actions .fileuploader-action + .fileuploader-action {
  298. margin-left: 10px;
  299. }
  300. .fileuploader-item .column-actions .fileuploader-action-success {
  301. position: absolute;
  302. right: 0;
  303. top: 0;
  304. }
  305. .fileuploader-item .column-actions .fileuploader-action-success:hover, .fileuploader-item .column-actions .fileuploader-action-success:active {
  306. opacity: 0;
  307. }
  308. .fileuploader-action-remove {
  309. background: #fae1e1;
  310. border: 1px solid #ffcfcf;
  311. }
  312. .fileuploader-action-remove:hover {
  313. background: #ffefef;
  314. }
  315. .fileuploader-action-remove:active {
  316. background: #ffcfcf;
  317. }
  318. .fileuploader-action-remove i:before, .fileuploader-action-remove i:after {
  319. content: '';
  320. position: absolute;
  321. top: 4px;
  322. left: 7px;
  323. height: 8px;
  324. width: 2px;
  325. background-color: #f59595;
  326. }
  327. .fileuploader-action-remove i:before {
  328. -webkit-transform: rotate(45deg);
  329. transform: rotate(45deg);
  330. }
  331. .fileuploader-action-remove i:after {
  332. -webkit-transform: rotate(-45deg);
  333. transform: rotate(-45deg);
  334. }
  335. .fileuploader-action-start {
  336. background: #6381E6;
  337. border-radius: 50%;
  338. }
  339. .fileuploader-action-start i {
  340. position: absolute;
  341. left: 50%;
  342. top: 50%;
  343. margin-left: -2px;
  344. margin-top: -5px;
  345. border-radius: 2px;
  346. width: 0;
  347. height: 0;
  348. border-top: 5px solid transparent;
  349. border-bottom: 5px solid transparent;
  350. border-left: 5px solid #fff;
  351. }
  352. .fileuploader-action-start:hover {
  353. background: #758fe9;
  354. }
  355. .fileuploader-action-start:active {
  356. background: #6381E6;
  357. box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1);
  358. }
  359. .fileuploader-action-success {
  360. background: #6381E6;
  361. border: 0;
  362. -webkit-transform: rotate(45deg);
  363. transform: rotate(45deg);
  364. }
  365. .fileuploader-action-success i:before, .fileuploader-action-success i:after {
  366. content: '';
  367. display: block;
  368. position: absolute;
  369. top: 0;
  370. left: 0;
  371. width: 100%;
  372. height: 100%;
  373. -webkit-transform: rotate(0);
  374. transform: rotate(0);
  375. }
  376. .fileuploader-action-success i:before {
  377. width: 4px;
  378. height: 2px;
  379. left: 6px;
  380. top: 11px;
  381. background: #fff;
  382. }
  383. .fileuploader-action-success i:after {
  384. top: 4px;
  385. left: 9px;
  386. width: 2px;
  387. height: 9px;
  388. background: #fff;
  389. }
  390. .fileuploader-action-download {
  391. background: #6381E6;
  392. border-radius: 50%;
  393. }
  394. .fileuploader-action-download i {
  395. position: absolute;
  396. left: 50%;
  397. top: 50%;
  398. margin-left: -1px;
  399. margin-top: -4px;
  400. width: 2px;
  401. height: 5px;
  402. border-radius: 0;
  403. background: #fff;
  404. }
  405. .fileuploader-action-download i:after {
  406. content: '';
  407. position: absolute;
  408. width: 0;
  409. height: 0;
  410. bottom: -4px;
  411. left: -3px;
  412. border-left: 4px solid rgba(0, 0, 0, 0);
  413. border-right: 4px solid rgba(0, 0, 0, 0);
  414. border-top: 5px solid #fff;
  415. border-radius: 2px;
  416. }
  417. .fileuploader-action-download:hover {
  418. background: #758fe9;
  419. }
  420. .fileuploader-action-download:active {
  421. background: #6381E6;
  422. box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1);
  423. }
  424. .fileuploader-action-retry {
  425. background: #6381E6;
  426. border-radius: 50%;
  427. }
  428. .fileuploader-action-retry i:before {
  429. content: '';
  430. position: absolute;
  431. width: 10px;
  432. height: 10px;
  433. left: 4px;
  434. top: 4px;
  435. border-radius: 50%;
  436. border: 2px solid #fff;
  437. }
  438. .fileuploader-action-retry i:after {
  439. content: '';
  440. position: absolute;
  441. width: 6px;
  442. height: 3px;
  443. left: 3px;
  444. top: 9px;
  445. background: #6381E6;
  446. -webkit-transform: rotate(-35deg);
  447. transform: rotate(-35deg);
  448. }
  449. .fileuploader-action-retry:hover, .fileuploader-action-retry:hover i:after {
  450. background: #758fe9;
  451. }
  452. .fileuploader-action-retry:active {
  453. box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1);
  454. }
  455. .fileuploader-action-retry:active, .fileuploader-action-retry:active i:after {
  456. background: #6381E6;
  457. }
  458. .fileuploader-action-sort {
  459. background: #b0b8d0;
  460. text-align: center;
  461. cursor: move;
  462. }
  463. .fileuploader-action-sort:hover, .fileuploader-action-sort:active {
  464. background: #979fb8;
  465. }
  466. .fileuploader-action-sort i {
  467. position: relative;
  468. display: inline-block;
  469. top: 8px;
  470. width: 8px;
  471. height: 2px;
  472. background: #fff;
  473. vertical-align: top;
  474. }
  475. .fileuploader-action-sort i:before {
  476. content: '';
  477. position: absolute;
  478. display: inline-block;
  479. background: #fff;
  480. width: 100%;
  481. height: 2px;
  482. top: -3px;
  483. left: 0;
  484. }
  485. .fileuploader-action-sort i:after {
  486. content: '';
  487. position: absolute;
  488. display: inline-block;
  489. background: #fff;
  490. width: 100%;
  491. height: 2px;
  492. top: 3px;
  493. left: 0;
  494. }
  495. .fileuploader-item .fileuploader-progressbar {
  496. position: absolute;
  497. left: 0;
  498. bottom: 0;
  499. width: 100%;
  500. height: 4px;
  501. border-radius: 4px;
  502. overflow: hidden;
  503. }
  504. .fileuploader-item .fileuploader-progressbar .bar {
  505. position: absolute;
  506. left: 0;
  507. top: 0;
  508. width: 0%;
  509. height: 100%;
  510. border-radius: 4px;
  511. background: #6381E6;
  512. -webkit-transition: width 0.3s ease;
  513. transition: width 0.3s ease;
  514. }
  515. .fileuploader-item .progress-bar2 .fileuploader-progressbar {
  516. position: absolute;
  517. top: 0;
  518. left: 0;
  519. width: 100%;
  520. height: 100%;
  521. z-index: 1;
  522. -webkit-user-select: none;
  523. -moz-user-select: none;
  524. -ms-user-select: none;
  525. user-select: none;
  526. }
  527. .fileuploader-item .progress-bar2 .fileuploader-progressbar .bar {
  528. position: absolute;
  529. left: 0;
  530. top: 0;
  531. width: 0%;
  532. height: 100%;
  533. border-radius: 0;
  534. background: rgba(104, 125, 219, 0.08);
  535. -webkit-transition: width 0.3s ease;
  536. transition: width 0.3s ease;
  537. }
  538. .fileuploader-item .progress-bar2 span {
  539. position: absolute;
  540. top: 50%;
  541. margin-top: -29px;
  542. right: 15px;
  543. color: rgba(151, 159, 184, 0.16);
  544. font-size: 48px;
  545. }
  546. .fileuploader-input-caption .fileuploader-pending-loader {
  547. margin-right: 5px;
  548. }
  549. .fileuploader-pending-loader {
  550. position: relative;
  551. display: inline-block;
  552. width: 14px;
  553. height: 14px;
  554. overflow: hidden;
  555. vertical-align: middle;
  556. }
  557. .fileuploader-pending-loader:after, .fileuploader-pending-loader .left-half {
  558. background: #fff;
  559. }
  560. .fileuploader-pending-loader .right-half, .fileuploader-pending-loader .spinner {
  561. background: #789BEC;
  562. }
  563. .fileuploader-pending-loader:after {
  564. content: '';
  565. position: absolute;
  566. top: 3px;
  567. left: 3px;
  568. width: 8px;
  569. height: 8px;
  570. border-radius: 50%;
  571. z-index: 4;
  572. }
  573. .fileuploader-pending-loader .left-half, .fileuploader-pending-loader .right-half, .fileuploader-pending-loader .spinner {
  574. position: absolute;
  575. top: 0;
  576. width: 50%;
  577. height: 100%;
  578. }
  579. .fileuploader-pending-loader .left-half {
  580. left: 0;
  581. opacity: 1;
  582. border-radius: 100% 0 0 100%/ 50% 0 0 50%;
  583. -webkit-animation: fileuploaderOpacity 3s steps(1, end) infinite;
  584. animation: fileuploaderOpacity 3s steps(1, end) infinite;
  585. z-index: 3;
  586. }
  587. .fileuploader-pending-loader .right-half {
  588. right: 0;
  589. opacity: 0;
  590. border-radius: 0 100% 100% 0/ 0 50% 50% 0;
  591. -webkit-animation: fileuploaderOpacity 3s steps(1, end) reverse infinite;
  592. animation: fileuploaderOpacity 3s steps(1, end) reverse infinite;
  593. z-index: 1;
  594. }
  595. .fileuploader-pending-loader .spinner {
  596. left: 0;
  597. border-radius: 100% 0 0 100%/ 50% 0 0 50%;
  598. -webkit-animation: fileuploaderSpin 3s linear infinite;
  599. animation: fileuploaderSpin 3s linear infinite;
  600. -webkit-transform-origin: center right;
  601. transform-origin: center right;
  602. z-index: 2;
  603. }
  604. .fileuploader-popup {
  605. position: fixed;
  606. top: 0;
  607. left: 0;
  608. width: 100%;
  609. height: 100%;
  610. overflow: hidden;
  611. background: rgba(40, 46, 61, 0.9);
  612. z-index: 90;
  613. -webkit-animation: fileuploaderFadeIn 0.4s ease;
  614. animation: fileuploaderFadeIn 0.4s ease;
  615. }
  616. .fileuploader-popup-preview {
  617. width: 100%;
  618. height: 100%;
  619. padding: 40px;
  620. display: -webkit-box;
  621. display: -ms-flexbox;
  622. display: flex;
  623. -webkit-box-align: center;
  624. -ms-flex-align: center;
  625. align-items: center;
  626. -webkit-box-pack: center;
  627. -ms-flex-pack: center;
  628. justify-content: center;
  629. -webkit-box-orient: vertical;
  630. -webkit-box-direction: normal;
  631. -ms-flex-direction: column;
  632. flex-direction: column;
  633. z-index: 2;
  634. }
  635. .fileuploader-popup-preview .node {
  636. position: relative;
  637. display: block;
  638. width: 100%;
  639. height: 100%;
  640. min-height: 10px;
  641. text-align: center;
  642. -webkit-transform: translateZ(0);
  643. transform: translateZ(0);
  644. -webkit-animation: fileuploaderSlideInDown 0.4s;
  645. animation: fileuploaderSlideInDown 0.4s;
  646. }
  647. .fileuploader-popup-preview .node.image > img, .fileuploader-popup-preview .node.video > video, .fileuploader-popup-preview .node.audio > audio, .fileuploader-popup-preview .node.astext > div {
  648. max-width: 100%;
  649. max-height: 100%;
  650. margin: 0;
  651. padding: 0;
  652. color: #47525d;
  653. background: #fff;
  654. -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
  655. box-shadow: 0 0 20px rgba(0,0,0,0.4);
  656. border-radius: 4px;
  657. }
  658. .fileuploader-popup-preview .node.audio audio {
  659. width: 450px;
  660. }
  661. .fileuploader-popup-preview .node.astext div {
  662. max-width: 992px;
  663. padding: 20px;
  664. margin: 0 auto;
  665. font-size: 14px;
  666. line-height: 16px;
  667. text-align: left;
  668. overflow-y: auto;
  669. white-space: pre-wrap;
  670. }
  671. .fileuploader-popup-preview .tools {
  672. width: 100%;
  673. margin-top: 30px;
  674. }
  675. .fileuploader-popup-preview .tools:after {
  676. content: '';
  677. position: absolute;
  678. left: 0;
  679. width: 100%;
  680. margin-top: -240px;
  681. height: 2000px;
  682. background: rgba(35, 40, 54, 0.96);
  683. -webkit-box-shadow: 0px -2px 10px rgba(0,0,0,0.4);
  684. box-shadow: 0px -2px 10px rgba(0,0,0,0.4);
  685. z-index: -1;
  686. }
  687. .fileuploader-popup-preview .tools ul {
  688. display: table;
  689. list-style: none;
  690. margin: 0 auto;
  691. padding: 0;
  692. -webkit-animation: fileuploaderSlideIn 0.4s;
  693. animation: fileuploaderSlideIn 0.4s;
  694. }
  695. .fileuploader-popup-preview .tools li {
  696. display: inline-block;
  697. padding: 0 20px;
  698. max-width: 50%;
  699. vertical-align: middle;
  700. }
  701. .fileuploader-popup-preview .tools li span {
  702. display: block;
  703. color: #868896;
  704. margin-top: 3px;
  705. font-size: 14px;
  706. }
  707. .fileuploader-popup-preview .tools li h5 {
  708. margin: 8px 0;
  709. color: #dfdeee;
  710. font-size: 14px;
  711. font-weight: bold;
  712. white-space: nowrap;
  713. overflow: hidden;
  714. text-overflow: ellipsis;
  715. }
  716. .fileuploader-popup-preview .tools li a {
  717. display: inline-block;
  718. cursor: pointer;
  719. text-align: center;
  720. text-decoration: none;
  721. -webkit-transition: opacity 0.2s ease;
  722. transition: opacity 0.2s ease;
  723. }
  724. .fileuploader-popup-preview .tools li a:hover {
  725. opacity: 0.6;
  726. }
  727. .fileuploader-popup-preview .tools li a i {
  728. display: inline-block;
  729. width: 23px;
  730. height: 23px;
  731. margin-bottom: 2px;
  732. background-size: contain;
  733. background-repeat: no-repeat;
  734. background-position: center;
  735. }
  736. .fileuploader-popup-preview .tools li a[data-action="crop"] i {
  737. background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNiAwLjd2LTAuN2gtMC43bC0zIDNoLTcuM3YtM2gtMnYzaC0zdjJoM3Y4aDh2M2gydi0zaDN2LTJoLTN2LTcuM2wzLTN6TTUgNWg1LjNsLTUuMyA1LjN2LTUuM3pNMTEgMTFoLTUuM2w1LjMtNS4zdjUuM3oiLz4KPC9zdmc+Cg==');
  738. }
  739. .fileuploader-popup-preview .tools li a[data-action="rotate-cw"] i {
  740. background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNiA3di00bC0xLjEgMS4xYy0xLjMtMi41LTMuOS00LjEtNi45LTQuMS00LjQgMC04IDMuNi04IDhzMy42IDggOCA4YzIuNCAwIDQuNi0xLjEgNi0yLjhsLTEuNS0xLjNjLTEuMSAxLjMtMi43IDIuMS00LjUgMi4xLTMuMyAwLTYtMi43LTYtNnMyLjctNiA2LTZjMi40IDAgNC41IDEuNSA1LjUgMy41bC0xLjUgMS41aDR6Ii8+Cjwvc3ZnPgo=');
  741. }
  742. .fileuploader-popup-preview .tools li a[data-action="remove"] i {
  743. background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yIDV2MWgxdjljMCAwIDEuMSAxIDQuNSAxczQuNS0xIDQuNS0xdi05aDF2LTFoLTExek02IDE0aC0xdi03aDF2N3pNOCAxNGgtMXYtN2gxdjd6TTEwIDE0aC0xdi03aDF2N3oiLz4KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyIDNjMCAwIDAtMC41LTItMC44di0wLjdjMC0wLjgtMC43LTEuNS0xLjUtMS41aC0yYy0wLjggMC0xLjUgMC43LTEuNSAxLjV2MC43Yy0xLjYgMC4zLTIgMC44LTIgMC44aC0xdjFoMTF2LTFoLTF6TTYgMS41YzAtMC4zIDAuMi0wLjUgMC41LTAuNWgyYzAuMiAwIDAuNSAwLjIgMC41IDAuNXYwLjZjMC0wLjEtMC45LTAuMS0xLjUtMC4xcy0xLjEgMC0xLjUgMC4xdi0wLjZ6Ii8+Cjwvc3ZnPgo=');
  744. }
  745. .fileuploader-popup-preview .tools li.separator {
  746. position: relative;
  747. margin: 5px 40px 5px 0px;
  748. height: 40px;
  749. border-right: 1px solid #36394e;
  750. }
  751. .fileuploader-popup-preview .tools .buttons {
  752. text-align: center;
  753. margin-top: 30px;
  754. -webkit-animation: fileuploaderSlideIn 0.4s;
  755. animation: fileuploaderSlideIn 0.4s;
  756. }
  757. .fileuploader-popup-button {
  758. display: inline-block;
  759. background: transparent;
  760. color: #596671;
  761. font-weight: bold;
  762. border-radius: 4px;
  763. padding: 11px 20px;
  764. margin: 0 10px;
  765. cursor: pointer;
  766. border: none;
  767. outline: 0;
  768. border: 2px solid #596671;
  769. text-decoration: none;
  770. -webkit-transition: all .2s ease-out;
  771. transition: all .2s ease-out;
  772. }
  773. .fileuploader-popup-button:hover {
  774. background: #e6ebf4;
  775. border-color: #e6ebf4;
  776. color: #90a0bc;
  777. text-decoration: none;
  778. }
  779. .fileuploader-popup-button:focus, .fileuploader-popup-button:active {
  780. color: #90a0bc;
  781. background: #d1d9e8;
  782. border-color: #d1d9e8;
  783. text-decoration: none;
  784. }
  785. .fileuploader-popup-button.button-success {
  786. color: #fff;
  787. background: #6381E6;
  788. border-color: #6381E6;
  789. }
  790. .fileuploader-popup-button.button-success:hover {
  791. background: #758fe9;
  792. border-color: #758fe9;
  793. color: #fff;
  794. text-decoration: none;
  795. }
  796. .fileuploader-popup-button.button-success:focus, .fileuploader-popup-button.button-success:active {
  797. color: #fff;
  798. background: #6381E6;
  799. border-color: #6381E6;
  800. }
  801. .fileuploader-cropper, .fileuploader-cropper * {
  802. -webkit-user-select: none;
  803. -moz-user-select: none;
  804. -ms-user-select: none;
  805. user-select: none;
  806. }
  807. .fileuploader-cropper {
  808. position: absolute;
  809. top: 0;
  810. left: 0;
  811. width: 100%;
  812. height: 100%;
  813. background: rgba(17,20,27,.65);
  814. z-index: 9;
  815. }
  816. .fileuploader-cropper-area {
  817. position: absolute;
  818. left: 0;
  819. top: 0;
  820. width: 0;
  821. height: 0;
  822. z-index: 2;
  823. }
  824. .fileuploader-cropper-area.has-grid:before, .fileuploader-cropper-area.has-grid:after {
  825. content: '';
  826. position: absolute;
  827. border: 1px solid rgba(250, 250, 250, 0.8);
  828. opacity: 0;
  829. -webkit-transition: all 0.4s ease;
  830. transition: all 0.4s ease;
  831. z-index: 1;
  832. }
  833. .fileuploader-cropper-area.has-grid:before {
  834. top: 0;
  835. left: 50%;
  836. height: 100%;
  837. width: 34%;
  838. border-top: 0;
  839. border-bottom: 0;
  840. -webkit-transform: translateX(-50%);
  841. transform: translateX(-50%);
  842. }
  843. .fileuploader-cropper-area.has-grid:after {
  844. top: 50%;
  845. left: 0;
  846. height: 34%;
  847. width: 100%;
  848. border-left: 0;
  849. border-right: 0;
  850. -webkit-transform: translateY(-50%);
  851. transform: translateY(-50%);
  852. }
  853. .fileuploader-cropper-area.has-grid.moving:before, .fileuploader-cropper-area.has-grid.moving:after {
  854. opacity: 1;
  855. }
  856. .fileuploader-cropper-area .point {
  857. position: absolute;
  858. width: 12px;
  859. height: 12px;
  860. background: #fafafa;
  861. box-shadow: 0 0 6px rgba(0,0,0,0.4);
  862. border-radius: 50%;
  863. z-index: 3;
  864. }
  865. .fileuploader-cropper-area .point-a {
  866. top: -6px;
  867. left: -6px;
  868. cursor: nw-resize;
  869. }
  870. .fileuploader-cropper-area .point-b {
  871. top: -6px;
  872. left: 50%;
  873. margin-left: -6px;
  874. cursor: n-resize;
  875. }
  876. .fileuploader-cropper-area .point-c {
  877. top: -6px;
  878. right: -6px;
  879. cursor: ne-resize;
  880. }
  881. .fileuploader-cropper-area .point-d {
  882. top: 50%;
  883. right: -6px;
  884. margin-top: -6px;
  885. cursor: w-resize;
  886. }
  887. .fileuploader-cropper-area .point-e {
  888. bottom: -6px;
  889. right: -6px;
  890. cursor: nw-resize;
  891. }
  892. .fileuploader-cropper-area .point-f {
  893. bottom: -6px;
  894. left: 50%;
  895. margin-left: -6px;
  896. cursor: s-resize;
  897. }
  898. .fileuploader-cropper-area .point-g {
  899. bottom: -6px;
  900. left: -6px;
  901. cursor: sw-resize;
  902. }
  903. .fileuploader-cropper-area .point-h {
  904. left: -6px;
  905. top: 50%;
  906. margin-top: -6px;
  907. cursor: w-resize;
  908. }
  909. .fileuploader-cropper-area .area-move {
  910. position: absolute;
  911. width: 95%;
  912. height: 95%;
  913. left: 50%;
  914. top: 50%;
  915. z-index: 2;
  916. -webkit-transform: translateX(-50%) translateY(-50%);
  917. transform: translateX(-50%) translateY(-50%);
  918. cursor: move;
  919. }
  920. .fileuploader-cropper-area .area-image {
  921. position: relative;
  922. overflow: hidden;
  923. width: 100%;
  924. height: 100%;
  925. }
  926. .fileuploader-cropper-area .area-image img {
  927. width: auto;
  928. height: auto;
  929. max-width: none;
  930. max-height: none;
  931. position: absolute;
  932. left: 0;
  933. top: 0;
  934. background: #fff;
  935. -webkit-transform-origin: top left;
  936. transform-origin: top left;
  937. }
  938. .fileuploader-item.sorting {
  939. background: #f5f6fA;
  940. border-radius: 4px;
  941. opacity: 0.9;
  942. box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  943. z-index: 799;
  944. }
  945. .fileuploader-item.sorting, .fileuploader-item.sorting .fileuploader-item-image img, .fileuploader-item.sorting .fileuploader-item-image canvas, .fileuploader-item.sorting .fileuploader-item-icon, .fileuploader-sorter-placeholder {
  946. -webkit-animation: none;
  947. animation: none;
  948. }
  949. .fileuploader-sorter-placeholder {
  950. background: rgba(0, 0, 0, 0.03);
  951. margin: 0;
  952. padding: 0;
  953. }
  954. @-webkit-keyframes fileuploaderOpacity {
  955. 0% {
  956. opacity: 1;
  957. }
  958. 50%,100% {
  959. opacity: 0;
  960. }
  961. }
  962. @keyframes fileuploaderOpacity {
  963. 0% {
  964. opacity: 1;
  965. }
  966. 50%,100% {
  967. opacity: 0;
  968. }
  969. }
  970. @-webkit-keyframes fileuploaderFadeIn {
  971. from {
  972. opacity: 0;
  973. }
  974. to {
  975. opacity: 1;
  976. }
  977. }
  978. @keyframes fileuploaderFadeIn {
  979. from {
  980. opacity: 0;
  981. }
  982. to {
  983. opacity: 1;
  984. }
  985. }
  986. @-webkit-keyframes fileuploaderScaleIn {
  987. from {
  988. opacity: 0;
  989. -webkit-transform: scale(0);
  990. transform: scale(0);
  991. }
  992. to {
  993. opacity: 1;
  994. -webkit-transform: scale(1);
  995. transform: scale(1);
  996. }
  997. }
  998. @keyframes fileuploaderScaleIn {
  999. from {
  1000. opacity: 0;
  1001. -webkit-transform: scale(0);
  1002. transform: scale(0);
  1003. }
  1004. to {
  1005. opacity: 1;
  1006. -webkit-transform: scale(1);
  1007. transform: scale(1);
  1008. }
  1009. }
  1010. @-webkit-keyframes fileuploaderSlideIn {
  1011. from {
  1012. -webkit-transform: translateY(100%);
  1013. transform: translateY(100%);
  1014. opacity: 0;
  1015. }
  1016. to {
  1017. -webkit-transform: translateY(0%);
  1018. transform: translateY(0%);
  1019. opacity: 1;
  1020. }
  1021. }
  1022. @keyframes fileuploaderSlideIn {
  1023. from {
  1024. -webkit-transform: translateY(50%);
  1025. transform: translateY(50%);
  1026. opacity: 0;
  1027. }
  1028. to {
  1029. -webkit-transform: translateY(0%);
  1030. transform: translateY(0%);
  1031. opacity: 1;
  1032. }
  1033. }
  1034. @-webkit-keyframes fileuploaderSlideOut {
  1035. from {
  1036. -webkit-transform: translateY(0%);
  1037. transform: translateY(0%);
  1038. opacity: 1;
  1039. }
  1040. to {
  1041. -webkit-transform: translateY(50%);
  1042. transform: translateY(50%);
  1043. opacity: 0;
  1044. }
  1045. }
  1046. @keyframes fileuploaderSlideOut {
  1047. from {
  1048. -webkit-transform: translateY(0%);
  1049. transform: translateY(0%);
  1050. opacity: 1;
  1051. }
  1052. to {
  1053. -webkit-transform: translateY(50%);
  1054. transform: translateY(50%);
  1055. opacity: 0;
  1056. }
  1057. }
  1058. @-webkit-keyframes fileuploaderSlideInDown {
  1059. from {
  1060. -webkit-transform: translateY(-5%);
  1061. transform: translateY(-5%);
  1062. opacity: 0;
  1063. }
  1064. to {
  1065. -webkit-transform: translateY(0);
  1066. transform: translateY(0);
  1067. opacity: 1;
  1068. }
  1069. }
  1070. @keyframes fileuploaderSlideInDown {
  1071. from {
  1072. -webkit-transform: translateY(-5%);
  1073. transform: translateY(-5%);
  1074. opacity: 0;
  1075. }
  1076. to {
  1077. -webkit-transform: translateY(0);
  1078. transform: translateY(0);
  1079. opacity: 1;
  1080. }
  1081. }
  1082. @-webkit-keyframes fileuploaderSpin {
  1083. 0% {
  1084. -webkit-transform: rotate(0deg);
  1085. transform: rotate(0deg);
  1086. }
  1087. 100% {
  1088. -webkit-transform: rotate(360deg);
  1089. transform: rotate(360deg);
  1090. }
  1091. }
  1092. @keyframes fileuploaderSpin {
  1093. 0% {
  1094. -webkit-transform: rotate(0deg);
  1095. transform: rotate(0deg);
  1096. }
  1097. 100% {
  1098. -webkit-transform: rotate(360deg);
  1099. transform: rotate(360deg);
  1100. }
  1101. }