sonist/dist/css/layer-normal.css

.do-layer{width:auto;height:auto}.do-layer a{text-decoration:none}.do-layer .layer-box{position:absolute;z-index:65535;opacity:0}.do-layer .layer-box.shift{transition:all .5s ease-out}.do-layer .layer-box.__tc{top:0;left:50%}.do-layer .layer-box.__tl{top:0;left:0}.do-layer .layer-box.__tr{top:0;left:100%}.do-layer .layer-box.__ct{top:50%;left:50%}.do-layer .layer-box.__cc{top:47.5%;left:50%}.do-layer .layer-box.__bc{top:100%;left:50%}.do-layer .layer-box.__bl{top:100%;left:0}.do-layer .layer-box.__br{top:100%;left:100%}.do-layer .layer-box.scale{transform:scale(1.02);transition:transform .1s linear}.do-layer .layer-box.skin-normal{padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,0.3)}.do-layer .layer-box.skin-normal .layer-title{width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:#526273}.do-layer .layer-box.skin-normal .layer-content{position:relative;width:100%;height:auto;min-height:50px;word-break:break-all;word-wrap:break-word}.do-layer .layer-box.skin-normal .layer-content .prompt-value{width:100%;height:30px;padding:0 8px;border:1px solid #ddd;border-radius:3px}.do-layer .layer-box.skin-normal .layer-content .prompt-value.alert{border-color:#eb3b48}.do-layer .layer-box.skin-normal .layer-content .prompt-value:focus{border-color:#19b491}.do-layer .layer-box.skin-normal .layer-content .msg-box{line-height:30px}.do-layer .layer-box.skin-normal .layer-ctrl{width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right}.do-layer .layer-box.skin-normal .layer-ctrl a{overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:#19b491;text-align:center;cursor:pointer}.do-layer .layer-box.skin-normal .layer-ctrl a::before{position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:#f3f5fb;content:"";opacity:0;transform:scale(0, 0);transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1)}.do-layer .layer-box.skin-normal .layer-ctrl a:hover::before{opacity:1;transform:scale(1, 0.8)}.do-layer .layer-box.skin-normal .layer-ctrl a:active{background:#e8ebf4}.do-layer .layer-box.type-1,.do-layer .layer-box.type-2,.do-layer .layer-box.type-3{max-width:600px;min-width:300px}.do-layer .layer-box.type-1 .layer-content,.do-layer .layer-box.type-2 .layer-content,.do-layer .layer-box.type-3 .layer-content{padding:10px}.do-layer .layer-box.type-4{padding:0}.do-layer .layer-box.type-4 .frame-box{display:block;width:100%;height:100%;margin:0;padding:0;border:0;resize:none}.do-layer .layer-box.type-5{visibility:hidden;position:fixed;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;color:#fff;background:rgba(0,0,0,0.5);box-shadow:none}.do-layer .layer-box.type-5 i.arrow{position:absolute;width:0;height:0;border:6px solid transparent;content:""}.do-layer .layer-box.type-5 i.offset-top{left:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,0.5)}.do-layer .layer-box.type-5 i.offset-bottom{left:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,0.5)}.do-layer .layer-box.type-5 i.offset-top-left{right:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,0.5)}.do-layer .layer-box.type-5 i.offset-bottom-left{right:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,0.5)}.do-layer .layer-box.type-5 .layer-content{min-height:20px;margin:0}.do-layer .layer-box.type-6{z-index:65539;box-shadow:none;background:transparent}.do-layer .layer-box.type-toast{position:fixed;min-width:10px;padding:0;background:transparent}.do-layer .layer-box.type-toast .layer-content{min-height:40px;height:40px}.do-layer .layer-box.type-toast .toast-box{display:inline-block;position:relative;min-height:40px;padding:5px 12px 5px 50px;line-height:28px;border-radius:3px;word-break:break-all}.do-layer .layer-box.type-toast .toast-box.style-info{border:1px solid #19b491;background:#edfbf8;color:#16967a}.do-layer .layer-box.type-toast .toast-box.style-warn{border:1px solid #f39c12;background:#fffbed;color:#e67e22}.do-layer .layer-box.type-toast .toast-box.style-deny{border:1px solid #eb3b48;background:#fffbed;color:#ce3742}.do-layer .layer-box.type-toast .toast-box>i{position:absolute;left:12px;top:5px;line-height:28px;font-size:26px}.do-layer .layer-box .loading{position:relative;width:100px;height:100px;margin:auto}.do-layer .layer-box .loading .dot-box{position:absolute;display:block}.do-layer .layer-box .loading.style-1 .dot-box,.do-layer .layer-box .loading.style-2 .dot-box{width:70%;height:70%;margin:15%;line-height:70px;font-size:70px;text-align:center}.do-layer .layer-box .loading.style-1 .dot-box i,.do-layer .layer-box .loading.style-2 .dot-box i{display:block;width:100%;height:100%}.do-layer .layer-box .loading.style-1 .dot-box{animation:circle .8s infinite linear}.do-layer .layer-box .loading.style-2 .dot-box{animation:round .6s infinite linear}.do-layer .layer-box .loading.style-3{height:50px}.do-layer .layer-box .loading.style-3 .dot-box{width:100%;height:100%}.do-layer .layer-box .loading.style-3 .dot-box i{float:left;display:block;width:10px;height:100%;margin:0 5px;background:#16967a;animation:bounce 1s infinite ease-in-out;transform:scaleY(0.6)}.do-layer .layer-box .loading.style-3 .dot-box i:nth-child(2){animation-delay:.1s}.do-layer .layer-box .loading.style-3 .dot-box i:nth-child(3){animation-delay:.2s}.do-layer .layer-box .loading.style-3 .dot-box i:nth-child(4){animation-delay:.3s}.do-layer .layer-box .loading.style-3 .dot-box i:nth-child(5){animation-delay:.4s}.do-layer .layer-box .loading.style-4 .dot-box{width:60%;height:60%;margin:20%}.do-layer .layer-box .loading.style-4 .dot-box i{position:absolute;display:block;width:60px;height:60px;animation:circle2 2s infinite ease-in-out;transform:rotate(45deg)}.do-layer .layer-box .loading.style-4 .dot-box i::before{display:block;width:8px;height:8px;background:#16967a;border-radius:50%;content:""}.do-layer .layer-box .loading.style-4 .dot-box i:nth-child(2){animation-delay:.1s}.do-layer .layer-box .loading.style-4 .dot-box i:nth-child(3){animation-delay:.2s}.do-layer .layer-box .loading.style-4 .dot-box i:nth-child(4){animation-delay:.3s}.do-layer .layer-box .loading.style-4 .dot-box i:nth-child(5){animation-delay:.4s}.do-layer .layer-box .loading.style-5 .dot-box{width:90%;height:90%;margin:5%}.do-layer .layer-box .loading.style-5 .dot-box i{float:left;display:block;width:30px;height:30px;background:#16967a;animation:grid 1.5s infinite linear}.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(4),.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(8){animation-delay:.2s}.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(1),.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(5),.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(9){animation-delay:.3s}.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(2),.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(6){animation-delay:.4s}.do-layer .layer-box .loading.style-5 .dot-box i:nth-child(3){animation-delay:.5s}.do-layer.mask{position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:transparent}.do-layer.mask.shift{transition:all .5s ease-out}.do-layer.mask.inner{position:absolute}.do-layer:active{z-index:65536}.do-layer__tips{visibility:hidden;position:fixed;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;border-radius:3px;font-size:14px;color:#fff;background:rgba(0,0,0,0.5)}.do-layer__tips i.arrow{position:absolute;width:0;height:0;border:6px solid transparent;content:""}.do-layer__tips i.offset-top{left:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,0.5)}.do-layer__tips i.offset-bottom{left:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,0.5)}.do-layer__tips i.offset-top-left{right:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,0.5)}.do-layer__tips i.offset-bottom-left{right:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,0.5)}.do-layer__tips .layer-content{min-height:20px;margin:0}@keyframes circle{to{transform:rotate(360deg)}}@keyframes circle2{70%,to{transform:rotate(405deg)}}@keyframes round{from,24.99%,to{transform:rotate(0deg)}25%,49.99%{transform:rotate(90deg)}50%,74.99%{transform:rotate(180deg)}75%,99.99%{transform:rotate(270deg)}}@keyframes bounce{25%{transform:scaleY(1.3)}50%{transform:scaleY(0.6)}}@keyframes grid{36%{transform:scale(0.1);opacity:.3}60%{transform:scale(1);opacity:1}}@media screen and (max-width: 480px){.do-layer .layer-box.type-1,.do-layer .layer-box.type-2,.do-layer .layer-box.type-3,.do-layer .layer-box.type-4,.do-layer .layer-box.type-7{width:90%}}