.field-fileupload .upload-object { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; outline: none; overflow: hidden; display: inline-block; vertical-align: top; } .field-fileupload .upload-object img { width: 100%; height: 100%; } .field-fileupload .upload-object .icon-container { display: table; opacity: .6; } .field-fileupload .upload-object .icon-container i { color: #95a5a6; display: inline-block; } .field-fileupload .upload-object .icon-container div { display: table-cell; text-align: center; vertical-align: middle; } .field-fileupload .upload-object .icon-container.image > div.icon-wrapper { display: none; } .field-fileupload .upload-object h4 { font-weight: 600; font-size: 13px; color: #2b3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 150%; margin: 15px 0 5px 0; padding-right: 0; -webkit-transition: padding 0.1s; transition: padding 0.1s; position: relative; } .field-fileupload .upload-object h4 a { position: absolute; right: 0; top: 0; display: none; font-weight: 400; } .field-fileupload .upload-object p.size { font-size: 12px; color: #95a5a6; } .field-fileupload .upload-object p.size strong { font-weight: 400; } .field-fileupload .upload-object .meta .drag-handle { position: absolute; bottom: 0; right: 0; cursor: move; display: block; } .field-fileupload .upload-object .info h4 a, .field-fileupload .upload-object .meta a.upload-remove-button, .field-fileupload .upload-object .meta a.drag-handle { color: #2b3e50; display: none; font-size: 15px; text-decoration: none; } .field-fileupload .upload-object .icon-container { position: relative; } .field-fileupload .upload-object .icon-container:after { background-image: url('../../../../../system/assets/ui/images/loader-transparent.svg'); position: absolute; content: ' '; width: 40px; height: 40px; left: 50%; top: 50%; margin-top: -20px; 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 .upload-object.is-success .icon-container { opacity: 1; } .field-fileupload .upload-object.is-success .icon-container:after { opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .field-fileupload .upload-object.is-error .icon-container:after { content: ""; background: none; font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; content: "\f071"; -webkit-animation: none; animation: none; font-size: 40px; color: #ab2a1c; margin-top: -20px; margin-left: -20px; text-shadow: 2px 2px 0 #fff; } .field-fileupload .upload-object.is-loading .icon-container { opacity: .6; } .field-fileupload .upload-object.is-loading .icon-container:after { opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .field-fileupload .upload-object.is-success { cursor: pointer; } .field-fileupload .upload-object.is-success .progress-bar { opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .field-fileupload .upload-object.is-success:hover h4 a, .field-fileupload .upload-object.is-success:hover .meta .upload-remove-button, .field-fileupload .upload-object.is-success:hover .meta .drag-handle { display: block; } .field-fileupload .upload-object.is-error { cursor: pointer; } .field-fileupload .upload-object.is-error .icon-container { opacity: 1; } .field-fileupload .upload-object.is-error .icon-container > img, .field-fileupload .upload-object.is-error .icon-container > i { opacity: .5; } .field-fileupload .upload-object.is-error .info h4 { color: #ab2a1c; } .field-fileupload .upload-object.is-error .info h4 a { display: none; } .field-fileupload .upload-object.is-error .meta { display: none; } .field-fileupload.is-sortable { position: relative; } .field-fileupload.is-sortable .upload-placeholder { position: relative; border: 1px dotted #e0e0e0 !important; } .field-fileupload.is-sortable .upload-object.dragged { position: absolute; opacity: 0.5; filter: alpha(opacity=50); z-index: 2000; } .field-fileupload.is-sortable .upload-object.dragged .uploader-toolbar { display: none; } @media (max-width: 1024px) { .field-fileupload .upload-object.is-success h4 a, .field-fileupload .upload-object.is-success .meta .upload-remove-button, .field-fileupload .upload-object.is-success .meta .drag-handle { display: block !important; } } .fileupload-config-form .fileupload-url-button { padding-left: 0; } .fileupload-config-form .fileupload-url-button > i { color: #666; } .fileupload-config-form .file-upload-modal-image-header { background-color: #FEFEFE; background-image: -webkit-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -webkit-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); background-image: -moz-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -moz-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); background-image: -o-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -o-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); background-image: -ms-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -ms-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; background-size: 20px 20px; background-position: 0 0, 10px 10px; } .fileupload-config-form .file-upload-modal-image-header, .fileupload-config-form .file-upload-modal-image-header img { border-top-right-radius: 2px; border-top-left-radius: 2px; } .fileupload-config-form .file-upload-modal-image-header .close { position: absolute; top: 20px; right: 20px; } .field-fileupload.style-image-multi .upload-button, .field-fileupload.style-image-multi .upload-object { margin: 0 10px 10px 0; } .field-fileupload.style-image-multi .upload-button { display: block; float: left; border: 2px dotted rgba(0, 0, 0, 0.1); position: relative; outline: none; width: 76px; height: 76px; } .field-fileupload.style-image-multi .upload-button table { position: absolute; height: 100%; width: 100%; } .field-fileupload.style-image-multi .upload-button table td { line-height: 16px; font-size: 11px; vertical-align: middle; height: 100%; } .field-fileupload.style-image-multi .upload-button 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.style-image-multi .upload-button table td span { display: block; padding: 10px; text-align: center; } .field-fileupload.style-image-multi .upload-button:hover { border: 2px dotted rgba(0, 0, 0, 0.2); } .field-fileupload.style-image-multi .upload-button:hover table td:before { color: #5cb85c; color: rgba(0, 0, 0, 0.2); } .field-fileupload.style-image-multi .upload-button:focus { border: 2px solid rgba(0, 0, 0, 0.3); background: transparent; } .field-fileupload.style-image-multi .upload-button:focus table td:before { color: #5cb85c; color: rgba(0, 0, 0, 0.2); } .field-fileupload.style-image-multi .upload-files-container { margin-left: 90px; } .field-fileupload.style-image-multi .upload-object { background: #fff; border: 1px solid #ecf0f1; width: 260px; } .field-fileupload.style-image-multi .upload-object .progress-bar { display: block; width: 100%; overflow: hidden; height: 5px; 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); position: absolute; bottom: 10px; left: 0; } .field-fileupload.style-image-multi .upload-object .progress-bar .upload-progress { float: left; width: 0%; height: 100%; line-height: 5px; color: #ffffff; background-color: #5fb6f5; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } .field-fileupload.style-image-multi .upload-object .icon-container { border-right: 1px solid #f6f8f9; float: left; display: inline-block; overflow: hidden; width: 75px; height: 75px; } .field-fileupload.style-image-multi .upload-object .icon-container i { font-size: 35px; } .field-fileupload.style-image-multi .upload-object .icon-container.image img { border-bottom-left-radius: 3px; border-top-left-radius: 3px; width: auto; } .field-fileupload.style-image-multi .upload-object .info { margin-left: 90px; } .field-fileupload.style-image-multi .upload-object .info h4 { padding-right: 15px; } .field-fileupload.style-image-multi .upload-object .info h4 a { right: 15px; } .field-fileupload.style-image-multi .upload-object .meta { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 15px 0 90px; } .field-fileupload.style-image-multi .upload-object .meta a.drag-handle { bottom: 15px; } .field-fileupload.style-image-multi .upload-object.upload-placeholder { height: 75px; background-color: transparent; } .field-fileupload.style-image-multi .upload-object.upload-placeholder:after { opacity: 0; } .field-fileupload.style-image-multi .upload-object:hover { background: #4da7e8 !important; } .field-fileupload.style-image-multi .upload-object:hover i, .field-fileupload.style-image-multi .upload-object:hover p.size { color: #ecf0f1; } .field-fileupload.style-image-multi .upload-object:hover h4 { color: white; } .field-fileupload.style-image-multi .upload-object:hover .icon-container { border-right-color: #4da7e8 !important; } .field-fileupload.style-image-multi .upload-object:hover h4 { padding-right: 35px; } @media (max-width: 1280px) { .field-fileupload.style-image-multi .upload-object { width: 230px; } } @media (max-width: 1024px) { .field-fileupload.style-image-multi .upload-button { width: 100%; } .field-fileupload.style-image-multi .upload-files-container { margin-left: 0; } .field-fileupload.style-image-multi .upload-object { margin-right: 0; display: block; width: auto; } } .field-fileupload.style-image-single.is-populated .upload-button { display: none; } .field-fileupload.style-image-single .upload-button { display: block; float: left; border: 2px dotted rgba(0, 0, 0, 0.1); position: relative; outline: none; } .field-fileupload.style-image-single .upload-button table { position: absolute; height: 100%; width: 100%; } .field-fileupload.style-image-single .upload-button table td { line-height: 16px; font-size: 11px; vertical-align: middle; height: 100%; } .field-fileupload.style-image-single .upload-button 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.style-image-single .upload-button table td span { display: block; padding: 10px; text-align: center; } .field-fileupload.style-image-single .upload-button:hover { border: 2px dotted rgba(0, 0, 0, 0.2); } .field-fileupload.style-image-single .upload-button:hover table td:before { color: #5cb85c; color: rgba(0, 0, 0, 0.2); } .field-fileupload.style-image-single .upload-button:focus { border: 2px solid rgba(0, 0, 0, 0.3); background: transparent; } .field-fileupload.style-image-single .upload-button:focus table td:before { color: #5cb85c; color: rgba(0, 0, 0, 0.2); } .field-fileupload.style-image-single .upload-button, .field-fileupload.style-image-single .upload-button > table { min-height: 100px; min-width: 100px; } .field-fileupload.style-image-single .upload-object { padding-bottom: 66px; } .field-fileupload.style-image-single .upload-object .icon-container { border: 1px solid #f6f8f9; background: rgba(255, 255, 255, 0.5); } .field-fileupload.style-image-single .upload-object .icon-container.image img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: block; max-width: 100%; height: auto; } .field-fileupload.style-image-single .upload-object .progress-bar { display: block; width: 100%; overflow: hidden; height: 5px; 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); position: absolute; bottom: 10px; left: 0; } .field-fileupload.style-image-single .upload-object .progress-bar .upload-progress { float: left; width: 0%; height: 100%; line-height: 5px; color: #ffffff; background-color: #5fb6f5; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } .field-fileupload.style-image-single .upload-object .info { position: absolute; left: 0; right: 0; bottom: 0; height: 66px; } .field-fileupload.style-image-single .upload-object .meta { position: absolute; bottom: 65px; left: 0; right: 0; margin: 0 15px; } .field-fileupload.style-image-single .upload-object:hover h4 { padding-right: 20px; } @media (max-width: 1024px) { .field-fileupload.style-image-single .upload-object h4 { padding-right: 20px !important; } } .field-fileupload.style-file-multi .upload-button { margin-bottom: 10px; } .field-fileupload.style-file-multi .upload-files-container { border: 1px solid #eeeeee; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border-bottom: none; display: none; } .field-fileupload.style-file-multi.is-populated .upload-files-container { display: block; } .field-fileupload.style-file-multi .upload-object { display: block; width: 100%; border-bottom: 1px solid #eeeeee; padding-left: 10px; } .field-fileupload.style-file-multi .upload-object:nth-child(even) { background-color: #f5f5f5; } .field-fileupload.style-file-multi .upload-object .icon-container { position: absolute; top: 0; left: 10px; width: 15px; padding: 11px 7px; } .field-fileupload.style-file-multi .upload-object .icon-container i { line-height: 150%; font-size: 15px; } .field-fileupload.style-file-multi .upload-object .icon-container img { display: none; } .field-fileupload.style-file-multi .upload-object .info { margin-left: 35px; margin-right: 15%; } .field-fileupload.style-file-multi .upload-object .info h4, .field-fileupload.style-file-multi .upload-object .info p { margin: 0; padding: 11px 0; font-size: 12px; font-weight: normal; line-height: 150%; color: #666666; } .field-fileupload.style-file-multi .upload-object .info h4 { padding-right: 15px; } .field-fileupload.style-file-multi .upload-object .info h4 a { padding: 10px 0; right: 15px; } .field-fileupload.style-file-multi .upload-object .info p.size { position: absolute; top: 0; right: 0; width: 15%; display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .field-fileupload.style-file-multi .upload-object .progress-bar { display: block; width: 100%; overflow: hidden; height: 5px; 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); position: absolute; top: 18px; left: 0; } .field-fileupload.style-file-multi .upload-object .progress-bar .upload-progress { float: left; width: 0%; height: 100%; line-height: 5px; color: #ffffff; background-color: #5fb6f5; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } .field-fileupload.style-file-multi .upload-object .meta { position: absolute; top: 0; right: 0; margin-right: 15px; width: 15%; } .field-fileupload.style-file-multi .upload-object .meta a.drag-handle { top: 0; bottom: auto; line-height: 150%; padding: 10px 0; } .field-fileupload.style-file-multi .upload-object .icon-container:after { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; background-size: 20px 20px; } .field-fileupload.style-file-multi .upload-object.is-error .icon-container:after { font-size: 20px; } .field-fileupload.style-file-multi .upload-object.is-success .info p.size { display: block; } .field-fileupload.style-file-multi .upload-object.upload-placeholder { height: 35px; background-color: transparent; } .field-fileupload.style-file-multi .upload-object.upload-placeholder:after { opacity: 0; } .field-fileupload.style-file-multi .upload-object:hover { background: #4da7e8 !important; } .field-fileupload.style-file-multi .upload-object:hover i, .field-fileupload.style-file-multi .upload-object:hover p.size { color: #ecf0f1; } .field-fileupload.style-file-multi .upload-object:hover h4 { color: white; } .field-fileupload.style-file-multi .upload-object:hover .icon-container { border-right-color: #4da7e8 !important; } .field-fileupload.style-file-multi .upload-object:hover h4 { padding-right: 35px; } @media (max-width: 1024px) { .field-fileupload.style-file-multi .upload-object h4 { padding-right: 35px !important; } .field-fileupload.style-file-multi .info { margin-right: 25% !important; } .field-fileupload.style-file-multi .info p.size { width: 25% !important; padding-right: 35px !important; } .field-fileupload.style-file-multi .meta { width: 25% !important; } } .field-fileupload.style-file-single { background-color: #ffffff; border: 1px solid #e0e0e0; overflow: hidden; position: relative; padding-right: 30px; } .field-fileupload.style-file-single .upload-button { position: absolute; top: 50%; margin-top: -44px; height: 88px; background: transparent; right: -2px; color: #595959; } .field-fileupload.style-file-single .upload-button i { font-size: 14px; } .field-fileupload.style-file-single .upload-button:hover { color: #333333; } .field-fileupload.style-file-single .upload-empty-message { padding: 10px 0 10px 11px; font-size: 13px; } .field-fileupload.style-file-single.is-populated .upload-empty-message { display: none; } .field-fileupload.style-file-single .upload-object { display: block; width: 100%; padding: 8px 0 10px 0; } .field-fileupload.style-file-single .upload-object .icon-container { position: absolute; top: 0; left: 0; width: 15px; padding: 0 5px; margin: 8px 0 0 7px; text-align: center; } .field-fileupload.style-file-single .upload-object .icon-container i { line-height: 150%; font-size: 15px; } .field-fileupload.style-file-single .upload-object .icon-container img { display: none; } .field-fileupload.style-file-single .upload-object .info { margin-left: 34px; margin-right: 15%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .field-fileupload.style-file-single .upload-object .info h4, .field-fileupload.style-file-single .upload-object .info p { display: inline; margin: 0; padding: 0; font-size: 12px; line-height: 150%; color: #666666; } .field-fileupload.style-file-single .upload-object .info p.size { font-weight: normal; } .field-fileupload.style-file-single .upload-object .info p.size:before { content: " - "; } .field-fileupload.style-file-single .upload-object .progress-bar { display: block; width: 100%; overflow: hidden; height: 5px; 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); position: absolute; top: 50%; margin-top: -2px; right: 5px; } .field-fileupload.style-file-single .upload-object .progress-bar .upload-progress { float: left; width: 0%; height: 100%; line-height: 5px; color: #ffffff; background-color: #5fb6f5; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } .field-fileupload.style-file-single .upload-object .meta { position: absolute; top: 50%; margin-top: -44px; height: 88px; right: 0; width: 15%; } .field-fileupload.style-file-single .upload-object .meta .upload-remove-button { position: absolute; top: 50%; right: 0; height: 20px; margin-top: -10px; margin-right: 10px; } .field-fileupload.style-file-single .upload-object .icon-container:after { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; background-size: 20px 20px; } .field-fileupload.style-file-single .upload-object.is-error .icon-container:after { font-size: 20px; }