/* * Message.js v1.0.0 * https://github.com/snwjas/Message.js * * Copyright 2021 snwjas * Released under the MIT license */ .qmsg-wrapper{position:fixed;top:20px;left:50%;z-index:99999;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.qmsg{position:relative;padding:10px 16px;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);background:#fff;margin-bottom:10px;display:flex;align-items:center;pointer-events:all;animation:qmsg-in .3s ease-out forwards;transform-origin:top center;opacity:0}.qmsg.qmsg-closing{animation:qmsg-out .3s ease-in forwards}.qmsg-icon{margin-right:8px;display:flex;align-items:center;font-size:16px}.qmsg-content{font-size:14px;color:#606266;line-height:1.4}.qmsg-close{margin-left:12px;cursor:pointer;color:#c0c4cc;font-size:14px;transition:color .2s}.qmsg-close:hover{color:#909399}.qmsg-info .qmsg-icon{color:#909399}.qmsg-success .qmsg-icon{color:#67c23a}.qmsg-warning .qmsg-icon{color:#e6a23c}.qmsg-error .qmsg-icon{color:#f56c6c}.qmsg-loading .qmsg-icon{color:#409eff;animation:qmsg-spin 2s linear infinite}@keyframes qmsg-in{0%{opacity:0;transform:translateY(-20px) scale(.8)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes qmsg-out{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-20px) scale(.8)}}@keyframes qmsg-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} /* SVG Icons */ .qmsg-icon svg{width:16px;height:16px;fill:currentColor}