MediaWiki:Common.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
:root {
color-scheme: light dark;
/* ---------------- 主题色 · 浅蜜瓜绿系 ---------------- */
--color-theme: #F1F8E6; /* 久远澪代表色 · 页面/信息框底色 */
--color-theme-soft: #F9FCF4; /* 更浅底色 · 卡片渐变顶部 */
--color-theme-deep: #e0efd0; /* 稍深浅绿 · 标签/分区底色 */
/* ---------------- 主强调色 · 绿色系 ---------------- */
--color-primary: #8FBC8F; /* 主强调色 · 标题栏/按钮/边框 */
--color-primary-hover: #7AA87A; /* 主强调色 · 悬停加深 */
--color-primary-deep: #2E6B45; /* 深绿 · 标题/强调文字 */
--color-primary-light: #D4E8C0; /* 浅绿 · 卡片/信息框边框 */
--color-primary-lite: #DCEFDC; /* 更浅绿 · 装饰渐变 */
/* ---------------- 暖橙强调色 · 点缀 ---------------- */
--color-accent: #E8B96A; /* 暖橙 · 强调卡片/点缀 */
--color-accent-light: #F3D9AE; /* 暖橙浅色 · 渐变 */
--color-accent-deep: #8A5A1E; /* 暖橙深色 · 文字 */
--color-accent-bg: #FFF8EF; /* 暖橙背景 */
--color-accent-bg-soft: #FDF2E3; /* 暖橙背景 · 渐变底部 */
--color-accent-border: #E8CFA8; /* 暖橙边框 */
/* ---------------- 文字 ---------------- */
--color-text: #333333; /* 正文 */
--color-text-sub: #5A5A5A; /* 次要文字 */
--color-text-muted: #8A8A8A; /* 弱化/注释文字 */
--color-text-invert: #FFFFFF; /* 强调色底色上的文字 */
/* ---------------- 语义色 · 与主题协调 ---------------- */
--color-info-bg: #E9F2F7; /* 信息提示背景 */
--color-info-border: #B9D5E1; /* 信息提示边框 */
--color-info-text: #2F5E74; /* 信息提示文字 */
--color-success-bg: #EEF7E4; /* 成功提示背景 */
--color-success-border: #C9E2AF; /* 成功提示边框 */
--color-success-text: #3E6B2F; /* 成功提示文字 */
--color-warning-bg: #FBF3E4; /* 警告提示背景 */
--color-warning-border: #EAD5A6; /* 警告提示边框 */
--color-warning-text: #7A5C22; /* 警告提示文字 */
--color-error-bg: #FAECEA; /* 错误提示背景 */
--color-error-border: #E4B9B4; /* 错误提示边框 */
--color-error-text: #8A3B36; /* 错误提示文字 */
/* ---------------- 中性色 ---------------- */
--color-border: #DDDDDD; /* 通用边框 */
--color-bg: #FFFFFF; /* 卡片/表格底色 */
--color-bg-subtle: #FAFAF7; /* 轻微底纹 */
/* ---------------- 投影 · 绿色系 ---------------- */
--shadow-card: 0 1px 3px rgba(143, 188, 143, .25);
--shadow-card-hover: 0 4px 14px rgba(143, 188, 143, .4);
}
@media (prefers-color-scheme: dark) {
:root {
/* ---------------- 主题色 · 墨绿系 ---------------- */
--color-theme: #1D2618; /* 深色页面底色（墨绿） */
--color-theme-soft: #232D1D; /* 更浅一档深色（卡片渐变顶部） */
--color-theme-deep: #2A3625; /* 稍亮深绿（标签/分区底色） */
/* ---------------- 主强调色 · 绿色系 ---------------- */
--color-primary: #7FAA85; /* 主强调色（深色下略提亮） */
--color-primary-hover: #93BC98; /* 主强调色 · 悬停提亮 */
--color-primary-deep: #A9CFAE; /* 亮绿 · 标题/强调文字 */
--color-primary-light: #3A4736; /* 深绿 · 卡片/信息框边框 */
--color-primary-lite: #33402F; /* 更暗绿 · 装饰渐变 */
/* ---------------- 暖橙强调色 · 点缀 ---------------- */
--color-accent: #E0A85C; /* 暖橙 · 强调卡片/点缀 */
--color-accent-light: #C99A52; /* 暖橙浅色 · 渐变 */
--color-accent-deep: #F0C48A; /* 暖橙浅色 · 文字 */
--color-accent-bg: #2E2719; /* 暖橙深色背景 */
--color-accent-bg-soft: #382D1C; /* 暖橙背景 · 渐变底部 */
--color-accent-border: #57451F; /* 暖橙深色边框 */
/* ---------------- 文字 ---------------- */
--color-text: #E8EDE3; /* 正文（浅色） */
--color-text-sub: #B8C2B0; /* 次要文字 */
--color-text-muted: #8A9484; /* 弱化/注释文字 */
--color-text-invert: #FFFFFF; /* 强调色底色上的文字 */
/* ---------------- 语义色 · 深色 ---------------- */
--color-info-bg: #1D2A33; /* 信息提示背景 */
--color-info-border: #2E4656; /* 信息提示边框 */
--color-info-text: #9CC7DE; /* 信息提示文字 */
--color-success-bg: #1E2A1A; /* 成功提示背景 */
--color-success-border: #33502E; /* 成功提示边框 */
--color-success-text: #A8D29C; /* 成功提示文字 */
--color-warning-bg: #2E2615; /* 警告提示背景 */
--color-warning-border: #57481F; /* 警告提示边框 */
--color-warning-text: #E3C07A; /* 警告提示文字 */
--color-error-bg: #301D1C; /* 错误提示背景 */
--color-error-border: #57302C; /* 错误提示边框 */
--color-error-text: #E09A94; /* 错误提示文字 */
/* ---------------- 中性色 ---------------- */
--color-border: #3A3A3A; /* 通用边框 */
--color-bg: #161A14; /* 卡片/表格底色 */
--color-bg-subtle: #20251C; /* 轻微底纹 */
/* ---------------- 投影 · 深色下用黑色 ---------------- */
--shadow-card: 0 1px 3px rgba(0, 0, 0, .4);
--shadow-card-hover: 0 4px 14px rgba(0, 0, 0, .55);
}
}
/* ==========================================================================
Infobox 统一配色
========================================================================== */
.infobox {
float: right;
margin-left: 10px;
max-width: 20em;
text-align: center;
background-color: var(--color-theme);
/* 整体浅绿背景 */
border: 1px solid var(--color-primary-light);
/* 浅绿边框，与卡片风格呼应 */
border-collapse: collapse;
box-shadow: var(--shadow-card);
/* 轻投影，增加层次 */
font-size: 88%;
line-height: 1.5em;
clear: right;
margin-bottom: 1em;
}
/* 顶部标题行（above）和分组标题行（header） */
.infobox .infobox-above,
.infobox .infobox-header {
background-color: var(--color-primary);
/* 暗绿色背景 */
color: var(--color-text-invert);
/* 白色文字 */
font-weight: bold;
padding: 0.4em 0.2em;
}
/* 标签单元格 */
.infobox .infobox-label {
width: 30%;
font-weight: bold;
background-color: var(--color-theme-deep);
/* 比整体背景稍深的浅绿，突出标签 */
padding: 0.3em 0.4em;
text-align: right;
vertical-align: top;
}
/* 数据单元格 */
.infobox .infobox-data {
width: 70%;
padding: 0.3em 0.4em;
text-align: left;
vertical-align: top;
}