User:Whiteligh/common.css

.pi-data,
.wds-tabber,
.page-content {
	overflow: visible;	/*为适配Template:战斗书页*/
}
.abnormalitypage-main {
    display: inline-block;
    position: relative;
    text-align: left
}

.abnormalitypage-responder {
    display: inline-block
}

.abnormalitypage-responder:hover + .abnormalitypage-tooltip-main {
    visibility: visible;
    animation: abnormalitypage-tooltip 0.2s linear
}

@keyframes abnormalitypage-tooltip {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.abnormalitypage-responder:hover + .abnormalitypage-tooltip-main .abnormalitypage-tooltip-right {
    animation: abnormalitypage-tooltip-right 0.2s linear
}

@keyframes abnormalitypage-tooltip-right {
    0% {
        transform: translateX(-200px)
    }

    100% {
        transform: translateX(0)
    }
}

.abnormalitypage-tooltip-main {
    visibility: hidden;
    position: absolute;
    width: 254px;
    height: 277px;
    top: -140px;
    z-index: 201;
    pointer-events: none
}

.abnormalitypage-tooltip-left {
    position: absolute;
    width: 254px;
    height: 317px;
    background-image: url(https://static.wikia.nocookie.net/library-of-ruina/images/8/8d/%E5%BC%82%E6%83%B3%E4%BD%93%E4%B9%A6%E9%A1%B5%E6%A8%A1%E6%9D%BF.png/revision/latest?cb=20240207122740&path-prefix=zh);
    background-size: 600px;
    z-index: 2
}

.abnormalitypage-color-green .abnormalitypage-tooltip-left {
    background-position: -30px -11px
}

.abnormalitypage-color-red .abnormalitypage-tooltip-left {
    background-position: -30px -374px
}

.abnormalitypage-image {
    position: absolute;
    top: 54px;
    left: 17px;
    transform: scale(0.91) ;
    clip-path: polygon(15px 25px,15px 180px,231px 155px,233px 0px)
}

.abnormalitypage-cover {
    position: absolute;
    top: 47px;
    left: 40.3px;
    width: 230px;
    height: 284px;
    background-image: url(https://static.wikia.nocookie.net/library-of-ruina/images/e/e1/CombatPage_Cover.png/revision/latest/scale-to-width-down/185?cb=20230816151648&path-prefix=zh);
    background-size: 205px;
    transform: rotate(0.5deg);
    background-repeat: no-repeat;
    z-index: 2;
}

.abnormalitypage-level {
    display: flex;
    position: relative;
    margin-left: 55px;
    font-family: NotoSerifCJKSC;
    text-align: center;
    color: black;
    margin-top: -3px;
    transform: rotate(-7deg);
    font-size: 28px;
    line-height: 1.4em
}

.abnormalitypage-color-green .abnormalitypage-level {
    text-shadow: 0 0 4px #58ffd8,0 0 4px #58ffd8,0 0 4px #58ffd8,0 0 4px #58ffd8;
    -webkit-text-stroke: 0.1px #58ffd8
}

.abnormalitypage-color-red .abnormalitypage-level {
    text-shadow: 0 0 4px #f1005c,0 0 4px #f1005c,0 0 4px #f1005c,0 0 4px #f1005c;
    -webkit-text-stroke: 0.1px #f1005c
}

.abnormalitypage-name {
    display: inline-block;
    position: relative;
    width: 279px;
    font-family: NotoSerifCJKSC;
    text-align: center;
    color: black;
    margin-top: 7px;
    transform: rotate(-9deg);
    font-size: 18px;
    line-height: 1.4em
}

.abnormalitypage-color-green .abnormalitypage-name {
    -webkit-text-stroke: 0.15px #00c691
}

.abnormalitypage-color-red .abnormalitypage-name {
    -webkit-text-stroke: 0.15px #f1005c
}

.abnormalitypage-desc {
    display: flex;
    position: relative;
    margin-left: 45px;
    height: 75px;
    width: 195px;
    margin-top: 150px;
    justify-content: center;
    text-align: center;
    align-items: center;
    transform: rotate(-7.5deg);
    font-size: 12px;
    line-height: 1.5em;
}

.abnormalitypage-color-green .abnormalitypage-desc {
    text-shadow: 0 0 2px #00c691,0 0 2px #00c691,0 0 2px #00c691
}

.abnormalitypage-color-red .abnormalitypage-desc {
    text-shadow: 0 0 2px #f1005c,0 0 2px #f1005c,0 0 2px #f1005c;
    color:#ffe6ed
}

.abnormalitypage-tooltip-right {
    position: absolute;
    width: 294px;
    height: 317px;
    left: 210px;
    background-image: url(https://static.wikia.nocookie.net/library-of-ruina/images/8/8d/%E5%BC%82%E6%83%B3%E4%BD%93%E4%B9%A6%E9%A1%B5%E6%A8%A1%E6%9D%BF.png/revision/latest?cb=20240207054243&path-prefix=zh);
    background-size: 600px;
    z-index: 1
}

.abnormalitypage-color-green .abnormalitypage-tooltip-right {
    background-position: -300px -11px
}

.abnormalitypage-color-red .abnormalitypage-tooltip-right {
    background-position: -300px -370px
}

.abnormalitypage-tooltip-right-content {
    display: flex;
    position: relative;
    margin-left: 55px;
    height: 300px;
    width: 180px;
    margin-top: 12px;
    text-align: center;
    align-items: center;
    font-size: 13px;
    line-height: 1.7em
}

.abnormalitypage-color-green .abnormalitypage-tooltip-right-content {
    text-shadow: 0 0 2px #00c691,0 0 2px #00c691,0 0 2px #00c691
}

.abnormalitypage-color-red .abnormalitypage-tooltip-right-content {
    text-shadow: 0 0 2px #f1005c,0 0 2px #f1005c,0 0 2px #f1005c;
    color:#ffe6ed
}

.abnormalitypage-color-background {
    position: absolute;
    filter: blur(7px);
    margin-left: 30px;
    margin-top: 8px;
    width: 430px;
    height: 310px;
    background-color: transparent;
}

.abnormalitypage-responder:hover + .abnormalitypage-tooltip-main .abnormalitypage-color-background {
    animation: abnormalitypage-tooltip-background-start 0.2s linear ,abnormalitypage-tooltip-background 0.6s infinite
}

.abnormalitypage-color-green .abnormalitypage-color-background {
    border: 30px solid #58ffd8
}

.abnormalitypage-color-red .abnormalitypage-color-background {
    border: 30px solid #f1005c
}

@keyframes abnormalitypage-tooltip-background-start {
    0% {
        width: 200px
    }

    100% {
        width: 415px
    }
}

@keyframes abnormalitypage-tooltip-background {
    0% {
        opacity: 0.7
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0.7
    }
}