670 lines
15 KiB
SCSS
670 lines
15 KiB
SCSS
$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;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $dialogWidth) {
|
|
.uedbody {
|
|
width: 100%;
|
|
.wrapper {
|
|
.wra_body .online .imagelist .list li {
|
|
margin:0px 0px 5px 5px;
|
|
}
|
|
width: calc(100% - 20px);
|
|
}
|
|
.wra-btn-group {
|
|
padding: 10px 10px 10px 0px;
|
|
}
|
|
}
|
|
}
|