Template:角色卡片/styles.css

.character-card {
    display:flex;
    width:100%;
    flex-wrap:wrap;
    min-height:280px;
    border-radius:10px;
    overflow:hidden;
    background-color:var(--chara-card-color);
    box-shadow:
    0 5px 11px rgb(0 0 0 / 18%),
    0 4px 15px rgb(0 0 0 / 15%);
    margin:15px 5px;
}
.character-card__portrait {
    width:30%;
    position:relative;
    overflow:hidden;
    background-color:
    var(--color-surface-0);
}
.character-card__body {
    width:70%;
    padding:1rem;
    box-sizing:border-box;
}
.character-card__name {
    font-size:150%;
    font-weight:bold;
}
.character-card__header {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.character-card__cv {
    font-style:italic;
}
.character-card__divider {
    margin:1rem 0;
    border:0;
    border-top:1px solid rgba(0,0,0,.1);
}
/* 立绘 */
.portrait-slides {
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
}
.portrait-slide {
    position:absolute;
    inset:0;
    opacity:0;
    transition:
    opacity .25s ease;
}
.portrait-slide.active {
    opacity:1;
    z-index:1;
}
.portrait-slide img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
}
.portrait-label {
    position:absolute;
    bottom:10px;
    left:10px;
    padding:3px 10px;
    background:rgba(0,0,0,.5);
    color:white;
    border-radius:5px;
    font-size:12px;
}
.character-card__switch {
    position:absolute;
    z-index:5;
    right:10px;
    top:10px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.5);
    color:white;
    cursor:pointer;
}

/* 左右布局 */
.character-card--layout-2
.character-card__portrait {
    order:2;
}
.character-card--layout-2
.character-card__body {
    order:1;
}
@media(max-width:767px){
.character-card__portrait {
    width:100%;
    aspect-ratio:3/4;
}
.character-card__body {
    width:100%;
}
.character-card__name {
    font-size:120%;
}
}