MediaWiki:Common.css

来自心灵终结资料站
Lyx（讨论 | 贡献）2026年8月27日 (四) 12:44的版本
跳转到导航 跳转到搜索

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

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











/* --- 通用信息卡片样式 (基于 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;
}
蜀ICP备2026037366号-1
取自“https://mentalomega.wiki/wiki/index.php?title=MediaWiki:Common.css&oldid=2677”