MediaWiki:Citizen.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ==========================================================================
MsUpload 图标终极修复方案 (Citizen 皮肤专用)
功能：彻底解决重影、多图标平铺、位置偏离、暗色模式适配
========================================================================== */
/* 1. 区域清理：剥夺 MsUpload 按钮内所有层级的默认绘图权，防止重影 */
#msupload-select,
#msupload-select *,
#msupload-select *::before,
#msupload-select *::after {
background-image: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
content: none !important;
background-color: transparent !important;
}
/* 2. 容器校准：强制按钮外壳 (<a>) 变为绝对居中的容器 */
#msupload-select .oo-ui-buttonElement-button {
display: flex !important;
align-items: center !important; /* 垂直居中 */
justify-content: center !important; /* 水平居中 */
width: 32px !important; /* 工具栏标准宽度 */
height: 32px !important; /* 工具栏标准高度 */
padding: 0 !important; /* 清除可能导致偏移的内边距 */
border: none !important;
cursor: pointer !important;
}
/* 3. 图标重建：在最内层 <span> 上重新渲染唯一的、居中的图标 */
#msupload-select span.oo-ui-icon-upload.oo-ui-iconElement-icon {
display: block !important;
width: 20px !important; /* 标准图标尺寸 */
height: 20px !important;
margin: 0 !important;
position: static !important;
/* 核心渲染：使用系统标准上传图标路径 */
-webkit-mask-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/upload.svg) !important;
mask-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/upload.svg) !important;
/* 关键：禁止平铺重复 (解决 4 个图标的问题) */
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center center !important;
mask-position: center center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
/* 颜色适配：跟随文字颜色（Citizen 皮肤逻辑） */
background-color: currentColor !important;
/* 视觉微调：解决“图标有点歪”的问题 */
/* 如果觉得偏上，就调大 1px；如果觉得偏下，就设为 -1px */
transform: translateY(1px);
}
/* 4. 暗色模式适配：确保图标在深色背景下依然清晰 */
.mw-layout-context-dark #msupload-select span.oo-ui-icon-upload.oo-ui-iconElement-icon {
background-color: #f8f9fa !important;
}
.mw-heading2 {margin-top:2rem;}
.mw-heading3 {margin-top:1rem;}
.citizen-footer {margin-top:3rem;}
.wikitable,
.wikitable tr:first-of-type th:first-child,
.wikitable tr:first-of-type td:first-child,
.wikitable tr:last-of-type th:first-child,
.wikitable tr:last-of-type td:first-child,
.wikitable tr:first-of-type th:last-child,
.wikitable tr:first-of-type td:last-child,
.wikitable tr:last-of-type th:last-child,
.wikitable tr:last-of-type td:last-child {
border-radius: 0 !important;
}
/**
* 基于少前 Logo 黄色的 Citizen 主题配置
*/
/* 1. 全局定义 (针对所有模式) */
.skin-citizen, :root {
/* 色调：72 是少前黄的琥珀核心；彩度：0.25 确保鲜艳；亮度：0.75 保证通透 */
--color-progressive-oklch__h: 72;
--color-progressive-oklch__c: 0.25;
--color-progressive-oklch__l: 0.75;
}
/* 2. 浅色模式细节优化 */
.skin-theme-clientpref-day {
/* 提升亮度到 0.8，防止在白底上变棕 */
--color-progressive-oklch__l: 0.8;
--color-progressive-oklch__c: 0.28;
/* 表面色优化 */
--color-surface-0: #ffffff;
--color-surface-1: #fdfaf4;
/* 文字颜色提升对比度 */
--color-base: #111111;
--color-emphasized: #000000;
--color-link: oklch(0.52 0.22 88);
--color-progressive--hover: oklch(0.70 0.28 72);
--color-progressive--active: oklch(0.62 0.28 72);
--color-progressive--focus: oklch(0.70 0.28 72);
}
/* 3. 深色模式细节优化 */
.skin-theme-clientpref-night {
/* 深色模式下降低亮度，防止刺眼，保持暗金质感 */
--color-progressive-oklch__l: 0.7;
--color-progressive-oklch__c: 0.22;
--color-surface-0: #1a1816;
--color-surface-1: #24211e;
--color-base: #e6e0d9;
/* 深色模式下的链接建议稍微亮一点点，方便识别 */
--color-link: oklch(0.75 0.15 72);
}
@media (prefers-color-scheme: light) {
.skin-theme-clientpref-os {
--color-progressive-oklch__l: 0.8;
--color-progressive-oklch__c: 0.28;
--color-surface-0: #ffffff;
--color-surface-1: #fdfaf4;
--color-base: #111111;
--color-emphasized: #000000;
--color-link: oklch(0.52 0.22 88);
--color-progressive--hover: oklch(0.70 0.28 72);
--color-progressive--active: oklch(0.62 0.28 72);
--color-progressive--focus: oklch(0.70 0.28 72);
}
}
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os {
--color-progressive-oklch__l: 0.7;
--color-progressive-oklch__c: 0.22;
--color-surface-0: #1a1816;
--color-surface-1: #24211e;
--color-base: #e6e0d9;
--color-link: oklch(0.75 0.15 72);
}
}