@fox-js/plugins
Version:
原生桥接插件集合
2 lines (1 loc) • 8.6 kB
CSS
.fox-m-layer{position:relative;z-index:888}.fox-m-layer *{-webkit-box-sizing:border-box;box-sizing:border-box}.fox-m-layer .fox-m-layershade,.fox-m-layer .fox-m-layermain{position:fixed;left:0;top:0;width:100%;height:100%}.fox-m-layer .fox-m-layershade{background-color:rgba(0,0,0,.3);pointer-events:auto}.fox-m-layer .fox-m-layermain{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}.fox-m-layer .fox-m-layermain .fox-m-layersection{width:100%;text-align:center}.fox-m-layer .fox-m-layerchild{position:relative;display:inline-block;pointer-events:auto;-webkit-overflow-scrolling:touch}.fox-m-layer .fox-m-layerchild{-webkit-animation-fill-mode:none;animation-fill-mode:none;-webkit-animation-duration:.2s;animation-duration:.2s}.fox-m-layer-wrap{display:none}@-webkit-keyframes fox-m-anim-scale{0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes fox-m-anim-scale{0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.fox-m-anim-scale{animation-name:fox-m-anim-scale;-webkit-animation-name:fox-m-anim-scale}@-webkit-keyframes fox-m-anim-up{0%{opacity:0;-webkit-transform:translateY(53.33333333rem);transform:translateY(53.33333333rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fox-m-anim-up{0%{opacity:0;-webkit-transform:translateY(53.33333333rem);transform:translateY(53.33333333rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.fox-m-anim-up{-webkit-animation-name:fox-m-anim-up;animation-name:fox-m-anim-up}@-webkit-keyframes fox-m-anim-loading{0%,80%,100%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes fox-m-anim-loading{0%,80%,100%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.fox-m-anim-loading{-webkit-animation-name:fox-m-anim-loading;animation-name:fox-m-anim-loading}.fox-m-layercont{padding:3.33333333rem 2rem;line-height:1.46666667rem;text-align:center}.fox-m-layercont-empty{padding:0px 0px }.fox-m-layer0 .fox-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;position:relative;height:3.33333333rem;line-height:3.33333333rem;font-size:0;text-align:center;border-top:1px solid #d0d0d0;background-color:#f2f2f2;border-radius:0 0 5px 5px}.fox-m-layer0 .fox-m-layerbtn span{position:relative;display:block;box-flex:1;-webkit-box-flex:1;text-align:center;font-size:.93333333rem;border-radius:0 0 5px 5px;cursor:pointer}.fox-m-layer0 .fox-m-layerbtn span[yes]{color:#40affe}.fox-m-layer0 .fox-m-layerbtn span[no]{border-right:1px solid #d0d0d0;border-radius:0 0 0 5px}.fox-m-layer0 .fox-m-layerbtn span:active{background-color:#f6f6f6}.fox-m-layer0 .fox-m-layer-dialog{font-family:Helvetica,arial,sans-serif;width:90%;max-width:42.66666667rem;text-align:left;background-color:#fff;font-size:.93333333rem;border-radius:5px;-webkit-box-shadow:0 0 .53333333rem rgba(0,0,0,.1);box-shadow:0 0 .53333333rem rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch}.fox-m-layer0 .fox-m-layer-dialog .fox-m-layertitle span{padding:0 .66666667rem;height:4rem;line-height:4rem;font-size:1.06666667rem;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.fox-m-layer0 .fox-m-layer-dialog .fox-m-layerbtn span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.fox-m-layer0 .fox-m-layer-msg{font-family:Helvetica,arial,sans-serif;width:auto;max-width:90%;margin:0 auto;bottom:-10rem;background-color:rgba(0,0,0,.7);color:#fff;font-size:.93333333rem;border-radius:5px;-webkit-box-shadow:0 0 .53333333rem rgba(0,0,0,.1);box-shadow:0 0 .53333333rem rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch}.fox-m-layer0 .fox-m-layer-msg .fox-m-layercont{padding:.66666667rem 1.33333333rem}.fox-m-layer0 .fox-m-layer-footer{font-family:Helvetica,arial,sans-serif;position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:.66666667rem;background:none}.fox-m-layer0 .fox-m-layer-footer .fox-m-layercont{padding:1.33333333rem;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.fox-m-layer0 .fox-m-layer-footer .fox-m-layerbtn{display:block;height:auto;background:none;border-top:none}.fox-m-layer0 .fox-m-layer-footer .fox-m-layerbtn span{background-color:rgba(255,255,255,.9);border-top:1px solid #c2c2c2}.fox-m-layer0 .fox-m-layer-footer .fox-m-layerbtn span:nth-last-child(2){border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.fox-m-layer0 .fox-m-layer-footer .fox-m-layerbtn span:nth-last-child(1){margin-top:.66666667rem;border-radius:5px}.fox-m-layer0 .fox-m-layer-footer .fox-m-layerbtn span[first]{border-radius:5px 5px 0 0}.fox-m-layer1 .fox-m-layerchild{border:none;border-radius:0}.fox-m-layer1 .fox-m-layercont{padding:0;text-align:left}.fox-m-layer2 .fox-m-layerchild{width:auto;max-width:17.33333333rem;min-width:2.66666667rem;border:none;background:none;-webkit-box-shadow:none;box-shadow:none;color:#fff}.fox-m-layer2 .fox-m-layercont{text-align:center;padding:0;line-height:0}.fox-m-layer2 .fox-m-layercont i{width:1.66666667rem;height:1.66666667rem;margin-left:.53333333rem;display:inline-block;background-color:#fff;border-radius:100%}.fox-m-layer2 .fox-m-layercont p{margin-top:1.33333333rem}.fox-m-layer2 .fox-m-layercont i{-webkit-animation:fox-m-anim-loading 1.4s infinite ease-in-out;animation:fox-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.fox-m-layer2 .fox-m-layercont i:first-child{margin-left:0;-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.fox-m-layer2 .fox-m-layercont i.fox-m-layerload{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}.fox-m-layer2 .fox-m-layercont>div{line-height:1.46666667rem;padding-top:.46666667rem;margin-bottom:1.33333333rem;font-size:.93333333rem}.fox-m-layer3 .fox-m-layerchild{border:none;border-radius:0;width:auto;max-width:90%}.fox-m-layer3 .fox-m-layerchild img{max-width:100%}.fox-m-layer4 .fox-m-layerchild{border:none;border-radius:0;width:auto;max-width:90%;text-align:center}.fox-m-layer4 .fox-m-layerprogress{margin:3.33333333rem auto .66666667rem;width:20rem;height:1.66666667rem;border-radius:14px;border-bottom:1px solid #fff;border-top:1px solid #999;background:#ccc;overflow:hidden;position:relative}.fox-m-layer4 .fox-m-layerprogress.fox-m-layer-color-gray{background:#999}.fox-m-layer4 .fox-m-layerprogress-bar{height:inherit;width:0%;border-radius:inherit;position:relative;overflow:hidden;transition:width .2s;-moz-transition:width .2s;-webkit-transition:width .2s;-o-transition:width .2s}.fox-m-layer4 .fox-m-layerprogress-stripes{width:inherit;height:inherit;font-size:12rem;font-weight:bold;margin-top:-3.33333333rem;letter-spacing:-0.93333333rem}.fox-m-layer4 .fox-m-layerprogress-percentage{position:absolute;top:.2rem;right:.33333333rem;font-weight:bold;font-size:1.06666667rem}.fox-m-layer4 .fox-m-layer-color-red .fox-m-layerprogress-bar{background:#e74c3c}.fox-m-layer4 .fox-m-layer-color-red .fox-m-layerprogress-stripes{color:#c0392b}.fox-m-layer4 .fox-m-layer-color-red .fox-m-layerprogress-percentage{color:#eee}.fox-m-layer4 .fox-m-layer-color-blue .fox-m-layerprogress-bar{background:#3498db}.fox-m-layer4 .fox-m-layer-color-blue .fox-m-layerprogress-stripes{color:#2980b9}.fox-m-layer4 .fox-m-layer-color-blue .fox-m-layerprogress-percentage{color:#eee}.fox-m-layer4 .fox-m-layer-color-green .fox-m-layerprogress-bar{background:#2ecc71}.fox-m-layer4 .fox-m-layer-color-green .fox-m-layerprogress-stripes{color:#27ae60}.fox-m-layer4 .fox-m-layer-color-green .fox-m-layerprogress-percentage{color:#fff}.fox-m-layer4 .fox-m-layer-color-yellow .fox-m-layerprogress-bar{background:#f1c40f}.fox-m-layer4 .fox-m-layer-color-yellow .fox-m-layerprogress-stripes{color:#f39c12}.fox-m-layer4 .fox-m-layer-color-yellow .fox-m-layerprogress-percentage{color:#fff}.fox-m-layer4 .fox-m-layer-color-purple .fox-m-layerprogress-bar{background:#9b59b6}.fox-m-layer4 .fox-m-layer-color-purple .fox-m-layerprogress-stripes{color:#8e44ad}.fox-m-layer4 .fox-m-layer-color-purple .fox-m-layerprogress-percentage{color:#eee}.fox-m-layer4 .fox-m-layer-color-gray .fox-m-layerprogress-bar{background:#ecf0f1}.fox-m-layer4 .fox-m-layer-color-gray .fox-m-layerprogress-stripes{color:#bdc3c7}.fox-m-layer4 .fox-m-layer-color-gray .fox-m-layerprogress-percentage{color:#333}