Template:少女前线信息/styles.css:修订间差异
模板页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* ===== 基础容器 ===== */ | /* ===== 基础容器 ===== */ | ||
.gf-infobox { | .gf-infobox { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
margin-left: auto; /* | margin-left: auto; /* 靠右对齐的关键,不产生空白 */ | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
width: 280px; | width: 280px; | ||
border: 1px solid | border: 1px solid #e0e0e0; /* 还原你的边框色 */ | ||
background-color: | padding: 1px 4px; /* 还原你的内边距 */ | ||
background-color: #FAFAFA; /* 还原你的背景色 */ | |||
color: inherit; | color: inherit; | ||
font-size: 90%; | font-size: 90%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
/* ===== 标题与分区(还原样式) ===== */ | |||
.gf-infobox .gf-title { | |||
margin: 3px 0; | |||
/* ===== | |||
.gf-infobox .gf-title | |||
padding: 0.5em; | padding: 0.5em; | ||
font-size: 120%; | |||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
border-bottom: 1px solid | border-bottom: 1px solid #e0e0e0; | ||
} | } | ||
.gf-infobox .gf-section { | .gf-infobox .gf-section { | ||
margin: 3px 0; | |||
padding: 0.3em 0.5em; | |||
text-align: center; | |||
font-weight: bold; | |||
border-bottom: 1px solid #e0e0e0; | |||
} | } | ||
/* ===== 图片容器 ===== */ | /* ===== 图片容器 ===== */ | ||
.gf-infobox .gf-image-container { | .gf-infobox .gf-image-container { | ||
margin: 3px 0; | |||
text-align: center; | text-align: center; | ||
border-bottom: 1px solid | padding: 0; | ||
border-bottom: 1px solid #e0e0e0; | |||
} | } | ||
.gf-infobox .infobox-image | .gf-infobox .infobox-image { | ||
max-width: 100%; | max-width: 100%; | ||
height: auto | height: auto; | ||
} | } | ||
/* ===== | /* ===== 双栏行(Flex 实现,解决底部空余) ===== */ | ||
.gf-infobox .gf-row { | .gf-infobox .gf-row { | ||
display: flex; | display: flex; | ||
margin: 3px 0; | |||
border-bottom: 1px solid | border-bottom: 1px solid #f0f0f0; | ||
} | } | ||
.gf-infobox .gf-label { | .gf-infobox .gf-label { | ||
display: flex; | display: flex; | ||
justify-content: center; | |||
align-items: center; | align-items: center; | ||
flex: 0 0 5em; /* 还原你的 5em 宽度 */ | |||
padding: 2px 5px; | |||
font-weight: bold; | |||
text-align: center; | text-align: center; | ||
border-right: 1px solid | border-right: 1px solid #e0e0e0; | ||
} | } | ||
.gf-infobox .gf-value { | .gf-infobox .gf-value { | ||
padding: 2px 2px 2px 7px; | |||
padding: | flex: 1; | ||
} | } | ||
.gf-infobox .gf-related { | .gf-infobox .gf-related { | ||
padding: | padding: 2px 5px; | ||
} | } | ||
2026年5月8日 (五) 22:37的版本
/* ===== 基础容器 ===== */
.gf-infobox {
display: flex;
flex-direction: column;
margin-left: auto; /* 靠右对齐的关键,不产生空白 */
margin-bottom: 1em;
width: 280px;
border: 1px solid #e0e0e0; /* 还原你的边框色 */
padding: 1px 4px; /* 还原你的内边距 */
background-color: #FAFAFA; /* 还原你的背景色 */
color: inherit;
font-size: 90%;
box-sizing: border-box;
}
/* ===== 标题与分区(还原样式) ===== */
.gf-infobox .gf-title {
margin: 3px 0;
padding: 0.5em;
font-size: 120%;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #e0e0e0;
}
.gf-infobox .gf-section {
margin: 3px 0;
padding: 0.3em 0.5em;
text-align: center;
font-weight: bold;
border-bottom: 1px solid #e0e0e0;
}
/* ===== 图片容器 ===== */
.gf-infobox .gf-image-container {
margin: 3px 0;
text-align: center;
padding: 0;
border-bottom: 1px solid #e0e0e0;
}
.gf-infobox .infobox-image {
max-width: 100%;
height: auto;
}
/* ===== 双栏行(Flex 实现,解决底部空余) ===== */
.gf-infobox .gf-row {
display: flex;
margin: 3px 0;
border-bottom: 1px solid #f0f0f0;
}
.gf-infobox .gf-label {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 5em; /* 还原你的 5em 宽度 */
padding: 2px 5px;
font-weight: bold;
text-align: center;
border-right: 1px solid #e0e0e0;
}
.gf-infobox .gf-value {
padding: 2px 2px 2px 7px;
flex: 1;
}
.gf-infobox .gf-related {
padding: 2px 5px;
}