Template:CharacterCard/style.css

/*** CharacterCard ***/
.charactercard {
    display: inline-block;
    position: relative;
    padding: 1px;
    margin: 3px 0px 5px 0;
    z-index: 1;
}

.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.25);
}


/* 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);
}
.charactercard.attack-penetration::before {
    background-color: var(--penetration);
}
.charactercard.attack-mystic::before {
    background-color: var(--mystic);
}
.charactercard.attack-sonic::before {
    background-color: var(--sonic);
}

.charactercard .portrait {
    position: relative;
}

.charactercard .portrait img {
    z-index: 2;
    position: relative;
    /* object-fit: cover;
    object-position: center top;
    height: 73px!important; */
}

.charactercard .portrait::before
/* .portrait::after */  { 
    content: "";
    position: absolute;
    transform: skewX(-11deg);
    top: 0;
    bottom: 0;
    left: 6%;
    right: 6%;
    border-radius: 11%;

}

.charactercard .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 */
.charactercard .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;
}

.charactercard .rank-uw {
    left:2px;
    border: 1px solid #ee7700;
    background-color: #ffc904;
    border-radius: 7px;

    transform: skewX(-11deg);
    width:24px;
    overflow: hidden;
    background-image: none;
/*  padding-right: 2px;
    background-image: url('https://static.miraheze.org/bluearchivewiki/0/03/Icon_UW.png'); */
}

.charactercard .rank-uw::before {
    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: 12%;
    bottom: 1px;
    height: 25px;
    width: 25px;
    box-sizing: border-box;

    cursor: default;
}

.charactercard [class^="role-"]::before {
    content: "";
    position: absolute;
    transform: skewX(-11deg);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 7px 0px;
    background: white;
}

.charactercard [class^="role-"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 53% center;
}

.charactercard .role-attacker::after {
    background-image: url(https://static.miraheze.org/bluearchivewiki/6/65/Icon_role_attacker.png);
}
.charactercard .role-healer::after {
    background-image: url(https://static.miraheze.org/bluearchivewiki/5/54/Icon_role_healer.png);
}
.charactercard .role-support::after {
    background-image: url(https://static.miraheze.org/bluearchivewiki/2/2b/Icon_role_support.png);
}
.charactercard .role-tank::after {
    background-image: url(https://static.miraheze.org/bluearchivewiki/5/58/Icon_role_tank.png);
}
.charactercard .role-tactical_support::after {
    background-image: url(https://static.miraheze.org/bluearchivewiki/e/ea/Icon_role_tactical_support.png);
}


/* assist */
.charactercard .assist {
    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; 
}

.charactercard .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 */
.client-darkmode .charactercard,
.client-darkmode .charactercard .portrait
{
    filter: invert(1) hue-rotate(180deg);
}

.client-darkmode .charactercard::before {
    /* background-color: #000000; */
    border-color: #787878;
}

.client-darkmode .portrait::before {
    background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png);
    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 ***/