weekly release 4.0dev
[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     min-height: 40px;
40     padding: 4px;
41 }
43 .fp-navbar {
44     border-color: $input-border-color;
45     border-bottom: 0;
46 }
48 .file-picker .fp-content {
49     border-top: 0;
50     background: #fff;
51     clear: none;
52     overflow: auto;
53     height: 452px;
54 }
56 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
57     width: 100%;
58 }
60 .file-picker .fp-content-loading {
61     height: 100%;
62     width: 100%;
63     display: table;
64     text-align: center;
65 }
67 .file-picker .fp-content .fp-object-container {
68     width: 98%;
69     height: 98%;
70 }
71 .file-picker .fp-def-search {
72     margin-top: 0;
73 }
74 // Repositories on fp-repo-area (File Picker only)
75 .file-picker .fp-list {
76     list-style-type: none;
77     padding: 0;
78     float: left;
79     width: 100%;
80     margin: 0;
81 }
83 .file-picker .fp-list .fp-repo a {
84     display: block;
85     padding: .5em .7em;
86 }
88 .file-picker .fp-list .fp-repo.active {
89     background: #f2f2f2;
90 }
92 .file-picker .fp-list .fp-repo-icon {
93     padding: 0 7px 0 5px;
94     width: 16px;
95     height: 16px;
96 }
97 // Tools, Path & View on fp-navbar (File Picker and File Manager)
98 .fp-toolbar {
99     float: left;
102 .fp-toolbar.empty {
103     display: none;
106 .fp-toolbar .disabled {
107     display: none;
110 .fp-toolbar div {
111     display: block;
112     float: left;
113     margin-right: 4px;
116 .fp-toolbar img {
117     vertical-align: -15%;
118     margin-right: 5px;
121 .fp-viewbar:not(.disabled) a.checked {
122     background-color: darken(map-get($theme-colors, 'secondary'), 10%);
123     color: color-yiq(darken(map-get($theme-colors, 'secondary'), 10%));
124     border-color: darken(map-get($theme-colors, 'secondary'), 12.5%);
127 .fp-viewbar.disabled a {
128     pointer-events: none;
129     opacity: $btn-disabled-opacity;
130     @include box-shadow(none);
133 .file-picker .fp-clear-left {
134     clear: left;
137 .fp-pathbar.empty {
138     display: none;
141 .fp-pathbar .fp-path-folder {
142     background: url('[[pix:theme|fp/path_folder]]') left 3px no-repeat;
143     background-size: 12px 12px;
144     height: 12px;
145     margin-left: 12px;
148 /*rtl:raw:
149 .fp-pathbar .fp-path-folder {
150     background-image: url('[[pix:theme|fp/path_folder_rtl]]');
152 */
154 .fp-pathbar .fp-path-folder-name {
155     margin-left: 24px;
157 // Icon view (File Picker and File Manager)
158 .fp-iconview .fp-file {
159     float: left;
160     text-align: center;
161     position: relative;
162     margin: 10px 10px 35px;
165 .fp-iconview .fp-thumbnail {
166     min-width: 110px;
167     min-height: 110px;
168     line-height: 110px;
169     text-align: center;
170     border: 1px solid #fff;
171     display: block;
174 .fp-iconview .fp-thumbnail img {
175     border: 1px solid #ddd;
176     padding: 3px;
177     vertical-align: middle;
179     @include box-shadow(1px 1px 2px 0 #ccc);
182 .fp-iconview .fp-thumbnail:hover {
183     background: #fff;
184     border: 1px solid #ddd;
186     @include box-shadow(inset 0 0 10px0 #ccc);
189 .fp-iconview .fp-filename-field {
190     height: 33px;
191     margin-top: 3px;
192     word-wrap: break-word;
193     overflow: hidden;
194     position: absolute;
197 .fp-iconview .fp-file:focus,
198 .fp-iconview .fp-file:hover {
199     // Undo truncating of text on hover.
200     .fp-filename-field {
201         overflow: visible;
202         z-index: 1000;
203     }
204     .fp-filename {
205         overflow: inherit;
206         white-space: normal;
207         text-overflow: inherit;
208     }
211 .fp-iconview .fp-filename-field .fp-filename {
212     background: #fff;
213     padding-top: 5px;
214     padding-bottom: 12px;
215     min-width: 112px;
217 // Table view (File Picker only)
218 .file-picker .yui3-datatable table {
219     border: 0 solid #bbb;
220     width: 100%;
222 // Tree view (File Manager only)
224 // first or middle sibling, no children
225 .file-picker .ygtvtn,
226 .filemanager .ygtvtn {
227     /*rtl:remove*/
228     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
229     /*rtl:raw:
230     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
231     */
232     width: 19px;
233     height: 32px;
235 // first or middle sibling, collapsable
236 .file-picker .ygtvtm,
237 .filemanager .ygtvtm {
238     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
239     /*rtl:raw:
240         background-position: 2px 10px;
241     */
242     width: 13px;
243     height: 12px;
244     cursor: pointer;
246 // first or middle sibling, collapsable, hover
247 .file-picker .ygtvtmh,
248 .filemanager .ygtvtmh {
249     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
250     /*rtl:raw:
251         background-position: 2px 10px;
252     */
253     width: 13px;
254     height: 12px;
255     cursor: pointer;
257 // first or middle sibling, expandable
258 .file-picker .ygtvtp,
259 .filemanager .ygtvtp {
260     /*rtl:remove*/
261     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
262     /*rtl:raw:
263     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
264     */
265     width: 13px;
266     height: 12px;
267     cursor: pointer;
269 // first or middle sibling, expandable, hover
270 .file-picker .ygtvtph,
271 .filemanager .ygtvtph {
272     /*rtl:remove*/
273     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
274     /*rtl:raw:
275     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
276     */
277     width: 13px;
278     height: 22px;
279     cursor: pointer;
281 // last sibling, no children
282 .file-picker .ygtvln,
283 .filemanager .ygtvln {
284     /*rtl:remove*/
285     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
286     /*rtl:raw:
287     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
288     */
289     width: 19px;
290     height: 32px;
292 // Last sibling, collapsable
293 .file-picker .ygtvlm,
294 .filemanager .ygtvlm {
295     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
296     /*rtl:raw:
297         background-position: 2px 10px;
298     */
299     width: 13px;
300     height: 12px;
301     cursor: pointer;
303 // Last sibling, collapsable, hover
304 .file-picker .ygtvlmh,
305 .filemanager .ygtvlmh {
306     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
307     /*rtl:raw:
308         background-position: 2px 10px;
309     */
310     width: 13px;
311     height: 12px;
312     cursor: pointer;
314 // Last sibling, expandable
315 .file-picker .ygtvlp,
316 .filemanager .ygtvlp {
317     /*rtl:remove*/
318     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
319     /*rtl:raw:
320     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
321     */
322     width: 13px;
323     height: 12px;
324     cursor: pointer;
326 // Last sibling, expandable, hover
327 .file-picker .ygtvlph,
328 .filemanager .ygtvlph {
329     /*rtl:remove*/
330     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
331     /*rtl:raw:
332     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
333     */
334     width: 13px;
335     height: 12px;
336     cursor: pointer;
338 // Loading icon
339 .file-picker .ygtvloading,
340 .filemanager .ygtvloading {
341     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
342     width: 16px;
343     height: 22px;
345 // the style for the empty cells that are used for rendering the depth of the node
346 .file-picker .ygtvdepthcell,
347 .filemanager .ygtvdepthcell {
348     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
349     /*rtl:raw:
350     background-position: 0 0;
351     */
352     width: 17px;
353     height: 32px;
356 .file-picker .ygtvblankdepthcell,
357 .filemanager .ygtvblankdepthcell {
358     width: 17px;
359     height: 22px;
362 a.ygtvspacer:hover {
363     color: transparent;
364     text-decoration: none;
367 .ygtvlabel,
368 .ygtvlabel:link,
369 .ygtvlabel:visited,
370 .ygtvlabel:hover {
371     background-color: transparent;
372     cursor: pointer;
373     margin-left: 2px;
374     text-decoration: none;
377 .file-picker .ygtvfocus,
378 .filemanager .ygtvfocus {
379     background-color: #eee;
382 .fp-filename-icon {
383     margin-top: 10px;
384     display: block;
385     position: relative;
388 .fp-icon {
389     float: left;
390     margin-top: -7px;
391     width: 24px;
392     height: 24px;
393     margin-right: 10px;
394     text-align: center;
395     line-height: 24px;
398 .fp-icon img {
399     max-height: 24px;
400     max-width: 24px;
401     vertical-align: middle;
404 .fp-filename {
405     padding-right: 10px;
407 // Repositories Login on fp-content (File Picker only)
409 .file-picker .fp-login-form {
410     height: 100%;
411     width: 100%;
412     display: table;
414 // Upload on fp-content (File Picker only)
415 .file-picker .fp-upload-form {
416     height: 100%;
417     width: 100%;
418     display: table;
421 .file-picker .fp-upload-form table {
422     margin: 0 auto;
424 // File exists dialogue on Upload (File Picker only)
425 .file-picker.fp-dlg {
426     text-align: center;
429 .file-picker.fp-dlg .fp-dlg-buttons {
430     margin: 0 20px;
432 // Error dialogue on Upload (File Picker only)
433 .file-picker.fp-msg {
434     text-align: center;
436 // Error on fp-content (File Picker only)
437 .file-picker .fp-content-error {
438     height: 100%;
439     width: 100%;
440     display: table;
441     text-align: center;
443 // Lazy loading on fp-content (File Picker only)
444 .file-picker .fp-nextpage {
445     clear: both;
448 .file-picker .fp-nextpage .fp-nextpage-loading {
449     display: none;
452 .file-picker .fp-nextpage.loading .fp-nextpage-link {
453     display: none;
456 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
457     display: block;
458     text-align: center;
459     height: 100px;
460     padding-top: 50px;
462 // Select Dialogue (File Picker and File Manager)
463 .fp-select .fp-select-loading {
464     text-align: center;
465     margin-top: 20px;
468 .fp-select table {
469     padding: 0 0 10px;
472 .fp-select table .mdl-right {
473     min-width: 84px;
476 .fp-select .fp-reflist .mdl-right {
477     vertical-align: top;
480 .fp-select .fp-select-buttons {
481     float: right;
484 .fp-select .fp-info {
485     font-size: $font-size-xs;
488 .fp-select .fp-thumbnail {
489     float: left;
490     min-width: 110px;
491     min-height: 110px;
492     line-height: 110px;
493     text-align: center;
494     margin: 10px 20px 0 0;
495     background: #fff;
496     border: 1px solid #ddd;
498     @include box-shadow(inset 0 0 10px 0 #ccc);
501 .fp-select .fp-thumbnail img {
502     border: 1px solid #ddd;
503     padding: 3px;
504     vertical-align: middle;
505     margin: 10px;
508 .fp-select .fp-fileinfo {
509     display: inline-block;
510     margin-top: 10px;
513 .file-picker.fp-select .fp-fileinfo {
514     max-width: 240px;
517 .fp-select .fp-fileinfo div {
518     padding-bottom: 5px;
521 .file-picker.fp-select .uneditable {
522     display: none;
525 .file-picker.fp-select .fp-select-loading {
526     display: none;
529 .file-picker.fp-select.loading .fp-select-loading {
530     display: block;
533 .file-picker.fp-select.loading form {
534     display: none;
537 .fp-select .fp-dimensions.fp-unknown {
538     display: none;
541 .fp-select .fp-size.fp-unknown {
542     display: none;
544 // File Manager
545 .filemanager-loading {
546     display: none;
549 .jsenabled .filemanager-loading {
550     display: block;
551     margin-top: 100px;
554 .filemanager.fm-loading .filemanager-toolbar,
555 .filemanager.fm-loading .fp-pathbar,
556 .filemanager.fm-loading .filemanager-container,
557 .filemanager.fm-loaded .filemanager-loading,
558 .filemanager.fm-maxfiles .fp-btn-add,
559 .filemanager.fm-maxfiles .dndupload-message,
560 .filemanager.fm-noitems .fp-btn-download,
561 .filemanager.fm-noitems .fp-btn-delete,
562 .filemanager .fm-empty-container,
563 .filemanager.fm-noitems .filemanager-container .fp-content {
564     display: none;
567 .filemanager .fp-img-downloading {
568     display: none;
569     padding-top: 7px;
572 .filemanager .filemanager-updating {
573     display: none;
574     text-align: center;
577 .filemanager.fm-updating .filemanager-updating {
578     display: block;
579     margin-top: 37px;
582 .filemanager.fm-updating .fm-content-wrapper,
583 .filemanager.fm-nomkdir .fp-btn-mkdir,
584 .fitem.disabled .filemanager .filemanager-toolbar,
585 .fitem.disabled .filemanager .fp-pathbar,
586 .fitem.disabled .filemanager .fp-restrictions,
587 .fitem.disabled .filemanager .fm-content-wrapper {
588     display: none;
590 // File Manager layout
591 .filemanager {
592     .fp-restrictions {
593         text-align: right;
594     }
597 .filemanager-toolbar {
598     padding: 4px;
599     overflow: hidden;
602 .filemanager .fp-pathbar.empty {
603     display: none;
606 .filepicker-filelist,
607 .filemanager-container {
608     min-height: 140px;
609     border: 1px solid $input-border-color;
612 .filemanager .fp-content {
613     overflow: auto;
614     max-height: 472px;
615     min-height: 157px;
618 .filemanager-container,
619 .filepicker-filelist {
620     overflow: hidden;
623 .file-picker .yui3-datatable-header {
624     /*rtl:raw:
625     text-align: right;
626     */
627     background: initial;
630 .fitem.disabled .filepicker-filelist,
631 .fitem.disabled .filemanager-container {
632     background-color: #ebebe4;
635 .fitem.disabled .fp-btn-choose {
636     color: $text-muted;
639 .fitem.disabled .filepicker-filelist .filepicker-filename {
640     display: none;
642 // Icon view (File Manager only)
643 .fp-iconview .fp-reficons1 {
644     position: absolute;
645     height: 100%;
646     width: 100%;
647     top: 0;
648     left: 0;
651 .fp-iconview .fp-reficons2 {
652     position: absolute;
653     height: 100%;
654     width: 100%;
655     top: 0;
656     left: 0;
659 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
660     background: url('[[pix:theme|fp/link]]') no-repeat;
661     /*rtl:raw:
662     transform: scaleX(-1);
663     */
664     /*rtl:ignore*/
665     background-position: bottom right;
666     background-size: 16px 16px;
669 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
670     background: url('[[pix:theme|fp/alias]]') no-repeat;
671     /*rtl:raw:
672     transform: scaleX(-1);
673     */
674     /*rtl:ignore*/
675     background-position: bottom left;
676     background-size: 16px 16px;
679 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
680     display: none;
683 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
684     background: url([[pix:s/dead]]) no-repeat;
685     background-position: center center;
687 // Table view (File Manager only)
688 .filemanager .yui3-datatable table {
689     border: 0 solid #bbb;
690     width: 100%;
693 /* Override YUI default styling */
694 /* stylelint-disable declaration-no-important */
695 .filemanager {
697     .yui3-datatable-header {
698         /*rtl:raw:
699         text-align: right;
700         */
701         background: #fff !important;
702         border-bottom: 1px solid #ccc !important;
703         border-left: 0 solid #fff !important;
704         color: #555 !important;
705     }
707     .yui3-datatable-odd .yui3-datatable-cell {
708         background-color: #f6f6f6 !important;
709         border-left: 0 solid #f6f6f6;
710     }
712     .yui3-datatable-even .yui3-datatable-cell {
713         background-color: #fff !important;
714         border-left: 0 solid #fff;
715     }
717 /* stylelint-enable */
719 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
720     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
721     height: 100%;
722     width: 100%;
723     /*rtl:raw:
724     transform: scaleX(-1);
725     */
726     position: absolute;
727     top: 8px;
728     left: 17px;
729     background-size: 16px 16px;
732 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
733     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
734     height: 100%;
735     width: 100%;
736     /*rtl:raw:
737     transform: scaleX(-1);
738     */
739     position: absolute;
740     top: 9px;
741     left: -6px;
742     background-size: 16px 16px;
744 // Folder Context Menu (File Manager only)
745 .filemanager .fp-contextmenu {
746     display: none;
749 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
750     position: absolute;
751     right: 0;
752     bottom: 0;
753     display: flex;
754     align-items: center;
755     justify-content: center;
758 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
759 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
760     display: inline;
761     position: absolute;
762     left: 14px;
763     margin-right: -20px;
764     top: 6px;
766 // Drag and drop support (filemanager and filepicker form elements)
767 .filepicker-filelist .filepicker-container,
768 .filemanager.fm-noitems .fm-empty-container {
769     display: block;
770     position: absolute;
771     top: 10px;
772     bottom: 10px;
773     left: 10px;
774     right: 10px;
775     border: 2px dashed #bbb;
776     padding-top: 85px;
777     text-align: center;
780 .filepicker-filelist .dndupload-target,
781 .filemanager-container .dndupload-target {
782     background: #fff;
783     position: absolute;
784     top: 10px;
785     bottom: 10px;
786     left: 10px;
787     right: 10px;
788     border: 2px dashed #fb7979;
789     padding-top: 85px;
790     text-align: center;
792     @include box-shadow(0 0 0 10px #fff);
795 .filepicker-filelist.dndupload-over .dndupload-target,
796 .filemanager-container.dndupload-over .dndupload-target {
797     background: #fff;
798     position: absolute;
799     top: 10px;
800     bottom: 10px;
801     left: 10px;
802     right: 10px;
803     border: 2px dashed #6c8cd3;
804     padding-top: 85px;
805     text-align: center;
808 .dndupload-message {
809     display: none;
812 .dndsupported .dndupload-message {
813     display: inline;
816 .dnduploadnotsupported-message {
817     display: none;
820 .dndnotsupported .dnduploadnotsupported-message {
821     display: inline;
824 .dndupload-target {
825     display: none;
828 .dndsupported .dndupload-ready .dndupload-target {
829     display: block;
832 .dndupload-uploadinprogress {
833     display: none;
834     text-align: center;
837 .dndupload-uploading .dndupload-uploadinprogress {
838     display: block;
841 .dndupload-arrow {
842     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
843     width: 100%;
844     height: 80px;
845     position: absolute;
846     top: 5px;
849 .fitem.disabled .filepicker-container,
850 .fitem.disabled .fm-empty-container {
851     display: none;
854 .dndupload-progressbars {
855     padding: 10px;
856     display: none;
859 .dndupload-inprogress .dndupload-progressbars {
860     display: block;
863 .dndupload-inprogress .fp-content {
864     display: none;
867 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
868     display: none;
871 .filepicker-filelist.dndupload-inprogress .filepicker-container {
872     display: none;
875 .filepicker-filelist.dndupload-inprogress a {
876     display: none;
878 // Select Dialogue (File Manager only)
879 .filemanager.fp-select .fp-select-loading {
880     display: none;
883 .filemanager.fp-select.loading .fp-select-loading {
884     display: block;
887 .filemanager.fp-select.loading form {
888     display: none;
891 .filemanager.fp-select.fp-folder .fp-license,
892 .filemanager.fp-select.fp-folder .fp-author,
893 .filemanager.fp-select.fp-file .fp-file-unzip,
894 .filemanager.fp-select.fp-folder .fp-file-unzip,
895 .filemanager.fp-select.fp-file .fp-file-zip,
896 .filemanager.fp-select.fp-zip .fp-file-zip {
897     display: none;
900 .filemanager.fp-select .fp-file-setmain,
901 .filemanager.fp-select .fp-file-setmain-help {
902     display: none;
905 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
906 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
907     display: inline-block;
910 .filemanager .fp-mainfile .fp-filename {
911     font-weight: bold;
914 .filemanager.fp-select.fp-folder .fp-file-download {
915     display: none;
917 // to be implemented
918 .fm-operation {
919     font-weight: bold;
922 .filemanager.fp-select .fp-original.fp-unknown,
923 .filemanager.fp-select .fp-original .fp-originloading {
924     display: none;
927 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
928     display: inline;
931 .filemanager.fp-select .fp-reflist.fp-unknown,
932 .filemanager.fp-select .fp-reflist .fp-reflistloading {
933     display: none;
936 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
937     display: inline;
940 .filemanager.fp-select .fp-reflist .fp-value {
941     background: #f9f9f9;
942     border: 1px solid #bbb;
943     padding: 8px 7px;
944     margin: 0;
945     max-height: 75px;
946     overflow: auto;
949 .filemanager.fp-select .fp-reflist .fp-value li {
950     padding-bottom: 7px;
952 // Create folder dialogue (File Manager only)
953 .filemanager.fp-mkdir-dlg {
954     text-align: center;
957 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
958     text-align: left;
959     margin: 20px;
961 // Confirm dialogue for delete (File Manager only)
962 .filemanager.fp-dlg {
963     text-align: center;
965 // file picker search dialog
966 .file-picker div.bd {
967     text-align: left;
970 // Upload form for file picker.
971 .fp-formset {
972     padding: 10px;
974     input[type="file"] {
975         line-height: inherit;
976     }
979 .fp-forminset {
980     padding: 0 10px;
983 .fp-fileinfo .fp-value {
984     display: inline-block;
985     padding-left: 5px;