Начало Каталог Помощ
Регистрация Вход
zhengwei
/
buying
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
ИН на ревизия: 9d8ea01bb4
Клонове Маркери
buying
/
WebContent
/
static
/
web
/
frame
/
webuploader
/
webuploader.css

webuploader.css 12 KB
История Директен файл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 
  1. .webuploader-container{position: relative; display:inline-block; vertical-align:top;height:30px;}
    2. 

  2. .webuploader-element-invisible{position: absolute !important;clip: rect(1px 1px 1px 1px);/* IE6, IE7*/clip: rect(1px,1px,1px,1px)}
    3. 

  3. .webuploader-pick{
    4. 

  4. 	position: relative;
    5. 

  5. 	display: inline-block;
    6. 

  6. 	cursor: pointer;
    7. 

  7. 	background:#1E9FFF;
    8. 

  8. 	height: 30px;
    9. 

  9.   	line-height: 30px;
    10. 

  10.     padding: 0 12px;
    11. 

  11.     font-size: 12px;
    12. 

  12.     color: #fff;
    13. 

  13.     text-align: center;
    14. 

  14.     border-radius: 2px;
    15. 

  15.     overflow: hidden;
    16. 

  16.     opacity: .9;
    17. 

  17.  }
    18. 

  18. .webuploader-pick-hover{
    19. 

  19. 	opacity: .8;
    20. 

  20. 	filter: alpha(opacity=80);
    21. 

  21. }
    22. 

  22. .webuploader-pick-disable{opacity: 0.6;pointer-events:none}
    23. 

  23. .uploader-list{width: 100%;overflow: hidden}
    24. 

  24. .uploader-list .file-panel {
    25. 

  25.     position: absolute;
    26. 

  26.     height: 0;
    27. 

  27.     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
    28. 

  28.     background: rgba( 0, 0, 0, 0.5 );
    29. 

  29.     width: 100%;
    30. 

  30.     top: 0;
    31. 

  31.     left: 0;
    32. 

  32.     overflow: hidden;
    33. 

  33.     z-index: 300;
    34. 

  34. }
    35. 

  35. .uploader-list .file-panel span.cancel {
    36. 

  36.     background-position: -48px -24px;
    37. 

  37. }
    38. 

  38. .uploader-list .file-panel span {
    39. 

  39.     width: 24px;
    40. 

  40.     height: 24px;
    41. 

  41.     display: inline;
    42. 

  42.     float: right;
    43. 

  43.     text-indent: -9999px;
    44. 

  44.     overflow: hidden;
    45. 

  45.     background: url(./images/icons.png) no-repeat;
    46. 

  46.     margin: 5px 1px 1px;
    47. 

  47.     cursor: pointer;
    48. 

  48. }
    49. 

  49. .uploader-list .file-panel span.cancel:hover {
    50. 

  50.     background-position: -48px 0;
    51. 

  51. }
    52. 

  52. .btn-uploadstar{vertical-align:top}
    53. 

  53. .file-item{float: left;position: relative;margin: 0 10px 10px 0;}
    54. 

  54. /* .file-item img {width:100px;height:100px;} */
    55. 

  55. .file-item .error{position: absolute;top: 0;left: 0;right: 0;background: red;color: white;text-align: center;height: 20px;font-size: 14px;line-height: 23px}
    56. 

  56. .file-item .info{position: absolute;left: 0;bottom: 0;right: 0;height: 20px;line-height: 20px;text-indent: 5px;background: rgba(0, 0, 0, 0.6);color: white;overflow: hidden;white-space: nowrap;text-overflow : ellipsis;font-size: 12px;z-index: 10}
    57. 

  57. .upload-state-done:after{    
    58. 

  58. 	content: "\e605"!important;
    59. 

  59.     font-family: "iconfont" !important;
    60. 

  60.     font-style: normal!important;
    61. 

  61.     -webkit-font-smoothing: antialiased!important;
    62. 

  62.     -webkit-text-stroke-width: 0.2px!important;
    63. 

  63.     font-size: 32px;
    64. 

  64.     position: absolute;
    65. 

  65.     bottom: 0;
    66. 

  66.     right: 0;
    67. 

  67.     color: #4cae4c;
    68. 

  68.     z-index: 99;
    69. 

  69.  }
    70. 

  70. .cropper-container{position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #fff; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
    71. 

  71. .cropper-container .cropper-modal{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; filter: alpha(opacity=50); opacity: .5;}
    72. 

  72. .cropper-container .cropper-dragger{position: absolute; top: 10%; left: 10%; width: 80%; height: 80%;}
    73. 

  73. .cropper-container .cropper-preview{display: block; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; border-color: #69f; border-color: rgba(51, 102, 255, .75); border-style: solid; border-width: 1px;}
    74. 

  74. .cropper-container .cropper-dashed{position: absolute; display: block; filter: alpha(opacity=50); border: 0 dashed #fff; opacity: .5;}
    75. 

  75. .cropper-container .dashed-h{top: 33.3%; left: 0; width: 100%; height: 33.3%; border-top-width: 1px; border-bottom-width: 1px;}
    76. 

  76. .cropper-container .dashed-v{top: 0; left: 33.3%; width: 33.3%; height: 100%; border-right-width: 1px; border-left-width: 1px;}
    77. 

  77. .cropper-container .cropper-face,
    78. 

  78. .cropper-container .cropper-line,
    79. 

  79. .cropper-container .cropper-point{position: absolute; display: block; width: 100%; height: 100%; filter: alpha(opacity=10); opacity: .1;}
    80. 

  80. .cropper-container .cropper-face{top: 0; left: 0; cursor: move; background-color: #fff;}
    81. 

  81. .cropper-container .cropper-line{background-color: #69f;}
    82. 

  82. .cropper-container .line-e{top: 0; right: -2px; width: 5px; cursor: e-resize;}
    83. 

  83. .cropper-container .line-n{top: -2px; left: 0; height: 5px; cursor: n-resize;}
    84. 

  84. .cropper-container .line-w{top: 0; left: -2px; width: 5px; cursor: w-resize;}
    85. 

  85. .cropper-container .line-s{bottom: -2px; left: 0; height: 5px; cursor: s-resize;}
    86. 

  86. .cropper-container .cropper-point{width: 5px; height: 5px; background-color: #69f; filter: alpha(opacity=75); opacity: .75;}
    87. 

  87. .cropper-container .point-e{top: 49%; right: -2px; cursor: e-resize;}
    88. 

  88. .cropper-container .point-n{top: -2px; left: 49%; cursor: n-resize;}
    89. 

  89. .cropper-container .point-w{top: 49%; left: -2px; cursor: w-resize;}
    90. 

  90. .cropper-container .point-s{bottom: -2px; left: 49%; cursor: s-resize;}
    91. 

  91. .cropper-container .point-ne{top: -2px; right: -2px; cursor: ne-resize;}
    92. 

  92. .cropper-container .point-nw{top: -2px; left: -2px; cursor: nw-resize;}
    93. 

  93. .cropper-container .point-sw{bottom: -2px; left: -2px; cursor: sw-resize;}
    94. 

  94. .cropper-container .point-se{right: -2px; bottom: -2px; width: 20px; height: 20px; cursor: se-resize; filter: alpha(opacity=100); opacity: 1;}
    95. 

  95. .cropper-container .point-se:before{position: absolute; right: -50%; bottom: -50%; display: block; width: 200%; height: 200%; content: " "; background-color: #69f; filter: alpha(opacity=0); opacity: 0;}
    96. 

  96. @media (min-width: 768px){.cropper-container .point-se{width: 15px; height: 15px;}}
    97. 

  97. @media (min-width: 992px){.cropper-container .point-se{width: 10px; height: 10px;}}
    98. 

  98. @media (min-width: 1200px){.cropper-container .point-se{width: 5px; height: 5px; filter: alpha(opacity=75); opacity: .75;}}
    99. 

  99. .cropper-hidden{display: none !important;}
    100. 

  100. .img-preview{width: 160px; height: 90px; margin-top: 1em; border: 1px solid #ccc;}
    101. 

  101. 

  102. 

  103. .uploader-list-container{color: #838383; font-size: 12px; margin-top: 10px; background-color: #FFF; border:solid 1px #ddd}
    104. 

  104. .uploader-list-container .queueList{margin: 20px;}
    105. 

  105. .element-invisible{position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px);}
    106. 

  106. .uploader-list-container .placeholder{border: 3px dashed #e6e6e6; min-height: 238px; padding-top: 158px; text-align: center; background: url(images/image.png) center 93px no-repeat; color: #cccccc; font-size: 18px; position: relative;}
    107. 

  107. .uploader-list-container .placeholder .webuploader-pick{font-size: 18px; background: #00b7ee; border-radius: 3px; line-height: 44px; padding: 0 30px; color: #fff; display: inline-block; margin: 20px auto; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
    108. 

  108. .uploader-list-container .placeholder .webuploader-pick-hover{background: #00a2d4;}
    109. 

  109. .uploader-list-container .placeholder .flashTip{color: #666666; font-size: 12px; position: absolute; width: 100%; text-align: center; bottom: 20px;}
    110. 

  110. .uploader-list-container .placeholder .flashTip a{color: #0785d1; text-decoration: none;}
    111. 

  111. .uploader-list-container .placeholder .flashTip a:hover{text-decoration: underline;}
    112. 

  112. .uploader-list-container .placeholder.webuploader-dnd-over{border-color: #999999;}
    113. 

  113. .uploader-list-container .placeholder.webuploader-dnd-over.webuploader-dnd-denied{border-color: red;}
    114. 

  114. .uploader-list-container .filelist{list-style: none; margin: 0; padding: 0;}
    115. 

  115. .uploader-list-container .filelist:after{content: ''; display: block; width: 0; height: 0; overflow: hidden; clear: both;}
    116. 

  116. .uploader-list-container .filelist li{width: 110px; height: 110px; background: url(images/bg.png) no-repeat; text-align: center; margin: 0 8px 20px 0; position: relative; display: inline; float: left; overflow: hidden; font-size: 12px;}
    117. 

  117. .uploader-list-container .filelist li p.log{position: relative; top: -45px;}
    118. 

  118. .uploader-list-container .filelist li p.title{position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow : ellipsis; top: 5px; text-indent: 5px; text-align: left;}
    119. 

  119. .uploader-list-container .filelist li p.progress{position: absolute; width: 100%; bottom: 0; left: 0; height: 8px; overflow: hidden; z-index: 50;}
    120. 

  120. .uploader-list-container .filelist li p.progress span{display: none; overflow: hidden; width: 0; height: 100%; background: #1483d8 url(images/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0);}
    121. 

  121. @-webkit-keyframes progressmove{0%{background-position: 0 0;} 100%{background-position: 17px 0;}}
    122. 

  122. @-moz-keyframes progressmove{0%{background-position: 0 0;} 100%{background-position: 17px 0;}}
    123. 

  123. @keyframes progressmove{0%{background-position: 0 0;} 100%{background-position: 17px 0;}}
    124. 

  124. .uploader-list-container .filelist li p.imgWrap{position: relative; z-index: 2; line-height: 110px; vertical-align: middle; overflow: hidden; width: 110px; height: 110px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webit-transition: 200ms ease-out; -moz-transition: 200ms ease-out; -o-transition: 200ms ease-out; -ms-transition: 200ms ease-out; transition: 200ms ease-out;}
    125. 

  125. .uploader-list-container .filelist li img{width: 100%;}
    126. 

  126. .uploader-list-container .filelist li p.error{background: #f43838; color: #fff; position: absolute; bottom: 0; left: 0; height: 28px; line-height: 28px; width: 100%; z-index: 100;}
    127. 

  127. .uploader-list-container .filelist li .success{display: block; position: absolute; left: 0; bottom: 0; height: 40px; width: 100%; z-index: 200; background: url(images/success.png) no-repeat right bottom;}
    128. 

  128. .uploader-list-container .filelist div.file-panel{position: absolute; height: 0; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0; background: rgba( 0, 0, 0, 0.5 ); width: 100%; top: 0; left: 0; overflow: hidden; z-index: 300;}
    129. 

  129. .uploader-list-container .filelist div.file-panel span{width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url(images/icons.png) no-repeat; margin: 5px 1px 1px; cursor: pointer;}
    130. 

  130. .uploader-list-container .filelist div.file-panel span.rotateLeft{background-position: 0 -24px;}
    131. 

  131. .uploader-list-container .filelist div.file-panel span.rotateLeft:hover{background-position: 0 0;}
    132. 

  132. .uploader-list-container .filelist div.file-panel span.rotateRight{background-position: -24px -24px;}
    133. 

  133. .uploader-list-container .filelist div.file-panel span.rotateRight:hover{background-position: -24px 0;}
    134. 

  134. .uploader-list-container .filelist div.file-panel span.cancel{background-position: -48px -24px;}
    135. 

  135. .uploader-list-container .filelist div.file-panel span.cancel:hover{background-position: -48px 0;}
    136. 

  136. .uploader-list-container .statusBar{height: 63px; border-top: 1px solid #dadada; padding: 0 20px; line-height: 63px; vertical-align: middle; position: relative;}
    137. 

  137. .uploader-list-container .statusBar .progress{border: 1px solid #1483d8; width: 198px; background: #fff; height: 18px; position: relative; display: inline-block; text-align: center; line-height: 20px; color: #6dbfff; position: relative; margin-right: 10px;}
    138. 

  138. .uploader-list-container .statusBar .progress span.percentage{width: 0; height: 100%; left: 0; top: 0; background: #1483d8; position: absolute;}
    139. 

  139. .uploader-list-container .statusBar .progress span.text{position: relative; z-index: 10;}
    140. 

  140. .uploader-list-container .statusBar .info{display: inline-block; font-size: 14px; color: #666666;}
    141. 

  141. .uploader-list-container .statusBar .btns{position: absolute; top: 10px; right: 20px; line-height: 40px;}
    142. 

  142. #filePicker{display: inline-block; float: left;}
    143. 

  143. .uploader-list-container .statusBar .btns .webuploader-pick,
    144. 

  144. .uploader-list-container .statusBar .btns .uploadBtn,
    145. 

  145. .uploader-list-container .statusBar .btns .uploadBtn.state-uploading,
    146. 

  146. .uploader-list-container .statusBar .btns .uploadBtn.state-paused{background: #ffffff; border: 1px solid #cfcfcf; color: #565656; padding: 0 18px; display: inline-block; border-radius: 3px; margin-left: 10px; cursor: pointer; font-size: 14px; float: left;}
    147. 

  147. .uploader-list-container .statusBar .btns .webuploader-pick-hover,
    148. 

  148. .uploader-list-container .statusBar .btns .uploadBtn:hover,
    149. 

  149. .uploader-list-container .statusBar .btns .uploadBtn.state-uploading:hover,
    150. 

  150. .uploader-list-container .statusBar .btns .uploadBtn.state-paused:hover{background: #f0f0f0;}
    151. 

  151. .uploader-list-container .statusBar .btns .uploadBtn{background: #00b7ee; color: #fff; border-color: transparent;}
    152. 

  152. .uploader-list-container .statusBar .btns .uploadBtn:hover{background: #00a2d4;}
    153. 

  153. .uploader-list-container .statusBar .btns .uploadBtn.disabled{pointer-events: none; opacity: 0.6;}
    154.