MDL-32773 Add a help icon for button 'Set main file' in filemanager
[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 .filemanager .fp-license,
19 .file-picker .fp-setlicense {
20     td {
21         max-width: 265px;
22     }
23     select {
24         max-width: 100%;
25     }
26 }
27 .fp-content-center {
28     height: 100%;
29     width: 100%;
30     display: table-cell;
31     vertical-align: middle;
32 }
33 .fp-content-hidden {
34     visibility: hidden;
35 }
36 // Dialogue (File Picker and File Manager)
37 .yui3-panel-focused {
38     outline: none;
39 }
40 #filesskin .yui3-panel-content {
41     padding-bottom: 20px;
42     background: #F2F2F2;
43     .border-radius(8px);
44     border: 1px solid #fff;
45     display: inline-block;
46     .ie7-inline-block();
47     .box-shadow(5px 5px 20px 0 #666);
48 }
49 #filesskin .yui3-widget-hd {
50     .border-radius(10px 10px 0 0);
51     border-bottom: 1px solid #BBBBBB;
52     padding: 5px;
53     text-align: center;
54     font-size: 12px;
55     color: #333;
56     letter-spacing: 1px;
57     text-shadow: 1px 1px 1px #fff;
58     filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
59     #gradient > .vertical (#fff, #ccc);
60 }
61 .fp-panel-button {
62     background: #fff;
63     padding: 3px 20px 2px 20px;
64     text-align: center;
65     margin: 10px;
66     .border-radius(10px);
67     display: inline-block;
68     .ie7-inline-block();
69     .box-shadow(2px 2px 3px .1px #999);
70 }
72 .filepicker .moodle-dialogue-wrap .moodle-dialogue-bd {
73     padding: 0px;
74 }
75 // File Picker layout
76 #filesskin .file-picker.fp-generallayout {
77     width: 859px;
78     background: #FFFFFF;
79     .border-radius(10px);
80     border: 1px solid #CCCCCC;
81     position: relative;
82 }
83 .file-picker .fp-repo-area {
84     width: 180px;
85     overflow: auto;
86     display: inline-block;
87     .ie7-inline-block();
88     float: left;
89     height: 525px;
90     border-right: 1px solid #BBBBBB;
91 }
92 .dir-rtl .file-picker .fp-repo-area {
93     border-left: 1px solid #BBBBBB;
94     border-right: none;
95     float: right;
96 }
97 .file-picker .fp-repo-items {
98     float: left;
99     width: 693px;
101 .dir-rtl .file-picker .fp-repo-items {
102     float: right;
104 .file-picker .fp-navbar {
105     background: #F2F2F2;
106     min-height: 22px;
107     border-bottom: 1px solid #BBBBBB;
108     padding: 5px 8px;
110 .file-picker .fp-content {
111     background: #FFFFFF;
112     clear: both;
113     overflow: auto;
114     height: 468px;
116 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
117     width: 100%;
118     height: 100%;
120 .dir-rtl .file-picker .fp-repo-items {
121     margin-right: 181px;
123 .file-picker .fp-content-loading {
124     height: 100%;
125     width: 100%;
126     display: table;
127     text-align: center;
129 .file-picker .fp-content .fp-object-container {
130     width: 98%;
131     height: 98%;
133 .dir-rtl .file-picker .fp-list {
134     text-align: right;
136 .dir-rtl .file-picker .fp-toolbar {
137     padding: 0;
139 .dir-rtl .file-picker .fp-list {
140     text-align: right;
142 .dir-rtl .file-picker .fp-repo-name {
143     display: inline;
145 .dir-rtl .file-picker .fp-pathbar {
146     text-align: right;
147     display: block;
148     border-top: none;
150 .dir-rtl .file-picker div.bd {
151     text-align: right;
153 .dir-rtl #filemenu .yuimenuitemlabel {
154     text-align: right;
156 .dir-rtl .filepicker .yui-layout-unit-left {
157     left: 500px;
159 .dir-rtl .filepicker .yui-layout-unit-center {
160     left: 0;
162 // File Manager
163 .dir-rtl .filemanager-toolbar a {
164     padding: 0;
166 // Repositories on fp-repo-area (File Picker only)
167 .file-picker .fp-list {
168     list-style-type: none;
169     padding: 0;
170     float: left;
171     width: 100%;
172     margin: 0;
174 .dir-rtl .file-picker .fp-list {
175     text-align: right;
176     float: left;
178 .file-picker .fp-list .fp-repo a {
179     display: block;
180     padding: .5em .7em;
182 .file-picker .fp-list .fp-repo.active {
183     background: #F2F2F2;
185 .file-picker .fp-list .fp-repo-icon {
186     padding: 0 7px 0 5px;
188 // Tools, Path & View on fp-navbar (File Picker and File Manager)
189 .fp-toolbar {
190     display: table-row;
191     line-height: 22px;
192     float: left;
193     max-width: 70%;
195 .dir-rtl .fp-toolbar {
196     float: right;
198 .fp-toolbar.empty {
199     display: none;
201 .fp-toolbar .disabled {
202     display: none;
204 .fp-toolbar div {
205     display: inline-block;
206     .ie7-inline-block();
207     padding: 0 2px;
208     padding-right: 10px;
210 .dir-rtl .fp-toolbar div {
211     width: 100px;
212     padding-right: 0px;
214 .fp-toolbar img {
215     vertical-align: -15%;
216     margin-right: 5px;
218 .fp-toolbar .fp-tb-search {
219     width: 228px;
220     height: 14px;
222 .fp-toolbar .fp-tb-search input {
223     background: #FFFFFF url('[[pix:a/search]]') no-repeat 3px 3px;
224     padding: 2px 6px 1px 20px;
225     width: 200px;
226     height: 16px;
227     border: 1px solid #BBBBBB;
229 .fp-viewbar {
230     float: right;
231     width: 69px;
232     height: 22px;
233     margin-right: 8px;
235 .dir-rtl .fp-toolbar img {
236     vertical-align: -35%;
238 .dir-rtl .fp-viewbar {
239     float: left;
240     width: 100px;
242 .fp-vb-icons {
243     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
244     width: 22px;
245     height: 22px;
246     display: inline-block;
247     .ie7-inline-block();
249 .dir-rtl .fp-vb-icons {
250     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
251     display: block;
252     float: left;
253     margin-right: 4px;
255 .fp-vb-icons.checked {
256     background: url('[[pix:theme|fp/view_icon_selected]]');
258 .dir-rtl .fp-vb-icons.checked {
259     background: url('[[pix:theme|fp/view_icon_selected]]');
260     display: block;
261     float: left;
262     margin-right: 4px;
264 .fp-viewbar.disabled .fp-vb-icons {
265     background: url('[[pix:theme|fp/view_icon_inactive]]');
267 .fp-vb-details {
268     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
269     width: 23px;
270     height: 22px;
271     display: inline-block;
272     .ie7-inline-block();
273     margin-left: -4px;
275 .dir-rtl .fp-vb-details {
276     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
277     display: block;
278     float: left;
279     margin-right: 4px;
281 .fp-vb-details.checked {
282     background: url('[[pix:theme|fp/view_list_selected]]');
284 .dir-rtl .fp-vb-details.checked {
285     background: url('[[pix:theme|fp/view_list_selected]]');
286     display: block;
287     float: left;
288     margin-right: 4px;
290 .fp-viewbar.disabled .fp-vb-details {
291     background: url('[[pix:theme|fp/view_list_inactive]]');
293 .fp-vb-tree {
294     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
295     width: 23px;
296     height: 22px;
297     display: inline-block;
298     .ie7-inline-block();
299     margin-left: -4px;
301 .dir-rtl .fp-vb-tree {
302     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
303     display: block;
304     float: left;
305     margin-right: 4px;
307 .fp-vb-tree.checked {
308     background: url('[[pix:theme|fp/view_tree_selected]]');
310 .dir-rtl .fp-vb-tree.checked {
311     background: url('[[pix:theme|fp/view_tree_selected]]');
312     display: block;
313     float: left;
314     margin-right: 4px;
316 .fp-viewbar.disabled .fp-vb-tree {
317     background: url('[[pix:theme|fp/view_tree_inactive]]');
319 .file-picker .fp-clear-left {
320     clear: left;
322 // over ride hover rule from core.css
323 .dir-rtl .filemanager-toolbar .fp-vb-icons a:hover {
324     background: url('[[pix:theme|fp/view_icon_selected]]');
326 .dir-rtl .filemanager-toolbar .fp-vb-icons.checked a:hover {
327     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
329 .dir-rtl .fp-vb-details a:hover {
330     background: none;
331     border: 20px solid black;
333 .dir-rtl .fp-vb-details.checked a:hover {
334     background: none;
335     border: 40px solid black;
337 .dir-rtl .fp-vb-tree a:hover {
338     background: none;
339     border: 30px solid black;
341 .dir-rtl .fp-vb-tree.checked a:hover {
342     background: none;
343     border: 50px solid black;
345 .file-picker .fp-pathbar {
346     display: table-row;
348 .fp-pathbar.empty {
349     display: none;
351 .fp-pathbar .fp-path-folder {
352     background: url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;
353     width: 27px;
354     height: 12px;
355     margin-left: 4px;
357 .dir-rtl .fp-pathbar .fp-path-folder {
358     background: url('[[pix:theme|fp/path_folder_rtl]]') no-repeat right top;
359     width: auto;
360     height: 12px;
361     margin-left: 4px;
363 .dir-rtl .fp-pathbar span {
364     display: inline-block;
365     .ie7-inline-block();
366     float: right;
367     margin-left: 32px;
369 .fp-pathbar .fp-path-folder-name {
370     margin-left: 32px;
371     line-height: 20px;
373 .dir-rtl .fp-pathbar .fp-path-folder-name {
374     margin-right: 32px;
375     line-height: 20px;
377 // Icon view (File Picker and File Manager)
378 .fp-iconview .fp-file {
379     float: left;
380     text-align: center;
381     position: relative;
382     margin: 10px 10px 35px;
384 .fp-iconview .fp-thumbnail {
385     min-width: 110px;
386     min-height: 110px;
387     line-height: 110px;
388     text-align: center;
389     border: 1px solid #FFFFFF;
390     display: block;
392 .fp-iconview .fp-thumbnail img {
393     border: 1px solid #ddd;
394     padding: 3px;
395     vertical-align: middle;
396     .box-shadow(1px 1px 2px 0 #ccc);
398 .fp-iconview .fp-thumbnail:hover {
399     background: #fff;
400     border: 1px solid #ddd;
401     .box-shadow(inset 0 0 10px 0px #ccc);
403 .fp-iconview .fp-filename-field {
404     height: 33px;
405     word-wrap: break-word;
406     overflow: hidden;
407     position: absolute;
409 .fp-iconview .fp-filename-field:hover {
410     overflow: visible;
411     z-index: 1000;
413 .fp-iconview .fp-filename-field .fp-filename {
414     background: #FFFFFF;
415     padding-top: 5px;
416     padding-bottom: 12px;
417     min-width: 112px;
419 .dir-rtl .fp-iconview .fp-file {
420     float: right;
422 // Table view (File Picker only)
423 .file-picker .yui3-datatable table {
424     border: 0 solid #BBBBBB;
425     width: 100%;
427 #filesskin .file-picker .yui3-datatable-header {
428     background: #FFFFFF;
429     border-bottom: 1px solid #CCCCCC;
430     border-left: 0 solid #FFFFFF;
431     color: #555555;
433 #filesskin .file-picker .yui3-datatable-odd .yui3-datatable-cell {
434     background-color: #F6F6F6;
435     border-left: 0 solid #F6F6F6;
437 #filesskin .file-picker .yui3-datatable-even .yui3-datatable-cell {
438     background-color: #FFFFFF;
439     border-left: 0 solid #FFFFFF;
441 .dir-rtl .file-picker .yui3-datatable-header {
442     text-align: right;
444 // Tree view (File Manager only)
446 // first or middle sibling, no children
447 .file-picker .ygtvtn,
448 .filemanager .ygtvtn {
449     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
450     width: 17px;
451     height: 22px;
453 .dir-rtl .filemanager .ygtvtn,
454 .dir-rtl .file-picker .ygtvtn {
455     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
456     width: 17px;
457     height: 22px;
459 // first or middle sibling, collapsable
460 .file-picker .ygtvtm,
461 .filemanager .ygtvtm {
462     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
463     width: 13px;
464     height: 12px;
465     cursor: pointer;
467 // first or middle sibling, collapsable, hover
468 .file-picker .ygtvtmh,
469 .filemanager .ygtvtmh {
470     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
471     width: 13px;
472     height: 12px;
473     cursor: pointer;
475 // first or middle sibling, expandable
476 .file-picker .ygtvtp,
477 .filemanager .ygtvtp {
478     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
479     width: 13px;
480     height: 12px;
481     cursor: pointer;
483 .dir-rtl .file-picker .ygtvtp,
484 .dir-rtl .filemanager .ygtvtp {
485     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
487 // first or middle sibling, expandable, hover
488 .file-picker .ygtvtph,
489 .filemanager .ygtvtph {
490     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
491     width: 13px;
492     height: 22px;
493     cursor: pointer;
495 .dir-rtl .file-picker .ygtvtph,
496 .dir-rtl .filemanager .ygtvtph {
497     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
499 // last sibling, no children
500 .file-picker .ygtvln,
501 .filemanager .ygtvln {
502     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
503     width: 17px;
504     height: 22px;
506 .dir-rtl .file-picker .ygtvln,
507 .dir-rtl .filemanager .ygtvln {
508     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
510 // Last sibling, collapsable
511 .file-picker .ygtvlm,
512 .filemanager .ygtvlm {
513     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
514     width: 13px;
515     height: 12px;
516     cursor: pointer;
518 // Last sibling, collapsable, hover
519 .file-picker .ygtvlmh,
520 .filemanager .ygtvlmh {
521     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
522     width: 13px;
523     height: 12px;
524     cursor: pointer;
526 // Last sibling, expandable
527 .file-picker .ygtvlp,
528 .filemanager .ygtvlp {
529     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
530     width: 13px;
531     height: 12px;
532     cursor: pointer;
534 .dir-rtl .file-picker .ygtvlp,
535 .dir-rtl .filemanager .ygtvlp {
536     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
538 // Last sibling, expandable, hover
539 .file-picker .ygtvlph,
540 .filemanager .ygtvlph {
541     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
542     width: 13px;
543     height: 12px;
544     cursor: pointer;
546 .dir-rtl .file-picker .ygtvlph,
547 .dir-rtl .filemanager .ygtvlph {
548     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
550 // Loading icon
551 .file-picker .ygtvloading,
552 .filemanager .ygtvloading {
553     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
554     width: 16px;
555     height: 22px;
557 // the style for the empty cells that are used for rendering the depth of the node
558 .file-picker .ygtvdepthcell,
559 .filemanager .ygtvdepthcell {
560     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
561     width: 17px;
562     height: 32px;
564 .file-picker .ygtvblankdepthcell,
565 .filemanager .ygtvblankdepthcell {
566     width: 17px;
567     height: 22px;
569 a.ygtvspacer:hover {
570     color: transparent;
571     text-decoration: none;
573 .ygtvlabel,
574 .ygtvlabel:link,
575 .ygtvlabel:visited,
576 .ygtvlabel:hover {
577     background-color: transparent;
578     cursor: pointer;
579     margin-left: 2px;
580     text-decoration: none;
582 .file-picker .ygtvfocus,
583 .filemanager .ygtvfocus {
584     background-color: #EEEEEE;
586 .fp-filename-icon {
587     margin-top: 10px;
588     display: block;
589     position: relative;
591 .fp-icon {
592     float: left;
593     margin-top: -7px;
594     width: 24px;
595     height: 24px;
596     margin-right: 10px;
597     text-align: center;
598     line-height: 24px;
600 .dir-rtl .fp-icon {
601     float: right;
602     margin-left: 10px;
603     margin-right: 0;
605 .fp-icon img {
606     max-height: 24px;
607     max-width: 24px;
608     vertical-align: middle;
610 .fp-filename {
611     padding-right: 10px;
613 .dir-rtl .fp-filename {
614     padding-left: 10px;
615     padding-right: 0;
617 // Repositories Login on fp-content (File Picker only)
619 .file-picker .fp-login-form {
620     height: 100%;
621     width: 100%;
622     display: table;
624 .file-picker .fp-login-form table {
625     margin: 0 auto;
627 .file-picker .fp-login-form p {
628     text-align: center;
629     margin-top: 3em;
631 .file-picker .fp-login-form .fp-login-input label {
632     text-align: right;
633     display: block;
635 .file-picker .fp-login-form .fp-login-input .input {
636     text-align: left;
638 .file-picker .fp-login-form input[type="checkbox"]{
639     width: 15px;
640     height: 15px;
642 // Upload on fp-content (File Picker only)
643 .file-picker .fp-upload-form {
644     height: 100%;
645     width: 100%;
646     display: table;
648 .file-picker .fp-upload-form table {
649     margin: 0 auto;
651 // File exists dialogue on Upload (File Picker only)
652 .file-picker.fp-dlg {
653     text-align: center;
655 .file-picker.fp-dlg .fp-dlg-text {
656     padding: 30px 20px 10px;
657     font-size: 12px;
659 .file-picker.fp-dlg .fp-dlg-buttons {
660     margin: 0 20px;
662 // Error dialogue on Upload (File Picker only)
663 .file-picker.fp-msg {
664     text-align: center;
666 .file-picker.fp-msg .fp-msg-text {
667     padding: 40px 20px 10px 20px;
668     min-width: 200px;
669     max-width: 500px;
670     max-height: 300px;
671     overflow: auto;
672     font-size: 12px;
674 .file-picker.fp-msg.fp-msg-error .fp-msg-text {
675     padding: 40px 20px 10px 20px;
676     font-size: 12px;
678 // Error on fp-content (File Picker only)
679 .file-picker .fp-content-error {
680     height: 100%;
681     width: 100%;
682     display: table;
683     text-align: center;
685 .file-picker .fp-content-error .fp-error {
686     height: 100%;
687     width: 100%;
688     display: table-cell;
689     vertical-align: middle;
690     padding: 40px 20px 10px 20px;
691     font-size: 12px;
693 // Lazy loading on fp-content (File Picker only)
694 .file-picker .fp-nextpage {
695     clear: both;
697 .file-picker .fp-nextpage .fp-nextpage-loading {
698     display: none;
700 .file-picker .fp-nextpage.loading .fp-nextpage-link {
701     display: none;
703 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
704     display: block;
705     text-align: center;
706     height: 100px;
707     padding-top: 50px;
709 // Select Dialogue (File Picker and File Manager)
710 .fp-select form {
711     padding: 20px 20px 0;
713 .fp-select .fp-select-loading {
714     text-align: center;
715     margin-top: 20px;
717 .fp-select .fp-hr {
718     clear: both;
719     height: 1px;
720     background-color: #FFFFFF;
721     border-bottom: 1px solid #BBBBBB;
722     width: auto;
723     margin: 10px 0;
725 .fp-select table {
726     padding: 0 0 10px;
728 .fp-select table .mdl-right {
729     min-width: 84px;
731 .fp-select .fp-reflist .mdl-right {
732     vertical-align: top;
734 .fp-select .fp-select-buttons {
735     float: right;
737 .fp-select .fp-info {
738     display: block;
739     clear: both;
740     padding: 1px 20px 0;
742 .fp-select .fp-thumbnail {
743     float: left;
744     min-width: 110px;
745     min-height: 110px;
746     line-height: 110px;
747     text-align: center;
748     margin: 10px 20px 0 0;
749     background: #fff;
750     border: 1px solid #ddd;
751     .box-shadow(inset 0 0 10px 0 #ccc);
753 .fp-select .fp-thumbnail img {
754     border: 1px solid #DDDDDD;
755     padding: 3px;
756     vertical-align: middle;
757     margin: 10px;
759 .fp-select .fp-fileinfo {
760     display: inline-block;
761     .ie7-inline-block();
762     margin-top: 10px;
764 .file-picker.fp-select .fp-fileinfo {
765     max-width: 240px;
767 .fp-select .fp-fileinfo div {
768     padding-bottom: 5px;
770 .file-picker.fp-select .uneditable {
771     display: none;
773 .file-picker.fp-select .fp-select-loading {
774     display: none;
776 .file-picker.fp-select.loading .fp-select-loading {
777     display: block;
779 .file-picker.fp-select.loading form {
780     display: none;
782 .fp-select .fp-dimensions.fp-unknown {
783     display: none;
785 // File Manager
786 .filemanager-loading{
787     display: none;
789 .jsenabled .filemanager-loading{
790     display: block;
791     margin-top: 100px;
793 .filemanager.fm-loading .filemanager-toolbar,
794 .filemanager.fm-loading .fp-pathbar,
795 .filemanager.fm-loading .filemanager-container,
796 .filemanager.fm-loaded .filemanager-loading,
797 .filemanager.fm-maxfiles .fp-btn-add,
798 .filemanager.fm-maxfiles .dndupload-message,
799 .filemanager.fm-noitems .fp-btn-download,
800 .filemanager .fm-empty-container,
801 .filemanager.fm-noitems .filemanager-container .fp-content {
802     display: none;
804 .filemanager .filemanager-updating {
805     display: none;
806     text-align: center;
808 .filemanager.fm-updating .filemanager-updating {
809     display: block;
810     margin-top: 37px;
812 .filemanager.fm-updating .fm-content-wrapper,
813 .filemanager.fm-nomkdir .fp-btn-mkdir,
814 .fitem.disabled .filemanager .filemanager-toolbar,
815 .fitem.disabled .filemanager .fp-pathbar,
816 .fitem.disabled .filemanager .fp-restrictions,
817 .fitem.disabled .filemanager .fm-content-wrapper {
818     display: none;
820 // File Manager layout
821 .fp-restrictions{
822     text-align: right;
824 .filemanager .fp-navbar {
825     background: #F2F2F2;
826     border: 1px solid #BBBBBB;
827     border-bottom: none;
829 .filemanager-toolbar{
830     padding: 5px 8px;
831     min-height: 22px;
832     overflow: hidden;
834 .fp-pathbar {
835     border-top: 1px solid #BBBBBB;
836     padding: 5px 8px 1px;
837     min-height: 20px;
839 .filemanager .fp-pathbar.empty {
840     display: none;
842 .filepicker-filelist,
843 .filemanager-container {
844     background: #FFFFFF;
845     clear: both;
846     overflow: auto;
847     border: 1px solid #BBBBBB;
848     min-height: 140px;
849     position: relative;
851 .filemanager .fp-content{
852     overflow: auto;
853     max-height: 472px;
854     min-height: 157px;
856 .filemanager-container,
857 .filepicker-filelist {
858     overflow: hidden;
860 .fitem.disabled .filepicker-filelist,
861 .fitem.disabled .filemanager-container {
862     background-color: #EBEBE4;
864 .fitem.disabled .fp-btn-choose {
865     .muted
867 .fitem.disabled .filepicker-filelist .filepicker-filename {
868     display: none;
870 // Icon view (File Manager only)
871 .fp-iconview .fp-reficons1 {
872     position: absolute;
873     height: 100%;
874     width: 100%;
875     top: 0;
876     left: 0;
878 .fp-iconview .fp-reficons2 {
879     position: absolute;
880     height: 100%;
881     width: 100%;
882     top: 0;
883     left: 0;
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 .filemanager.fp-select .fp-file-setmain-help {
1080     display: none;
1082 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
1083 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
1084     display: inline-block;
1085     .ie7-inline-block();
1087 .filemanager .fp-mainfile .fp-filename {
1088     font-weight: bold;
1090 .filemanager.fp-select.fp-folder .fp-file-download {
1091     display: none;
1093 // to be implemented
1094 .fm-operation {
1095     font-weight: bold;
1097 .filemanager.fp-select .fp-original.fp-unknown,
1098 .filemanager.fp-select .fp-original .fp-originloading {
1099     display: none;
1101 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
1102     display: inline;
1104 .filemanager.fp-select .fp-reflist.fp-unknown,
1105 .filemanager.fp-select .fp-reflist .fp-reflistloading {
1106     display: none;
1108 .filemanager.fp-select .fp-refcount {
1109     max-width: 265px;
1111 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
1112     display: inline;
1114 .filemanager.fp-select .fp-reflist .fp-value {
1115     background: #F9F9F9;
1116     border: 1px solid #BBBBBB;
1117     padding: 8px 7px;
1118     margin: 0;
1119     max-width: 265px;
1120     max-height: 75px;
1121     overflow: auto;
1123 .filemanager.fp-select .fp-reflist .fp-value li {
1124     padding-bottom: 7px;
1126 // Create folder dialogue (File Manager only)
1127 .filemanager.fp-mkdir-dlg {
1128     text-align: center;
1130 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
1131     text-align: left;
1132     margin: 20px;
1134 .dir-rtl .filemanager .fp-mkdir-dlg p {
1135     text-align: right;
1137 // Confirm dialogue for delete (File Manager only)
1138 .filemanager.fp-dlg {
1139     text-align: center;
1141 .filemanager.fp-dlg .fp-dlg-text {
1142     padding: 0 10px;
1143     min-width: 200px;
1144     max-width: 340px;
1145     max-height: 300px;
1146     overflow: auto;
1147     line-height: 22px;
1148     margin: 40px 20px 20px;
1149     font-size: 12px;
1151 // file picker search dialog
1152 .file-picker div.bd {
1153     text-align: left;
1155 // RTL Overrides
1156 .dir-rtl .file-picker div.bd,
1157 .dir-rtl .file-picker .fp-pathbar,
1158 .dir-rtl .file-picker .fp-list,
1159 .dir-rtl #filemenu .yuimenuitemlabel,
1160 .dir-rtl .filemanager-container .yui3-skin-sam .yui3-datatable-header {
1161     text-align: right;
1163 .dir-rtl .filepicker .yui-layout-unit-left {
1164     left: 500px;
1166 .dir-rtl .filepicker .yui-layout-unit-center {
1167     left: 0;