test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 7.69 kB
CSS
.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .65)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #595959))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);padding:var(--nutui-popup-title-padding, 16px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 8px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0 0}.nut-popup-right{top:0;right:0;width:80%;height:100%}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 8px) 0 0 var(--nutui-popup-border-radius, 8px)}.nut-popup-left{top:0;left:0;width:80%;height:100%}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden}.nut-shortpassword__title{line-height:1;font-size:var(--nutui-font-size-3, 16px);color:var(--nutui-gray-1, #595959)}.nut-shortpassword__description{margin-top:12px;margin-bottom:24px;line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-shortpassword__input{padding:0 0 10px;text-align:center;position:relative;overflow:hidden}.nut-shortpassword__input-real{position:absolute;right:0;width:247px;height:41px;outline:0 none;border:0;text-decoration:none;z-index:-99}.nut-shortpassword__input-site{width:247px;height:41px;border-radius:4px}.nut-shortpassword__input-fake{top:5%;width:100%;height:41px;margin:0 auto;box-sizing:border-box;background:var(--nutui-shortpassword-background-color, rgb(245, 245, 245));border-radius:4px;border:1px solid var(--nutui-shortpassword-border-color, #ddd);display:flex;position:absolute;left:0}.nut-shortpassword__input-fake__li{flex:1;display:flex;justify-content:center;align-items:center}.nut-shortpassword__input-fake__li__icon{height:6px;width:6px;border-radius:50%;background:#000;display:inline-block}.nut-shortpassword__message{margin-top:9px;display:flex;justify-content:space-between;width:247px}.nut-shortpassword__message__error{line-height:1;font-size:var(--nutui-font-size-0, 10px);color:var(--nutui-shortpassword-error, var(--nutui-brand-color, #2C68FF))}.nut-shortpassword__message__forget{line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-shortpassword-forget, rgb(128, 128, 128));display:flex;align-items:center}.nut-shortpassword__footer{display:flex;justify-content:space-between;margin-top:20px}.nut-shortpassword__footer__cancel{background:var(--nutui-gray-6, #ffffff);border:1px solid var(--nutui-brand-color, #2C68FF);border-radius:15px;padding:8px 38px;line-height:1;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-brand-color, #2C68FF)}.nut-shortpassword__footer__sure{background:linear-gradient(135deg,var(--nutui-brand-color, #2C68FF) 0%,var(--nutui-brand-color-end, #2C68FF) 100%);border-radius:15px;padding:8px 38px;line-height:1;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-brand-text-color, #ffffff)}