element-plus/lib/theme-chalk/el-message.css

A Component Library for Vue3.0

:root{--el-transition-duration:0.3s;--el-transition-duration-fast:0.2s;--el-ease-in-out-bezier-function:cubic-bezier(0.645, 0.045, 0.355, 1);--el-fast-bezier-transition:cubic-bezier(0.23, 1, 0.32, 1);--el-all-transition:all var(--el-transition-duration) var(--el-ease-in-out-bezier-function);--el-fade-transition:opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-md-fade-transition:transform var(--el-transition-duration) var(--el-fast-bezier-transition),opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-fade-linear-transition:opacity var(--el-transition-duration-fast) linear;--el-border-transition-base:border-color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-color-transition-base:color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-message-min-width:380px;--el-message-background-color:#edf2fc;--el-message-padding:15px 15px 15px 20px;--el-message-close-icon-color:var(--el-color-text-placeholder);--el-message-close-hover-color:var(--el-color-text-secondary);--el-message-success-font-color:var(--el-color-success);--el-message-info-font-color:var(--el-color-info);--el-message-warning-font-color:var(--el-color-warning);--el-message-error-font-color:var(--el-color-error)}.el-message{min-width:var(--el-message-min-width);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--el-border-radius-base);border-width:var(--el-border-width-base);border-style:var(--el-border-style-base);border-color:var(--el-border-color-lighter);position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:var(--el-message-background-color);-webkit-transition:opacity var(--el-transition-duration),top .4s,-webkit-transform .4s;transition:opacity var(--el-transition-duration),top .4s,-webkit-transform .4s;transition:opacity var(--el-transition-duration),transform .4s,top .4s;transition:opacity var(--el-transition-duration),transform .4s,top .4s,-webkit-transform .4s;overflow:hidden;padding:var(--el-message-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:var(--el-message-success-font-color)}.el-message--info{background-color:#f4f4f5;border-color:#e9e9eb}.el-message--info .el-message__content{color:var(--el-message-info-font-color)}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:var(--el-message-warning-font-color)}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:var(--el-message-error-font-color)}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__content:focus{outline-width:0}.el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:var(--el-message-close-icon-color);font-size:var(--el-message-close-size)}.el-message__closeBtn:focus{outline-width:0}.el-message__closeBtn:hover{color:var(--el-message-close-hover-color)}.el-message .el-icon-success{color:var(--el-message-success-font-color)}.el-message .el-icon-info{color:var(--el-message-info-font-color)}.el-message .el-icon-warning{color:var(--el-message-warning-font-color)}.el-message .el-icon-error{color:var(--el-message-error-font-color)}.el-message-fade-enter-from,.el-message-fade-leave-to{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}