用户:Salt lovely/common.scss

Salt lovely留言 | 贡献2021年2月21日 (日) 15:02的版本 (.)
@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;
    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: $fontcolor;
        color: $backcolor;
        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="用户:我是人1012"] {
        color: rgb(221, 17, 102);
        font-weight: bold;
        text-shadow: 0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef,
            0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef,
            0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef, 0 0 1px #cef,
            0 0 1px #cef;
        transform-origin: 50% 50%;
        &:hover {
            transform: scale(1.25);
        }
    }
    //盐
    &[title="用户:Salt lovely"] {
        color: rgb(4, 155, 214);
    }
}
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 {
    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);
    }
}