mirror/typecho-joe
2
0
Fork 0
mirror of https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git synced 2026-02-18 01:20:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
杜恒
2021-02-06 18:33:20 +08:00
parent fd51c53b84
commit 767426a56d
11 changed files with 3108 additions and 2900 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
plugin/qmsg/qmsg.css Normal file
View File

@@ -0,0 +1 @@
.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}}

1
plugin/qmsg/qmsg.js Normal file
View File

File diff suppressed because one or more lines are too long

147
plugin/qmsg/qmsg.scss Normal file
View File

@@ -0,0 +1,147 @@
.qmsg.qmsg-wrapper {
color: #909399;
position: fixed;
top: 16px;
left: 0;
z-index: 9999;
width: 100%;
pointer-events: none;
user-select: none;
line-height: 20px;
}
.qmsg .qmsg-item {
padding: 8px;
text-align: center;
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;
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 {
animation: MessageTurn 1s linear infinite;
}
@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 MessageMoveOut {
0% {
max-height: 150px;
padding: 8px;
opacity: 1;
}
to {
max-height: 0;
padding: 0;
opacity: 0;
}
}
@keyframes MessageMoveIn {
0% {
transform: translateY(-100%);
transform-origin: 0 0;
opacity: 0;
}
to {
transform: translateY(0);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes MessageShake {
0%,
100% {
transform: translateX(0px);
opacity: 1;
}
25%,
75% {
transform: translateX(-4px);
opacity: 0.75;
}
50% {
transform: translateX(4px);
opacity: 0.25;
}
}