style.css 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. /* ----------------Reset Css--------------------- */
  2. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
  4. small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
  5. fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
  6. article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
  7. time, mark, audio, video, input {
  8. margin: 0;
  9. padding: 0;
  10. border: none;
  11. outline: 0;
  12. font-size: 100%;
  13. font: inherit;
  14. vertical-align: baseline;
  15. }
  16. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  17. -webkit-text-size-adjust: none;
  18. }
  19. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  20. display: block;
  21. }
  22. body {
  23. font-family: arial, sans-serif;
  24. }
  25. ol, ul {
  26. list-style: none;
  27. }
  28. blockquote, q {
  29. quotes: none;
  30. }
  31. blockquote:before, blockquote:after, q:before, q:after {
  32. content: '';
  33. content: none;
  34. }
  35. ins {
  36. text-decoration: none;
  37. }
  38. del {
  39. text-decoration: line-through;
  40. }
  41. table {
  42. border-collapse: collapse;
  43. border-spacing: 0;
  44. }
  45. /* ------------ */
  46. #wrapper {
  47. width: 980px;
  48. margin: 0 auto;
  49. margin: 1em;
  50. width: auto;
  51. }
  52. #container {
  53. border: 1px solid #dadada;
  54. color: #838383;
  55. font-size: 12px;
  56. margin-top: 10px;
  57. background-color: #FFF;
  58. }
  59. #uploader .queueList {
  60. margin: 20px;
  61. }
  62. .element-invisible {
  63. position: absolute !important;
  64. clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  65. clip: rect(1px,1px,1px,1px);
  66. }
  67. #uploader .placeholder {
  68. border: 3px dashed #e6e6e6;
  69. min-height: 238px;
  70. padding-top: 158px;
  71. text-align: center;
  72. background: url(./image.png) center 93px no-repeat;
  73. color: #cccccc;
  74. font-size: 18px;
  75. position: relative;
  76. }
  77. #uploader .placeholder .webuploader-pick {
  78. font-size: 18px;
  79. background: #00b7ee;
  80. border-radius: 3px;
  81. line-height: 44px;
  82. padding: 0 30px;
  83. color: #fff;
  84. display: inline-block;
  85. margin: 20px auto;
  86. cursor: pointer;
  87. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  88. }
  89. #uploader .placeholder .webuploader-pick-hover {
  90. background: #00a2d4;
  91. }
  92. #uploader .placeholder .flashTip {
  93. color: #666666;
  94. font-size: 12px;
  95. position: absolute;
  96. width: 100%;
  97. text-align: center;
  98. bottom: 20px;
  99. }
  100. #uploader .placeholder .flashTip a {
  101. color: #0785d1;
  102. text-decoration: none;
  103. }
  104. #uploader .placeholder .flashTip a:hover {
  105. text-decoration: underline;
  106. }
  107. #uploader .placeholder.webuploader-dnd-over {
  108. border-color: #999999;
  109. }
  110. #uploader .placeholder.webuploader-dnd-over.webuploader-dnd-denied {
  111. border-color: red;
  112. }
  113. #uploader .filelist {
  114. list-style: none;
  115. margin: 0;
  116. padding: 0;
  117. }
  118. #uploader .filelist:after {
  119. content: '';
  120. display: block;
  121. width: 0;
  122. height: 0;
  123. overflow: hidden;
  124. clear: both;
  125. }
  126. #uploader .filelist li {
  127. width: 110px;
  128. height: 110px;
  129. background: url(./bg.png) no-repeat;
  130. text-align: center;
  131. margin: 0 8px 20px 0;
  132. position: relative;
  133. display: inline;
  134. float: left;
  135. overflow: hidden;
  136. font-size: 12px;
  137. }
  138. #uploader .filelist li p.log {
  139. position: relative;
  140. top: -45px;
  141. }
  142. #uploader .filelist li p.title {
  143. position: absolute;
  144. top: 0;
  145. left: 0;
  146. width: 100%;
  147. overflow: hidden;
  148. white-space: nowrap;
  149. text-overflow : ellipsis;
  150. top: 5px;
  151. text-indent: 5px;
  152. text-align: left;
  153. }
  154. #uploader .filelist li p.progress {
  155. position: absolute;
  156. width: 100%;
  157. bottom: 0;
  158. left: 0;
  159. height: 8px;
  160. overflow: hidden;
  161. z-index: 50;
  162. }
  163. #uploader .filelist li p.progress span {
  164. display: none;
  165. overflow: hidden;
  166. width: 0;
  167. height: 100%;
  168. background: #1483d8 url(./progress.png) repeat-x;
  169. -webit-transition: width 200ms linear;
  170. -moz-transition: width 200ms linear;
  171. -o-transition: width 200ms linear;
  172. -ms-transition: width 200ms linear;
  173. transition: width 200ms linear;
  174. -webkit-animation: progressmove 2s linear infinite;
  175. -moz-animation: progressmove 2s linear infinite;
  176. -o-animation: progressmove 2s linear infinite;
  177. -ms-animation: progressmove 2s linear infinite;
  178. animation: progressmove 2s linear infinite;
  179. -webkit-transform: translateZ(0);
  180. }
  181. @-webkit-keyframes progressmove {
  182. 0% {
  183. background-position: 0 0;
  184. }
  185. 100% {
  186. background-position: 17px 0;
  187. }
  188. }
  189. @-moz-keyframes progressmove {
  190. 0% {
  191. background-position: 0 0;
  192. }
  193. 100% {
  194. background-position: 17px 0;
  195. }
  196. }
  197. @keyframes progressmove {
  198. 0% {
  199. background-position: 0 0;
  200. }
  201. 100% {
  202. background-position: 17px 0;
  203. }
  204. }
  205. #uploader .filelist li p.imgWrap {
  206. position: relative;
  207. z-index: 2;
  208. line-height: 110px;
  209. vertical-align: middle;
  210. overflow: hidden;
  211. width: 110px;
  212. height: 110px;
  213. -webkit-transform-origin: 50% 50%;
  214. -moz-transform-origin: 50% 50%;
  215. -o-transform-origin: 50% 50%;
  216. -ms-transform-origin: 50% 50%;
  217. transform-origin: 50% 50%;
  218. -webit-transition: 200ms ease-out;
  219. -moz-transition: 200ms ease-out;
  220. -o-transition: 200ms ease-out;
  221. -ms-transition: 200ms ease-out;
  222. transition: 200ms ease-out;
  223. }
  224. #uploader .filelist li img {
  225. width: 100%;
  226. }
  227. #uploader .filelist li p.error {
  228. background: #f43838;
  229. color: #fff;
  230. position: absolute;
  231. bottom: 0;
  232. left: 0;
  233. height: 28px;
  234. line-height: 28px;
  235. width: 100%;
  236. z-index: 100;
  237. }
  238. #uploader .filelist li .success {
  239. display: block;
  240. position: absolute;
  241. left: 0;
  242. bottom: 0;
  243. height: 40px;
  244. width: 100%;
  245. z-index: 200;
  246. background: url(./success.png) no-repeat right bottom;
  247. }
  248. #uploader .filelist div.file-panel {
  249. position: absolute;
  250. height: 0;
  251. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
  252. background: rgba( 0, 0, 0, 0.5 );
  253. width: 100%;
  254. top: 0;
  255. left: 0;
  256. overflow: hidden;
  257. z-index: 300;
  258. }
  259. #uploader .filelist div.file-panel span {
  260. width: 24px;
  261. height: 24px;
  262. display: inline;
  263. float: right;
  264. text-indent: -9999px;
  265. overflow: hidden;
  266. background: url(./icons.png) no-repeat;
  267. margin: 5px 1px 1px;
  268. cursor: pointer;
  269. }
  270. #uploader .filelist div.file-panel span.rotateLeft {
  271. background-position: 0 -24px;
  272. }
  273. #uploader .filelist div.file-panel span.rotateLeft:hover {
  274. background-position: 0 0;
  275. }
  276. #uploader .filelist div.file-panel span.rotateRight {
  277. background-position: -24px -24px;
  278. }
  279. #uploader .filelist div.file-panel span.rotateRight:hover {
  280. background-position: -24px 0;
  281. }
  282. #uploader .filelist div.file-panel span.cancel {
  283. background-position: -48px -24px;
  284. }
  285. #uploader .filelist div.file-panel span.cancel:hover {
  286. background-position: -48px 0;
  287. }
  288. #uploader .statusBar {
  289. height: 63px;
  290. border-top: 1px solid #dadada;
  291. padding: 0 20px;
  292. line-height: 63px;
  293. vertical-align: middle;
  294. position: relative;
  295. }
  296. #uploader .statusBar .progress {
  297. border: 1px solid #1483d8;
  298. width: 198px;
  299. background: #fff;
  300. height: 18px;
  301. position: relative;
  302. display: inline-block;
  303. text-align: center;
  304. line-height: 20px;
  305. color: #6dbfff;
  306. position: relative;
  307. margin-right: 10px;
  308. }
  309. #uploader .statusBar .progress span.percentage {
  310. width: 0;
  311. height: 100%;
  312. left: 0;
  313. top: 0;
  314. background: #1483d8;
  315. position: absolute;
  316. }
  317. #uploader .statusBar .progress span.text {
  318. position: relative;
  319. z-index: 10;
  320. }
  321. #uploader .statusBar .info {
  322. display: inline-block;
  323. font-size: 14px;
  324. color: #666666;
  325. }
  326. #uploader .statusBar .btns {
  327. position: absolute;
  328. top: 10px;
  329. right: 20px;
  330. line-height: 40px;
  331. }
  332. #filePicker2 {
  333. display: inline-block;
  334. float: left;
  335. }
  336. #uploader .statusBar .btns .webuploader-pick,
  337. #uploader .statusBar .btns .uploadBtn,
  338. #uploader .statusBar .btns .uploadBtn.state-uploading,
  339. #uploader .statusBar .btns .uploadBtn.state-paused {
  340. background: #ffffff;
  341. border: 1px solid #cfcfcf;
  342. color: #565656;
  343. padding: 0 18px;
  344. display: inline-block;
  345. border-radius: 3px;
  346. margin-left: 10px;
  347. cursor: pointer;
  348. font-size: 14px;
  349. float: left;
  350. }
  351. #uploader .statusBar .btns .webuploader-pick-hover,
  352. #uploader .statusBar .btns .uploadBtn:hover,
  353. #uploader .statusBar .btns .uploadBtn.state-uploading:hover,
  354. #uploader .statusBar .btns .uploadBtn.state-paused:hover {
  355. background: #f0f0f0;
  356. }
  357. #uploader .statusBar .btns .uploadBtn {
  358. background: #00b7ee;
  359. color: #fff;
  360. border-color: transparent;
  361. }
  362. #uploader .statusBar .btns .uploadBtn:hover {
  363. background: #00a2d4;
  364. }
  365. #uploader .statusBar .btns .uploadBtn.disabled {
  366. pointer-events: none;
  367. opacity: 0.6;
  368. }