MDL-41213 bootstrap: fixed sizing of filepicker selected file licence selector
[moodle.git] / theme / bootstrapbase / less / moodle / filemanager.less
1  // File Picker and File Manager
2 .filemanager,
3 .filepicker,
4 .file-picker {
5     font-size: 11px;
6 }
7 .filemanager a,
8 .file-picker a,
9 .filemanager a:hover,
10 .file-picker a:hover {
11     color: #555555;
12     text-decoration: none;
13 }
14 .filemanager input[type="text"],
15 .file-picker input[type="text"] {
16     width: 265px;
17 }
18  .file-picker .fp-setlicense {
19     td {
20         max-width: 265px;
21     }
22     select {
23         max-width: 100%;
24     }
25  }
26 .fp-content-center {
27     height: 100%;
28     width: 100%;
29     display: table-cell;
30     vertical-align: middle;
31 }
32 .fp-content-hidden {
33     visibility: hidden;
34 }
35 // Dialogue (File Picker and File Manager)
36 .yui3-panel-focused {
37     outline: none;
38 }
39 #filesskin .yui3-panel-content {
40     padding-bottom: 20px;
41     background: #F2F2F2;
42     .border-radius(8px);
43     border: 1px solid #fff;
44     display: inline-block;
45     .ie7-inline-block();
46     .box-shadow(5px 5px 20px 0 #666);
47 }
48 #filesskin .yui3-widget-hd {
49     .border-radius(10px 10px 0 0);
50     border-bottom: 1px solid #BBBBBB;
51     padding: 5px;
52     text-align: center;
53     font-size: 12px;
54     color: #333;
55     letter-spacing: 1px;
56     text-shadow: 1px 1px 1px #fff;
57     filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
58     #gradient > .vertical (#fff, #ccc);
59 }
60 .fp-panel-button {
61     background: #fff;
62     padding: 3px 20px 2px 20px;
63     text-align: center;
64     margin: 10px;
65     .border-radius(10px);
66     display: inline-block;
67     .ie7-inline-block();
68     .box-shadow(2px 2px 3px .1px #999);
69 }
71 .filepicker .moodle-dialogue-wrap .moodle-dialogue-bd {
72     padding: 0px;
73 }
74 // File Picker layout
75 #filesskin .file-picker.fp-generallayout {
76     width: 859px;
77     background: #FFFFFF;
78     .border-radius(10px);
79     border: 1px solid #CCCCCC;
80     position: relative;
81 }
82 .file-picker .fp-repo-area {
83     width: 180px;
84     overflow: auto;
85     display: inline-block;
86     .ie7-inline-block();
87     float: left;
88     height: 525px;
89     border-right: 1px solid #BBBBBB;
90 }
91 .dir-rtl .file-picker .fp-repo-area {
92     border-left: 1px solid #BBBBBB;
93     border-right: none;
94     float: right;
95 }
96 .file-picker .fp-repo-items {
97     float: left;
98     width: 693px;
99 }
100 .dir-rtl .file-picker .fp-repo-items {
101     float: right;
103 .file-picker .fp-navbar {
104     background: #F2F2F2;
105     min-height: 22px;
106     border-bottom: 1px solid #BBBBBB;
107     padding: 5px 8px;
109 .file-picker .fp-content {
110     background: #FFFFFF;
111     clear: both;
112     overflow: auto;
113     height: 468px;
115 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
116     width: 100%;
117     height: 100%;
119 .dir-rtl .file-picker .fp-repo-items {
120     margin-right: 181px;
122 .file-picker .fp-content-loading {
123     height: 100%;
124     width: 100%;
125     display: table;
126     text-align: center;
128 .file-picker .fp-content .fp-object-container {
129     width: 98%;
130     height: 98%;
132 .dir-rtl .file-picker .fp-list {
133     text-align: right;
135 .dir-rtl .file-picker .fp-toolbar {
136     padding: 0;
138 .dir-rtl .file-picker .fp-list {
139     text-align: right;
141 .dir-rtl .file-picker .fp-repo-name {
142     display: inline;
144 .dir-rtl .file-picker .fp-pathbar {
145     text-align: right;
146     display: block;
147     border-top: none;
149 .dir-rtl .file-picker div.bd {
150     text-align: right;
152 .dir-rtl #filemenu .yuimenuitemlabel {
153     text-align: right;
155 .dir-rtl .filepicker .yui-layout-unit-left {
156     left: 500px;
158 .dir-rtl .filepicker .yui-layout-unit-center {
159     left: 0;
161 // File Manager
162 .dir-rtl .filemanager-toolbar a {
163     padding: 0;
165 // Repositories on fp-repo-area (File Picker only)
166 .file-picker .fp-list {
167     list-style-type: none;
168     padding: 0;
169     float: left;
170     width: 100%;
171     margin: 0;
173 .dir-rtl .file-picker .fp-list {
174     text-align: right;
175     float: left;
177 .file-picker .fp-list .fp-repo a {
178     display: block;
179     padding: .5em .7em;
181 .file-picker .fp-list .fp-repo.active {
182     background: #F2F2F2;
184 .file-picker .fp-list .fp-repo-icon {
185     padding: 0 7px 0 5px;
187 // Tools, Path & View on fp-navbar (File Picker and File Manager)
188 .fp-toolbar {
189     display: table-row;
190     line-height: 22px;
191     float: left;
192     max-width: 70%;
194 .dir-rtl .fp-toolbar {
195     float: right;
197 .fp-toolbar.empty {
198     display: none;
200 .fp-toolbar .disabled {
201     display: none;
203 .fp-toolbar div {
204     display: inline-block;
205     .ie7-inline-block();
206     padding: 0 2px;
207     padding-right: 10px;
209 .dir-rtl .fp-toolbar div {
210     width: 100px;
212 .fp-toolbar img {
213     vertical-align: -15%;
214     margin-right: 5px;
216 .fp-toolbar .fp-tb-search {
217     width: 228px;
218     height: 14px;
220 .fp-toolbar .fp-tb-search input {
221     background: #FFFFFF url('[[pix:a/search]]') no-repeat 3px 3px;
222     padding: 2px 6px 1px 20px;
223     width: 200px;
224     height: 16px;
225     border: 1px solid #BBBBBB;
227 .fp-viewbar {
228     float: right;
229     width: 69px;
230     height: 22px;
231     margin-right: 8px;
233 .dir-rtl .fp-toolbar img {
234     vertical-align: -35%;
236 .dir-rtl .fp-viewbar {
237     float: left;
238     width: 100px;
240 .fp-vb-icons {
241     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
242     width: 22px;
243     height: 22px;
244     display: inline-block;
245     .ie7-inline-block();
247 .dir-rtl .fp-vb-icons {
248     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
249     display: block;
250     float: left;
251     margin-right: 4px;
253 .fp-vb-icons.checked {
254     background: url('[[pix:theme|fp/view_icon_selected]]');
256 .dir-rtl .fp-vb-icons.checked {
257     background: url('[[pix:theme|fp/view_icon_selected]]');
258     display: block;
259     float: left;
260     margin-right: 4px;
262 .fp-viewbar.disabled .fp-vb-icons {
263     background: url('[[pix:theme|fp/view_icon_inactive]]');
265 .fp-vb-details {
266     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
267     width: 23px;
268     height: 22px;
269     display: inline-block;
270     .ie7-inline-block();
271     margin-left: -4px;
273 .dir-rtl .fp-vb-details {
274     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
275     display: block;
276     float: left;
277     margin-right: 4px;
279 .fp-vb-details.checked {
280     background: url('[[pix:theme|fp/view_list_selected]]');
282 .dir-rtl .fp-vb-details.checked {
283     background: url('[[pix:theme|fp/view_list_selected]]');
284     display: block;
285     float: left;
286     margin-right: 4px;
288 .fp-viewbar.disabled .fp-vb-details {
289     background: url('[[pix:theme|fp/view_list_inactive]]');
291 .fp-vb-tree {
292     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
293     width: 23px;
294     height: 22px;
295     display: inline-block;
296     .ie7-inline-block();
297     margin-left: -4px;
299 .dir-rtl .fp-vb-tree {
300     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
301     display: block;
302     float: left;
303     margin-right: 4px;
305 .fp-vb-tree.checked {
306     background: url('[[pix:theme|fp/view_tree_selected]]');
308 .dir-rtl .fp-vb-tree.checked {
309     background: url('[[pix:theme|fp/view_tree_selected]]');
310     display: block;
311     float: left;
312     margin-right: 4px;
314 .fp-viewbar.disabled .fp-vb-tree {
315     background: url('[[pix:theme|fp/view_tree_inactive]]');
317 .file-picker .fp-clear-left {
318     clear: left;
320 // over ride hover rule from core.css
321 .dir-rtl .filemanager-toolbar .fp-vb-icons a:hover {
322     background: url('[[pix:theme|fp/view_icon_selected]]');
324 .dir-rtl .filemanager-toolbar .fp-vb-icons.checked a:hover {
325     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
327 .dir-rtl .fp-vb-details a:hover {
328     background: none;
329     border: 20px solid black;
331 .dir-rtl .fp-vb-details.checked a:hover {
332     background: none;
333     border: 40px solid black;
335 .dir-rtl .fp-vb-tree a:hover {
336     background: none;
337     border: 30px solid black;
339 .dir-rtl .fp-vb-tree.checked a:hover {
340     background: none;
341     border: 50px solid black;
343 .file-picker .fp-pathbar {
344     display: table-row;
346 .fp-pathbar.empty {
347     display: none;
349 .fp-pathbar .fp-path-folder {
350     background: url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;
351     width: 27px;
352     height: 12px;
353     margin-left: 4px;
355 .dir-rtl .fp-pathbar .fp-path-folder {
356     background: url('[[pix:theme|fp/path_folder_rtl]]') no-repeat right top;
357     width: auto;
358     height: 12px;
359     margin-left: 4px;
361 .dir-rtl .fp-pathbar span {
362     display: inline-block;
363     .ie7-inline-block();
364     float: right;
365     margin-left: 32px;
367 .fp-pathbar .fp-path-folder-name {
368     margin-left: 32px;
369     line-height: 20px;
371 .dir-rtl .fp-pathbar .fp-path-folder-name {
372     margin-right: 32px;
373     line-height: 20px;
375 // Icon view (File Picker and File Manager)
376 .fp-iconview .fp-file {
377     float: left;
378     text-align: center;
379     position: relative;
380     margin: 10px 10px 35px;
382 .fp-iconview .fp-thumbnail {
383     min-width: 110px;
384     min-height: 110px;
385     line-height: 110px;
386     text-align: center;
387     border: 1px solid #FFFFFF;
388     display: block;
390 .fp-iconview .fp-thumbnail img {
391     border: 1px solid #ddd;
392     padding: 3px;
393     vertical-align: middle;
394     .box-shadow(1px 1px 2px 0 #ccc);
396 .fp-iconview .fp-thumbnail:hover {
397     background: #fff;
398     border: 1px solid #ddd;
399     .box-shadow(inset 0 0 10px 0px #ccc);
401 .fp-iconview .fp-filename-field {
402     height: 33px;
403     word-wrap: break-word;
404     overflow: hidden;
405     position: absolute;
407 .fp-iconview .fp-filename-field:hover {
408     overflow: visible;
409     z-index: 1000;
411 .fp-iconview .fp-filename-field .fp-filename {
412     background: #FFFFFF;
413     padding-top: 5px;
414     padding-bottom: 12px;
415     min-width: 112px;
417 .dir-rtl .fp-iconview .fp-file {
418     float: right;
420 // Table view (File Picker only)
421 .file-picker .yui3-datatable table {
422     border: 0 solid #BBBBBB;
423     width: 100%;
425 #filesskin .file-picker .yui3-datatable-header {
426     background: #FFFFFF;
427     border-bottom: 1px solid #CCCCCC;
428     border-left: 0 solid #FFFFFF;
429     color: #555555;
431 #filesskin .file-picker .yui3-datatable-odd .yui3-datatable-cell {
432     background-color: #F6F6F6;
433     border-left: 0 solid #F6F6F6;
435 #filesskin .file-picker .yui3-datatable-even .yui3-datatable-cell {
436     background-color: #FFFFFF;
437     border-left: 0 solid #FFFFFF;
439 .dir-rtl .file-picker .yui3-datatable-header {
440     text-align: right;
442 // Tree view (File Manager only)
444 // first or middle sibling, no children
445 .file-picker .ygtvtn,
446 .filemanager .ygtvtn {
447     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
448     width: 17px;
449     height: 22px;
451 .dir-rtl .filemanager .ygtvtn,
452 .dir-rtl .file-picker .ygtvtn {
453     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
454     width: 17px;
455     height: 22px;
457 // first or middle sibling, collapsable
458 .file-picker .ygtvtm,
459 .filemanager .ygtvtm {
460     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
461     width: 13px;
462     height: 12px;
463     cursor: pointer;
465 // first or middle sibling, collapsable, hover
466 .file-picker .ygtvtmh,
467 .filemanager .ygtvtmh {
468     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
469     width: 13px;
470     height: 12px;
471     cursor: pointer;
473 // first or middle sibling, expandable
474 .file-picker .ygtvtp,
475 .filemanager .ygtvtp {
476     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
477     width: 13px;
478     height: 12px;
479     cursor: pointer;
481 .dir-rtl .file-picker .ygtvtp,
482 .dir-rtl .filemanager .ygtvtp {
483     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
485 // first or middle sibling, expandable, hover
486 .file-picker .ygtvtph,
487 .filemanager .ygtvtph {
488     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
489     width: 13px;
490     height: 22px;
491     cursor: pointer;
493 .dir-rtl .file-picker .ygtvtph,
494 .dir-rtl .filemanager .ygtvtph {
495     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
497 // last sibling, no children
498 .file-picker .ygtvln,
499 .filemanager .ygtvln {
500     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
501     width: 17px;
502     height: 22px;
504 .dir-rtl .file-picker .ygtvln,
505 .dir-rtl .filemanager .ygtvln {
506     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
508 // Last sibling, collapsable
509 .file-picker .ygtvlm,
510 .filemanager .ygtvlm {
511     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
512     width: 13px;
513     height: 12px;
514     cursor: pointer;
516 // Last sibling, collapsable, hover
517 .file-picker .ygtvlmh,
518 .filemanager .ygtvlmh {
519     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
520     width: 13px;
521     height: 12px;
522     cursor: pointer;
524 // Last sibling, expandable
525 .file-picker .ygtvlp,
526 .filemanager .ygtvlp {
527     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
528     width: 13px;
529     height: 12px;
530     cursor: pointer;
532 .dir-rtl .file-picker .ygtvlp,
533 .dir-rtl .filemanager .ygtvlp {
534     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
536 // Last sibling, expandable, hover
537 .file-picker .ygtvlph,
538 .filemanager .ygtvlph {
539     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
540     width: 13px;
541     height: 12px;
542     cursor: pointer;
544 .dir-rtl .file-picker .ygtvlph,
545 .dir-rtl .filemanager .ygtvlph {
546     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
548 // Loading icon
549 .file-picker .ygtvloading,
550 .filemanager .ygtvloading {
551     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
552     width: 16px;
553     height: 22px;
555 // the style for the empty cells that are used for rendering the depth of the node
556 .file-picker .ygtvdepthcell,
557 .filemanager .ygtvdepthcell {
558     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
559     width: 17px;
560     height: 32px;
562 .file-picker .ygtvblankdepthcell,
563 .filemanager .ygtvblankdepthcell {
564     width: 17px;
565     height: 22px;
567 a.ygtvspacer:hover {
568     color: transparent;
569     text-decoration: none;
571 .ygtvlabel,
572 .ygtvlabel:link,
573 .ygtvlabel:visited,
574 .ygtvlabel:hover {
575     background-color: transparent;
576     cursor: pointer;
577     margin-left: 2px;
578     text-decoration: none;
580 .file-picker .ygtvfocus,
581 .filemanager .ygtvfocus {
582     background-color: #EEEEEE;
584 .fp-filename-icon {
585     margin-top: 10px;
586     display: block;
587     position: relative;
589 .fp-icon {
590     float: left;
591     margin-top: -7px;
592     width: 24px;
593     height: 24px;
594     margin-right: 10px;
595     text-align: center;
596     line-height: 24px;
598 .dir-rtl .fp-icon {
599     float: right;
600     margin-left: 10px;
601     margin-right: 0;
603 .fp-icon img {
604     max-height: 24px;
605     max-width: 24px;
606     vertical-align: middle;
608 .fp-filename {
609     padding-right: 10px;
611 .dir-rtl .fp-filename {
612     padding-left: 10px;
613     padding-right: 0;
615 // Repositories Login on fp-content (File Picker only)
617 .file-picker .fp-login-form {
618     height: 100%;
619     width: 100%;
620     display: table;
622 .file-picker .fp-login-form table {
623     margin: 0 auto;
625 .file-picker .fp-login-form p {
626     text-align: center;
627     margin-top: 3em;
629 .file-picker .fp-login-form .fp-login-input label {
630     text-align: right;
631     display: block;
633 .file-picker .fp-login-form .fp-login-input .input {
634     text-align: left;
636 .file-picker .fp-login-form input[type="checkbox"]{
637     width: 15px;
638     height: 15px;
640 // Upload on fp-content (File Picker only)
641 .file-picker .fp-upload-form {
642     height: 100%;
643     width: 100%;
644     display: table;
646 .file-picker .fp-upload-form table {
647     margin: 0 auto;
649 // File exists dialogue on Upload (File Picker only)
650 .file-picker.fp-dlg {
651     text-align: center;
653 .file-picker.fp-dlg .fp-dlg-text {
654     padding: 30px 20px 10px;
655     font-size: 12px;
657 .file-picker.fp-dlg .fp-dlg-buttons {
658     margin: 0 20px;
660 // Error dialogue on Upload (File Picker only)
661 .file-picker.fp-msg {
662     text-align: center;
664 .file-picker.fp-msg .fp-msg-text {
665     padding: 40px 20px 10px 20px;
666     min-width: 200px;
667     max-width: 500px;
668     max-height: 300px;
669     overflow: auto;
670     font-size: 12px;
672 .file-picker.fp-msg.fp-msg-error .fp-msg-text {
673     padding: 40px 20px 10px 20px;
674     font-size: 12px;
676 // Error on fp-content (File Picker only)
677 .file-picker .fp-content-error {
678     height: 100%;
679     width: 100%;
680     display: table;
681     text-align: center;
683 .file-picker .fp-content-error .fp-error {
684     height: 100%;
685     width: 100%;
686     display: table-cell;
687     vertical-align: middle;
688     padding: 40px 20px 10px 20px;
689     font-size: 12px;
691 // Lazy loading on fp-content (File Picker only)
692 .file-picker .fp-nextpage {
693     clear: both;
695 .file-picker .fp-nextpage .fp-nextpage-loading {
696     display: none;
698 .file-picker .fp-nextpage.loading .fp-nextpage-link {
699     display: none;
701 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
702     display: block;
703     text-align: center;
704     height: 100px;
705     padding-top: 50px;
707 // Select Dialogue (File Picker and File Manager)
708 .fp-select form {
709     padding: 20px 20px 0;
711 .fp-select .fp-select-loading {
712     text-align: center;
713     margin-top: 20px;
715 .fp-select .fp-hr {
716     clear: both;
717     height: 1px;
718     background-color: #FFFFFF;
719     border-bottom: 1px solid #BBBBBB;
720     width: auto;
721     margin: 10px 0;
723 .fp-select table {
724     padding: 0 0 10px;
726 .fp-select table .mdl-right {
727     min-width: 84px;
729 .fp-select .fp-reflist .mdl-right {
730     vertical-align: top;
732 .fp-select .fp-select-buttons {
733     float: right;
735 .fp-select .fp-info {
736     display: block;
737     clear: both;
738     padding: 1px 20px 0;
740 .fp-select .fp-thumbnail {
741     float: left;
742     min-width: 110px;
743     min-height: 110px;
744     line-height: 110px;
745     text-align: center;
746     margin: 10px 20px 0 0;
747     background: #fff;
748     border: 1px solid #ddd;
749     .box-shadow(inset 0 0 10px 0 #ccc);
751 .fp-select .fp-thumbnail img {
752     border: 1px solid #DDDDDD;
753     padding: 3px;
754     vertical-align: middle;
755     margin: 10px;
757 .fp-select .fp-fileinfo {
758     display: inline-block;
759     .ie7-inline-block();
760     margin-top: 10px;
762 .file-picker.fp-select .fp-fileinfo {
763     max-width: 240px;
765 .fp-select .fp-fileinfo div {
766     padding-bottom: 5px;
768 .file-picker.fp-select .uneditable {
769     display: none;
771 .file-picker.fp-select .fp-select-loading {
772     display: none;
774 .file-picker.fp-select.loading .fp-select-loading {
775     display: block;
777 .file-picker.fp-select.loading form {
778     display: none;
780 .fp-select .fp-dimensions.fp-unknown {
781     display: none;
783 // File Manager
784 .filemanager-loading{
785     display: none;
787 .jsenabled .filemanager-loading{
788     display: block;
789     margin-top: 100px;
791 .filemanager.fm-loading .filemanager-toolbar,
792 .filemanager.fm-loading .fp-pathbar,
793 .filemanager.fm-loading .filemanager-container,
794 .filemanager.fm-loaded .filemanager-loading,
795 .filemanager.fm-maxfiles .fp-btn-add,
796 .filemanager.fm-maxfiles .dndupload-message,
797 .filemanager.fm-noitems .fp-btn-download,
798 .filemanager .fm-empty-container,
799 .filemanager.fm-noitems .filemanager-container .fp-content {
800     display: none;
802 .filemanager .filemanager-updating {
803     display: none;
804     text-align: center;
806 .filemanager.fm-updating .filemanager-updating {
807     display: block;
808     margin-top: 37px;
810 .filemanager.fm-updating .fm-content-wrapper,
811 .filemanager.fm-nomkdir .fp-btn-mkdir,
812 .fitem.disabled .filemanager .filemanager-toolbar,
813 .fitem.disabled .filemanager .fp-pathbar,
814 .fitem.disabled .filemanager .fp-restrictions,
815 .fitem.disabled .filemanager .fm-content-wrapper {
816     display: none;
818 // File Manager layout
819 .fp-restrictions{
820     text-align: right;
822 .filemanager .fp-navbar {
823     background: #F2F2F2;
824     border: 1px solid #BBBBBB;
825     border-bottom: none;
827 .filemanager-toolbar{
828     padding: 5px 8px;
829     min-height: 22px;
830     overflow: hidden;
832 .fp-pathbar {
833     border-top: 1px solid #BBBBBB;
834     padding: 5px 8px 1px;
835     min-height: 20px;
837 .filemanager .fp-pathbar.empty {
838     display: none;
840 .filepicker-filelist,
841 .filemanager-container {
842     background: #FFFFFF;
843     clear: both;
844     overflow: auto;
845     border: 1px solid #BBBBBB;
846     min-height: 140px;
847     position: relative;
849 .filemanager .fp-content{
850     overflow: auto;
851     max-height: 472px;
852     min-height: 157px;
854 .filemanager-container,
855 .filepicker-filelist {
856     overflow: hidden;
858 .fitem.disabled .filepicker-filelist,
859 .fitem.disabled .filemanager-container {
860     background-color: #EBEBE4;
862 .fitem.disabled .fp-btn-choose {
863     .muted
865 .fitem.disabled .filepicker-filelist .filepicker-filename {
866     display: none;
868 // Icon view (File Manager only)
869 .fp-iconview .fp-reficons1 {
870     position: absolute;
871     height: 100%;
872     width: 100%;
873     top: 0;
874     left: 0;
875     z-index: 1000;
877 .fp-iconview .fp-reficons2 {
878     position: absolute;
879     height: 100%;
880     width: 100%;
881     top: 0;
882     left: 0;
883     z-index: 1001;
885 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
886     background: url('[[pix:theme|fp/link]]') no-repeat;
887     background-position: bottom right;
889 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
890     background: url('[[pix:theme|fp/alias]]') no-repeat;
891     background-position: bottom left;
893 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
894     display: none;
896 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
897     background: url([[pix:s/dead]]) no-repeat;
898     background-position: center center;
900 // Table view (File Manager only)
901 .filemanager .yui3-datatable table {
902     border: 0 solid #BBBBBB;
903     width: 100%;
905 .filemanager .yui3-datatable-header {
906     background: #FFFFFF!important;
907     border-bottom: 1px solid #CCCCCC!important;
908     border-left: 0 solid #FFFFFF!important;
909     color: #555555!important;
911 .filemanager .yui3-datatable-odd .yui3-datatable-cell {
912     background-color: #F6F6F6!important;
913     border-left: 0 solid #F6F6F6;
915 .filemanager .yui3-datatable-even .yui3-datatable-cell {
916     background-color: #FFFFFF!important;
917     border-left: 0 solid #FFFFFF;
919 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1{
920     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
921     height: 100%;
922     width: 100%;
923     position: absolute;
924     top: 8px;
925     left: 17px;
926     z-index: 1000;
928 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
929     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
930     height: 100%;
931     width: 100%;
932     position: absolute;
933     top: 9px;
934     left: -6px;
935     z-index: 1001;
937 // Folder Context Menu (File Manager only)
938 .filemanager .fp-contextmenu {
939     display: none;
941 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
942     display: block;
943     position: absolute;
944     right: 7px;
945     bottom: 5px;
947 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
948 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
949     display: inline;
950     position: absolute;
951     left: 14px;
952     margin-right: -20px;
953     top: 6px;
955 .dir-rtl .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
956     left: 7px;
957     right: inherit;
959 .dir-rtl .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
960 .dir-rtl .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
961     left: inherit;
962     right: 16px;
963     margin-right: 0;
966 // Drag and drop support (filemanager and filepicker form elements)
967 .filepicker-filelist .filepicker-container,
968 .filemanager.fm-noitems .fm-empty-container {
969     display: block;
970     position: absolute;
971     top: 10px;
972     bottom: 10px;
973     left: 10px;
974     right: 10px;
975     border: 2px dashed #BBBBBB;
976     padding-top: 85px;
977     text-align: center;
979 .filepicker-filelist .dndupload-target,
980 .filemanager-container .dndupload-target {
981     background: #FFFFFF;
982     position: absolute;
983     top: 10px;
984     bottom: 10px;
985     left: 10px;
986     right: 10px;
987     border: 2px dashed #fb7979;
988     padding-top: 85px;
989     text-align: center;
990     .box-shadow(0px 0 0 10px #fff);
992 .filepicker-filelist.dndupload-over .dndupload-target,
993 .filemanager-container.dndupload-over .dndupload-target {
994     background: #FFFFFF;
995     position: absolute;
996     top: 10px;
997     bottom: 10px;
998     left: 10px;
999     right: 10px;
1000     border: 2px dashed #6c8cd3;
1001     padding-top: 85px;
1002     text-align: center;
1004 .dndupload-message {
1005     display: none;
1007 .dndsupported .dndupload-message {
1008     display: inline;
1010 .dnduploadnotsupported-message {
1011     display: none;
1013 .dndnotsupported .dnduploadnotsupported-message {
1014     display: inline;
1016 .dndupload-target {
1017     display: none;
1019 .dndsupported .dndupload-ready .dndupload-target {
1020     display: block;
1022 .dndupload-uploadinprogress {
1023     display: none;
1024     text-align: center;
1026 .dndupload-uploading .dndupload-uploadinprogress {
1027     display: block;
1029 .dndupload-arrow {
1030     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
1031     width: 100%;
1032     height: 80px;
1033     position: absolute;
1034     margin-left: -28px;
1035     top: 5px;
1037 .fitem.disabled .filepicker-container,
1038 .fitem.disabled .fm-empty-container {
1039     display: none;
1041 .dndupload-progressbars {
1042     padding: 10px;
1043     display: none;
1045 .dndupload-inprogress .dndupload-progressbars {
1046     display: block;
1048 .dndupload-inprogress .fp-content {
1049     display: none;
1051 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
1052     display: none;
1054 .filepicker-filelist.dndupload-inprogress .filepicker-container {
1055     display: none;
1057 .filepicker-filelist.dndupload-inprogress a {
1058     display: none;
1060 // Select Dialogue (File Manager only)
1061 .filemanager.fp-select .fp-select-loading {
1062     display: none;
1064 .filemanager.fp-select.loading .fp-select-loading {
1065     display: block;
1067 .filemanager.fp-select.loading form {
1068     display: none;
1070 .filemanager.fp-select.fp-folder .fp-license,
1071 .filemanager.fp-select.fp-folder .fp-author,
1072 .filemanager.fp-select.fp-file .fp-file-unzip,
1073 .filemanager.fp-select.fp-folder .fp-file-unzip,
1074 .filemanager.fp-select.fp-file .fp-file-zip,
1075 .filemanager.fp-select.fp-zip .fp-file-zip {
1076     display: none;
1078 .filemanager.fp-select .fp-file-setmain {
1079     display: none;
1081 .filemanager.fp-select.fp-cansetmain .fp-file-setmain {
1082     display: inline-block;
1083     .ie7-inline-block();
1085 .filemanager .fp-mainfile .fp-filename {
1086     font-weight: bold;
1088 .filemanager.fp-select.fp-folder .fp-file-download {
1089     display: none;
1091 // to be implemented
1092 .fm-operation {
1093     font-weight: bold;
1095 .filemanager.fp-select .fp-original.fp-unknown,
1096 .filemanager.fp-select .fp-original .fp-originloading {
1097     display: none;
1099 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
1100     display: inline;
1102 .filemanager.fp-select .fp-reflist.fp-unknown,
1103 .filemanager.fp-select .fp-reflist .fp-reflistloading {
1104     display: none;
1106 .filemanager.fp-select .fp-refcount {
1107     max-width: 265px;
1109 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
1110     display: inline;
1112 .filemanager.fp-select .fp-reflist .fp-value {
1113     background: #F9F9F9;
1114     border: 1px solid #BBBBBB;
1115     padding: 8px 7px;
1116     margin: 0;
1117     max-width: 265px;
1118     max-height: 75px;
1119     overflow: auto;
1121 .filemanager.fp-select .fp-reflist .fp-value li {
1122     padding-bottom: 7px;
1124 // Create folder dialogue (File Manager only)
1125 .filemanager.fp-mkdir-dlg {
1126     text-align: center;
1128 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
1129     text-align: left;
1130     margin: 20px;
1132 .dir-rtl .filemanager .fp-mkdir-dlg p {
1133     text-align: right;
1135 // Confirm dialogue for delete (File Manager only)
1136 .filemanager.fp-dlg {
1137     text-align: center;
1139 .filemanager.fp-dlg .fp-dlg-text {
1140     padding: 0 10px;
1141     min-width: 200px;
1142     max-width: 340px;
1143     max-height: 300px;
1144     overflow: auto;
1145     line-height: 22px;
1146     margin: 40px 20px 20px;
1147     font-size: 12px;
1149 // file picker search dialog
1150 .file-picker div.bd {
1151     text-align: left;
1153 // RTL Overrides
1154 .dir-rtl .file-picker div.bd,
1155 .dir-rtl .file-picker .fp-pathbar,
1156 .dir-rtl .file-picker .fp-list,
1157 .dir-rtl #filemenu .yuimenuitemlabel,
1158 .dir-rtl .filemanager-container .yui3-skin-sam .yui3-datatable-header {
1159     text-align: right;
1161 .dir-rtl .filepicker .yui-layout-unit-left {
1162     left: 500px;
1164 .dir-rtl .filepicker .yui-layout-unit-center {
1165     left: 0;