@mixin highlightbutton(
$fontcolor: #8e5f92,
$backcolor: #fff2cd,
$fontcolor2: #634266,
$backcolor2: #ffe08b,
$bordercolor: #634266,
$fontsize: 1em
) {
position: relative;
display: inline-block;
min-height: calc(1em + 4px);
background-color: $backcolor;
color: $fontcolor;
> * {
background-color: $backcolor;
color: $fontcolor;
}
font-size: $fontsize;
transform-origin: 50% 50%;
transition: all 0.4s ease;
&::before,
&::after {
content: "";
position: absolute;
height: 2px;
width: 0;
background: $bordercolor;
transition: all 0.25s ease;
}
&::before {
top: 0;
right: 0;
}
&::after {
bottom: 0;
left: 0;
}
&:hover {
background: $backcolor2;
color: $fontcolor2;
z-index: 1;
> * {
background-color: $backcolor2;
color: $fontcolor2;
}
transform: scale(1.25);
&::before,
&::after {
width: 100%;
transition: all 0.8s ease;
}
}
}
.mw-userlink {
// 管理员/巡查员高亮
&[title="用户:Eicy"],
&[title="用户:MashKJo"],
&[title="用户:Sheep-realms"],
&[title="用户:White i"],
&[title="用户:MidsummerEnd"],
&[title="用户:Salt lovely"],
&[title="用户:自由李代数"],
&[title="用户:QWERTY 52 38"],
&[title="用户:我是人1012"] {
color: rgb(221, 17, 102);
font-weight: bold;
text-shadow: 0 0 1px #fce, 0 0 1px #fce, 0 0 1px #fce, 0 0 1px #fce,
0 0 1px #fce, 0 0 2px #fce, 0 0 2px #fce, 0 0 2px #fce, 0 0 2px #fce,
0 0 2px #fce;
transform-origin: 50% 50%;
&:hover {
transform: scale(1.25);
}
}
//盐
&[title="用户:Salt lovely"] {
color: rgb(4, 155, 214);
}
// 小号
&[title="用户:Salt"] {
color: rgb(147, 4, 214);
transform-origin: 50% 50%;
&:hover {
transform: scale(1.25);
}
}
// 未创建
&.new {
outline: #fce dashed 1px;
}
}
// 强制显示用户名和用户头像
.comment-post {
.comment-avatar,
.comment-user {
opacity: 1 !important;
}
}
// 高亮红链、巡查按钮、回退按钮
a[href*="&redlink=1"]:not([title*="讨论:"]):not([title*="用户:"]) {
font-weight: bold;
@include highlightbutton(
rgb(253, 59, 124),
#fff2cd,
rgb(255, 35, 108),
#ffe08b,
rgb(255, 35, 108)
);
}
.patrollink,
.mw-rollback-link > a {
font-weight: bold;
@include highlightbutton(
rgb(74, 119, 255),
#fff2cd,
rgb(37, 91, 255),
#ffe08b,
rgb(37, 91, 255)
);
}
/* 动画 */
@keyframes rotate-360 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}