@charset "UTF-8"; .osc-uploader, .osc-uploader * { margin: 0; padding: 0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .osc-uploader { position: relative; display: inline-block; } .osc-uploader .browser-btn { position: relative; direction: ltr; text-decoration: none; cursor: pointer; border: 0; overflow: hidden; } .osc-uploader .browser-btn input+div { background: linear-gradient(to top, #eee, #f5f5f5); border: 1px solid #ccc; padding: 8px 20px; border-radius: 2px; box-shadow: inset 0 1px #fff, 0 1px rgba(0,0,0,.05); margin-bottom: 1px; text-shadow: 0 1px #fff; } .osc-uploader .browser-btn input:hover+div { background: linear-gradient(to top, #e9e9e9, #f0f0f0); border: 1px solid #bbb; } .osc-uploader .browser-btn input:active+div { background: linear-gradient(to top, #f0f0f0, #e9e9e9); border: 1px solid #bbb; } .osc-uploader input[type="file"] { position: absolute; right: 0; top: 0; font-family: arial; font-size: 118px; margin: 0; padding: 0; cursor: pointer; opacity: 0; width: 100%; height: 100%; } .osc-uploader .drag-drop-area { display: none; position: relative; padding: 8px 20px; background: #fff; border: 1px solid #fae1e1; border-radius: 2px; color: #ffc5c7; } .osc-uploader .drag-drop-area:after { content: ''; display: block; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border: 1px dashed #fae1e1; box-sizing: border-box; border-radius: 2px; } .osc-uploader.drag-entered .drag-drop-area:after { border: 1px solid #fae1e1; } .osc-uploader.drag-entered .drag-drop-area { color: #ffc5c7; } .osc-uploader.dragdrop-active .drag-drop-area { display: block; } .osc-uploader.dragdrop-active .browser-btn { display: none; } .uploader-progress-bar { height: 8px; background: #fff; border: 1px solid #2ca7e8; position: relative; box-sizing: border-box; } .uploader-progress-bar > div { position: absolute; top: 0; left: 0; height: 100%; background: #39baff; } [data-uploader-step="process"] .uploader-progress-bar > div { width: 100% !important; overflow: hidden; } [data-uploader-step="process"] .uploader-progress-bar > div:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .5)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .5)), color-stop(.75, rgba(255, 255, 255, .5)), color-stop(.75, transparent), to(transparent) ); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%, transparent 75%, transparent ); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -webkit-animation: uploader-file-process 2s linear infinite; overflow: hidden; } @-webkit-keyframes uploader-file-process { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }