t-fighting-design/theme/popup.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-popup{position:fixed;top:0;right:0;left:0;bottom:0;z-index:2000}.f-popup__mask{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background:rgb(35,39,46)}.f-popup__mask.f-popup__blur{backdrop-filter:blur(2px)}.f-popup__container{position:absolute;top:0;right:0;bottom:0;left:0;transition:.3s}.f-popup__container .f-popup__wrapper{position:absolute;background:#fff;box-sizing:border-box;overflow-y:auto;overflow-x:hidden}.f-popup__container-center{display:flex;justify-content:center;align-items:center}.f-popup__container-center .f-popup__wrapper{border-radius:6px;max-height:90%;box-shadow:0 0 18px #0006}.f-popup__container-left .f-popup__wrapper{top:0;bottom:0;left:0}.f-popup__container-right .f-popup__wrapper{top:0;bottom:0;right:0}.f-popup__container-top .f-popup__wrapper{top:0;left:0;right:0}.f-popup__container-bottom .f-popup__wrapper{left:0;bottom:0;right:0}.f-popup ::-webkit-scrollbar{width:7px}.f-popup ::-webkit-scrollbar-thumb{background:#dddddd;border-radius:6px}.f-popup-center-enter-active{transition:all .2s ease-out}.f-popup-center-leave-active{transition:all .3s cubic-bezier(1,.5,.8,1)}.f-popup-center-enter-from,.f-popup-center-leave-to{transform:translateY(-20px);opacity:0}.f-popup-other-enter-active,.f-popup-other-leave-active{transition:all .3s ease-out}.f-popup-other-enter-from .f-popup__container-right,.f-popup-other-leave-to .f-popup__container-right{transform:translate(100%)}.f-popup-other-enter-from .f-popup__container-left,.f-popup-other-leave-to .f-popup__container-left{transform:translate(-100%)}.f-popup-other-enter-from .f-popup__container-top,.f-popup-other-leave-to .f-popup__container-top{transform:translateY(-100%)}.f-popup-other-enter-from .f-popup__container-bottom,.f-popup-other-leave-to .f-popup__container-bottom{transform:translateY(100%)}.f-popup-other-enter-from .f-popup__container,.f-popup-other-leave-to .f-popup__container{opacity:0}