.wbm-uploader-wrapper * { box-sizing:border-box; } .wbm-uploader-wrapper, .wbm-uploader, .wbm-uploader-progress, .wbm-uploader-progress-bar, .wbm-uploader-error, .wbm-uploader-uploads, .wbm-uploader-preview-container, .wbm-uploader-preview-container > * { position:relative; float:left; clear:both; width:100%; } .wbm-uploader { cursor:pointer; min-height:100px; background-color:#ebebeb; display:flex; align-items:center; justify-content:center; transition:background-color 200ms ease-out 0ms, border 200ms ease-out 0ms; border:2px transparent dashed; } .wbm-uploader.dragover { background-color:#D6D6D6; border:2px #ACACAC dashed; } .wbm-uploader .wbm-label-drag, .wbm-uploader .wbm-uploader-uploads, .wbm-uploader.dragover .wbm-label-default { display:none; } .wbm-uploader.uploading .wbm-uploader-uploads, .wbm-uploader.dragover .wbm-label-drag { display:block; } .wbm-uploader.uploading .wbm-label-default, .wbm-uploader.uploading .wbm-label-drag { display:none; } .wbm-uploader-progress { margin-top:10px; height:10px; } .wbm-uploader-progress-bar { position:absolute; left:0; top:0; bottom:0; width:0%; background-color:orange; } .wbm-uploader-error { text-align:center; color:red; font-style:italic; } .wbm-uploader-preview-container .wbm-uploader-preview-images, .wbm-uploader-preview-container .wbm-uploader-preview-files { display:grid; grid-gap:10px; margin-top:10px; display:none; } .wbm-uploader-preview-container .wbm-uploader-preview-files { grid-gap:5px; } .wbm-uploader-preview-container .wbm-uploader-preview-images { grid-template-columns:repeat(4,minmax(0, 1fr)) } .wbm-uploader-preview-container .wbm-uploader-preview-images > *, .wbm-uploader-preview-container .wbm-uploader-preview-files > * { transition:opacity 200ms ease-out 0ms; cursor:pointer; } .wbm-uploader-preview-container .wbm-uploader-preview-files > *::after { content:' \2715'; display:none; padding-left:10px; } @media(any-hover:hover) { .wbm-uploader-preview-container .wbm-uploader-preview-images > *:hover { opacity:0.8; } .wbm-uploader-preview-container .wbm-uploader-preview-files > *:hover::after { display:inline-block; }; }