Template:CharacterCard/style.css: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
mNo edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
.charactercard { |
|||
td img.character-card { |
|||
display: inline-block; |
|||
margin: 6px 0; |
|||
position: relative; |
|||
padding: 1px; |
|||
margin: 3px 0px 5px 0; |
|||
} |
|||
.charactercard-detailed { |
|||
padding: 2px 0 10px 2px; |
|||
} |
|||
.charactercard::before { |
|||
background-color: #ffffff; |
|||
content: ""; |
|||
position: absolute; |
|||
transform: skewX(-11deg); |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 4.9%; |
|||
right: 4.9%; |
|||
border-radius: 11%; |
|||
border: 1px solid white; |
|||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.50); |
|||
} |
|||
.charactercard.attack-explosive::before { |
|||
background-color: var(--explosive); |
|||
} |
|||
.charactercard.attack-penetration::before { |
|||
background-color: var(--penetration); |
|||
} |
|||
.charactercard.attack-mystic::before { |
|||
background-color: var(--mystic); |
|||
} |
|||
.charactercard.attack-sonic::before { |
|||
background-color: var(--sonic); |
|||
} |
|||
.portrait { |
|||
position: relative; |
|||
} |
|||
.portrait img { |
|||
z-index: 2; |
|||
position: relative; |
|||
/* object-fit: cover; |
|||
object-position: center top; |
|||
height: 73px!important; */ |
|||
} |
|||
.portrait::before, |
|||
.portrait::after { |
|||
content: ""; |
|||
position: absolute; |
|||
transform: skewX(-11deg); |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 6%; |
|||
right: 6%; |
|||
border-radius: 11%; |
|||
} |
|||
.portrait::before { |
|||
background-size: cover; |
|||
/* background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png); */ |
|||
background-image: url(https://static.miraheze.org/bluearchivewiki/4/4b/Charbg.png); |
|||
background-color: #d4ecff; |
|||
z-index: 1; |
|||
} |
|||
/* .portrait::after { |
|||
border: 2px solid red; |
|||
z-index: 3; |
|||
} */ |
|||
.rank { |
|||
position: absolute; |
|||
z-index: 4; |
|||
left: 1px; |
|||
bottom: 2px; |
|||
height: 24px; |
|||
width: 26px; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
color: #552911; |
|||
font-weight: bold; |
|||
text-shadow: 0 0 1px white; |
|||
font-size: 18px; |
|||
font-style: italic; |
|||
line-height: 27px; |
|||
padding-right: 2px; |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
background-position: center; |
|||
background-image: url('https://static.miraheze.org/bluearchivewiki/8/86/Icon_star.png'); |
|||
filter: drop-shadow(0px 0px 0px black); |
|||
cursor: default; |
|||
} |
|||
.rank-uw { |
|||
padding-right: 2px; |
|||
background-image: url('https://static.miraheze.org/bluearchivewiki/0/03/Icon_UW.png'); |
|||
} |
|||
.role { |
|||
position: absolute; |
|||
z-index: 4; |
|||
right: 13%; |
|||
bottom: 1px; |
|||
height: 25px; |
|||
width: 25px; |
|||
box-sizing: border-box; |
|||
cursor: default; |
|||
} |
|||
.role::before { |
|||
content: ""; |
|||
position: absolute; |
|||
transform: skewX(-11deg); |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
border-radius: 7px 0px; |
|||
background: white; |
|||
} |
|||
.role::after { |
|||
/* content: ""; */ |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-repeat: no-repeat; |
|||
background-size: 16px; |
|||
background-position: 53% center; |
|||
} |
|||
.role.role-attacker { |
|||
background-image: url(https://static.miraheze.org/bluearchivewiki/6/65/Icon_role_attacker.png); |
|||
} |
|||
.role.role-healer { |
|||
background-image: url(https://static.miraheze.org/bluearchivewiki/5/54/Icon_role_healer.png); |
|||
} |
|||
.role.role-support { |
|||
background-image: url(https://static.miraheze.org/bluearchivewiki/2/2b/Icon_role_support.png); |
|||
} |
|||
.role.role-tank { |
|||
background-image: url(https://static.miraheze.org/bluearchivewiki/5/58/Icon_role_tank.png); |
|||
} |
|||
.role.role-ts { |
|||
background-image: url(https://static.miraheze.org/bluearchivewiki/e/ea/Icon_role_tactical_support.png); |
|||
} |
|||
.rental { |
|||
position: absolute; |
|||
z-index: 4; |
|||
right: 4%; |
|||
top: -3px; |
|||
height: 27px; |
|||
width: 22px; |
|||
box-sizing: border-box; |
|||
color: #154465; |
|||
text-shadow: 0 0 0 rgb(153,227,253); |
|||
font-weight: bold; |
|||
font-size: 20px; |
|||
line-height: 27px; |
|||
text-align: center; |
|||
border: 1px solid #154465; |
|||
border-radius: 4px; |
|||
background: rgb(153,227,253); |
|||
background: linear-gradient(135deg, rgba(153,227,253,1) 30%, rgba(99,212,253,1) 33%, rgba(99,212,253,1) 95%, rgba(153,227,253,1) 100%); |
|||
cursor: default; |
|||
} |
|||
.rental::after { |
|||
content: "A"; |
|||
} |
|||
/* DORK MODE */ |
|||
.client-darkmode .charactercard, |
|||
.client-darkmode .charactercard .portrait |
|||
{ |
|||
filter: invert(1) hue-rotate(180deg); |
|||
} |
|||
.client-darkmode .charactercard::before { |
|||
background-color: #000000; |
|||
border-color: #787878; |
|||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.50); |
|||
} |
|||
.client-darkmode .portrait::before { |
|||
background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png); |
|||
background-color: #57c5ff; |
|||
} |
} |
Revision as of 09:20, 9 July 2023
.charactercard {
display: inline-block;
position: relative;
padding: 1px;
margin: 3px 0px 5px 0;
}
.charactercard-detailed {
padding: 2px 0 10px 2px;
}
.charactercard::before {
background-color: #ffffff;
content: "";
position: absolute;
transform: skewX(-11deg);
top: 0;
bottom: 0;
left: 4.9%;
right: 4.9%;
border-radius: 11%;
border: 1px solid white;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.50);
}
.charactercard.attack-explosive::before {
background-color: var(--explosive);
}
.charactercard.attack-penetration::before {
background-color: var(--penetration);
}
.charactercard.attack-mystic::before {
background-color: var(--mystic);
}
.charactercard.attack-sonic::before {
background-color: var(--sonic);
}
.portrait {
position: relative;
}
.portrait img {
z-index: 2;
position: relative;
/* object-fit: cover;
object-position: center top;
height: 73px!important; */
}
.portrait::before,
.portrait::after {
content: "";
position: absolute;
transform: skewX(-11deg);
top: 0;
bottom: 0;
left: 6%;
right: 6%;
border-radius: 11%;
}
.portrait::before {
background-size: cover;
/* background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png); */
background-image: url(https://static.miraheze.org/bluearchivewiki/4/4b/Charbg.png);
background-color: #d4ecff;
z-index: 1;
}
/* .portrait::after {
border: 2px solid red;
z-index: 3;
} */
.rank {
position: absolute;
z-index: 4;
left: 1px;
bottom: 2px;
height: 24px;
width: 26px;
box-sizing: border-box;
text-align: center;
color: #552911;
font-weight: bold;
text-shadow: 0 0 1px white;
font-size: 18px;
font-style: italic;
line-height: 27px;
padding-right: 2px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url('https://static.miraheze.org/bluearchivewiki/8/86/Icon_star.png');
filter: drop-shadow(0px 0px 0px black);
cursor: default;
}
.rank-uw {
padding-right: 2px;
background-image: url('https://static.miraheze.org/bluearchivewiki/0/03/Icon_UW.png');
}
.role {
position: absolute;
z-index: 4;
right: 13%;
bottom: 1px;
height: 25px;
width: 25px;
box-sizing: border-box;
cursor: default;
}
.role::before {
content: "";
position: absolute;
transform: skewX(-11deg);
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 7px 0px;
background: white;
}
.role::after {
/* content: ""; */
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: 16px;
background-position: 53% center;
}
.role.role-attacker {
background-image: url(https://static.miraheze.org/bluearchivewiki/6/65/Icon_role_attacker.png);
}
.role.role-healer {
background-image: url(https://static.miraheze.org/bluearchivewiki/5/54/Icon_role_healer.png);
}
.role.role-support {
background-image: url(https://static.miraheze.org/bluearchivewiki/2/2b/Icon_role_support.png);
}
.role.role-tank {
background-image: url(https://static.miraheze.org/bluearchivewiki/5/58/Icon_role_tank.png);
}
.role.role-ts {
background-image: url(https://static.miraheze.org/bluearchivewiki/e/ea/Icon_role_tactical_support.png);
}
.rental {
position: absolute;
z-index: 4;
right: 4%;
top: -3px;
height: 27px;
width: 22px;
box-sizing: border-box;
color: #154465;
text-shadow: 0 0 0 rgb(153,227,253);
font-weight: bold;
font-size: 20px;
line-height: 27px;
text-align: center;
border: 1px solid #154465;
border-radius: 4px;
background: rgb(153,227,253);
background: linear-gradient(135deg, rgba(153,227,253,1) 30%, rgba(99,212,253,1) 33%, rgba(99,212,253,1) 95%, rgba(153,227,253,1) 100%);
cursor: default;
}
.rental::after {
content: "A";
}
/* DORK MODE */
.client-darkmode .charactercard,
.client-darkmode .charactercard .portrait
{
filter: invert(1) hue-rotate(180deg);
}
.client-darkmode .charactercard::before {
background-color: #000000;
border-color: #787878;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.50);
}
.client-darkmode .portrait::before {
background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png);
background-color: #57c5ff;
}