模板:PageBanner/styles.css：修订间差异
来自Blockland Wiki
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
/* --- 1. | /* --- 1. 暴力隐藏 Citizen 自带的页面标题 --- */ | ||
/* | /* 只要用了这个模板，原来的标题就会消失 */ | ||
.mw-body-header { | .mw-body-header { | ||
display: none !important; | display: none !important; | ||
} | } | ||
/* --- 2. | /* --- 2. PageBanner 容器 --- */ | ||
. | .page-banner { | ||
/* | /* 核心：用负边距抵消 Citizen 的内边距，强制全宽 */ | ||
margin: -1.5rem -1.5rem 2rem -1.5rem; | |||
margin | |||
/* | /* 高度：霸气一点，默认 450px 或 屏幕的一半 */ | ||
height: | height: 50vh; | ||
min-height: 400px; | min-height: 400px; | ||
| 第20行： | 第17行： | ||
background-size: cover; | background-size: cover; | ||
background-position: center center; | background-position: center center; | ||
/* | /* 弹性布局：让文字水平垂直居中 */ | ||
display: flex; | display: flex; | ||
flex-direction: column; | |||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
overflow: hidden; | overflow: hidden; | ||
border-radius: 0 0 8px 8px; /* 底部给点圆角，看着舒服 */ | |||
} | } | ||
/* --- 3. | /* --- 3. 黑色遮罩 (保证白字看得清) --- */ | ||
.page-banner-mask { | |||
. | |||
position: absolute; | position: absolute; | ||
top: 0; left: 0; | top: 0; left: 0; width: 100%; height: 100%; | ||
background: rgba(0, 0, 0, 0. | background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%); | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
/* --- 4. | /* --- 4. 文字内容 --- */ | ||
. | .page-banner-text { | ||
position: relative; | position: relative; | ||
z-index: 2; | z-index: 2; | ||
text-align: center; | text-align: center; | ||
width: 90%; | |||
color: #fff; | |||
text-shadow: 0 4px 8px rgba(0,0,0,0.8); | |||
} | } | ||
/* 大标题 (对应你要求的当地语言名称) */ | |||
.page-banner-title { | |||
font-size: 3.5rem; | |||
font-weight: 800; | |||
font-size: | |||
font-weight: | |||
line-height: 1.2; | line-height: 1.2; | ||
font-family: 'Linux Libertine', 'Georgia', serif; /* 衬线体才有史诗感 */ | |||
margin: 0; | margin: 0; | ||
} | } | ||
/* | /* 适配手机 */ | ||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
. | .page-banner { margin: -1rem -1rem 1.5rem -1rem; height: 35vh; } | ||
.page-banner-title { font-size: 2.2rem; } | |||
. | |||
} | } | ||
2026年1月30日 (五) 16:20的版本
/* --- 1. 暴力隐藏 Citizen 自带的页面标题 --- */
/* 只要用了这个模板，原来的标题就会消失 */
.mw-body-header {
display: none !important;
}
/* --- 2. PageBanner 容器 --- */
.page-banner {
/* 核心：用负边距抵消 Citizen 的内边距，强制全宽 */
margin: -1.5rem -1.5rem 2rem -1.5rem;
/* 高度：霸气一点，默认 450px 或 屏幕的一半 */
height: 50vh;
min-height: 400px;
position: relative;
background-size: cover;
background-position: center center;
/* 弹性布局：让文字水平垂直居中 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 0 0 8px 8px; /* 底部给点圆角，看着舒服 */
}
/* --- 3. 黑色遮罩 (保证白字看得清) --- */
.page-banner-mask {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
z-index: 1;
}
/* --- 4. 文字内容 --- */
.page-banner-text {
position: relative;
z-index: 2;
text-align: center;
width: 90%;
color: #fff;
text-shadow: 0 4px 8px rgba(0,0,0,0.8);
}
/* 大标题 (对应你要求的当地语言名称) */
.page-banner-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
font-family: 'Linux Libertine', 'Georgia', serif; /* 衬线体才有史诗感 */
margin: 0;
}
/* 适配手机 */
@media screen and (max-width: 720px) {
.page-banner { margin: -1rem -1rem 1.5rem -1rem; height: 35vh; }
.page-banner-title { font-size: 2.2rem; }
}