This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
wcui/js/lib/layer/skin/def.css

2 lines
8.1 KiB
CSS

.do-layer{position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto}.do-layer a{text-decoration:none}.do-layer.skin-def{color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,0.3)}.do-layer.skin-def .icon-0::before{content:"\e62e";color:#e74c3c}.do-layer.skin-def .icon-1::before{content:"\e610";color:#1abc9c}.do-layer.skin-def .icon-2::before{content:"\e6f8";color:#3498db}.do-layer.skin-def .icon-3::before{content:"\e6fd";color:#f39c12}.do-layer.skin-def .icon-4::before{content:"\e6f6";color:#f39c12}.do-layer.skin-def .icon-5::before{content:"\e630";color:#1abc9c}.do-layer.skin-def .icon-6::before{content:"\e636";color:#34495e}.do-layer.skin-def .icon-7::before{content:"\e623";color:#f39c12}.do-layer.skin-def .icon-8::before{content:"\e604";color:#e74c3c}.do-layer.skin-def .icon-9::before{content:"\e605";color:#1abc9c}.do-layer.skin-def .layer-title{width:100%;height:43px;padding:0 8px;line-height:43px;background:#f5f5f5;font-size:16px;color:#34495e}.do-layer.skin-def .action-min,.do-layer.skin-def .action-close{position:absolute;display:block;top:12px;width:20px;height:20px;line-height:20px;font-size:14px;text-align:center;cursor:pointer;color:#5d6d7e}.do-layer.skin-def .action-min:hover,.do-layer.skin-def .action-close:hover{color:#1abc9c}.do-layer.skin-def .action-min{right:40px}.do-layer.skin-def .action-min::before{content:"\e634"}.do-layer.skin-def .action-close{right:10px}.do-layer.skin-def .action-close::before{content:"\e687"}.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:35px;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 .detail .prompt-value{width:230px;height:30px;padding:0 8px;border:1px solid #ddd;border-radius:3px}.do-layer.skin-def .layer-content .detail .prompt-value.alert{border-color:#e74c3c}.do-layer.skin-def .layer-content .detail .prompt-value:focus{border-color:#1abc9c}.do-layer.skin-def .layer-content .detail .msg-box{line-height:30px}.do-layer.skin-def .layer-content.none-icon .detail{margin:0 auto}.do-layer.skin-def .layer-btns{width:100%;height:40px;padding:0 5px;line-height:30px;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;color:#34495e;text-align:center;background:#e7e8eb;transition:all .1s ease-in-out}.do-layer.skin-def .layer-btns a:hover{background:#ecf0f1}.do-layer.skin-def .layer-btns a:active{background:#bdc3c7}.do-layer.type-1,.do-layer.type-2,.do-layer.type-3{max-width:600px;min-width:230px}.do-layer.type-5{visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,0,0,0.5);opacity:0;box-shadow:none;-webkit-transition:opacity .3s ease-in-out;-moz-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,0.5);content:""}.do-layer.type-5 .layer-content .detail{margin:0;padding:0}.do-layer.type-6{box-shadow:none;background:transparent}.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}.do-layer .loading-box{position:relative;width:100px;height:100px;margin:auto}.do-layer .loading-box .dot-box{position:absolute;display:block}.do-layer .loading-box.style-1 .dot-box,.do-layer .loading-box.style-2 .dot-box{width:70%;height:70%;margin:15%;-webkit-animation:circle 1.3s infinite linear;-moz-animation:circle 1.3s infinite linear;animation:circle 1.3s infinite linear}.do-layer .loading-box.style-1 .dot-box::after,.do-layer .loading-box.style-2 .dot-box::after{content:"\e648";font:70px/1 "ui font"}.do-layer .loading-box.style-2 .dot-box::after{content:"\e64a"}.do-layer .loading-box.style-3{height:50px}.do-layer .loading-box.style-3 .dot-box{width:100%;height:100%}.do-layer .loading-box.style-3 .dot-box i{float:left;display:block;width:10px;height:100%;margin:0 5px;background:#16a085;-webkit-animation:bounce 1s infinite ease-in-out;-moz-animation:bounce 1s infinite ease-in-out;animation:bounce 1s infinite ease-in-out;-webkit-transform:scaleY(0.6);-moz-transform:scaleY(0.6);transform:scaleY(0.6)}.do-layer .loading-box.style-3 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-3 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-3 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-3 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-4 .dot-box{width:60%;height:60%;margin:20%}.do-layer .loading-box.style-4 .dot-box i{position:absolute;display:block;width:60px;height:60px;-webkit-animation:circle2 2s infinite ease-in-out;-moz-animation:circle2 2s infinite ease-in-out;animation:circle2 2s infinite ease-in-out;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.do-layer .loading-box.style-4 .dot-box i::before{display:block;width:8px;height:8px;background:#16a085;border-radius:50%;content:""}.do-layer .loading-box.style-4 .dot-box i:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.do-layer .loading-box.style-4 .dot-box i:nth-child(3){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-4 .dot-box i:nth-child(4){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-4 .dot-box i:nth-child(5){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box{width:90%;height:90%;margin:5%}.do-layer .loading-box.style-5 .dot-box i{float:left;display:block;width:30px;height:30px;background:#16a085;-webkit-animation:grid 1.5s infinite linear;-moz-animation:grid 1.5s infinite linear;animation:grid 1.5s infinite linear}.do-layer .loading-box.style-5 .dot-box i:nth-child(4),.do-layer .loading-box.style-5 .dot-box i:nth-child(8){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}.do-layer .loading-box.style-5 .dot-box i:nth-child(1),.do-layer .loading-box.style-5 .dot-box i:nth-child(5),.do-layer .loading-box.style-5 .dot-box i:nth-child(9){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.do-layer .loading-box.style-5 .dot-box i:nth-child(2),.do-layer .loading-box.style-5 .dot-box i:nth-child(6){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}.do-layer .loading-box.style-5 .dot-box i:nth-child(3){-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}.do-layer:active{z-index:65536}.do-layer-cover{position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,0.05)}.do-layer-cover.type-6{background:rgba(0,0,0,0.3)}@-webkit-keyframes circle{to{-webkit-transform:rotate(360deg)}}@-moz-keyframes circle{to{-moz-transform:rotate(360deg)}}@keyframes circle{to{transform:rotate(360deg)}}@-webkit-keyframes circle2{70%,to{-webkit-transform:rotate(405deg)}}@-moz-keyframes circle2{70%,to{-moz-transform:rotate(405deg)}}@keyframes circle2{70%,to{transform:rotate(405deg)}}@-webkit-keyframes bounce{25%{-webkit-transform:scaleY(1.3)}50%{-webkit-transform:scaleY(0.6)}}@-moz-keyframes bounce{25%{-moz-transform:scaleY(1.3)}50%{-moz-transform:scaleY(0.6)}}@keyframes bounce{25%{transform:scaleY(1.3)}50%{transform:scaleY(0.6)}}@-webkit-keyframes grid{36%{-webkit-transform:scale(0.1);opacity:.3}60%{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes grid{36%{-moz-transform:scale(0.1);opacity:.3}60%{-moz-transform:scale(1);opacity:1}}@keyframes grid{36%{transform:scale(0.1);opacity:.3}60%{transform:scale(1);opacity:1}}
wcui是一套基于`Web Components`的UI组件库, 宗旨是追求简单、实用、不花哨。
JavaScript 95.2%
CSS 4.8%