MediaWiki:Citizen.css：修订间差异

2026年1月29日 (四) 18:17的版本

/* 应用于全站的自定义样式 */
:root {
    /* 页面主背景色 */
    --color-surface-0: #fafafa !important;
    /* 稍微深一点的层次背景（如侧边栏或卡片） */
    --color-surface-1: #fdfdfd !important;
    --color-surface-2: #ffffff !important;
}
:root {
    /* 默认链接颜色：可以选一个深一点的蓝色或品牌色 */
    --color-primary: #0056b3 !important;
    /* 鼠标悬停时的链接颜色 */
    --color-primary-highlight: #003d80 !important;
    /* 已访问链接颜色 */
    --color-visited: #551a8b !important;
}
:root {
    /* 主文字颜色（正文）：#202122 是维基百科常用的深灰色，比纯黑更柔和 */
    --color-base-0: #202122 !important; 
    
    /* 次要文字颜色（如元数据、脚注、禁用的文本） */
    --color-base-30: #54595d !important;
    
    /* 标题颜色：如果你想让标题完全变黑 */
    --color-heading: #000000 !important;
}

/* 针对正文段落的额外保险（有些版本 Citizen 可能会有选择器权重问题） */
.mw-body-content {
    color: var(--color-base-0);
}
:root {
    /* 弹出层、菜单、小窗口的背景色 */
    --color-surface-1: #ffffff !important;
    --color-surface-2: #fdfdfd !important;
    
    /* 确保弹出层内的边框颜色不会太突兀（可选） */
    --color-border: #eaecf0 !important;
    
    /* 如果小窗里有那种半透明的蓝色背景，通常是这个变量： */
    --background-color-interactive-subtle: rgba(0, 0, 0, 0.05) !important;
}

/* 针对某些特定的 Citizen 浮窗容器 */
.citizen-ui-overlay, 
.citizen-ui-container {
    background-color: var(--color-surface-1);
}
:root {
    /* 1. 强制覆盖所有 Surface 变量为白色系 */
    --color-surface-0: #fafafa !important;
    --color-surface-1: #ffffff !important;
    --color-surface-2: #ffffff !important;

    /* 2. 移除 Citizen 自动生成的带有色调的背景 */
    /* Citizen 经常使用这个变量作为搜索框等组件的背景色 */
    --background-color-interactive-subtle: rgba(0, 0, 0, 0.04) !important;
    
    /* 3. 针对搜索弹窗特定的背景变量（新版 Citizen 常用） */
    --color-surface-search: #ffffff !important;
}

/* 4. 如果上面的变量没生效，直接锁定搜索容器的 CSS 类 */
.citizen-search-overlay,
.citizen-search-res-container,
.citizen-typeahead-suggestion {
    background-color: #ffffff !important;
}

/* 5. 调整搜索项鼠标悬停时的颜色（避免悬停时变蓝） */
.citizen-typeahead-suggestion:hover,
.citizen-typeahead-suggestion--highlighted {
    background-color: #f0f0f0 !important;
}
/* 1. 核心变量：强制饱和度降为 0，彻底去蓝 */
:root {
    /* 强制重置 Citizen 的主题色计算，使用纯灰色调 */
    --color-primary-rgb: 80, 80, 80 !important; 
    --color-primary: #505050 !important;
    
    /* 搜索框专用：给一个极高的不透明度，阻断底层蓝色的穿透 */
    --glass-bg-search-pure: rgba(255, 255, 255, 0.9) !important; 
}

/* 2. 搜索面板：通过滤镜强制去色 */
.citizen-command-palette {
    /* 重点：使用 grayscale(1) 强制将该容器内所有内容转为黑白灰，彻底杀掉蓝色 */
    /* 使用 backdrop-filter 的 saturate(0%) 也能去掉背景的蓝色浸透 */
    backdrop-filter: blur(20px) saturate(0%) contrast(100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(0%) contrast(100%) !important;
    
    background-color: var(--glass-bg-search-pure) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15) !important;
}

/* 3. 针对搜索框内部可能存在的蓝色边框或高亮 */
.citizen-command-palette * {
    border-color: rgba(0, 0, 0, 0.1) !important;
    outline-color: rgba(0, 0, 0, 0.1) !important;
}

/* 4. 彻底禁用 Citizen 的蓝色遮罩叠层 */
.citizen-command-palette-backdrop {
    /* 如果背景遮罩泛蓝，直接给它纯黑/白灰色 */
    background-color: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(8px) grayscale(1) !important;
}

/* 5. 修复搜索项选中的蓝色 */
.citizen-typeahead-suggestion--highlighted,
.citizen-command-palette-list-item[aria-selected="true"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #000 !important;
}