MDL-64230 files: Display long file/folder names with ellipsis
[moodle.git] / theme / bootstrapbase / less / moodle / filemanager.less
1 /* stylelint-disable declaration-no-important */
2 // File Picker and File Manager
3 .filemanager,
4 .filepicker,
5 .file-picker {
6     font-size: 11px;
7 }
8 .filemanager a,
9 .file-picker a,
10 .filemanager a:hover,
11 .file-picker a:hover {
12     color: #555;
13     text-decoration: none;
14 }
15 .filemanager input[type="text"],
16 .file-picker input[type="text"] {
17     width: 265px;
18 }
19 .filemanager .fp-license,
20 .file-picker .fp-setlicense {
21     td {
22         max-width: 265px;
23     }
24     select {
25         max-width: 100%;
26     }
27 }
28 .fp-content-center {
29     height: 100%;
30     width: 100%;
31     display: table-cell;
32     vertical-align: middle;
33 }
34 .fp-content-hidden {
35     visibility: hidden;
36 }
37 // Dialogue (File Picker and File Manager)
38 .yui3-panel-focused {
39     outline: none;
40 }
41 #filesskin .yui3-panel-content {
42     padding-bottom: 20px;
43     background: #f2f2f2;
44     .border-radius(8px);
45     border: 1px solid #fff;
46     display: inline-block;
47     .ie7-inline-block();
48     .box-shadow(5px 5px 20px 0 #666);
49 }
50 #filesskin .yui3-widget-hd {
51     .border-radius(10px 10px 0 0);
52     border-bottom: 1px solid #bbb;
53     padding: 5px;
54     text-align: center;
55     font-size: 12px;
56     color: #333;
57     letter-spacing: 1px;
58     text-shadow: 1px 1px 1px #fff;
59     filter: dropshadow(color=#fff, offx=1, offy=1);
60     #gradient > .vertical (#fff, #ccc);
61 }
62 .fp-panel-button {
63     background: #fff;
64     padding: 3px 20px 2px 20px;
65     text-align: center;
66     margin: 10px;
67     .border-radius(10px);
68     display: inline-block;
69     .ie7-inline-block();
70     .box-shadow(2px 2px 3px .1px #999);
71 }
73 .moodle-dialogue h3 {
74     font-size: 14px;
75     margin: 0;
76     line-height: 20px;
77 }
79 .moodle-dialogue-base .filepicker .moodle-dialogue-wrap .moodle-dialogue-bd {
80     padding: 0;
81 }
83 // File Picker layout
84 #filesskin .file-picker.fp-generallayout {
85     width: 859px;
86     background: #fff;
87     .border-radius(10px);
88     border: 1px solid #ccc;
89     position: relative;
90 }
91 .file-picker .fp-repo-area {
92     width: 180px;
93     overflow: auto;
94     display: inline-block;
95     .ie7-inline-block();
96     float: left;
97     height: 525px;
98     border-right: 1px solid #bbb;
99 }
100 .file-picker .fp-repo-items {
101     float: none;
102     width: auto;
103     margin-left: 181px;
105 .moodle-dialogue-fullscreen .file-picker .fp-repo-items {
106     margin-left: 0;
107     margin-right: 0;
108     float: left;
110 .file-picker .fp-navbar {
111     background: #f2f2f2;
112     border-bottom: 1px solid #bbb;
113     min-height: 40px;
114     overflow: hidden;
116 .file-picker .fp-navbar .fp-viewbar {
117     margin: 4px;
120 .file-picker .fp-content {
121     background: #fff;
122     clear: none;
123     overflow: auto;
124     height: 452px;
126 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
127     width: 100%;
129 .file-picker .fp-content-loading {
130     height: 100%;
131     width: 100%;
132     display: table;
133     text-align: center;
135 .file-picker .fp-content .fp-object-container {
136     width: 98%;
137     height: 98%;
140 // Repositories on fp-repo-area (File Picker only)
141 .file-picker .fp-list {
142     list-style-type: none;
143     padding: 0;
144     float: left;
145     width: 100%;
146     margin: 0;
148 .file-picker .fp-list .fp-repo a {
149     display: block;
150     padding: .5em .7em;
152 .file-picker .fp-list .fp-repo.active {
153     background: #f2f2f2;
155 .file-picker .fp-list .fp-repo-icon {
156     padding: 0 7px 0 5px;
157     width: 16px;
158     height: 16px;
160 // Tools, Path & View on fp-navbar (File Picker and File Manager)
161 .fp-toolbar {
162     float: left;
164 .fp-toolbar.empty {
165     display: none;
167 .fp-toolbar .disabled {
168     display: none;
170 .fp-toolbar div {
171     display: block;
172     float: left;
173     margin-right: 4px;
175 .fp-toolbar img {
176     vertical-align: -15%;
177     margin-right: 5px;
179 .fp-toolbar .fp-tb-search {
180     width: 235px;
181     height: 27px;
183 .fp-toolbar .fp-tb-search input {
184     background: #fff url('[[pix:a/search]]') no-repeat 7px 7px;
185     padding: 2px 6px 1px 27px;
186     width: 200px;
187     height: 27px;
188     border: 1px solid #bbb;
190 .fp-viewbar {
191     float: right;
192     height: 30px;
193     border: 1px solid #ccc;
194     border-bottom: 1px solid #b3b3b3;
195     border-radius: 4px;
196     background: white;
198 .fp-repo-items .fp-viewbar {
199     margin: 4px;
202 .fp-viewbar a {
203     width: 30px;
204     height: 30px;
205     border-right: 1px solid #ccc;
206     display: block;
207     float: left;
209 .fp-viewbar a.checked:hover,
210 .fp-viewbar a:hover {
211     background-image: radial-gradient(ellipse at center, #fff 60%, #dfdfdf 100%);
212     background-color: #ebebeb;
215 .fp-viewbar a.checked,
216 .fp-viewbar a:active {
217     background-image: radial-gradient(ellipse at center, #fff 40%, #dfdfdf 100%);
218     background-color: #dfdfdf;
221 .fp-viewbar a.fp-vb-icons {
222     border-radius: 4px 0 0 4px;
224 .fp-viewbar a.fp-vb-tree {
225     border-right: 0;
226     border-radius: 0 4px 4px 0;
228 .fp-viewbar a img {
229     margin: 7px;
232 .fp-viewbar.disabled a {
233     opacity: .45;
234     background: none;
235     cursor: default;
238 .file-picker .fp-clear-left {
239     clear: left;
242 .file-picker .fp-pathbar {
243     display: table-row;
245 .fp-pathbar.empty {
246     display: none;
248 .fp-pathbar .fp-path-folder {
249     background: url('[[pix:theme|fp/path_folder]]') 0 0 no-repeat;
250     /*rtl:raw:
251     background-image: url('[[pix:theme|fp/path_folder_rtl]]');
252     */
253     height: 12px;
254     margin-left: 4px;
256 .fp-pathbar .fp-path-folder-name {
257     margin-left: 32px;
258     line-height: 20px;
261 // Icon view (File Picker and File Manager)
262 .fp-iconview .fp-file {
263     float: left;
264     text-align: center;
265     position: relative;
266     margin: 10px 10px 35px;
268 .fp-iconview .fp-thumbnail {
269     min-width: 110px;
270     min-height: 110px;
271     line-height: 110px;
272     text-align: center;
273     border: 1px solid #fff;
274     display: block;
276 .fp-iconview .fp-thumbnail img {
277     border: 1px solid #ddd;
278     padding: 3px;
279     vertical-align: middle;
280     .box-shadow(1px 1px 2px 0 #ccc);
282 .fp-iconview .fp-thumbnail:hover {
283     background: #fff;
284     border: 1px solid #ddd;
285     .box-shadow(inset 0 0 10px 0 #ccc);
287 .fp-iconview .fp-filename-field {
288     height: 33px;
289     word-wrap: break-word;
290     overflow: hidden;
291     position: absolute;
293 .fp-iconview .fp-filename-field:hover {
294     overflow: visible;
295     z-index: 1000;
297 .fp-iconview .fp-filename-field .fp-filename {
298     background: #fff;
299     padding-top: 5px;
300     padding-bottom: 12px;
301     min-width: 112px;
302     // Undo truncating of text on hover.
303     &:hover {
304         overflow: inherit;
305         white-space: normal;
306         text-overflow: unset;
307     }
310 // Table view (File Picker only)
311 .file-picker .yui3-datatable table {
312     border: 0 solid #bbb;
313     width: 100%;
315 #filesskin .file-picker .yui3-datatable-header {
316     background: #fff;
317     border-bottom: 1px solid #ccc;
318     border-left: 0 solid #fff;
319     color: #555;
321 #filesskin .file-picker .yui3-datatable-odd .yui3-datatable-cell {
322     background-color: #f6f6f6;
323     border-left: 0 solid #f6f6f6;
325 #filesskin .file-picker .yui3-datatable-even .yui3-datatable-cell {
326     background-color: #fff;
327     border-left: 0 solid #fff;
329 // Tree view (File Manager only)
331 // first or middle sibling, no children
332 .file-picker .ygtvtn,
333 .filemanager .ygtvtn {
334     /*rtl:remove*/
335     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
336     /*rtl:raw:
337     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
338     */
339     width: 17px;
340     height: 22px;
342 // first or middle sibling, collapsable
343 .file-picker .ygtvtm,
344 .filemanager .ygtvtm {
345     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
346     /*rtl:raw:
347         background-position: 2px 10px;
348     */
349     width: 13px;
350     height: 12px;
351     cursor: pointer;
353 // first or middle sibling, collapsable, hover
354 .file-picker .ygtvtmh,
355 .filemanager .ygtvtmh {
356     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
357     /*rtl:raw:
358         background-position: 2px 10px;
359     */
360     width: 13px;
361     height: 12px;
362     cursor: pointer;
364 // first or middle sibling, expandable
365 .file-picker .ygtvtp,
366 .filemanager .ygtvtp {
367     /*rtl:remove*/
368     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
369     /*rtl:raw:
370     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
371     */
372     width: 13px;
373     height: 12px;
374     cursor: pointer;
376 // first or middle sibling, expandable, hover
377 .file-picker .ygtvtph,
378 .filemanager .ygtvtph {
379     /*rtl:remove*/
380     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
381     /*rtl:raw:
382     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
383     */
384     width: 13px;
385     height: 22px;
386     cursor: pointer;
388 // last sibling, no children
389 .file-picker .ygtvln,
390 .filemanager .ygtvln {
391     /*rtl:remove*/
392     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
393     /*rtl:raw:
394     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
395     */
396     width: 17px;
397     height: 22px;
399 // Last sibling, collapsable
400 .file-picker .ygtvlm,
401 .filemanager .ygtvlm {
402     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
403     /*rtl:raw:
404         background-position: 2px 10px;
405     */
406     width: 13px;
407     height: 12px;
408     cursor: pointer;
410 // Last sibling, collapsable, hover
411 .file-picker .ygtvlmh,
412 .filemanager .ygtvlmh {
413     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
414     /*rtl:raw:
415         background-position: 2px 10px;
416     */
417     width: 13px;
418     height: 12px;
419     cursor: pointer;
421 // Last sibling, expandable
422 .file-picker .ygtvlp,
423 .filemanager .ygtvlp {
424     /*rtl:remove*/
425     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
426     /*rtl:raw:
427     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
428     */
429     width: 13px;
430     height: 12px;
431     cursor: pointer;
433 // Last sibling, expandable, hover
434 .file-picker .ygtvlph,
435 .filemanager .ygtvlph {
436     /*rtl:remove*/
437     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
438     /*rtl:raw:
439     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
440     */
441     width: 13px;
442     height: 12px;
443     cursor: pointer;
445 // Loading icon
446 .file-picker .ygtvloading,
447 .filemanager .ygtvloading {
448     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
449     width: 16px;
450     height: 22px;
452 // the style for the empty cells that are used for rendering the depth of the node
453 .file-picker .ygtvdepthcell,
454 .filemanager .ygtvdepthcell {
455     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
456     /*rtl:raw:
457     background-position: 1px 0;
458     */
459     width: 17px;
460     height: 32px;
462 .file-picker .ygtvblankdepthcell,
463 .filemanager .ygtvblankdepthcell {
464     width: 17px;
465     height: 22px;
467 a.ygtvspacer:hover {
468     color: transparent;
469     text-decoration: none;
471 .ygtvlabel,
472 .ygtvlabel:link,
473 .ygtvlabel:visited,
474 .ygtvlabel:hover {
475     background-color: transparent;
476     cursor: pointer;
477     margin-left: 2px;
478     text-decoration: none;
480 .file-picker .ygtvfocus,
481 .filemanager .ygtvfocus {
482     background-color: #eee;
484 .fp-filename-icon {
485     margin-top: 10px;
486     display: block;
487     position: relative;
489 .fp-icon {
490     float: left;
491     margin-top: -7px;
492     width: 24px;
493     height: 24px;
494     margin-right: 10px;
495     text-align: center;
496     line-height: 24px;
498 .fp-filename {
499     padding-right: 10px;
501 // Repositories Login on fp-content (File Picker only)
503 .file-picker .fp-login-form {
504     height: 100%;
505     width: 100%;
506     display: table;
508 .file-picker .fp-login-form table {
509     margin: 0 auto;
511 .file-picker .fp-login-form p {
512     text-align: center;
513     margin-top: 3em;
515 .file-picker .fp-login-form .fp-login-input label {
516     text-align: right;
517     display: block;
519 .file-picker .fp-login-form .fp-login-input .input {
520     text-align: left;
522 .file-picker .fp-login-form input[type="checkbox"] {
523     width: 15px;
524     height: 15px;
526 // Upload on fp-content (File Picker only)
527 .file-picker .fp-upload-form {
528     height: 100%;
529     width: 100%;
530     display: table;
532 .file-picker .fp-upload-form table {
533     margin: 0 auto;
535 // File exists dialogue on Upload (File Picker only)
536 .file-picker.fp-dlg {
537     text-align: center;
539 .file-picker.fp-dlg .fp-dlg-text {
540     padding: 30px 20px 10px;
541     font-size: 12px;
543 .file-picker.fp-dlg .fp-dlg-buttons {
544     margin: 0 20px;
546 // Error dialogue on Upload (File Picker only)
547 .file-picker.fp-msg {
548     text-align: center;
550 .file-picker.fp-msg .fp-msg-text {
551     padding: 40px 20px 10px 20px;
552     min-width: 200px;
553     max-width: 500px;
554     max-height: 300px;
555     overflow: auto;
556     font-size: 12px;
558 .file-picker.fp-msg.fp-msg-error .fp-msg-text {
559     padding: 40px 20px 10px 20px;
560     font-size: 12px;
562 // Error on fp-content (File Picker only)
563 .file-picker .fp-content-error {
564     height: 100%;
565     width: 100%;
566     display: table;
567     text-align: center;
569 .file-picker .fp-content-error .fp-error {
570     height: 100%;
571     width: 100%;
572     display: table-cell;
573     vertical-align: middle;
574     padding: 40px 20px 10px 20px;
575     font-size: 12px;
577 // Lazy loading on fp-content (File Picker only)
578 .file-picker .fp-nextpage {
579     clear: both;
581 .file-picker .fp-nextpage .fp-nextpage-loading {
582     display: none;
584 .file-picker .fp-nextpage.loading .fp-nextpage-link {
585     display: none;
587 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
588     display: block;
589     text-align: center;
590     height: 100px;
591     padding-top: 50px;
593 // Select Dialogue (File Picker and File Manager)
594 .fp-select form {
595     padding: 20px 20px 0;
597 .fp-select .fp-select-loading {
598     text-align: center;
599     margin-top: 20px;
601 .fp-select .fp-hr {
602     clear: both;
603     height: 1px;
604     background-color: #fff;
605     border-bottom: 1px solid #bbb;
606     width: auto;
607     margin: 10px 0;
609 .fp-select table {
610     padding: 0 0 10px;
612 .fp-select table .mdl-right {
613     min-width: 84px;
615 .fp-select .fp-reflist .mdl-right {
616     vertical-align: top;
618 .fp-select .fp-select-buttons {
619     float: right;
621 .fp-select .fp-info {
622     display: block;
623     clear: both;
624     padding: 1px 20px 0;
626 .fp-select .fp-thumbnail {
627     float: left;
628     min-width: 110px;
629     min-height: 110px;
630     line-height: 110px;
631     text-align: center;
632     margin: 10px 20px 0 0;
633     background: #fff;
634     border: 1px solid #ddd;
635     .box-shadow(inset 0 0 10px 0 #ccc);
637 .fp-select .fp-thumbnail img {
638     border: 1px solid #ddd;
639     padding: 3px;
640     vertical-align: middle;
641     margin: 10px;
643 .fp-select .fp-fileinfo {
644     display: inline-block;
645     .ie7-inline-block();
646     margin-top: 10px;
648 .file-picker.fp-select .fp-fileinfo {
649     max-width: 240px;
651 .fp-select .fp-fileinfo div {
652     padding-bottom: 5px;
654 .file-picker.fp-select .uneditable {
655     display: none;
657 .file-picker.fp-select .fp-select-loading {
658     display: none;
660 .file-picker.fp-select.loading .fp-select-loading {
661     display: block;
663 .file-picker.fp-select.loading form {
664     display: none;
666 .fp-select .fp-dimensions.fp-unknown {
667     display: none;
669 .fp-select .fp-size.fp-unknown {
670     display: none;
672 // File Manager
673 .filemanager-loading {
674     display: none;
676 .jsenabled .filemanager-loading {
677     display: block;
678     margin-top: 100px;
680 .filemanager.fm-loading .filemanager-toolbar,
681 .filemanager.fm-loading .fp-pathbar,
682 .filemanager.fm-loading .filemanager-container,
683 .filemanager.fm-loaded .filemanager-loading,
684 .filemanager.fm-maxfiles .fp-btn-add,
685 .filemanager.fm-maxfiles .dndupload-message,
686 .filemanager.fm-noitems .fp-btn-download,
687 .filemanager .fm-empty-container,
688 .filemanager.fm-noitems .filemanager-container .fp-content {
689     display: none;
691 .filemanager .fp-img-downloading {
692     display: none;
693     padding-top: 7px;
695 .filemanager .filemanager-updating {
696     display: none;
697     text-align: center;
699 .filemanager.fm-updating .filemanager-updating {
700     display: block;
701     margin-top: 37px;
703 .filemanager.fm-updating .fm-content-wrapper,
704 .filemanager.fm-nomkdir .fp-btn-mkdir,
705 .fitem.disabled .filemanager .filemanager-toolbar,
706 .fitem.disabled .filemanager .fp-pathbar,
707 .fitem.disabled .filemanager .fp-restrictions,
708 .fitem.disabled .filemanager .fm-content-wrapper {
709     display: none;
711 // File Manager layout
712 .filemanager {
713     .fp-restrictions {
714         text-align: right;
715     }
717 .filemanager .fp-navbar {
718     background: #f2f2f2;
719     border: 1px solid #bbb;
720     border-bottom: none;
722 .filemanager-toolbar {
723     padding: 4px;
724     overflow: hidden;
726 .fp-pathbar {
727     border-top: 1px solid #bbb;
728     padding: 5px 8px 1px;
729     min-height: 20px;
732 .file-picker .fp-toolbar {
733     padding: 4px;
736 .fp-toolbar .fp-btn-add,
737 .fp-toolbar .fp-btn-download,
738 .fp-toolbar .fp-btn-mkdir,
739 .fp-toolbar .fp-tb-help,
740 .fp-toolbar .fp-tb-manage,
741 .fp-toolbar .fp-tb-logout,
742 .fp-toolbar .fp-tb-refresh {
743     border: 1px solid #ccc;
744     border-bottom: 1px solid #b3b3b3;
745     border-radius: 4px;
746     background: white;
747     width: 30px;
748     height: 30px;
751 .fp-toolbar a:hover {
752     background-image: radial-gradient(ellipse at center, #fff 60%, #dfdfdf 100%);
753     background-color: #ebebeb;
756 .fp-toolbar a:active {
757     background-image: radial-gradient(ellipse at center, #fff 40%, #dfdfdf 100%);
758     background-color: #dfdfdf;
761 .fp-btn-add a,
762 .fp-btn-download a,
763 .fp-btn-mkdir a,
764 .fp-tb-help a,
765 .fp-tb-manage a,
766 .fp-tb-logout a,
767 .fp-tb-refresh a {
768     display: block;
769     width: 30px;
770     height: 30px;
771     border-radius: 4px;
774 .fp-btn-add img,
775 .fp-btn-download img,
776 .fp-btn-mkdir img,
777 .fp-tb-help img,
778 .fp-tb-manage img,
779 .fp-tb-logout img,
780 .fp-tb-refresh img {
781     margin: 7px;
784 .filemanager .fp-pathbar.empty {
785     display: none;
787 .filepicker-filelist,
788 .filemanager-container {
789     background: #fff;
790     clear: both;
791     overflow: auto;
792     border: 1px solid #bbb;
793     min-height: 140px;
794     position: relative;
796 .filemanager .fp-content {
797     overflow: auto;
798     max-height: 472px;
799     min-height: 157px;
801 .filemanager-container,
802 .filepicker-filelist {
803     overflow: hidden;
805 .fitem.disabled .filepicker-filelist,
806 .fitem.disabled .filemanager-container {
807     background-color: #ebebe4;
809 .fitem.disabled .fp-btn-choose {
810     .muted
812 .fitem.disabled .filepicker-filelist .filepicker-filename {
813     display: none;
815 // Icon view (File Manager only)
816 .fp-iconview .fp-reficons1 {
817     position: absolute;
818     height: 100%;
819     width: 100%;
820     top: 0;
821     left: 0;
823 .fp-iconview .fp-reficons2 {
824     position: absolute;
825     height: 100%;
826     width: 100%;
827     top: 0;
828     left: 0;
830 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
831     background: url('[[pix:theme|fp/link]]') no-repeat;
832     /*rtl:raw:
833     transform: scaleX(-1);
834     */
835     /*rtl:ignore*/
836     background-position: bottom right;
838 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
839     background: url('[[pix:theme|fp/alias]]') no-repeat;
840     /*rtl:raw:
841     transform: scaleX(-1);
842     */
843     /*rtl:ignore*/
844     background-position: bottom left;
846 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
847     display: none;
849 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
850     background: url([[pix:s/dead]]) no-repeat;
851     background-position: center center;
853 // Table view (File Manager only)
854 .filemanager .yui3-datatable table {
855     border: 0 solid #bbb;
856     width: 100%;
858 .filemanager .yui3-datatable-header {
859     background: #fff !important;
860     border-bottom: 1px solid #ccc !important;
861     border-left: 0 solid #fff !important;
862     color: #555 !important;
864 .filemanager .yui3-datatable-odd .yui3-datatable-cell {
865     background-color: #f6f6f6 !important;
866     border-left: 0 solid #f6f6f6;
868 .filemanager .yui3-datatable-even .yui3-datatable-cell {
869     background-color: #fff !important;
870     border-left: 0 solid #fff;
872 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
873     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
874     height: 100%;
875     width: 100%;
876     /*rtl:raw:
877     transform: scaleX(-1);
878     */
879     position: absolute;
880     top: 8px;
881     left: 17px;
882     z-index: 1000;
884 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
885     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
886     height: 100%;
887     width: 100%;
888     /*rtl:raw:
889     transform: scaleX(-1);
890     */
891     position: absolute;
892     top: 9px;
893     left: -6px;
894     z-index: 1001;
896 // Folder Context Menu (File Manager only)
897 .filemanager .fp-contextmenu {
898     display: none;
900 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
901     display: block;
902     position: absolute;
903     right: 7px;
904     bottom: 5px;
906 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
907 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
908     display: inline;
909     position: absolute;
910     left: 14px;
911     margin-right: -20px;
912     top: 6px;
915 // Drag and drop support (filemanager and filepicker form elements)
916 .filepicker-filelist .filepicker-container,
917 .filemanager.fm-noitems .fm-empty-container {
918     display: block;
919     position: absolute;
920     top: 10px;
921     bottom: 10px;
922     left: 10px;
923     right: 10px;
924     border: 2px dashed #bbb;
925     padding-top: 85px;
926     text-align: center;
928 .filepicker-filelist .dndupload-target,
929 .filemanager-container .dndupload-target {
930     background: #fff;
931     position: absolute;
932     top: 10px;
933     bottom: 10px;
934     left: 10px;
935     right: 10px;
936     border: 2px dashed #fb7979;
937     padding-top: 85px;
938     text-align: center;
939     .box-shadow(0px 0 0 10px #fff);
941 .filepicker-filelist.dndupload-over .dndupload-target,
942 .filemanager-container.dndupload-over .dndupload-target {
943     background: #fff;
944     position: absolute;
945     top: 10px;
946     bottom: 10px;
947     left: 10px;
948     right: 10px;
949     border: 2px dashed #6c8cd3;
950     padding-top: 85px;
951     text-align: center;
953 .dndupload-message {
954     display: none;
956 .dndsupported .dndupload-message {
957     display: inline;
959 .dnduploadnotsupported-message {
960     display: none;
962 .dndnotsupported .dnduploadnotsupported-message {
963     display: inline;
965 .dndupload-target {
966     display: none;
968 .dndsupported .dndupload-ready .dndupload-target {
969     display: block;
971 .dndupload-uploadinprogress {
972     display: none;
973     text-align: center;
975 .dndupload-uploading .dndupload-uploadinprogress {
976     display: block;
978 .dndupload-arrow {
979     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
980     width: 100%;
981     height: 80px;
982     position: absolute;
983     top: 5px;
985 .fitem.disabled .filepicker-container,
986 .fitem.disabled .fm-empty-container {
987     display: none;
989 .dndupload-progressbars {
990     padding: 10px;
991     display: none;
993 .dndupload-inprogress .dndupload-progressbars {
994     display: block;
996 .dndupload-inprogress .fp-content {
997     display: none;
999 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
1000     display: none;
1002 .filepicker-filelist.dndupload-inprogress .filepicker-container {
1003     display: none;
1005 .filepicker-filelist.dndupload-inprogress a {
1006     display: none;
1008 // Select Dialogue (File Manager only)
1009 .filemanager.fp-select .fp-select-loading {
1010     display: none;
1012 .filemanager.fp-select.loading .fp-select-loading {
1013     display: block;
1015 .filemanager.fp-select.loading form {
1016     display: none;
1018 .filemanager.fp-select.fp-folder .fp-license,
1019 .filemanager.fp-select.fp-folder .fp-author,
1020 .filemanager.fp-select.fp-file .fp-file-unzip,
1021 .filemanager.fp-select.fp-folder .fp-file-unzip,
1022 .filemanager.fp-select.fp-file .fp-file-zip,
1023 .filemanager.fp-select.fp-zip .fp-file-zip {
1024     display: none;
1026 .filemanager.fp-select .fp-file-setmain,
1027 .filemanager.fp-select .fp-file-setmain-help {
1028     display: none;
1030 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
1031 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
1032     display: inline-block;
1033     .ie7-inline-block();
1035 .filemanager .fp-mainfile .fp-filename {
1036     font-weight: bold;
1038 .filemanager.fp-select.fp-folder .fp-file-download {
1039     display: none;
1041 // to be implemented
1042 .fm-operation {
1043     font-weight: bold;
1045 .filemanager.fp-select .fp-original.fp-unknown,
1046 .filemanager.fp-select .fp-original .fp-originloading {
1047     display: none;
1049 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
1050     display: inline;
1052 .filemanager.fp-select .fp-reflist.fp-unknown,
1053 .filemanager.fp-select .fp-reflist .fp-reflistloading {
1054     display: none;
1056 .filemanager.fp-select .fp-refcount {
1057     max-width: 265px;
1059 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
1060     display: inline;
1062 .filemanager.fp-select .fp-reflist .fp-value {
1063     background: #f9f9f9;
1064     border: 1px solid #bbb;
1065     padding: 8px 7px;
1066     margin: 0;
1067     max-width: 265px;
1068     max-height: 75px;
1069     overflow: auto;
1071 .filemanager.fp-select .fp-reflist .fp-value li {
1072     padding-bottom: 7px;
1074 // Create folder dialogue (File Manager only)
1075 .filemanager.fp-mkdir-dlg {
1076     text-align: center;
1078 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
1079     text-align: left;
1080     margin: 20px;
1082 // Confirm dialogue for delete (File Manager only)
1083 .filemanager.fp-dlg {
1084     text-align: center;
1086 .filemanager.fp-dlg .fp-dlg-text {
1087     padding: 0 10px;
1088     min-width: 200px;
1089     max-width: 340px;
1090     max-height: 300px;
1091     overflow: auto;
1092     line-height: 22px;
1093     margin: 40px 20px 20px;
1094     font-size: 12px;
1096 // file picker search dialog
1097 .file-picker div.bd {
1098     text-align: left;
1101 // Upload form for file picker.
1102 .fp-formset {
1103     max-width: 500px;
1104     padding: 10px;
1105     input[type="file"] {
1106         line-height: inherit;
1107     }
1109 .fp-forminset {
1110     max-width: 400px;
1111     padding: 0 10px;
1112     .control-group.control-radio {
1113         margin-bottom: 0;
1114     }
1115     .control-group {
1116         label.control-label {
1117             width: 105px;
1118         }
1119         label.control-radio {
1120             float: right;
1121             text-align: left;
1122             width: 215px;
1123         }
1124         .controls {
1125             margin-left: 125px;
1126             select {
1127                 width: 100%;
1128             }
1129         }
1130         .controls.control-radio input {
1131             margin-top: 3px;
1132         }
1133     }
1134     .fp-select-buttons {
1135         float: none;
1136     }
1137     input[type="text"] {
1138         width: 228px;
1139     }
1142 .fp-fileinfo .fp-value {
1143     display: inline-block;
1144     padding-left: 5px;