468207fd53bda341c244bca1daed36487e931f35
[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 .moodle-dialogue h3 {
73     font-size: 14px;
74     margin: 0;
75     line-height: 20px;
76 }
78 .moodle-dialogue-base .filepicker .moodle-dialogue-wrap .moodle-dialogue-bd {
79     padding: 0px;
80 }
82 // File Picker layout
83 #filesskin .file-picker.fp-generallayout {
84     width: 859px;
85     background: #FFFFFF;
86     .border-radius(10px);
87     border: 1px solid #CCCCCC;
88     position: relative;
89 }
90 .file-picker .fp-repo-area {
91     width: 180px;
92     overflow: auto;
93     display: inline-block;
94     .ie7-inline-block();
95     float: left;
96     height: 525px;
97     border-right: 1px solid #BBBBBB;
98 }
99 .dir-rtl .file-picker .fp-repo-area {
100     border-left: 1px solid #BBBBBB;
101     border-right: none;
102     float: right;
104 .file-picker .fp-repo-items {
105     float: none;
106     width: auto;
107     margin-left: 181px;
109 .moodle-dialogue-fullscreen .file-picker .fp-repo-items {
110     margin-left: 0px;
111     margin-right: 0px;
112     float: left;
114 .dir-rtl .file-picker .fp-repo-items {
115     margin-left: 0px;
116     margin-right: 181px;
118 .dir-rtl .moodle-dialogue-fullscreen .file-picker .fp-repo-items {
119     margin-left: 0px;
120     margin-right: 0px;
121     float: right;
123 .file-picker .fp-navbar {
124     background: #F2F2F2;
125     border-bottom: 1px solid #BBBBBB;
126     min-height: 40px;
127     overflow: hidden;
129 .file-picker .fp-navbar .fp-viewbar {
130     margin: 4px;
133 .file-picker .fp-content {
134     background: #FFFFFF;
135     clear: none;
136     overflow: auto;
137     height: 452px;
139 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
140     width: 100%;
142 .file-picker .fp-content-loading {
143     height: 100%;
144     width: 100%;
145     display: table;
146     text-align: center;
148 .file-picker .fp-content .fp-object-container {
149     width: 98%;
150     height: 98%;
152 .dir-rtl .file-picker .fp-list {
153     text-align: right;
155 .dir-rtl .file-picker .fp-toolbar {
156     padding: 4px;
158 .dir-rtl .file-picker .fp-list {
159     text-align: right;
161 .dir-rtl .file-picker .fp-repo-name {
162     display: inline;
164 .dir-rtl .file-picker .fp-pathbar {
165     text-align: right;
166     display: block;
167     border-top: none;
169 .dir-rtl .file-picker div.bd {
170     text-align: right;
172 .dir-rtl #filemenu .yuimenuitemlabel {
173     text-align: right;
175 .dir-rtl .filepicker .yui-layout-unit-left {
176     left: 500px;
178 .dir-rtl .filepicker .yui-layout-unit-center {
179     left: 0;
181 // File Manager
182 .dir-rtl .filemanager-toolbar a {
183     padding: 0;
185 // Repositories on fp-repo-area (File Picker only)
186 .file-picker .fp-list {
187     list-style-type: none;
188     padding: 0;
189     float: left;
190     width: 100%;
191     margin: 0;
193 .dir-rtl .file-picker .fp-list {
194     text-align: right;
195     float: left;
197 .file-picker .fp-list .fp-repo a {
198     display: block;
199     padding: .5em .7em;
201 .file-picker .fp-list .fp-repo.active {
202     background: #F2F2F2;
204 .file-picker .fp-list .fp-repo-icon {
205     padding: 0 7px 0 5px;
206     width: 16px;
207     height: 16px;
209 // Tools, Path & View on fp-navbar (File Picker and File Manager)
210 .fp-toolbar {
211     float: left;
213 .dir-rtl .fp-toolbar {
214     float: right;
216 .fp-toolbar.empty {
217     display: none;
219 .dir-rtl .fp-toolbar div.disabled,
220 .fp-toolbar .disabled {
221     display: none;
223 .fp-toolbar div {
224     display: block;
225     float: left;
226     margin-right: 4px;
228 .dir-rtl .fp-toolbar div {
229     display: block;
230     float: right;
231     margin-left: 4px;
232     margin-right: 0px;
234 .fp-toolbar img {
235     vertical-align: -15%;
236     margin-right: 5px;
238 .fp-toolbar .fp-tb-search {
239     width: 235px;
240     height: 27px;
242 .fp-toolbar .fp-tb-search input {
243     background: #FFFFFF url('[[pix:a/search]]') no-repeat 7px 7px;
244     padding: 2px 6px 1px 27px;
245     width: 200px;
246     height: 27px;
247     border: 1px solid #BBBBBB;
249 .fp-viewbar {
250     float: right;
251     height: 30px;
252     border: 1px solid #CCC;
253     border-bottom: 1px solid #B3B3B3;
254     border-radius: 4px;
255     background: white;
257 .fp-repo-items fp-viewbar {
258     margin: 4px;
260 .dir-rtl .fp-toolbar img {
261     vertical-align: -35%;
263 .dir-rtl .fp-viewbar {
264     float: left;
267 .fp-viewbar a {
268     width: 30px;
269     height: 30px;
270     border-right: 1px solid #CCC;
271     display: block;
272     float: left;
274 .fp-viewbar a.checked:hover,
275 .fp-viewbar a:hover {
276     background-image: radial-gradient(ellipse at center, #ffffff 60%, #dfdfdf 100%);
277     background-color: #ebebeb;
280 .fp-viewbar a.checked,
281 .fp-viewbar a:active {
282     background-image: radial-gradient(ellipse at center, #ffffff 40%, #dfdfdf 100%);
283     background-color: #dfdfdf;
286 .fp-viewbar a.fp-vb-icons {
287     border-radius: 4px 0 0 4px;
289 .fp-viewbar a.fp-vb-tree {
290     border-right: 0;
291     border-radius: 0 4px 4px 0;
293 .fp-viewbar a img {
294     margin: 7px;
297 .fp-viewbar.disabled a {
298     opacity: .45;
299     background: none;
300     cursor: default;
303 .file-picker .fp-clear-left {
304     clear: left;
306 // over ride hover rule from core.css
307 .dir-rtl .fp-vb-details a:hover {
308     background: none;
309     border: 20px solid black;
311 .dir-rtl .fp-vb-details.checked a:hover {
312     background: none;
313     border: 40px solid black;
315 .dir-rtl .fp-vb-tree a:hover {
316     background: none;
317     border: 30px solid black;
319 .dir-rtl .fp-vb-tree.checked a:hover {
320     background: none;
321     border: 50px solid black;
323 .file-picker .fp-pathbar {
324     display: table-row;
326 .fp-pathbar.empty {
327     display: none;
329 .fp-pathbar .fp-path-folder {
330     background: url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;
331     width: 27px;
332     height: 12px;
333     margin-left: 4px;
335 .dir-rtl .fp-pathbar .fp-path-folder {
336     background: url('[[pix:theme|fp/path_folder_rtl]]') no-repeat right top;
337     width: auto;
338     height: 12px;
339     margin-left: 4px;
341 .dir-rtl .fp-pathbar span {
342     display: inline-block;
343     .ie7-inline-block();
344     float: right;
345     margin-left: 32px;
347 .fp-pathbar .fp-path-folder-name {
348     margin-left: 32px;
349     line-height: 20px;
351 .dir-rtl .fp-pathbar .fp-path-folder-name {
352     margin-right: 32px;
353     line-height: 20px;
355 // Icon view (File Picker and File Manager)
356 .fp-iconview .fp-file {
357     float: left;
358     text-align: center;
359     position: relative;
360     margin: 10px 10px 35px;
362 .fp-iconview .fp-thumbnail {
363     min-width: 110px;
364     min-height: 110px;
365     line-height: 110px;
366     text-align: center;
367     border: 1px solid #FFFFFF;
368     display: block;
370 .fp-iconview .fp-thumbnail img {
371     border: 1px solid #ddd;
372     padding: 3px;
373     vertical-align: middle;
374     .box-shadow(1px 1px 2px 0 #ccc);
376 .fp-iconview .fp-thumbnail:hover {
377     background: #fff;
378     border: 1px solid #ddd;
379     .box-shadow(inset 0 0 10px 0px #ccc);
381 .fp-iconview .fp-filename-field {
382     height: 33px;
383     word-wrap: break-word;
384     overflow: hidden;
385     position: absolute;
387 .fp-iconview .fp-filename-field:hover {
388     overflow: visible;
389     z-index: 1000;
391 .fp-iconview .fp-filename-field .fp-filename {
392     background: #FFFFFF;
393     padding-top: 5px;
394     padding-bottom: 12px;
395     min-width: 112px;
397 .dir-rtl .fp-iconview .fp-file {
398     float: right;
400 // Table view (File Picker only)
401 .file-picker .yui3-datatable table {
402     border: 0 solid #BBBBBB;
403     width: 100%;
405 #filesskin .file-picker .yui3-datatable-header {
406     background: #FFFFFF;
407     border-bottom: 1px solid #CCCCCC;
408     border-left: 0 solid #FFFFFF;
409     color: #555555;
411 #filesskin .file-picker .yui3-datatable-odd .yui3-datatable-cell {
412     background-color: #F6F6F6;
413     border-left: 0 solid #F6F6F6;
415 #filesskin .file-picker .yui3-datatable-even .yui3-datatable-cell {
416     background-color: #FFFFFF;
417     border-left: 0 solid #FFFFFF;
419 .dir-rtl .file-picker .yui3-datatable-header {
420     text-align: right;
422 // Tree view (File Manager only)
424 // first or middle sibling, no children
425 .file-picker .ygtvtn,
426 .filemanager .ygtvtn {
427     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
428     width: 17px;
429     height: 22px;
431 .dir-rtl .filemanager .ygtvtn,
432 .dir-rtl .file-picker .ygtvtn {
433     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
434     width: 17px;
435     height: 22px;
437 // first or middle sibling, collapsable
438 .file-picker .ygtvtm,
439 .filemanager .ygtvtm {
440     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
441     width: 13px;
442     height: 12px;
443     cursor: pointer;
445 // first or middle sibling, collapsable, hover
446 .file-picker .ygtvtmh,
447 .filemanager .ygtvtmh {
448     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
449     width: 13px;
450     height: 12px;
451     cursor: pointer;
453 // first or middle sibling, expandable
454 .file-picker .ygtvtp,
455 .filemanager .ygtvtp {
456     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
457     width: 13px;
458     height: 12px;
459     cursor: pointer;
461 .dir-rtl .file-picker .ygtvtp,
462 .dir-rtl .filemanager .ygtvtp {
463     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
465 // first or middle sibling, expandable, hover
466 .file-picker .ygtvtph,
467 .filemanager .ygtvtph {
468     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
469     width: 13px;
470     height: 22px;
471     cursor: pointer;
473 .dir-rtl .file-picker .ygtvtph,
474 .dir-rtl .filemanager .ygtvtph {
475     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
477 // last sibling, no children
478 .file-picker .ygtvln,
479 .filemanager .ygtvln {
480     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
481     width: 17px;
482     height: 22px;
484 .dir-rtl .file-picker .ygtvln,
485 .dir-rtl .filemanager .ygtvln {
486     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
488 // Last sibling, collapsable
489 .file-picker .ygtvlm,
490 .filemanager .ygtvlm {
491     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
492     width: 13px;
493     height: 12px;
494     cursor: pointer;
496 // Last sibling, collapsable, hover
497 .file-picker .ygtvlmh,
498 .filemanager .ygtvlmh {
499     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
500     width: 13px;
501     height: 12px;
502     cursor: pointer;
504 // Last sibling, expandable
505 .file-picker .ygtvlp,
506 .filemanager .ygtvlp {
507     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
508     width: 13px;
509     height: 12px;
510     cursor: pointer;
512 .dir-rtl .file-picker .ygtvlp,
513 .dir-rtl .filemanager .ygtvlp {
514     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
516 // Last sibling, expandable, hover
517 .file-picker .ygtvlph,
518 .filemanager .ygtvlph {
519     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
520     width: 13px;
521     height: 12px;
522     cursor: pointer;
524 .dir-rtl .file-picker .ygtvlph,
525 .dir-rtl .filemanager .ygtvlph {
526     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
528 // Loading icon
529 .file-picker .ygtvloading,
530 .filemanager .ygtvloading {
531     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
532     width: 16px;
533     height: 22px;
535 // the style for the empty cells that are used for rendering the depth of the node
536 .file-picker .ygtvdepthcell,
537 .filemanager .ygtvdepthcell {
538     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
539     width: 17px;
540     height: 32px;
542 .file-picker .ygtvblankdepthcell,
543 .filemanager .ygtvblankdepthcell {
544     width: 17px;
545     height: 22px;
547 a.ygtvspacer:hover {
548     color: transparent;
549     text-decoration: none;
551 .ygtvlabel,
552 .ygtvlabel:link,
553 .ygtvlabel:visited,
554 .ygtvlabel:hover {
555     background-color: transparent;
556     cursor: pointer;
557     margin-left: 2px;
558     text-decoration: none;
560 .file-picker .ygtvfocus,
561 .filemanager .ygtvfocus {
562     background-color: #EEEEEE;
564 .fp-filename-icon {
565     margin-top: 10px;
566     display: block;
567     position: relative;
569 .fp-icon {
570     float: left;
571     margin-top: -7px;
572     width: 24px;
573     height: 24px;
574     margin-right: 10px;
575     text-align: center;
576     line-height: 24px;
578 .dir-rtl .fp-icon {
579     float: right;
580     margin-left: 10px;
581     margin-right: 0;
583 .fp-icon img {
584     max-height: 24px;
585     max-width: 24px;
586     vertical-align: middle;
588 .fp-filename {
589     padding-right: 10px;
591 .dir-rtl .fp-filename {
592     padding-left: 10px;
593     padding-right: 0;
595 // Repositories Login on fp-content (File Picker only)
597 .file-picker .fp-login-form {
598     height: 100%;
599     width: 100%;
600     display: table;
602 .file-picker .fp-login-form table {
603     margin: 0 auto;
605 .file-picker .fp-login-form p {
606     text-align: center;
607     margin-top: 3em;
609 .file-picker .fp-login-form .fp-login-input label {
610     text-align: right;
611     display: block;
613 .file-picker .fp-login-form .fp-login-input .input {
614     text-align: left;
616 .file-picker .fp-login-form input[type="checkbox"] {
617     width: 15px;
618     height: 15px;
620 // Upload on fp-content (File Picker only)
621 .file-picker .fp-upload-form {
622     height: 100%;
623     width: 100%;
624     display: table;
626 .file-picker .fp-upload-form table {
627     margin: 0 auto;
629 // File exists dialogue on Upload (File Picker only)
630 .file-picker.fp-dlg {
631     text-align: center;
633 .file-picker.fp-dlg .fp-dlg-text {
634     padding: 30px 20px 10px;
635     font-size: 12px;
637 .file-picker.fp-dlg .fp-dlg-buttons {
638     margin: 0 20px;
640 // Error dialogue on Upload (File Picker only)
641 .file-picker.fp-msg {
642     text-align: center;
644 .file-picker.fp-msg .fp-msg-text {
645     padding: 40px 20px 10px 20px;
646     min-width: 200px;
647     max-width: 500px;
648     max-height: 300px;
649     overflow: auto;
650     font-size: 12px;
652 .file-picker.fp-msg.fp-msg-error .fp-msg-text {
653     padding: 40px 20px 10px 20px;
654     font-size: 12px;
656 // Error on fp-content (File Picker only)
657 .file-picker .fp-content-error {
658     height: 100%;
659     width: 100%;
660     display: table;
661     text-align: center;
663 .file-picker .fp-content-error .fp-error {
664     height: 100%;
665     width: 100%;
666     display: table-cell;
667     vertical-align: middle;
668     padding: 40px 20px 10px 20px;
669     font-size: 12px;
671 // Lazy loading on fp-content (File Picker only)
672 .file-picker .fp-nextpage {
673     clear: both;
675 .file-picker .fp-nextpage .fp-nextpage-loading {
676     display: none;
678 .file-picker .fp-nextpage.loading .fp-nextpage-link {
679     display: none;
681 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
682     display: block;
683     text-align: center;
684     height: 100px;
685     padding-top: 50px;
687 // Select Dialogue (File Picker and File Manager)
688 .fp-select form {
689     padding: 20px 20px 0;
691 .fp-select .fp-select-loading {
692     text-align: center;
693     margin-top: 20px;
695 .fp-select .fp-hr {
696     clear: both;
697     height: 1px;
698     background-color: #FFFFFF;
699     border-bottom: 1px solid #BBBBBB;
700     width: auto;
701     margin: 10px 0;
703 .fp-select table {
704     padding: 0 0 10px;
706 .fp-select table .mdl-right {
707     min-width: 84px;
709 .fp-select .fp-reflist .mdl-right {
710     vertical-align: top;
712 .fp-select .fp-select-buttons {
713     float: right;
715 .fp-select .fp-info {
716     display: block;
717     clear: both;
718     padding: 1px 20px 0;
720 .fp-select .fp-thumbnail {
721     float: left;
722     min-width: 110px;
723     min-height: 110px;
724     line-height: 110px;
725     text-align: center;
726     margin: 10px 20px 0 0;
727     background: #fff;
728     border: 1px solid #ddd;
729     .box-shadow(inset 0 0 10px 0 #ccc);
731 .fp-select .fp-thumbnail img {
732     border: 1px solid #DDDDDD;
733     padding: 3px;
734     vertical-align: middle;
735     margin: 10px;
737 .fp-select .fp-fileinfo {
738     display: inline-block;
739     .ie7-inline-block();
740     margin-top: 10px;
742 .file-picker.fp-select .fp-fileinfo {
743     max-width: 240px;
745 .fp-select .fp-fileinfo div {
746     padding-bottom: 5px;
748 .file-picker.fp-select .uneditable {
749     display: none;
751 .file-picker.fp-select .fp-select-loading {
752     display: none;
754 .file-picker.fp-select.loading .fp-select-loading {
755     display: block;
757 .file-picker.fp-select.loading form {
758     display: none;
760 .fp-select .fp-dimensions.fp-unknown {
761     display: none;
763 .fp-select .fp-size.fp-unknown {
764     display: none;
766 // File Manager
767 .filemanager-loading {
768     display: none;
770 .jsenabled .filemanager-loading {
771     display: block;
772     margin-top: 100px;
774 .filemanager.fm-loading .filemanager-toolbar,
775 .filemanager.fm-loading .fp-pathbar,
776 .filemanager.fm-loading .filemanager-container,
777 .filemanager.fm-loaded .filemanager-loading,
778 .filemanager.fm-maxfiles .fp-btn-add,
779 .filemanager.fm-maxfiles .dndupload-message,
780 .filemanager.fm-noitems .fp-btn-download,
781 .filemanager .fm-empty-container,
782 .filemanager.fm-noitems .filemanager-container .fp-content {
783     display: none;
785 .filemanager .fp-img-downloading {
786     display: none;
787     padding-top: 7px;
789 .filemanager .filemanager-updating {
790     display: none;
791     text-align: center;
793 .filemanager.fm-updating .filemanager-updating {
794     display: block;
795     margin-top: 37px;
797 .filemanager.fm-updating .fm-content-wrapper,
798 .filemanager.fm-nomkdir .fp-btn-mkdir,
799 .fitem.disabled .filemanager .filemanager-toolbar,
800 .fitem.disabled .filemanager .fp-pathbar,
801 .fitem.disabled .filemanager .fp-restrictions,
802 .fitem.disabled .filemanager .fm-content-wrapper {
803     display: none;
805 // File Manager layout
806 .filemanager {
807     .fp-restrictions {
808         text-align: right;
809     }
811 .filemanager .fp-navbar {
812     background: #F2F2F2;
813     border: 1px solid #BBBBBB;
814     border-bottom: none;
816 .filemanager-toolbar {
817     padding: 4px;
818     overflow: hidden;
820 .fp-pathbar {
821     border-top: 1px solid #BBBBBB;
822     padding: 5px 8px 1px;
823     min-height: 20px;
826 .file-picker .fp-toolbar {
827     padding: 4px;
830 .fp-toolbar .fp-btn-add,
831 .fp-toolbar .fp-btn-download,
832 .fp-toolbar .fp-btn-mkdir,
833 .fp-toolbar .fp-tb-help,
834 .fp-toolbar .fp-tb-manage,
835 .fp-toolbar .fp-tb-logout,
836 .fp-toolbar .fp-tb-refresh {
837     border: 1px solid #CCC;
838     border-bottom: 1px solid #B3B3B3;
839     border-radius: 4px;
840     background: white;
841     width: 30px;
842     height: 30px;
845 .fp-toolbar a:hover {
846     background-image: radial-gradient(ellipse at center, #ffffff 60%, #dfdfdf 100%);
847     background-color: #ebebeb;
850 .fp-toolbar a:active {
851     background-image: radial-gradient(ellipse at center, #ffffff 40%, #dfdfdf 100%);
852     background-color: #dfdfdf;
855 .fp-btn-add a,
856 .fp-btn-download a,
857 .fp-btn-mkdir a,
858 .fp-tb-help a,
859 .fp-tb-manage a,
860 .fp-tb-logout a,
861 .fp-tb-refresh a {
862     display: block;
863     width: 30px;
864     height: 30px;
865     border-radius: 4px;
868 .fp-btn-add img,
869 .fp-btn-download img,
870 .fp-btn-mkdir img,
871 .fp-tb-help img,
872 .fp-tb-manage img,
873 .fp-tb-logout img,
874 .fp-tb-refresh img {
875     margin: 7px;
878 .filemanager .fp-pathbar.empty {
879     display: none;
881 .filepicker-filelist,
882 .filemanager-container {
883     background: #FFFFFF;
884     clear: both;
885     overflow: auto;
886     border: 1px solid #BBBBBB;
887     min-height: 140px;
888     position: relative;
890 .filemanager .fp-content {
891     overflow: auto;
892     max-height: 472px;
893     min-height: 157px;
895 .filemanager-container,
896 .filepicker-filelist {
897     overflow: hidden;
899 .fitem.disabled .filepicker-filelist,
900 .fitem.disabled .filemanager-container {
901     background-color: #EBEBE4;
903 .fitem.disabled .fp-btn-choose {
904     .muted
906 .fitem.disabled .filepicker-filelist .filepicker-filename {
907     display: none;
909 // Icon view (File Manager only)
910 .fp-iconview .fp-reficons1 {
911     position: absolute;
912     height: 100%;
913     width: 100%;
914     top: 0;
915     left: 0;
917 .fp-iconview .fp-reficons2 {
918     position: absolute;
919     height: 100%;
920     width: 100%;
921     top: 0;
922     left: 0;
924 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
925     background: url('[[pix:theme|fp/link]]') no-repeat;
926     background-position: bottom right;
928 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
929     background: url('[[pix:theme|fp/alias]]') no-repeat;
930     background-position: bottom left;
932 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
933     display: none;
935 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
936     background: url([[pix:s/dead]]) no-repeat;
937     background-position: center center;
939 // Table view (File Manager only)
940 .filemanager .yui3-datatable table {
941     border: 0 solid #BBBBBB;
942     width: 100%;
944 .filemanager .yui3-datatable-header {
945     background: #FFFFFF !important;
946     border-bottom: 1px solid #CCCCCC !important;
947     border-left: 0 solid #FFFFFF !important;
948     color: #555555 !important;
950 .filemanager .yui3-datatable-odd .yui3-datatable-cell {
951     background-color: #F6F6F6 !important;
952     border-left: 0 solid #F6F6F6;
954 .filemanager .yui3-datatable-even .yui3-datatable-cell {
955     background-color: #FFFFFF !important;
956     border-left: 0 solid #FFFFFF;
958 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
959     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
960     height: 100%;
961     width: 100%;
962     position: absolute;
963     top: 8px;
964     left: 17px;
965     z-index: 1000;
967 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
968     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
969     height: 100%;
970     width: 100%;
971     position: absolute;
972     top: 9px;
973     left: -6px;
974     z-index: 1001;
976 // Folder Context Menu (File Manager only)
977 .filemanager .fp-contextmenu {
978     display: none;
980 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
981     display: block;
982     position: absolute;
983     right: 7px;
984     bottom: 5px;
986 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
987 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
988     display: inline;
989     position: absolute;
990     left: 14px;
991     margin-right: -20px;
992     top: 6px;
994 .dir-rtl .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
995     left: 7px;
996     right: inherit;
998 .dir-rtl .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
999 .dir-rtl .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
1000     left: inherit;
1001     right: 16px;
1002     margin-right: 0;
1005 // Drag and drop support (filemanager and filepicker form elements)
1006 .filepicker-filelist .filepicker-container,
1007 .filemanager.fm-noitems .fm-empty-container {
1008     display: block;
1009     position: absolute;
1010     top: 10px;
1011     bottom: 10px;
1012     left: 10px;
1013     right: 10px;
1014     border: 2px dashed #BBBBBB;
1015     padding-top: 85px;
1016     text-align: center;
1018 .filepicker-filelist .dndupload-target,
1019 .filemanager-container .dndupload-target {
1020     background: #FFFFFF;
1021     position: absolute;
1022     top: 10px;
1023     bottom: 10px;
1024     left: 10px;
1025     right: 10px;
1026     border: 2px dashed #fb7979;
1027     padding-top: 85px;
1028     text-align: center;
1029     .box-shadow(0px 0 0 10px #fff);
1031 .filepicker-filelist.dndupload-over .dndupload-target,
1032 .filemanager-container.dndupload-over .dndupload-target {
1033     background: #FFFFFF;
1034     position: absolute;
1035     top: 10px;
1036     bottom: 10px;
1037     left: 10px;
1038     right: 10px;
1039     border: 2px dashed #6c8cd3;
1040     padding-top: 85px;
1041     text-align: center;
1043 .dndupload-message {
1044     display: none;
1046 .dndsupported .dndupload-message {
1047     display: inline;
1049 .dnduploadnotsupported-message {
1050     display: none;
1052 .dndnotsupported .dnduploadnotsupported-message {
1053     display: inline;
1055 .dndupload-target {
1056     display: none;
1058 .dndsupported .dndupload-ready .dndupload-target {
1059     display: block;
1061 .dndupload-uploadinprogress {
1062     display: none;
1063     text-align: center;
1065 .dndupload-uploading .dndupload-uploadinprogress {
1066     display: block;
1068 .dndupload-arrow {
1069     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
1070     width: 100%;
1071     height: 80px;
1072     position: absolute;
1073     top: 5px;
1075 .fitem.disabled .filepicker-container,
1076 .fitem.disabled .fm-empty-container {
1077     display: none;
1079 .dndupload-progressbars {
1080     padding: 10px;
1081     display: none;
1083 .dndupload-inprogress .dndupload-progressbars {
1084     display: block;
1086 .dndupload-inprogress .fp-content {
1087     display: none;
1089 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
1090     display: none;
1092 .filepicker-filelist.dndupload-inprogress .filepicker-container {
1093     display: none;
1095 .filepicker-filelist.dndupload-inprogress a {
1096     display: none;
1098 // Select Dialogue (File Manager only)
1099 .filemanager.fp-select .fp-select-loading {
1100     display: none;
1102 .filemanager.fp-select.loading .fp-select-loading {
1103     display: block;
1105 .filemanager.fp-select.loading form {
1106     display: none;
1108 .filemanager.fp-select.fp-folder .fp-license,
1109 .filemanager.fp-select.fp-folder .fp-author,
1110 .filemanager.fp-select.fp-file .fp-file-unzip,
1111 .filemanager.fp-select.fp-folder .fp-file-unzip,
1112 .filemanager.fp-select.fp-file .fp-file-zip,
1113 .filemanager.fp-select.fp-zip .fp-file-zip {
1114     display: none;
1116 .filemanager.fp-select .fp-file-setmain,
1117 .filemanager.fp-select .fp-file-setmain-help {
1118     display: none;
1120 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
1121 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
1122     display: inline-block;
1123     .ie7-inline-block();
1125 .filemanager .fp-mainfile .fp-filename {
1126     font-weight: bold;
1128 .filemanager.fp-select.fp-folder .fp-file-download {
1129     display: none;
1131 // to be implemented
1132 .fm-operation {
1133     font-weight: bold;
1135 .filemanager.fp-select .fp-original.fp-unknown,
1136 .filemanager.fp-select .fp-original .fp-originloading {
1137     display: none;
1139 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
1140     display: inline;
1142 .filemanager.fp-select .fp-reflist.fp-unknown,
1143 .filemanager.fp-select .fp-reflist .fp-reflistloading {
1144     display: none;
1146 .filemanager.fp-select .fp-refcount {
1147     max-width: 265px;
1149 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
1150     display: inline;
1152 .filemanager.fp-select .fp-reflist .fp-value {
1153     background: #F9F9F9;
1154     border: 1px solid #BBBBBB;
1155     padding: 8px 7px;
1156     margin: 0;
1157     max-width: 265px;
1158     max-height: 75px;
1159     overflow: auto;
1161 .filemanager.fp-select .fp-reflist .fp-value li {
1162     padding-bottom: 7px;
1164 // Create folder dialogue (File Manager only)
1165 .filemanager.fp-mkdir-dlg {
1166     text-align: center;
1168 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
1169     text-align: left;
1170     margin: 20px;
1172 .dir-rtl .filemanager .fp-mkdir-dlg p {
1173     text-align: right;
1175 // Confirm dialogue for delete (File Manager only)
1176 .filemanager.fp-dlg {
1177     text-align: center;
1179 .filemanager.fp-dlg .fp-dlg-text {
1180     padding: 0 10px;
1181     min-width: 200px;
1182     max-width: 340px;
1183     max-height: 300px;
1184     overflow: auto;
1185     line-height: 22px;
1186     margin: 40px 20px 20px;
1187     font-size: 12px;
1189 // file picker search dialog
1190 .file-picker div.bd {
1191     text-align: left;
1194 // RTL Overrides
1195 .dir-rtl {
1196     .filemanager {
1197         .fp-restrictions {
1198             text-align: left;
1199         }
1200     }
1201     .file-picker div.bd,
1202     .file-picker .fp-pathbar,
1203     .file-picker .fp-list,
1204     #filemenu .yuimenuitemlabel,
1205     .filemanager-container .yui3-skin-sam .yui3-datatable-header {
1206         text-align: right;
1207     }
1208     .filepicker {
1209         .yui-layout-unit-left {
1210             left: 500px;
1211         }
1212         .yui-layout-unit-center {
1213             left: 0;
1214         }
1215     }
1216     .file-picker .fp-toolbar {
1217         .fp-tb-search input {
1218             background-position: 208px 7px;
1219             padding: 2px 30px 1px 3px;
1220         }
1221         div {
1222             float: right;
1223             margin-left: 4px;
1224         }
1225     }
1227 // Upload form for file picker.
1228 .fp-formset {
1229     max-width: 500px;
1230     padding: 10px;
1231     input[type="file"] {
1232         line-height: inherit;
1233     }
1235 .fp-forminset {
1236     max-width: 400px;
1237     padding: 0 10px;
1238     .control-group.control-radio {
1239         margin-bottom: 0;
1240     }
1241     .control-group {
1242         label.control-label {
1243             width: 105px;
1244         }
1245         label.control-radio {
1246             float: right;
1247             text-align: left;
1248             width: 215px;
1249         }
1250         .controls {
1251             margin-left: 125px;
1252             select {
1253                 width: 100%;
1254             }
1255         }
1256         .controls.control-radio input {
1257             margin-top: 3px;
1258         }
1259     }
1260     .fp-select-buttons {
1261         float: none;
1262     }
1263     input[type="text"] {
1264         width: 228px;
1265     }
1268 .fp-fileinfo .fp-value {
1269     display: inline-block;
1270     padding-left: 5px;
1273 .dir-rtl .fp-forminset {
1274     max-width: 400px;
1275     .control-group {
1276         label.control-label {
1277             float: right;
1278             text-align: left;
1279         }
1280         label.control-radio {
1281             float: left;
1282             text-align: right;
1283             width: 215px;
1284         }
1285         .controls {
1286             margin-left: 0;
1287             margin-right: 125px;
1288         }
1289     }
1290     .fp-select-buttons {
1291         float: left;
1292     }
1293     input[type="text"] {
1294         width: 228px;
1295     }
1298 .dir-rtl .fp-fileinfo .fp-value {
1299     display: inline-block;
1300     padding-right: 5px;
1302 .dir-rtl .fp-select .fp-thumbnail {
1303     margin: 10px 0 0 0px;
1306 .dir-rtl .filepicker .fp-formset {
1307     label {
1308         float: right;
1309         text-align: left;
1310     }
1311     .controls {
1312         margin-left: 0;
1313         text-align: right;
1314     }