imageuploadify.min.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. .imageuploadify {
  2. border: 2px dashed #d2d2d2;
  3. position: relative;
  4. min-height: 350px;
  5. min-width: 250px;
  6. max-width: 1000px;
  7. margin: auto;
  8. display: flex;
  9. padding: 0;
  10. flex-direction: column;
  11. text-align: center;
  12. background-color: #fff;
  13. color: #007bff
  14. }
  15. .imageuploadify .imageuploadify-overlay {
  16. z-index: 10;
  17. width: 100%;
  18. height: 100%;
  19. position: absolute;
  20. flex-direction: column;
  21. top: 0;
  22. left: 0;
  23. display: none;
  24. font-size: 7em;
  25. background-color: rgba(242, 242, 242, .7);
  26. text-align: center;
  27. pointer-events: none
  28. }
  29. .imageuploadify .imageuploadify-overlay i {
  30. z-index: 10;
  31. position: absolute;
  32. top: 50%;
  33. left: 50%;
  34. transform: translate(-50%, -50%);
  35. pointer-events: none
  36. }
  37. .imageuploadify .imageuploadify-images-list {
  38. display: inline-block
  39. }
  40. .imageuploadify .imageuploadify-images-list i {
  41. display: block;
  42. font-size: 7em;
  43. text-align: center;
  44. margin-top: .5em;
  45. padding-bottom: 12px
  46. }
  47. .imageuploadify .imageuploadify-images-list span.imageuploadify-message {
  48. font-size: 24px;
  49. border-top: 1px solid #007bff;
  50. border-bottom: 1px solid #007bff;
  51. padding: 10px;
  52. display: inline-block
  53. }
  54. .imageuploadify .imageuploadify-images-list button.btn-default {
  55. display: block;
  56. color: #007bff;
  57. border-color: #007bff;
  58. border-radius: 1em;
  59. margin: 25px auto;
  60. width: 100%;
  61. max-width: 500px
  62. }
  63. .imageuploadify .imageuploadify-images-list .imageuploadify-container {
  64. width: 100px;
  65. height: 100px;
  66. position: relative;
  67. overflow: hidden;
  68. margin-bottom: 1em;
  69. float: left;
  70. border-radius: 12px;
  71. box-shadow: 0 0 4px 0 #888
  72. }
  73. .imageuploadify .imageuploadify-images-list .imageuploadify-container button.btn-danger {
  74. position: absolute;
  75. top: 3px;
  76. right: 3px;
  77. width: 20px;
  78. height: 20px;
  79. border-radius: 15px;
  80. font-size: 10px;
  81. line-height: 1.42;
  82. padding: 2px 0;
  83. text-align: center;
  84. z-index: 3
  85. }
  86. .imageuploadify .imageuploadify-images-list .imageuploadify-container img {
  87. height: 100px;
  88. left: 50%;
  89. position: absolute;
  90. top: 50%;
  91. transform: translate(-50%, -50%);
  92. width: auto
  93. }
  94. .imageuploadify .imageuploadify-images-list .imageuploadify-container .imageuploadify-details {
  95. position: absolute;
  96. top: 0;
  97. padding-top: 20px;
  98. width: 100%;
  99. height: 100%;
  100. overflow: hidden;
  101. text-overflow: ellipsis;
  102. white-space: nowrap;
  103. background: rgba(255, 255, 255, .5);
  104. z-index: 2;
  105. opacity: 0
  106. }
  107. .imageuploadify .imageuploadify-images-list .imageuploadify-container .imageuploadify-details span {
  108. display: block
  109. }