wcui/js/lib/layer/skin/def.css

@charset "UTF-8";
/**
 * 
 * @authors yutent (yutent@doui.cc)
 * @date    2016-09-21 01:36:22
 * 
 */


.do-layer, .do-layer * {vertical-align: baseline;box-sizing:border-box;}
.do-layer a {text-decoration:none;}

@font-face {font-family: "def-font";
  src: url('def.eot'); /* IE9*/
  src: url('def.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}

.do-layer-cl::after {visibility:hidden;overflow:hidden;display:block;height: 0;content: ".";clear: both;} 
.do-layer-cover {position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,.05);}
.do-layer {position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto;}
.do-layer:active {z-index:65536;}


/*默认皮肤样式*/
.do-layer.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);}
.do-layer.skin-def .def-font {display: inline-block;font-family:"def-font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
.do-layer.skin-def .icon-1:before {content:"\e6f1";color:#11b330;}/*discover*/
.do-layer.skin-def .icon-2:before {content:"\e6fa";color:#f30;}/*position*/
.do-layer.skin-def .icon-3:before {content:"\e6f0";color:#f30;}/*del*/
.do-layer.skin-def .icon-4:before {content:"\e604";color:#f30;}/*fire*/
.do-layer.skin-def .icon-5:before {content:"\e6f9";color:#09f;}/*pilot*/
.do-layer.skin-def .icon-6:before {content:"\e700";color:#f7b824}/*message*/
.do-layer.skin-def .icon-7:before {content:"\e6fc";color:#63e2c2}/*talk*/
.do-layer.skin-def .icon-8:before {content:"\e6f6";color:#f7b824}/*warn*/
.do-layer.skin-def .icon-9:before {content:"\e6fb";color:#f60;}/*star*/
.do-layer.skin-def .icon-10:before {content:"\e6f8";color:#48d0f7;}/*happy*/
.do-layer.skin-def .icon-11:before {content:"\e6fd";color:#f90;}/*sad*/
.do-layer.skin-def .icon-12:before {content:"\e631";color:#09a;}/*share*/
.do-layer.skin-def .icon-13:before {content:"\e6f3";color:#f60;}/*search*/
.do-layer.skin-def .icon-14:before {content:"\e6f4";color:#09a;}/*user*/
.do-layer.skin-def .icon-15:before {content:"\e701";color:#f30;}/*minus*/
.do-layer.skin-def .icon-16:before {content:"\e703";color:#f7b824;}/*wait*/
.do-layer.skin-def .icon-17:before {content:"\e704";color:#11b330;}/*right*/



.do-layer.skin-def .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:#f3f3f3;font-size:14px;color:#454545;}
.do-layer.skin-def .action-min,.do-layer.skin-def .action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:#666;}
.do-layer.skin-def .action-min {right:40px;}
.do-layer.skin-def .action-close {right:10px;}
.do-layer.skin-def .action-close:hover,.do-layer.skin-def .action-min:hover {border: 1px solid #ddd;line-height: 18px;color:#049789;}
.do-layer.skin-def .action-min:before {content:"\e600";}
.do-layer.skin-def .action-close:before {content:"\e659";}

.do-layer.skin-def .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;}
.do-layer.skin-def .layer-content .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:40px;text-align:center;}
.do-layer.skin-def .layer-content .detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;}
.do-layer.skin-def .layer-content.none-icon .detail {margin:0 auto;}
.do-layer.skin-def .layer-content .detail .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;}
.do-layer.skin-def .layer-content .detail .msg-box {line-height:30px;}


.do-layer.skin-def .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;}
.do-layer.skin-def .layer-btns a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3;}

.do-layer.type-5 {visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);opacity:0;box-shadow:none;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;}
.do-layer.type-5.active {visibility:visible;opacity:1;}
.do-layer.type-5 i.arrow {position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,.5);content: ""}
.do-layer.type-5 .layer-content .detail {margin:0;padding:0}


/******** 额外的弹窗类型样式 ******/
.do-layer.type-1,.do-layer.type-2,.do-layer.type-3 {max-width:600px;min-width:230px;}
.do-layer.type-1 .layer-content,.do-layer.type-2 .layer-content,.do-layer.type-3 .layer-content{max-width:600px;}

/*loading类型,背景色要去掉, 并且遮罩颜色改为黑色半透明*/
.do-layer.type-6 {box-shadow:none;background:transparent;}
.do-layer-cover.type-6 {background:rgba(0,0,0,.3);}

/*special模式类型,调小宽高限制,内外边距取消*/
.do-layer.type-unspecial {min-width:10px;background:transparent;}
.do-layer.type-unspecial .layer-content {min-height:60px;padding:0}
.do-layer.type-unspecial .layer-content .detail {margin:0;padding:0}

/*--------几种loading动画-------*/
.do-ui-load {position:relative;width:100px;height:100px;margin:auto;}

/* style 0 */
.do-ui-load.load-style-0 .dot-box {position:absolute;display:block;width:70%;height:70%;margin:15%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;}
.do-ui-load.load-style-0 .dot-box i {position:absolute;display:block;width:40%;height:40%;border-radius:50%;background:#03998c;-webkit-animation: fadein 2s infinite linear;animation: fadein 2s infinite linear;-webkit-transform: scale(.5);transform: scale(.5);opacity:.3}
.do-ui-load.load-style-0 .dot-box i:nth-child(1) {left:2.5%;top:2.5%;}
.do-ui-load.load-style-0 .dot-box i:nth-child(2) {right:2.5%;top:2.5%;-webkit-animation-delay:.4s;animation-delay:.4s;}
.do-ui-load.load-style-0 .dot-box i:nth-child(3) {left:2.5%;bottom:2.5%;-webkit-animation-delay:.8s;animation-delay:.8s;}
.do-ui-load.load-style-0 .dot-box i:nth-child(4) {right:2.5%;bottom:2.5%;-webkit-animation-delay:1.2s;animation-delay:1.2s;}

/* style 1 */
.do-ui-load.load-style-1 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;}
.do-ui-load.load-style-1 .dot-box i {float:left;display:block;width:30px;height:30px;background:#03998c;-webkit-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;}
.do-ui-load.load-style-1 .dot-box i:nth-child(4),
.do-ui-load.load-style-1 .dot-box i:nth-child(8) {-webkit-animation-delay:.2s;animation-delay:.2s;}
.do-ui-load.load-style-1 .dot-box i:nth-child(1),
.do-ui-load.load-style-1 .dot-box i:nth-child(5),
.do-ui-load.load-style-1 .dot-box i:nth-child(9) {-webkit-animation-delay:.3s;animation-delay:.3s;}

.do-ui-load.load-style-1 .dot-box i:nth-child(2),
.do-ui-load.load-style-1 .dot-box i:nth-child(6) {-webkit-animation-delay:.4s;animation-delay:.4s;}

.do-ui-load.load-style-1 .dot-box i:nth-child(3) {-webkit-animation-delay:.5s;animation-delay:.5s;}


/* style 2 */
.do-ui-load.load-style-2 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;}
.do-ui-load.load-style-2 .dot-box i {position:absolute;display:block;width:40px;height:40px;background:#03998c;border-radius:50%;-webkit-animation: bounce 1.5s infinite linear;animation: bounce 1.5s infinite linear;-webkit-transform: scale(.1);transform: scale(.1);}
.do-ui-load.load-style-2 .dot-box i:nth-child(1) {left:5px;top:0;}
.do-ui-load.load-style-2 .dot-box i:nth-child(2) {right:5px;top:0;-webkit-animation-delay:.5s;animation-delay:.5s;}


/* style 3 */
.do-ui-load.load-style-3 .dot-box {position:absolute;display:block;width:100%;height:100%;}
.do-ui-load.load-style-3 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-top:5px solid #ff0;border-radius:50%;-webkit-animation: circle .9s infinite ease-in-out;animation: circle .9s infinite ease-in-out;}
.do-ui-load.load-style-3 .dot-box i:nth-child(1) {border-color:#03998c;}
.do-ui-load.load-style-3 .dot-box i:nth-child(2) {border-color:#f30;-webkit-animation-delay:.3s;animation-delay:.3s;}
.do-ui-load.load-style-3 .dot-box i:nth-child(3) {-webkit-animation-delay:.6s;animation-delay:.6s;}


/* style 4 */
.do-ui-load.load-style-4 .dot-box {position:absolute;display:block;width:100%;height:100%;-webkit-animation: circle 1s infinite linear;animation: circle 1s infinite linear;}
.do-ui-load.load-style-4 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-radius:50%;}
.do-ui-load.load-style-4 .dot-box i:nth-child(1) {border-top: 50px solid #fff;}
.do-ui-load.load-style-4 .dot-box i:nth-child(2) {border-bottom: 50px solid #000;}
.do-ui-load.load-style-4 .dot-box i:nth-child(1)::before {position:absolute;top:-50%;width:50%;height:50%;border-top: 25px solid #000;border-radius:50%;content:""}
.do-ui-load.load-style-4 .dot-box i:nth-child(1)::after {position:absolute;top:-20%;left:20%;width:10px;height:10px;border-radius:50%;background:#fff;content:""}
.do-ui-load.load-style-4 .dot-box i:nth-child(2)::before {position:absolute;bottom:-50%;right:0;width:50%;height:50%;border-bottom: 25px solid #fff;border-radius:50%;content:""}
.do-ui-load.load-style-4 .dot-box i:nth-child(2)::after {position:absolute;bottom:-20%;right:20%;width:10px;height:10px;border-radius:50%;background:#000;content:""}


/* style 5 */
.do-ui-load.load-style-5 {width:100px;height:50px;}
.do-ui-load.load-style-5 .dot-box {position:absolute;display:block;width:100%;height:100%;}
.do-ui-load.load-style-5 .dot-box i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:#03998c;-webkit-animation: bounce2 1s infinite ease-in-out;animation: bounce2 1s infinite ease-in-out;-webkit-transform:scaleY(.6);transform:scaleY(.6);}
.do-ui-load.load-style-5 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;}
.do-ui-load.load-style-5 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;}
.do-ui-load.load-style-5 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;}
.do-ui-load.load-style-5 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;}

/* style 6 */
.do-ui-load.load-style-6 {width:300px;height:50px;}
.do-ui-load.load-style-6 .dot-box {position:absolute;display:block;width:100%;height:100%;}
.do-ui-load.load-style-6 .dot-box i {position:absolute;display:block;width:10px;height:10px;background:#03998c;-webkit-animation: spring 3s infinite ease-in-out;animation: spring 3s infinite ease-in-out;}
.do-ui-load.load-style-6 .dot-box i:nth-child(2) {-webkit-animation-delay:.2s;animation-delay:.1s;}
.do-ui-load.load-style-6 .dot-box i:nth-child(3) {-webkit-animation-delay:.4s;animation-delay:.2s;}
.do-ui-load.load-style-6 .dot-box i:nth-child(4) {-webkit-animation-delay:.6s;animation-delay:.3s;}
.do-ui-load.load-style-6 .dot-box i:nth-child(5) {-webkit-animation-delay:.8s;animation-delay:.4s;}

/* style 7 */
.do-ui-load.load-style-7 .dot-box {position:absolute;display:block;width:60%;height:60%;margin:20%;}
.do-ui-load.load-style-7 .dot-box i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle3 2s infinite ease-in-out;animation: circle3 2s infinite ease-in-out;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.do-ui-load.load-style-7 .dot-box i::before {display:block;width:8px;height:8px;background:#03998c;border-radius:50%;content:""}
.do-ui-load.load-style-7 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;}
.do-ui-load.load-style-7 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;}
.do-ui-load.load-style-7 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;}
.do-ui-load.load-style-7 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;}



@-webkit-keyframes circle {
    to {-webkit-transform: rotate(360deg);}
}
@keyframes circle {
    to {transform: rotate(360deg)}
}
@-webkit-keyframes circle2 {
    to {-webkit-transform: rotate(-360deg);}
}
@keyframes circle2 {
    to {transform: rotate(-360deg)}
}
@-webkit-keyframes circle3 {
    70%,to {-webkit-transform: rotate(405deg);}
}
@keyframes circle3 {
    70%,to {transform: rotate(405deg);}
}

@-webkit-keyframes fadein {
    
    50% {-webkit-transform: scale(1);opacity:1}
    to {-webkit-transform: scale(.5);opacity:.3}
}
@keyframes fadein {
    
    50% {transform: scale(1);opacity:1}
    to {transform: scale(.5);opacity:.3}
}

@-webkit-keyframes grid {
    
    36% {-webkit-transform: scale(.1);opacity:.3}
    60% {-webkit-transform: scale(1);opacity:1}
}
@keyframes grid {
    
    36% {transform: scale(.1);opacity:.3}
    60% {transform: scale(1);opacity:1}
}

@-webkit-keyframes bounce {
    70% {-webkit-transform: scale(1);}
    to {-webkit-transform: scale(.1);}
}
@keyframes bounce {
    70% {transform: scale(1);}
    to {transform: scale(.1);}
}


@-webkit-keyframes bounce2 {
    25% {-webkit-transform: scaleY(1.3);}
    50% {-webkit-transform: scaleY(.6);}
}
@keyframes bounce2 {
    25% {transform: scaleY(1.3);}
    50% {transform: scaleY(.6);}
}

@-webkit-keyframes spring {
    30%,50% {-webkit-transform: translateX(200px);}
    80%,to {-webkit-transform: translateX(0);}
}
@keyframes spring {
    30%,50%{transform: translateX(200px);}
    80%,to {transform: translateX(0);}
}