.field-fileupload .attachment-input { position: absolute; visibility: hidden; width: 10px; opacity: 0; } .field-fileupload .attachment-item { position: relative; } .field-fileupload .image-multi ul, .field-fileupload .file-multi ul { padding: 0; margin: 0; } .field-fileupload .image-multi ul:before, .field-fileupload .file-multi ul:before, .field-fileupload .image-multi ul:after, .field-fileupload .file-multi ul:after { content: " "; display: table; } .field-fileupload .image-multi ul:after, .field-fileupload .file-multi ul:after { clear: both; } .field-fileupload .image-multi ul li, .field-fileupload .file-multi ul li { list-style: none; float: left; margin-right: 35px; margin-bottom: 15px; } .field-fileupload .file-multi .attachment-item, .field-fileupload .file-single.attachment-item { width: 100px; height: 100px; } .field-fileupload .active-image, .field-fileupload .active-file { display: block; height: 100%; width: 100%; border: 1px solid #e0e0e0; background: white; position: relative; outline: none; overflow: hidden; padding: 5px; } .field-fileupload .active-image .caption, .field-fileupload .active-file .caption { position: absolute; bottom: 0; font-size: 11px; background: rgba(0, 0, 0, 0.05); color: #999; padding: 2px 5px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .field-fileupload .active-image img { width: 100%; height: 100%; } .field-fileupload .active-file { padding: 0; } .field-fileupload .active-file .file-icon { position: absolute; top: 7px; left: 0; width: 100%; text-align: center; } .field-fileupload .active-file .file-icon i { font-size: 64px; color: #444; } .field-fileupload .active-file .file-icon b { position: absolute; left: 0; bottom: 10px; color: #FFF; display: block; width: 100%; font-size: 12px; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; text-align: center; text-indent: 12px; } .field-fileupload .uploader-toolbar { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; height: 100%; background: #e0e0e0; position: absolute; top: 0; right: -20px; width: 20px; } .field-fileupload .uploader-toolbar h3, .field-fileupload .uploader-toolbar p { display: none; } .field-fileupload .uploader-toolbar a { text-decoration: none; display: block; padding: 3px 0 0 7px; color: #999; font-size: 15px; margin-left: -4px; text-align: center; } .field-fileupload .uploader-toolbar a:hover { color: #666; } .field-fileupload .uploader-toolbar a.uploader-file-link { display: none; } .field-fileupload .no-attachment { display: block; height: 100%; width: 100%; border: 2px dotted #e0e0e0; position: relative; outline: none; } .field-fileupload .no-attachment table { position: absolute; height: 100%; width: 100%; } .field-fileupload .no-attachment table td { line-height: 16px; font-size: 11px; vertical-align: middle; height: 100%; } .field-fileupload .no-attachment table td:before { text-align: center; width: 100%; display: block; font-size: 22px; color: rgba(0, 0, 0, 0.1); vertical-align: middle; } .field-fileupload .no-attachment table td span { display: block; padding: 10px; text-align: center; } .field-fileupload .no-attachment:hover { /*background: #ffffdd;*/ border: 2px dotted rgba(0, 0, 0, 0.1); } .field-fileupload .no-attachment:focus { border: 2px solid #ccc; background: transparent; } .field-fileupload .uploader-progress { position: relative; top: -7px; } .field-fileupload .uploader-progress { margin: 0 2px; visibility: hidden; overflow: hidden; height: 5px; margin-bottom: 20px; background-color: #f5f5f5; border-radius: 2px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .field-fileupload .uploader-progress .progress-bar { line-height: 5px; color: #ffffff; background-color: #ccc; -webkit-box-shadow: none; box-shadow: none; } .field-fileupload .loading img, .field-fileupload .loading .file-icon { opacity: 0.5; filter: alpha(opacity=50); } .field-fileupload .loading .uploader-loading { background-image: url(../../../../assets/images/loading-indicator-transparent.svg); position: absolute; content: ' '; width: 40px; height: 40px; left: 50%; top: 50%; margin-top: -22.5px; margin-left: -20px; display: block; background-size: 40px 40px; background-position: 50% 50%; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .field-fileupload .loading .no-attachment { cursor: default; border: 2px solid #ccc; } .field-fileupload .loading .no-attachment table td:before { display: none; } .field-fileupload .loading .uploader-progress { visibility: visible; } .field-fileupload.is-sortable li.placeholder { position: relative; border: 2px dotted #e0e0e0; } .field-fileupload.is-sortable li.dragged { position: absolute; opacity: 0.5; filter: alpha(opacity=50); z-index: 2000; } .field-fileupload.is-sortable li.dragged .uploader-toolbar { display: none; } .form-sidebar .field-fileupload .image-multi { margin-right: -5px; } .form-sidebar .field-fileupload .image-multi ul li { margin-right: 5px; margin-bottom: 5px; } html:not(.touch) .image-multi ul li, html:not(.touch) .file-multi ul li { margin-right: 15px; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar { top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar a { display: inline-block; text-align: left; padding: 0 0 5px 6px; font-size: 16px; color: #808b93; margin-left: 5px; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar a:before { margin-right: 0; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar a:hover { color: #0181b9; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar a.uploader-remove { position: absolute; right: 5px; top: 1px; font-size: 13px; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar a.uploader-remove:hover { color: #c73f26; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar a.uploader-file-link { display: inline-block; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar div.controls { position: absolute; bottom: 0; left: 0; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar h3, html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar p { display: block; padding: 15px 13px 0; color: #7e8c8d; margin-top: 0; line-height: 140%; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar h3 { word-wrap: break-word; font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar p { font-size: 11px; padding-top: 0; white-space: normal; position: absolute; top: 35px; bottom: 20px; width: 100%; opacity: 0.8; filter: alpha(opacity=80); } html:not(.touch) .field-fileupload .attachment-item .uploader-toolbar p abbr { border-bottom: none; } html:not(.touch) .field-fileupload .attachment-item:hover .uploader-toolbar { opacity: 1; filter: alpha(opacity=100); }