MediaWiki:Common.css：修订间差异

2026年8月27日 (四) 12:50的版本

/* ============================================================
   MediaWiki 全局暗色美化 CSS (完整版)
   适用皮肤: Vector, Vector 2022, Monobook 等
   特点: 暗色背景 + 高对比度/醒目字体
   包含: 全局样式 | 顶部标签 | 编辑框 & 源代码编辑器
   ============================================================ */

/* ---------- 全局重置 & 基础颜色 ---------- */
html,
body {
    background-color: #0d1117 !important;
    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;
}

/* ---------- 页面主体区域 ---------- */
.mw-body,
#content,
#mw-content-text,
.ve-init-mw-desktopArticleTarget-targetContainer {
    background-color: #161b22 !important;
    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;
}

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);
}

/* ---------- 搜索框 ---------- */
#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,
.mw-editform #wpTextbox1,
textarea.mw-editfont-monospace,
#editpage-textarea {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    padding: 12px !important;
    caret-color: #58a6ff !important;
    box-shadow: inset 0 0 0 1px #30363d !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#wpTextbox1:focus,
.mw-editform #wpTextbox1:focus,
#editpage-textarea:focus {
    border-color: #58a6ff !important;
    box-shadow: inset 0 0 0 1px #58a6ff, 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

/* ---------- 编辑摘要/注释输入框 ---------- */
#wpSummary,
.mw-summary,
#wpMinoredit + label,
input.mw-edit-summary {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
}

#wpSummary:focus,
.mw-summary:focus {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

/* ---------- WikiEditor 工具栏 ---------- */
.wikiEditor-toolbar,
.wikiEditor-ui-toolbar,
.wikiEditor-ui {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
    border-radius: 6px 6px 0 0 !important;
}

.wikiEditor-ui-toolbar .section-main {
    background-color: transparent !important;
}

.wikiEditor-ui-toolbar .group {
    border-color: #30363d !important;
}

.wikiEditor-ui-toolbar .group-label {
    color: #b1bac4 !important;
}

.wikiEditor-ui-toolbar .tool,
.wikiEditor-ui-toolbar .tool-select {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
    border-radius: 3px !important;
}

.wikiEditor-ui-toolbar .tool:hover,
.wikiEditor-ui-toolbar .tool-select:hover {
    background-color: #21262d !important;
    border-color: #58a6ff !important;
}

.wikiEditor-ui-toolbar .tool.active,
.wikiEditor-ui-toolbar .tool-select.active {
    background-color: #1f6feb !important;
    border-color: #58a6ff !important;
    color: #ffffff !important;
}

.wikiEditor-ui-toolbar .menu {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

.wikiEditor-ui-toolbar .menu .menu-item {
    color: #e6edf3 !important;
}

.wikiEditor-ui-toolbar .menu .menu-item:hover {
    background-color: #21262d !important;
    color: #f0f6fc !important;
}

/* ---------- 编辑按钮 ---------- */
#editpage-copywarn,
#editpage-copywarn p,
.mw-editform .editCheckboxes,
.mw-editform .editHelp {
    color: #b1bac4 !important;
    background-color: transparent !important;
}

#wpSave,
#wpPreview,
#wpDiff,
.mw-editform input[type="submit"] {
    background-color: #21262d !important;
    color: #f0f6fc !important;
    border-color: #30363d !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease;
}

#wpSave:hover,
#wpPreview:hover,
#wpDiff:hover,
.mw-editform input[type="submit"]:hover {
    background-color: #30363d !important;
    border-color: #58a6ff !important;
    box-shadow: 0 0 12px rgba(88, 166, 255, 0.15) !important;
}

/* ---------- 其他输入框 ---------- */
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;
}

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 {
    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;
}

.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;
}

#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;
}

/* Vector 2022 皮肤适配 */
.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;
}

/* ============================================================
   CodeMirror 编辑器暗色适配 (若启用)
   ============================================================ */

.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-gutters {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}

.CodeMirror-gutters {
    background-color: #161b22 !important;
    border-right-color: #30363d !important;
}

.CodeMirror-linenumber {
    color: #8b949e !important;
}

.CodeMirror-cursor {
    border-left-color: #58a6ff !important;
}

.CodeMirror-selected {
    background-color: #1f6feb !important;
}

/* CodeMirror 语法高亮颜色 (保持醒目) */
.cm-s-default .cm-keyword {
    color: #ff7b72 !important;
}
.cm-s-default .cm-atom {
    color: #79c0ff !important;
}
.cm-s-default .cm-number {
    color: #d2a8ff !important;
}
.cm-s-default .cm-def {
    color: #58a6ff !important;
}
.cm-s-default .cm-variable {
    color: #e6edf3 !important;
}
.cm-s-default .cm-variable-2 {
    color: #e6edf3 !important;
}
.cm-s-default .cm-variable-3 {
    color: #e6edf3 !important;
}
.cm-s-default .cm-property {
    color: #79c0ff !important;
}
.cm-s-default .cm-operator {
    color: #ff7b72 !important;
}
.cm-s-default .cm-comment {
    color: #8b949e !important;
    font-style: italic !important;
}
.cm-s-default .cm-string {
    color: #a5d6ff !important;
}
.cm-s-default .cm-string-2 {
    color: #a5d6ff !important;
}
.cm-s-default .cm-meta {
    color: #b1bac4 !important;
}
.cm-s-default .cm-qualifier {
    color: #58a6ff !important;
}
.cm-s-default .cm-builtin {
    color: #ff7b72 !important;
}
.cm-s-default .cm-bracket {
    color: #e6edf3 !important;
}
.cm-s-default .cm-tag {
    color: #ff7b72 !important;
}
.cm-s-default .cm-attribute {
    color: #79c0ff !important;
}
.cm-s-default .cm-hr {
    color: #8b949e !important;
}
.cm-s-default .cm-link {
    color: #58a6ff !important;
}
.cm-s-default .cm-error {
    color: #f85149 !important;
}

/* ============================================================
   ★★★★★ 代码结束 ★★★★★
   以下为分隔符，请勿删除或修改此行以上内容
   ============================================================ */
/* ============================================================
   ================  CSS 分隔符  ================
   ============================================================ */


















/* --- 通用信息卡片样式 (基于 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;
}