1/* --------------------------------------- 2/* Fine Uploader Styles 3/* --------------------------------------- 4 5/* Buttons 6------------------------------------------ */ 7.qq-btn 8{ 9 box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset, 10 1px 0 1px rgba(255, 255, 255, 0.07) inset, 11 0 1px 0 rgba(0, 0, 0, 0.36), 12 0 -2px 12px rgba(0, 0, 0, 0.08) inset; 13 padding: 3px 4px; 14 border: 1px solid #CCCCCC; 15 border-radius: 2px; 16 color: inherit; 17 background-color: #FFFFFF; 18} 19.qq-upload-delete, .qq-upload-pause, .qq-upload-continue { 20 display: inline; 21} 22.qq-upload-delete 23{ 24 background-color: #e65c47; 25 color: #FAFAFA; 26 border-color: #dc523d; 27 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); 28} 29.qq-upload-delete:hover { 30 background-color: #f56b56; 31 } 32.qq-upload-cancel 33{ 34 background-color: #F5D7D7; 35 border-color: #e6c8c8; 36} 37.qq-upload-cancel:hover { 38 background-color: #ffe1e1; 39} 40.qq-upload-retry 41{ 42 background-color: #EBF6E0; 43 border-color: #d2ddc7; 44} 45.qq-upload-retry:hover { 46 background-color: #f7ffec; 47} 48.qq-upload-pause, .qq-upload-continue { 49 background-color: #00ABC7; 50 color: #FAFAFA; 51 border-color: #2dadc2; 52 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); 53} 54.qq-upload-pause:hover, .qq-upload-continue:hover { 55 background-color: #0fbad6; 56} 57 58/* Upload Button 59------------------------------------------ */ 60.qq-upload-button { 61 display: inline; 62 width: 105px; 63 margin-bottom: 10px; 64 padding: 7px 10px; 65 text-align: center; 66 float: left; 67 background: #00ABC7; 68 color: #FFFFFF; 69 border-radius: 2px; 70 border: 1px solid #2dadc2; 71 box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset, 72 1px 0 1px rgba(255, 255, 255, 0.07) inset, 73 0 1px 0 rgba(0, 0, 0, 0.36), 74 0 -2px 12px rgba(0, 0, 0, 0.08) inset; 75} 76.qq-upload-button-hover { 77 background: #33B6CC; 78} 79.qq-upload-button-focus { 80 outline: 1px dotted #000000; 81} 82 83 84/* Drop Zone 85------------------------------------------ */ 86.qq-uploader { 87 position: relative; 88 min-height: 200px; 89 max-height: 490px; 90 overflow-y: hidden; 91 width: inherit; 92 border-radius: 6px; 93 background-color: #FDFDFD; 94 border: 1px dashed #CCCCCC; 95 padding: 20px; 96} 97.qq-uploader:before { 98 content: attr(qq-drop-area-text) " "; 99 position: absolute; 100 font-size: 200%; 101 left: 0; 102 width: 100%; 103 text-align: center; 104 top: 45%; 105 opacity: 0.25; 106} 107.qq-upload-drop-area, .qq-upload-extra-drop-area { 108 position: absolute; 109 top: 0; 110 left: 0; 111 width: 100%; 112 height: 100%; 113 min-height: 30px; 114 z-index: 2; 115 background: #F9F9F9; 116 border-radius: 4px; 117 border: 1px dashed #CCCCCC; 118 text-align: center; 119} 120.qq-upload-drop-area span { 121 display: block; 122 position: absolute; 123 top: 50%; 124 width: 100%; 125 margin-top: -8px; 126 font-size: 16px; 127} 128.qq-upload-extra-drop-area { 129 position: relative; 130 margin-top: 50px; 131 font-size: 16px; 132 padding-top: 30px; 133 height: 20px; 134 min-height: 40px; 135} 136.qq-upload-drop-area-active { 137 background: #FDFDFD; 138 border-radius: 4px; 139 border: 1px dashed #CCCCCC; 140} 141.qq-upload-list { 142 margin: 0; 143 padding: 0; 144 list-style: none; 145 max-height: 450px; 146 overflow-y: auto; 147 box-shadow: 0px 1px 0px rgba(15, 15, 50, 0.14); 148 clear: both; 149} 150 151 152/* Uploaded Elements 153------------------------------------------ */ 154.qq-upload-list li { 155 margin: 0; 156 padding: 9px; 157 line-height: 15px; 158 font-size: 16px; 159 color: #424242; 160 background-color: #F6F6F6; 161 border-top: 1px solid #FFFFFF; 162 border-bottom: 1px solid #DDDDDD; 163} 164.qq-upload-list li:first-child { 165 border-top: none; 166} 167.qq-upload-list li:last-child { 168 border-bottom: none; 169} 170 171.qq-upload-file, .qq-upload-spinner, .qq-upload-size, 172.qq-upload-cancel, .qq-upload-retry, .qq-upload-failed-text, 173.qq-upload-delete, .qq-upload-pause, .qq-upload-continue { 174 margin-right: 12px; 175 display: inline; 176} 177.qq-upload-file { 178 vertical-align: middle; 179 display: inline-block; 180 width: 300px; 181 text-overflow: ellipsis; 182 white-space: nowrap; 183 overflow-x: hidden; 184 height: 18px; 185} 186.qq-upload-spinner { 187 display: inline-block; 188 background: url("loading.gif"); 189 width: 15px; 190 height: 15px; 191 vertical-align: text-bottom; 192} 193.qq-drop-processing { 194 display: block; 195} 196.qq-drop-processing-spinner { 197 display: inline-block; 198 background: url("processing.gif"); 199 width: 24px; 200 height: 24px; 201 vertical-align: text-bottom; 202} 203.qq-upload-size, .qq-upload-cancel, .qq-upload-retry, 204.qq-upload-delete, .qq-upload-pause, .qq-upload-continue { 205 font-size: 12px; 206 font-weight: normal; 207 cursor: pointer; 208 vertical-align: middle; 209} 210.qq-upload-status-text { 211 font-size: 14px; 212 font-weight: bold; 213 display: block; 214} 215.qq-upload-failed-text { 216 display: none; 217 font-style: italic; 218 font-weight: bold; 219} 220.qq-upload-failed-icon { 221 display:none; 222 width:15px; 223 height:15px; 224 vertical-align:text-bottom; 225} 226.qq-upload-fail .qq-upload-failed-text { 227 display: inline; 228} 229.qq-upload-retrying .qq-upload-failed-text { 230 display: inline; 231} 232.qq-upload-list li.qq-upload-success { 233 background-color: #EBF6E0; 234 color: #424242; 235 border-bottom: 1px solid #D3DED1; 236 border-top: 1px solid #F7FFF5; 237} 238.qq-upload-list li.qq-upload-fail { 239 background-color: #F5D7D7; 240 color: #424242; 241 border-bottom: 1px solid #DECACA; 242 border-top: 1px solid #FCE6E6; 243} 244.qq-progress-bar { 245 display: block; 246 display: block; 247 background: #00abc7; 248 width: 0%; 249 height: 15px; 250 border-radius: 6px; 251 margin-bottom: 3px; 252} 253 254.qq-total-progress-bar { 255 height: 25px; 256 border-radius: 9px; 257} 258 259.qq-total-progress-bar-container { 260 margin-left: 9px; 261 display: inline; 262 float: right; 263 width: 500px; 264} 265 266INPUT.qq-edit-filename { 267 position: absolute; 268 opacity: 0; 269 filter: alpha(opacity=0); 270 z-index: -1; 271 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 272} 273 274.qq-upload-file.qq-editable { 275 cursor: pointer; 276 margin-right: 4px; 277} 278 279.qq-edit-filename-icon.qq-editable { 280 display: inline-block; 281 cursor: pointer; 282} 283 284INPUT.qq-edit-filename.qq-editing { 285 position: static; 286 height: 28px; 287 padding: 0 8px; 288 margin-right: 10px; 289 margin-bottom: -5px; 290 border: 1px solid #ccc; 291 border-radius: 2px; 292 font-size: 16px; 293 294 opacity: 1; 295 filter: alpha(opacity=100); 296 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 297} 298 299.qq-edit-filename-icon { 300 display: none; 301 background: url("edit.gif"); 302 width: 15px; 303 height: 15px; 304 vertical-align: text-bottom; 305 margin-right: 16px; 306} 307 308.qq-hide { 309 display: none; 310} 311 312 313/* Thumbnail 314------------------------------------------ */ 315.qq-thumbnail-selector { 316 vertical-align: middle; 317 margin-right: 12px; 318} 319 320 321/* <dialog> element styles */ 322.qq-uploader DIALOG { 323 display: none; 324} 325 326.qq-uploader DIALOG[open] { 327 display: block; 328} 329 330.qq-uploader DIALOG { 331 display: none; 332} 333 334.qq-uploader DIALOG[open] { 335 display: block; 336} 337 338.qq-uploader DIALOG .qq-dialog-buttons { 339 text-align: center; 340 padding-top: 10px; 341} 342 343.qq-uploader DIALOG .qq-dialog-buttons BUTTON { 344 margin-left: 5px; 345 margin-right: 5px; 346} 347 348.qq-uploader DIALOG .qq-dialog-message-selector { 349 padding-bottom: 10px; 350} 351 352.qq-uploader DIALOG::backdrop { 353 background-color: rgba(0, 0, 0, 0.7); 354}