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。
/* =========================================================
Blockland Wiki 终极视觉修正 (去蓝纯净版)
功能：1000px搜索框 + 弹性动画 + 纯白/深灰配色 + 强制去色
========================================================= */
/* 1. 全局核心：强制覆盖 Citizen 的颜色计算逻辑 */
:root {
/* 背景绝对纯白/浅灰，不带任何色相 */
--color-surface-0: #fafafa !important;
--color-surface-1: #ffffff !important;
--color-surface-2: #ffffff !important;
--color-surface-search: #ffffff !important;
/* 文字颜色：深黑灰，确保对比度 */
--color-base-0: #202122 !important;
--color-base-30: #54595d !important;
--color-heading: #000000 !important;
/* 链接颜色：保留蓝色作为交互提示，但平时不干扰 */
--color-primary: #0056b3 !important;
/* 【关键】杀掉 Citizen 默认的“品牌色混合透明层” */
--background-color-interactive-subtle: rgba(0, 0, 0, 0.05) !important;
--color-primary-opacity-10: rgba(0, 0, 0, 0.05) !important;
}
/* 2. 搜索面板 (1000px 宽 + 彻底去蓝) */
.citizen-command-palette {
position: fixed !important;
width: 1000px !important;
max-width: 95vw !important;
top: 50% !important;
left: 50% !important;
margin: 0 !important;
z-index: 10000 !important;
/* 动画初始状态 */
opacity: 0 !important;
transform: translate(-50%, -50%) scale(0.95) !important;
/* 【核心去蓝修复】 */
/* 1. 背景色提高不透明度到 0.9，用纯白压住底色 */
background-color: rgba(255, 255, 255, 0.9) !important;
/* 2. 饱和度设为 0% (saturate(0%))！这是关键，它会把透出来的任何蓝色都变成灰色 */
backdrop-filter: blur(20px) saturate(0%) !important;
-webkit-backdrop-filter: blur(20px) saturate(0%) !important;
border-radius: 16px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}
/* 动画激活态 */
.citizen-command-palette.glass-show {
opacity: 1 !important;
transform: translate(-50%, -50%) scale(1) !important;
}
/* 3. 搜索框内部元素去色 */
.citizen-command-palette__search,
.citizen-command-palette__results,
.citizen-command-palette__footer,
.cdx-text-input__input {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: #202122 !important; /* 强制黑字 */
}
/* ============================================
4. 侧边栏/菜单 (透明修复版)
功能：恢复高透明度 (0.15) + 强制黑白滤镜去蓝
============================================ */
.citizen-menu__card,
#citizen-preferences__card,
.citizen-sticky-header-background,
.citizen-drawer,
.citizen-dropdown .citizen-menu__card {
/* 1. 调回极致透明：让背景透出来 */
background-color: rgba(255, 255, 255, 0.15) !important;
/* 2. 核心黑科技：saturate(0%) */
/* 这会让透过来的背景色变成黑白灰，从而彻底消灭蓝色，同时保留毛玻璃感 */
backdrop-filter: blur(25px) saturate(0%) !important;
-webkit-backdrop-filter: blur(25px) saturate(0%) !important;
/* 3. 精致的边框和阴影 */
border: 1px solid rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
border-radius: 12px !important;
}
/* ============================================
修复左上角丑陋的白色块 (关闭按钮)
============================================ */
.citizen-drawer__header,
.citizen-drawer__close {
background: transparent !important;
background-color: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* 确保关闭图标是黑色的（在浅色背景上可见） */
.citizen-drawer__close .oo-ui-iconElement-icon {
filter: brightness(0) !important;
opacity: 0.6;
}
/* 5. 搜索遮罩层 (变成纯净的暗调，而不是蓝调) */
.citizen-command-palette-backdrop {
background-color: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(5px) grayscale(100%) !important;
z-index: 9999 !important;
}
/* 6. 选中项颜色修复 (变成中性灰，而不是品牌蓝) */
.citizen-typeahead-suggestion--highlighted,
.citizen-command-palette-list-item[aria-selected="true"] {
background-color: #f0f0f0 !important;
color: #000 !important;
}
/* 深色模式适配 */
html.skin-theme-clientpref-night .citizen-command-palette {
background-color: rgba(30, 30, 30, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html.skin-theme-clientpref-night :root {
--color-surface-0: #1a1a1a !important;
--color-base-0: #e0e0e0 !important;
}
/* =========================================================
紧急修复：侧边栏 (Drawer) 实体化
修复问题：解决侧边栏因透明度过低 (0.15) 导致的“隐形”问题
========================================================= */
/* 1. 将侧边栏从通用样式中剥离，强制实体化 */
.citizen-drawer {
/* 【核心修复】从 0.15 提升到 0.98 */
/* 必须几乎不透明，否则全屏侧边栏会混淆视线 */
background-color: rgba(255, 255, 255, 0.98) !important;
/* 保持去色滤镜，确保不会透出网页背景的蓝色 */
backdrop-filter: blur(20px) saturate(0%) !important;
-webkit-backdrop-filter: blur(20px) saturate(0%) !important;
/* 添加右侧分割线和阴影，让它从页面里“浮”出来 */
border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 5px 0 30px rgba(0, 0, 0, 0.15) !important;
}
/* 2. 修复侧边栏内部的卡片背景 */
/* 你的截图中，Wiki信息是在一个卡片里的，如果侧边栏白了，卡片也白了，就看不清边界 */
.citizen-drawer .citizen-menu__card {
/* 让内部卡片变成透明，直接印在侧边栏上，或者给一个极淡的灰色 */
background-color: rgba(0, 0, 0, 0.03) !important;
box-shadow: none !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
/* 3. 修复侧边栏头部 (关闭按钮区域) */
.citizen-drawer__header {
/* 确保头部和侧边栏浑然一体 */
background-color: transparent !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
/* 4. 侧边栏文字颜色强制修正 (防止看不清) */
.citizen-drawer-content,
.citizen-drawer__header,
.citizen-menu__item {
color: #202122 !important;
}
/* ============================
深色模式适配 (防止晚上瞎眼)
============================ */
html.skin-theme-clientpref-night .citizen-drawer {
background-color: rgba(25, 25, 25, 0.98) !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html.skin-theme-clientpref-night .citizen-drawer .citizen-menu__card {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}