懒羊羊
2023-08-30 1ac2bc1590406d9babec036e154d8d08f34a6aa1
提交 | 用户 | 时间
1ac2bc 1 @charset "utf-8";
2 /* dialog样式 */
3 .wrapper {
4     zoom: 1;
5     width: 630px;
6     *width: 626px;
7     height: 380px;
8     margin: 0 auto;
9     padding: 10px;
10     position: relative;
11     font-family: sans-serif;
12 }
13
14 /*tab样式框大小*/
15 .tabhead {
16     float:left;
17 }
18 .tabbody {
19     width: 100%;
20     height: 346px;
21     position: relative;
22     clear: both;
23 }
24
25 .tabbody .panel {
26     position: absolute;
27     width: 0;
28     height: 0;
29     background: #fff;
30     overflow: hidden;
31     display: none;
32 }
33
34 .tabbody .panel.focus {
35     width: 100%;
36     height: 346px;
37     display: block;
38 }
39
40 /* 上传附件 */
41 .tabbody #upload.panel {
42     width: 0;
43     height: 0;
44     overflow: hidden;
45     position: absolute !important;
46     clip: rect(1px, 1px, 1px, 1px);
47     background: #fff;
48     display: block;
49 }
50
51 .tabbody #upload.panel.focus {
52     width: 100%;
53     height: 346px;
54     display: block;
55     clip: auto;
56 }
57
58 #upload .queueList {
59     margin: 0;
60     width: 100%;
61     height: 100%;
62     position: absolute;
63     overflow: hidden;
64 }
65
66 #upload p {
67     margin: 0;
68 }
69
70 .element-invisible {
71     width: 0 !important;
72     height: 0 !important;
73     border: 0;
74     padding: 0;
75     margin: 0;
76     overflow: hidden;
77     position: absolute !important;
78     clip: rect(1px, 1px, 1px, 1px);
79 }
80
81 #upload .placeholder {
82     margin: 10px;
83     border: 2px dashed #e6e6e6;
84     *border: 0px dashed #e6e6e6;
85     height: 172px;
86     padding-top: 150px;
87     text-align: center;
88     background: url(./images/image.png) center 70px no-repeat;
89     color: #cccccc;
90     font-size: 18px;
91     position: relative;
92     top:0;
93     *top: 10px;
94 }
95
96 #upload .placeholder .webuploader-pick {
97     font-size: 18px;
98     background: #00b7ee;
99     border-radius: 3px;
100     line-height: 44px;
101     padding: 0 30px;
102     *width: 120px;
103     color: #fff;
104     display: inline-block;
105     margin: 0 auto 20px auto;
106     cursor: pointer;
107     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
108 }
109
110 #upload .placeholder .webuploader-pick-hover {
111     background: #00a2d4;
112 }
113
114
115 #filePickerContainer {
116     text-align: center;
117 }
118
119 #upload .placeholder .flashTip {
120     color: #666666;
121     font-size: 12px;
122     position: absolute;
123     width: 100%;
124     text-align: center;
125     bottom: 20px;
126 }
127
128 #upload .placeholder .flashTip a {
129     color: #0785d1;
130     text-decoration: none;
131 }
132
133 #upload .placeholder .flashTip a:hover {
134     text-decoration: underline;
135 }
136
137 #upload .placeholder.webuploader-dnd-over {
138     border-color: #999999;
139 }
140
141 #upload .filelist {
142     list-style: none;
143     margin: 0;
144     padding: 0;
145     overflow-x: hidden;
146     overflow-y: auto;
147     position: relative;
148     height: 300px;
149 }
150
151 #upload .filelist:after {
152     content: '';
153     display: block;
154     width: 0;
155     height: 0;
156     overflow: hidden;
157     clear: both;
158 }
159
160 #upload .filelist li {
161     width: 113px;
162     height: 113px;
163     background: url(./images/bg.png);
164     text-align: center;
165     margin: 9px 0 0 9px;
166     *margin: 6px 0 0 6px;
167     position: relative;
168     display: block;
169     float: left;
170     overflow: hidden;
171     font-size: 12px;
172 }
173
174 #upload .filelist li p.log {
175     position: relative;
176     top: -45px;
177 }
178
179 #upload .filelist li p.title {
180     position: absolute;
181     top: 0;
182     left: 0;
183     width: 100%;
184     overflow: hidden;
185     white-space: nowrap;
186     text-overflow: ellipsis;
187     top: 5px;
188     text-indent: 5px;
189     text-align: left;
190 }
191
192 #upload .filelist li p.progress {
193     position: absolute;
194     width: 100%;
195     bottom: 0;
196     left: 0;
197     height: 8px;
198     overflow: hidden;
199     z-index: 50;
200     margin: 0;
201     border-radius: 0;
202     background: none;
203     -webkit-box-shadow: 0 0 0;
204 }
205
206 #upload .filelist li p.progress span {
207     display: none;
208     overflow: hidden;
209     width: 0;
210     height: 100%;
211     background: #1483d8 url(./images/progress.png) repeat-x;
212
213     -webit-transition: width 200ms linear;
214     -moz-transition: width 200ms linear;
215     -o-transition: width 200ms linear;
216     -ms-transition: width 200ms linear;
217     transition: width 200ms linear;
218
219     -webkit-animation: progressmove 2s linear infinite;
220     -moz-animation: progressmove 2s linear infinite;
221     -o-animation: progressmove 2s linear infinite;
222     -ms-animation: progressmove 2s linear infinite;
223     animation: progressmove 2s linear infinite;
224
225     -webkit-transform: translateZ(0);
226 }
227
228 @-webkit-keyframes progressmove {
229     0% {
230         background-position: 0 0;
231     }
232     100% {
233         background-position: 17px 0;
234     }
235 }
236
237 @-moz-keyframes progressmove {
238     0% {
239         background-position: 0 0;
240     }
241     100% {
242         background-position: 17px 0;
243     }
244 }
245
246 @keyframes progressmove {
247     0% {
248         background-position: 0 0;
249     }
250     100% {
251         background-position: 17px 0;
252     }
253 }
254
255 #upload .filelist li p.imgWrap {
256     position: relative;
257     z-index: 2;
258     line-height: 113px;
259     vertical-align: middle;
260     overflow: hidden;
261     width: 113px;
262     height: 113px;
263
264     -webkit-transform-origin: 50% 50%;
265     -moz-transform-origin: 50% 50%;
266     -o-transform-origin: 50% 50%;
267     -ms-transform-origin: 50% 50%;
268     transform-origin: 50% 50%;
269
270     -webit-transition: 200ms ease-out;
271     -moz-transition: 200ms ease-out;
272     -o-transition: 200ms ease-out;
273     -ms-transition: 200ms ease-out;
274     transition: 200ms ease-out;
275 }
276 #upload .filelist li p.imgWrap.notimage {
277     margin-top: 0;
278     width: 111px;
279     height: 111px;
280     border: 1px #eeeeee solid;
281 }
282 #upload .filelist li p.imgWrap.notimage i.file-preview {
283     margin-top: 15px;
284 }
285
286 #upload .filelist li img {
287     width: 100%;
288 }
289
290 #upload .filelist li p.error {
291     background: #f43838;
292     color: #fff;
293     position: absolute;
294     bottom: 0;
295     left: 0;
296     height: 28px;
297     line-height: 28px;
298     width: 100%;
299     z-index: 100;
300     display:none;
301 }
302
303 #upload .filelist li .success {
304     display: block;
305     position: absolute;
306     left: 0;
307     bottom: 0;
308     height: 40px;
309     width: 100%;
310     z-index: 200;
311     background: url(./images/success.png) no-repeat right bottom;
312     background-image: url(./images/success.gif) \9;
313 }
314
315 #upload .filelist li.filePickerBlock {
316     width: 113px;
317     height: 113px;
318     background: url(./images/image.png) no-repeat center 12px;
319     border: 1px solid #eeeeee;
320     border-radius: 0;
321 }
322 #upload .filelist li.filePickerBlock div.webuploader-pick  {
323     width: 100%;
324     height: 100%;
325     margin: 0;
326     padding: 0;
327     opacity: 0;
328     background: none;
329     font-size: 0;
330 }
331
332 #upload .filelist div.file-panel {
333     position: absolute;
334     height: 0;
335     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;
336     background: rgba(0, 0, 0, 0.5);
337     width: 100%;
338     top: 0;
339     left: 0;
340     overflow: hidden;
341     z-index: 300;
342 }
343
344 #upload .filelist div.file-panel span {
345     width: 24px;
346     height: 24px;
347     display: inline;
348     float: right;
349     text-indent: -9999px;
350     overflow: hidden;
351     background: url(./images/icons.png) no-repeat;
352     background: url(./images/icons.gif) no-repeat \9;
353     margin: 5px 1px 1px;
354     cursor: pointer;
355     -webkit-tap-highlight-color: rgba(0,0,0,0);
356     -webkit-user-select: none;
357     -moz-user-select: none;
358     -ms-user-select: none;
359     user-select: none;
360 }
361
362 #upload .filelist div.file-panel span.rotateLeft {
363     display:none;
364     background-position: 0 -24px;
365 }
366
367 #upload .filelist div.file-panel span.rotateLeft:hover {
368     background-position: 0 0;
369 }
370
371 #upload .filelist div.file-panel span.rotateRight {
372     display:none;
373     background-position: -24px -24px;
374 }
375
376 #upload .filelist div.file-panel span.rotateRight:hover {
377     background-position: -24px 0;
378 }
379
380 #upload .filelist div.file-panel span.cancel {
381     background-position: -48px -24px;
382 }
383
384 #upload .filelist div.file-panel span.cancel:hover {
385     background-position: -48px 0;
386 }
387
388 #upload .statusBar {
389     height: 45px;
390     border-bottom: 1px solid #dadada;
391     margin: 0 10px;
392     padding: 0;
393     line-height: 45px;
394     vertical-align: middle;
395     position: relative;
396 }
397
398 #upload .statusBar .progress {
399     border: 1px solid #1483d8;
400     width: 198px;
401     background: #fff;
402     height: 18px;
403     position: absolute;
404     top: 12px;
405     display: none;
406     text-align: center;
407     line-height: 18px;
408     color: #6dbfff;
409     margin: 0 10px 0 0;
410 }
411 #upload .statusBar .progress span.percentage {
412     width: 0;
413     height: 100%;
414     left: 0;
415     top: 0;
416     background: #1483d8;
417     position: absolute;
418 }
419 #upload .statusBar .progress span.text {
420     position: relative;
421     z-index: 10;
422 }
423
424 #upload .statusBar .info {
425     display: inline-block;
426     font-size: 14px;
427     color: #666666;
428 }
429
430 #upload .statusBar .btns {
431     position: absolute;
432     top: 7px;
433     right: 0;
434     line-height: 30px;
435 }
436
437 #filePickerBtn {
438     display: inline-block;
439     float: left;
440 }
441 #upload .statusBar .btns .webuploader-pick,
442 #upload .statusBar .btns .uploadBtn,
443 #upload .statusBar .btns .uploadBtn.state-uploading,
444 #upload .statusBar .btns .uploadBtn.state-paused {
445     background: #ffffff;
446     border: 1px solid #cfcfcf;
447     color: #565656;
448     padding: 0 18px;
449     display: inline-block;
450     border-radius: 3px;
451     margin-left: 10px;
452     cursor: pointer;
453     font-size: 14px;
454     float: left;
455     -webkit-user-select: none;
456     -moz-user-select: none;
457     -ms-user-select: none;
458     user-select: none;
459 }
460 #upload .statusBar .btns .webuploader-pick-hover,
461 #upload .statusBar .btns .uploadBtn:hover,
462 #upload .statusBar .btns .uploadBtn.state-uploading:hover,
463 #upload .statusBar .btns .uploadBtn.state-paused:hover {
464     background: #f0f0f0;
465 }
466
467 #upload .statusBar .btns .uploadBtn,
468 #upload .statusBar .btns .uploadBtn.state-paused{
469     background: #00b7ee;
470     color: #fff;
471     border-color: transparent;
472 }
473 #upload .statusBar .btns .uploadBtn:hover,
474 #upload .statusBar .btns .uploadBtn.state-paused:hover{
475     background: #00a2d4;
476 }
477
478 #upload .statusBar .btns .uploadBtn.disabled {
479     pointer-events: none;
480     filter:alpha(opacity=60);
481     -moz-opacity:0.6;
482     -khtml-opacity: 0.6;
483     opacity: 0.6;
484 }
485
486
487
488 /* 图片管理样式 */
489 #online {
490     width: 100%;
491     height: 336px;
492     padding: 10px 0 0 0;
493 }
494 #online #fileList{
495     width: 100%;
496     height: 100%;
497     overflow-x: hidden;
498     overflow-y: auto;
499     position: relative;
500 }
501 #online ul {
502     display: block;
503     list-style: none;
504     margin: 0;
505     padding: 0;
506 }
507 #online li {
508     float: left;
509     display: block;
510     list-style: none;
511     padding: 0;
512     width: 113px;
513     height: 113px;
514     margin: 0 0 9px 9px;
515     *margin: 0 0 6px 6px;
516     background-color: #eee;
517     overflow: hidden;
518     cursor: pointer;
519     position: relative;
520 }
521 #online li.clearFloat {
522     float: none;
523     clear: both;
524     display: block;
525     width:0;
526     height:0;
527     margin: 0;
528     padding: 0;
529 }
530 #online li img {
531     cursor: pointer;
532 }
533 #online li div.file-wrapper {
534     cursor: pointer;
535     position: absolute;
536     display: block;
537     width: 111px;
538     height: 111px;
539     border: 1px solid #eee;
540     background: url("./images/bg.png") repeat;
541 }
542 #online li div span.file-title{
543     display: block;
544     padding: 0 3px;
545     margin: 3px 0 0 0;
546     font-size: 12px;
547     height: 13px;
548     color: #555555;
549     text-align: center;
550     width: 107px;
551     white-space: nowrap;
552     word-break: break-all;
553     overflow: hidden;
554     text-overflow: ellipsis;
555 }
556 #online li .icon {
557     cursor: pointer;
558     width: 113px;
559     height: 113px;
560     position: absolute;
561     top: 0;
562     left: 0;
563     z-index: 2;
564     border: 0;
565     background-repeat: no-repeat;
566 }
567 #online li .icon:hover {
568     width: 107px;
569     height: 107px;
570     border: 3px solid #1094fa;
571 }
572 #online li.selected .icon {
573     background-image: url(images/success.png);
574     background-image: url(images/success.gif) \9;
575     background-position: 75px 75px;
576 }
577 #online li.selected .icon:hover {
578     width: 107px;
579     height: 107px;
580     border: 3px solid #1094fa;
581     background-position: 72px 72px;
582 }
583
584
585 /* 在线文件的文件预览图标 */
586 i.file-preview {
587     display: block;
588     margin: 10px auto;
589     width: 70px;
590     height: 70px;
591     background-image: url("./images/file-icons.png");
592     background-image: url("./images/file-icons.gif") \9;
593     background-position: -140px center;
594     background-repeat: no-repeat;
595 }
596 i.file-preview.file-type-dir{
597     background-position: 0 center;
598 }
599 i.file-preview.file-type-file{
600     background-position: -140px center;
601 }
602 i.file-preview.file-type-filelist{
603     background-position: -210px center;
604 }
605 i.file-preview.file-type-zip,
606 i.file-preview.file-type-rar,
607 i.file-preview.file-type-7z,
608 i.file-preview.file-type-tar,
609 i.file-preview.file-type-gz,
610 i.file-preview.file-type-bz2{
611     background-position: -280px center;
612 }
613 i.file-preview.file-type-xls,
614 i.file-preview.file-type-xlsx{
615     background-position: -350px center;
616 }
617 i.file-preview.file-type-doc,
618 i.file-preview.file-type-docx{
619     background-position: -420px center;
620 }
621 i.file-preview.file-type-ppt,
622 i.file-preview.file-type-pptx{
623     background-position: -490px center;
624 }
625 i.file-preview.file-type-vsd{
626     background-position: -560px center;
627 }
628 i.file-preview.file-type-pdf{
629     background-position: -630px center;
630 }
631 i.file-preview.file-type-txt,
632 i.file-preview.file-type-md,
633 i.file-preview.file-type-json,
634 i.file-preview.file-type-htm,
635 i.file-preview.file-type-xml,
636 i.file-preview.file-type-html,
637 i.file-preview.file-type-js,
638 i.file-preview.file-type-css,
639 i.file-preview.file-type-php,
640 i.file-preview.file-type-jsp,
641 i.file-preview.file-type-asp{
642     background-position: -700px center;
643 }
644 i.file-preview.file-type-apk{
645     background-position: -770px center;
646 }
647 i.file-preview.file-type-exe{
648     background-position: -840px center;
649 }
650 i.file-preview.file-type-ipa{
651     background-position: -910px center;
652 }
653 i.file-preview.file-type-mp4,
654 i.file-preview.file-type-swf,
655 i.file-preview.file-type-mkv,
656 i.file-preview.file-type-avi,
657 i.file-preview.file-type-flv,
658 i.file-preview.file-type-mov,
659 i.file-preview.file-type-mpg,
660 i.file-preview.file-type-mpeg,
661 i.file-preview.file-type-ogv,
662 i.file-preview.file-type-webm,
663 i.file-preview.file-type-rm,
664 i.file-preview.file-type-rmvb{
665     background-position: -980px center;
666 }
667 i.file-preview.file-type-ogg,
668 i.file-preview.file-type-wav,
669 i.file-preview.file-type-wmv,
670 i.file-preview.file-type-mid,
671 i.file-preview.file-type-mp3{
672     background-position: -1050px center;
673 }
674 i.file-preview.file-type-jpg,
675 i.file-preview.file-type-jpeg,
676 i.file-preview.file-type-gif,
677 i.file-preview.file-type-bmp,
678 i.file-preview.file-type-png,
679 i.file-preview.file-type-psd{
680     background-position: -140px center;
681 }