154 lines
3.5 KiB
Plaintext
154 lines
3.5 KiB
Plaintext
<div id="qexo-friends"></div>
|
|
<style>
|
|
.qexo_inner,
|
|
.qexo_loader {
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
.qexo_loading {
|
|
min-height: 200px;
|
|
}
|
|
|
|
.qexo_part {
|
|
min-height: 100px;
|
|
}
|
|
|
|
.qexo_loader {
|
|
background-color: rgba(var(--mdui-color-on-surface-variant), 0.2); /* 使用主题色并调整透明度 */
|
|
width: 64px;
|
|
height: 64px;
|
|
perspective: 800px;
|
|
}
|
|
|
|
.qexo_inner {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.qexo_inner.one {
|
|
left: 0;
|
|
top: 0;
|
|
animation: rotate-one 1s linear infinite;
|
|
border-bottom: 3px solid var(--mdui-color-on-surface-variant); /* 使用主题变量 */
|
|
position: absolute;
|
|
}
|
|
|
|
.qexo_inner.two {
|
|
right: 0;
|
|
top: 0;
|
|
animation: rotate-two 1s linear infinite;
|
|
border-right: 3px solid var(--mdui-color-on-surface-variant); /* 使用主题变量 */
|
|
position: absolute;
|
|
}
|
|
|
|
.qexo_inner.three {
|
|
right: 0;
|
|
bottom: 0;
|
|
animation: rotate-three 1s linear infinite;
|
|
border-top: 3px solid var(--mdui-color-on-surface-variant); /* 使用主题变量 */
|
|
position: absolute;
|
|
}
|
|
|
|
@keyframes rotate-one {
|
|
0% {
|
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
|
|
}
|
|
100% {
|
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-two {
|
|
0% {
|
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
|
|
}
|
|
100% {
|
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-three {
|
|
0% {
|
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
|
|
}
|
|
100% {
|
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
.qexo-friends {
|
|
opacity: 0.9;
|
|
margin-left: 10px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.qexo-friends a {
|
|
color: var(--mdui-color-on-surface); /* 使用主题文本色 */
|
|
}
|
|
|
|
.qexo-friends p {
|
|
display: none;
|
|
}
|
|
|
|
.qexo-friendurl {
|
|
text-decoration: none !important;
|
|
color: var(--mdui-color-on-surface); /* 使用主题文本色 */
|
|
}
|
|
|
|
.qexo-myfriend {
|
|
width: 56px !important;
|
|
height: 56px !important;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--mdui-color-outline); /* 使用轮廓色 */
|
|
box-shadow: var(--mdui-elevation-1); /* 使用MDUI高程阴影 */
|
|
margin-top: 14px !important;
|
|
margin-left: 14px !important;
|
|
background-color: var(--mdui-color-surface) !important; /* 使用表面色 */
|
|
}
|
|
|
|
.qexo-frienddiv {
|
|
height: 92px;
|
|
margin-top: 10px;
|
|
width: calc(100% - 10px);
|
|
margin-right: 10px;
|
|
box-shadow: var(--mdui-elevation-1); /* 使用MDUI高程阴影 */
|
|
display: inline-block !important;
|
|
background-color: var(--mdui-color-surface-container-low); /* 使用表面容器色 */
|
|
border-radius: var(--mdui-shape-corner-medium); /* 使用中等圆角 */
|
|
}
|
|
|
|
@media screen and (min-device-width: 600px) {
|
|
.qexo-frienddiv {
|
|
width: calc(49% - 5px);
|
|
}
|
|
}
|
|
|
|
.qexo-frienddiv:hover {
|
|
background: rgba(var(--mdui-color-primary), 0.08); /* 使用主色并添加透明度 */
|
|
box-shadow: var(--mdui-elevation-2); /* 悬停时阴影升高 */
|
|
}
|
|
|
|
.qexo-frienddiv:hover .qexo-frienddivleft img {
|
|
transition: transform 0.9s var(--mdui-motion-easing-emphasized) !important; /* 使用MDUI强调缓动 */
|
|
transform: rotate(360deg) !important;
|
|
}
|
|
|
|
.qexo-frienddivleft {
|
|
width: 92px;
|
|
float: left;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.qexo-frienddivright {
|
|
margin-top: 18px;
|
|
margin-right: 18px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
color: var(--mdui-color-on-surface); /* 确保文本使用主题色 */
|
|
}
|
|
</style>
|
|
<script src="https://registry.npmmirror.com/qexo-static/1.6.0/files/hexo/friends.js"></script>
|
|
<script>loadQexoFriends("qexo-friends", "<%= theme.links.qexo.url %>")</script> |