跳转到内容
打开/关闭菜单
  • 450 条目
  • 804 文件
  • 22 用户
  • 9043 编辑
Blockland Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Citizen.css:修订间差异

MediaWiki界面页面
ETTW​(留言 | 贡献)
无编辑摘要
ETTW​(留言 | 贡献)
小无编辑摘要
第1行: 第1行:
/* =========================================================
/* =========================================================
   Blockland Wiki 终极视觉修正 - V27 (HTML 结构精准修补版)
   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 {
.citizen-dropdown-summary:focus,
    background: transparent !important;
.citizen-dropdown-summary:active {
    background-color: transparent !important;
     border: none !important;
     border: none !important;
     outline: none !important;
     outline: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
    background: transparent !important;
     list-style: none !important; /* 移除 details 默认的小箭头 */
    background-color: transparent !important;
     list-style: none !important; /* 移除 details 默认小箭头 */
    -webkit-tap-highlight-color: transparent !important;
}
}


/* 移除 summary 默认的蓝色/黑色轮廓 */
/* 针对按钮内部图标和文字的微调 */
.citizen-dropdown-summary::marker,
.citizen-dropdown-summary::-webkit-details-marker {
.citizen-dropdown-summary::-webkit-details-marker {
     display: none !important;
     display: none !important;
}
}


/* 2. 【核心修复】菜单面板 - 恢复模糊效果 */
/* 3. 侧边栏菜单 (#citizen-drawer__card) 极致毛玻璃修复 */
/* 降低不透明度是复活模糊的关键 (0.15) */
#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(16px) saturate(150%) !important;
     background-color: rgba(255, 255, 255, 0.15) !important;
     -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
     backdrop-filter: blur(18px) saturate(160%) !important;
     -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
      
      
     border: 1px solid rgba(255, 255, 255, 0.25) !important;
    /* 边框美化:使用半透明细边框 */
     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);
     overflow: hidden !important;
     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-drawer__menu {
.citizen-menu__content {
     background: transparent !important;
     background: transparent !important;
     background-color: transparent !important;
     background-color: transparent !important;
第51行: 第64行:
}
}


/* 3. 搜索面板 (保留你要求的 1000px 逻辑) */
/* 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.65) !important; /* 搜索框稍厚一点方便看字 */
    /* 提高透明感 */
     backdrop-filter: blur(20px) !important;
     background-color: rgba(255, 255, 255, 0.6) !important;
     -webkit-backdrop-filter: blur(20px) !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;
     border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
}


/* 4. 垃圾桶贴边逻辑 (V24 方案) */
/* 5. 垃圾桶贴边逻辑 */
.citizen-command-palette-list-item {
.citizen-command-palette-list-item {
     position: relative !important;
     position: relative !important;
     padding-right: 44px !important;
     padding-right: 48px !important;
}
}
.citizen-command-palette-list-item__actions {
.citizen-command-palette-list-item__actions {
     position: absolute !important;
     position: absolute !important;
     right: 0 !important;
     right: 8px !important;
     width: 44px !important;
     top: 50% !important;
     display: flex !important;
     transform: translateY(-50%) !important;
    align-items: center !important;
     background: transparent !important;
     justify-content: center !important;
}
}


/* 5. 夜间模式适配 (去蓝深灰) */
/* 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.5) !important;
     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-dropdown-summary {
html.skin-theme-clientpref-night .citizen-menu__content-list a {
     border: none !important;
     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;
}