Template:WelcomeHeader/styles.css:修订间差异
模板页面
更多操作
OctoberSama(留言 | 贡献) 小 |
|||
| 第1行: | 第1行: | ||
/* ===== Banner 样式 ===== */ | /* ===== Banner 样式 (去伪存真版) ===== */ | ||
.main-banner{ | .main-banner { | ||
display:flex; | display: flex; | ||
align-items:center; | align-items: center; | ||
gap:20px; | gap: 20px; | ||
padding:24px 32px; | padding: 24px 32px; | ||
border-radius: | |||
background: | /* --- 修改核心:去除圆角和渐变,改为边框风格 --- */ | ||
box-shadow: | border-radius: 0; /* 移除圆角,回归直角 */ | ||
overflow:hidden; | background: var(--color-surface-2); /* 改为纯色背景,不要渐变 */ | ||
border: 2px solid var(--color-base); /* 增加黑色(或主色)描边,强调结构 */ | |||
box-shadow: none; /* 移除模糊的阴影,更加干练 */ | |||
/* 如果想要一点立体感但不油腻,可以使用这种硬阴影(可选): */ | |||
/* box-shadow: 4px 4px 0px rgba(0,0,0, 1); */ | |||
overflow: hidden; | |||
position: relative; /* 为可能的装饰元素留位 */ | |||
} | } | ||
.banner-left img{ | |||
max-width:200px; | .banner-left img { | ||
height:auto; | max-width: 200px; | ||
height: auto; | |||
/* 图片也可以加个边框呼应整体风格(可选) */ | |||
/* border: 2px solid var(--color-base); */ | |||
} | } | ||
.banner-right{ | |||
flex:1; | .banner-right { | ||
text-align:right; | flex: 1; | ||
text-align: right; | |||
} | } | ||
.title { | .title { | ||
color: var(--color-base); | |||
font-weight: 700; /* 加粗标题,增加力量感 */ | |||
letter-spacing: -0.02em; /* 稍微收紧字间距,更现代 */ | |||
} | } | ||
.subtitle{ | |||
font-size:20px; | .subtitle { | ||
margin:.3em 0 1.5em; | font-size: 20px; | ||
color:var(--color-base); | margin: .3em 0 1.5em; | ||
color: var(--color-base); | |||
opacity: 0.8; /* 用透明度区分层级,而不是颜色 */ | |||
} | } | ||
.divider{ | |||
height:1px; | .divider { | ||
background: | height: 1px; | ||
margin-bottom:1.2em; | /* 修改:去除半透明白色,改为实色,以匹配纯色背景 */ | ||
background: var(--color-base); | |||
opacity: 0.2; /*以此控制线条轻重*/ | |||
margin-bottom: 1.2em; | |||
} | } | ||
.count{ | |||
font-size:16px; | .count { | ||
margin:0; | font-size: 16px; | ||
margin: 0; | |||
font-family: monospace; /* 数字使用等宽字体,增加一种“数据感/机械感” */ | |||
} | } | ||
/* ≤600 px 时纵向布局 */ | /* ≤600 px 时纵向布局 */ | ||
@media(max-width:600px){ | @media(max-width: 600px) { | ||
.main-banner{ | .main-banner { | ||
flex-direction:column; | flex-direction: column; | ||
text-align:center; | text-align: center; | ||
/* 移动端可以取消硬阴影,防止占地太大 */ | |||
box-shadow: none; | |||
} | } | ||
.banner-right{ | .banner-right { | ||
text-align:center; | text-align: center; | ||
} | } | ||
.divider{ | .divider { | ||
width:80%; | width: 80%; | ||
margin:12px auto; | margin: 12px auto; | ||
} | } | ||
} | } | ||
2025年12月5日 (五) 12:11的版本
/* ===== Banner 样式 (去伪存真版) ===== */
.main-banner {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 32px;
/* --- 修改核心:去除圆角和渐变,改为边框风格 --- */
border-radius: 0; /* 移除圆角,回归直角 */
background: var(--color-surface-2); /* 改为纯色背景,不要渐变 */
border: 2px solid var(--color-base); /* 增加黑色(或主色)描边,强调结构 */
box-shadow: none; /* 移除模糊的阴影,更加干练 */
/* 如果想要一点立体感但不油腻,可以使用这种硬阴影(可选): */
/* box-shadow: 4px 4px 0px rgba(0,0,0, 1); */
overflow: hidden;
position: relative; /* 为可能的装饰元素留位 */
}
.banner-left img {
max-width: 200px;
height: auto;
/* 图片也可以加个边框呼应整体风格(可选) */
/* border: 2px solid var(--color-base); */
}
.banner-right {
flex: 1;
text-align: right;
}
.title {
color: var(--color-base);
font-weight: 700; /* 加粗标题,增加力量感 */
letter-spacing: -0.02em; /* 稍微收紧字间距,更现代 */
}
.subtitle {
font-size: 20px;
margin: .3em 0 1.5em;
color: var(--color-base);
opacity: 0.8; /* 用透明度区分层级,而不是颜色 */
}
.divider {
height: 1px;
/* 修改:去除半透明白色,改为实色,以匹配纯色背景 */
background: var(--color-base);
opacity: 0.2; /*以此控制线条轻重*/
margin-bottom: 1.2em;
}
.count {
font-size: 16px;
margin: 0;
font-family: monospace; /* 数字使用等宽字体,增加一种“数据感/机械感” */
}
/* ≤600 px 时纵向布局 */
@media(max-width: 600px) {
.main-banner {
flex-direction: column;
text-align: center;
/* 移动端可以取消硬阴影,防止占地太大 */
box-shadow: none;
}
.banner-right {
text-align: center;
}
.divider {
width: 80%;
margin: 12px auto;
}
}