MDL-69395 theme_boost: improve colour contrast for form input fields
[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     background: initial;
627 .fitem.disabled .filepicker-filelist,
628 .fitem.disabled .filemanager-container {
629     background-color: #ebebe4;
632 .fitem.disabled .fp-btn-choose {
633     color: $text-muted;
636 .fitem.disabled .filepicker-filelist .filepicker-filename {
637     display: none;
639 // Icon view (File Manager only)
640 .fp-iconview .fp-reficons1 {
641     position: absolute;
642     height: 100%;
643     width: 100%;
644     top: 0;
645     left: 0;
648 .fp-iconview .fp-reficons2 {
649     position: absolute;
650     height: 100%;
651     width: 100%;
652     top: 0;
653     left: 0;
656 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
657     background: url('[[pix:theme|fp/link]]') no-repeat;
658     /*rtl:raw:
659     transform: scaleX(-1);
660     */
661     /*rtl:ignore*/
662     background-position: bottom right;
663     background-size: 16px 16px;
666 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
667     background: url('[[pix:theme|fp/alias]]') no-repeat;
668     /*rtl:raw:
669     transform: scaleX(-1);
670     */
671     /*rtl:ignore*/
672     background-position: bottom left;
673     background-size: 16px 16px;
676 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
677     display: none;
680 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
681     background: url([[pix:s/dead]]) no-repeat;
682     background-position: center center;
684 // Table view (File Manager only)
685 .filemanager .yui3-datatable table {
686     border: 0 solid #bbb;
687     width: 100%;
690 /* Override YUI default styling */
691 /* stylelint-disable declaration-no-important */
692 .filemanager {
694     .yui3-datatable-header {
695         background: #fff !important;
696         border-bottom: 1px solid #ccc !important;
697         border-left: 0 solid #fff !important;
698         color: #555 !important;
699     }
701     .yui3-datatable-odd .yui3-datatable-cell {
702         background-color: #f6f6f6 !important;
703         border-left: 0 solid #f6f6f6;
704     }
706     .yui3-datatable-even .yui3-datatable-cell {
707         background-color: #fff !important;
708         border-left: 0 solid #fff;
709     }
711 /* stylelint-enable */
713 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
714     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
715     height: 100%;
716     width: 100%;
717     /*rtl:raw:
718     transform: scaleX(-1);
719     */
720     position: absolute;
721     top: 8px;
722     left: 17px;
723     background-size: 16px 16px;
726 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
727     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
728     height: 100%;
729     width: 100%;
730     /*rtl:raw:
731     transform: scaleX(-1);
732     */
733     position: absolute;
734     top: 9px;
735     left: -6px;
736     background-size: 16px 16px;
738 // Folder Context Menu (File Manager only)
739 .filemanager .fp-contextmenu {
740     display: none;
743 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
744     position: absolute;
745     right: 0;
746     bottom: 0;
747     display: flex;
748     align-items: center;
749     justify-content: center;
752 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
753 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
754     display: inline;
755     position: absolute;
756     left: 14px;
757     margin-right: -20px;
758     top: 6px;
760 // Drag and drop support (filemanager and filepicker form elements)
761 .filepicker-filelist .filepicker-container,
762 .filemanager.fm-noitems .fm-empty-container {
763     display: block;
764     position: absolute;
765     top: 10px;
766     bottom: 10px;
767     left: 10px;
768     right: 10px;
769     border: 2px dashed #bbb;
770     padding-top: 85px;
771     text-align: center;
774 .filepicker-filelist .dndupload-target,
775 .filemanager-container .dndupload-target {
776     background: #fff;
777     position: absolute;
778     top: 10px;
779     bottom: 10px;
780     left: 10px;
781     right: 10px;
782     border: 2px dashed #fb7979;
783     padding-top: 85px;
784     text-align: center;
786     @include box-shadow(0 0 0 10px #fff);
789 .filepicker-filelist.dndupload-over .dndupload-target,
790 .filemanager-container.dndupload-over .dndupload-target {
791     background: #fff;
792     position: absolute;
793     top: 10px;
794     bottom: 10px;
795     left: 10px;
796     right: 10px;
797     border: 2px dashed #6c8cd3;
798     padding-top: 85px;
799     text-align: center;
802 .dndupload-message {
803     display: none;
806 .dndsupported .dndupload-message {
807     display: inline;
810 .dnduploadnotsupported-message {
811     display: none;
814 .dndnotsupported .dnduploadnotsupported-message {
815     display: inline;
818 .dndupload-target {
819     display: none;
822 .dndsupported .dndupload-ready .dndupload-target {
823     display: block;
826 .dndupload-uploadinprogress {
827     display: none;
828     text-align: center;
831 .dndupload-uploading .dndupload-uploadinprogress {
832     display: block;
835 .dndupload-arrow {
836     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
837     width: 100%;
838     height: 80px;
839     position: absolute;
840     top: 5px;
843 .fitem.disabled .filepicker-container,
844 .fitem.disabled .fm-empty-container {
845     display: none;
848 .dndupload-progressbars {
849     padding: 10px;
850     display: none;
853 .dndupload-inprogress .dndupload-progressbars {
854     display: block;
857 .dndupload-inprogress .fp-content {
858     display: none;
861 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
862     display: none;
865 .filepicker-filelist.dndupload-inprogress .filepicker-container {
866     display: none;
869 .filepicker-filelist.dndupload-inprogress a {
870     display: none;
872 // Select Dialogue (File Manager only)
873 .filemanager.fp-select .fp-select-loading {
874     display: none;
877 .filemanager.fp-select.loading .fp-select-loading {
878     display: block;
881 .filemanager.fp-select.loading form {
882     display: none;
885 .filemanager.fp-select.fp-folder .fp-license,
886 .filemanager.fp-select.fp-folder .fp-author,
887 .filemanager.fp-select.fp-file .fp-file-unzip,
888 .filemanager.fp-select.fp-folder .fp-file-unzip,
889 .filemanager.fp-select.fp-file .fp-file-zip,
890 .filemanager.fp-select.fp-zip .fp-file-zip {
891     display: none;
894 .filemanager.fp-select .fp-file-setmain,
895 .filemanager.fp-select .fp-file-setmain-help {
896     display: none;
899 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
900 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
901     display: inline-block;
904 .filemanager .fp-mainfile .fp-filename {
905     font-weight: bold;
908 .filemanager.fp-select.fp-folder .fp-file-download {
909     display: none;
911 // to be implemented
912 .fm-operation {
913     font-weight: bold;
916 .filemanager.fp-select .fp-original.fp-unknown,
917 .filemanager.fp-select .fp-original .fp-originloading {
918     display: none;
921 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
922     display: inline;
925 .filemanager.fp-select .fp-reflist.fp-unknown,
926 .filemanager.fp-select .fp-reflist .fp-reflistloading {
927     display: none;
930 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
931     display: inline;
934 .filemanager.fp-select .fp-reflist .fp-value {
935     background: #f9f9f9;
936     border: 1px solid #bbb;
937     padding: 8px 7px;
938     margin: 0;
939     max-height: 75px;
940     overflow: auto;
943 .filemanager.fp-select .fp-reflist .fp-value li {
944     padding-bottom: 7px;
946 // Create folder dialogue (File Manager only)
947 .filemanager.fp-mkdir-dlg {
948     text-align: center;
951 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
952     text-align: left;
953     margin: 20px;
955 // Confirm dialogue for delete (File Manager only)
956 .filemanager.fp-dlg {
957     text-align: center;
959 // file picker search dialog
960 .file-picker div.bd {
961     text-align: left;
964 // Upload form for file picker.
965 .fp-formset {
966     padding: 10px;
968     input[type="file"] {
969         line-height: inherit;
970     }
973 .fp-forminset {
974     padding: 0 10px;
977 .fp-fileinfo .fp-value {
978     display: inline-block;
979     padding-left: 5px;