MediaWiki:Common.css
跳转到导航
跳转到搜索
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
- Opera：按 Ctrl-F5。
/* ---------- 全局重置 & 基础颜色 ---------- */
html,
body {
background-color: #0d1117 !important;
/* 深色基底，类似 GitHub 暗色 */
color: #e6edf3 !important;
/* 主文字色：亮白灰，醒目且不刺眼 */
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
/* 所有文本基础继承 */
div,
p,
li,
span,
td,
th,
blockquote,
figcaption,
cite,
summary,
details,
label,
input,
textarea,
select,
button {
color: #e6edf3 !important;
}
/* ---------- 标题：更亮、更醒目 ---------- */
h1,
h2,
h3,
h4,
h5,
h6,
.firstHeading,
.mw-headline,
.personaltitle,
#firstHeading,
#siteSub,
#contentSub {
color: #f0f6fc !important;
/* 比正文更白 */
font-weight: 600 !important;
letter-spacing: 0.02em;
}
/* 标题下边框微调 */
h2,
h3,
h4,
h5,
h6 {
border-bottom-color: #30363d !important;
}
/* ---------- 链接：亮蓝 + 悬停加强 ---------- */
a,
a:visited,
a:active,
.mw-body a,
.mw-body a:visited,
#mw-panel a,
#mw-panel a:visited,
.vector-menu a,
.vector-menu a:visited {
color: #58a6ff !important;
/* 明亮的蓝色，醒目且与暗色搭配 */
text-decoration: none;
transition: color 0.15s ease, text-shadow 0.15s ease;
}
a:hover,
a:focus,
.mw-body a:hover,
.vector-menu a:hover {
color: #79c0ff !important;
/* 悬停时更亮 */
text-shadow: 0 0 6px rgba(88, 166, 255, 0.3) !important;
text-decoration: underline !important;
}
/* 已访问链接 – 保持醒目，稍微变化色调 */
a:visited {
color: #a5b4fc !important;
/* 淡紫蓝，区分未访问但依然明亮 */
}
/* ---------- 页面主体区域 (content) ---------- */
.mw-body,
#content,
#mw-content-text,
.ve-init-mw-desktopArticleTarget-targetContainer {
background-color: #161b22 !important;
/* 比 body 稍亮，形成层次 */
color: #e6edf3 !important;
border-color: #30363d !important;
box-shadow: 0 0 0 1px #30363d !important;
/* 精致边框 */
}
/* 内容中的段落 */
.mw-body p,
#content p {
color: #e6edf3 !important;
line-height: 1.7;
}
/* ---------- 表格：暗色背景 + 亮色文字 ---------- */
table,
.wikitable,
.mw-datatable {
background-color: #0d1117 !important;
color: #e6edf3 !important;
border-color: #30363d !important;
}
table th,
.wikitable th,
.mw-datatable th {
background-color: #21262d !important;
color: #f0f6fc !important;
border-color: #30363d !important;
font-weight: 600;
}
table td,
.wikitable td,
.mw-datatable td {
border-color: #30363d !important;
color: #e6edf3 !important;
}
/* 表格交替行颜色 (斑马纹) */
table tr:nth-child(even),
.wikitable tr:nth-child(even),
.mw-datatable tr:nth-child(even) {
background-color: #161b22 !important;
}
table tr:nth-child(odd),
.wikitable tr:nth-child(odd),
.mw-datatable tr:nth-child(odd) {
background-color: #0d1117 !important;
}
/* 表格 hover 高亮 (辅助阅读) */
table tr:hover,
.wikitable tr:hover,
.mw-datatable tr:hover {
background-color: #1c2333 !important;
transition: background 0.1s ease;
}
/* ---------- 代码块 & 预格式化 ---------- */
pre,
.mw-code,
.mw-json,
.mw-highlight,
.hljs,
code,
tt,
kbd,
samp,
.plainlinks pre {
background-color: #0d1117 !important;
color: #f0f6fc !important;
border-color: #30363d !important;
border-radius: 6px;
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 0.92em;
padding: 0.2em 0.5em;
}
/* 行内代码 */
code,
tt,
kbd {
background-color: #21262d !important;
color: #ffd700 !important;
/* 金色，醒目 */
padding: 0.15em 0.4em;
border-radius: 4px;
}
/* 代码块内文字保持亮色 */
pre code,
.mw-code code {
background-color: transparent !important;
color: #e6edf3 !important;
padding: 0;
}
/* ---------- 信息框 / 消息盒子 (常见于模板) ---------- */
.messagebox,
.infobox,
.ambox,
.toc,
.mw-notification,
#mw-indicators,
.warningbox,
.errorbox,
.successbox {
background-color: #161b22 !important;
border-color: #30363d !important;
color: #e6edf3 !important;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* 警告/错误类信息保持颜色语义，但文字要亮 */
.warningbox {
border-color: #daa520 !important;
background-color: #2a1f0e !important;
}
.warningbox,
.warningbox * {
color: #ffd966 !important;
}
.errorbox {
border-color: #dc3545 !important;
background-color: #2c141a !important;
}
.errorbox,
.errorbox * {
color: #f8a5b0 !important;
}
.successbox {
border-color: #28a745 !important;
background-color: #0f2b1a !important;
}
.successbox,
.successbox * {
color: #7ee08c !important;
}
/* ---------- 侧边栏 (导航) ---------- */
#mw-panel,
#mw-navigation,
.vector-menu-tabs,
.vector-menu-dropdown,
#mw-head,
#left-navigation,
#right-navigation {
background-color: #0d1117 !important;
border-color: #30363d !important;
}
#mw-panel .portal .body ul li a,
#mw-panel .portal .body ul li a:visited {
color: #b1bac4 !important;
/* 侧栏链接柔和但可见 */
}
#mw-panel .portal .body ul li a:hover {
color: #58a6ff !important;
text-shadow: 0 0 4px rgba(88, 166, 255, 0.2);
}
/* ---------- 工具栏 (编辑、查看历史等) ---------- */
#p-cactions ul li a,
#p-cactions ul li a:visited,
#ca-edit a,
#ca-history a,
#ca-talk a,
#ca-view a,
#ca-viewsource a {
background-color: transparent !important;
color: #b1bac4 !important;
border-color: #30363d !important;
}
#p-cactions ul li a:hover,
#p-cactions ul li.selected a {
background-color: #21262d !important;
color: #f0f6fc !important;
border-bottom-color: #58a6ff !important;
}
/* ---------- 搜索框 ---------- */
#searchInput,
#searchQuery,
.vector-search-box-input,
#simpleSearch input {
background-color: #0d1117 !important;
color: #e6edf3 !important;
border-color: #30363d !important;
border-radius: 6px;
}
#searchInput:focus,
#searchQuery:focus,
.vector-search-box-input:focus {
border-color: #58a6ff !important;
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.25) !important;
outline: none;
}
/* 搜索按钮 */
#searchButton,
#mw-searchButton {
background-color: #21262d !important;
color: #e6edf3 !important;
border-color: #30363d !important;
}
#searchButton:hover,
#mw-searchButton:hover {
background-color: #30363d !important;
}
/* ---------- 分类与底部 ---------- */
#catlinks,
#footer,
#footer-info,
#footer-places,
#footer-icons {
background-color: #0d1117 !important;
border-color: #30363d !important;
color: #8b949e !important;
}
#catlinks a,
#footer a {
color: #58a6ff !important;
}
#catlinks a:hover,
#footer a:hover {
color: #79c0ff !important;
}
/* ---------- 编辑框 (文本编辑区域) ---------- */
#wpTextbox1,
#wpSummary,
#wpMinoredit,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
select {
background-color: #0d1117 !important;
color: #e6edf3 !important;
border-color: #30363d !important;
border-radius: 4px;
}
#wpTextbox1:focus,
#wpSummary:focus,
textarea:focus,
input[type="text"]:focus {
border-color: #58a6ff !important;
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2);
}
/* ---------- 特殊页面 & 差异对比 ---------- */
.diff,
.diff td,
.diff th,
.diff-editfont-monospace,
.mw-diff-edit,
#mw-diff-ntitle1,
#mw-diff-ntitle2 {
background-color: #161b22 !important;
color: #e6edf3 !important;
border-color: #30363d !important;
}
.diff td.diff-context {
background-color: #0d1117 !important;
color: #b1bac4 !important;
}
.diff td.diff-addedline {
background-color: #1a3a2a !important;
color: #a8f0c0 !important;
}
.diff td.diff-deletedline {
background-color: #3a1a1a !important;
color: #f0a8a8 !important;
}
/* ---------- 用户贡献 & 最近更改 ---------- */
.mw-contributions-table,
.mw-changeslist,
.mw-rcfilters-table {
background-color: transparent !important;
color: #e6edf3 !important;
}
.mw-changeslist-line,
.mw-contributions-line {
background-color: #0d1117 !important;
border-color: #30363d !important;
padding: 0.3em 0;
}
.mw-rcfilters-ui-highlights {
color: #f0f6fc !important;
}
/* ---------- 缩略图 / 图片说明 ---------- */
.thumbinner,
.thumbcaption,
.gallerybox,
.gallerytext,
.thumbimage {
background-color: #161b22 !important;
color: #e6edf3 !important;
border-color: #30363d !important;
}
.thumbimage {
border: 1px solid #30363d !important;
}
/* ---------- 引用 / 参考文献 ---------- */
.reflist,
.references,
.mw-references-wrap {
background-color: transparent !important;
color: #e6edf3 !important;
}
.reflist a,
.references a {
color: #58a6ff !important;
}
/* ---------- 内部导航 (toc) ---------- */
#toc,
.toc {
background-color: #161b22 !important;
border-color: #30363d !important;
color: #e6edf3 !important;
border-radius: 6px;
}
#toc a,
.toc a {
color: #58a6ff !important;
}
#toc a:hover,
.toc a:hover {
color: #79c0ff !important;
}
/* ---------- 微调滚动条 (可选) ---------- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
background: #0d1117;
}
::-webkit-scrollbar-track {
background: #0d1117;
}
::-webkit-scrollbar-thumb {
background: #30363d;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: #484f58;
}
/* ---------- 其他辅助类 ---------- */
.mw-body-content {
color: #e6edf3 !important;
}
/* 编辑区提示文字 (placeholder) */
::placeholder {
color: #8b949e !important;
opacity: 0.7;
}
/* 选中文字高亮 (提升体验) */
::selection {
background: #1f6feb !important;
color: #ffffff !important;
}
/* 让所有图片带轻微边框，更融合 */
img,
figure {
background-color: #0d1117 !important;
border: 1px solid #30363d;
border-radius: 4px;
}
/* ---------- 修复个别皮肤特殊元素 ---------- */
#mw-page-base,
#mw-head-base {
background-color: #0d1117 !important;
}
/* 移动端视图 (minerva) 基础暗色支持 */
.skin-minerva .mw-body,
.skin-minerva #content {
background-color: #161b22 !important;
color: #e6edf3 !important;
}
.skin-minerva a {
color: #58a6ff !important;
}
/* ============================================================
顶部操作标签美化 (页面/讨论 | 阅读/编辑/源代码/历史)
覆盖 #p-cactions 及所有相关子元素
============================================================ */
/* ---------- 整个操作栏容器 ---------- */
#p-cactions,
.vector-menu-tabs,
.vectorTabs,
#p-cactions .vector-menu-content,
#p-cactions ul {
background-color: transparent !important;
border-bottom: none !important;
/* 移除默认底部边框，统一用我们自己的 */
}
/* ---------- 每个标签项 ---------- */
#p-cactions li,
.vector-menu-tabs li,
.vectorTabs li,
#p-cactions ul li {
background-color: transparent !important;
border: none !important;
margin: 0 1px 0 0 !important;
/* 标签间距 */
border-radius: 6px 6px 0 0 !important;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* ---------- 标签链接 (常规状态) ---------- */
#p-cactions li a,
.vector-menu-tabs li a,
.vectorTabs li a,
#p-cactions ul li a,
#p-cactions .mw-portlet-body ul li a {
display: inline-block !important;
background-color: #0d1117 !important;
/* 深色背景，与页面融合但有区隔 */
color: #b1bac4 !important;
/* 柔和亮灰，不刺眼但醒目 */
font-weight: 500 !important;
padding: 0.8em 1.2em !important;
/* 舒适内边距 */
border: 1px solid #30363d !important;
border-bottom: none !important;
border-radius: 6px 6px 0 0 !important;
text-decoration: none !important;
transition: all 0.15s ease;
font-size: 0.95em;
letter-spacing: 0.01em;
box-shadow: 0 -1px 0 #30363d inset;
/* 内阴影增加层次 */
}
/* ---------- 标签悬停 (Hover) ---------- */
#p-cactions li a:hover,
.vector-menu-tabs li a:hover,
.vectorTabs li a:hover,
#p-cactions ul li a:hover {
background-color: #21262d !important;
/* 悬停时变亮 */
color: #f0f6fc !important;
/* 更白 */
border-color: #58a6ff !important;
border-bottom: none !important;
box-shadow: 0 -2px 0 #58a6ff inset, 0 0 8px rgba(88, 166, 255, 0.15) !important;
text-decoration: none !important;
}
/* ---------- 当前选中的标签 (活动/激活) ---------- */
#p-cactions li.selected,
#p-cactions li.mw-list-item.selected,
.vector-menu-tabs li.selected,
.vectorTabs li.selected,
#p-cactions ul li.selected {
background-color: transparent !important;
}
#p-cactions li.selected a,
.vector-menu-tabs li.selected a,
.vectorTabs li.selected a,
#p-cactions ul li.selected a,
#p-cactions li.mw-list-item.selected a {
background-color: #161b22 !important;
/* 比普通标签稍亮，突出当前页 */
color: #f0f6fc !important;
/* 纯白，最醒目 */
border-color: #58a6ff !important;
border-bottom: 2px solid #58a6ff !important;
/* 用亮蓝底边强调 */
font-weight: 600 !important;
box-shadow: 0 0 12px rgba(88, 166, 255, 0.08) !important;
text-shadow: 0 0 6px rgba(88, 166, 255, 0.1) !important;
}
/* ---------- 对 阅读/编辑/源代码/历史 等特殊标签微调 ---------- */
#ca-view a,
#ca-edit a,
#ca-viewsource a,
#ca-history a,
#ca-talk a,
#ca-nstab-main a,
#ca-nstab-user a,
#ca-nstab-special a,
#ca-nstab-project a,
#ca-nstab-image a,
#ca-nstab-mediawiki a,
#ca-nstab-template a,
#ca-nstab-help a,
#ca-nstab-category a {
/* 继承上述基础样式，无需额外覆盖，但确保所有命名空间标签都生效 */
}
/* ---------- 针对 Vector 2022 皮肤 (新Vector) 的适配 ---------- */
.skin-vector-2022 #p-cactions .vector-menu-tabs li a,
.skin-vector-2022 .vector-menu-tabs .mw-list-item a {
background-color: #0d1117 !important;
color: #b1bac4 !important;
border-color: #30363d !important;
border-bottom: none !important;
border-radius: 6px 6px 0 0 !important;
padding: 0.8em 1.2em !important;
}
.skin-vector-2022 #p-cactions .vector-menu-tabs li.selected a,
.skin-vector-2022 .vector-menu-tabs .mw-list-item.selected a {
background-color: #161b22 !important;
color: #f0f6fc !important;
border-color: #58a6ff !important;
border-bottom: 2px solid #58a6ff !important;
font-weight: 600 !important;
}
.skin-vector-2022 #p-cactions .vector-menu-tabs li a:hover,
.skin-vector-2022 .vector-menu-tabs .mw-list-item a:hover {
background-color: #21262d !important;
color: #f0f6fc !important;
border-color: #58a6ff !important;
border-bottom: none !important;
box-shadow: 0 -2px 0 #58a6ff inset !important;
}
/* ---------- 当标签项为下拉菜单（如更多操作）时的美化 ---------- */
#p-cactions .vector-menu-dropdown,
.vector-menu-dropdown {
background-color: transparent !important;
}
#p-cactions .vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .vector-menu-heading {
color: #b1bac4 !important;
background-color: #0d1117 !important;
border-color: #30363d !important;
border-radius: 6px 6px 0 0 !important;
padding: 0.8em 1.2em !important;
}
#p-cactions .vector-menu-dropdown .vector-menu-heading:hover,
.vector-menu-dropdown .vector-menu-heading:hover {
background-color: #21262d !important;
color: #f0f6fc !important;
}
/* 下拉菜单内容 (如 "更多" 展开项) */
.vector-menu-dropdown .vector-menu-content-list,
#p-cactions .vector-menu-dropdown .vector-menu-content-list {
background-color: #161b22 !important;
border-color: #30363d !important;
border-radius: 0 6px 6px 6px !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}
.vector-menu-dropdown .vector-menu-content-list li a,
#p-cactions .vector-menu-dropdown .vector-menu-content-list li a {
background-color: #161b22 !important;
color: #e6edf3 !important;
border: none !important;
border-radius: 0 !important;
padding: 0.6em 1.2em !important;
}
.vector-menu-dropdown .vector-menu-content-list li a:hover,
#p-cactions .vector-menu-dropdown .vector-menu-content-list li a:hover {
background-color: #21262d !important;
color: #58a6ff !important;
}
/* ---------- 确保标签与页面内容无缝连接 ---------- */
.mw-body,
#content {
border-top: 1px solid #30363d !important;
/* 让标签与内容区之间有一条细线分隔，更清晰 */
}
/* 如果标签背景与内容区背景一致，可以调整顶部边距 */
#p-cactions {
margin-bottom: -1px !important;
/* 消除可能出现的缝隙 */
}
/* --- 通用信息卡片样式 (基于 CSS 变量) --- */
/* 1. 卡片外层容器 */
.mw-card-box {
width: 100%;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
padding: 0;
border-spacing: 0;
}
/* 2. 标题区 (颜色跟随变量) */
.mw-card-header {
background-color: #f4f8fc;
color: #000;
font-weight: bold;
padding: 12px 18px;
text-align: left;
border-bottom: 3px solid var(--theme-color, #0077FF);
font-size: 1.2em;
}
/* 3. 基础数据区 */
.mw-card-body {
padding: 15px 18px;
background-color: #ffffff;
}
/* 4. 数据区内部弹性布局 */
.mw-card-flex {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 15px 30px;
}
.mw-card-col {
flex: 1;
line-height: 1.7;
min-width: 120px;
}
/* 5. 右上角图标区 */
.mw-card-icon-box {
flex: 0 0 auto;
background-color: var(--theme-color, #0077FF);
padding: 4px 8px;
border-radius: 3px;
display: flex;
align-items: center;
}
/* 6. 内容区分割线 */
.mw-card-divider {
padding: 0;
border-bottom: 1px solid #eaecf0;
}
/* 7. 图片/截图展示区 */
.mw-card-image-frame {
text-align: center;
padding: 15px;
background-color: var(--theme-bg, #f2f7fb);
border: 1px solid var(--theme-color, #0077FF);
margin: 0;
}
.mw-card-image-frame img {
max-width: 100%;
height: auto;
}
.mw-card-caption {
color: #666;
margin-top: 6px;
display: block;
}
/* 8. 底部附加信息区 */
.mw-card-footer {
padding: 15px 18px;
background-color: #ffffff;
line-height: 1.8;
}
/* 9. 游戏代码 INI 展示区 */
.mw-card-code {
padding: 15px 18px;
background-color: #ffffff;
}
.mw-card-code-divider {
padding: 0;
border-bottom: 1px solid #eaecf0;
margin-bottom: 15px;
}