347004d1255ae09992ef5c1ef6aeab381a3e2a3d
[moodle.git] / theme / boost / scss / moodle / filemanager.scss
1 // File Picker and File Manager
2 .fp-content-center {
3     height: 100%;
4     width: 100%;
5     display: table-cell;
6     vertical-align: middle;
7 }
9 .fp-content-hidden {
10     visibility: hidden;
11 }
12 // Dialogue (File Picker and File Manager)
13 .yui3-panel-focused {
14     outline: none;
15 }
17 .fp-panel-button {
18     background: #fff;
19     padding: 3px 20px 2px 20px;
20     text-align: center;
21     margin: 10px;
23     @include border-radius(10px);
24     display: inline-block;
26     @include box-shadow(2px 2px 3px .1px #999);
27 }
29 // File Picker layout
30 .filepicker .yui3-widget-content-expanded {
31     height: auto;
32 }
34 /* The javascript is adding a style="height: 0px;" to this element - we need to set the min-height so the height is ignored. */
35 .filepicker .moodle-dialogue-bd {
36     min-height: 520px;
37 }
38 .file-picker .fp-navbar {
39     border-bottom: 1px solid #e5e5e5;
40     min-height: 40px;
41     padding: 4px;
42 }
44 .file-picker .fp-content {
45     border-top: 0;
46     background: #fff;
47     clear: none;
48     overflow: auto;
49     height: 452px;
50 }
52 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
53     width: 100%;
54 }
56 .file-picker .fp-content-loading {
57     height: 100%;
58     width: 100%;
59     display: table;
60     text-align: center;
61 }
63 .file-picker .fp-content .fp-object-container {
64     width: 98%;
65     height: 98%;
66 }
67 .file-picker .fp-def-search {
68     margin-top: 0;
69 }
70 // Repositories on fp-repo-area (File Picker only)
71 .file-picker .fp-list {
72     list-style-type: none;
73     padding: 0;
74     float: left;
75     width: 100%;
76     margin: 0;
77 }
79 .file-picker .fp-list .fp-repo a {
80     display: block;
81     padding: .5em .7em;
82 }
84 .file-picker .fp-list .fp-repo.active {
85     background: #f2f2f2;
86 }
88 .file-picker .fp-list .fp-repo-icon {
89     padding: 0 7px 0 5px;
90     width: 16px;
91     height: 16px;
92 }
93 // Tools, Path & View on fp-navbar (File Picker and File Manager)
94 .fp-toolbar {
95     float: left;
96 }
98 .fp-toolbar.empty {
99     display: none;
102 .fp-toolbar .disabled {
103     display: none;
106 .fp-toolbar div {
107     display: block;
108     float: left;
109     margin-right: 4px;
112 .fp-toolbar img {
113     vertical-align: -15%;
114     margin-right: 5px;
117 .fp-viewbar:not(.disabled) a.checked {
118     background-color: darken(map-get($theme-colors, 'secondary'), 10%);
119     color: color-yiq(darken(map-get($theme-colors, 'secondary'), 10%));
120     border-color: darken(map-get($theme-colors, 'secondary'), 12.5%);
123 .fp-viewbar.disabled a {
124     pointer-events: none;
125     opacity: $btn-disabled-opacity;
126     @include box-shadow(none);
129 .file-picker .fp-clear-left {
130     clear: left;
133 .fp-pathbar.empty {
134     display: none;
137 .fp-pathbar .fp-path-folder {
138     background: url('[[pix:theme|fp/path_folder]]') left 3px no-repeat;
139     background-size: 12px 12px;
140     height: 12px;
141     margin-left: 12px;
144 /*rtl:raw:
145 .fp-pathbar .fp-path-folder {
146     background-image: url('[[pix:theme|fp/path_folder_rtl]]');
148 */
150 .fp-pathbar .fp-path-folder-name {
151     margin-left: 24px;
153 // Icon view (File Picker and File Manager)
154 .fp-iconview .fp-file {
155     float: left;
156     text-align: center;
157     position: relative;
158     margin: 10px 10px 35px;
161 .fp-iconview .fp-thumbnail {
162     min-width: 110px;
163     min-height: 110px;
164     line-height: 110px;
165     text-align: center;
166     border: 1px solid #fff;
167     display: block;
170 .fp-iconview .fp-thumbnail img {
171     border: 1px solid #ddd;
172     padding: 3px;
173     vertical-align: middle;
175     @include box-shadow(1px 1px 2px 0 #ccc);
178 .fp-iconview .fp-thumbnail:hover {
179     background: #fff;
180     border: 1px solid #ddd;
182     @include box-shadow(inset 0 0 10px0 #ccc);
185 .fp-iconview .fp-filename-field {
186     height: 33px;
187     margin-top: 3px;
188     word-wrap: break-word;
189     overflow: hidden;
190     position: absolute;
193 .fp-iconview .fp-file:focus,
194 .fp-iconview .fp-file:hover {
195     // Undo truncating of text on hover.
196     .fp-filename-field {
197         overflow: visible;
198         z-index: 1000;
199     }
200     .fp-filename {
201         overflow: inherit;
202         white-space: normal;
203         text-overflow: inherit;
204     }
207 .fp-iconview .fp-filename-field .fp-filename {
208     background: #fff;
209     padding-top: 5px;
210     padding-bottom: 12px;
211     min-width: 112px;
213 // Table view (File Picker only)
214 .file-picker .yui3-datatable table {
215     border: 0 solid #bbb;
216     width: 100%;
218 // Tree view (File Manager only)
220 // first or middle sibling, no children
221 .file-picker .ygtvtn,
222 .filemanager .ygtvtn {
223     /*rtl:remove*/
224     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
225     /*rtl:raw:
226     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
227     */
228     width: 19px;
229     height: 32px;
231 // first or middle sibling, collapsable
232 .file-picker .ygtvtm,
233 .filemanager .ygtvtm {
234     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
235     /*rtl:raw:
236         background-position: 2px 10px;
237     */
238     width: 13px;
239     height: 12px;
240     cursor: pointer;
242 // first or middle sibling, collapsable, hover
243 .file-picker .ygtvtmh,
244 .filemanager .ygtvtmh {
245     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
246     /*rtl:raw:
247         background-position: 2px 10px;
248     */
249     width: 13px;
250     height: 12px;
251     cursor: pointer;
253 // first or middle sibling, expandable
254 .file-picker .ygtvtp,
255 .filemanager .ygtvtp {
256     /*rtl:remove*/
257     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
258     /*rtl:raw:
259     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
260     */
261     width: 13px;
262     height: 12px;
263     cursor: pointer;
265 // first or middle sibling, expandable, hover
266 .file-picker .ygtvtph,
267 .filemanager .ygtvtph {
268     /*rtl:remove*/
269     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
270     /*rtl:raw:
271     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
272     */
273     width: 13px;
274     height: 22px;
275     cursor: pointer;
277 // last sibling, no children
278 .file-picker .ygtvln,
279 .filemanager .ygtvln {
280     /*rtl:remove*/
281     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
282     /*rtl:raw:
283     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
284     */
285     width: 19px;
286     height: 32px;
288 // Last sibling, collapsable
289 .file-picker .ygtvlm,
290 .filemanager .ygtvlm {
291     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
292     /*rtl:raw:
293         background-position: 2px 10px;
294     */
295     width: 13px;
296     height: 12px;
297     cursor: pointer;
299 // Last sibling, collapsable, hover
300 .file-picker .ygtvlmh,
301 .filemanager .ygtvlmh {
302     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
303     /*rtl:raw:
304         background-position: 2px 10px;
305     */
306     width: 13px;
307     height: 12px;
308     cursor: pointer;
310 // Last sibling, expandable
311 .file-picker .ygtvlp,
312 .filemanager .ygtvlp {
313     /*rtl:remove*/
314     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
315     /*rtl:raw:
316     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
317     */
318     width: 13px;
319     height: 12px;
320     cursor: pointer;
322 // Last sibling, expandable, hover
323 .file-picker .ygtvlph,
324 .filemanager .ygtvlph {
325     /*rtl:remove*/
326     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
327     /*rtl:raw:
328     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
329     */
330     width: 13px;
331     height: 12px;
332     cursor: pointer;
334 // Loading icon
335 .file-picker .ygtvloading,
336 .filemanager .ygtvloading {
337     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
338     width: 16px;
339     height: 22px;
341 // the style for the empty cells that are used for rendering the depth of the node
342 .file-picker .ygtvdepthcell,
343 .filemanager .ygtvdepthcell {
344     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
345     /*rtl:raw:
346     background-position: 0 0;
347     */
348     width: 17px;
349     height: 32px;
352 .file-picker .ygtvblankdepthcell,
353 .filemanager .ygtvblankdepthcell {
354     width: 17px;
355     height: 22px;
358 a.ygtvspacer:hover {
359     color: transparent;
360     text-decoration: none;
363 .ygtvlabel,
364 .ygtvlabel:link,
365 .ygtvlabel:visited,
366 .ygtvlabel:hover {
367     background-color: transparent;
368     cursor: pointer;
369     margin-left: 2px;
370     text-decoration: none;
373 .file-picker .ygtvfocus,
374 .filemanager .ygtvfocus {
375     background-color: #eee;
378 .fp-filename-icon {
379     margin-top: 10px;
380     display: block;
381     position: relative;
384 .fp-icon {
385     float: left;
386     margin-top: -7px;
387     width: 24px;
388     height: 24px;
389     margin-right: 10px;
390     text-align: center;
391     line-height: 24px;
394 .fp-icon img {
395     max-height: 24px;
396     max-width: 24px;
397     vertical-align: middle;
400 .fp-filename {
401     padding-right: 10px;
403 // Repositories Login on fp-content (File Picker only)
405 .file-picker .fp-login-form {
406     height: 100%;
407     width: 100%;
408     display: table;
410 // Upload on fp-content (File Picker only)
411 .file-picker .fp-upload-form {
412     height: 100%;
413     width: 100%;
414     display: table;
417 .file-picker .fp-upload-form table {
418     margin: 0 auto;
420 // File exists dialogue on Upload (File Picker only)
421 .file-picker.fp-dlg {
422     text-align: center;
425 .file-picker.fp-dlg .fp-dlg-buttons {
426     margin: 0 20px;
428 // Error dialogue on Upload (File Picker only)
429 .file-picker.fp-msg {
430     text-align: center;
432 // Error on fp-content (File Picker only)
433 .file-picker .fp-content-error {
434     height: 100%;
435     width: 100%;
436     display: table;
437     text-align: center;
439 // Lazy loading on fp-content (File Picker only)
440 .file-picker .fp-nextpage {
441     clear: both;
444 .file-picker .fp-nextpage .fp-nextpage-loading {
445     display: none;
448 .file-picker .fp-nextpage.loading .fp-nextpage-link {
449     display: none;
452 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
453     display: block;
454     text-align: center;
455     height: 100px;
456     padding-top: 50px;
458 // Select Dialogue (File Picker and File Manager)
459 .fp-select .fp-select-loading {
460     text-align: center;
461     margin-top: 20px;
464 .fp-select table {
465     padding: 0 0 10px;
468 .fp-select table .mdl-right {
469     min-width: 84px;
472 .fp-select .fp-reflist .mdl-right {
473     vertical-align: top;
476 .fp-select .fp-select-buttons {
477     float: right;
480 .fp-select .fp-info {
481     font-size: $font-size-xs;
484 .fp-select .fp-thumbnail {
485     float: left;
486     min-width: 110px;
487     min-height: 110px;
488     line-height: 110px;
489     text-align: center;
490     margin: 10px 20px 0 0;
491     background: #fff;
492     border: 1px solid #ddd;
494     @include box-shadow(inset 0 0 10px 0 #ccc);
497 .fp-select .fp-thumbnail img {
498     border: 1px solid #ddd;
499     padding: 3px;
500     vertical-align: middle;
501     margin: 10px;
504 .fp-select .fp-fileinfo {
505     display: inline-block;
506     margin-top: 10px;
509 .file-picker.fp-select .fp-fileinfo {
510     max-width: 240px;
513 .fp-select .fp-fileinfo div {
514     padding-bottom: 5px;
517 .file-picker.fp-select .uneditable {
518     display: none;
521 .file-picker.fp-select .fp-select-loading {
522     display: none;
525 .file-picker.fp-select.loading .fp-select-loading {
526     display: block;
529 .file-picker.fp-select.loading form {
530     display: none;
533 .fp-select .fp-dimensions.fp-unknown {
534     display: none;
537 .fp-select .fp-size.fp-unknown {
538     display: none;
540 // File Manager
541 .filemanager-loading {
542     display: none;
545 .jsenabled .filemanager-loading {
546     display: block;
547     margin-top: 100px;
550 .filemanager.fm-loading .filemanager-toolbar,
551 .filemanager.fm-loading .fp-pathbar,
552 .filemanager.fm-loading .filemanager-container,
553 .filemanager.fm-loaded .filemanager-loading,
554 .filemanager.fm-maxfiles .fp-btn-add,
555 .filemanager.fm-maxfiles .dndupload-message,
556 .filemanager.fm-noitems .fp-btn-download,
557 .filemanager.fm-noitems .fp-btn-delete,
558 .filemanager .fm-empty-container,
559 .filemanager.fm-noitems .filemanager-container .fp-content {
560     display: none;
563 .filemanager .fp-img-downloading {
564     display: none;
565     padding-top: 7px;
568 .filemanager .filemanager-updating {
569     display: none;
570     text-align: center;
573 .filemanager.fm-updating .filemanager-updating {
574     display: block;
575     margin-top: 37px;
578 .filemanager.fm-updating .fm-content-wrapper,
579 .filemanager.fm-nomkdir .fp-btn-mkdir,
580 .fitem.disabled .filemanager .filemanager-toolbar,
581 .fitem.disabled .filemanager .fp-pathbar,
582 .fitem.disabled .filemanager .fp-restrictions,
583 .fitem.disabled .filemanager .fm-content-wrapper {
584     display: none;
586 // File Manager layout
587 .filemanager {
588     .fp-restrictions {
589         text-align: right;
590     }
593 .filemanager-toolbar {
594     padding: 4px;
595     overflow: hidden;
598 .filemanager .fp-pathbar.empty {
599     display: none;
602 .filepicker-filelist,
603 .filemanager-container {
604     min-height: 140px;
605     border-top: 0;
608 .filemanager .fp-content {
609     overflow: auto;
610     max-height: 472px;
611     min-height: 157px;
614 .filemanager-container,
615 .filepicker-filelist {
616     overflow: hidden;
619 .file-picker .yui3-datatable-header {
620     background: initial;
623 .fitem.disabled .filepicker-filelist,
624 .fitem.disabled .filemanager-container {
625     background-color: #ebebe4;
628 .fitem.disabled .fp-btn-choose {
629     color: $text-muted;
632 .fitem.disabled .filepicker-filelist .filepicker-filename {
633     display: none;
635 // Icon view (File Manager only)
636 .fp-iconview .fp-reficons1 {
637     position: absolute;
638     height: 100%;
639     width: 100%;
640     top: 0;
641     left: 0;
644 .fp-iconview .fp-reficons2 {
645     position: absolute;
646     height: 100%;
647     width: 100%;
648     top: 0;
649     left: 0;
652 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
653     background: url('[[pix:theme|fp/link]]') no-repeat;
654     /*rtl:raw:
655     transform: scaleX(-1);
656     */
657     /*rtl:ignore*/
658     background-position: bottom right;
659     background-size: 16px 16px;
662 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
663     background: url('[[pix:theme|fp/alias]]') no-repeat;
664     /*rtl:raw:
665     transform: scaleX(-1);
666     */
667     /*rtl:ignore*/
668     background-position: bottom left;
669     background-size: 16px 16px;
672 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
673     display: none;
676 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
677     background: url([[pix:s/dead]]) no-repeat;
678     background-position: center center;
680 // Table view (File Manager only)
681 .filemanager .yui3-datatable table {
682     border: 0 solid #bbb;
683     width: 100%;
686 /* Override YUI default styling */
687 /* stylelint-disable declaration-no-important */
688 .filemanager {
690     .yui3-datatable-header {
691         background: #fff !important;
692         border-bottom: 1px solid #ccc !important;
693         border-left: 0 solid #fff !important;
694         color: #555 !important;
695     }
697     .yui3-datatable-odd .yui3-datatable-cell {
698         background-color: #f6f6f6 !important;
699         border-left: 0 solid #f6f6f6;
700     }
702     .yui3-datatable-even .yui3-datatable-cell {
703         background-color: #fff !important;
704         border-left: 0 solid #fff;
705     }
707 /* stylelint-enable */
709 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
710     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
711     height: 100%;
712     width: 100%;
713     /*rtl:raw:
714     transform: scaleX(-1);
715     */
716     position: absolute;
717     top: 8px;
718     left: 17px;
719     background-size: 16px 16px;
722 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
723     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
724     height: 100%;
725     width: 100%;
726     /*rtl:raw:
727     transform: scaleX(-1);
728     */
729     position: absolute;
730     top: 9px;
731     left: -6px;
732     background-size: 16px 16px;
734 // Folder Context Menu (File Manager only)
735 .filemanager .fp-contextmenu {
736     display: none;
739 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
740     position: absolute;
741     right: 0;
742     bottom: 0;
743     display: flex;
744     align-items: center;
745     justify-content: center;
748 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
749 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
750     display: inline;
751     position: absolute;
752     left: 14px;
753     margin-right: -20px;
754     top: 6px;
756 // Drag and drop support (filemanager and filepicker form elements)
757 .filepicker-filelist .filepicker-container,
758 .filemanager.fm-noitems .fm-empty-container {
759     display: block;
760     position: absolute;
761     top: 10px;
762     bottom: 10px;
763     left: 10px;
764     right: 10px;
765     border: 2px dashed #bbb;
766     padding-top: 85px;
767     text-align: center;
770 .filepicker-filelist .dndupload-target,
771 .filemanager-container .dndupload-target {
772     background: #fff;
773     position: absolute;
774     top: 10px;
775     bottom: 10px;
776     left: 10px;
777     right: 10px;
778     border: 2px dashed #fb7979;
779     padding-top: 85px;
780     text-align: center;
782     @include box-shadow(0 0 0 10px #fff);
785 .filepicker-filelist.dndupload-over .dndupload-target,
786 .filemanager-container.dndupload-over .dndupload-target {
787     background: #fff;
788     position: absolute;
789     top: 10px;
790     bottom: 10px;
791     left: 10px;
792     right: 10px;
793     border: 2px dashed #6c8cd3;
794     padding-top: 85px;
795     text-align: center;
798 .dndupload-message {
799     display: none;
802 .dndsupported .dndupload-message {
803     display: inline;
806 .dnduploadnotsupported-message {
807     display: none;
810 .dndnotsupported .dnduploadnotsupported-message {
811     display: inline;
814 .dndupload-target {
815     display: none;
818 .dndsupported .dndupload-ready .dndupload-target {
819     display: block;
822 .dndupload-uploadinprogress {
823     display: none;
824     text-align: center;
827 .dndupload-uploading .dndupload-uploadinprogress {
828     display: block;
831 .dndupload-arrow {
832     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
833     width: 100%;
834     height: 80px;
835     position: absolute;
836     top: 5px;
839 .fitem.disabled .filepicker-container,
840 .fitem.disabled .fm-empty-container {
841     display: none;
844 .dndupload-progressbars {
845     padding: 10px;
846     display: none;
849 .dndupload-inprogress .dndupload-progressbars {
850     display: block;
853 .dndupload-inprogress .fp-content {
854     display: none;
857 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
858     display: none;
861 .filepicker-filelist.dndupload-inprogress .filepicker-container {
862     display: none;
865 .filepicker-filelist.dndupload-inprogress a {
866     display: none;
868 // Select Dialogue (File Manager only)
869 .filemanager.fp-select .fp-select-loading {
870     display: none;
873 .filemanager.fp-select.loading .fp-select-loading {
874     display: block;
877 .filemanager.fp-select.loading form {
878     display: none;
881 .filemanager.fp-select.fp-folder .fp-license,
882 .filemanager.fp-select.fp-folder .fp-author,
883 .filemanager.fp-select.fp-file .fp-file-unzip,
884 .filemanager.fp-select.fp-folder .fp-file-unzip,
885 .filemanager.fp-select.fp-file .fp-file-zip,
886 .filemanager.fp-select.fp-zip .fp-file-zip {
887     display: none;
890 .filemanager.fp-select .fp-file-setmain,
891 .filemanager.fp-select .fp-file-setmain-help {
892     display: none;
895 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
896 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
897     display: inline-block;
900 .filemanager .fp-mainfile .fp-filename {
901     font-weight: bold;
904 .filemanager.fp-select.fp-folder .fp-file-download {
905     display: none;
907 // to be implemented
908 .fm-operation {
909     font-weight: bold;
912 .filemanager.fp-select .fp-original.fp-unknown,
913 .filemanager.fp-select .fp-original .fp-originloading {
914     display: none;
917 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
918     display: inline;
921 .filemanager.fp-select .fp-reflist.fp-unknown,
922 .filemanager.fp-select .fp-reflist .fp-reflistloading {
923     display: none;
926 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
927     display: inline;
930 .filemanager.fp-select .fp-reflist .fp-value {
931     background: #f9f9f9;
932     border: 1px solid #bbb;
933     padding: 8px 7px;
934     margin: 0;
935     max-height: 75px;
936     overflow: auto;
939 .filemanager.fp-select .fp-reflist .fp-value li {
940     padding-bottom: 7px;
942 // Create folder dialogue (File Manager only)
943 .filemanager.fp-mkdir-dlg {
944     text-align: center;
947 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
948     text-align: left;
949     margin: 20px;
951 // Confirm dialogue for delete (File Manager only)
952 .filemanager.fp-dlg {
953     text-align: center;
955 // file picker search dialog
956 .file-picker div.bd {
957     text-align: left;
960 // Upload form for file picker.
961 .fp-formset {
962     padding: 10px;
964     input[type="file"] {
965         line-height: inherit;
966     }
969 .fp-forminset {
970     padding: 0 10px;
973 .fp-fileinfo .fp-value {
974     display: inline-block;
975     padding-left: 5px;