MediaWiki:Common.css:修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* ==================================================== | /* ==================================================== | ||
MediaWiki | MediaWiki 现代干练风格 (低圆角、表格强化) | ||
适用版本:1.35+ / 1.39+ ( | 适用版本:1.35+ / 1.39+ (Vector 2022 及旧版兼容) | ||
特点:低圆角、硬朗边框、表格阴影与条纹、信息层级清晰 | |||
==================================================== */ | ==================================================== */ | ||
/* ---------- | /* ---------- 基础排版 ---------- */ | ||
body { | body { | ||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | ||
font-size: 16px; | font-size: 16px; | ||
line-height: 1.65; | line-height: 1.65; | ||
color: #1e293b; | color: #1e293b; | ||
background-color: # | background-color: #f1f5f9; /* 浅灰蓝底 */ | ||
} | } | ||
/* | /* ---------- 内容主容器 (低圆角、清晰边框) ---------- */ | ||
.mw-body { | .mw-body { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
border-radius: | border-radius: 4px; /* 低圆角,更利落 */ | ||
box-shadow: 0 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); | ||
padding: 2rem 2.5rem; | padding: 2rem 2.5rem; | ||
margin-top: 0.5rem; | margin-top: 0.5rem; | ||
border: 1px solid | border: 1px solid #d1d9e6; /* 明显边框 */ | ||
} | } | ||
/* ---------- | /* ---------- 标题与层级 ---------- */ | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
font-weight: 600; | font-weight: 600; | ||
letter-spacing: -0. | letter-spacing: -0.01em; | ||
line-height: 1.3; | line-height: 1.3; | ||
color: #0f172a; | color: #0f172a; | ||
} | } | ||
h1 { | h1 { | ||
font-size: 2.2rem; | font-size: 2.2rem; | ||
border-bottom: 3px solid # | border-bottom: 3px solid #cbd5e1; /* 硬朗底边 */ | ||
padding-bottom: 0.4rem; | padding-bottom: 0.4rem; | ||
margin-bottom: 1.2rem; | margin-bottom: 1.2rem; | ||
| 第41行: | 第41行: | ||
h2 { | h2 { | ||
font-size: 1.7rem; | font-size: 1.7rem; | ||
border-bottom: 2px solid # | border-bottom: 2px solid #d1d9e6; | ||
padding-bottom: 0.3rem; | padding-bottom: 0.3rem; | ||
margin-top: 2rem; | margin-top: 2rem; | ||
| 第51行: | 第51行: | ||
} | } | ||
/* ---------- | /* ---------- 链接 ---------- */ | ||
a { | a { | ||
color: # | color: #1e4f8a; /* 深蓝,更稳重 */ | ||
text-decoration: none; | text-decoration: none; | ||
border-bottom: 1px solid transparent; | border-bottom: 1px solid transparent; | ||
transition: border-color 0.1s ease, color 0.1s ease; | |||
} | } | ||
a:hover { | a:hover { | ||
color: # | color: #0b2b4a; | ||
border-bottom-color: # | border-bottom-color: #1e4f8a; | ||
} | } | ||
.mw-body a.external { | .mw-body a.external { | ||
background: none; | background: none; | ||
| 第73行: | 第72行: | ||
font-size: 0.75em; | font-size: 0.75em; | ||
margin-left: 0.2em; | margin-left: 0.2em; | ||
opacity: 0. | opacity: 0.6; | ||
} | } | ||
/* | /* ---------- 导航与页签 (低圆角) ---------- */ | ||
.vector-page-tabs .mw-list-item a { | .vector-page-tabs .mw-list-item a { | ||
border-radius: | border-radius: 2px 2px 0 0; /* 几乎直角,轻微修饰 */ | ||
padding: 0.6rem 1.2rem; | padding: 0.6rem 1.2rem; | ||
font-weight: 500; | font-weight: 500; | ||
| 第95行: | 第85行: | ||
.vector-page-tabs .mw-list-item a:hover { | .vector-page-tabs .mw-list-item a:hover { | ||
background: # | background: #e9edf2; | ||
color: #0f172a; | color: #0f172a; | ||
} | } | ||
| 第101行: | 第91行: | ||
.vector-page-tabs .mw-list-item.selected a { | .vector-page-tabs .mw-list-item.selected a { | ||
background: #ffffff; | background: #ffffff; | ||
color: # | color: #1e4f8a; | ||
border-bottom: 3px solid # | border-bottom: 3px solid #1e4f8a; | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
/* ---------- | /* ---------- 表格美化(核心) ---------- */ | ||
.wikitable { | .wikitable { | ||
border-collapse: | border-collapse: collapse; /* 合并边框,更紧凑 */ | ||
border- | border-radius: 0; /* 完全直角,硬朗 */ | ||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); | |||
box-shadow: 0 2px 8px rgba(0,0,0,0. | |||
width: 100%; | width: 100%; | ||
background: white; | background: white; | ||
border: 1px solid #d1d9e6; /* 外边框 */ | |||
font-size: 0.95rem; | |||
} | } | ||
/* 表头 */ | |||
.wikitable th { | .wikitable th { | ||
background: # | background: #e9edf2; /* 浅灰蓝 */ | ||
color: # | color: #0f172a; | ||
font-weight: 600; | font-weight: 600; | ||
padding: 0.75rem 1rem; | padding: 0.75rem 1rem; | ||
border | border: 1px solid #cbd5e1; /* 单元格边框 */ | ||
text-align: left; | |||
letter-spacing: 0.02em; | |||
} | } | ||
/* 表体单元格 */ | |||
.wikitable td { | .wikitable td { | ||
padding: 0. | padding: 0.65rem 1rem; | ||
border-bottom: | border: 1px solid #d1d9e6; /* 单元格边框 */ | ||
background-color: #ffffff; | |||
} | |||
/* 交替行条纹 (斑马线) */ | |||
.wikitable tr:nth-child(even) td { | |||
background-color: #f8fafc; /* 极浅灰 */ | |||
} | |||
/* 行悬停效果 */ | |||
.wikitable tr:hover td { | |||
background-color: #eef2f7; /* 浅灰蓝悬停 */ | |||
} | |||
/* 表头与表体之间的分隔强调 */ | |||
.wikitable thead th { | |||
border-bottom-width: 2px; | |||
border-bottom-color: #94a3b8; | |||
} | } | ||
.wikitable | /* 表格内特殊状态 (如排序指示) */ | ||
.wikitable .sortheader { | |||
cursor: pointer; | |||
} | |||
.wikitable .sortheader:hover { | |||
background: #d1d9e6; | |||
} | } | ||
/* ---------- 信息框 ( | /* ---------- 信息框 (直角风格) ---------- */ | ||
.infobox { | .infobox { | ||
background: #f8fafc; | background: #f8fafc; | ||
border: 1px solid # | border: 1px solid #cbd5e1; | ||
border-radius: | border-radius: 2px; /* 低圆角 */ | ||
padding: 1.2rem | padding: 1rem 1.2rem; | ||
box-shadow: 0 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); | ||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
| 第163行: | 第166行: | ||
padding: 0.4rem 0.6rem; | padding: 0.4rem 0.6rem; | ||
border: none; | border: none; | ||
border-bottom: 1px solid #e2e8f0; | |||
} | |||
.infobox tr:last-child th, | |||
.infobox tr:last-child td { | |||
border-bottom: none; | |||
} | } | ||
| 第169行: | 第178行: | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
text-align: center; | text-align: center; | ||
background: # | background: #e2e8f0; | ||
border-radius: | border-radius: 2px; | ||
padding: 0.3rem 0.5rem; | padding: 0.3rem 0.5rem; | ||
} | } | ||
/* ---------- 引用与参考文献 ---------- */ | /* ---------- 引用与参考文献 ---------- */ | ||
ol.references { | ol.references { | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
background: #f8fafc; | background: #f8fafc; | ||
padding: | padding: 0.8rem 1.5rem 0.8rem 2.5rem; | ||
border- | border-left: 4px solid #94a3b8; /* 硬边指示 */ | ||
border- | border-radius: 0; | ||
} | } | ||
/* ---------- 消息框 ( | /* ---------- 消息框 (直角) ---------- */ | ||
.msgbox, .messagebox { | .msgbox, .messagebox { | ||
border-radius: | border-radius: 0; /* 完全直角 */ | ||
padding: 1rem 1.5rem; | padding: 1rem 1.5rem; | ||
background: #f1f5f9; | background: #f1f5f9; | ||
border-left: 6px solid #64748b; | border-left: 6px solid #64748b; | ||
box-shadow: 0 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); | ||
margin: 1.2rem 0; | margin: 1.2rem 0; | ||
border-top: 1px solid #d1d9e6; | |||
border-right: 1px solid #d1d9e6; | |||
border-bottom: 1px solid #d1d9e6; | |||
} | } | ||
.msgbox.warning, .messagebox.warning { | .msgbox.warning, .messagebox.warning { | ||
border-left-color: # | border-left-color: #b45309; | ||
background: #fffbeb; | background: #fffbeb; | ||
} | } | ||
.msgbox.error, .messagebox.error { | .msgbox.error, .messagebox.error { | ||
border-left-color: # | border-left-color: #b91c1c; | ||
background: #fef2f2; | background: #fef2f2; | ||
} | } | ||
.msgbox.success, .messagebox.success { | .msgbox.success, .messagebox.success { | ||
border-left-color: # | border-left-color: #15803d; | ||
background: #f0fdf4; | background: #f0fdf4; | ||
} | } | ||
/* ---------- | /* ---------- 代码块 ---------- */ | ||
pre, .mw-code { | pre, .mw-code { | ||
background: #f1f5f9; | background: #f1f5f9; | ||
border: 1px solid # | border: 1px solid #cbd5e1; | ||
border-radius: | border-radius: 2px; | ||
padding: 1rem 1.5rem; | padding: 1rem 1.5rem; | ||
font-family: "JetBrains Mono", "Fira Code", monospace; | font-family: "JetBrains Mono", "Fira Code", monospace; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
overflow-x: auto; | overflow-x: auto; | ||
box-shadow: inset 0 | box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02); | ||
} | } | ||
| 第227行: | 第235行: | ||
#toc { | #toc { | ||
background: #f8fafc; | background: #f8fafc; | ||
border: 1px solid # | border: 1px solid #cbd5e1; | ||
border-radius: | border-radius: 2px; | ||
padding: | padding: 0.8rem 1.5rem; | ||
display: inline-block; | display: inline-block; | ||
box-shadow: 0 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); | ||
} | } | ||
| 第250行: | 第258行: | ||
} | } | ||
/* ---------- 编辑按钮 | /* ---------- 编辑按钮 ---------- */ | ||
.mw-editsection { | .mw-editsection { | ||
font-size: 0.8rem; | font-size: 0.8rem; | ||
| 第256行: | 第264行: | ||
.mw-editsection a { | .mw-editsection a { | ||
background: # | background: #e9edf2; | ||
padding: 0. | padding: 0.15rem 0.7rem; | ||
border-radius: | border-radius: 2px; | ||
color: # | color: #1e293b; | ||
border: 1px solid # | border: 1px solid #cbd5e1; | ||
transition: all 0. | transition: all 0.1s; | ||
} | } | ||
.mw-editsection a:hover { | .mw-editsection a:hover { | ||
background: # | background: #1e4f8a; | ||
color: white; | color: white; | ||
border-color: # | border-color: #1e4f8a; | ||
} | } | ||
/* ---------- | /* ---------- 响应式 ---------- */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.mw-body { | .mw-body { | ||
padding: 1rem 1.2rem; | padding: 1rem 1.2rem; | ||
border-radius: | border-radius: 2px; | ||
} | } | ||
| 第287行: | 第295行: | ||
} | } | ||
/* ---------- 滚动条 ( | /* ---------- 滚动条 (硬朗风格) ---------- */ | ||
::-webkit-scrollbar { | ::-webkit-scrollbar { | ||
width: | width: 10px; | ||
height: | height: 10px; | ||
} | } | ||
::-webkit-scrollbar-track { | ::-webkit-scrollbar-track { | ||
background: # | background: #e2e8f0; | ||
border-radius: | border-radius: 0; | ||
} | } | ||
::-webkit-scrollbar-thumb { | ::-webkit-scrollbar-thumb { | ||
background: # | background: #94a3b8; | ||
border-radius: | border-radius: 0; | ||
border: 1px solid #64748b; | |||
} | } | ||
::-webkit-scrollbar-thumb:hover { | ::-webkit-scrollbar-thumb:hover { | ||
background: # | background: #64748b; | ||
} | } | ||
/* ---------- | /* ---------- 打印 ---------- */ | ||
@media print { | @media print { | ||
.mw-body { | .mw-body { | ||
box-shadow: none; | box-shadow: none; | ||
border: | border: 1px solid #ccc; | ||
padding: 0; | padding: 0.5rem; | ||
} | } | ||
.wikitable { | |||
border | box-shadow: none; | ||
border: 1px solid #999; | |||
} | } | ||
. | .wikitable th { | ||
background: #eee !important; | |||
} | } | ||
} | } | ||
2026年8月19日 (三) 02:51的版本
/* ====================================================
MediaWiki 现代干练风格 (低圆角、表格强化)
适用版本:1.35+ / 1.39+ (Vector 2022 及旧版兼容)
特点:低圆角、硬朗边框、表格阴影与条纹、信息层级清晰
==================================================== */
/* ---------- 基础排版 ---------- */
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #1e293b;
background-color: #f1f5f9; /* 浅灰蓝底 */
}
/* ---------- 内容主容器 (低圆角、清晰边框) ---------- */
.mw-body {
background-color: #ffffff;
border-radius: 4px; /* 低圆角,更利落 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
padding: 2rem 2.5rem;
margin-top: 0.5rem;
border: 1px solid #d1d9e6; /* 明显边框 */
}
/* ---------- 标题与层级 ---------- */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: #0f172a;
}
h1 {
font-size: 2.2rem;
border-bottom: 3px solid #cbd5e1; /* 硬朗底边 */
padding-bottom: 0.4rem;
margin-bottom: 1.2rem;
}
h2 {
font-size: 1.7rem;
border-bottom: 2px solid #d1d9e6;
padding-bottom: 0.3rem;
margin-top: 2rem;
}
h3 {
font-size: 1.3rem;
font-weight: 600;
}
/* ---------- 链接 ---------- */
a {
color: #1e4f8a; /* 深蓝,更稳重 */
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.1s ease, color 0.1s ease;
}
a:hover {
color: #0b2b4a;
border-bottom-color: #1e4f8a;
}
.mw-body a.external {
background: none;
padding-right: 0;
}
.mw-body a.external:after {
content: "↗";
font-size: 0.75em;
margin-left: 0.2em;
opacity: 0.6;
}
/* ---------- 导航与页签 (低圆角) ---------- */
.vector-page-tabs .mw-list-item a {
border-radius: 2px 2px 0 0; /* 几乎直角,轻微修饰 */
padding: 0.6rem 1.2rem;
font-weight: 500;
color: #475569;
transition: background 0.15s;
}
.vector-page-tabs .mw-list-item a:hover {
background: #e9edf2;
color: #0f172a;
}
.vector-page-tabs .mw-list-item.selected a {
background: #ffffff;
color: #1e4f8a;
border-bottom: 3px solid #1e4f8a;
font-weight: 600;
}
/* ---------- 表格美化(核心) ---------- */
.wikitable {
border-collapse: collapse; /* 合并边框,更紧凑 */
border-radius: 0; /* 完全直角,硬朗 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
width: 100%;
background: white;
border: 1px solid #d1d9e6; /* 外边框 */
font-size: 0.95rem;
}
/* 表头 */
.wikitable th {
background: #e9edf2; /* 浅灰蓝 */
color: #0f172a;
font-weight: 600;
padding: 0.75rem 1rem;
border: 1px solid #cbd5e1; /* 单元格边框 */
text-align: left;
letter-spacing: 0.02em;
}
/* 表体单元格 */
.wikitable td {
padding: 0.65rem 1rem;
border: 1px solid #d1d9e6; /* 单元格边框 */
background-color: #ffffff;
}
/* 交替行条纹 (斑马线) */
.wikitable tr:nth-child(even) td {
background-color: #f8fafc; /* 极浅灰 */
}
/* 行悬停效果 */
.wikitable tr:hover td {
background-color: #eef2f7; /* 浅灰蓝悬停 */
}
/* 表头与表体之间的分隔强调 */
.wikitable thead th {
border-bottom-width: 2px;
border-bottom-color: #94a3b8;
}
/* 表格内特殊状态 (如排序指示) */
.wikitable .sortheader {
cursor: pointer;
}
.wikitable .sortheader:hover {
background: #d1d9e6;
}
/* ---------- 信息框 (直角风格) ---------- */
.infobox {
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 2px; /* 低圆角 */
padding: 1rem 1.2rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
float: right;
clear: right;
margin: 0 0 1rem 1.5rem;
max-width: 320px;
width: 100%;
}
.infobox th, .infobox td {
padding: 0.4rem 0.6rem;
border: none;
border-bottom: 1px solid #e2e8f0;
}
.infobox tr:last-child th,
.infobox tr:last-child td {
border-bottom: none;
}
.infobox .infobox-header {
font-weight: 700;
font-size: 1.2rem;
text-align: center;
background: #e2e8f0;
border-radius: 2px;
padding: 0.3rem 0.5rem;
}
/* ---------- 引用与参考文献 ---------- */
ol.references {
font-size: 0.9rem;
background: #f8fafc;
padding: 0.8rem 1.5rem 0.8rem 2.5rem;
border-left: 4px solid #94a3b8; /* 硬边指示 */
border-radius: 0;
}
/* ---------- 消息框 (直角) ---------- */
.msgbox, .messagebox {
border-radius: 0; /* 完全直角 */
padding: 1rem 1.5rem;
background: #f1f5f9;
border-left: 6px solid #64748b;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
margin: 1.2rem 0;
border-top: 1px solid #d1d9e6;
border-right: 1px solid #d1d9e6;
border-bottom: 1px solid #d1d9e6;
}
.msgbox.warning, .messagebox.warning {
border-left-color: #b45309;
background: #fffbeb;
}
.msgbox.error, .messagebox.error {
border-left-color: #b91c1c;
background: #fef2f2;
}
.msgbox.success, .messagebox.success {
border-left-color: #15803d;
background: #f0fdf4;
}
/* ---------- 代码块 ---------- */
pre, .mw-code {
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 2px;
padding: 1rem 1.5rem;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 0.9rem;
overflow-x: auto;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02);
}
/* ---------- 目录 (TOC) ---------- */
#toc {
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 2px;
padding: 0.8rem 1.5rem;
display: inline-block;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
#toc ul {
margin-left: 0.5rem;
}
#toc li {
list-style: none;
padding: 0.15rem 0;
}
.toctitle h2 {
font-size: 1.1rem;
border-bottom: none;
margin: 0 0 0.5rem 0;
display: inline-block;
}
/* ---------- 编辑按钮 ---------- */
.mw-editsection {
font-size: 0.8rem;
}
.mw-editsection a {
background: #e9edf2;
padding: 0.15rem 0.7rem;
border-radius: 2px;
color: #1e293b;
border: 1px solid #cbd5e1;
transition: all 0.1s;
}
.mw-editsection a:hover {
background: #1e4f8a;
color: white;
border-color: #1e4f8a;
}
/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
.mw-body {
padding: 1rem 1.2rem;
border-radius: 2px;
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }
.infobox {
float: none;
margin: 1rem auto;
max-width: 100%;
}
}
/* ---------- 滚动条 (硬朗风格) ---------- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #e2e8f0;
border-radius: 0;
}
::-webkit-scrollbar-thumb {
background: #94a3b8;
border-radius: 0;
border: 1px solid #64748b;
}
::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* ---------- 打印 ---------- */
@media print {
.mw-body {
box-shadow: none;
border: 1px solid #ccc;
padding: 0.5rem;
}
.wikitable {
box-shadow: none;
border: 1px solid #999;
}
.wikitable th {
background: #eee !important;
}
}