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", "Microsoft YaHei", sans-serif; |
|||
background-color: #ffffff; |
|||
"Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei", |
|||
line-height: 1.7; |
|||
"Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic"; |
|||
color: #333; |
|||
} |
} |
||
/* =========================== |
/* =========================== |
||
横幅 |
顶部横幅 |
||
=========================== */ |
=========================== */ |
||
.banner { |
.banner { |
||
height: auto; |
|||
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( |
background: linear-gradient(90deg, #b30000, #e64545); |
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|||
color: white; |
|||
font-weight: bold; |
|||
border-radius: 12px; |
border-radius: 12px; |
||
color: white; |
|||
padding: 24px 20px; |
|||
margin-bottom: 25px; |
|||
text-align: center; |
text-align: center; |
||
box-shadow: 0 6px 14px rgba(0,0,0,0.2); |
|||
} |
} |
||
.banner .chinese-text { font-size: 26px; font-weight: 700; margin-bottom: 8px; } |
|||
.banner .english-text { font-size: 16px; opacity: 0.9; } |
|||
/* =========================== |
|||
.banner-text { |
|||
主分类模块 |
|||
margin: 0; |
|||
=========================== */ |
|||
line-height: 1.4; |
|||
.main-category { |
|||
} |
|||
background: #fafafa; |
|||
border-left: 6px solid #b30000; |
|||
.banner .chinese-text { |
|||
font-size: 24px; |
|||
font-weight: 700; |
|||
} |
|||
.banner .english-text { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
opacity: 0.9; |
|||
} |
} |
||
/* =========================== |
/* =========================== |
||
内容 |
内容卡片 |
||
=========================== */ |
=========================== */ |
||
.content-box { |
.content-box { |
||
background: #ffffff; |
|||
border-radius: 12px; |
|||
border-radius: 10px; |
|||
border: 1px solid #e0e0e0; |
border: 1px solid #e0e0e0; |
||
padding: 22px; |
|||
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|||
margin: 10px; |
|||
box-shadow: 0 2px 8px rgba(0,0,0,0.05); |
|||
transition: all 0.3s ease; |
|||
} |
} |
||
.content-box |
.content-box:hover { |
||
transform: translateY(-6px); |
|||
position: relative; |
|||
box-shadow: 0 8px 20px rgba(0,0,0,0.15); |
|||
padding-bottom: 10px; |
|||
margin-bottom: 10px; |
|||
border-bottom: 2px solid #b30000; |
|||
font-size: 1.25rem; |
|||
} |
} |
||
.content-box |
.content-box h2 { |
||
font-size: 1.25rem; |
|||
margin-bottom: 12px; |
|||
border-left: 5px solid #b30000; |
|||
padding-left: 10px; |
|||
color: #333; |
color: #333; |
||
} |
} |
||
/* =========================== |
|||
.content-box:hover { |
|||
区块分色 |
|||
transform: translateY(-5px); |
|||
=========================== */ |
|||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
|||
.section-think { background: #f7f6f4; padding: 30px 20px; border-radius: 12px; } |
|||
} |
|||
.section-engineering { background: #f4f8fb; padding: 30px 20px; border-radius: 12px; } |
|||
.section-growth { background: #f6faf6; padding: 30px 20px; border-radius: 12px; } |
|||
.section-structure { background: #ffffff; padding: 30px 20px; border-radius: 12px; } |
|||
/* =========================== |
/* =========================== |
||
| 第79行: | 第77行: | ||
.flex-container { |
.flex-container { |
||
display: flex; |
display: flex; |
||
flex-wrap: wrap; |
|||
justify-content: space-between; |
justify-content: space-between; |
||
gap: |
gap: 18px; |
||
} |
} |
||
.flex-container .content-box { |
.flex-container .content-box { |
||
flex: 1; |
flex: 1 1 calc(33% - 18px); |
||
min-width: 280px; |
|||
box-sizing: border-box; |
box-sizing: border-box; |
||
} |
} |
||
/* 让每个部分首卡更突出 */ |
|||
/* =========================== |
|||
.flex-container .content-box:first-child { |
|||
特殊样式 |
|||
flex: 2 1 calc(66% - 12px); |
|||
=========================== */ |
|||
background: linear-gradient(135deg, #fff8f8, #ffeaea); |
|||
/* 让重定向的内链变成绿色 */ |
|||
.mw-redirect { |
|||
color: #009944; |
|||
} |
} |
||
| 第100行: | 第96行: | ||
响应式设计 |
响应式设计 |
||
=========================== */ |
=========================== */ |
||
/* 平板和大屏幕设备 */ |
|||
@media screen and (min-width: 768px) { |
|||
.banner .chinese-text { |
|||
font-size: 28px; |
|||
} |
|||
.banner .english-text { |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
/* 手机设备 */ |
|||
@media screen and (max-width: 768px) { |
@media screen and (max-width: 768px) { |
||
.flex-container { |
.flex-container { flex-direction: column; } |
||
.flex-container .content-box { flex: 1 1 100%; } |
|||
flex-direction: column; |
|||
.banner .chinese-text { font-size: 22px; } |
|||
} |
|||
.banner .english-text { font-size: 14px; } |
|||
.flex-container .content-box { |
|||
max-width: 100%; |
|||
margin-bottom: 20px; |
|||
} |
|||
.banner .chinese-text, |
|||
.banner .english-text { |
|||
text-align: center; |
|||
} |
|||
} |
|||
/* 小屏手机设备 */ |
|||
@media screen and (max-width: 480px) { |
|||
.banner .chinese-text { |
|||
font-size: 20px; |
|||
} |
|||
.banner .english-text { |
|||
font-size: 14px; |
|||
} |
|||
} |
} |
||
2025年10月10日 (五) 08:20的版本
/* ===========================
字体与基础设置
=========================== */
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",
"PingFang SC", "Microsoft YaHei", sans-serif;
background-color: #ffffff;
line-height: 1.7;
color: #333;
}
/* ===========================
顶部横幅
=========================== */
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #b30000, #e64545);
border-radius: 12px;
color: white;
padding: 24px 20px;
margin-bottom: 25px;
text-align: center;
box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}
.banner .chinese-text { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.banner .english-text { font-size: 16px; opacity: 0.9; }
/* ===========================
主分类模块
=========================== */
.main-category {
background: #fafafa;
border-left: 6px solid #b30000;
}
/* ===========================
内容卡片
=========================== */
.content-box {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e0e0e0;
padding: 22px;
margin: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.content-box:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.content-box h2 {
font-size: 1.25rem;
margin-bottom: 12px;
border-left: 5px solid #b30000;
padding-left: 10px;
color: #333;
}
/* ===========================
区块分色
=========================== */
.section-think { background: #f7f6f4; padding: 30px 20px; border-radius: 12px; }
.section-engineering { background: #f4f8fb; padding: 30px 20px; border-radius: 12px; }
.section-growth { background: #f6faf6; padding: 30px 20px; border-radius: 12px; }
.section-structure { background: #ffffff; padding: 30px 20px; border-radius: 12px; }
/* ===========================
Flex 布局
=========================== */
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 18px;
}
.flex-container .content-box {
flex: 1 1 calc(33% - 18px);
min-width: 280px;
box-sizing: border-box;
}
/* 让每个部分首卡更突出 */
.flex-container .content-box:first-child {
flex: 2 1 calc(66% - 12px);
background: linear-gradient(135deg, #fff8f8, #ffeaea);
}
/* ===========================
响应式设计
=========================== */
@media screen and (max-width: 768px) {
.flex-container { flex-direction: column; }
.flex-container .content-box { flex: 1 1 100%; }
.banner .chinese-text { font-size: 22px; }
.banner .english-text { font-size: 14px; }
}