jquery.fileupload.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. .upload-form {
  2. cursor: pointer; }
  3. .upload-form input {
  4. position: absolute;
  5. top: 0;
  6. right: 0;
  7. display: none;
  8. width: 100%;
  9. height: 100%;
  10. margin: 0;
  11. font-size: 200px;
  12. cursor: pointer;
  13. -ms-filter: "alpha(opacity=0)";
  14. opacity: 0;
  15. direction: ltr; }
  16. .uploader-inline {
  17. border: 2px dashed #a3afb7;
  18. border-radius: 0.215rem; }
  19. .upload-instructions {
  20. margin: 150px 20px;
  21. font-size: 24px;
  22. text-align: center; }
  23. @media (max-width: 1199.98px) {
  24. .upload-instructions {
  25. margin: 120px 20px;
  26. font-size: 22px; } }
  27. @media (max-width: 991.98px) {
  28. .upload-instructions {
  29. margin: 100px 20px;
  30. font-size: 20px; } }
  31. @media (max-width: 767.98px) {
  32. .upload-instructions {
  33. margin: 60px 20px;
  34. font-size: 16px; } }
  35. .has-file .file-wrap {
  36. padding: 20px;
  37. background: #fff;
  38. border-radius: 0.215rem; }
  39. .has-file .uploader-inline {
  40. display: none; }
  41. .file-wrap .template-download .file-action-wrap {
  42. display: none;
  43. opacity: 0; }
  44. .file-wrap .template-download:hover .file-action-wrap {
  45. display: block;
  46. opacity: 1; }
  47. .file-wrap .other-file img {
  48. display: none; }
  49. .file-wrap .other-file .preview {
  50. background-image: url(file-type.png);
  51. background-repeat: no-repeat;
  52. background-position: center center; }
  53. .file-wrap .file-item {
  54. position: relative;
  55. width: 100%;
  56. padding: 10px;
  57. margin-bottom: 10px;
  58. cursor: pointer;
  59. border: 1px solid transparent;
  60. border-radius: 0.215rem;
  61. transition: all .3s; }
  62. .file-wrap .info-wrap .title {
  63. overflow: hidden;
  64. text-align: center;
  65. text-overflow: ellipsis;
  66. white-space: nowrap; }
  67. .file-wrap .file-action {
  68. position: absolute;
  69. top: 90px;
  70. left: 0;
  71. width: 100%;
  72. text-align: center; }
  73. .file-wrap .file-action-wrap {
  74. position: absolute;
  75. top: 0;
  76. left: 0;
  77. z-index: 1300;
  78. width: 100%;
  79. height: 100%;
  80. background: rgba(0, 0, 0, 0.6);
  81. transition: all .3s; }
  82. .file-wrap .file-action .icon {
  83. margin-right: 30px;
  84. font-size: 22px;
  85. color: #fff; }
  86. .file-wrap .file-action .icon:last-child {
  87. margin-right: 0; }
  88. .file-wrap .preview {
  89. position: relative;
  90. width: 100%;
  91. height: 190px;
  92. margin-bottom: 10px;
  93. overflow: hidden;
  94. background-color: black;
  95. border-radius: 4px;
  96. opacity: .6;
  97. transition: all .3s; }
  98. .file-wrap .preview canvas {
  99. position: absolute;
  100. top: 0;
  101. left: 0;
  102. width: 100%;
  103. height: 100%; }
  104. .file-wrap .preview img {
  105. max-width: 100%;
  106. height: initial; }
  107. .file-wrap .progress {
  108. position: absolute;
  109. top: 90px;
  110. display: none;
  111. width: 100%;
  112. text-align: center; }
  113. .template-download .preview {
  114. opacity: 1; }
  115. .template-download .preview img {
  116. width: 100%;
  117. height: 100%; }