2 lines
3.2 KiB
CSS
2 lines
3.2 KiB
CSS
|
.qmsg.qmsg-wrapper{color:#909399;position:fixed;top:16px;left:0;z-index:9999;width:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:20px}.qmsg .qmsg-item{padding:8px;text-align:center;-webkit-animation-duration:0.3s;animation-duration:0.3s;position:relative}.qmsg .qmsg-item .qmsg-count{position:absolute;left:-4px;top:-4px;background-color:red;color:#fff;font-size:12px;text-align:center;border-radius:2px;min-width:16px;height:16px;line-height:16px;-webkit-animation-duration:0.3s;animation-duration:0.3s}.qmsg .qmsg-item:first-child{margin-top:-8px}.qmsg .qmsg-content{text-align:left;position:relative;display:inline-block;padding:10px 16px;background:#fff;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.15);pointer-events:all;max-width:80%;min-width:80px}.qmsg .qmsg-content [class^='qmsg-content-']{display:flex;align-items:center}.qmsg .qmsg-content .qmsg-content-with-close{padding-right:20px}.qmsg .qmsg-icon{display:flex;align-items:center;margin-right:8px}.qmsg .qmsg-icon svg{vertical-align:unset;width:20px;height:20px}.qmsg .qmsg-content-info .qmsg-icon{color:#1890ff}.qmsg .qmsg-icon-close{position:absolute;top:11px;right:5px;padding:0;overflow:hidden;font-size:12px;line-height:22px;background-color:transparent;border:none;outline:none;cursor:pointer;color:rgba(0,0,0,0.45);transition:color 0.3s}.qmsg .qmsg-icon-close:hover>svg path{stroke:#555}.qmsg .animate-turn{-webkit-animation:MessageTurn 1s linear infinite;animation:MessageTurn 1s linear infinite}@-webkit-keyframes MessageTurn{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(90deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(270deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes MessageTurn{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(90deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(270deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}@-webkit-keyframes MessageMoveIn{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}@keyframes MessageMoveIn{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}@-webkit-keyframes MessageShake{0%,100%{-webkit-transform:translateX(0px);transform:translateX(0px);opacity:1}25%,75%{-webkit-transform:translateX(-4px);transform:translateX(-4px);opacity:0.75}50%{-webkit-transform:translateX(4px);transform:translateX(4px);opacity:0.25}}@keyframes MessageShake{0%,100%{-webkit-transform:translateX(0px);transform:translateX(0px);opacity:1}25%,75%{-webkit-transform:translateX(-4px);transform:translateX(-4px);opacity:0.75}50%{-webkit-transform:translateX(4px);transform:translateX(4px);opacity:0.25}}
|