.uploader-dnd-area { border: 1px dashed #ccc; padding: 15px 0px 15px 20px; color: #b1b1b1; overflow: hidden; user-select: none; } .uploader-dnd-area:active { border-color: #d169d9; } .uploader-dnd-area:active .uploader-dnd-hints .uploader-dnd-hint { color: #d169d9; } .uploader-dnd-hints { text-align: center; padding: 30px 0; overflow: hidden; clear: both; } .uploader-dnd-hints .uploader-button { margin: 0 20px 0 20px; width: 222px; float: left; } .uploader-dnd-hints .uploader-dnd-hint { float: left; line-height: 22px; font-size: 12px; } .uploader-dnd-hints .uploader-dnd-hint span { padding: 10px 30px; background: image-url('uploader/ico_attach.png') no-repeat 9px center; } .uploader-dnd-hints input.uploader { height: 31px; line-height: 31px; } .uploader-button { display: inline-block; background: #972da0; background: linear-gradient(left top, left bottom, #982da1, #892891); border: solid 1px #5f1c65; border-radius: 2px; -moz-border-radius: 2px; padding: 0 15px; margin: 0 3px 3px; color: #fff; font-size: 12px; font-family: MyriadPro, Arial, Helvetica, sans-serif; font-weight: bold; text-shadow: 0 1px 0 #000; cursor: pointer; height: 22px; } .uploader-button:hover { background: #972da0; background: linear-gradient(top, #90179a, #7d2485); -moz-box-shadow: 0 1px 3px #aaa; -webkit-box-shadow: 0 1px 3px #aaa; box-shadow: 0 1px 3px #aaa; } .uploader-button:active { background: #8e1898; background: linear-gradient(top, #8e1898, #7f2387); box-shadow: inset 0 0 4px #5f1c65; } .uploader-button::-moz-focus-inner { border: 1px dotted transparent; } .uploader-button.gray { background: #f4f4f4; border: solid 1px #dbdbdb; color: #616161; text-shadow: none; } .uploader-button.gray:hover { background: #f3f3f3; border: solid 1px #c6c6c6; color: #444; -webkit-box-shadow: 0 3px 3px -1px #e6e6e6; -moz-box-shadow: 0 3px 3px -1px #e6e6e6; box-shadow: 0 3px 3px -1px #e6e6e6; } .uploader-button.gray:active { border: 1px solid #ccc; box-shadow : 0 0 3px #ccc inset !important; background-color: #e9e9e9 !important; color: #444; } input[disabled].uploader-button { background: #d2aad6 !important; border: solid 1px #bfa4c1 !important; box-shadow : none !important; text-shadow: none; cursor: default; } input[disabled].uploader-button.gray { background: #f4f4f4 !important; border: solid 1px #dbdbdb !important; box-shadow : none !important; color: #616161 !important; cursor: default; } .uploader-dnd-area .attach_item { width: 242px; border: 1px solid #cccccd; padding: 19px; position: relative; float: left; margin: 0 20px 20px 0; background: #fff; } .uploader-dnd-area .attach_item:before, .uploader-dnd-area .attach_item:after { content: " "; display: table; } .uploader-dnd-area .attach_item:after { clear: both; } .uploader-dnd-area .attach_item:hover { box-shadow: 0 0 2px #ccc; } .uploader-dnd-area .attach_item:active { box-shadow: 0 0 5px #d2d2d2; border: solid 1px #cf63d8; } .uploader-dnd-area .attach_item a.del_btn { width: 19px; height: 19px; display: block; position: absolute; top: -10px; right: -10px; background: image-url('uploader/but_del_tag2.png') no-repeat top left; } .uploader-dnd-area .attach_item .del_btn:hover { background-position: bottom left; } .uploader-dnd-area .attach_item .thumbnail { width: 50px; height: 50px; float: left; overflow: hidden; background-color: #f3f3f3; margin-bottom: 0; } .uploader-dnd-area .attach_item .thumbnail .preloader { border: 1px solid #E5E5E5; padding: 10px; } .uploader-dnd-area .attach_item .infoHolder { float: right; width: 130px; overflow: hidden; } .uploader-dnd-area .attach_item .fileName { color: #000; font-size: 14px; height: 18px; overflow: hidden; } .uploader-dnd-area .attach_item.loading .fileName { color: #B1B1B1; } .uploader-dnd-area .attach_item .fileWeight { font-size: 12px; } .uploader-dnd-area .attach_item .progressBar { display: none; position: absolute; bottom: 19px; width: 173px; height: 8px; border: 1px solid #cccccc; padding: 1px; } .uploader-dnd-area .attach_item .progressBar .fill { height: 8px; background: image-url('uploader/progressBarFillBg.png') repeat-x; } .uploader-dnd-area .attach_item.loading .progressBar { display: block; }