ssi-uploader.css 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. .icon, span.ban7, span.ban7w, span.ban10, span.ban23, span.check7, span.check23, span.exclamation7, span.exclamation23, span.trash7, span.trash10 {
  2. background-image: url("images/sprite.png");
  3. }
  4. .icon, span.ban7, span.ban7w, span.ban10, span.ban23, span.check7, span.check23, span.exclamation7, span.exclamation23, span.trash7, span.trash10 {
  5. background-image: url("images/sprite.png");
  6. }
  7. .ssi-infoTooltip, .ssi-tooltipText {
  8. border: 1px #b7b7b7 solid;
  9. border-radius: 6px;
  10. padding: 7px;
  11. color: #fff;
  12. display: none;
  13. background-color: #151515;
  14. position: absolute;
  15. font-size: 14px;
  16. font-weight: 500;
  17. opacity: 1;
  18. z-index: 30000;
  19. }
  20. .ssi-button {
  21. display: inline-block;
  22. text-align: center;
  23. vertical-align: middle;
  24. font-size: 12px;
  25. text-decoration: none;
  26. border: 1px solid #aeaeae;
  27. cursor: pointer;
  28. padding: 6px 6px;
  29. margin: 0 0 0 2px;
  30. border-radius: 3px;
  31. color: whitesmoke;
  32. }
  33. .ssi-button.error {
  34. background: #cf5144;
  35. }
  36. .ssi-button.error:hover {
  37. background: #ab4b3f;
  38. }
  39. .ssi-button.error:active {
  40. background: #8f493e;
  41. }
  42. .ssi-button.info {
  43. background: #006cbc;
  44. }
  45. .ssi-button.info:hover {
  46. background: #0054a0;
  47. }
  48. .ssi-button.info:active {
  49. background: #004d8e;
  50. }
  51. .ssi-button.success {
  52. background: #40b056;
  53. }
  54. .ssi-button.success:hover {
  55. background: #389e48;
  56. }
  57. .ssi-button.success:active {
  58. background: #2f963b;
  59. }
  60. .ssi-button[disabled] {
  61. opacity: 0.8;
  62. pointer-events: none;
  63. }
  64. .ssi-statusLabel {
  65. padding: 2px 6px;
  66. text-align: center;
  67. font-size: 10px;
  68. color: #fff;
  69. font-weight: 600;
  70. border-radius: 2px;
  71. }
  72. .ssi-statusLabel.error {
  73. background: #cf5144;
  74. }
  75. .ssi-statusLabel.success {
  76. background: #40b056;
  77. }
  78. .selected {
  79. opacity: 0.4;
  80. }
  81. .ssi-previewBox {
  82. float: left;
  83. width: 100%;
  84. color: #ccc;
  85. padding: 10px;
  86. }
  87. .ssi-dropZonePreview {
  88. min-height: 300px;
  89. border: 2px dashed #ccc;
  90. content: 'Drag n Drop Files';
  91. }
  92. #ssi-DropZoneBack {
  93. z-index: -1;
  94. overflow: hidden;
  95. }
  96. .ssi-removeBtn {
  97. margin: 5px 0 5px 0;
  98. padding: 0;
  99. }
  100. .ssi-uploader::after {
  101. content: ' ';
  102. display: block;
  103. clear: both;
  104. }
  105. .ssi-uploadFiles {
  106. position: relative;
  107. float: left;
  108. border: 1px solid #aaaaaa;
  109. overflow: hidden;
  110. border-radius: 3px;
  111. width: 180px;
  112. min-height: 32px;
  113. margin: 2px 2px 2px 0;
  114. font-size: 15px;
  115. vertical-align: middle;
  116. line-height: 30px;
  117. -webkit-transition: height .3s;
  118. transition: height .3s;
  119. background: #FFFFFF;
  120. padding-right: 1px;
  121. }
  122. span.ban7 {
  123. background-position: 0px -18px;
  124. background-repeat: no-repeat;
  125. overflow: hidden;
  126. display: block;
  127. width: 18px;
  128. height: 18px;
  129. }
  130. span.ban7w {
  131. background-position: 0px -36px;
  132. background-repeat: no-repeat;
  133. overflow: hidden;
  134. display: block;
  135. width: 18px;
  136. height: 18px;
  137. background-color: #cf5144;
  138. margin-top: 2px;
  139. height: 17px;
  140. }
  141. span.ban10 {
  142. background-position: 0px 0px;
  143. background-repeat: no-repeat;
  144. overflow: hidden;
  145. display: block;
  146. width: 18px;
  147. height: 18px;
  148. }
  149. span.ban23 {
  150. background-position: 0px -126px;
  151. background-repeat: no-repeat;
  152. overflow: hidden;
  153. display: block;
  154. width: 31px;
  155. height: 31px;
  156. }
  157. span.check7 {
  158. background-position: 0px -54px;
  159. background-repeat: no-repeat;
  160. overflow: hidden;
  161. display: block;
  162. width: 18px;
  163. height: 18px;
  164. background-color: #40b056;
  165. margin-top: 2px;
  166. height: 17px;
  167. }
  168. span.check23 {
  169. background-position: 0px -157px;
  170. background-repeat: no-repeat;
  171. overflow: hidden;
  172. display: block;
  173. width: 31px;
  174. height: 31px;
  175. }
  176. span.exclamation7 {
  177. background-position: 0px -72px;
  178. background-repeat: no-repeat;
  179. overflow: hidden;
  180. display: block;
  181. width: 18px;
  182. height: 18px;
  183. margin-top: 2px;
  184. background-color: #cf5144;
  185. height: 17px;
  186. border-radius: 3px;
  187. }
  188. span.exclamation23 {
  189. background-position: 0px -188px;
  190. background-repeat: no-repeat;
  191. overflow: hidden;
  192. display: block;
  193. width: 31px;
  194. height: 31px;
  195. }
  196. span.trash7 {
  197. background-position: 0px -108px;
  198. background-repeat: no-repeat;
  199. overflow: hidden;
  200. display: block;
  201. width: 18px;
  202. height: 18px;
  203. }
  204. span.trash10 {
  205. background-position: 0px -90px;
  206. background-repeat: no-repeat;
  207. overflow: hidden;
  208. display: block;
  209. width: 18px;
  210. height: 18px;
  211. }
  212. .ssi-previewBox.ssi-dragOver, .ssi-dragOver .ssi-dropZone {
  213. color: #ba2919;
  214. border-color: #ba2919;
  215. }
  216. .ssi-buttonWrapper {
  217. float: left;
  218. padding: 5px;
  219. }
  220. .ssi-noPreviewMessage {
  221. position: relative;
  222. z-index: 1;
  223. border-radius: 4px;
  224. margin: 1px;
  225. float: right;
  226. width: 35px;
  227. height: 31px;
  228. padding: 0;
  229. }
  230. .ssi-noPreviewMessage span {
  231. margin: 0 auto;
  232. }
  233. .ssi-noPreviewSubMessage {
  234. width: 15px;
  235. height: 15px;
  236. padding: 0;
  237. }
  238. .ssi-totalvalue {
  239. float: right;
  240. margin: 2px;
  241. }
  242. .ssi-upImgTd {
  243. position: relative;
  244. }
  245. .ssi-upImgTd .fa-spin {
  246. display: inline-block;
  247. position: absolute;
  248. top: 45%;
  249. left: 45%;
  250. }
  251. .ssi-uploadProgressNoPreview {
  252. position: absolute;
  253. display: block;
  254. text-align: center;
  255. width: 0;
  256. height: 35px;
  257. background: #5cb85c;
  258. -webkit-transition: width .3s;
  259. transition: width .3s;
  260. opacity: 0.6;
  261. }
  262. .ssi-uploadNoDropZone {
  263. border: 1px solid #ccc;
  264. }
  265. .ssi-uploadProgress {
  266. margin-top: 4px;
  267. display: block;
  268. text-align: center;
  269. width: 0;
  270. height: 10px;
  271. background: #5cb85c;
  272. -webkit-transition: width .3s;
  273. transition: width .3s;
  274. }
  275. .ssi-uploadProgressNoPre {
  276. position: absolute;
  277. height: 19px;
  278. margin-top: 0;
  279. opacity: 0.6;
  280. }
  281. .ssi-uploaderNP {
  282. position: relative;
  283. }
  284. .ssi-uploaderNP::after {
  285. content: ' ';
  286. display: block;
  287. clear: both;
  288. }
  289. .ssi-uploadDetails {
  290. width: 180px;
  291. max-height: 0;
  292. top: 37px;
  293. background: #FFFFFF;
  294. position: absolute;
  295. -webkit-transition: max-height .2s ease-out;
  296. transition: max-height .2s ease-out;
  297. border-radius: 3px;
  298. overflow: hidden;
  299. padding-right: 2px;
  300. }
  301. .ssi-uploadBoxWrapper {
  302. float: left;
  303. }
  304. .ssi-uploadBoxOpened {
  305. max-height: 200px;
  306. z-index: 2000;
  307. overflow: auto;
  308. border: 0.1mm solid #dcdcdc;
  309. -webkit-transition: max-height .5s ease-out;
  310. transition: max-height .5s ease-out;
  311. }
  312. table.ssi-fileList {
  313. font-size: 10px;
  314. margin: 5px;
  315. }
  316. table.ssi-fileList tr td:first-child {
  317. border: 0.1mm solid #dcdcdc;
  318. /*border: 0.1mm solid black;*/
  319. width: 89%;
  320. position: relative;
  321. }
  322. table.ssi-fileList tr td:nth-child(2) {
  323. padding-left: 7px;
  324. }
  325. table.ssi-fileList tr {
  326. line-height: 18px;
  327. }
  328. table.ssi-fileList tr.ssi-space > td {
  329. border: none;
  330. padding-bottom: 2px;
  331. }
  332. .ssi-uploadProgress.hide {
  333. margin-top: 0;
  334. opacity: 0;
  335. -webkit-transition: opacity 1.3s;
  336. transition: opacity 1.3s;
  337. }
  338. .ssi-canceledProgressBar {
  339. width: 100% !important;
  340. background: #d9534f;
  341. }
  342. .ssi-imgToUploadTable h2 {
  343. margin: 0;
  344. }
  345. .ssi-hidden {
  346. display: none;
  347. }
  348. .ssi-imgToUploadTable tr:first-child td:first-child {
  349. height: 126px;
  350. }
  351. .ssi-imgToUploadTable tr td {
  352. width: 140px;
  353. }
  354. .ssi-imgToUploadTable {
  355. border: 1px solid #e1e1e1;
  356. color: #000000;
  357. font-size: 15px;
  358. margin-right: 4px;
  359. box-shadow: 0 10px 6px -6px #777;
  360. padding: 5px;
  361. display: inline-block;
  362. width: 150px;
  363. -ms-word-break: break-all;
  364. word-break: break-all;
  365. word-break: break-word;
  366. -webkit-hyphens: auto;
  367. -ms-hyphens: auto;
  368. hyphens: auto;
  369. }
  370. .ssi-imgToUpload {
  371. width: 140px;
  372. height: 128px;
  373. }
  374. .ssi-btnIn {
  375. float: left;
  376. }
  377. .ssi-ieCompatibilityForm {
  378. display: none;
  379. }
  380. span.ssi-InputLabel input[type="file"] {
  381. display: none;
  382. }
  383. .ssi-abortUpload {
  384. padding: 0;
  385. }
  386. .ssi-abortUpload .ban7w {
  387. margin: 0;
  388. }
  389. .ssi-removeBtnNP {
  390. border: none;
  391. color: #ff696d;
  392. font-size: 11px;
  393. margin: 0;
  394. padding: 0;
  395. }
  396. .ssi-InputLabel.disabled, .ssi-InputLabel.disabled:hover, .ssi-InputLabel.disabled:active {
  397. cursor: not-allowed;
  398. background: #5cb85c;
  399. opacity: .65;
  400. }
  401. .ssi-check {
  402. color: #005900;
  403. }
  404. .ssi-boxHover {
  405. cursor: pointer;
  406. }
  407. .ssi-upI.imgTd {
  408. position: relative;
  409. }
  410. /*@author http://codepen.io/tevko/pen/DdsnK*/
  411. .document-item {
  412. display: inline-block;
  413. width: 69px;
  414. height: 74px;
  415. color: black;
  416. position: absolute;
  417. top: 50%;
  418. left: 50%;
  419. -webkit-transform: translate(-50%, -50%);
  420. transform: translate(-50%, -50%);
  421. background: inherit;
  422. }
  423. .document-item::before {
  424. position: absolute;
  425. width: 69px;
  426. height: 74px;
  427. left: 0;
  428. top: -7px;
  429. content: '';
  430. border: solid 2px #920035;
  431. }
  432. .document-item::after {
  433. content: attr(filetype);
  434. left: -4px;
  435. padding: 0px 2px;
  436. text-align: right;
  437. line-height: 1.3;
  438. position: absolute;
  439. background-color: #000;
  440. color: #fff;
  441. font-size: 11px;
  442. text-transform: uppercase;
  443. letter-spacing: 1px;
  444. top: 9px;
  445. }
  446. .document-item .fileCorner {
  447. width: 0;
  448. height: 0;
  449. border-style: solid;
  450. border-width: 13px 0 0 13px;
  451. border-color: white transparent transparent #920035;
  452. position: absolute;
  453. top: -7px;
  454. left: 61px;
  455. }