meri-design/dist/theme/Modal.css

基于vue框架的ui库

/*!
 * @meri-design v2.2.19-beta10
 * (c) 2019-2022 YuShu-Web
 * Released under the MIT License.
 * 2025-01-14 15:25:40
 */.p-modal-main-tip{border-radius:8px;left:50%;margin-left:-210px;top:120px;width:420px}.p-modal-main-tip .p-modal-info-svg{height:24px;top:20px!important;width:24px}.p-modal-main-tip .p-modal-info-svg svg{height:24px;width:24px}.p-modal-main-tip .p-modal-title{border:0;height:44px;padding-top:4px!important}.p-modal-main-tip .p-modal-content{min-height:auto;width:calc(100% - 32px)}.p-modal-main-tip .p-modal-content .p-modal-content-main-text{color:#1b2129;font-size:14px;line-height:22px;margin-top:24px}.p-modal-main-tip .p-modal-content .p-modal-content-main-text-has-title{color:#626c78;margin-bottom:12px;margin-top:8px}.p-modal-main-tip .p-modal-content .p-modal-content-main-text-no-title{font-size:16px}.p-modal-main-tip-svg .p-modal-info-svg{left:32px;position:absolute;top:24px}.p-modal-main-tip-svg .p-modal-title{padding-left:72px;padding-top:8px}.p-modal-main-tip-svg .p-modal-content{padding-left:72px}.p-modal-main-small{border-radius:8px;left:50%;margin-left:-210px;top:120px}.p-modal-main-small .p-modal-info-svg,.p-modal-main-small .p-modal-info-svg svg{height:24px;width:24px}.p-modal-main-small .p-modal-title{height:56px}.p-modal-main-small .p-modal-content{min-height:auto}.p-modal-main-small-svg{position:relative}.p-modal-main-small-svg .p-modal-info-svg{left:32px;position:absolute;top:24px}.p-modal-main-small-svg .p-modal-title{padding-left:72px;padding-top:8px}.p-modal-main-small-svg .p-modal-content{padding-left:72px}.p-modal-main-not-full{border-radius:8px}.p-modal-main-default{min-height:288px;width:600px}.p-modal-main-small{width:420px}.p-modal-main-middle{width:840px}.p-modal-main-large{width:1260px}.p-modal-main-full .p-title-full-text{width:50%}.p-modal-main-full .p-left-handle{align-items:center;display:flex;justify-content:flex-end;padding-right:16px;text-align:right;vertical-align:middle;width:50%}.m-pre-button{border-radius:4px;border-style:solid;border-width:1px;display:inline-block;font-size:0;padding-left:8px;padding-right:8px;text-align:center;transition:background-color .3s,border .3s;vertical-align:middle}.m-pre-button+.m-pre-button{margin-left:12px}.m-pre-button .m-pre-button-content{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.m-pre-button-default{background-color:#fff;border-color:#c4c9cf;color:#1b2129}.m-pre-button-default:hover{border-color:#246fe5}.m-pre-button-default:hover .m-pre-button-content-text{color:#246fe5}.m-pre-button-default:active{border-color:#215dd9}.m-pre-button-default:active .m-pre-button-content-text{color:#215dd9}.m-pre-button-default .m-pre-button-loading svg path{stroke:#1b2129}.m-pre-button-blue,.m-pre-button-primary{background-color:#246fe5;border-color:#246fe5;color:#fff}.m-pre-button-blue:hover,.m-pre-button-primary:hover{background-color:#2481f2;border-color:#2481f2}.m-pre-button-blue:active,.m-pre-button-primary:active{background-color:#215dd9;border-color:#215dd9}.m-pre-button-danger,.m-pre-button-red{background-color:#f55047;border-color:#f55047;color:#fff}.m-pre-button-danger:hover,.m-pre-button-red:hover{background-color:#f8766f;border-color:#f8766f}.m-pre-button-danger:active,.m-pre-button-red:active{background-color:#e63c35;border-color:#e63c35}.m-pre-button-word{background:none;border-color:transparent;color:#1b2129}.m-pre-button-word .m-pre-button-content-text{font-weight:500}.m-pre-button-word:hover .m-pre-button-content-text{color:#246fe5}.m-pre-button-word:active .m-pre-button-content-text{color:#215dd9}.m-pre-button-icon{border-color:transparent}.m-pre-button-icon.icon-bg{background-color:#f1f4f6}.m-pre-button-icon.icon-bg:hover{background-color:#e8ecf0}.m-pre-button-icon.icon-bg:active{background:#e1e5eb}.m-pre-button-icon:hover{background:#e8ecf0}.m-pre-button-icon:active{background:#e1e5eb}.m-pre-button-link{background:none;border-color:transparent;color:#246fe5}.m-pre-button-link .m-pre-button-content-text{font-weight:400}.m-pre-button-link:hover{background:#e8ecf0}.m-pre-button-link:hover .m-pre-button-content-text{color:#246fe5}.m-pre-button-link:active{background:#e8ecf0}.m-pre-button-link:active .m-pre-button-content-text{color:#215dd9}.m-pre-button-text{background:none;border-color:transparent;color:#1b2129}.m-pre-button-text .m-pre-button-content-text{font-weight:400;gap:5px}.m-pre-button-text:active,.m-pre-button-text:hover{background:#e8ecf0}.m-pre-button-large{height:40px}.m-pre-button-large.m-pre-button-blue,.m-pre-button-large.m-pre-button-danger,.m-pre-button-large.m-pre-button-default,.m-pre-button-large.m-pre-button-primary,.m-pre-button-large.m-pre-button-red{min-width:80px;padding-left:16px;padding-right:16px}.m-pre-button-large.m-pre-button-icon{width:40px}.m-pre-button-large .m-pre-button-content{height:38px;line-height:38px}.m-pre-button-large .m-pre-button-content-text{font-size:16px}.m-pre-button-medium{height:32px}.m-pre-button-medium.m-pre-button-blue,.m-pre-button-medium.m-pre-button-danger,.m-pre-button-medium.m-pre-button-default,.m-pre-button-medium.m-pre-button-primary,.m-pre-button-medium.m-pre-button-red{min-width:80px;padding-left:16px;padding-right:16px}.m-pre-button-medium.m-pre-button-icon{width:32px}.m-pre-button-medium .m-pre-button-content{height:30px;line-height:30px}.m-pre-button-small{height:28px}.m-pre-button-small padding-left 12px,.m-pre-button-small.m-pre-button-blue,.m-pre-button-small.m-pre-button-danger,.m-pre-button-small.m-pre-button-default,.m-pre-button-small.m-pre-button-primary,.m-pre-button-small.m-pre-button-red{padding-right:12px}.m-pre-button-small.m-pre-button-link,.m-pre-button-small.m-pre-button-text,.m-pre-button-small.m-pre-button-word{padding-left:4px;padding-right:4px}.m-pre-button-small.m-pre-button-icon{width:28px}.m-pre-button-small .m-pre-button-content{height:26px;line-height:26px}.m-pre-button-normal{cursor:pointer}.m-pre-button.m-pre-button-disabled{cursor:not-allowed}.m-pre-button.m-pre-button-disabled .m-pre-button-content-text{color:#c4c9cf}.m-pre-button.m-pre-button-disabled svg path{fill:#c4c9cf;stroke:#c4c9cf}.m-pre-button-disabled:not([type=word]){background-color:#e8ecf0;border-color:#e8ecf0}.m-pre-button-disabled[type=icon],.m-pre-button-disabled[type=link],.m-pre-button-disabled[type=text]{background-color:transparent;border-color:transparent}.m-pre-button-disabled[type=icon].icon-bg,.m-pre-button-disabled[type=icon].icon-bg:active{background-color:#e8ecf0}.m-pre-button-disabled[type=icon]:active{background-color:transparent}.m-pre-button-content-text{display:flex;font-size:14px;pointer-events:none;transition:color .3s}.m-pre-button-content-text.loading{opacity:0}.m-pre-button-loading{display:flex;height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px}.p-loading16px{display:inline-block;height:100%;line-height:100%;text-align:center;width:100%}.p-loading16px .p-loading16px-line{animation:loading16px .5s linear infinite;height:100%;min-height:12px;min-width:12px;width:100%}@-moz-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-o-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.opacityInUiOut-enter-active{animation:opacityInUi .2s ease-out}.opacityInUiOut-leave-active{animation:opacityOutUi .2s ease-in}@-moz-keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@-webkit-keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@-o-keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@-moz-keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}@-webkit-keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}@-o-keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}@keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}.bounceInUiOut-enter-active{animation:bounceInUi .2s ease-out}.bounceInUiOut-leave-active{animation:bounceOutUi .2s ease-in}@-moz-keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@-o-keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@-moz-keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}@-webkit-keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}@-o-keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}@keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}.bounceInUiOutScale-enter-active{animation:bounceInUiScale .2s ease-out}.bounceInUiOutScale-leave-active{animation:bounceOutUiScale .2s ease-in}@-moz-keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@-o-keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@-moz-keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@-webkit-keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@-o-keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.p-modal-bg{background-color:hsla(208,7%,42%,.5);height:100%;left:0;top:0;width:100%}.p-modal-bg,.p-modal-main{position:fixed;z-index:5000}.p-modal-main{background-color:#fff;box-shadow:0 20px 30px rgba(31,35,41,.15)}.p-modal-main-full{height:100%;left:0;top:0;width:100%}.p-modal-main-max{top:60px}.p-modal-title{border-bottom:1px solid #e1e5eb;display:flex;height:56px;justify-content:space-between;padding-left:32px;padding-right:28px;position:relative;width:100%}.p-modal-title .p-title-text{color:#2e3742;font-size:16px;font-weight:600;line-height:55px;max-width:calc(100% - 80px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-modal-title .p-modal-title-icon{display:inline-block;height:55px;line-height:55px;width:16px}.p-modal-title .p-modal-title-icon svg{cursor:pointer;vertical-align:middle}.p-modal-title .p-modal-title-icon svg:hover path{fill:#246fe5;transition:fill .2s}.p-modal-content{width:100%}.p-modal-content-full-top{max-height:calc(100vh - 56px)}.p-modal-content-full-footer{max-height:calc(100vh - 120px)}.p-modal-content-max-height{max-height:calc(100vh - 252px)}.p-modal-content-default{min-height:156px}.p-modal-content-middle{min-height:360px}.p-modal-content-small{min-height:77px}.p-modal-handle{font-size:0;padding:12px 32px 20px;text-align:right;width:100%}.p-modal-handle-shadow{box-shadow:0 -2px 10px rgba(31,35,41,.1);position:relative;z-index:1}.p-modal-handle-full{bottom:0;font-size:0;padding:12px 32px 20px;position:absolute;text-align:right;width:100%}