Template:CharacterCard/style.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
mNo edit summary
No edit summary
Line 1:
/*** CharacterCard ***/
.charactercard {
display: inline-block;
Line 5 ⟶ 6:
margin: 3px 0px 5px 0;
z-index: 1;
}
 
.charactercard-detailed {
padding: 2px 0 10px 2px;
}
 
Line 26 ⟶ 23:
}
 
 
/* hidden name to facilitate ctrl+f search */
.charactercard .name {
cursor: default;
position: absolute;
top: calc(100% - 2px);
left: 0;
right: 0;
height: 10px;
overflow: visible;
color: transparent;
z-index: 4;
text-align: left;
font-size: 10px;
line-height: 10px;
}
.charactercard .name::selection {
background: rgba(0,0,0,0);
}
 
.charactercard.attack {
padding: 2px 0 10px 2px;
}
 
.charactercard.attack::before {
background-color: var(--normal);
}
.charactercard.attack-explosive::before {
background-color: var(--explosive);
Line 39 ⟶ 63:
}
 
.charactercard .portrait {
position: relative;
}
 
.charactercard .portrait img {
z-index: 2;
position: relative;
Line 51 ⟶ 75:
}
 
.charactercard .portrait::before,
/* .portrait::after */ {
content: "";
position: absolute;
Line 64 ⟶ 88:
}
 
.charactercard .portrait::before {
background-size: cover;
/* background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png); */
Line 77 ⟶ 101:
} */
 
./* rank {*/
.charactercard .rank {
position: absolute;
z-index: 4;
Line 106 ⟶ 131:
}
 
.charactercard .rank-uw {
padding-rightleft: 2px;
border: 1px solid #ee7700;
background-image: url('https://static.miraheze.org/bluearchivewiki/0/03/Icon_UW.png');
background-color: #ffc904;
border-radius: 7px;
 
transform: skewX(-11deg);
width:24px;
overflow: hidden;
/* padding-right: 2px;
background-image: url('https://static.miraheze.org/bluearchivewiki/0/03/Icon_UW.png'); */
}
 
.charactercard .rank-uw::before {
.role {
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
content: "";
transform: skewX(11deg);
/* filter: drop-shadow(0 0 0.5px #ee7700) drop-shadow(0 0 0.5px #ee7700) drop-shadow(0 0 0.5px #ee7700); */
filter: drop-shadow(0 1px 0 #ee7700) drop-shadow(0 -1px 0 #ee7700) drop-shadow(1px 0 0 #ee7700);
 
background-size: cover;
background-image: url('https://static.miraheze.org/bluearchivewiki/8/8d/Icon_UW.svg');
}
 
 
/* role */
.charactercard [class^="role-"] {
position: absolute;
z-index: 4;
right: 1312%;
bottom: 1px;
height: 25px;
Line 123 ⟶ 173:
}
 
.charactercard [class^="role-"]::before {
content: "";
position: absolute;
Line 135 ⟶ 185:
}
 
.charactercard [class^="role-"]::after {
/* content: ""; */
content: "";
position: absolute;
Line 148 ⟶ 197:
}
 
.rolecharactercard .role-attacker::after {
background-image: url(https://static.miraheze.org/bluearchivewiki/6/65/Icon_role_attacker.png);
}
.rolecharactercard .role-healer::after {
background-image: url(https://static.miraheze.org/bluearchivewiki/5/54/Icon_role_healer.png);
}
.rolecharactercard .role-support::after {
background-image: url(https://static.miraheze.org/bluearchivewiki/2/2b/Icon_role_support.png);
}
.rolecharactercard .role-tank::after {
background-image: url(https://static.miraheze.org/bluearchivewiki/5/58/Icon_role_tank.png);
}
.rolecharactercard .role-ts::after {
background-image: url(https://static.miraheze.org/bluearchivewiki/e/ea/Icon_role_tactical_support.png);
}
 
 
/* assist */
 
.charactercard .assist {
.rental {
position: absolute;
z-index: 4;
Line 189 ⟶ 238:
}
 
.rentalcharactercard .assist::after {
content: "A";
}
 
 
/* level */
.charactercard .level {
position: absolute;
z-index: 4;
 
left: 15%;
top: 0;
/* height: 24px; */
width: 70%;
box-sizing: border-box;
 
text-align: left;
color: #ffffff;
font-weight: bold;
text-shadow: 0 0 1px #39436e, 0 0 1px #39436e, 0 0 1px #39436e, 0 0 1px #39436e;
font-size: 18px;
font-style: italic;
line-height: 27px;
 
filter: drop-shadow(0px 0px 0px black);
cursor: default;
}
 
 
/* DORK MODE */
Line 209 ⟶ 283:
background-color: #57c5ff;
}
/*** CharacterCard - END ***/
 
 
/*** Team ***/
.team {
display: inline-flex;
flex-direction: row;
align-items: center;
}
 
.team > div {
margin: 0 6px;
}
 
.team .charactercard {
margin-left: -4px;
margin-right: -4px;
}
 
 
.strikers,
.specials {
position: relative;
display: inline-block;
padding: 0px 2px 0 6px;
}
 
.strikers::after,
.specials::after {
content: "";
position: absolute;
left: 0;
/* right: 0; */
top: 16px;
bottom: 16px;
width: 24px;
 
transform: skewX(-11deg);
border-radius: 6px;
z-index: 0;
}
 
.strikers::after {
background-color: #b43030;
}
.specials::after {
background-color: #0f6dbc;
}
 
.team .info {
position: relative;
display: inline-block;
font-size: 18px;
min-width: 120px;
}
/*** Team - END ***/
Cookies help us deliver our services. By using our services, you agree to our use of cookies.

Navigation menu