.uploader-dnd-area { border: 1px dashed #ccc; padding: 15px 0px 15px 20px; color: #b1b1b1; overflow: hidden; } .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 200px; width: 222px; float: left; } .uploader-dnd-hints .uploader-dnd-hint { float: left; line-height: 30px; font-size: 12px; } .uploader-dnd-hints .uploader-dnd-hint span { padding: 10px 30px; background: url(image_path("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; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#982da1', endColorstr='#892891'); background: -webkit-linear-gradient(left top, left bottom, #982da1, #892891); background: -moz-linear-gradient(top, #982da1, #892891); background: -o-linear-gradient(top, #982da1, #892891); background: -ms-linear-gradient(top, #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: 31px; } .uploader-button:hover { background: #972da0; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#90179a', endColorstr='#7d2485'); background: -webkit-linear-gradient(left top, left bottom, #90179a, #7d2485); background: -moz-linear-gradient(top, #90179a, #7d2485); background: -o-linear-gradient(top, #90179a, #7d2485); background: -ms-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; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e1898', endColorstr='#7f2387'); background: -webkit-linear-gradient(left top, left bottom, #8e1898, #7f2387); background: -moz-linear-gradient(top, #8e1898, #7f2387); background: -o-linear-gradient(top, #8e1898, #7f2387); background: -ms-linear-gradient(top, #8e1898, #7f2387); -moz-box-shadow: inset 0 0 4px #5f1c65; -webkit-box-shadow: inset 0 0 4px #5f1c65; 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; -webkit-box-shadow: 0 0 3px #ccc inset !important; -moz-box-shadow : 0 0 3px #ccc inset !important; -o-box-shadow : 0 0 3px #ccc inset !important; 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; -webkit-box-shadow: none !important; -moz-box-shadow : none !important; -o-box-shadow : none !important; box-shadow : none !important; text-shadow: none; cursor: default; } input[disabled].uploader-button.gray { background: #f4f4f4 !important; border: solid 1px #dbdbdb !important; -webkit-box-shadow: none !important; -moz-box-shadow : none !important; -o-box-shadow : none !important; box-shadow : none !important; color: #616161 !important; cursor: default; } .uploader-dnd-area .attach_item { width: 242px; height: 50px; border: 1px solid #cccccd; padding: 19px; position: relative; float: left; margin: 0 20px 20px 0; background: #fff; } .uploader-dnd-area .attach_item:hover { -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; } .uploader-dnd-area .attach_item:active { -moz-box-shadow: 0 0 5px #d2d2d2; -webkit-box-shadow: 0 0 5px #d2d2d2; 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: url(image_path("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; } .uploader-dnd-area .attach_item .thumbnail .preloader { border: 1px solid #E5E5E5; padding: 10px; } .uploader-dnd-area .attach_item .infoHolder { float: right; width: 180px; 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: url(image_path("uploader/progressBarFillBg.png")) repeat-x; } .uploader-dnd-area .attach_item.loading .progressBar { display: block; } .uploader-dnd-area .attach_item .thumbnail.preview img { width: 50px; } .uploader-dnd-area .uploader-dnd-hints .uploader-button span { margin-top: 6px; display: inline-block; }