.upload-kit .files { float: left; position: relative; padding: 0; margin: 0; } .upload-kit .upload-kit-input { width: 150px; height:150px } .upload-kit .upload-kit-input, .upload-kit .upload-kit-item { position: relative; color: #999999; border: 2px dashed #999999; border-radius: 7px; float: left; margin-right: 10px; margin-bottom: 10px; background-size: cover; background-position: center center; background-origin: border-box; list-style: none; } .upload-kit .upload-kit-input .progress, .upload-kit .upload-kit-item .progress, .upload-kit .upload-kit-input .add, .upload-kit .upload-kit-item .add, .upload-kit .upload-kit-input .remove, .upload-kit .upload-kit-item .remove { display: block; position: absolute; } .upload-kit .upload-kit-input .error-popover, .upload-kit .upload-kit-item .error-popover { color: #9b0014; position: absolute; bottom: 0; right: 0; z-index: 999; display: none; cursor: default; } .upload-kit .upload-kit-input input[type=file], .upload-kit .upload-kit-item input[type=file] { width: 100%; height: 100%; position: absolute; display: block; opacity: 0; cursor: pointer; z-index: 2; } .upload-kit .upload-kit-input .drag, .upload-kit .upload-kit-input .add { font-size: 3em; text-align: center; top: 50%; width: 100%; margin-top: -0.5em; } .upload-kit .upload-kit-input .progress { position: absolute; top: 50%; margin-top: -10px; margin-left: 5%; margin-right: 5%; width: 90%; display: none; } .upload-kit .upload-kit-input .drag { display: none; } .upload-kit .upload-kit-input.drag-highlight .add { display: none; } .upload-kit .upload-kit-input.drag-highlight .drag { display: block; } .upload-kit .upload-kit-input.in-progress .progress { display: block; } .upload-kit .upload-kit-input.in-progress .add { display: none; } .upload-kit .upload-kit-input.error .error-popover { display: inline-block; } .upload-kit .upload-kit-item.ui-sortable-helper .remove { display: none !important; } .upload-kit .upload-kit-item .remove { display: none; cursor: pointer; font-size: 1.5em; text-align: center; top: 0; right: 0; width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.8); padding: 4px; border-radius: 5px; color: #FFF; } .upload-kit .upload-kit-item.image > img { height: 100%; width: auto; border-radius: 7px; } .upload-kit .upload-kit-item.not-image { background-image: url('file.png'); background-size: 75%; background-repeat: no-repeat; position: relative; display: block; width: 150px; height:150px; } .upload-kit .upload-kit-item.not-image .name { text-align: center; text-transform: uppercase; vertical-align: middle; display: block; position: absolute; padding: 5px 7px; width: 146px; color: #fff; bottom: 0; background-color: rgba(0, 0, 0, 0.8); font-weight: bolder; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 0 0 7px 7px; } .upload-kit .upload-kit-item.done:hover .remove { display: block; } .upload-kit:before, .upload-kit:after { content: " "; display: table; } .upload-kit:after { clear: both; } .single-media .upload-kit-input { height: 150px; width: 150px; } .single-media .upload-kit-item { margin:0; } .single-media .upload-kit-item.image > img { height: 100%; width: 100%; border-radius: 7px; }