/* 签到小工具美化
 * 美化 B2 侧栏签到小工具的签到领取/奖励提示条。
 */

/* 签到领取/奖励提示条 */
.mission-widget .user-w-qd {
    overflow: visible;
}

.mission-widget .user-w-qd > div {
    box-sizing: border-box;
    position: relative;
    display: block;
    z-index: 1;
    overflow: hidden;
    padding: 11px 15px;
    border: 1px solid rgba(45, 126, 246, .28);
    border-radius: 4px;
    transition: border-color .24s ease, color .24s ease;
    color: inherit;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
}

.mission-widget .user-w-qd > div::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -25%;
    bottom: -25%;
    left: -35%;
    width: 0;
    background: linear-gradient(120deg, #2f7df6 0%, #0ea5ff 55%, #36c2ff 100%);
    transform: skewX(-24deg);
    transform-origin: left center;
    transition: width .36s ease;
}

.mission-widget .user-w-qd > div i,
.mission-widget .user-w-qd > div span {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    transition: color .24s ease;
    text-shadow: none !important;
}

.mission-widget .user-w-qd:hover > div {
    border-color: rgba(45, 126, 246, .85);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.mission-widget .user-w-qd:hover > div::before {
    width: 170%;
}

.mission-widget .user-w-qd:hover > div i,
.mission-widget .user-w-qd:hover > div span,
.mission-widget .user-w-qd:hover > div * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.night .mission-widget .user-w-qd > div {
    border-color: rgba(54, 194, 255, .22);
}

body.night .mission-widget .user-w-qd:hover > div {
    border-color: rgba(54, 194, 255, .72);
}