|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- @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*/
- }
|