uploaders.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. .bx-uploader-msg-err {
  2. color:#900;
  3. }
  4. .bx-uploader-ghost{
  5. max-width: 290px;
  6. display: flex;
  7. flex-direction: column;
  8. align-items: center;
  9. justify-content: center;
  10. grid-gap: 0.5rem;
  11. }
  12. .bx-uploader-ghost.bx-uploader-ghost-single{
  13. width: auto;
  14. }
  15. .bx-uploader-ghost-cnt{
  16. display: flex;
  17. flex-direction: column;
  18. position: relative;
  19. min-width: 100px;
  20. min-height: 40px;
  21. }
  22. .bx-form-input-files-result{
  23. display: flex;
  24. flex-wrap: wrap;
  25. justify-content: flex-start;
  26. grid-gap: 0.5rem;
  27. }
  28. .bx-base-general-icon-wrapper{
  29. position: relative;
  30. display: flex;
  31. justify-content: center;
  32. }
  33. .bx-base-general-uploader-ghost{
  34. position: absolute;
  35. bottom: 0.5rem;
  36. display: flex;
  37. justify-content: center;
  38. width: 100%;
  39. flex-wrap: wrap;
  40. grid-gap: 0.5rem;
  41. }
  42. .bx-base-general-uploader-ghost .bx-btn.bx-btn-small{
  43. height: auto !important;
  44. line-height: normal !important;
  45. min-height: 30px;
  46. display: flex;
  47. padding: 0 0.5rem;
  48. margin: 0px;
  49. }
  50. .bx-uploader-ghost-preview {
  51. width:101px;
  52. float:left;
  53. }
  54. .bx-uploader-ghost-preview img {
  55. width:101px;
  56. min-height:20px;
  57. background-image:url(../images/loading-spinner.gif);
  58. background-repeat:no-repeat;
  59. background-position:center center;
  60. -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
  61. }
  62. .bx-uploader-ghost-form-filename {
  63. }
  64. .bx-uploader-ghost-form-actions {
  65. }
  66. /* simple uploader */
  67. .bx-uploader-simple-file {
  68. margin-bottom:5px;
  69. }
  70. /* html5 filepond uploader */
  71. .bx-uploader-html5-drop-area .filepond--item {
  72. width: calc(33% - 0.5em);
  73. }
  74. .filepond--panel-root{
  75. background: none !important;
  76. }
  77. .filepond--panel-center.filepond--panel-root{
  78. visibility: visible !important;
  79. transform: translate3d(0px, 8px, 0px) scale3d(1, 0.6, 1);
  80. }
  81. .filepond--panel-bottom.filepond--panel-root{
  82. transform: translate3d(0px, 68px, 0px);
  83. }
  84. .bx-uploader-html5-drop-area{
  85. max-height: 30em;
  86. }
  87. .filepond{
  88. min-height: 76px;
  89. margin-bottom: 0.5rem !important;
  90. }
  91. .bx-uploader-html5-drop-area.filepond .dz-message {
  92. margin:3.5em 0;
  93. }
  94. .bx-uploader-html5-errors-area {
  95. max-height:2.75rem;
  96. overflow-y:auto;
  97. }
  98. .bx-uploader-html5-paste-catcher {
  99. width:0;
  100. height:0;
  101. border:none;
  102. margin:0;
  103. padding:0;
  104. float: right;
  105. }
  106. .border-dashed {
  107. border-style: dashed;
  108. }
  109. .rounded-lg {
  110. border-radius: .5rem;
  111. }
  112. /* crop uploader */
  113. .bx-popup-content-wrapped .bx-croppie-element {
  114. padding:0;
  115. min-height:340px;
  116. }
  117. .bx-popup-content-wrapped .bx-crop-action {
  118. display: block;
  119. white-space: nowrap;
  120. text-overflow: ellipsis;
  121. overflow: hidden;
  122. }
  123. /* record video uploader */
  124. .bx-uploader-record-video-controls {
  125. text-align: center;
  126. display: none;
  127. }
  128. .bx-uploader-record-video-controls .bx-btn {
  129. float: none;
  130. display: inline-block;
  131. }
  132. .bx-uploader-recording-stop {
  133. display: none;
  134. }
  135. #bx-upoloader-recording-preview {
  136. display: none;
  137. }
  138. .bx-record-video-preview-filesize {
  139. text-align: center;
  140. margin: 0.2rem 0;
  141. }
  142. .bx-record-camera-switch {
  143. margin-bottom: 0.5rem;
  144. text-align: right;
  145. display: none;
  146. }
  147. @keyframes bx-uploader-recording-animation {
  148. 0% {opacity: 0;}
  149. 50% {opacity: 1;}
  150. 100% {opacity: 0;}
  151. }
  152. .bx-uploader-recording-blinking-circle {
  153. animation-name: bx-uploader-recording-animation;
  154. animation-duration: 2s;
  155. animation-iteration-count: infinite;
  156. }