MediaWiki:Common.css:修订间差异
MediaWiki界面页面
更多操作
删除的内容 添加的内容
测试新版样式 标签:已被回退 |
回退 标签:手工回退 |
||
| 第1行: | 第1行: | ||
/* 全局字体设置,覆盖东亚语言 */ |
|||
/* ========================================================= |
|||
✅ 全局字体设置(增强中日韩支持 + 系统一致性) |
|||
========================================================= */ |
|||
body { |
body { |
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, |
||
"Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP", |
"Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP", |
||
"Noto Sans KR", "PingFang SC", "Hiragino Sans GB", |
"Noto Sans KR", sans-serif, "PingFang SC", "Hiragino Sans GB", |
||
"WenQuanYi Micro Hei", "SimSun", "SimHei", |
"Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei", |
||
"MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic" |
"Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic"; |
||
color: #222; /* 全站文字颜色微调 */ |
|||
| ⚫ | |||
} |
} |
||
/* 横幅标语 */ |
|||
/* ========================================================= |
|||
| ⚫ | |||
🟥 Banner 横幅区(首页头部标语) |
|||
| ⚫ | |||
========================================================= */ |
|||
| ⚫ | |||
display: flex; |
display: flex; |
||
flex-direction: column; |
flex-direction: column; |
||
justify-content: center; |
justify-content: center; |
||
align-items: center; |
align-items: center; /* 居中对齐 */ |
||
background: linear-gradient(to right, # |
background: linear-gradient(to right, #b30000, #cc3300); /* 渐变背景 */ |
||
color: white; |
color: white; /* 白色字体,提升对比度 */ |
||
font-weight: bold; |
font-weight: bold; |
||
border-radius: 12px; |
border-radius: 12px; /* 圆角优化 */ |
||
padding: |
padding: 12px 24px; /* 增加上下 padding */ |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
text-align: center; |
text-align: center; |
||
} |
} |
||
. |
.banner-text { |
||
margin: 0; |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
font-size: 24px; /* 默认大小 */ |
|||
font-weight: 700; |
font-weight: 700; |
||
margin-bottom: 6px; |
|||
} |
} |
||
. |
.banner .english-text { |
||
font-size: 16px; |
font-size: 16px; /* 默认大小 */ |
||
font-weight: 500; |
font-weight: 500; |
||
opacity: 0.9; |
opacity: 0.9; |
||
letter-spacing: 0.5px; |
|||
} |
} |
||
/* 当屏幕宽度大于 768px(如平板和大屏幕设备) */ |
|||
/* 副标题(可选项) */ |
|||
| ⚫ | |||
.hero-banner .subtitle { |
|||
.banner .chinese-text { |
|||
| ⚫ | |||
font-size: 28px; |
|||
color: rgba(255,255,255,0.85); |
|||
} |
|||
margin-top: 4px; |
|||
letter-spacing: 0.5px; |
|||
| ⚫ | |||
| ⚫ | |||
/* 响应式调整 */ |
|||
font-size: 18px; |
|||
| ⚫ | |||
} |
|||
| ⚫ | |||
| ⚫ | |||
} |
} |
||
/* 当屏幕宽度小于 480px(如手机设备) */ |
|||
/* ========================================================= |
|||
@media screen and (max-width: 480px) { |
|||
🧩 Section 模块容器(可重复使用) |
|||
.banner .chinese-text { |
|||
========================================================= */ |
|||
font-size: 20px; |
|||
.homepage-section { |
|||
} |
|||
margin: 30px 0; |
|||
.banner .english-text { |
|||
| ⚫ | |||
} |
|||
} |
} |
||
| ⚫ | |||
/* ========================================================= |
|||
📦 内容块(卡片样式) |
|||
========================================================= */ |
|||
.content-box { |
.content-box { |
||
| ⚫ | |||
background-color: #fff; |
|||
| ⚫ | |||
border-radius: 10px; |
border-radius: 10px; |
||
border: 1px solid #e0e0e0; |
border: 1px solid #e0e0e0; |
||
| ⚫ | |||
transition: transform 0.3s ease, box-shadow 0.3s ease; |
transition: transform 0.3s ease, box-shadow 0.3s ease; |
||
} |
} |
||
| 第77行: | 第73行: | ||
.content-box:hover { |
.content-box:hover { |
||
transform: translateY(-5px); |
transform: translateY(-5px); |
||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0. |
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
||
} |
} |
||
| ⚫ | |||
.content-box h2 { |
.content-box h2 { |
||
position: relative; |
position: relative; |
||
padding-bottom: 10px; |
padding-bottom: 10px; |
||
margin-bottom: 10px; |
margin-bottom: 10px; |
||
border-bottom: 2px solid |
border-bottom: 2px solid red; |
||
| ⚫ | |||
} |
} |
||
/* 段落样式 */ |
|||
.content-box p { |
.content-box p { |
||
line-height: 1.6; |
|||
color: #333; |
|||
| ⚫ | |||
} |
} |
||
/* Flex 容器 */ |
|||
/* ========================================================= |
|||
🧱 Flex 布局容器(多列展示) |
|||
========================================================= */ |
|||
.flex-container { |
.flex-container { |
||
display: flex; |
display: flex; |
||
justify-content: space-between; |
justify-content: space-between; |
||
gap: 20px; |
|||
gap: 24px; /* ★ 原 gap:20px → 改为 24px,空间更舒适 */ |
|||
} |
} |
||
.flex-container .content-box { |
.flex-container .content-box { |
||
flex: 1 |
flex: 1; |
||
max-width: 33.33%; |
|||
box-sizing: border-box; |
box-sizing: border-box; |
||
min-width: 250px; /* 避免在窄屏下压缩过头 */ |
|||
} |
} |
||
/* 移动端 |
/* 移动端优化 */ |
||
@media (max-width: 768px) { |
@media (max-width: 768px) { |
||
.flex-container { |
.flex-container { |
||
flex-direction: column; |
flex-direction: column; |
||
} |
} |
||
.flex-container .content-box { |
.flex-container .content-box { |
||
max-width: 100%; |
max-width: 100%; |
||
margin-bottom: 20px; |
margin-bottom: 20px; |
||
} |
} |
||
} |
|||
.banner .chinese-text, |
|||
/* ========================================================= |
|||
.banner .english-text { |
|||
🌿 细节增强:重定向、页脚说明等 |
|||
text-align: center; |
|||
========================================================= */ |
|||
| ⚫ | |||
.mw-redirect { |
|||
} |
|||
color: #009944; /* ★ 深绿色,较柔和 */ |
|||
.banner .english-text { |
|||
font-size: 14px; |
|||
} |
|||
} |
} |
||
/* 让重定向的内链变成绿色 */ |
|||
/* 页脚标注(可在首页底部添加) */ |
|||
. |
.mw-redirect { |
||
color: green; |
|||
| ⚫ | |||
color: #777; |
|||
margin-top: 40px; |
|||
border-top: 1px solid #eee; |
|||
padding-top: 12px; |
|||
letter-spacing: 0.3px; |
|||
} |
} |
||
2025年10月9日 (四) 13:07的版本
/* 全局字体设置,覆盖东亚语言 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP",
"Noto Sans KR", sans-serif, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei",
"Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic";
}
/* 横幅标语 */
.banner {
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* 居中对齐 */
background: linear-gradient(to right, #b30000, #cc3300); /* 渐变背景 */
color: white; /* 白色字体,提升对比度 */
font-weight: bold;
border-radius: 12px; /* 圆角优化 */
padding: 12px 24px; /* 增加上下 padding */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */
text-align: center;
}
.banner-text {
margin: 0;
line-height: 1.4; /* 让文本更易读 */
}
.banner .chinese-text {
font-size: 24px; /* 默认大小 */
font-weight: 700;
}
.banner .english-text {
font-size: 16px; /* 默认大小 */
font-weight: 500;
opacity: 0.9;
}
/* 当屏幕宽度大于 768px(如平板和大屏幕设备) */
@media screen and (min-width: 768px) {
.banner .chinese-text {
font-size: 28px;
}
.banner .english-text {
font-size: 18px;
}
}
/* 当屏幕宽度小于 480px(如手机设备) */
@media screen and (max-width: 480px) {
.banner .chinese-text {
font-size: 20px;
}
.banner .english-text {
font-size: 14px;
}
}
/* 内容块样式 */
.content-box {
margin: 10px;
padding: 20px;
border-radius: 10px;
border: 1px solid #e0e0e0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.content-box h2 {
position: relative;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 2px solid red;
}
.content-box p {
line-height: 1.6;
}
/* Flex 容器 */
.flex-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.flex-container .content-box {
flex: 1;
max-width: 33.33%;
box-sizing: border-box;
}
/* 移动端优化 */
@media (max-width: 768px) {
.flex-container {
flex-direction: column;
}
.flex-container .content-box {
max-width: 100%;
margin-bottom: 20px;
}
.banner .chinese-text,
.banner .english-text {
text-align: center;
font-size: 18px;
}
.banner .english-text {
font-size: 14px;
}
}
/* 让重定向的内链变成绿色 */
.mw-redirect {
color: green;
}