@opentiny/vue-theme/top-box/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-top-box{--tv-TopBox-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-TopBox-icon-font-size:24px;--tv-TopBox-success-icon-color:var(--tv-color-success-icon, #5cb300);--tv-TopBox-error-icon-color:var(--tv-color-error-icon, #f23030);--tv-TopBox-warning-icon-color:var(--tv-color-warn-icon, #ff8800);--tv-TopBox-help-icon-color:var(--tv-color-icon-control, #191919);--tv-TopBox-info-icon-color:var(--tv-color-info-icon, #1476ff);position:fixed;top:20px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:400px;max-height:600px;background:var(--tv-TopBox-bg-color);padding:24px;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.2);box-shadow:0 0 5px 0 rgba(0,0,0,.2);-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s}.tiny-top-box .tiny-top-box__icon{font-size:var(--tv-TopBox-icon-font-size);vertical-align:middle}.tiny-top-box .tiny-top-box__content{display:inline-block;padding:0 16px;vertical-align:middle}.tiny-top-box .tiny-top-box__closeBtn{position:absolute;top:14px;right:12px;cursor:pointer;fill:rgba(51,51,51,.5);display:none}.tiny-top-box .tiny-top-box__closeBtn:hover{fill:#333}.tiny-top-box .tiny-top-box__toolbar{float:right;margin-top:24px}.tiny-top-box.is-closable .tiny-top-box__closeBtn{display:inline-block}.tiny-top-box.is-center{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}.tiny-top-box--success .tiny-top-box__icon{fill:var(--tv-TopBox-success-icon-color)}.tiny-top-box--error .tiny-top-box__icon{fill:var(--tv-TopBox-error-icon-color)}.tiny-top-box--warning .tiny-top-box__icon{fill:var(--tv-TopBox-warning-icon-color)}.tiny-top-box--help .tiny-top-box__icon{fill:var(--tv-TopBox-help-icon-color)}.tiny-top-box--info .tiny-top-box__icon{fill:var(--tv-TopBox-info-icon-color)}.tiny-top-box-fade-enter,.tiny-top-box-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}