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