/* - image preview */ .um .um-single-image-preview, .um .um-single-file-preview { margin-bottom: 20px; } .um .um-single-image-preview > img { max-height: 300px; display: inline-block; overflow: hidden; margin: auto; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .um-single-image-preview, .um-single-file-preview { display: none; text-align: center; position: relative; } .um-single-image-preview.show, .um-single-file-preview.show {display: block} .um-single-image-preview > img { max-width: 100%; max-height: inherit; } .um-single-image-preview a.cancel, .um-single-file-preview a.cancel { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; -moz-border-radius: 999px; -webkit-border-radius: 999px; border-radius: 999px; background: #ddd; cursor: pointer; text-decoration: none !important; z-index: 666; opacity: 0.75; } .um-single-image-preview a.cancel i, .um-single-file-preview a.cancel i { font-size: 16px; color: #888; position: relative; display: block; width: 100%; height: 100%; line-height: 30px; overflow: hidden; } .um-single-image-preview a.cancel i:before, .um-single-file-preview a.cancel i:before{line-height:inherit} /* - file info */ .um-single-fileinfo { padding: 26px 0 20px 0; display: inline-block; max-width: 100%; } .um-single-fileinfo span.icon { font-size: 40px; display: inline-block; width: 100px; height: 70px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #666; color: #fff !important; } .um-single-fileinfo span.icon i { display: block; height: 70px; line-height: 70px; overflow: hidden; } .um-single-fileinfo span.icon i:before{line-height:inherit} .um-single-fileinfo span.filename { display: block; font-size: 16px; color: #888; padding-top: 5px; } .um-single-fileinfo a { text-decoration: none !important; opacity: 0.9; } .um-single-fileinfo a:hover { opacity: 1 } /* - upload progress */ div.um-modal .upload-statusbar { margin: 20px 0 0 0; } div.um-modal .upload-filename { display: none !important; } div.um-modal .upload-progress { position: relative; width: 100%; box-sizing: border-box; } div.um-modal .upload-bar { width: 0; height: 10px; color: #666; background: #7ACF58; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* - drag and drop area */ div.um-modal .ajax-upload-dragdrop { width: 100%; text-align: center; vertical-align:middle; padding: 20px; box-sizing: border-box; border: 2px dashed #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 18px; line-height: 1em; } div.um-modal .ajax-upload-dragdrop span.str { display: block; margin: 0 0 15px 0; } div.um-modal .ajax-upload-dragdrop span.icon { display: block; font-size: 80px; line-height: 80px; vertical-align: middle; margin-bottom: 10px; } div.um-modal .ajax-upload-dragdrop span.help { display: block; font-size: 14px; color: #aaa; margin: 0 0 12px 0; } /* - upload button */ div.um-modal .upload { cursor: pointer !important; line-height: 34px !important; height: 34px; display: inline-block; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 0 20px; color: #fff; vertical-align: middle; font-size: 14px; box-sizing: border-box; transition: 0.2s; } div.um-modal .upload:hover { background: #44b0ec; } .um-modal input[type="file"]::-webkit-file-upload-button { cursor: pointer }