bootstrap-FileUpload.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /*
  2. * bootstrap-FileUpload.css
  3. * @version: v0.7.0
  4. * @author: Luke LeBlanc
  5. *
  6. * This plugin is very lightweight, highly customizable, easy to use,
  7. * extremely easy to integrate into any website with minimal dependancies
  8. * and of course cross compatible. It includes support for mobile devices
  9. * with fallback options to a regular customized form input field. It has
  10. * the ability to upload multiple files at once and provide thumbnail
  11. * previews. All it needs is Twitter Bootstrap V3 and the latest version
  12. * of jQuery!
  13. *
  14. * Copyright (c) 2016 Luke LeBlanc
  15. *
  16. * GNU General Public License v3 (http://www.gnu.org/licenses/)
  17. *
  18. * This program is free software: you can redistribute it and/or modify
  19. * it under the terms of the GNU General Public License as published by
  20. * the Free Software Foundation, either version 3 of the License, or
  21. * (at your option) any later version.
  22. *
  23. * This program is distributed in the hope that it will be useful,
  24. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  25. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  26. * GNU General Public License for more details.
  27. */
  28. .fileupload-wrapper .fileupload-add {
  29. position: relative;
  30. overflow: hidden;
  31. }
  32. .fileupload-wrapper .fileupload-add::-webkit-file-upload-button { visibility: hidden; }
  33. .fileupload-wrapper .fileupload-add input[type=file] {
  34. position: absolute;
  35. top: 0;
  36. right: 0;
  37. min-width: 100%;
  38. min-height: 100%;
  39. margin: 0;
  40. padding: 0;
  41. font-size: 20px;
  42. cursor: pointer;
  43. filter: alpha(opacity=0);
  44. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  45. -moz-opacity: 0;
  46. -webkit-opacity: 0;
  47. opacity: 0;
  48. outline: none;
  49. background: none;
  50. z-index: 1;
  51. }
  52. .fileupload-wrapper .fileupload-add input[readonly] {
  53. background-color: #FFF !important;
  54. cursor: text !important;
  55. }
  56. .fileupload-wrapper .fileupload-fallback-add {
  57. position: relative;
  58. overflow: hidden;
  59. }
  60. .fileupload-wrapper .fileupload-fallback-add::-webkit-file-upload-button { visibility: hidden; }
  61. .fileupload-wrapper .fileupload-fallback-add input[type=file] {
  62. position: absolute;
  63. top: 0;
  64. right: 0;
  65. min-width: 100%;
  66. min-height: 100%;
  67. margin: 0;
  68. padding: 0;
  69. font-size: 20px;
  70. cursor: pointer;
  71. filter: alpha(opacity=0);
  72. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  73. -moz-opacity: 0;
  74. -webkit-opacity: 0;
  75. opacity: 0;
  76. outline: none;
  77. background: none;
  78. z-index: 1;
  79. }
  80. .fileupload-wrapper .fileupload-fallback-add input[readonly] {
  81. background-color: #FFF !important;
  82. cursor: text !important;
  83. }
  84. .fileupload-wrapper .btn { margin-right: 10px; }
  85. .fileupload-wrapper .btn:last-child { margin-right: 0; }
  86. .fileupload-wrapper .fileupload-overall-progress,
  87. .fileupload-wrapper .fileupload-start,
  88. .fileupload-wrapper .fileupload-cancel,
  89. .fileupload-wrapper .fileupload-reset,
  90. .fileupload-wrapper .fileupload-previewrow .alert,
  91. .fileupload-wrapper .fileupload-overall-status,
  92. .fileupload-wrapper .fileupload-overall-status .alert { display: none; }
  93. .fileupload-wrapper .fileupload-overall-progress { padding-top: 6px; }
  94. .fileupload-wrapper .fileupload-preview,
  95. .fileupload-wrapper .fileupload-download {
  96. display: none;
  97. margin-top: 1em;
  98. border-bottom:1px solid #ddd;
  99. border-left:1px solid #ddd;
  100. border-right:1px solid #ddd;
  101. font-size:12px;
  102. color:#666;
  103. }
  104. .fileupload-wrapper .fileupload-download {display:table; margin-bottom:0;}
  105. .fileupload-wrapper .fileupload-preview .btn-xs,
  106. .fileupload-wrapper .fileupload-download .btn-xs {font-size:11px; padding:6px;}
  107. .fileupload-wrapper .fileupload-preview td,
  108. .fileupload-wrapper .fileupload-download td {word-break:break-all; vertical-align: middle;}
  109. .fileupload-wrapper .fileupload-download td a {color:#666;}
  110. .fileupload-wrapper .fileupload-previewrow.thumb {}
  111. .fileupload-wrapper .fileupload-previewrow.no-thumb {}
  112. .fileupload-wrapper .alert {padding:3px 15px 3px 15px; margin-bottom:1px; margin-top:5px;}
  113. .fileupload-wrapper .progress {height:22px; margin-bottom:0;}
  114. .fileupload-wrapper .fileupload-add,
  115. .fileupload-wrapper .fileupload-start,
  116. .fileupload-wrapper .fileupload-cancel,
  117. .fileupload-wrapper .fileupload-down {padding:4px 10px;}
  118. /* 좁은곳에서 파일 업로드 */
  119. .fileupload-wrapper