MediaWiki:Citizen.css:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
小无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* ========================================================= | /* ========================================================= | ||
Blockland Wiki | Blockland Wiki 视觉修正 V27 - 极致毛玻璃与 UI 去噪 | ||
修复:菜单模糊消失、按钮黑边框、搜索框去蓝 | |||
========================================================= */ | ========================================================= */ | ||
/* 1. | /* 1. 全局变量重置:允许背景透明穿透 */ | ||
:root { | |||
/* 必须让表面颜色带有透明度,毛玻璃才能生效 */ | |||
--color-surface-0: #fafafa !important; | |||
--color-surface-1: rgba(255, 255, 255, 0.1) !important; | |||
--color-surface-2: rgba(255, 255, 255, 0.05) !important; | |||
--color-surface-search: transparent !important; | |||
--color-base-0: #202122 !important; | |||
--color-primary: #0056b3 !important; | |||
} | |||
/* 2. 移除“打开/关闭菜单”按钮的边框与杂色 */ | |||
.citizen-header__item.citizen-dropdown, | .citizen-header__item.citizen-dropdown, | ||
.citizen-dropdown-details, | .citizen-dropdown-details, | ||
.citizen-dropdown-summary | .citizen-dropdown-summary { | ||
background: transparent !important; | |||
background-color: transparent !important; | |||
border: none !important; | border: none !important; | ||
outline: none !important; | outline: none !important; | ||
box-shadow: none !important; | box-shadow: none !important; | ||
list-style: none !important; /* 移除 details 默认的小箭头 */ | |||
list-style: none !important; /* 移除 details | |||
} | } | ||
/* | /* 针对按钮内部图标和文字的微调 */ | ||
.citizen-dropdown-summary::marker, | |||
.citizen-dropdown-summary::-webkit-details-marker { | .citizen-dropdown-summary::-webkit-details-marker { | ||
display: none !important; | display: none !important; | ||
} | } | ||
/* | /* 3. 侧边栏菜单 (#citizen-drawer__card) 极致毛玻璃修复 */ | ||
#citizen-drawer__card, | |||
#citizen-drawer__card.citizen-drawer__card, | .citizen-drawer__card, | ||
.citizen-menu__card { | .citizen-menu__card { | ||
background-color: rgba(255, 255, 255, 0.15) !important; | /* 核心修改:降低不透明度到 0.15,并恢复饱和度 */ | ||
backdrop-filter: blur( | background-color: rgba(255, 255, 255, 0.15) !important; | ||
-webkit-backdrop-filter: blur( | backdrop-filter: blur(18px) saturate(160%) !important; | ||
-webkit-backdrop-filter: blur(18px) saturate(160%) !important; | |||
border: 1px solid rgba(255, 255, 255, 0. | /* 边框美化:使用半透明细边框 */ | ||
border-radius: 16px !important; | border: 1px solid rgba(255, 255, 255, 0.4) !important; | ||
border-radius: 0 0 16px 16px !important; | |||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; | ||
/* | /* 强制开启 GPU 加速 */ | ||
transform: translateZ(0); | transform: translateZ(0); | ||
will-change: backdrop-filter; | |||
} | } | ||
/* | /* 清除内部容器的背景干扰 */ | ||
.citizen-menu__card-content, | .citizen-menu__card-content, | ||
.citizen-drawer__header, | .citizen-drawer__header, | ||
#citizen-main-menu, | #citizen-main-menu, | ||
.citizen-main-menu, | .citizen-main-menu, | ||
.citizen- | .citizen-menu__content { | ||
background: transparent !important; | background: transparent !important; | ||
background-color: transparent !important; | background-color: transparent !important; | ||
| 第51行: | 第64行: | ||
} | } | ||
/* | /* 4. 搜索面板修正 (保持 1000px 宽度) */ | ||
.citizen-command-palette { | .citizen-command-palette { | ||
width: 1000px !important; | width: 1000px !important; | ||
max-width: 95vw !important; | max-width: 95vw !important; | ||
background-color: rgba(255, 255, 255, 0. | /* 提高透明感 */ | ||
backdrop-filter: blur( | background-color: rgba(255, 255, 255, 0.6) !important; | ||
-webkit-backdrop-filter: blur( | backdrop-filter: blur(25px) saturate(120%) !important; | ||
-webkit-backdrop-filter: blur(25px) saturate(120%) !important; | |||
border: 1px solid rgba(255, 255, 255, 0.5) !important; | |||
border-radius: 20px !important; | border-radius: 20px !important; | ||
} | } | ||
/* | /* 5. 垃圾桶贴边逻辑 */ | ||
.citizen-command-palette-list-item { | .citizen-command-palette-list-item { | ||
position: relative !important; | position: relative !important; | ||
padding-right: | padding-right: 48px !important; | ||
} | } | ||
.citizen-command-palette-list-item__actions { | .citizen-command-palette-list-item__actions { | ||
position: absolute !important; | position: absolute !important; | ||
right: | right: 8px !important; | ||
top: 50% !important; | |||
transform: translateY(-50%) !important; | |||
background: transparent !important; | |||
} | } | ||
/* | /* 6. 深色模式适配 */ | ||
html.skin-theme-clientpref-night #citizen-drawer__card, | html.skin-theme-clientpref-night #citizen-drawer__card, | ||
html.skin-theme-clientpref-night .citizen-command-palette { | html.skin-theme-clientpref-night .citizen-command-palette { | ||
background-color: rgba(20, 20, 25, 0. | background-color: rgba(20, 20, 25, 0.45) !important; | ||
backdrop-filter: blur(20px) brightness(0.8) saturate(150%) !important; | |||
border: 1px solid rgba(255, 255, 255, 0.1) !important; | border: 1px solid rgba(255, 255, 255, 0.1) !important; | ||
} | } | ||
/* | /* 修复夜间模式下列表项的文字颜色 */ | ||
html.skin-theme-clientpref-night .citizen- | html.skin-theme-clientpref-night .citizen-menu__content-list a { | ||
color: #e0e0e0 !important; | |||
} | } | ||
2026年1月29日 (四) 20:00的版本
/* =========================================================
Blockland Wiki 视觉修正 V27 - 极致毛玻璃与 UI 去噪
修复:菜单模糊消失、按钮黑边框、搜索框去蓝
========================================================= */
/* 1. 全局变量重置:允许背景透明穿透 */
:root {
/* 必须让表面颜色带有透明度,毛玻璃才能生效 */
--color-surface-0: #fafafa !important;
--color-surface-1: rgba(255, 255, 255, 0.1) !important;
--color-surface-2: rgba(255, 255, 255, 0.05) !important;
--color-surface-search: transparent !important;
--color-base-0: #202122 !important;
--color-primary: #0056b3 !important;
}
/* 2. 移除“打开/关闭菜单”按钮的边框与杂色 */
.citizen-header__item.citizen-dropdown,
.citizen-dropdown-details,
.citizen-dropdown-summary {
background: transparent !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
list-style: none !important; /* 移除 details 默认的小箭头 */
}
/* 针对按钮内部图标和文字的微调 */
.citizen-dropdown-summary::marker,
.citizen-dropdown-summary::-webkit-details-marker {
display: none !important;
}
/* 3. 侧边栏菜单 (#citizen-drawer__card) 极致毛玻璃修复 */
#citizen-drawer__card,
.citizen-drawer__card,
.citizen-menu__card {
/* 核心修改:降低不透明度到 0.15,并恢复饱和度 */
background-color: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(18px) saturate(160%) !important;
-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
/* 边框美化:使用半透明细边框 */
border: 1px solid rgba(255, 255, 255, 0.4) !important;
border-radius: 0 0 16px 16px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
/* 强制开启 GPU 加速 */
transform: translateZ(0);
will-change: backdrop-filter;
}
/* 清除内部容器的背景干扰 */
.citizen-menu__card-content,
.citizen-drawer__header,
#citizen-main-menu,
.citizen-main-menu,
.citizen-menu__content {
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* 4. 搜索面板修正 (保持 1000px 宽度) */
.citizen-command-palette {
width: 1000px !important;
max-width: 95vw !important;
/* 提高透明感 */
background-color: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(25px) saturate(120%) !important;
-webkit-backdrop-filter: blur(25px) saturate(120%) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 20px !important;
}
/* 5. 垃圾桶贴边逻辑 */
.citizen-command-palette-list-item {
position: relative !important;
padding-right: 48px !important;
}
.citizen-command-palette-list-item__actions {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
}
/* 6. 深色模式适配 */
html.skin-theme-clientpref-night #citizen-drawer__card,
html.skin-theme-clientpref-night .citizen-command-palette {
background-color: rgba(20, 20, 25, 0.45) !important;
backdrop-filter: blur(20px) brightness(0.8) saturate(150%) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 修复夜间模式下列表项的文字颜色 */
html.skin-theme-clientpref-night .citizen-menu__content-list a {
color: #e0e0e0 !important;
}