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

MediaWiki:Citizen.css:修订间差异

MediaWiki界面页面
秋绘君留言 | 贡献
测试
标签已被回退
秋绘君留言 | 贡献
撤销秋绘君讨论)的修订版本17569
标签撤销
第77行: 第77行:
}
}


/**
/* 少女前线黄色主题 - 浅色模式优化 */
* 少女前线 Logo 黄 - 核心色调覆盖
.skin-theme-clientpref-day {
* 目标色值参考:#FFC90E (OKLCH 约等于 L:0.83 C:0.18 H:75)
     /* 1. 色调 (Hue):调整至 72 左右,这是Logo中那种干净琥珀黄的核心位置 */
*/
     --color-progressive-oklch__h: 72;
.skin-citizen {
     /* 1. 色调:75 是最接近少前 Logo 那种琥珀金黄的 */
     --color-progressive-oklch__h: 75;


     /* 2. 彩度:0.2 左右能保持鲜艳且不溢出 */
     /* 2. 彩度 (Chroma):飙升至 0.28。这是一个非常大胆的高饱和度值,完全洗去灰色。 */
     --color-progressive-oklch__c: 0.2;
     --color-progressive-oklch__c: 0.28;


     /* 3. 亮度:0.8 是明亮黄色的甜点区 */
     /* 3. 亮度 (Lightness):保持在 0.7 左右。太亮则变白,太暗则变棕。此值最能体现黄色的干净。 */
     --color-progressive-oklch__l: 0.8;
     --color-progressive-oklch__l: 0.70;
}


/* 针对浅色模式微调,防止黄色在白底上“隐身” */
    /* 4. 表面色 (Surface Colors) 调整:
.skin-theme-clientpref-day {
      既然主色是 Logo 里的黄色,背景必须是纯净的白,才能让黄色“跳出来”。
     /* 稍微降低亮度,增加对比度 */
     */
     --color-progressive-oklch__l: 0.78;
     --color-surface-0: #ffffff; /* 纯白背景 */
     --color-progressive-oklch__c: 0.22;
     --color-surface-1: #fdfaf4; /* 淡淡的琥珀白卡片背景,与 Logo 黄呼应 */
      
      
     /* 让背景更干净,衬托黄色 */
     /* 5. 文字和链接优化:
     --color-surface-0: #ffffff;
      黄色的可读性较差,需要将文本色调至接近纯黑,链接则使用Logo里黑白部分的冷黑调。
    */
     --color-base: #111111;
    --color-link: #1a1816;
}
}


第107行: 第106行:
     --color-surface-1: #24211e; /* 顶层卡片 */
     --color-surface-1: #24211e; /* 顶层卡片 */
     --color-base: #e6e0d9;      /* 文字改用暖白,不刺眼 */
     --color-base: #e6e0d9;      /* 文字改用暖白,不刺眼 */
}
:root {
    /* 让链接颜色比主色稍微深/暗一点点,增加阅读重心 */
    --color-link: oklch(0.55 0.18 62);
}
}

2026年5月11日 (一) 02: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;
}

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

/* 少女前线黄色主题 - 浅色模式优化 */
.skin-theme-clientpref-day {
    /* 1. 色调 (Hue):调整至 72 左右,这是Logo中那种干净琥珀黄的核心位置 */
    --color-progressive-oklch__h: 72;

    /* 2. 彩度 (Chroma):飙升至 0.28。这是一个非常大胆的高饱和度值,完全洗去灰色。 */
    --color-progressive-oklch__c: 0.28;

    /* 3. 亮度 (Lightness):保持在 0.7 左右。太亮则变白,太暗则变棕。此值最能体现黄色的干净。 */
    --color-progressive-oklch__l: 0.70;

    /* 4. 表面色 (Surface Colors) 调整:
       既然主色是 Logo 里的黄色,背景必须是纯净的白,才能让黄色“跳出来”。
    */
    --color-surface-0: #ffffff; /* 纯白背景 */
    --color-surface-1: #fdfaf4; /* 淡淡的琥珀白卡片背景,与 Logo 黄呼应 */
    
    /* 5. 文字和链接优化:
       黄色的可读性较差,需要将文本色调至接近纯黑,链接则使用Logo里黑白部分的冷黑调。
    */
    --color-base: #111111;
    --color-link: #1a1816;
}

/* 深色模式:拒绝死黑,改用暗巧克力/炭灰调 */
.skin-theme-clientpref-night {
    --color-surface-0: #1a1816; /* 深层背景 */
    --color-surface-1: #24211e; /* 顶层卡片 */
    --color-base: #e6e0d9;      /* 文字改用暖白,不刺眼 */
}

:root {
    /* 让链接颜色比主色稍微深/暗一点点,增加阅读重心 */
    --color-link: oklch(0.55 0.18 62);
}