You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

207 lines
4.7 KiB

2 years ago
  1. /*!
  2. * CSS jQuery.filer
  3. * Theme: DragDropBox
  4. * Copyright (c) 2015 CreativeDream
  5. * Version: 1.0.4 (29-Oct-2015)
  6. */
  7. /*-------------------------
  8. Input
  9. -------------------------*/
  10. .jFiler-input-dragDrop {
  11. display: block;
  12. width: 343px;
  13. margin: 0 auto 5px auto;
  14. padding: 5px 0 10px 0;
  15. color: #8d9499;
  16. color: #97A1A8;
  17. background: #fff;
  18. border: 2px dashed #C8CBCE;
  19. text-align: center;
  20. -webkit-transition: box-shadow 0.3s,
  21. border-color 0.3s;
  22. -moz-transition: box-shadow 0.3s,
  23. border-color 0.3s;
  24. transition: box-shadow 0.3s,
  25. border-color 0.3s;
  26. }
  27. .jFiler.dragged .jFiler-input-dragDrop {
  28. border-color: #aaa;
  29. box-shadow: inset 0 0 20px rgba(0,0,0,.08);
  30. }
  31. .jFiler.dragged .jFiler-input-dragDrop * {
  32. pointer-events: none;
  33. }
  34. .jFiler.dragged .jFiler-input-icon {
  35. -webkit-transform: rotate(180deg);
  36. -ms-transform: rotate(180deg);
  37. transform: rotate(180deg);
  38. }
  39. .jFiler.dragged .jFiler-input-text,
  40. .jFiler.dragged .jFiler-input-choose-btn {
  41. filter: alpha(opacity=30);
  42. opacity: 0.3;
  43. }
  44. .jFiler-input-dragDrop .jFiler-input-icon {
  45. font-size: 48px;
  46. margin-top: -10px;
  47. -webkit-transition: all 0.3s ease;
  48. -moz-transition: all 0.3s ease;
  49. transition: all 0.3s ease;
  50. }
  51. .jFiler-input-text h3 {
  52. margin: 0;
  53. font-size: 18px;
  54. }
  55. .jFiler-input-text span {
  56. font-size: 12px;
  57. }
  58. .jFiler-input-choose-btn {
  59. display: inline-block;
  60. padding: 8px 14px;
  61. outline: none;
  62. cursor: pointer;
  63. text-decoration: none;
  64. text-align: center;
  65. white-space: nowrap;
  66. font-size: 12px;
  67. font-weight: bold;
  68. color: #8d9496;
  69. border-radius: 3px;
  70. border: 1px solid #c6c6c6;
  71. vertical-align: middle;
  72. background-color: #fff;
  73. box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
  74. -webkit-transition: all 0.2s;
  75. -moz-transition: all 0.2s;
  76. transition: all 0.2s;
  77. }
  78. .jFiler-input-choose-btn:hover,
  79. .jFiler-input-choose-btn:active {
  80. color: inherit;
  81. }
  82. .jFiler-input-choose-btn:active {
  83. background-color: #f5f5f5;
  84. }
  85. /* gray */
  86. .jFiler-input-choose-btn.gray {
  87. background-image: -webkit-gradient(linear,0 0,0 100%,from(#fcfcfc),to(#f5f5f5));
  88. background-image: -webkit-linear-gradient(top,#fcfcfc,#f5f5f5);
  89. background-image: -o-linear-gradient(top,#fcfcfc,#f5f5f5);
  90. background-image: linear-gradient(to bottom,#fcfcfc,#f5f5f5);
  91. background-image: -moz-linear-gradient(top,#fcfcfc,#f5f5f5);
  92. }
  93. .jFiler-input-choose-btn.gray:hover {
  94. filter: alpha(opacity=87);
  95. opacity: 0.87;
  96. }
  97. .jFiler-input-choose-btn.gray:active {
  98. background-color: #f5f5f5;
  99. background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#fcfcfc));
  100. background-image: -webkit-linear-gradient(top,#f5f5f5,#fcfcfc);
  101. background-image: -o-linear-gradient(top,#f5f5f5,#fcfcfc);
  102. background-image: linear-gradient(to bottom,#f5f5f5,#fcfcfc);
  103. background-image: -moz-linear-gradient(top,#f5f5f5,#fcfcfc);
  104. }
  105. /* blue */
  106. .jFiler-input-choose-btn.blue {
  107. color: #008BFF;
  108. border: 1px solid #008BFF;
  109. }
  110. .jFiler-input-choose-btn.blue:hover {
  111. background: #008BFF;
  112. }
  113. .jFiler-input-choose-btn.blue:active {
  114. background: #008BFF;
  115. }
  116. /* green */
  117. .jFiler-input-choose-btn.green {
  118. color: #27ae60;
  119. border: 1px solid #27ae60;
  120. }
  121. .jFiler-input-choose-btn.green:hover {
  122. background: #27ae60;
  123. }
  124. .jFiler-input-choose-btn.green:active {
  125. background: #27ae60;
  126. }
  127. /* red */
  128. .jFiler-input-choose-btn.red {
  129. color: #ed5a5a;
  130. border: 1px solid #ed5a5a;
  131. }
  132. .jFiler-input-choose-btn.red:hover {
  133. background: #ed5a5a;
  134. }
  135. .jFiler-input-choose-btn.red:active {
  136. background: #E05252;
  137. }
  138. /* black */
  139. .jFiler-input-choose-btn.black {
  140. color: #555;
  141. border: 1px solid #555;
  142. }
  143. .jFiler-input-choose-btn.black:hover {
  144. background: #555;
  145. }
  146. .jFiler-input-choose-btn.black:active {
  147. background: #333;
  148. }
  149. .jFiler-input-choose-btn.blue:hover,
  150. .jFiler-input-choose-btn.green:hover,
  151. .jFiler-input-choose-btn.red:hover,
  152. .jFiler-input-choose-btn.black:hover {
  153. border-color: transparent;
  154. color: #fff;
  155. }
  156. .jFiler-input-choose-btn.blue:active,
  157. .jFiler-input-choose-btn.green:active,
  158. .jFiler-input-choose-btn.red:active,
  159. .jFiler-input-choose-btn.black:active {
  160. border-color: transparent;
  161. color: #fff;
  162. filter: alpha(opacity=87);
  163. opacity: 0.87;
  164. }
  165. .jFiler-input-dragDrop {
  166. margin-left: 0;
  167. width: 150px;
  168. height: 100px;
  169. font-size: 56px;
  170. }
  171. .jFiler-input-dragDrop:hover {
  172. margin-left: 0;
  173. width: 150px;
  174. height: 100px;
  175. font-size: 56px;
  176. border-color: #225067;
  177. color: #225067;
  178. cursor: pointer;
  179. }