MediaWiki:Citizen.css:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* ========================================================================== | /* ========================================================================== | ||
MsUpload | MsUpload 图标终极修复方案 (Citizen 皮肤专用) | ||
功能:彻底解决重影、多图标平铺、位置偏离、暗色模式适配 | |||
========================================================================== */ | ========================================================================== */ | ||
/* 1. | /* 1. 区域清理:剥夺 MsUpload 按钮内所有层级的默认绘图权,防止重影 */ | ||
#msupload-select, | #msupload-select, | ||
#msupload-select *, | #msupload-select *, | ||
| 第15行: | 第16行: | ||
} | } | ||
/* 2. | /* 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 { | #msupload-select span.oo-ui-icon-upload.oo-ui-iconElement-icon { | ||
display: block !important; | 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; | -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; | mask-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/upload.svg) !important; | ||
/* | /* 关键:禁止平铺重复 (解决 4 个图标的问题) */ | ||
-webkit-mask-repeat: no-repeat !important; | -webkit-mask-repeat: no-repeat !important; | ||
mask-repeat: no-repeat !important; | mask-repeat: no-repeat !important; | ||
| 第29行: | 第47行: | ||
-webkit-mask-size: contain !important; | -webkit-mask-size: contain !important; | ||
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 { | .mw-layout-context-dark #msupload-select span.oo-ui-icon-upload.oo-ui-iconElement-icon { | ||
background-color: #f8f9fa !important; | background-color: #f8f9fa !important; | ||
} | } | ||
2026年4月2日 (四) 21:57的版本
/* ==========================================================================
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;
}