124 lines
3.5 KiB
CSS
124 lines
3.5 KiB
CSS
@charset "utf-8";
|
|
|
|
|
|
.wrapper{
|
|
color: white;
|
|
font-family: var(--game-font-family);
|
|
font-size: 15px;
|
|
line-height: 15px;
|
|
text-shadow: black 0 0 2px, black 2px 2px 0;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
/*宠物在图中编号对应的坐标*/
|
|
.wrapper[data-cards-pic-x='0']{background-position-x:calc(-102px * 0);}
|
|
.wrapper[data-cards-pic-x='1']{background-position-x:calc(-102px * 1);}
|
|
.wrapper[data-cards-pic-x='2']{background-position-x:calc(-102px * 2);}
|
|
.wrapper[data-cards-pic-x='3']{background-position-x:calc(-102px * 3);}
|
|
.wrapper[data-cards-pic-x='4']{background-position-x:calc(-102px * 4);}
|
|
.wrapper[data-cards-pic-x='5']{background-position-x:calc(-102px * 5);}
|
|
.wrapper[data-cards-pic-x='6']{background-position-x:calc(-102px * 6);}
|
|
.wrapper[data-cards-pic-x='7']{background-position-x:calc(-102px * 7);}
|
|
.wrapper[data-cards-pic-x='8']{background-position-x:calc(-102px * 8);}
|
|
.wrapper[data-cards-pic-x='9']{background-position-x:calc(-102px * 9);}
|
|
.wrapper[data-cards-pic-y='0']{background-position-y:calc(-102px * 0);}
|
|
.wrapper[data-cards-pic-y='1']{background-position-y:calc(-102px * 1);}
|
|
.wrapper[data-cards-pic-y='2']{background-position-y:calc(-102px * 2);}
|
|
.wrapper[data-cards-pic-y='3']{background-position-y:calc(-102px * 3);}
|
|
.wrapper[data-cards-pic-y='4']{background-position-y:calc(-102px * 4);}
|
|
.wrapper[data-cards-pic-y='5']{background-position-y:calc(-102px * 5);}
|
|
.wrapper[data-cards-pic-y='6']{background-position-y:calc(-102px * 6);}
|
|
.wrapper[data-cards-pic-y='7']{background-position-y:calc(-102px * 7);}
|
|
.wrapper[data-cards-pic-y='8']{background-position-y:calc(-102px * 8);}
|
|
.wrapper[data-cards-pic-y='9']{background-position-y:calc(-102px * 9);}
|
|
|
|
/*怪物边框*/
|
|
.attribute { /*主属性*/
|
|
position:absolute;
|
|
left:0;top:0;
|
|
width: 100px;height: 100px;
|
|
background-repeat: no-repeat;
|
|
background-image: url(images/CARDFRAME2.PNG);
|
|
}
|
|
.attribute-sub { /*副属性*/
|
|
background-position-y: -104px;
|
|
}
|
|
.attribute[data-attr='-1'] {
|
|
background: none; /*无*/
|
|
}
|
|
.attribute[data-attr='0'] {
|
|
background-position-x: calc(-102px * 0); /*火*/
|
|
}
|
|
.attribute[data-attr='1'] {
|
|
background-position-x: calc(-102px * 1); /*水*/
|
|
}
|
|
.attribute[data-attr='2'] {
|
|
background-position-x: calc(-102px * 2); /*木*/
|
|
}
|
|
.attribute[data-attr='3'] {
|
|
background-position-x: calc(-102px * 3); /*光*/
|
|
}
|
|
.attribute[data-attr='4'] {
|
|
background-position-x: calc(-102px * 4); /*暗*/
|
|
}
|
|
.attribute-main[data-attr='6']
|
|
{
|
|
background-image: url(images/CARDFRAMEW.PNG);
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.flex-box {
|
|
display: block flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
left:0;top:0;
|
|
flex-direction: column; /* 内容纵向排列 */
|
|
}
|
|
.flex-left-top {
|
|
}
|
|
.flex-left-bottom {
|
|
justify-content: flex-end; /*从下往上*/
|
|
}
|
|
.flex-right-top {
|
|
align-items: flex-end; /*靠右*/
|
|
}
|
|
.flex-right-bottom {
|
|
justify-content: flex-end; /*从下往上*/
|
|
align-items: flex-end; /*靠右*/
|
|
}
|
|
|
|
.card-id {
|
|
font-family: var(--font-family);
|
|
}
|
|
.card-id::before {
|
|
content: "No.";
|
|
font-size: 0.7em; /*火狐*/
|
|
zoom: 0.7; /*Chrome*/
|
|
}
|
|
.card-id::after {
|
|
content: attr(data-id);
|
|
}
|
|
.level {
|
|
}
|
|
.level::before {
|
|
content: "Lv.";
|
|
font-size: 0.7em; /*火狐*/
|
|
zoom: 0.7; /*Chrome*/
|
|
}
|
|
.enhancement { /*加点*/
|
|
color: yellow;
|
|
}
|
|
.enhancement::before {
|
|
content: "+";
|
|
}
|
|
.active-skill-cd {
|
|
font-size: 13px;
|
|
}
|
|
.active-skill-cd::before {
|
|
content: "CD";
|
|
font-size: 0.7em; /*火狐*/
|
|
zoom: 0.7; /*Chrome*/
|
|
} |