$dialogWidth:652px; $dialogZindex:811213; $fontsize:14px; .uedbody{ div, dl, dt, dd, ul, li,ol, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, button, textarea, blockquote,p{margin:0; padding:0;} h1,h2,h3,h4,h5,h6 {font-weight:normal;} li{list-style-type:none;} ol,ul,dl{list-style:none;} em{font-style:normal;} img{border:none;vertical-align:middle;} select,label,input{vertical-align:middle; padding:0; margin:0;outline:medium;font-size:12px;} textarea{resize: none; line-height:18px;} table { border-collapse: collapse; border-spacing: 0; empty-cell:show;} a{text-decoration:none;color:#333;outline:none; cursor:pointer;} a:hover{cursor:pointer;blr:expression(this.onFocus=this.blur());} box-sizing : content-box !important; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; * { padding: 0; margin: 0; box-sizing : content-box !important; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } .fr{float: right;} .fl{float: left;} width: $dialogWidth; position: fixed; padding: 2px 0px 0px 2px; background-color: #FFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); z-index: $dialogZindex; font-family:"微软雅黑"; font-size: 12px; margin: 0px auto; //start of ued_title .ued_title{ height: 26px; border-bottom: 1px solid #C6C6C6; background: transparent url("images/dialog-title-bg.png") repeat-x scroll 0% 0%; position: relative; cursor: move; .icon{background: url("images/icons-all.gif") no-repeat center;} .uedbar { span{ font-weight: bold; font-size: 14px; color: #444; line-height: 26px; padding-left: 5px; } } .close_btn{ height: 20px; width: 20px; cursor: pointer; background-position :0px -59px; position: absolute; right: 5px; top: 3px; &:hover{background-position: 0px -89px;} } } //end of ued_title //button styles .btn { display: inline-block; margin-bottom: 0px; margin-right: 5px; padding: 4px 10px; font-weight: 400; text-align: center; cursor: pointer; border: 1px solid transparent; white-space: nowrap; font-size: $fontsize; border-radius: 3px; -moz-user-select: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); padding: 5px 14px; } .btn-default { border: 1px solid #CFCFCF; color: #565656; background: #ffffff; &:hover { background: #f0f0f0; } } .btn-primary { background:#00b7ee; color: #ffffff; &:hover { background: #00a2d4; } }//button style end .btn.disabled { cursor: not-allowed; opacity: .65; &:hover { background: #00b7ee; } } //start of wrapper .wrapper { width: 630px; height: 380px; margin: 0px auto; padding: 10px; position: relative; font-family: sans-serif; //start of wra_head .wra_head { span { float: left; padding: 0px 5px; margin-right:3px; height: 30px; border: 1px solid #CCC; background: transparent url("images/dialog-title-bg.png") repeat-x scroll 0% 0%; text-align: center; line-height: 30px; cursor: pointer; position: relative; } span.focus { height: 31px; border-bottom: medium none; background: #FFF none repeat scroll 0% 0%; position: relative; z-index: 2; } }//end of wra_head //start of wra_body .wra_body{ width: 100%; height: 346px; clear: both; margin: 0px auto; border: 1px solid #CCC; display: block; clip: auto; overflow: hidden; top: -1px; position: relative; //upload panel start .upload-panel { .wra_pla { zoom: 1; overflow: hidden; text-align: center; .upload-image-placeholder { margin: 10px; border: 2px dashed #e6e6e6; height: 172px; padding-top: 150px; text-align: center; background: url("images/image.png") center 70px no-repeat; position: relative; top: 0; .webuploader-element-invisible { //width: 145px; //height: 40px; //position: absolute; //left: 225px; opacity: 0; width: 0; height: 0; } .image-select { padding: 10px 30px; cursor: pointer; } } } //image list box start .image-list-box { .wra_bar { border-bottom: 1px solid #DADADA; padding: 8px; vertical-align: middle; position: relative; zoom: 1; overflow: hidden; .info{ font-size: $fontsize; color: #666; margin-top: 6px; } .fr { .btn {padding: 6px 15px;} } } //filelist start .filelist{ list-style: outside none none; margin: 0px; padding: 0px; overflow-x: hidden; overflow-y: auto; position: relative; height: 300px; li { width: 113px; height: 113px; margin: 9px 0px 0px 9px; position: relative; display: block; float: left; overflow: hidden; font-size: 12px; .imgWrap{ position: relative; vertical-align: middle; text-align: center; overflow: hidden; width: 113px; height: 113px; transform-origin: 50% 50% 0px; transition: all 200ms ease-out 0s; } //file opt box start .file-opt-box{ position: absolute; display: none; background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%; width: 100%; top: 0px; left: 0px; overflow: hidden; span { width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url("images/icons.png") no-repeat; margin: 5px 1px 1px; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .remove{ background-position: -48px -24px; &:hover{ background-position: -48px -0px; } } .rotateRight{ display: none; background-position: -24px -24px; &:hover{ background-position: -24px -0px; } } .rotateLeft{ display: none; background-position: 0px -24px; &:hover{ background-position: 0px 0px; } } }//file opt box end .success{ background: url("images/success.png") no-repeat right; position: absolute; display: none; left: 0px; bottom: 0px; height: 40px; width: 100%; } .error { position: absolute; width: 100%; display: none; background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%; left: 0; padding:5px 3px; color: #cc0000; border: 1px solid #cccccc; bottom: 0; } .progress { position: absolute; width: 100%; bottom: 0; left: 0; bottom: 0; height: 8px; overflow: hidden; z-index: 50; margin: 0; border-radius: 0; background: none; -webkit-box-shadow: 0 0 0; span { width: 0; height: 100%; background: #1483d8 url("images/progress.png") repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); } } }//end li }//filelist end }//image list box end }//upload panel end //image online start .online{ width: 100%; height: 336px; padding: 10px 0px 0px; display: none; .imagelist { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; position: relative; .list { li { float: left; display: block; list-style: outside none none; padding: 0px; width: 113px; height: 113px; margin: 0px 0px 9px 9px; background-color: #EEE; overflow: hidden; cursor: pointer; position: relative; img{cursor: pointer;} span.ic { position: absolute; top: 0px; left: 0px; cursor: pointer; width: 113px; height: 113px; .img-size { font-size:12px; padding: 5px; background:rgba(0,0,0,0.6); display: none; color: #ffffff; } &:hover{ width: 107px; height: 107px; border: 3px solid #1094FA; background-position: 72px 72px; .img-size { display: inline-block; width: 97px; } } } span.selected { background: url("images/success.png") no-repeat 75px 75px; } } } } } //image online end //image search start .searchbox { width: 100%; padding: 10px 0px 0px; zoom: 1; overflow: hidden; display: none; //搜索条 .search-bar { .searTxt{ margin-left: 5px; background: #FFF none repeat scroll 0% 0%; width: 300px; height: 21px; line-height: 21px; padding: 3px 6px; font-size: $fontsize; line-height: 1.42857; border: 1px solid #CCC; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; margin-right:10px; } .searchBtn { color: #FFF; border-color: #285E8E; background-color: #3B97D7; } .searchRese{ color: #333; border-color: #CCC; background-color: #FFF; } } .search-imagelist-box { width: 100%; height: 292px; overflow-x: hidden; overflow-y: auto; position: relative; margin-top:10px; .search-list { zoom:1; overflow: hidden; li { float: left; display: block; list-style: outside none none; padding: 0px; width: 113px; height: 113px; margin: 0px 0px 9px 9px; background-color: #EEE; overflow: hidden; cursor: pointer; position: relative; img { cursor: pointer; } span.ic { position: absolute; top: 0px; left: 0px; cursor: pointer; width: 113px; height: 113px; .img-size { font-size:12px; padding: 5px; background:rgba(0,0,0,0.6); display: none; color: #ffffff; } &:hover { width: 107px; height: 107px; border: 3px solid #1094FA; background-position: 72px 72px; overflow: hidden; .img-size { display: inline-block; width: 97px; } } } span.selected { background: url("images/success.png") no-repeat 75px 75px; } } } } }//image search start end .no-data { line-height: 40px; height: 40px; font-size:$fontsize; color: #999999; text-align: center; display: none; .error { color: #cc0000; } } .loading-icon { background:rgba(0,0,0,0.4) url("images/loader.gif") no-repeat center center; position: absolute; width: 100%; height: 346px; top:0; left: 0; display: none; text-align: center; .loading-message { position: absolute; font-size: 14px; color: #f0f0f0; top: 210px; left:253px; } } //图片占位符 .icon-placeholder { background-size: 113px 113px; display: block; width: 113px; height: 113px; } .icon-aep, .icon-aepx {background-image: url("icons/aep.png");} .icon-asp {background-image: url("icons/asp.png");} .icon-avi {background-image: url("icons/avi.png");} .icon-c, .icon-cpp {background-image: url("icons/c.png");} .icon-conf {background-image: url("icons/conf.png");} .icon-css {background-image: url("icons/css.png");} .icon-htm,.icon-html {background-image: url("icons/htm.png");} .icon-default {background-image: url("icons/txt.png");} .icon-doc,.icon-docx {background-image: url("icons/doc.png");} .icon-eps {background-image: url("icons/eps.png");} .icon-fla,.icon-swf {background-image: url("icons/fla.png");} .icon-idn {background-image: url("icons/idn.png");} .icon-ini {background-image: url("icons/ini.png");} .icon-java, .icon-jar, .icon-war {background-image: url("icons/java.png");} .icon-js {background-image: url("icons/js.png");} .icon-jsf {background-image: url("icons/jsf.png");} .icon-md, .icon-markdown {background-image: url("icons/markdown.png");} .icon-mdb {background-image: url("icons/mdb.png");} .icon-midi {background-image: url("icons/midi.png");} .icon-mov {background-image: url("icons/mov.png");} .icon-mp3 {background-image: url("icons/mp3.png");} .icon-mpeg {background-image: url("icons/mpeg.png");} .icon-pdf {background-image: url("icons/pdf.png");} .icon-php {background-image: url("icons/php.png");} .icon-ppt, .icon-pptx {background-image: url("icons/ppt.png");} .icon-psd {background-image: url("icons/psd.png");} .icon-pst {background-image: url("icons/pst.png");} .icon-pub {background-image: url("icons/pub.png");} .icon-py {background-image: url("icons/py.png");} .icon-rb {background-image: url("icons/rb.png");} .icon-rm, .icon-rmvb {background-image: url("icons/rmvb.png");} .icon-scss {background-image: url("icons/scss.png");} .icon-tif {background-image: url("icons/tif.png");} .icon-txt {background-image: url("icons/txt.png");} .icon-vsd {background-image: url("icons/vsd.png");} .icon-wav {background-image: url("icons/wav.png");} .icon-wma {background-image: url("icons/wma.png");} .icon-wmv {background-image: url("icons/wmv.png");} .icon-xls, .icon-xlsx {background-image: url("icons/xls.png");} .icon-xml {background-image: url("icons/xml.png");} .icon-zip, .icon-rar, .icon-tgz, .icon-gz, .icon-tar, .icon-7z {background-image: url("icons/zip.png");} }//end of wra_body .wra_body_server { height: 380px; .online { display: block !important; height: 365px; } } }//start of wrapper .wra-btn-group { clear: both; zoom: 1; text-align: right; padding: 10px 20px 20px 0px; .tip-text { float: left; padding: 5px 10px; color: #999; font-size: 14px; } } }