Template:角色卡片/styles.css：修订间差异

2026年8月28日 (五) 12:01的版本

/* ==========================
   角色卡片基础
   ========================== */

.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;

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 0;
}


.character-card__name-original {

    font-size: .65em;

    font-weight: normal;

    opacity: .7;

    white-space: nowrap;

    margin-left: -.1em;
}


.character-card__name-original::before {

    content: "（";
}


.character-card__name-original::after {

    content: "）";
}


/* ==========================
   头部
   ========================== */

.character-card__header {

}


.character-card__cv {

    font-style: italic;
}



.character-card__divider {

    margin: 1rem 0;

    border: 0;

    border-top: 1px solid rgba(0,0,0,.1);
}


/* ==========================
   属性标签
   ========================== */

.character-card__meta {

    display: flex;

    flex-wrap: wrap;

    gap: .4rem .6rem;

    margin: .5rem 0;

    font-size: 82%;
}


.character-card__meta .chip {

    border: 1px solid rgba(0,0,0,.12);

    border-radius: 6px;

    padding: 2px 9px;

    color: #555;
}


.character-card__meta .chip b {

    margin-right: .2rem;
}



/* ==========================
   立绘轮播
   ========================== */


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



/* ==========================
   弹窗模式
   ========================== */


/*
  弹窗触发区域

  用于包裹缩略角色卡
*/

.character-card-modal-trigger {

    cursor: pointer;

    text-decoration: none;

    color: inherit;

}


/*
  遮罩层

  默认隐藏
*/

.character-card-modal-overlay {

    position: fixed;

    inset: 0;


    z-index: 9999;


    display: none;


    align-items: center;

    justify-content: center;


    padding: 20px;


    background:

    rgba(0,0,0,.55);


}



/*
  :target打开
*/

.character-card-modal-overlay:target {

    display: flex;

}



/*
  弹窗主体
*/

.character-card-modal-content {


    width: min(900px,95vw);


    max-height: 90vh;


    overflow-y: auto;


    background: var(--chara-card-color);


    border-radius: 12px;


    box-shadow:

    0 10px 30px rgb(0 0 0 / 35%);


    position: relative;

}



/*
  弹窗里面复用角色卡片

  去掉重复阴影
*/

.character-card-modal-content 
.character-card {


    margin: 0;


    box-shadow: none;


    border-radius: 12px;

}



/*
  关闭按钮
*/

.character-card-modal-close {


    position: absolute;


    right: 12px;


    top: 12px;


    z-index: 20;



    width: 36px;


    height: 36px;



    display: flex;


    align-items: center;


    justify-content: center;



    border-radius: 50%;



    background: rgba(0,0,0,.55);



    color:white;



    text-decoration:none;



    font-size:24px;



    line-height: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%;

    }



    /*
      弹窗移动端
    */


    .character-card-modal-overlay {


        align-items:flex-start;


        padding:10px;


    }



    .character-card-modal-content {


        width:100%;


        max-height:95vh;


        margin-top:20px;


    }



    .character-card-modal-content 
    .character-card {


        flex-direction:column;


    }

}



/*
  窄屏字体调整
*/

@media (max-width:480px){


    .character-card__name-original {


        font-size:.75em;

    }

}