打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Citizen.css:修订间差异

MediaWiki界面页面
秋绘君留言 | 贡献
无编辑摘要
秋绘君留言 | 贡献
无编辑摘要
第1行: 第1行:
/* ==========================================================================
/* ==========================================================================
   MsUpload 图标重影终极净化 (针对 Citizen 皮肤优化)
   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;
      
      
     /* 设置图标颜色:Citizen 默认图标颜色 */
     /* 视觉微调:解决“图标有点歪”的问题 */
     background-color: #202122 !important;
     /* 如果觉得偏上,就调大 1px;如果觉得偏下,就设为 -1px */
    width: 20px !important;
     transform: translateY(1px);  
    height: 20px !important;
     margin: auto !important;
}
}


/* 3. 暗色模式适配:如果你的维基开启了暗色模式,图标需要变白 */
/* 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;
}
/* 4. 容器对齐修正 */
#msupload-select .oo-ui-buttonElement-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !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;
}