form-file-uploader.css 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .dropzone {
  2. min-height: 350px;
  3. border: 2px dashed #7367f0;
  4. background: #f8f8f8;
  5. position: relative; }
  6. .dropzone .dz-message {
  7. font-size: 2rem;
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. width: 100%;
  12. height: 100%;
  13. color: #7367f0;
  14. display: flex;
  15. justify-content: center;
  16. align-items: center;
  17. margin: 0; }
  18. .dropzone .dz-message:before {
  19. content: '';
  20. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237367f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-download'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
  21. font-size: 80px;
  22. position: absolute;
  23. top: 14rem;
  24. width: 80px;
  25. height: 80px;
  26. display: inline-block;
  27. line-height: 1;
  28. z-index: 2;
  29. color: #7367f0;
  30. text-indent: 0px;
  31. font-weight: normal;
  32. -webkit-font-smoothing: antialiased; }
  33. .dropzone .dz-preview {
  34. background: transparent !important; }
  35. .dropzone .dz-preview .dz-error-mark,
  36. .dropzone .dz-preview .dz-success-mark {
  37. z-index: 10; }
  38. .dropzone .dz-preview .dz-image {
  39. border-radius: 0.357rem; }
  40. .dropzone .dz-preview.dz-image-preview {
  41. background: transparent !important; }
  42. .dropzone .dz-preview .dz-error-message {
  43. background: #ea5455; }
  44. .dropzone .dz-preview .dz-error-message:after {
  45. border-bottom: 6px solid #ea5455; }
  46. .dropzone .dz-preview .dz-remove {
  47. font-size: 1.1rem;
  48. color: #ea5455;
  49. line-height: 2rem; }
  50. .dropzone .dz-preview .dz-remove:before {
  51. content: '';
  52. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea5455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  53. display: inline-block;
  54. line-height: 1;
  55. z-index: 2;
  56. text-indent: 0px;
  57. font-weight: normal;
  58. -webkit-font-smoothing: antialiased; }
  59. .dropzone .dz-preview .dz-remove:hover {
  60. text-decoration: none;
  61. color: #e42728; }
  62. @media (max-width: 576px) {
  63. .dropzone .dz-message {
  64. font-size: 1.5rem; }
  65. .dropzone .dz-message:before {
  66. top: 15rem;
  67. width: 50px;
  68. height: 50px; } }
  69. .dark-layout .dropzone {
  70. background-color: #2e3750; }