MediaWiki:Citizen.css：修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
无编辑摘要 标签：手工回退 |
||
| （未显示2个用户的5个中间版本） | |||
| 第117行： | 第117行： | ||
--bl-glow-fill: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.10 ) ); | --bl-glow-fill: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.10 ) ); | ||
--bl-glow-fill-2: light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.08 ) ); | --bl-glow-fill-2: light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.08 ) ); | ||
/* Navbox 专用：光圈色标比 --bl-glow-ring 暗一档。 | |||
只压亮度 —— 半径和色标位置仍然是 400px / 50% / 100%，一个字没动。 | |||
（Navbox 很宽，"一片很亮的光"在亮色下比别的面板显眼得多，2026-10-07 实测。 | |||
注意：压亮度要用色标/透明度，不要缩半径 —— 那改的是范围。） | |||
嫌亮就继续降这四个值，两行搞定。 */ | |||
--bl-glow-ring-dim: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.25 ) ); | |||
--bl-glow-ring-dim-2: light-dark( rgba( 255, 255, 255, 0.10 ), rgba( 255, 255, 255, 0.04 ) ); | |||
/* —— 页面底色 —— */ | /* —— 页面底色 —— */ | ||
| 第581行： | 第589行： | ||
:root { | :root { | ||
--bl-ib-border: light-dark( rgba( 128, 128, 128, 0.30 ), transparent ); | --bl-ib-border: light-dark( rgba( 128, 128, 128, 0.30 ), transparent ); | ||
--bl-ib-divider: light-dark( rgba( 128, 128, 128, 0.15 ), transparent ); | --bl-ib-divider: light-dark( rgba( 128, 128, 128, 0.15 ), transparent ); | ||
| 第1,412行： | 第1,419行： | ||
border: 2px solid transparent !important; | border: 2px solid transparent !important; | ||
border-radius: inherit !important; | border-radius: inherit !important; | ||
/* | /* 尺寸保持原样：400px 半径、50% 淡出、100% 透明 —— 一个字没动。 | ||
亮度改用 Navbox 专用的一档暗色标（外层 --bl-glow-ring-dim，比通用的 | |||
--bl-glow-ring 暗 60% 左右；两个值都随主题切换，所以暗色一起压）。 | |||
⚠ 压亮度就改色标，别缩半径 —— 缩半径改的是"照亮多大一片"（2026-10-07 走过一次弯路）。 */ | |||
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring-dim) 0%, var(--bl-glow-ring-dim-2) 50%, transparent 100% ) border-box !important; | |||
background: radial-gradient( | |||
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important; | -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important; | ||
-webkit-mask-clip: content-box, border-box; | -webkit-mask-clip: content-box, border-box; | ||
| 第2,993行： | 第2,998行： | ||
border-radius: inherit; | border-radius: inherit; | ||
background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill), transparent 75%); | background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill), transparent 75%); | ||
opacity: . | /* opacity 与 z-index 原本写在这里，但下文（第 37 节）用同一个选择器 | ||
`html body.skin-citizen .cs-stream::after` 又写了 z-index: 1 / opacity: .18， | |||
优先级相同、位置更靠后 ⇒ 这两条一直是死声明，已删。 */ | |||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
html body.skin-citizen .cs-stream > .cs-comment, | html body.skin-citizen .cs-stream > .cs-comment, | ||
| 第3,811行： | 第3,817行： | ||
--bl-glow-fill: rgba( 255, 255, 255, 0.35 ); | --bl-glow-fill: rgba( 255, 255, 255, 0.35 ); | ||
--bl-glow-fill-2: rgba( 255, 255, 255, 0.20 ); | --bl-glow-fill-2: rgba( 255, 255, 255, 0.20 ); | ||
--bl-glow-ring-dim: rgba( 255, 255, 255, 0.35 ); | |||
--bl-glow-ring-dim-2: rgba( 255, 255, 255, 0.10 ); | |||
--bl-page-bg: #fafafa; | --bl-page-bg: #fafafa; | ||
--color-surface-0: #fafafa; | --color-surface-0: #fafafa; | ||
2026年10月20日 (二) 00:18的最新版本
/* 修正版标识：BL-CITIZEN-4PX-MOBILE-CONTRAST-20261007
* 本文件包含 Citizen Navbox 专属外观规则，完整替换 MediaWiki:Citizen.css。
*/
/* =====================================================================
* Blockland Wiki · Modern Aero UI (OS26.2) — Citizen 皮肤定制样式
* ---------------------------------------------------------------------
* 架构（2026-10-06 重构）
*
* 1. 颜色的唯一定义点是「亮色 / 暗色」两处，写在下面的语义色板里，
* 用 light-dark() 同时描述两种主题。
* 2. 明暗切换由 color-scheme 驱动：
* day → light night → dark
* os → light dark black → dark
* 所以 os + 系统暗色 自动等于 night，os + 系统亮色 自动等于 day，
* 不再需要任何 @media (prefers-color-scheme) 里重复一遍颜色。
* 3. Aero / Basic（性能模式）不再定义任何颜色，只切换「效果」：
* 模糊、阴影、光效伪元素的开关，以及毛玻璃 → 不透明表面的材质降级。
*
* 对照 Citizen 3.24.0 源码做过选择器与 token 校准。
*
* ⚠ MediaWiki 的 CSS 校验器（站内编辑器用的 css-sanitizer）不支持的写法，
* 本文件一律避免 —— 以后改动请继续遵守：
* · 不用 :is( ... )、:has( ... )
* · 不用多参数 :not( a, b )，改用链式 :not(a):not(b)
* · 属性选择器不加 i 大小写标志（[style*="x" i] ✗）
* · 引号字符串里不出现括号（[style*="gradient("] ✗）—— 用 [style*="gradient"] 即可
* · 靠「类名列表逐个展开」代替 :is() 的分组
* 会被校验器拒绝的写法会导致整条规则不生效（甚至整份样式被判废）。
* ===================================================================== */
/**
* Blockland Wiki Modern Aero UI OS26.2
* 风格：Acrylic / Aero / Basic
* 修改：全局毛玻璃，全局光线追踪，UI 全面现代化。
* 版本：26.2
*/
/* =====================================================================
* 1. 主题基础：唯一明暗开关
* ===================================================================== */
html.skin-theme-clientpref-day { color-scheme: light; }
html.skin-theme-clientpref-night { color-scheme: dark; }
html.skin-theme-clientpref-black { color-scheme: dark; }
html.skin-theme-clientpref-os { color-scheme: light dark; }
/* =====================================================================
* 2. 语义色板 —— 全站颜色的唯一来源
* 亮色值 / 暗色值成对写在 light-dark() 里，只此一处。
* ===================================================================== */
:root {
/* —— 材质 ——
暗色侧的玻璃要比页面底色【亮】一档，浮板才有边界：
亮色侧本来就是「白 35% 叠在 #fafafa 上」，板比页面亮 ⇒ 边界自然成立；
原来的暗色侧是「黑 55% 叠在 #1a1b1c 上」，叠出来 #171718，
比页面还暗 3/255 ⇒ 明度差被抹平，浮板完全看不出边界。
修正方向是把暗色侧抬亮，但第一次抬得偏亮（44 → 叠出来 #242527，
比页面亮 10/255），实测反馈「颜色太亮了点」。现在回收一档：
--bl-glass rgb 44 → 38，alpha 0.55 → 0.52（透一点）
--bl-glass-soft rgb 44 → 38，alpha 0.50 → 0.47
--bl-glass-strong rgb 52 → 46，alpha 0.70 → 0.67
叠出来约 #202123，比页面亮 6/255 —— 边界还看得出，但不抢眼。
继续微调的旋钮就是这三个值：rgb 越低越沉，alpha 越低越透。 */
--bl-glass: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 38, 39, 42, 0.52 ) );
--bl-glass-soft: light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 38, 39, 42, 0.47 ) );
--bl-glass-strong: light-dark( rgba( 255, 255, 255, 0.75 ), rgba( 46, 47, 50, 0.67 ) );
--bl-blur: blur( 14px ) saturate( 100% );
/* 目录面板（#citizen-toc）光圈的透明度。
桌面态它是滚动容器 ⇒ 动态光环由 common.js 的 Section27 实现
（用 --bl-toc-scroll 抵消滚动位移，环才钉得住）；
这个值只用于「没有 JS / Basic 模式」时的静态细光环兜底。
暗色侧在 26 节降到 0.10。 */
--bl-toc-ring-base: 0.45;
/* —— 不透明表面：Basic 模式关掉模糊后使用，保证可读性 —— */
--bl-surface-2: light-dark( #f5f5f5, #2d2e2f );
/* —— 表格彩色单元格的「暗色压深」滤镜 ——
模板会在单元格上写死浅色底（#C4A454 / #A0B8FF / #E0E8FF …）。
暗色下不抹掉它们，做法是：把模板原色【压暗 + 补饱和】，
而不是简单叠一层黑 —— 浅色底本来饱和度就低，只压暗会变成灰扑扑的脏色。
亮色侧是 none，等于没有。明暗开关写在 26 节（与 --bl-f-* 同一套写法）。 */
--bl-cell-filter: none;
/* —— 描边与分隔线 —— */
--bl-border: light-dark( rgba( 128, 128, 128, 0.10 ), rgba( 255, 255, 255, 0.10 ) );
--bl-border-strong: light-dark( rgba( 128, 128, 128, 0.20 ), rgba( 255, 255, 255, 0.12 ) );
--bl-border-soft: light-dark( rgba( 128, 128, 128, 0.08 ), rgba( 255, 255, 255, 0.06 ) );
--bl-divider: light-dark( rgba( 128, 128, 128, 0.15 ), rgba( 255, 255, 255, 0.08 ) );
--bl-edge: light-dark( rgba( 255, 255, 255, 0.45 ), rgba( 255, 255, 255, 0.10 ) );
/* —— 文字 —— */
--bl-text: light-dark( #202122, #eaecf0 );
--bl-text-strong: light-dark( #000000, #ffffff );
--bl-text-muted: light-dark( #54595d, #8e8e93 );
/* —— 强调色 —— */
--bl-accent: light-dark( #3366cc, #6ba4ff );
--bl-accent-hover: light-dark( #2a6bb0, #9bc4ff );
--bl-accent-soft: light-dark( rgba( 54, 121, 204, 0.10 ), rgba( 54, 121, 204, 0.25 ) );
--bl-accent-soft-2: light-dark( rgba( 54, 121, 204, 0.15 ), rgba( 54, 121, 204, 0.30 ) );
/* —— 交互叠加 —— */
--bl-hover: light-dark( rgba( 0, 0, 0, 0.04 ), rgba( 255, 255, 255, 0.05 ) );
--bl-hover-strong: light-dark( rgba( 0, 0, 0, 0.06 ), rgba( 255, 255, 255, 0.10 ) );
/* —— 阴影（只存颜色，偏移量写在使用处；light-dark() 只能包裹颜色） —— */
--bl-shadow-color-sm: light-dark( rgba( 0, 0, 0, 0.06 ), rgba( 0, 0, 0, 0.30 ) );
--bl-shadow-color: light-dark( rgba( 0, 0, 0, 0.10 ), rgba( 0, 0, 0, 0.30 ) );
--bl-shadow-color-lg: light-dark( rgba( 31, 38, 135, 0.15 ), rgba( 0, 0, 0, 0.50 ) );
/* —— 鼠标跟随光效的三档色 —— */
--bl-glow-ring: light-dark( rgba( 255, 255, 255, 0.90 ), rgba( 255, 255, 255, 0.80 ) );
--bl-glow-ring-2: light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.10 ) );
--bl-glow-fill: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.10 ) );
--bl-glow-fill-2: light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.08 ) );
/* Navbox 专用：光圈色标比 --bl-glow-ring 暗一档。
只压亮度 —— 半径和色标位置仍然是 400px / 50% / 100%，一个字没动。
（Navbox 很宽，"一片很亮的光"在亮色下比别的面板显眼得多，2026-10-07 实测。
注意：压亮度要用色标/透明度，不要缩半径 —— 那改的是范围。）
嫌亮就继续降这四个值，两行搞定。 */
--bl-glow-ring-dim: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.25 ) );
--bl-glow-ring-dim-2: light-dark( rgba( 255, 255, 255, 0.10 ), rgba( 255, 255, 255, 0.04 ) );
/* —— 页面底色 —— */
--bl-page-bg: light-dark( #fafafa, #1a1b1c );
}
/* 覆盖 Citizen 官方 surface 阶梯：一处定义，明暗自动切换 */
:root {
--color-surface-0: light-dark( #fafafa, #1a1b1c );
--color-surface-1: light-dark( #ffffff, #202122 );
--color-surface-2: light-dark( #f5f5f5, #2d2e2f );
--color-surface-3: light-dark( #e8e8e8, #373839 );
}
body { background-color: var(--bl-page-bg); }
/* =====================================================================
* 3. 关键帧
* ===================================================================== */
@keyframes citizen-pop-in {
0% { opacity: 0; transform: translate( -50%, -45% ) scale( 0.85 ); }
100% { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); }
}
@keyframes citizen-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* =====================================================================
* 4. 通用毛玻璃面板
* ===================================================================== */
.citizen-menu__card,
#citizen-preferences-dropdown__card,
.citizen-sticky-header-background,
#citizen-page-actions-more__card,
.citizen-dropdown .citizen-menu__card {
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border) !important;
border-radius: 12px !important;
}
.citizen-menu__card,
.citizen-drawer__card {
z-index: 10000 !important;
isolation: isolate !important;
}
/* =====================================================================
* 5. 侧边栏 / 顶栏
* ===================================================================== */
.mw-logo-icon {
border-radius: 6px !important;
overflow: hidden;
}
.citizen-header {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
/* —— 顶栏/侧边栏那一条细边 ——
见下面 .citizen-header::after 的 border-image：真正看得见的那条边
画在 ::after 上（桌面是左侧竖向玻璃条、手机是底部横条），
给它末端色标补亮色侧的淡灰即可。
⚠ 不要画在 .citizen-header 自己身上：它的盒子是 fixed + inset 0
（见源码 Header.less 第 2-9 行，四个方向都取 --header-inset-*，
tokens 里默认全 0px），所以它的 box 边并不落在玻璃条的外沿上，
在它身上加边框等于白加（2026-10-07 实测：加了也看不到）。 */
/* 左侧（桌面）竖向玻璃条 */
.citizen-header::after {
content: "";
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
width: var( --header-size, 3.5rem );
height: 100vh;
background-color: var(--bl-glass);
background-image: radial-gradient(
600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
light-dark( rgba( 255, 255, 255, 0.15 ), rgba( 255, 255, 255, 0.08 ) ),
transparent 80%
);
backdrop-filter: var(--bl-blur);
-webkit-backdrop-filter: var(--bl-blur);
/* 右侧那条边 = 鼠标跟随的渐变描边。
⚠ 末端色标原来是 transparent —— 鼠标不在附近时这条边完全不存在，
亮色下玻璃条（白 35% 叠在 #fafafa 上）和页面糊在一起，
侧面看不出任何边界（2026-10-07 实测）。
末端换成亮色侧的一层淡灰（暗色侧仍为 transparent，暗色下玻璃比页面亮、不需要）：
平时有一条隐隐约约的边，鼠标靠近时被光圈点亮。 */
border-right: 1px solid transparent;
border-image: radial-gradient(
180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
var(--bl-glow-ring),
light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.10 ) ) 80%,
light-dark( rgba( 128, 128, 128, 0.20 ), transparent )
) 1 / 1 / 0 stretch;
}
/* 平板/手机：玻璃条转为底部横条 */
@media screen and (max-width: 1119px) {
.citizen-header::after {
top: auto;
bottom: 0;
width: 100%;
height: var( --header-size, 3.5rem );
border-right: none;
border-top: 1px solid transparent;
/* 同桌面侧：末端色标不能是 transparent，否则鼠标不在附近时
这条边完全不存在，亮色下底部横条和页面糊在一起 */
border-image: radial-gradient(
150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
light-dark( rgba( 255, 255, 255, 0.40 ), rgba( 255, 255, 255, 0.60 ) ),
light-dark( rgba( 128, 128, 128, 0.20 ), transparent )
) 1 / 1 / 0 stretch;
background-image: none !important;
}
}
/* =====================================================================
* 6. Sticky Header
* ===================================================================== */
.citizen-sticky-header {
border-radius: 0 !important;
background: transparent !important;
}
.citizen-sticky-header-background {
border-radius: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
top: 0 !important;
border: none !important;
border-bottom: 1px solid var(--bl-divider) !important;
background-color: var(--bl-glass) !important;
background-image: none !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
}
.citizen-sticky-header .cdx-button--weight-quiet { color: var(--bl-text) !important; }
.citizen-sticky-header-page-title,
.citizen-sticky-header-page-tagline { color: var(--bl-text-strong) !important; }
/* =====================================================================
* 7. 搜索面板 Command Palette
* ===================================================================== */
.citizen-command-palette-backdrop {
background-color: light-dark( rgba( 0, 0, 0, 0.20 ), rgba( 0, 0, 0, 0.45 ) ) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
z-index: 9999 !important;
animation: citizen-fade-in 0.3s ease forwards;
}
.citizen-command-palette {
position: fixed !important;
width: 1000px !important;
max-width: 92vw !important;
top: 50% !important;
left: 50% !important;
z-index: 10000 !important;
isolation: isolate !important;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border-radius: 24px !important;
border: 1px solid var(--bl-edge) !important;
box-shadow: 0 40px 100px var( --bl-shadow-color-lg ) !important;
animation: citizen-pop-in 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards !important;
transform-origin: center center !important;
}
/* 输入区已从 __input / __search 迁到 -header 下（Citizen 3.24） */
.citizen-command-palette-header,
.citizen-command-palette__results,
.citizen-command-palette__footer,
.cdx-text-input__input {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.citizen-command-palette-header__input { color: var(--bl-text) !important; }
.citizen-command-palette-list { padding: 8px 0 !important; }
.citizen-command-palette-list-item {
margin: 0 12px 6px 12px !important;
border-radius: 12px !important;
overflow: hidden !important;
border: none !important;
display: block !important;
transition: background-color 0.2s ease !important;
}
.citizen-command-palette-list-item__content {
display: flex !important;
padding: 12px 16px !important;
width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
color: var(--bl-text) !important;
}
.citizen-command-palette-list-item__metadata { display: none !important; }
.citizen-command-palette-list-item:hover,
.citizen-command-palette-list-item[aria-selected="true"] {
background-color: var(--bl-hover-strong) !important;
}
.citizen-command-palette-list-item__actions,
.citizen-command-palette-list-item__action {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
min-width: 32px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin-left: auto !important;
}
.citizen-command-palette-list-item__action svg {
fill: var(--bl-text) !important;
opacity: 0.85 !important;
transition: all 0.2s ease !important;
}
.citizen-command-palette-list-item__action:hover {
background-color: light-dark( rgba( 255, 192, 203, 0.60 ), rgba( 210, 51, 51, 0.30 ) ) !important;
border-radius: 8px !important;
}
.citizen-command-palette-list-item__action:hover svg {
fill: light-dark( #d33, #ff8a8a ) !important;
opacity: 1 !important;
transform: scale( 1.15 ) !important;
}
.citizen-command-palette-list-item__text__label,
.citizen-command-palette-list-item__text__description bdi {
color: var(--bl-text) !important;
}
/* =====================================================================
* 8. 设置菜单（Citizen 3.24：Vue 渲染，分「外观 / 行为」两组）
* ===================================================================== */
#citizen-preferences-content {
display: flex !important;
flex-direction: column !important;
}
/* 组内排序：外观组 */
#skin-client-prefs-skin-theme { order: 1 !important; }
#skin-client-prefs-citizen-feature-custom-font-size { order: 2 !important; }
#skin-client-prefs-citizen-feature-custom-width { order: 3 !important; }
/* 「图像变暗」这一条没什么用，直接从偏好面板里去掉。
用 CSS 隐藏而不是 JS 删节点：面板是 Vue 渲染的，
外部删掉它管理的节点在重渲染时容易出错；隐藏既安全又不会被渲染回来。
（原来这里只写了 order: 4，现在不改默认值，直接隐藏。） */
#skin-client-prefs-citizen-feature-image-dimming { display: none !important; }
#skin-client-prefs-citizen-feature-pure-black { order: 5 !important; }
/* 组内排序：行为组 */
#skin-client-prefs-citizen-feature-autohide-navigation { order: 1 !important; }
#skin-client-prefs-citizen-feature-performance-mode { order: 2 !important; }
.citizen-preferences-section__heading {
color: var(--bl-accent) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
/* =====================================================================
* 8.1 偏好面板里的开关（CdxToggleSwitch）几何
*
* Codex 默认（源码 packages/codex/src/components/toggle-switch/ToggleSwitch.vue）：
* 轨道 .cdx-toggle-switch__switch
* width: 48px / height: 32px / border: 1px / border-radius: pill / overflow: hidden
* 白点 .cdx-toggle-switch__switch__grip
* 20px 圆 / position: absolute / top: 50%
* transform: translate( 6px, -50% ) 关
* transform: translate( 20px, -50% ) 开（:checked ~ 时）
* ⇒ 轨道 32px 太高、白点 20px 显小（用户反馈"上下太宽、白点太小"）。
*
* 这里改成「白点比蓝条上下都高」，并把轨道尺寸也定死：
* 轨道 46×20px，白点 28px ⇒ 白点上下各凸出 4px。
*
* ⚠ 轨道宽度必须由这里显式给定，不能再交给 Codex。
* 它的宽高是 em 单位的（源码注释原话："Switch width and height is scaling
* proportionally to the font-size being used in each mode"），
* 偏好面板的字号比 16px 大 ⇒ 实际轨道比 48px 宽，
* 于是写死的水平位移会"白点不到头"（2026-10-07 实测）。
* 自己定宽度之后，位移才能算准。
* ⚠ 轨道必须 overflow: visible —— 它默认是 hidden，会把凸出来的白点裁掉。
* ⚠ 白点 transform 里的 -50% 是垂直居中用的，不能丢。
* 水平位移按「白点贴到轨道【外】缘」算 —— 白点的包含块是轨道的 padding box
* （框内坐标），所以要再多减 1px 把 1px 描边也算进去：
* 轨道 46px、边框 1px ⇒ padding box 宽 44px、左边在框内坐标 1px 处
* 关：白点左边贴 0（外缘） ⇒ x = -1px
* 开：白点右边贴 46（外缘） ⇒ x = 46 - 28 - 1 = 17px
* （只写到 0 / 16 的话，两端还会各剩 1px 描边，视觉上仍像"差一点没到头"。）
* ===================================================================== */
html body.skin-citizen .cdx-toggle-switch__switch {
width: 46px !important;
min-width: 0 !important;
height: 20px !important;
min-height: 0 !important;
/* 关键：默认 hidden 会把高出轨道的白点裁掉 */
overflow: visible !important;
border-radius: 9999px !important;
}
html body.skin-citizen .cdx-toggle-switch__switch__grip {
width: 28px !important;
height: 28px !important;
min-width: 0 !important;
min-height: 0 !important;
top: 50% !important;
box-sizing: border-box !important;
transform: translate( -1px, -50% ) !important;
}
html body.skin-citizen .cdx-toggle-switch__input:checked ~ .cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
transform: translate( 17px, -50% ) !important;
}
/* =====================================================================
* 9. 首页 Banner
* ===================================================================== */
.full-width-banner {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
height: 400px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.70 );
z-index: 1;
background-repeat: no-repeat;
background-color: #2a2a2a;
}
.banner-content {
max-width: 1200px;
padding: 20px;
text-align: center;
}
.page-首页 .banner-image {
--banner-image-url: url("https://cdn.jsdelivr.net/gh/KKBlockE/BlocklandPicturebed@main/main/d49dd42343ab1bfcf4efa67f62f4ecf8.png");
--banner-image-height: 70vh;
background-image: linear-gradient( to top, var(--color-surface-0) 15%, transparent 150% ), var(--banner-image-url);
background-size: cover;
background-position: top;
height: var(--banner-image-height);
margin-bottom: calc( -1 * var(--banner-image-height) );
position: relative;
z-index: 1;
pointer-events: none;
}
.home-banner-overlay {
position: relative;
z-index: 10;
}
.page-banner-bg,
.page-banner-bg * {
pointer-events: none !important;
user-select: none !important;
}
.page-banner {
pointer-events: none !important;
}
.page-banner-content div {
pointer-events: auto !important;
}
/* =====================================================================
* 10. 搜索页面优化
* ===================================================================== */
.page-特殊_搜索 .oo-ui-layout.oo-ui-labelElement.oo-ui-actionFieldLayout,
.page-特殊_搜索 .oo-ui-fieldLayout.oo-ui-labelElement,
.page-特殊_搜索 .mw-widget-titleInputWidget,
.page-特殊_搜索 .mw-widget-searchInputWidget {
max-width: none !important;
width: 100% !important;
display: flex !important;
}
.page-特殊_搜索 .mw-search-form-wrapper,
.page-特殊_搜索 #mw-search-top-table,
.page-特殊_搜索 .oo-ui-fieldLayout-field {
width: 100% !important;
max-width: none !important;
}
.page-特殊_搜索 .oo-ui-actionFieldLayout-input {
flex: 1 1 auto !important;
width: 100% !important;
}
.page-特殊_搜索 .oo-ui-actionFieldLayout-input .oo-ui-inputWidget-input {
height: 48px !important;
width: 100% !important;
padding-left: 45px !important;
border-radius: 12px 0 0 12px !important;
box-sizing: border-box !important;
}
.page-特殊_搜索 .oo-ui-actionFieldLayout-button {
flex: 0 0 auto !important;
width: auto !important;
}
.page-特殊_搜索 .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-button {
height: 48px !important;
min-width: 120px !important;
padding: 0 30px !important;
border-radius: 0 12px 12px 0 !important;
box-sizing: border-box !important;
}
/* =====================================================================
* 11. Infobox 信息框系统
* 原先三代写法（v1/v3/v4）已合并为一份；内部边框在暗色下统一关闭，
* 用 light-dark() 一处表达，不再分别写 night / os 两份。
* ===================================================================== */
:root {
--bl-ib-border: light-dark( rgba( 128, 128, 128, 0.30 ), transparent );
--bl-ib-divider: light-dark( rgba( 128, 128, 128, 0.15 ), transparent );
--bl-ib-hairline: light-dark( rgba( 128, 128, 128, 0.10 ), transparent );
/* 模板自带「浅色实心底色」的表头，文字一律用这个色。
本站模板给的底色全是浅色系（#CFF3F7 / #e6b8f2 / #AFFFFF / #FFFF96 / #FFB4B4 / #C8A0C8…），
所以这里取恒定深色，不随主题翻转 —— 否则暗色下会变成白字压在浅底上。
亮色侧 #202122 本来就是正文色，因此这条实际只在暗色下起作用。 */
--bl-ib-on-fill: #202122;
}
/* 信息框本体完全透明：只有描边 + 光线 + 文字，
底色一律交给页面背景与模板自带的内联颜色。 */
.infobox {
display: table !important;
position: relative !important;
isolation: isolate !important;
z-index: 10 !important;
overflow: visible !important;
opacity: 1 !important;
background: var(--bl-glass) !important;
background-image: none !important;
backdrop-filter: var(--bl-blur);
-webkit-backdrop-filter: var(--bl-blur);
color: var(--bl-text) !important;
font-size: 0.925rem !important;
border: 1px solid var(--bl-ib-border) !important;
border-radius: 16px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
float: right !important;
clear: right !important;
margin: 0.5em 0 0.5em 1em !important;
width: 22em !important;
}
.infobox > * {
position: relative;
z-index: 1;
}
/* —— 单元格 —— */
.infobox th:not(.infobox-above),
.infobox td:not(.infobox-above) {
background-color: transparent;
padding: 8px 5px !important;
line-height: 1.4 !important;
border-top: none !important;
}
/* 单元格文字：只有「自己没写背景色」时才用主题正文色。
带内联底色的单元格（模板的语义色）不在这里插手 —— 见第 35 节统一方案。 */
.infobox th:not(.infobox-above):not([style*="background"]),
.infobox td:not(.infobox-above):not([style*="background"]) {
color: var(--bl-text);
}
/* 现代 wiki UI：数据行之间不画分割线，信息框保持一整块。
（原先这里每行都有一条 1px 灰线，且暗色侧是 transparent，
于是只有亮色看起来是一格一格、有「立体感」。） */
.infobox tr:not(:last-child) th,
.infobox tr:not(:last-child) td {
border-bottom: none !important;
}
.infobox th[colspan="2"] {
background-color: transparent;
}
.infobox th[colspan="2"]:not([style*="background"]) {
color: var(--bl-text);
}
.infobox .mw-file-description img { background: transparent !important; }
/* —— 标题 —— */
.infobox .infobox-title {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 12px 0 !important;
padding: 16px 12px !important;
border-radius: 12px !important;
overflow: hidden !important;
/* 原先这里是 `1px solid light-dark( rgba(128,128,128,0.30), transparent )`：
亮色有一圈灰边、暗色没有 ⇒ 亮色下像多出一层浮起的内框。
改成两色一致（都不画），外层描边由 .infobox 自己负责。 */
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
text-align: center !important;
line-height: 1.5 !important;
font-size: 1.2rem !important;
}
caption.infobox-title {
caption-side: top !important;
margin-bottom: 0 !important;
}
/* —— 主体 —— */
.infobox tbody {
display: table !important;
width: 100% !important;
/* 原先这里是 `1px solid light-dark( rgba(128,128,128,0.30), transparent )`：
这是亮色下「奇怪的立体感凸起」的直接来源 ——
外层 .infobox 已有一圈描边，再在里面画一圈 1px 圆角灰边，
两个同心圆角框叠起来就读成了浮起的内嵌面板；而暗色侧是 transparent，
所以暗色下没有这个现象。改成两色一致（都不画）。 */
border: none !important;
border-radius: 12px !important;
overflow: hidden !important;
background: transparent !important;
}
/* —— 有 caption 的表：tbody 不在卡片顶部，顶角不能圆 ——
例：<table class="infobox vcard"><caption class="infobox-title" style="background:#4FD5E8">
tbody 位于 caption【下方】，只有底部是卡片的边。
若沿用上面的 12px 全圆角，tbody 的顶角会在 caption 与正文之间
切出一圈圆角缺口（2026-10-07 实测：角色信息框正中出现圆角）。
判据用相邻兄弟选择器 caption + tbody —— 纯 CSS 可表达，
正好等价于「这张表有没有 caption」。 */
.infobox > caption + tbody {
border-radius: 0 0 12px 12px !important;
}
.infobox .infobox-above {
text-shadow: none !important;
font-weight: bold !important;
text-align: center !important;
padding: 8px 5px !important;
border-bottom: none !important;
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
}
/* 表头文字：只有模板没写底色时才用主题色；
模板自带底色（内联 / TemplateStyles）时，文字完全按模板来。 */
.infobox .infobox-above:not([style*="background"]) {
color: var(--bl-text-strong);
}
.infobox th.infobox-above,
.infobox td.infobox-above {
padding: 8px 5px !important;
line-height: 1.5 !important;
}
.infobox tr:first-child th,
.infobox tr:first-child td {
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
}
.infobox tr:last-child td,
.infobox tr:last-child th {
border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
.infobox .infobox-header {
background-color: transparent;
font-weight: bold !important;
text-align: center !important;
text-transform: uppercase;
letter-spacing: 1.5px;
/* 现代 UI：分区标题只在【上方】留一条主要分割线，下方不画。
颜色用 --bl-divider（明暗两侧都有值），避免出现"只有亮色有线"。 */
border-top: 1px solid var(--bl-divider) !important;
border-bottom: none !important;
box-shadow: none !important;
}
.infobox .infobox-header:not([style*="background"]) {
color: var(--bl-text-strong);
}
.infobox-player-header {
background: linear-gradient( 90deg, var(--bl-accent-soft), transparent );
border-radius: 8px;
padding: 5px !important;
margin-bottom: 5px !important;
}
/* —— caption 去装饰 —— */
.infobox caption,
.mw-parser-output .infobox caption,
table.infobox caption {
background: transparent;
background-color: transparent;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
outline: none !important;
}
/* caption 没写内联字色时才用主题正文色；
写了（例如 style="background:#4FD5E8; color:#ffffff"）就完全按模板来。 */
.infobox caption:not([style*="color"]),
.mw-parser-output .infobox caption:not([style*="color"]),
table.infobox caption:not([style*="color"]) {
color: var(--bl-text);
}
.infobox caption b,
table.infobox caption b {
background: transparent;
border: none !important;
box-shadow: none !important;
filter: none !important;
color: inherit;
}
/* —— 暗色下彻底关闭信息框内部所有分割线 —— */
.mw-parser-output .infobox,
.mw-parser-output .infobox tr,
.mw-parser-output .infobox th,
.mw-parser-output .infobox td,
.mw-parser-output .infobox .infobox-above,
.mw-parser-output .infobox .infobox-header,
.mw-parser-output .infobox table {
border-color: light-dark( rgba( 128, 128, 128, 0.15 ), transparent ) !important;
}
/* —— 外圈光边 ——
⚠ 宽度与内缩是「细光效」的关键参数。
inset: -1px + border: 2px ⇒ 与其它面板（菜单卡 / ambox / voy-box /
command-palette / navbox …）**同一组值**，线宽统一。
原始 D:\c.css 里这一组本来就是 2px；那文件后面几段又先后把它改成
3px（inset -2px，L2811）→ 4px（inset -4px，L4512）→ 1px（inset 0，L4479）
四个版本互相覆盖，最后停在 4px —— 是反复迭代的产物，别照抄其中任一条。
2026-10-07 实测：3px（inset -2px）向外凸出一圈偏粗的白边，用户要求改细。
各面板的线宽：信息框 2px、其余横条面板 2px、目录 1.2px、最后修改时间 2.4px。 */
.infobox::before,
table.infobox::before,
table.infobox[style*="background"]::before,
table.infobox[style*="width"]::before {
content: "" !important;
position: absolute;
inset: -1px;
border: 2px solid transparent;
border-radius: inherit;
background: radial-gradient(
400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
var(--bl-glow-ring) 0%,
var(--bl-glow-ring-2) 50%,
transparent 100%
) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: overlay;
z-index: 100;
pointer-events: none;
}
.infobox::after,
table.infobox::after,
table.infobox[style*="background"]::after,
table.infobox[style*="width"]::after {
content: "" !important;
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
var(--bl-glow-fill) 0%,
transparent 75%
) !important;
mix-blend-mode: soft-light;
z-index: 1;
pointer-events: none;
}
.infobox .infobox-title[style*="color:black"]:not([style*="background"]),
.infobox .infobox-title[style*="color: black"]:not([style*="background"]),
.infobox .infobox-title[style*="color:#000;"]:not([style*="background"]),
.infobox .infobox-title[style*="color: #000;"]:not([style*="background"]),
.infobox .infobox-title[style*="color:#000000"]:not([style*="background"]),
.infobox .infobox-title[style*="color: #000000"]:not([style*="background"]),
.infobox .infobox-title[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
.infobox .infobox-title[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
.infobox .infobox-title[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
.infobox .infobox-header[style*="color:black"]:not([style*="background"]),
.infobox .infobox-header[style*="color: black"]:not([style*="background"]),
.infobox .infobox-header[style*="color:#000;"]:not([style*="background"]),
.infobox .infobox-header[style*="color: #000;"]:not([style*="background"]),
.infobox .infobox-header[style*="color:#000000"]:not([style*="background"]),
.infobox .infobox-header[style*="color: #000000"]:not([style*="background"]),
.infobox .infobox-header[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
.infobox .infobox-header[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
.infobox .infobox-header[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
.infobox .infobox-above[style*="color:black"]:not([style*="background"]),
.infobox .infobox-above[style*="color: black"]:not([style*="background"]),
.infobox .infobox-above[style*="color:#000;"]:not([style*="background"]),
.infobox .infobox-above[style*="color: #000;"]:not([style*="background"]),
.infobox .infobox-above[style*="color:#000000"]:not([style*="background"]),
.infobox .infobox-above[style*="color: #000000"]:not([style*="background"]),
.infobox .infobox-above[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
.infobox .infobox-above[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
.infobox .infobox-above[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
.infobox .infobox-subheader[style*="color:black"]:not([style*="background"]),
.infobox .infobox-subheader[style*="color: black"]:not([style*="background"]),
.infobox .infobox-subheader[style*="color:#000;"]:not([style*="background"]),
.infobox .infobox-subheader[style*="color: #000;"]:not([style*="background"]),
.infobox .infobox-subheader[style*="color:#000000"]:not([style*="background"]),
.infobox .infobox-subheader[style*="color: #000000"]:not([style*="background"]),
.infobox .infobox-subheader[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
.infobox .infobox-subheader[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
.infobox .infobox-subheader[style*="rgb"][style*="0 0 0"]:not([style*="background"]) {
color: light-dark( #000000, #eaecf0 ) !important;
}
/* =====================================================================
* 12. Infobox · ve-infobox-country / geography / vcard
* ===================================================================== */
.infobox.ve-infobox-country,
.infobox.ve-infobox-country tbody,
.infobox.ve-infobox-country tr {
background-color: transparent !important;
border-color: var(--bl-ib-hairline) !important;
}
.infobox.ve-infobox-country th,
.infobox.ve-infobox-country td {
background-color: transparent;
border-color: var(--bl-ib-hairline) !important;
}
.infobox.ve-infobox-country {
background: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-edge) !important;
box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
border-radius: 16px !important;
overflow: hidden;
padding: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
.infobox.ve-infobox-country tbody {
background-color: transparent !important;
border: none !important;
}
.infobox.ve-infobox-country .infobox-above {
text-shadow: none !important;
font-weight: bold !important;
text-align: center !important;
padding: 8px 5px !important;
border-bottom: none !important;
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
margin: 0 !important;
display: table-cell !important;
box-shadow: none !important;
}
.infobox.ve-infobox-country .infobox-above:not([style*="background"]) {
color: var(--bl-text-strong);
}
.infobox.ve-infobox-country .infobox-header:not([style*="background"]) {
color: light-dark( #3366cc, #ffffff );
}
.infobox.ve-infobox-country tr:first-child th,
.infobox.ve-infobox-country tr:first-child td { border-top: none !important; }
.infobox.ve-infobox-country .infobox-header {
background-color: transparent;
text-shadow: light-dark( none, 0 1px 2px rgba( 0, 0, 0, 0.30 ) );
backdrop-filter: none;
-webkit-backdrop-filter: none;
font-weight: bold !important;
text-align: center !important;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 0.85rem;
border-top: 1px solid var(--bl-divider) !important;
border-bottom: none !important;
}
.infobox.ve-infobox-country .infobox-image img {
background: transparent !important;
filter: drop-shadow( 0 4px 8px rgba( 0, 0, 0, 0.20 ) );
}
/* —— geography / vcard 深色适配（原先只覆盖了 os，现已统一） —— */
.infobox.geography,
.infobox.vcard {
background: var(--bl-glass) !important;
border: 1px solid var(--bl-edge) !important;
box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
}
.infobox.geography .infobox-above,
.infobox.vcard .infobox-above,
.infobox.geography th.fn.org,
.infobox.vcard th.fn.org {
border-color: var(--bl-ib-divider) !important;
}
.infobox.geography .infobox-subheader,
.infobox.vcard .infobox-subheader {
background-color: transparent;
border-color: var(--bl-ib-divider) !important;
}
.infobox.geography .infobox-subheader:not([style*="background"]),
.infobox.vcard .infobox-subheader:not([style*="background"]) {
color: light-dark( #202122, #ffffff );
}
.infobox.geography .infobox-header,
.infobox.vcard .infobox-header {
background-color: transparent;
border-color: var(--bl-ib-divider) !important;
}
.infobox.geography .infobox-header:not([style*="background"]),
.infobox.vcard .infobox-header:not([style*="background"]) {
color: light-dark( #3366cc, #ffffff );
}
.infobox.geography th.infobox-label,
.infobox.geography td.infobox-data,
.infobox.vcard th.infobox-label,
.infobox.vcard td.infobox-data {
background-color: transparent;
border-color: var(--bl-ib-divider) !important;
}
/* 同上：带内联底色的 label / data 不接管文字色 */
.infobox.geography th.infobox-label:not([style*="background"]),
.infobox.geography td.infobox-data:not([style*="background"]),
.infobox.vcard th.infobox-label:not([style*="background"]),
.infobox.vcard td.infobox-data:not([style*="background"]) {
color: var(--bl-text);
}
.infobox.geography::after,
.infobox.vcard::after {
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
}
/* geography/vcard 内部连线全清（含 map 容器） */
.infobox.geography.vcard,
.infobox.geography.vcard tr,
.infobox.geography.vcard th,
.infobox.geography.vcard td,
.infobox.geography.vcard .infobox-above,
.infobox.geography.vcard .infobox-header,
#map-ctx-1778649814 {
border: 0 none transparent !important;
border-top: 0 none transparent !important;
border-bottom: 0 none transparent !important;
border-left: 0 none transparent !important;
border-right: 0 none transparent !important;
outline: none !important;
}
#map-ctx-1778649814 {
border-radius: 12px !important;
overflow: hidden !important;
}
/* ⚠ 这里【故意】只匹配 .tornado-no-top-radius，不要改成匹配 .tc-no-top-radius。
网页上实际的类名确实是 tc-no-top-radius，写成下面这样"看起来"能生效：
.infobox.tc-no-top-radius > tbody { border-top-*-radius: 0 !important; }
但一旦生效，tbody 的顶部圆角被抹平，.infobox-above 的方角就露出来了 ——
台风信息框的表头会从圆角变成方角（2026-10-07 用户实测报的 bug）。
台风表 .infobox-above 自带内联 `border-radius: 0 !important`（方角），
靠 tbody 的 border-radius: 12px + overflow: hidden 把它裁成圆角，
所以 tbody 的顶部圆角必须保住。
类名不匹配 = 规则不生效 = 圆角保住，这是有意为之。 */
.infobox.tornado-no-top-radius > tbody {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
overflow: hidden;
}
/* =====================================================================
* 13. Infobox · 国家数据图表
* ===================================================================== */
.infobox.ve-infobox-country .infobox-country-chart {
background: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
border-radius: 12px !important;
overflow: hidden !important;
margin: 6px 0 !important;
box-shadow: 0 2px 12px var(--bl-shadow-color-sm) !important;
}
.infobox.ve-infobox-country .infobox-country-chart > div:first-child {
background: light-dark( rgba( 54, 121, 204, 0.12 ), rgba( 54, 121, 204, 0.20 ) ) !important;
color: light-dark( #3366cc, #8ab8ff ) !important;
font-weight: bold !important;
font-size: 0.85rem !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 4px 0 !important;
border-bottom: 1px solid var(--bl-border) !important;
}
.infobox.ve-infobox-country .infobox-country-chart > table {
background: transparent !important;
border: none !important;
margin: 4px 0 !important;
}
.infobox.ve-infobox-country .infobox-country-chart > table tr {
background: transparent !important;
border: none !important;
}
.infobox.ve-infobox-country .infobox-country-chart > table td {
background: transparent;
border: none !important;
padding: 4px 6px !important;
font-size: 0.9rem !important;
color: var(--bl-text);
}
.infobox.ve-infobox-country .infobox-country-chart > table td:first-child {
font-weight: 500 !important;
white-space: nowrap !important;
width: 4.2em !important;
}
.infobox.ve-infobox-country .infobox-country-chart > table td:nth-child(2) {
text-align: right !important;
width: 4.5em !important;
font-variant-numeric: tabular-nums !important;
}
.infobox.ve-infobox-country .infobox-country-chart > table td:last-child > div {
border-radius: 7px !important;
height: 14px !important;
overflow: hidden !important;
background: light-dark( rgba( 128, 128, 128, 0.10 ), rgba( 255, 255, 255, 0.12 ) );
}
.infobox.ve-infobox-country .infobox-country-chart > table td:last-child > div > div {
border-radius: 7px !important;
height: 14px !important;
min-width: 2px !important;
box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.25 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.10 ) !important;
transition: width 0.3s ease !important;
}
/* =====================================================================
* 14. 通知中心 (Echo)
* ===================================================================== */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
animation: none !important;
filter: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border) !important;
border-radius: 16px !important;
box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
position: relative !important;
transition: none !important;
will-change: opacity, transform;
backface-visibility: hidden;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -1px !important;
border: 2px solid transparent !important;
border-radius: 17px !important;
background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
-webkit-mask-clip: content-box, border-box !important;
-webkit-mask-composite: source-out !important;
mask-composite: subtract !important;
mix-blend-mode: screen !important;
z-index: 10 !important;
pointer-events: none !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
border-radius: 16px !important;
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
mix-blend-mode: soft-light !important;
z-index: 1 !important;
pointer-events: none !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-footer,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-clippableElement-clippable,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-notificationsListWidget,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-placeholderItemWidget {
background: transparent !important;
background-color: transparent !important;
border-color: var(--bl-border-soft) !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-clippableElement-clippable {
overflow-y: auto !important;
overflow-x: hidden !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-anchor { display: none !important; }
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button {
background-color: light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
border: 1px solid var(--bl-border) !important;
border-radius: 8px !important;
transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button:hover {
background-color: light-dark( rgba( 255, 255, 255, 0.50 ), rgba( 255, 255, 255, 0.20 ) ) !important;
border-color: var(--bl-border-strong) !important;
box-shadow: 0 2px 8px var(--bl-shadow-color) !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-labelElement-label,
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-iconElement-icon {
color: var(--bl-text) !important;
}
.mw-echo-ui-notificationItemWidget {
background: transparent !important;
transition: background-color 0.2s ease !important;
}
.mw-echo-ui-notificationItemWidget:hover { background-color: var(--bl-hover) !important; }
.mw-echo-ui-bundleNotificationItemWidget-group,
.mw-echo-ui-sortedListWidget,
.mw-echo-ui-sortedListWidget-group {
background: transparent !important;
}
.mw-echo-ui-notificationItemWidget-bundled {
background: transparent !important;
border-bottom: 1px solid light-dark( rgba( 0, 0, 0, 0.06 ), rgba( 255, 255, 255, 0.06 ) ) !important;
transition: background-color 0.2s ease !important;
}
.mw-echo-ui-notificationItemWidget-bundled:last-child { border-bottom: none !important; }
.mw-echo-ui-notificationItemWidget-bundled:hover { background-color: var(--bl-hover) !important; }
.mw-echo-ui-notificationItemWidget-content-message-header,
.mw-echo-ui-notificationItemWidget-content-message-header strong { color: var(--bl-text) !important; }
.mw-echo-ui-notificationItemWidget-content-actions-timestamp { color: var(--bl-text-muted) !important; }
.mw-echo-ui-actionMenuPopupWidget .oo-ui-iconElement-icon {
filter: var( --bl-f-invert ) !important;
opacity: 0.6 !important;
}
.mw-echo-ui-toggleReadCircleButtonWidget-circle {
border-color: light-dark( rgba( 0, 0, 0, 0.20 ), rgba( 255, 255, 255, 0.30 ) ) !important;
}
.mw-echo-ui-notificationItemWidget-unread .mw-echo-ui-toggleReadCircleButtonWidget-circle {
background-color: var(--bl-accent) !important;
border-color: var(--bl-accent) !important;
}
/* =====================================================================
* 15. 弹出预览 (Page Previews / Popups)
* ===================================================================== */
.mwe-popups,
.mwe-popups.mwe-popups-fade-in-up,
.mwe-popups.mwe-popups-fade-in-down,
.mwe-popups.mwe-popups-fade-out-up,
.mwe-popups.mwe-popups-fade-out-down {
animation: none !important;
transition: none !important;
}
.mwe-popups::before,
.mwe-popups::after {
animation: none !important;
transition: none !important;
display: none !important;
}
.mwe-popups {
background: transparent !important;
border: none !important;
box-shadow: none !important;
isolation: auto !important;
}
.mwe-popups .mwe-popups-container {
overflow: hidden !important;
clip-path: none !important;
-webkit-clip-path: none !important;
position: relative !important;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
background-image: none !important;
border-radius: 12px !important;
border: 1px solid var(--bl-border) !important;
box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
}
.mwe-popups .mwe-popups-container::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -1px !important;
border: 2px solid transparent !important;
border-radius: 13px !important;
background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
-webkit-mask-clip: content-box, border-box !important;
-webkit-mask-composite: source-out !important;
mask-composite: subtract !important;
mix-blend-mode: screen !important;
z-index: 10 !important;
pointer-events: none !important;
}
.mwe-popups .mwe-popups-container::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
border-radius: 12px !important;
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
mix-blend-mode: soft-light !important;
z-index: 1 !important;
pointer-events: none !important;
}
.mwe-popups .mwe-popups-extract,
.mwe-popups .mwe-popups-scroll {
background: transparent !important;
overflow: hidden !important;
}
.mwe-popups .mwe-popups-extract::after { display: none !important; }
.mwe-popups footer {
background: light-dark( rgba( 255, 255, 255, 0.10 ), rgba( 0, 0, 0, 0.15 ) ) !important;
border-top: 1px solid var(--bl-border-soft) !important;
}
.mwe-popups .mwe-popups-extract,
.mwe-popups .mwe-popups-title,
.mwe-popups footer a { color: var(--bl-text) !important; }
.mwe-popups-is-tall .mwe-popups-container,
.mwe-popups:not( .mwe-popups-no-image-pointer ) .mwe-popups-container { clip-path: none !important; }
.mwe-popups .mwe-popups-discreet { background: transparent !important; }
.mwe-popups .mwe-popups-thumbnail { border-radius: 12px 12px 0 0 !important; }
.mwe-popups.mwe-popups-type-generic .mwe-popups-container {
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
}
/* =====================================================================
* 16. Citizen Navbox：沿用本站 Infobox 的玻璃、圆角、阴影与彩色外框。
* Common.css 不再负责 Citizen 的 Navbox 外观，模块原版负责结构。
* ===================================================================== */
html body.skin-citizen .navbox {
position: relative !important;
isolation: isolate;
box-sizing: border-box;
width: 100%;
margin: 1em auto 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 16px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: visible !important;
color: var(--bl-text);
font-size: .925rem;
line-height: 1.4;
box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
}
html body.skin-citizen .navbox:not([style*="background"]) {
background: var(--bl-glass) !important;
}
/* 光效：光圈 + 柔光，与 Infobox / ambox / voy-box 同一套写法。
⚠ 这两条原来被文件末尾的第 37 节改成了 `content: none` ——
于是 Navbox 丢掉光圈（只剩一层 35% 的柔光），和其它面板不一致。
已恢复成本来的写法（2026-10-07）。 */
html body.skin-citizen .navbox::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -1px !important;
border: 2px solid transparent !important;
border-radius: inherit !important;
/* 尺寸保持原样：400px 半径、50% 淡出、100% 透明 —— 一个字没动。
亮度改用 Navbox 专用的一档暗色标（外层 --bl-glow-ring-dim，比通用的
--bl-glow-ring 暗 60% 左右；两个值都随主题切换，所以暗色一起压）。
⚠ 压亮度就改色标，别缩半径 —— 缩半径改的是"照亮多大一片"（2026-10-07 走过一次弯路）。 */
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring-dim) 0%, var(--bl-glow-ring-dim-2) 50%, transparent 100% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: overlay !important;
z-index: 100 !important;
pointer-events: none !important;
}
html body.skin-citizen .navbox::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
/* 柔光分两档，别混用：
强档 var(--bl-glow-fill) 白 .35 / 暗 .10 —— 信息框、通知弹层、
弹出预览、命令面板、.bl-hero 这类「浮起卡片」
弱档 var(--bl-glow-fill-2) 白 .20 / 暗 .08 —— ambox / voy-box /
aero-news-box 这类「内容区横条」
Navbox 是又宽又扁的横条，用强档 + 500px 时整条中间会糊成一片亮斑
（比边框光圈还亮）。所以跟内容区横条一个档：弱档 + 400px + 70%。 */
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
mix-blend-mode: soft-light !important;
z-index: 1 !important;
pointer-events: none !important;
}
html body.skin-citizen .navbox-inner,
html body.skin-citizen .navbox-subgroup {
width: 100%;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html body.skin-citizen .navbox-inner:not([style*="background"]),
html body.skin-citizen .navbox-subgroup:not([style*="background"]) {
background: transparent !important;
}
html body.skin-citizen .navbox .navbox-title,
html body.skin-citizen .navbox .navbox-group,
html body.skin-citizen .navbox .navbox-list,
html body.skin-citizen .navbox .navbox-image,
html body.skin-citizen .navbox .navbox-abovebelow {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
vertical-align: middle;
}
html body.skin-citizen .navbox .navbox-title {
position: static !important;
padding: 10px 14px !important;
font-size: 1.05em;
line-height: 1.4;
font-weight: 700;
color: var(--bl-text-strong);
}
html body.skin-citizen .navbox .navbox-title:not([style*="background"]),
html body.skin-citizen .navbox .navbox-group:not([style*="background"]),
html body.skin-citizen .navbox .navbox-list:not([style*="background"]),
html body.skin-citizen .navbox .navbox-abovebelow:not([style*="background"]) {
background: transparent !important;
}
/* 只有最外层标题圆顶部；分组/子导航不各自画圆角。 */
html body.skin-citizen .navbox > tbody > tr:first-child > .navbox-title,
html body.skin-citizen .navbox > .navbox-inner > tbody > tr:first-child > .navbox-title {
border-radius: 15px 15px 0 0 !important;
}
html body.skin-citizen .navbox .navbox-group {
text-align: left; /* 默认靠左；允许模板内联 groupstyle 覆盖。 */
width: 1%;
padding: 8px 12px !important;
font-weight: 600;
color: var(--bl-text);
white-space: nowrap !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
html body.skin-citizen .navbox .navbox-list {
text-align: left; /* 默认靠左；允许模板内联 liststyle 覆盖。 */
padding: 0 !important;
color: var(--bl-text);
}
html body.skin-citizen .navbox .navbox-list > div {
padding: 8px 12px !important;
border: 0 !important;
box-shadow: none !important;
}
html body.skin-citizen .navbox .navbox-abovebelow {
padding: 8px 12px !important;
color: var(--bl-text);
}
html body.skin-citizen .navbox .navbox-odd:not([style*="background"]),
html body.skin-citizen .navbox .navbox-even:not([style*="background"]) {
background: transparent !important;
}
/* 固定的行/列分隔：保留分组结构，不使用渐变或发光线。 */
html body.skin-citizen .navbox {
--bl-navbox-divider: light-dark(#d9dce3, #40444d);
}
html body.skin-citizen .navbox tr + tr > .navbox-abovebelow,
html body.skin-citizen .navbox tr + tr > .navbox-group,
html body.skin-citizen .navbox tr + tr > .navbox-image,
html body.skin-citizen .navbox tr + tr > .navbox-list,
html body.skin-citizen .navbox tr + tr > .navbox-title {
border-top: 1px solid var(--bl-navbox-divider) !important;
}
html body.skin-citizen .navbox .navbox-group + .navbox-list,
html body.skin-citizen .navbox .navbox-list-with-group,
html body.skin-citizen .navbox .navbox-list1 {
border-left: 1px solid var(--bl-navbox-divider) !important;
}
/* 浅色内联背景未指定字色时，默认用深字，避免夜间白字压浅底。 */
html body.skin-citizen .navbox .navbox-title[style*="background"],
html body.skin-citizen .navbox .navbox-group[style*="background"],
html body.skin-citizen .navbox .navbox-abovebelow[style*="background"] {
color: var(--bl-ib-on-fill);
}
/* 控件沿用标题字色；实际页面链接保留 Citizen 的蓝链/红链颜色。 */
html body.skin-citizen .navbox .navbox-title .navbar,
html body.skin-citizen .navbox .navbox-title .mw-collapsible-toggle {
color: inherit;
}
html body.skin-citizen .navbox .navbox-title a[href],
html body.skin-citizen .navbox .navbox-group a[href] {
color: var(--color-link, #36c) !important;
}
html body.skin-citizen .navbox .navbox-title a[href]:visited,
html body.skin-citizen .navbox .navbox-group a[href]:visited {
color: var(--color-link--visited, #36c) !important;
}
html body.skin-citizen .navbox .navbox-title a[href]:hover,
html body.skin-citizen .navbox .navbox-group a[href]:hover {
color: var(--color-link--hover, #447ff5) !important;
}
html body.skin-citizen .navbox .navbox-title a.new[href],
html body.skin-citizen .navbox .navbox-group a.new[href] {
color: var(--color-link-red, #d33) !important;
}
html body.skin-citizen .navbox .navbox-title a.new[href]:hover,
html body.skin-citizen .navbox .navbox-group a.new[href]:hover {
color: var(--color-link-red--hover, #f55) !important;
}
/* 使用 Wikipedia 的浮动按钮布局，保留模块创建的按钮和点击行为。 */
html body.skin-citizen .navbox .navbox-title .navbar {
position: static !important;
float: left;
width: auto;
font-size: .85em;
font-weight: 400;
line-height: inherit;
}
html body.skin-citizen .navbox .navbox-title .mw-collapsible-toggle {
position: static !important;
float: right;
font-size: .85em;
font-weight: 400;
line-height: inherit;
}
/* 描边继承标题填色，单独增加饱和度并稍压亮度，不改变标题及文字。 */
html body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"])::before {
content: "" !important;
position: absolute !important;
inset: -4px !important;
box-sizing: border-box !important;
padding: 4px !important;
border: 0 !important;
border-radius: 20px !important;
background-color: inherit !important;
background-image: none !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box !important;
-webkit-mask-composite: xor !important;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box !important;
mask-composite: exclude !important;
filter: saturate(1.28) brightness(.90) !important;
pointer-events: none !important;
z-index: 2;
}
html body.skin-citizen .navbox .navbox-subgroup .navbox-title::before,
html body.skin-citizen .navbox .navbox .navbox-title::before {
content: none !important;
display: none !important;
}
html body.skin-citizen .navbox .navbox {
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html body.skin-citizen .navbox > tbody > tr:last-child > :first-child,
html body.skin-citizen .navbox > .navbox-inner > tbody > tr:last-child > :first-child {
border-bottom-left-radius: 15px !important;
}
html body.skin-citizen .navbox > tbody > tr:last-child > :last-child,
html body.skin-citizen .navbox > .navbox-inner > tbody > tr:last-child > :last-child {
border-bottom-right-radius: 15px !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .navbox:not([style*="background"]) {
background: light-dark(#ffffff, #16181b) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
@media screen and (max-width: 640px) {
html body.skin-citizen .navbox { font-size: .85rem; }
html body.skin-citizen .navbox .navbox-group { padding: 6px 8px !important; }
html body.skin-citizen .navbox .navbox-list > div { padding: 6px 10px !important; }
}
/* =====================================================================
* 17. Ambox 消息框
* ===================================================================== */
table.ambox {
position: relative !important;
z-index: 100 !important;
overflow: hidden !important;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border-style: solid !important;
border-width: 1px !important;
border-color: var(--bl-edge) !important;
border-left-width: 8px !important;
border-radius: 12px !important;
box-shadow: 0 4px 15px var(--bl-shadow-color-sm) !important;
margin: 10px 0 !important;
width: auto !important;
clear: both !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
table.ambox:hover {
transform: translateY( -2px );
box-shadow: 0 8px 25px var(--bl-shadow-color) !important;
}
table.ambox td.ambox-text,
table.ambox td.ambox-text b,
table.ambox td.ambox-text small { color: var(--bl-text) !important; }
/* 左侧色条：类别色与主题无关，保持常量 */
table.ambox-notice { border-left-color: #1e90ff !important; }
table.ambox-delete { border-left-color: #b22222 !important; }
table.ambox-content { border-left-color: #f28500 !important; }
table.ambox-style { border-left-color: #f4c430 !important; }
table.ambox-good { border-left-color: #66cc66 !important; }
table.ambox-move { border-left-color: #9932cc !important; }
table.ambox-speedy { border-left-color: #b32424 !important; }
table.ambox-protection { border-left-color: #a2a9b1 !important; }
table.ambox-funny { border-left-color: #FF69B4 !important; }
table.ambox::before {
content: "" !important;
position: absolute;
inset: -1px;
border: 2px solid transparent;
background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-fill-2) 40%, transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: overlay;
z-index: 10;
pointer-events: none;
}
table.ambox::after {
content: "" !important;
position: absolute;
inset: 0;
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
mix-blend-mode: soft-light;
z-index: 1;
pointer-events: none;
}
/* =====================================================================
* 18. Wikitable 表格 / overflow 容器
* ===================================================================== */
.citizen-overflow-wrapper,
.citizen-overflow-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 15px !important;
margin: 1em -15px !important;
}
.citizen-overflow-content {
padding: 0 !important;
margin: 0 !important;
}
.citizen-overflow-content > table.wikitable { margin: 0 !important; }
.mw-parser-output table.wikitable {
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px var(--bl-shadow-color) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
width: 100% !important;
margin: 1.5em 0 !important;
}
/* 只画右边和下边。
border-collapse 是 separate（保留圆角需要），若每个单元格都画满一圈，
相邻两格的「右 1px + 左 1px」会叠成 2px —— 看起来就是「分割线太宽」。
只画右 + 下，内部线正好 1px；外框由表格自身的 border 负责。
下面 tr:last-child / tr td:last-child 那几条把最右列、最底行的收边去掉。 */
.mw-parser-output table.wikitable th:not(.notheme),
.mw-parser-output table.wikitable td:not(.notheme) {
border: none !important;
border-right: 1px solid var(--bl-divider) !important;
border-bottom: 1px solid var(--bl-divider) !important;
padding: 10px 16px !important;
}
/* —— 彩色单元格：亮色用模板原色，暗色把底色压深（不抹掉颜色） ——
.notheme 的语义是「这个单元格不跟随主题，模板自己管」，
反过来 :not(.notheme) 是「跟随主题」——所以这里由本主题接管配色。
接管方式不是把底色抹成透明（那会丢掉表格的颜色编码，例如
区域 / 洋区 / 气旋 的配色），而是用伪元素取模板原色再压暗 + 补饱和。
实现要点：
· background-color: inherit —— background-color 虽然不继承，但显式写
inherit 关键字可以拿到父元素【计算后】的值，于是伪元素正好拿到
模板写在内联 style 上的那个浅色底，不需要知道它是什么颜色；
· filter: var(--bl-cell-filter) —— 亮色是 none，暗色是
brightness(0.42) saturate(1.5)。只压暗不补饱和，浅色底会变成
灰扑扑的脏色（浅色本来饱和度就低）；补饱和后才看得出蓝 / 绿 / 金；
· 单元格要建层叠上下文（position: relative + isolation: isolate），
否则 z-index:-1 的伪元素会跑到表格背景后面，看不见；
· 负 z-index 的绘制顺序正好在「父元素背景之后、行内内容之前」，
所以文字不会被压到；
· 伪元素要 border-radius: inherit，否则四个角的圆角会被方块盖住。
原先 th 上写的是 background-color: transparent !important，已移除。 */
.mw-parser-output table.wikitable th:not(.notheme),
.mw-parser-output table.wikitable td:not(.notheme) {
position: relative;
isolation: isolate;
z-index: 0;
/* 底色不铺到边框下面：否则暗色下边框那 1px 会透出模板的浅色底，
变成一圈发亮的网格线。裁到 padding-box 后，边框下面是表格自己的底色。 */
background-clip: padding-box;
}
.mw-parser-output table.wikitable th:not(.notheme)::before,
.mw-parser-output table.wikitable td:not(.notheme)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: inherit;
filter: var( --bl-cell-filter );
pointer-events: none;
}
.mw-parser-output table.wikitable th:not(.notheme) {
color: var(--bl-text) !important;
}
.mw-parser-output table.wikitable td:not(.notheme) {
color: var(--bl-text) !important;
}
/* —— 底色写在 <tr> 上的行（模板的另一种常见写法）——
例：<tr style="background-color:#fff1dc;">（单元格自己没写底色，
表格 ① 那种「一级行政区划」就是这种）。
单元格级的 ::before 取不到行的颜色：它的 background-color: inherit
继承的是【单元格自己】的计算值，而单元格没写底色 ⇒ 拿到 transparent
⇒ 遮罩是空的，那一行在暗色下就是「浅底 + 浅字」。
所以遮罩要画在行上：行是 display:table-row，
需要 position:relative + isolation:isolate 才能让 z-index:-1 的
伪元素停在「行背景之上、单元格之下」。
（单元格自带底色的情况仍由上面那两条单元格规则负责，不会重复叠加：
单元格的背景是不透明的，会盖住这一层。） */
.mw-parser-output table.wikitable tr[style*="background"] {
position: relative;
isolation: isolate;
}
.mw-parser-output table.wikitable tr[style*="background"]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: inherit;
filter: var( --bl-cell-filter );
pointer-events: none;
}
.mw-parser-output table.wikitable tr:first-child th,
.mw-parser-output table.wikitable tr:first-child td { border-top: none !important; }
.mw-parser-output table.wikitable tr:last-child th,
.mw-parser-output table.wikitable tr:last-child td { border-bottom: none !important; }
.mw-parser-output table.wikitable tr th:first-child,
.mw-parser-output table.wikitable tr td:first-child { border-left: none !important; }
.mw-parser-output table.wikitable tr th:last-child,
.mw-parser-output table.wikitable tr td:last-child { border-right: none !important; }
.mw-parser-output table.wikitable tr:first-child th:first-child,
.mw-parser-output table.wikitable tr:first-child td:first-child { border-top-left-radius: 11px !important; }
.mw-parser-output table.wikitable tr:first-child th:last-child,
.mw-parser-output table.wikitable tr:first-child td:last-child { border-top-right-radius: 11px !important; }
.mw-parser-output table.wikitable tr:last-child th:first-child,
.mw-parser-output table.wikitable tr:last-child td:first-child { border-bottom-left-radius: 11px !important; }
.mw-parser-output table.wikitable tr:last-child th:last-child,
.mw-parser-output table.wikitable tr:last-child td:last-child { border-bottom-right-radius: 11px !important; }
/* .notheme 单元格：刻意固定为浅色描边，不随主题变化，所以只写一次 */
.mw-parser-output table.wikitable td.notheme,
.mw-parser-output table.wikitable th.notheme {
border-color: rgba( 0, 0, 0, 0.12 ) !important;
}
/* =====================================================================
* 19. 缩略图
* ===================================================================== */
html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"] img:hover,
html:not(.ve-active) .mw-parser-output .thumbinner img:hover,
html:not(.ve-active) .mw-parser-output .thumbimage:hover,
.mw-parser-output .mw-file-description img:hover {
transform: none !important;
}
html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"]:hover,
html:not(.ve-active) .mw-parser-output .thumbinner:hover {
transform: none !important;
}
html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"],
html:not(.ve-active) .mw-parser-output .thumbinner {
width: min-content !important;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
border-radius: 12px !important;
box-shadow: 0 4px 15px var(--bl-shadow-color-sm) !important;
padding: 10px !important;
box-sizing: content-box !important;
}
html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"] img,
html:not(.ve-active) .mw-parser-output .thumbimage {
display: block !important;
border-radius: 6px !important;
border: none !important;
max-width: none !important;
height: auto !important;
margin: 0 auto !important;
}
html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"] figcaption,
html:not(.ve-active) .mw-parser-output .thumbcaption {
display: block !important;
width: 100% !important;
text-align: left !important;
color: var(--bl-text) !important;
margin-top: 8px !important;
font-size: 0.9em !important;
line-height: 1.5 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
/* =====================================================================
* 20. Voy-box 警告框
* ===================================================================== */
.voy-box {
display: flex !important;
align-items: flex-start !important;
padding: 16px 20px !important;
margin: 16px 0 !important;
border-radius: 12px !important;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
box-shadow: 0 4px 15px var(--bl-shadow-color-sm) !important;
position: relative !important;
overflow: hidden !important;
}
.voy-box.warning {
border-left: 4px solid #f0ad4e !important;
background-color: light-dark( rgba( 255, 243, 205, 0.50 ), rgba( 102, 77, 30, 0.40 ) ) !important;
}
.voy-box-icon {
font-size: 1.5rem !important;
margin-right: 12px !important;
flex-shrink: 0 !important;
color: light-dark( #856404, #ffc107 ) !important;
}
.voy-box-content { color: var(--bl-text) !important; line-height: 1.6 !important; }
.voy-box::before {
content: "" !important;
position: absolute;
inset: -1px;
border: 2px solid transparent;
border-radius: 13px;
background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-fill-2) 40%, transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: overlay;
z-index: 10;
pointer-events: none;
}
.voy-box::after {
content: "" !important;
position: absolute;
inset: 0;
border-radius: 12px;
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
mix-blend-mode: soft-light;
z-index: 1;
pointer-events: none;
}
/* =====================================================================
* 21. 每月新闻 Aero 面板
* ===================================================================== */
.aero-news-box {
position: relative;
z-index: 20;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
border-radius: 16px !important;
box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
padding: 16px 20px !important;
margin: 16px 0 !important;
overflow: hidden !important;
color: var(--bl-text) !important;
}
.aero-news-box-header {
font-size: 1.15rem;
font-weight: bold;
border-bottom: 1px solid var(--bl-border-strong);
padding-bottom: 8px;
margin-bottom: 12px;
color: var(--bl-text);
}
.aero-news-box::before {
content: "" !important;
position: absolute;
inset: -1px;
border: 2px solid transparent;
border-radius: 17px;
background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-fill-2) 40%, transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: overlay;
z-index: 10;
pointer-events: none;
}
.aero-news-box::after {
content: "" !important;
position: absolute;
inset: 0;
border-radius: 16px;
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
mix-blend-mode: soft-light;
z-index: 1;
pointer-events: none;
}
/* =====================================================================
* 22. OO-UI 下拉菜单 / 弹窗
* ===================================================================== */
.oo-ui-menuSelectWidget {
position: absolute !important;
background-color: var(--bl-glass-strong) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px var(--bl-shadow-color) !important;
padding: 6px !important;
z-index: 1000 !important;
}
.oo-ui-menuSelectWidget::before,
.oo-ui-menuSelectWidget::after {
content: "" !important;
display: block !important;
position: absolute !important;
pointer-events: none !important;
}
.oo-ui-menuSelectWidget::before {
inset: -1px;
border: 2px solid transparent;
border-radius: 15px;
background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: screen !important;
z-index: 10;
}
.oo-ui-menuOptionWidget {
display: flex !important;
align-items: center !important;
padding: 10px 14px !important;
margin: 2px 0 !important;
border-radius: 10px !important;
transition: all 0.2s ease !important;
}
.oo-ui-menuOptionWidget-checkIcon {
position: static !important;
margin-right: 8px !important;
min-width: 20px !important;
}
.oo-ui-menuOptionWidget .oo-ui-iconElement-icon {
position: static !important;
margin-right: 12px !important;
filter: var( --bl-f-icon ) !important;
}
.oo-ui-menuOptionWidget .oo-ui-labelElement-label {
color: var(--bl-text) !important;
font-size: 0.95rem !important;
}
.oo-ui-menuOptionWidget:hover { background-color: var(--bl-accent-soft-2) !important; }
.oo-ui-popupWidget {
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
background-color: var(--bl-glass) !important;
border-radius: 12px !important;
border: 1px solid var(--bl-divider) !important;
box-shadow: 0 8px 24px var(--bl-shadow-color) !important;
transform: translateZ( 0 ) !important;
isolation: isolate !important;
will-change: transform, backdrop-filter !important;
overflow: visible !important;
}
.oo-ui-popupWidget-popup {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
/* =====================================================================
* 23. 液态玻璃光效系统（鼠标跟随辉光）
* ===================================================================== */
.citizen-menu__card,
.citizen-toc-card,
#mw-panel-toc,
.citizen-command-palette {
position: relative;
background-image: none !important;
opacity: 1 !important;
}
/* 边缘光 */
.citizen-menu__card::before,
.citizen-toc-card::before,
#mw-panel-toc::before,
.citizen-command-palette::before {
content: "" !important;
position: absolute;
inset: -1px;
border: 2px solid transparent;
/* 跟随宿主圆角，否则光圈是方角 */
border-radius: inherit;
background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: screen;
z-index: 10;
pointer-events: none;
}
/* 内部柔光 */
.citizen-menu__card::after,
.citizen-toc-card::after,
#mw-panel-toc::after,
.citizen-command-palette::after {
content: "" !important;
position: absolute;
inset: 0;
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
mix-blend-mode: soft-light;
z-index: 1;
pointer-events: none;
}
/* 目录卡片：更紧的光圈（ID 选择器，覆盖上面的组选择器）
光圈画在 inset:0 内侧 —— 侧栏那一列历史上被 contain 裁剪，画在盒外会被切掉。 */
#mw-panel-toc {
overflow: hidden !important;
box-shadow: none !important;
border: 1px solid rgba( 255, 255, 255, 0.10 ) !important;
}
#mw-panel-toc::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
/* 目录面板的光圈线宽：原始值 1.2px（比别处更细） */
border: 1.2px solid transparent !important;
border-radius: inherit !important;
background: radial-gradient( 150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 1 ) 0%, var(--bl-glow-ring-2) 60%, transparent 100% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: screen !important;
z-index: 10 !important;
pointer-events: none;
}
#mw-panel-toc::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient( 250px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 0.25 ) 0%, transparent 80% ) !important;
mix-blend-mode: soft-light !important;
z-index: 1 !important;
pointer-events: none;
}
/* =====================================================================
* 24. 最后修改时间徽章（Citizen 3.24 侧栏结构）
* ===================================================================== */
#citizen-page-aside-lastmod {
position: relative;
/* 不要 overflow:hidden —— 它会把自己的光圈裁掉 */
background: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
border-radius: 16px !important;
box-shadow: none !important;
padding: 4px !important;
width: fit-content !important;
background-image: none !important;
}
/* 光圈画在元素内侧（inset:0），避免被 .citizen-page-aside 的 contain:paint 裁切 */
#citizen-page-aside-lastmod::before {
content: "" !important;
position: absolute;
inset: 0;
/* 最后修改时间面板的光圈线宽：原始值 2.4px */
border: 2.4px solid transparent;
border-radius: inherit;
background: radial-gradient( 150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 1 ) 0%, var(--bl-glow-ring-2) 60%, transparent 100% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: screen;
z-index: 10;
pointer-events: none;
}
#citizen-page-aside-lastmod .citizen-page-aside__link,
#citizen-page-aside-lastmod-time {
text-decoration: none !important;
color: var(--bl-text) !important;
font-weight: 400;
}
#citizen-page-aside-lastmod .citizen-page-aside__heading { color: var(--bl-text) !important; }
/* =====================================================================
* 25. 页面杂物
* ===================================================================== */
/* 分类栏：与页面同底色，不加任何底色。
⚠ 旧文件里这是「os + 系统暗色」专属的一条
html.skin-theme-clientpref-os .catlinks { background-color: rgba(0,0,0,.2); }
重构时我把它扩成了明暗都生效（light-dark 0.02 / 0.20），
结果两个模式下都比页面暗一档，看起来像凭空多出一块灰板。
现在直接置为透明，让它和内容区融为一体。 */
.catlinks {
border-color: var(--bl-divider) !important;
background-color: transparent !important;
}
/* =====================================================================
* 25.4 修掉下拉卡片被裁掉的外阴影
*
* Citizen 用 clip-path 做卡片的开合动画：开启态是
* .citizen-dropdown-details[ open ] + .citizen-menu__card { clip-path: inset( 0 0 0 0 ) }
* inset(0) 正好等于边框盒，于是卡片自己的 box-shadow（--box-shadow-large）
* 全部落在裁剪范围之外 —— 这就是"外阴影被裁剪"的原因。
* 把开启态的裁剪范围向外放开，阴影就能完整画出来；闭合态不动，动画照旧。
* ===================================================================== */
/* 开启态：把对卡片的裁剪放开，让 --box-shadow-large 完整显示。
*
* 不能直接写 clip-path: none —— 那样开合动画会从"展开"变成"瞬间出现"；
* 所以用足够大的负 inset 保留插值。
*
* 尺寸是算出来的：--box-shadow-large 最后一层是 0 21.8px 24.5px -1.8px，
* 向下 ≈ 21.8 + 24.5 ≈ 46px（最淡那层能到 ~57px），侧向 ≈ 24.5px（最淡 ~36px）。
* 之前用 2.5rem(40px) 只够侧向、不够下方 → 阴影三面有、底下被切，看着像"偏了"。
* 4rem(64px) 才能四边都完整。 */
.citizen-dropdown-details[ open ] + .citizen-menu__card {
clip-path: inset( -4rem ) !important;
}
/* =====================================================================
* 25.5 让侧栏面板的毛玻璃真正生效
*
* Citizen 给 .citizen-page-aside 加了 contain: paint（有目录时 size paint style）。
* contain: paint 会把后代裁剪到 padding box，同时列内元素变成"玻璃的边界"——
* 侧栏面板的 backdrop-filter 因此采不到栏外的页面内容，毛玻璃等于失效，
* 负 inset 的光圈与 box-shadow 也会被切掉。
*
* 这里把 containment 降到只剩 style：
* · 玻璃取样不再被列边界截断（backdrop-filter 能采到栏外的页面内容）；
* · 负 inset 的光圈与 box-shadow 不再被裁掉。
* 布局上的代价见下方注释（高度仍被 __sticky 的 max-height 限制）。
* ===================================================================== */
@media screen and ( min-width: 1120px ) {
/* 只保留 style 这一种 containment：paint / layout / size 全部摘掉。
size（含 layout）的职责是"长目录不把网格行撑高"，
但 .citizen-page-aside__sticky 本身已有
max-height: calc(100vh - 上边距 - 下边距) 兜住高度，
目录又在该块内 flex-shrink:1 + min-height:0 自成滚动区，
所以摘掉后行高仍被视口限制，不会失控。
换来的是：玻璃取样不再被列边界截断，光圈与阴影也不再被裁。
（有目录时 Citizen 原本用 .citizen-page-aside:has(.citizen-toc) 单独设值，
但 :has() 通不过 MediaWiki 的 CSS 校验器；两种情况现在同值，无需分开。） */
.citizen-page-aside {
contain: style !important;
}
}
/* 侧栏两处面板：skin 给 .citizen-menu__card 加了 contain: content（= layout paint），
对这两块再摘一次，保证 backdrop-filter 能采到栏外的页面内容；
并且补一层竖向光泽渐变 —— 35% 白叠在 #fafafa 上、再模糊纯色背景，
像素级是看不出任何变化的，加光泽才能读得出"玻璃"。 */
#mw-panel-toc,
#citizen-page-aside-lastmod {
contain: style !important;
background-image: linear-gradient(
to bottom,
light-dark( rgba( 255, 255, 255, 0.45 ), rgba( 255, 255, 255, 0.06 ) ),
light-dark( rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0.01 ) )
) !important;
}
/* =====================================================================
* 25.6 桌面态目录：卡片外观画在 nav 上
*
* Citizen 在 ≥1120px 时把 #mw-panel-toc（.citizen-menu__card）设成
* .citizen-toc .citizen-menu__card { display: contents; }
* —— display: contents 的元素不生成盒子，所以它身上的 background、border、
* border-radius、backdrop-filter 和 ::before/::after 全部作废。
* 桌面态真正有盒子的是外层 <nav id="citizen-toc" class="citizen-toc">。
*
* 所以：低于桌面宽度时用 #mw-panel-toc（它是有盒子的弹层卡片，规则见上文），
* 桌面宽度时改用 #citizen-toc。两者同一套视觉。
*
* 注：.citizen-toc 是 overflow-y:auto 的滚动容器，伪元素会跟着列表一起滚，
* 所以这里的光效直接做在 background-image 上（背景不随内容滚动）。
* ===================================================================== */
@media screen and ( min-width: 1120px ) {
#citizen-toc.citizen-toc {
position: relative;
isolation: isolate;
contain: style !important;
padding: var(--space-xs) !important;
background-color: var(--bl-glass) !important;
background-image:
radial-gradient(
300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
light-dark( rgba( 255, 255, 255, 0.55 ), rgba( 255, 255, 255, 0.07 ) ),
transparent 70%
),
linear-gradient(
to bottom,
light-dark( rgba( 255, 255, 255, 0.45 ), rgba( 255, 255, 255, 0.06 ) ),
light-dark( rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0.01 ) )
) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border) !important;
border-radius: 12px !important;
/* 光圈：
桌面态 #citizen-toc 是 overflow-y:auto 的滚动容器，
伪元素画的环会跟着列表内容一起滚（滚到底就错位）。
分两种情况：
· 有 JS（nav 上带 .bl-toc-ring-js，见 common.js 的 Section27）：
用和其它面板【完全相同】的径向光环伪元素，
并由 JS 写出的 --bl-toc-scroll 做 transform 抵消滚动位移
⇒ 观感与别的面板一模一样。
· 没 JS / Basic：退回下面这条静态细光环（不跟随鼠标，但位置正确）。
⚠ 试过「四条 inset 阴影边、每条边一个亮度」：那种做法整条边一起亮，
而径向光圈只在鼠标附近约 150px 的弧段亮 ——
在竖长的目录面板上就是"光线范围明显比别的面板大很多"，已弃用。 */
box-shadow: inset 0 0 0 1.2px rgba( 255, 255, 255, var( --bl-toc-ring-base ) ) !important;
}
/* JS 就绪：关掉静态兜底，改用下面那个径向光环 */
#citizen-toc.citizen-toc.bl-toc-ring-js {
box-shadow: none !important;
}
#citizen-toc.citizen-toc.bl-toc-ring-js::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
/* 关键：抵消目录面板的内部滚动。
环画在滚动容器里会跟着内容一起上移 scrollTop，这里补回来，
它就"钉"在面板上了（正号 —— 滚动后元素上移了 scrollTop）。 */
transform: translateY( var( --bl-toc-scroll, 0px ) ) !important;
border: 1.2px solid transparent !important;
border-radius: 12px !important;
background: radial-gradient( 150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 1 ) 0%, var(--bl-glow-ring-2) 60%, transparent 100% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
-webkit-mask-clip: content-box, border-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
mix-blend-mode: screen !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* ⚠ 桌面态必须关掉 #mw-panel-toc / .citizen-toc-card 的伪元素光效。
Source 依据（resources/skins.citizen.styles/components/TableOfContents.less
的 @media min-width-breakpoint-desktop 段）：
.citizen-toc { display:flex; flex-direction:column; overflow-y:auto;
.citizen-menu__card, .citizen-menu__card-content { display:contents } }
模板注释也写明：「旧版缓存 HTML 里这里是 nav#mw-panel-toc，新结构把它改成了普通 div」。
⇒ 桌面态这两个元素【不生成盒子】，但 ::before/::after 的盒子照旧生成，
成为滚动容器 #citizen-toc 里的匿名【绝对定位】盒：
尺寸按滚动容器的 padding box 算，位置却跟着内容一起滚 ——
往下滚到底时，那圈 1.2px 光环会错位地留在半空（2026-10-07 实测的"光效错乱"）。
桌面态的光效全部由上面 #citizen-toc 的 background-image 承担
（背景不随内容滚动，这也是唯一稳妥的做法）。
低于桌面宽度时 #mw-panel-toc 是有盒子的弹层卡片，光效照旧，所以只在这个断点里关。 */
#mw-panel-toc::before,
#mw-panel-toc::after,
.citizen-toc-card::before,
.citizen-toc-card::after {
content: none !important;
display: none !important;
}
}
/* =====================================================================
* 25.7 目录里折叠钮所在的那条轨道线
*
* ⚠ 这里【不要】给 .citizen-toc-toggle 加毛玻璃 ——
* 它是 Codex 的 quiet 按钮，本来就该是"什么都没有、只有个箭头"的样子；
* 2026-10-07 一度给它套了 --bl-glass，反而变怪，已撤掉。
*
* 真正要处理的是【节点下面那条线】：
* TableOfContents.less 里折叠钮所在的那一格，会用【页面底色】把轨道「切开」一段 ——
* .citizen-toc-level-1:has( > .citizen-toc-toggle )::before {
* top: <节点位置>; left: calc( var( --border-width-thick ) * -1 );
* width: var( --border-width-thick ); height: <节点高度>;
* background-color: var( --color-surface-0 ); ← 一整片不透明页面底色
* }
* 我们的面板是玻璃：在玻璃上糊一块不透明的页面底色，
* 就成了"节点旁边那条看着不对的线"。改成透明 ⇒ 轨道保持连续，
* 也就不会和玻璃底色打架。
*
* ⚠ 只在这个断点里改：低于桌面宽度时目录是弹层卡片（不透明），
* Citizen 在那边本来就用不透明底色，留着它原来的处理。
* ⚠ 选择器要带上 .citizen-toc 把优先级提到 (0,3,2)，
* 否则压不过源码里那条 (0,3,0) 的 :has() 规则。
* ===================================================================== */
@media screen and ( min-width: 1120px ) {
html body.skin-citizen .citizen-toc .citizen-toc-level-1::before {
background-color: transparent !important;
}
}
/* =====================================================================
* 26. 暗色专属修正
* 以下条目在亮色下不存在对应值（亮色本来就不需要修正），
* 所以无法用 light-dark() 表达。取值集中写在这里，只写一次；
* 明暗开关仍然只有两个选择器。
* ===================================================================== */
:root {
/* —— 取值（只定义一次）—— */
--bl-dark-text-bright: #ffffff;
--bl-dark-text-soft: #eeeeee;
--bl-dark-text-dim: #e6e6e6;
--bl-dark-text-muted: #8e8e93;
--bl-dark-link-new: #ff9999;
--bl-dark-hover-15: rgba( 255, 255, 255, 0.15 );
--bl-dark-hover-10: rgba( 255, 255, 255, 0.10 );
--bl-dark-border-20: rgba( 255, 255, 255, 0.20 );
--bl-dark-border-15: rgba( 255, 255, 255, 0.15 );
--bl-dark-map-border: rgba( 255, 255, 255, 0.20 );
--bl-dark-f-icon: invert( 1 ) brightness( 2 );
--bl-dark-f-invert: invert( 1 );
--bl-dark-f-chart: invert( 0.88 ) hue-rotate( 180deg );
--bl-dark-home-opacity: 0.20;
/* 表格彩色单元格：把模板的浅色底压暗（0.40）+ 补饱和（1.5）。
只压暗不补饱和的话，浅色底会变成灰扑扑的脏色 —— 见第 18 节。 */
--bl-dark-cell-filter: brightness( 0.40 ) saturate( 1.5 );
/* 目录面板光圈的暗色底线：暗底上不用那么亮（亮色侧 0.45） */
--bl-dark-toc-ring-base: 0.10;
/* —— 亮色侧的默认值 —— */
--bl-f-icon: invert( 0 ) brightness( 1 );
--bl-f-invert: none;
--bl-f-chart: none;
--bl-home-opacity: 0.35;
}
/* 暗色开关：night / black */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-black {
--bl-f-icon: var( --bl-dark-f-icon );
--bl-f-invert: var( --bl-dark-f-invert );
--bl-f-chart: var( --bl-dark-f-chart );
--bl-home-opacity: var( --bl-dark-home-opacity );
--bl-cell-filter: var( --bl-dark-cell-filter );
--bl-toc-ring-base: var( --bl-dark-toc-ring-base );
}
/* 暗色开关：os + 系统暗色 */
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
--bl-f-icon: var( --bl-dark-f-icon );
--bl-f-invert: var( --bl-dark-f-invert );
--bl-f-chart: var( --bl-dark-f-chart );
--bl-home-opacity: var( --bl-dark-home-opacity );
--bl-cell-filter: var( --bl-dark-cell-filter );
--bl-toc-ring-base: var( --bl-dark-toc-ring-base );
}
}
/* —— 首页组件：暗色下需要单独修正的文字色 —— */
html.skin-theme-clientpref-night .bl-stat,
html.skin-theme-clientpref-night .bl-stat *,
html.skin-theme-clientpref-black .bl-stat,
html.skin-theme-clientpref-black .bl-stat * {
color: var( --bl-dark-text-bright ) !important;
}
html.skin-theme-clientpref-night .bl-box-title,
html.skin-theme-clientpref-black .bl-box-title {
background-color: transparent !important;
color: var( --bl-dark-text-bright ) !important;
border-bottom-color: var( --bl-dark-border-20 ) !important;
}
html.skin-theme-clientpref-night .bl-box,
html.skin-theme-clientpref-black .bl-box {
background-color: var( --color-surface-1 ) !important;
border-color: var( --bl-border ) !important;
}
html.skin-theme-clientpref-night .bl-navitem,
html.skin-theme-clientpref-night .bl-navitem a,
html.skin-theme-clientpref-black .bl-navitem,
html.skin-theme-clientpref-black .bl-navitem a {
box-shadow: none !important;
}
html.skin-theme-clientpref-night .bl-navitem,
html.skin-theme-clientpref-black .bl-navitem {
border-color: var( --bl-dark-border-15 ) !important;
background-color: transparent !important;
}
html.skin-theme-clientpref-night .bl-navitem a,
html.skin-theme-clientpref-black .bl-navitem a {
background-color: transparent !important;
color: var(--bl-accent) !important;
border: none !important;
}
html.skin-theme-clientpref-night .bl-navitem a:hover,
html.skin-theme-clientpref-black .bl-navitem a:hover {
background-color: var( --bl-dark-hover-15 ) !important;
color: var(--bl-accent-hover) !important;
}
/* 首页盒子里的正文转浅（模板常写死深色）。
紧随其后的两条把链接还原成主题蓝 —— 否则 .bl-box-body * 会把链接一起刷掉。 */
html.skin-theme-clientpref-night .bl-box-body,
html.skin-theme-clientpref-night .bl-box-body *,
html.skin-theme-clientpref-black .bl-box-body,
html.skin-theme-clientpref-black .bl-box-body * {
color: var( --bl-dark-text-bright ) !important;
}
html.skin-theme-clientpref-night .bl-box-body a,
html.skin-theme-clientpref-night .bl-box-body a *,
html.skin-theme-clientpref-black .bl-box-body a,
html.skin-theme-clientpref-black .bl-box-body a * {
color: var(--bl-accent) !important;
}
html.skin-theme-clientpref-night .bl-box-body a.new,
html.skin-theme-clientpref-night .bl-box-body a.new *,
html.skin-theme-clientpref-black .bl-box-body a.new,
html.skin-theme-clientpref-black .bl-box-body a.new * {
color: var( --bl-dark-link-new ) !important;
}
html.skin-theme-clientpref-night .bl-navitem a.new,
html.skin-theme-clientpref-night .bl-list a.new,
html.skin-theme-clientpref-black .bl-navitem a.new,
html.skin-theme-clientpref-black .bl-list a.new {
color: var( --bl-dark-link-new ) !important;
}
html.skin-theme-clientpref-night .bl-map-wrap,
html.skin-theme-clientpref-black .bl-map-wrap {
background: transparent;
}
html.skin-theme-clientpref-night .bl-map-wrap iframe,
html.skin-theme-clientpref-black .bl-map-wrap iframe {
border-color: var( --bl-dark-map-border );
}
html.skin-theme-clientpref-night .bl-hero,
html.skin-theme-clientpref-black .bl-hero {
border-color: #3a3a3a !important;
}
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os .bl-stat,
html.skin-theme-clientpref-os .bl-stat * {
color: var( --bl-dark-text-bright ) !important;
}
html.skin-theme-clientpref-os .bl-box-title {
background-color: transparent !important;
color: var( --bl-dark-text-bright ) !important;
border-bottom-color: var( --bl-dark-border-20 ) !important;
}
html.skin-theme-clientpref-os .bl-box {
background-color: var( --color-surface-1 ) !important;
border-color: var( --bl-border ) !important;
}
html.skin-theme-clientpref-os .bl-navitem,
html.skin-theme-clientpref-os .bl-navitem a {
box-shadow: none !important;
}
html.skin-theme-clientpref-os .bl-navitem {
border-color: var( --bl-dark-border-15 ) !important;
background-color: transparent !important;
}
html.skin-theme-clientpref-os .bl-navitem a {
background-color: transparent !important;
color: var(--bl-accent) !important;
border: none !important;
}
html.skin-theme-clientpref-os .bl-navitem a:hover {
background-color: var( --bl-dark-hover-15 ) !important;
color: var(--bl-accent-hover) !important;
}
/* 首页盒子里的正文转浅（模板常写死深色） */
html.skin-theme-clientpref-os .bl-box-body,
html.skin-theme-clientpref-os .bl-box-body * {
color: var( --bl-dark-text-bright ) !important;
}
/* 上面 .bl-box-body * 会把链接一起刷成正文色，这里还原成主题蓝 */
html.skin-theme-clientpref-os .bl-box-body a,
html.skin-theme-clientpref-os .bl-box-body a * {
color: var(--bl-accent) !important;
}
html.skin-theme-clientpref-os .bl-box-body a.new,
html.skin-theme-clientpref-os .bl-box-body a.new * {
color: var( --bl-dark-link-new ) !important;
}
html.skin-theme-clientpref-os .bl-navitem a.new,
html.skin-theme-clientpref-os .bl-list a.new {
color: var( --bl-dark-link-new ) !important;
}
html.skin-theme-clientpref-os .bl-map-wrap { background: transparent; }
html.skin-theme-clientpref-os .bl-map-wrap iframe { border-color: var( --bl-dark-map-border ); }
html.skin-theme-clientpref-os .bl-hero { border-color: #3a3a3a !important; }
}
/* =====================================================================
* 27. 首页组件 bl-*（随主题自动切换的部分）
* ===================================================================== */
.bl-hero,
.bl-hero-text,
.bl-sidecol,
.bl-maincol { color: var(--bl-text); }
.bl-hero-kicker,
.bl-hero-title { color: var(--bl-text-strong); }
/* 亮色下不要给 .bl-box-body 的后代指定颜色 —— 那会把里面的链接一起刷成正文色。
亮色直接用主题默认链接色（蓝）即可；暗色的正文/链接处理见第 26 节。 */
.bl-box-body { color: var(--bl-text); }
/* 首页各盒子里的链接：一律保持主题蓝，红链保持红。
var(--bl-accent) 本身就是 light-dark，所以这一条亮/暗都管；
暗色下第 26 节还有更高优先级的同名规则，用来压过那里的 .bl-box-body *。 */
.bl-box-body a,
.bl-box-body a * {
color: var(--bl-accent) !important;
}
.bl-box-body a.new,
.bl-box-body a.new * {
color: #d33 !important;
}
.bl-list li { color: var(--bl-text); }
.bl-navitem a { white-space: nowrap !important; }
.bl-hero {
position: relative !important;
isolation: isolate !important;
transition: transform 0.25s cubic-bezier( 0.2, 0, 0, 1 ),
box-shadow 0.25s cubic-bezier( 0.2, 0, 0, 1 ) !important;
will-change: transform !important;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
border-radius: 24px !important;
box-shadow: 0 8px 20px var(--bl-shadow-color-sm) !important;
}
.bl-hero:hover {
transform: translateY( -4px ) !important;
box-shadow: 0 20px 35px -12px var(--bl-shadow-color) !important;
}
.bl-hero::before {
content: "" !important;
position: absolute !important;
inset: -1px !important;
border-radius: 25px !important;
/* 光圈线宽：原为 4px，太粗；与其它面板统一为 2px */
padding: 2px !important;
background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
var(--bl-glow-ring) 0%,
var(--bl-glow-ring-2) 40%,
transparent 80% ) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
-webkit-mask-clip: content-box, border-box !important;
-webkit-mask-composite: source-out !important;
mask-composite: subtract !important;
pointer-events: none !important;
z-index: 2 !important;
}
.bl-hero::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: 24px !important;
background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
var(--bl-glow-fill) 0%,
transparent 70% ) !important;
mix-blend-mode: soft-light !important;
pointer-events: none !important;
z-index: 1 !important;
}
.bl-hero-text,
.bl-stat {
position: relative !important;
z-index: 3 !important;
}
.bl-stat-number a { color: var(--bl-accent) !important; }
.bl-stat-number a:hover { color: var(--bl-accent-hover) !important; }
/* =====================================================================
* 28. 页面背景
* ===================================================================== */
.page-Main_Page .bl-mainpage,
.page-首页 .bl-mainpage { position: relative; }
.page-Main_Page .bl-mainpage::before,
.page-首页 .bl-mainpage::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: url("https://blkl.fun/wp-content/uploads/2026/10/8e137ba6c7893205fe31035c3592e33c.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: var( --bl-home-opacity );
pointer-events: none;
}
.bl-page-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* =====================================================================
* 29. Weatherbox 图表卡片
* ===================================================================== */
.weather-box-chart {
position: relative;
float: right !important;
clear: right !important;
margin: 0.5em 0 1em 1em !important;
width: 312px !important;
background-color: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
border: 1px solid var(--bl-border-strong) !important;
border-radius: 16px !important;
padding: 12px !important;
box-shadow: 0 4px 16px var(--bl-shadow-color-sm) !important;
box-sizing: border-box !important;
color: var(--bl-text);
}
.weather-box-chart .mw-customtoggle {
color: var(--bl-accent) !important;
font-size: 0.85em !important;
padding: 2px 8px !important;
border-radius: 6px !important;
transition: background 0.2s !important;
}
.weather-box-chart .mw-customtoggle:hover {
background-color: var(--bl-accent-soft) !important;
}
.weather-box-chart svg {
display: block !important;
margin: 0 auto !important;
max-width: 100% !important;
height: auto !important;
filter: var( --bl-f-chart );
}
.weather-box-chart div:not( [class] ) { color: var(--bl-text); }
/* =====================================================================
* 30. 评论流 (CommentStreams)
* ===================================================================== */
.cs-stream {
display: flex;
flex-direction: column;
margin-bottom: 14px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid var(--bl-divider);
background: var(--bl-glass);
backdrop-filter: var(--bl-blur);
-webkit-backdrop-filter: var(--bl-blur);
transition: background 0.2s, border-color 0.2s;
}
.cs-comment-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.cs-avatar {
width: 42px;
height: 42px;
border-radius: 10px;
object-fit: cover;
border: 1px solid var(--bl-divider);
}
.cs-comment-header-center {
flex: 1;
margin-left: 10px;
font-size: 13px;
opacity: 0.85;
color: var(--bl-text);
}
.cs-comment-header-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cs-voting-span {
display: flex;
align-items: center;
gap: 4px;
}
.cs-vote-up-button,
.cs-vote-down-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
min-width: 32px;
padding: 0 12px;
border-radius: 8px;
background: light-dark( rgba( 255, 255, 255, 0.15 ), rgba( 255, 255, 255, 0.06 ) );
backdrop-filter: var(--bl-blur);
-webkit-backdrop-filter: var(--bl-blur);
border: 1px solid var(--bl-divider);
color: var(--bl-text);
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
.cs-vote-up-button:hover,
.cs-vote-down-button:hover {
background: var(--bl-accent-soft);
border-color: var(--bl-accent-soft-2);
transform: translateY( -1px );
box-shadow: 0 4px 10px var(--bl-shadow-color-sm);
}
.cs-vote-up-button:active,
.cs-vote-down-button:active { transform: translateY( 0 ); }
.cs-stream-footer .oo-ui-buttonElement-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 16px;
border-radius: 8px;
background: var(--bl-glass);
backdrop-filter: var(--bl-blur);
-webkit-backdrop-filter: var(--bl-blur);
border: 1px solid var(--bl-divider);
color: var(--bl-text);
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
.cs-stream-footer .oo-ui-buttonElement-button:hover {
background: var(--bl-accent-soft);
border-color: var(--bl-accent-soft-2);
transform: translateY( -1px );
box-shadow: 0 4px 10px var(--bl-shadow-color-sm);
}
.cs-comment-body {
padding-left: 54px;
font-size: 14px;
line-height: 1.6;
color: var(--bl-text);
}
.cs-reply-comment {
margin-left: 54px;
margin-top: 8px;
padding: 8px 12px;
border-radius: 12px;
background: transparent;
border: 1px solid var(--bl-border);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* CommentStreams：玻璃讨论串 + 平面回复；沿用全站光边、柔光和阴影变量。 */
html body.skin-citizen .cs-stream {
position: relative;
isolation: isolate;
box-sizing: border-box;
padding: 16px 18px;
margin: 0 0 18px;
border: 1px solid var(--bl-border-strong);
border-radius: 18px;
background: var(--bl-glass-strong) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
box-shadow: 0 6px 20px var(--bl-shadow-color-sm);
color: var(--bl-text);
transition: box-shadow .2s, border-color .2s;
}
html body.skin-citizen .cs-stream:hover {
border-color: var(--bl-edge);
box-shadow: 0 10px 28px var(--bl-shadow-color-lg);
}
html body.skin-citizen .cs-stream::before {
content: "";
position: absolute;
inset: 0;
/* 光圈线宽：原为 4px，太粗；与其它面板统一为 2px */
padding: 2px;
box-sizing: border-box;
border-radius: inherit;
background: radial-gradient(240px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring), var(--bl-glow-ring-2) 45%, transparent 85%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
mask-composite: exclude;
pointer-events: none;
z-index: 2;
}
html body.skin-citizen .cs-stream::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill), transparent 75%);
/* opacity 与 z-index 原本写在这里，但下文（第 37 节）用同一个选择器
`html body.skin-citizen .cs-stream::after` 又写了 z-index: 1 / opacity: .18，
优先级相同、位置更靠后 ⇒ 这两条一直是死声明，已删。 */
pointer-events: none;
}
html body.skin-citizen .cs-stream > .cs-comment,
html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-header,
html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-body,
html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-footer,
html body.skin-citizen .cs-stream > .cs-stream-footer {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html body.skin-citizen .cs-stream > .cs-comment {
overflow: visible;
}
html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-header {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
padding: 0;
border: 0;
}
html body.skin-citizen .cs-stream .cs-comment-header-left {
flex: 0 0 44px;
}
html body.skin-citizen .cs-stream .cs-avatar {
display: block;
box-sizing: border-box;
width: 44px;
height: 44px;
border-radius: 12px;
object-fit: cover;
border: 1px solid var(--bl-border-strong);
}
html body.skin-citizen .cs-stream .cs-comment-header-center {
flex: 1;
min-width: 0;
margin: 0;
padding: 0;
opacity: 1;
line-height: 1.5;
color: var(--bl-text);
}
html body.skin-citizen .cs-stream .cs-comment-title {
margin: 0 0 2px;
font-size: 1rem;
font-weight: 650;
line-height: 1.4;
color: var(--bl-text-strong);
}
html body.skin-citizen .cs-stream .cs-comment-author {
font-size: .85rem;
}
html body.skin-citizen .cs-stream .cs-comment-details,
html body.skin-citizen .cs-stream .cs-comment-author-anonymous {
font-size: .78rem;
color: var(--bl-text-muted);
opacity: 1;
}
html body.skin-citizen .cs-stream .cs-comment-header-right {
float: none;
flex: 0 0 auto;
margin-left: auto;
}
html body.skin-citizen .cs-stream .cs-comment-body {
padding: 0;
margin: 10px 0 0 54px;
font-size: .925rem;
line-height: 1.65;
overflow-wrap: anywhere;
color: var(--bl-text);
}
html body.skin-citizen .cs-stream .cs-comment-body > p:first-child { margin-top: 0; }
html body.skin-citizen .cs-stream .cs-comment-body > p:last-child { margin-bottom: 0; }
html body.skin-citizen .cs-stream > .cs-reply-comment {
margin: 14px 0 0 54px;
padding: 12px 0 0;
border: 0;
border-top: 1px solid var(--bl-divider);
border-radius: 0;
box-shadow: none;
}
html body.skin-citizen .cs-stream > .cs-reply-comment .cs-comment-header-left {
flex-basis: 32px;
}
html body.skin-citizen .cs-stream > .cs-reply-comment .cs-avatar {
width: 32px;
height: 32px;
border-radius: 9px;
}
html body.skin-citizen .cs-stream > .cs-reply-comment .cs-comment-body {
margin-left: 42px;
margin-top: 8px;
}
html body.skin-citizen .cs-stream > .cs-stream-footer:not(:empty) {
margin: 12px 0 0 54px;
}
@media screen and (max-width: 640px) {
html body.skin-citizen .cs-stream { padding: 12px; }
html body.skin-citizen .cs-stream > .cs-reply-comment { margin-left: 14px; }
html body.skin-citizen .cs-stream .cs-comment-details { display: block; }
}
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .cs-stream {
background: light-dark(#ffffff, #16181b) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .cs-stream::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .cs-stream::after {
content: none;
}
@media (prefers-reduced-motion: reduce) {
html body.skin-citizen .cs-stream { transition: none; }
}
/* =====================================================================
* 31. QQ 群聊记录 — Aero 毛玻璃美化
* ===================================================================== */
.qqchat {
position: relative;
z-index: 10;
margin: 1.2em 0;
border-radius: 20px;
background: var(--bl-glass-soft) !important;
backdrop-filter: blur( 16px ) saturate( 120% ) !important;
-webkit-backdrop-filter: blur( 16px ) saturate( 120% ) !important;
border: 1px solid var(--bl-edge) !important;
box-shadow: 0 12px 48px var( --bl-shadow-color-lg ), 0 2px 8px var( --bl-shadow-color-sm ) !important;
overflow: hidden !important;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.qqchat::before {
content: "" !important;
position: absolute !important;
inset: -1.5px !important;
border-radius: 21px !important;
padding: 4px !important;
background: radial-gradient(
280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
var(--bl-glow-ring) 0%,
var(--bl-glow-ring-2) 40%,
transparent 85%
) border-box !important;
-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
-webkit-mask-clip: content-box, border-box !important;
-webkit-mask-composite: source-out !important;
mask-composite: subtract !important;
mix-blend-mode: screen !important;
z-index: 10 !important;
pointer-events: none !important;
}
.qqchat::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: 20px !important;
background: radial-gradient(
500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.08 ) ) 0%,
transparent 75%
) !important;
mix-blend-mode: soft-light !important;
z-index: 1 !important;
pointer-events: none !important;
}
.qqchat:hover {
box-shadow: 0 20px 56px var( --bl-shadow-color-lg ), 0 2px 12px var( --bl-shadow-color-sm ) !important;
transform: translateY( -2px );
}
.qqchat .mw-collapsible-toggle {
position: absolute;
top: 18px;
right: 20px;
z-index: 20;
background: light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.06 ) ) !important;
backdrop-filter: blur( 8px ) saturate( 100% ) !important;
-webkit-backdrop-filter: blur( 8px ) saturate( 100% ) !important;
border: 1px solid var(--bl-border) !important;
border-radius: 8px !important;
padding: 4px 14px !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
color: var(--bl-text) !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
letter-spacing: 0.3px;
user-select: none;
}
.qqchat .mw-collapsible-toggle:hover {
background: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.14 ) ) !important;
border-color: var(--bl-border-strong) !important;
transform: scale( 1.03 );
}
.qqchat .mw-collapsible-toggle .mw-collapsible-text { display: inline-block; }
.qqchat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 24px 14px 24px;
border-bottom: 1px solid var(--bl-border);
position: relative;
z-index: 5;
}
.qqchat-icon {
font-size: 1.5rem;
line-height: 1;
filter: drop-shadow( 0 2px 4px rgba( 0, 0, 0, 0.06 ) );
}
.qqchat-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--bl-text-strong);
letter-spacing: 0.2px;
flex: 1;
}
.qqchat-count {
font-size: 0.80rem;
font-weight: 400;
color: var(--bl-text);
opacity: 0.60;
background: light-dark( rgba( 128, 128, 128, 0.08 ), rgba( 255, 255, 255, 0.06 ) );
padding: 2px 14px;
border-radius: 20px;
border: 1px solid var(--bl-border-soft);
white-space: nowrap;
}
.qqchat-body {
padding: 12px 18px 18px 18px;
max-height: 600px;
overflow-y: auto;
position: relative;
z-index: 5;
scroll-behavior: smooth;
}
.qqchat-body::-webkit-scrollbar { width: 6px; }
.qqchat-body::-webkit-scrollbar-track {
background: light-dark( rgba( 128, 128, 128, 0.04 ), rgba( 255, 255, 255, 0.02 ) );
border-radius: 10px;
margin: 8px 0;
}
.qqchat-body::-webkit-scrollbar-thumb {
background: light-dark( rgba( 128, 128, 128, 0.20 ), rgba( 255, 255, 255, 0.12 ) );
border-radius: 10px;
transition: background 0.3s ease;
}
.qqchat-body::-webkit-scrollbar-thumb:hover {
background: light-dark( rgba( 128, 128, 128, 0.35 ), rgba( 255, 255, 255, 0.22 ) );
}
.qqchat-message {
display: flex;
flex-direction: column;
padding: 8px 12px;
margin: 2px 0;
border-radius: 12px;
background: transparent;
transition: background 0.20s ease;
position: relative;
}
.qqchat-message:hover { background: var(--bl-hover); }
.qqchat-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 2px;
flex-wrap: wrap;
}
.qqchat-user {
font-weight: 600;
font-size: 0.88rem;
color: var(--bl-accent);
letter-spacing: 0.2px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.qqchat-user::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bl-accent);
opacity: 0.50;
margin-right: 2px;
flex-shrink: 0;
}
/* 不同用户不同颜色（与主题无关，保持常量） */
.qqchat-user[data-user="惟遠イエン"]::before { background: #e67e22; }
.qqchat-user[data-user="Bluesky展翅腾飞"]::before { background: #3498db; }
.qqchat-user[data-user="Kuranoka"]::before { background: #9b59b6; }
.qqchat-user[data-user="高远天空"]::before { background: #1abc9c; }
.qqchat-user[data-user="爱玩游戏的-欧卡t"]::before { background: #e74c3c; }
.qqchat-user[data-user="FaustToasts"]::before { background: #f39c12; }
.qqchat-user[data-user="威廉阿道夫"]::before { background: #2c3e50; }
.qqchat-user[data-user="烂Lan兰恩"]::before { background: #d35400; }
.qqchat-user[data-user="Ubi ventus Surgit"]::before { background: #16a085; }
.qqchat-user[data-user="药瓶子"]::before { background: #8e44ad; }
.qqchat-time {
font-size: 0.70rem;
color: var(--bl-text);
opacity: 0.40;
font-weight: 400;
letter-spacing: 0.2px;
white-space: nowrap;
margin-left: auto;
}
.qqchat-text {
font-size: 0.92rem;
line-height: 1.6;
color: var(--bl-text);
word-break: break-word;
padding-left: 20px;
position: relative;
}
.qqchat-empty {
color: var(--bl-text);
opacity: 0.30;
font-style: italic;
font-size: 0.85rem;
}
.qqchat-mention {
display: inline;
background: var(--bl-accent-soft);
padding: 1px 6px;
border-radius: 4px;
font-weight: 500;
color: var(--bl-accent);
border: 1px solid var(--bl-border-soft);
transition: background 0.2s ease;
}
.qqchat-mention:hover { background: var(--bl-accent-soft-2); }
.qqchat .mw-collapsible-content {
transition: all 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}
.qqchat.mw-collapsed .mw-collapsible-content { display: none; }
/* —— 响应式 —— */
@media screen and (max-width: 768px) {
.qqchat-header {
padding: 14px 16px 10px 16px;
flex-wrap: wrap;
gap: 6px;
}
.qqchat-title {
font-size: 0.95rem;
flex: 1 1 100%;
order: 2;
}
.qqchat-icon {
font-size: 1.3rem;
order: 1;
}
.qqchat-count {
font-size: 0.70rem;
padding: 1px 12px;
order: 3;
margin-left: auto;
}
.qqchat .mw-collapsible-toggle {
position: relative;
top: auto;
right: auto;
order: 4;
margin-left: auto;
font-size: 0.70rem;
padding: 2px 12px;
}
.qqchat-body {
padding: 8px 10px 12px 10px;
max-height: 420px;
}
.qqchat-message { padding: 6px 8px; }
.qqchat-meta { gap: 6px; }
.qqchat-user { font-size: 0.82rem; }
.qqchat-time { font-size: 0.62rem; }
.qqchat-text { font-size: 0.85rem; padding-left: 14px; }
.qqchat-user::before {
width: 6px;
height: 6px;
}
.qqchat-mention {
padding: 0 4px;
font-size: 0.85rem;
}
}
@media screen and (max-width: 480px) {
.qqchat-header { padding: 10px 12px 8px 12px; }
.qqchat-title { font-size: 0.85rem; }
.qqchat-body {
padding: 6px 6px 10px 6px;
max-height: 340px;
}
.qqchat-message {
padding: 4px 6px;
border-radius: 8px;
}
.qqchat-text { font-size: 0.80rem; padding-left: 10px; }
.qqchat-user { font-size: 0.76rem; }
.qqchat-time { font-size: 0.58rem; }
.qqchat .mw-collapsible-toggle {
font-size: 0.62rem;
padding: 1px 10px;
}
}
/* =====================================================================
* 32. 性能模式（Basic）
* 只改「效果」与「材质」，不改主题颜色：
* 关掉模糊与光效、把毛玻璃换成不透明表面。
* 表面色仍来自随主题切换的变量，所以这里没有任何颜色字面量。
* ===================================================================== */
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-menu__card,
html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-preferences-dropdown__card,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-sticky-header-background,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette,
html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-page-actions-more__card,
html[class*="citizen-feature-performance-mode-clientpref-1"] #mw-panel-toc,
html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-toc,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-toc-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* 光效与玻璃光泽都做在 background-image 上（radial-gradient / linear-gradient），
只关 backdrop-filter 是关不掉的，必须连背景图一起清掉。 */
background-image: none !important;
background-color: var(--color-surface-1) !important;
border: 1px solid var(--bl-border) !important;
box-shadow: none !important;
opacity: 1 !important;
animation: citizen-fade-in 0.1s ease forwards !important;
}
/* 一次性关掉所有光效伪元素
（逐个列出，不用 :is() —— 见文件开头的校验器兼容说明） */
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-menu__card::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-toc-card::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] #mw-panel-toc::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .ambox::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .aero-news-box::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-menuSelectWidget::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups-container::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-popupWidget-popup::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .page-Main_Page .bl-mainpage::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .page-首页 .bl-mainpage::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-menu__card::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-toc-card::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] #mw-panel-toc::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .ambox::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .aero-news-box::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-menuSelectWidget::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups-container::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-popupWidget-popup::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .page-Main_Page .bl-mainpage::after,
html[class*="citizen-feature-performance-mode-clientpref-1"] .page-首页 .bl-mainpage::after {
display: none !important;
content: none !important;
visibility: hidden !important;
}
/* 顶栏玻璃条 → 不透明 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-header::after {
backdrop-filter: none !important;
background-image: none !important;
border-image: none !important;
border-right: 1px solid var(--bl-border-strong);
background-color: var(--color-surface-1) !important;
opacity: 1 !important;
}
/* 命令面板：去掉弹性动画 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette {
transform: translate( -50%, -50% ) scale( 1 ) !important;
box-shadow: 0 10px 30px var(--bl-shadow-color) !important;
}
/* =====================================================================
* 32.1 性能模式（Basic）下的信息框
* 不做毛玻璃，改为「不透明实心」，且**跟随主题**：
* 亮色 = 近白（#ffffff / 表头 #f3f3f3），暗色 = 近黑（#16181b / 表头 #23262b）。
* 这正是原文件的写法（background: var(--color-surface-1)，亮白/暗黑），
* 而不是两种主题都黑 —— 亮色下也黑是之前理解错了。
* 外圈光线换成静态描边框（对应原文件底部 v4 的 Basic 分支）。
* ===================================================================== */
/* 1) 本体与表体：不透明实心（亮白 / 暗近黑） */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox tbody,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.geography,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.vcard {
background: light-dark( #ffffff, #16181b ) !important;
background-color: light-dark( #ffffff, #16181b ) !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-color: light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
color: light-dark( #202122, #e6e8ea ) !important;
}
/* 2) 分部标题：底色交给模板（下面只在模板没写底色时才接管），只统一边框与阴影 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th[colspan="2"] {
background-image: none !important;
border-color: light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* Basic 下也只有在模板没写底色时才接管表头的底色与文字色 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th[colspan="2"]:not([style*="background"]) {
background-color: light-dark( #f3f3f3, #23262b ) !important;
color: light-dark( #202122, #e6e8ea ) !important;
}
/* 3) 单元格文字：亮色正文色、暗色转浅（带内联底色的单元格交给第 35 节） */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th:not(.infobox-above):not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox td:not(.infobox-above):not([style*="background"]) {
color: light-dark( #202122, #d6d9dd ) !important;
}
/* 4) 模板写在行内的黑字：暗色下翻浅（亮色下本来就是黑字压白底，不动） */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color:black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color: black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color:#000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color: #000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color:#000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color: #000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color:black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color: black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color:#000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color: #000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color:#000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color: #000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color:black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color: black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color:#000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color: #000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color:#000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color: #000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color:black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color: black"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color:#000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color: #000;"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color:#000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color: #000000"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="rgb"][style*="0 0 0"]:not([style*="background"]) {
color: light-dark( #000000, #eaecf0 ) !important;
}
/* 6) 静态描边框替代光线。
原版用 :not(:has(caption[实心背景])) 让位给 caption 的同色外框，但 :has() 校验不过，
所以这里始终画框；模板给了实心标题底色的信息框会同时出现「灰色内框 + 同色外框」。 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox::before {
content: "" !important;
display: block !important;
border-style: solid !important;
border-color: rgba( 128, 128, 128, 0.30 ) !important;
background: none !important;
-webkit-mask: none !important;
mask: none !important;
mix-blend-mode: normal !important;
border-radius: inherit !important;
pointer-events: none !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox::after {
display: none !important;
content: none !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-above {
text-shadow: none !important;
box-shadow: none !important;
}
/* 国家数据图表在 Basic 下一并转深，跟随信息框的近黑质感 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-country-chart {
background: light-dark( #f5f5f5, #1c1f23 ) !important;
background-color: light-dark( #f5f5f5, #1c1f23 ) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
box-shadow: none !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-country-chart > div:first-child {
background: light-dark( #e8f0fe, #1a3050 ) !important;
color: light-dark( #1a5a9e, #8ab8ff ) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th.infobox-label:not([style*="background"]),
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox td.infobox-label:not([style*="background"]) {
color: light-dark( #202122, #c9ccd1 ) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette__footer {
background-color: var(--bl-surface-2) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-parser-output table.wikitable {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
box-shadow: none !important;
border: 1px solid var(--bl-border) !important;
}
/* Basic 下同样保留模板的彩色底（压深层由第 18 节的 ::before 负责） */
html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-parser-output table.wikitable td:not(.notheme) {
border-color: var(--bl-border) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"]:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"],
html[class*="citizen-feature-performance-mode-clientpref-1"]:not(.ve-active) .mw-parser-output .thumbinner {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
box-shadow: none !important;
border: 1px solid var(--bl-border) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
border: 1px solid var(--bl-border) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups .mwe-popups-container {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
border: 1px solid var(--bl-border) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups footer,
html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups.mwe-popups-type-generic .mwe-popups-container {
background: var(--color-surface-2) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] table.ambox {
backdrop-filter: none !important;
background-color: var(--color-surface-2) !important;
border-style: solid !important;
border-width: 1px !important;
border-color: var(--bl-border) !important;
border-left-width: 8px !important;
box-shadow: none !important;
transform: none !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
box-shadow: none !important;
border: 1px solid var(--bl-border) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box.warning {
background-color: light-dark( #fff3cd, #3d3520 ) !important;
border: 1px solid var(--bl-border) !important;
border-left: 4px solid #f0ad4e !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .aero-news-box {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
box-shadow: none !important;
border: 1px solid var(--bl-border) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-popupWidget {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
border: 1px solid var(--bl-border) !important;
box-shadow: none !important;
transform: none !important;
isolation: auto !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--color-surface-1) !important;
border: 1px solid var(--bl-border) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero:hover {
transform: translateY( -4px ) !important;
box-shadow: 0 12px 28px var(--bl-shadow-color) !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-page-aside-lastmod {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-image: none !important;
background-color: var(--color-surface-1) !important;
border: 1px solid var(--bl-border) !important;
box-shadow: none !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-page-aside-lastmod::before {
display: none !important;
}
/* =====================================================================
* 33. 渐进增强回退
* light-dark() 需要 Chrome 123+ / Safari 17.5+ / Firefox 120+。
* 不支持时上面的 light-dark() 声明会被整体丢弃，自定义属性变成未定义，
* 面板背景会变成透明。这里给出等价的亮色值兜底，
* 让老浏览器至少保持正确的亮色外观（暗色会退化为亮色）。
* ===================================================================== */
@supports not ( color: light-dark( #ffffff, #000000 ) ) {
:root {
--bl-glass: rgba( 255, 255, 255, 0.35 );
--bl-glass-soft: rgba( 255, 255, 255, 0.30 );
--bl-glass-strong: rgba( 255, 255, 255, 0.75 );
--bl-surface-2: #f5f5f5;
--bl-cell-filter: none;
--bl-border: rgba( 128, 128, 128, 0.10 );
--bl-border-strong: rgba( 128, 128, 128, 0.20 );
--bl-border-soft: rgba( 128, 128, 128, 0.08 );
--bl-divider: rgba( 128, 128, 128, 0.15 );
--bl-edge: rgba( 255, 255, 255, 0.45 );
--bl-text: #202122;
--bl-text-strong: #000000;
--bl-text-muted: #54595d;
--bl-accent: #3366cc;
--bl-accent-hover: #2a6bb0;
--bl-accent-soft: rgba( 54, 121, 204, 0.10 );
--bl-accent-soft-2: rgba( 54, 121, 204, 0.15 );
--bl-hover: rgba( 0, 0, 0, 0.04 );
--bl-hover-strong: rgba( 0, 0, 0, 0.06 );
--bl-shadow-color-sm: rgba( 0, 0, 0, 0.06 );
--bl-shadow-color: rgba( 0, 0, 0, 0.10 );
--bl-shadow-color-lg: rgba( 31, 38, 135, 0.15 );
--bl-glow-ring: rgba( 255, 255, 255, 0.90 );
--bl-glow-ring-2: rgba( 255, 255, 255, 0.30 );
--bl-glow-fill: rgba( 255, 255, 255, 0.35 );
--bl-glow-fill-2: rgba( 255, 255, 255, 0.20 );
--bl-glow-ring-dim: rgba( 255, 255, 255, 0.35 );
--bl-glow-ring-dim-2: rgba( 255, 255, 255, 0.10 );
--bl-page-bg: #fafafa;
--color-surface-0: #fafafa;
--color-surface-1: #ffffff;
--color-surface-2: #f5f5f5;
--color-surface-3: #e8e8e8;
--bl-ib-border: rgba( 128, 128, 128, 0.30 );
--bl-ib-divider: rgba( 128, 128, 128, 0.15 );
--bl-ib-hairline: rgba( 128, 128, 128, 0.10 );
}
}
/* =====================================================================
* 34. 覆盖 MediaWiki:Common.css 对信息框的深色底
*
* Common.css 第 382 / 404 行有：
* html.skin-theme-clientpref-night .infobox {
* background-color: rgba(40, 40, 50, 0.6) !important;
* border-color: rgba(255, 255, 255, 0.15) !important;
* }
* @media (prefers-color-scheme: dark) {
* html.skin-theme-clientpref-os .infobox { ...同上... }
* }
* 外加一批 .infobox.geography td/th 的 border-*-color !important。
* 这些规则优先级是 (0,2,1)，高于本文件的 .infobox (0,1,0) ——
* 结果就是暗色下信息框被盖成蓝灰色、毛玻璃也被顶掉。
*
* Common.css 还要给其他皮肤用，所以不删它，只在这里用更高优先级盖回来。
* （MediaWiki:Citizen.css 只在 Citizen 皮肤下加载，天然就只影响 Citizen。）
* ===================================================================== */
/* Aero：恢复毛玻璃底 */
html body.skin-citizen .infobox,
html body.skin-citizen .infobox.ve-infobox-country,
html body.skin-citizen .infobox.geography,
html body.skin-citizen .infobox.vcard {
background-color: var(--bl-glass) !important;
background-image: none !important;
border-color: var(--bl-edge) !important;
}
/* 地理信息框的分隔线跟着本主题走 */
html body.skin-citizen .infobox.geography td,
html body.skin-citizen .infobox.geography th,
html body.skin-citizen .infobox.geography .mergedtoprow td,
html body.skin-citizen .infobox.geography .mergedtoprow th,
html body.skin-citizen .infobox.geography .mergedrow td,
html body.skin-citizen .infobox.geography .mergedrow th,
html body.skin-citizen .infobox.geography .mergedbottomrow td,
html body.skin-citizen .infobox.geography .mergedbottomrow th {
border-top-color: var(--bl-ib-divider) !important;
border-bottom-color: var(--bl-ib-divider) !important;
border-right-color: var(--bl-ib-divider) !important;
border-left-color: var(--bl-ib-divider) !important;
}
/* Basic：不透明近黑 */
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox,
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox.ve-infobox-country,
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox.geography,
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox.vcard {
background-color: light-dark( #ffffff, #16181b ) !important;
background-image: none !important;
border-color: light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
}
/* =====================================================================
* 35. Infobox 统一方案（普通 = 无实心 caption ／ 特殊 = 有实心 caption）
*
* 【判据】不看表格类名 —— 网站上的信息框大多同时带 vcard / geography /
* ve-infobox-country，类名组合区分不了「普通」和「特殊」。改用 DOM 结构区分，
* 纯 CSS 就能表达，不需要 :has()：
*
* 普通信息框（模板自己的默认外观）—— 两种形态：
* a) 表里没有 caption
* <table class="infobox …"><tbody>… ← tbody 是 table 的第一个子元素
* 实测：<table class="infobox geography vcard ve-infobox-country">（国家）
* <table class="infobox geography vcard ve-infobox-country">（城市）
* <table class="infobox ve-infobox-country tc-no-top-radius">（台风）
* b) 有 caption，但 caption 没有实心底色
* <table class="infobox ve-infobox-country tornado-no-top-radius">
* <caption class="infobox-title" style="border-radius: 0 !important;">（龙卷风）
* 表头把浅色底写在 style 属性上：
* background-color:#f8f9fa ／ #f0f0f0 ／ #F3F3F3 ／ background:rgba(204,238,255,.6)
* 那不是语义色，只是模板默认外观 ⇒ 一律压平。
*
* 特殊信息框（模板自带配色的那种）
* <table class="infobox vcard"><caption style="background:#4FD5E8; …"></caption><tbody>…
* 实测：<table class="infobox vcard">，<caption class="infobox-title fn"
* style="background:#4FD5E8; color:#ffffff;">，
* <th class="infobox-header" style="background-color:#CFF3F7;">（角色）
* 底色是模板的语义色 ⇒ 必须保留。
*
* 对应的三条选择器前缀：
* .infobox > tbody:first-child → 普通（形态 a）
* .infobox > caption:not([style*="background"]) + tbody → 普通（形态 b）
* .infobox > caption[style*="background"] + tbody → 特殊
*
* ⚠ 判据必须精确到「caption 带【实心底色】」。只判「有没有 caption」会误伤
* 龙卷风表这种「有 caption 但没底色」的表 —— 那会让它的 #F3F3F3 灰底在暗色下
* 留下来（2026-10-07 用户实测报的「小标题没适配暗色 / 显得旧」）。
*
* 【处置】
* 普通（表头 above / header）：底色压平（Aero 透明 / Basic 中性实色）；
* 并把模板写死的字色（多为 color:#000000）改跟主题，
* 否则暗色下就是黑字压在暗底上 —— 这就是「字不会变白」的原因。
* ⚠ 必须带 !important：模板写在 style 属性上，无 !important 压不过。
* ⚠ 模板若把底色写成内联 !important（例如台风表的
* `background-color: #e6b8f2 !important`），样式表压不过，保持原样 ——
* 那属于模板强制配色，不争。
* 特殊（有实心 caption 的表头）：底色保留，只做一件事 —— 有底色却没写字色时
* 补一个深色文字（--bl-ib-on-fill），否则暗色下会被主题刷成白字压在浅底上。
* 小标题 .infobox-subheader：和「特殊」同一条路子 —— 底色保留。
* 它是模板的分类色带（城市表那条 #CDDEFF 天蓝写的就是「地级市」），
* 属于语义色，压掉就丢信息了。只补深色文字。
*
* 【不在本方案内】
* caption 自己：特殊信息框靠 caption 的实心底色生成同色描边（见第 11 节 v4 规则），
* 所以 caption 的底色一律不碰。
* .infobox-country-chart：国家数据图表，单独在第 13 / 32.1 节处理。
* 台风等级色 .tc-cat-*：底色写在 MediaWiki:Common.css 的类上，本文件另兜一次深字。
*
* ⚠ 判「有没有内联字色」用子串 " color:"（前面带空格）——
* 用 [style*="color"] 会被 background-color: 里的 color 误命中，
* 而特殊信息框的表头正是 background-color:#CFF3F7 这种写法，会区分不开。
* 若模板把 style 写成 "background:red;color:#000"（分号后不留空格）会漏判，
* 届时补 [style*=";color:"]（分支 ①）与 :not([style*=";color:"])（分支 ②）即可。
*
* 选择器只用校验器支持的写法：结构伪类 + 链式 :not() + [attr*="value"]，无 :is() / :has()。
* ===================================================================== */
/* —— 分支 ①：普通信息框的表头（above / header）—— 压平模板的内联底色 ——
普通信息框的两种形态：
· 表里没有 caption → tbody 是 table 的第一个子元素
· 有 caption 但 caption 没实心底色 → caption 后面紧跟的那个 tbody
（实测：龙卷风表 <caption class="infobox-title" style="border-radius: 0 !important">）
⚠ .infobox-subheader 故意不在这里：那是「分类色带」
（例如城市表的 background-color:#CDDEFF 天蓝，显示「地级市」），
属于模板的语义色，见下面分支 ②-b。 */
/* Aero / 默认：透明，信息框回到「全透明 + 描边 + 光线」 */
.infobox > tbody:first-child th:not(.infobox-subheader)[style*="background"],
.infobox > tbody:first-child .infobox-above[style*="background"],
.infobox > tbody:first-child .infobox-header[style*="background"],
.infobox > caption:not([style*="background"]) + tbody th:not(.infobox-subheader)[style*="background"],
.infobox > caption:not([style*="background"]) + tbody .infobox-above[style*="background"],
.infobox > caption:not([style*="background"]) + tbody .infobox-header[style*="background"] {
background-color: transparent !important;
background-image: none !important;
}
/* Basic：换成不透明中性实色，与第 32.1 节「没写底色的表头」保持同一档观感 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > tbody:first-child th:not(.infobox-subheader)[style*="background"],
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > tbody:first-child .infobox-above[style*="background"],
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > tbody:first-child .infobox-header[style*="background"],
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > caption:not([style*="background"]) + tbody th:not(.infobox-subheader)[style*="background"],
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > caption:not([style*="background"]) + tbody .infobox-above[style*="background"],
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > caption:not([style*="background"]) + tbody .infobox-header[style*="background"] {
background-color: light-dark( #f3f3f3, #23262b ) !important;
background-image: none !important;
}
/* 压平底色之后，模板写死的字色也必须跟主题：
否则暗色下就是 color:#000000 的黑字压在暗底上（「字不会变白」）。
同样排除 .infobox-subheader —— 它保留底色，字色由分支 ②-b 安排。 */
.infobox > tbody:first-child th:not(.infobox-subheader)[style*=" color:"],
.infobox > tbody:first-child td:not(.infobox-subheader)[style*=" color:"],
.infobox > tbody:first-child .infobox-above[style*=" color:"],
.infobox > tbody:first-child .infobox-header[style*=" color:"],
.infobox > tbody:first-child .infobox-label[style*=" color:"],
.infobox > tbody:first-child .infobox-data[style*=" color:"],
.infobox > caption:not([style*="background"]) + tbody th:not(.infobox-subheader)[style*=" color:"],
.infobox > caption:not([style*="background"]) + tbody td:not(.infobox-subheader)[style*=" color:"],
.infobox > caption:not([style*="background"]) + tbody .infobox-above[style*=" color:"],
.infobox > caption:not([style*="background"]) + tbody .infobox-header[style*=" color:"],
.infobox > caption:not([style*="background"]) + tbody .infobox-label[style*=" color:"],
.infobox > caption:not([style*="background"]) + tbody .infobox-data[style*=" color:"] {
color: var(--bl-text) !important;
}
/* —— 分支 ②：底色要保留的两类 —— 只补「浅底深字」，完全不碰底色 ——
②-a 特殊信息框：caption 带【实心底色】的表（角色表 #4FD5E8 那种）
②-b 所有信息框的小标题 .infobox-subheader —— 分类色带（#CDDEFF 天蓝等）
不带 !important：模板自己写的字色（内联或 TemplateStyles）仍然优先。 */
.infobox > caption[style*="background"] + tbody th[style*="background"]:not([style*=" color:"]),
.infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*=" color:"]),
.infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*=" color:"]),
.infobox .infobox-subheader[style*="background"]:not([style*=" color:"]) {
color: var(--bl-ib-on-fill);
}
/* 台风等级色写在 Common.css 的类上（不在 style 属性里），单独兜一次深字。
亮色下 --bl-ib-on-fill 本来就是正文色，所以这条只在暗色下改变外观。 */
.infobox[class*="tc-cat"] caption,
.infobox[class*="tc-cat"] .infobox-title {
color: var(--bl-ib-on-fill);
}
/* =====================================================================
* 35.1 现代 wiki UI：信息框只保留一条主要分割线
*
* 现在的做法：数据行之间不画线；分区标题（.infobox-header）只在【上方】
* 留一条 1px 分割线，作为「换一个分区」的提示。其余（标题下方、小标题
* 上下、label/data 之间）一律不画。
*
* 颜色用 --bl-divider（明暗两侧都有值），所以不会再出现
* 「亮色有线、暗色没线」这种只有单侧可见的分割线。
*
* ⚠ 放在文件最末、并用 html body.skin-citizen 提优先级 ——
* 否则会被第 11 节 `th:not(.infobox-above) { border-top: none !important }`
* 和第 12 节 `.infobox.geography.vcard th { border: 0 … !important }` 压掉。
* ===================================================================== */
html body.skin-citizen .infobox .infobox-header {
border-top: 1px solid var(--bl-divider) !important;
border-bottom: none !important;
}
/* =====================================================================
* 36. Infobox 标题与外框：一张连续卡片（2026-10-07）
* caption 只圆顶部，正文只圆底部；取消白色内光框。
* 彩色 caption 的伪元素继承模板背景，保留同色外描边。
* ===================================================================== */
:root { --bl-ib-outline-width: 4px; }
html body.skin-citizen table.infobox {
padding: 0 !important;
border-radius: 16px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: visible !important;
}
/* ⚠ 这里原来有一条把信息框两个光效伪元素全关掉的规则：
html body.skin-citizen table.infobox::before,
html body.skin-citizen table.infobox::after {
content: none !important; display: none !important;
}
—— 于是信息框丢掉第 11 节定义的「光圈 + 柔光」，
连光效边都没有了（2026-10-07 实测：国家信息框没有光效边）。
已删除，回到第 11 / 12 节的写法：
.infobox::before = 鼠标跟随的光圈（mix-blend-mode: overlay）
.infobox::after = 鼠标跟随的柔光（mix-blend-mode: soft-light）
.infobox.geography::after / .infobox.vcard::after = 另一档柔光色 */
html body.skin-citizen table.infobox > caption,
html body.skin-citizen table.infobox > caption.infobox-title {
display: table-caption !important;
caption-side: top !important;
position: static !important;
width: auto !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 10px 14px !important;
border: 0 !important;
border-radius: 16px 16px 0 0 !important;
overflow: visible !important;
font-size: 1.1rem !important;
font-weight: 700;
line-height: 1.4 !important;
letter-spacing: .015em;
box-shadow: none !important;
text-shadow: none !important;
}
/* ⚠ 这里原来有一条规则，已删除：
html body.skin-citizen table.infobox > tbody {
display: table-row-group !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
它把 tbody 的圆角清零、并把它改回普通的 table-row-group —— 于是
第 11 节 .infobox tbody 的 `overflow: hidden` 不再生效，裁剪没了。
§36 的本意是改由「首行 / 末行的单元格」各自带 15px 圆角，但
台风表的 .infobox-above 自带【内联】`border-radius: 0 !important`
（<th class="infobox-above" style="… border-radius: 0 !important;">），
内联 !important 压不过 ⇒ 表头又变回方角。
删掉之后，第 11 节的
.infobox tbody { display: table; border-radius: 12px; overflow: hidden }
重新生效 —— 圆角由 tbody 裁切产生，不受单元格内联值影响。 */
html body.skin-citizen table.infobox > tbody > tr > th,
html body.skin-citizen table.infobox > tbody > tr > td {
border-radius: 0 !important;
}
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > :first-child {
border-bottom-left-radius: 15px !important;
}
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > :last-child {
border-bottom-right-radius: 15px !important;
}
/* 无 caption 的模板仍由第一行接住外框顶部圆角。 */
html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > :first-child {
border-top-left-radius: 15px !important;
}
html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > :last-child {
border-top-right-radius: 15px !important;
}
html body.skin-citizen .infobox .infobox-header {
padding: .5em .8em !important;
font-size: .95em;
text-transform: none !important;
letter-spacing: .025em !important;
}
/* 只给实心底色生成外描边；不截取或猜测模板色值。 */
html body.skin-citizen table.infobox > caption.infobox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="background-image"]):not([style*="transparent"])::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -4px !important;
padding: var(--bl-ib-outline-width) !important;
box-sizing: border-box !important;
border: 0 !important;
border-radius: 20px !important;
background-color: inherit !important;
background-image: none !important;
-webkit-mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 ) border-box !important;
-webkit-mask-composite: xor !important;
mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 ) border-box !important;
mask-composite: exclude !important;
filter: saturate(1.18) brightness(.93) !important;
pointer-events: none !important;
z-index: 102 !important;
}
/* caption 的内联字色优先。未指定字色时：有彩底取深字，无彩底跟主题。 */
html body.skin-citizen table.infobox > caption {
color: var(--bl-text);
}
html body.skin-citizen table.infobox > caption[style*="background"] {
color: var(--bl-ib-on-fill);
}
html body.skin-citizen table.infobox > caption a {
color: inherit !important;
}
/* 37. 保留彩色外框、恢复柔光；Basic 只关闭模糊，不移除静态装饰。 */
html body.skin-citizen table.infobox {
isolation: isolate;
box-shadow: 0 8px 28px var(--bl-shadow-color-lg) !important;
}
/* ⚠ 这里原来是一条【替代版】柔光，它把信息框和 Navbox 的原始柔光盖掉了：
html body.skin-citizen table.infobox::after,
html body.skin-citizen .navbox::after {
content: "" !important; display: block !important; visibility: visible !important;
position: absolute !important; inset: 0 !important; border: 0 !important;
border-radius: 16px !important;
background: radial-gradient(380px …, var(--bl-glow-fill) 0%, transparent 75%) !important;
opacity: .35 !important; ← 只有三成强度
mix-blend-mode: soft-light; pointer-events: none !important; z-index: 1 !important;
}
问题是它：
· 只剩下柔光，没有光圈（::before）—— 所以边上看不到光效；
· 强度被压到 35%，和侧栏 / ambox / voy-box 等面板不一致；
· 半径写死 380px，覆盖掉了第 11 节 500px 与第 12 节
.infobox.geography/.vcard 的那一档柔光。
已删除，两处都回到上面（第 11 / 12 / 16 节）定义的写法。 */
html body.skin-citizen .navbox .navbox::after {
content: none !important;
display: none !important;
}
html body.skin-citizen table.infobox > caption.infobox-title[style*="background"]::before {
visibility: visible !important;
}
html body.skin-citizen .cs-stream::before,
html body.skin-citizen .cs-stream::after {
content: "" !important;
display: block !important;
visibility: visible !important;
}
html body.skin-citizen .cs-stream::after {
z-index: 1;
opacity: .18;
mix-blend-mode: soft-light;
}
/* 相同填色在夜间变为较暗色带；独立压背景，不给文字或整张表加滤镜。 */
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)) !important;
color: #eaecf0 !important;
}
/* —— 信息框：只处理【有实心 caption】的表（角色那种）——
⚠ 无 caption 的表（台风）绝对不能压暗：那里表头的颜色是语义色，例如
<th class="infobox-above" style="background-color:#e6b8f2 !important"> 表示"强度等级"。
这里原来不分有没有 caption 一律压暗，把它也压掉了。
判据 `caption[style*="background"] + tbody` 正好等价于第 35 节的「特殊信息框」。
⚠ 同时把 58% 黑减到 42%（= 保留 58% 原色）：58% 会把浅色底压成灰调
（"小标题太灰"），再用 saturate 把彩度补回来 —— 只加 saturate，
文字近似中性色，几乎不受影响，也不等于给整张表加滤镜。
caption 单独一条、不加 filter：它的 ::before 是同色外描边，靠 static
定位取 table 作包含块；一旦给 caption 加 filter，包含块就变成 caption
自己，描边会缩到标题上。 */
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
}
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-subheader[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-label[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-data[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
filter: saturate(1.7);
}
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)) !important;
color: #eaecf0 !important;
}
/* 信息框：只处理有实心 caption 的表；42% 黑 + 补饱和。说明见 night 块。 */
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
}
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-subheader[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-label[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-data[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
filter: saturate(1.7);
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)) !important;
color: #eaecf0 !important;
}
/* 信息框：只处理有实心 caption 的表；42% 黑 + 补饱和。说明见 night 块。 */
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
}
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-subheader[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-label[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-data[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
filter: saturate(1.7);
}
}
html body.skin-citizen table.infobox > caption a[href],
html body.skin-citizen table.infobox .infobox-header a[href],
html body.skin-citizen table.infobox .infobox-subheader a[href] {
color: var(--color-link, #36c) !important;
}
html body.skin-citizen table.infobox > caption a.new[href],
html body.skin-citizen table.infobox .infobox-header a.new[href],
html body.skin-citizen table.infobox .infobox-subheader a.new[href] {
color: var(--color-link-red, #d33) !important;
}
/* 38. 移动信息框：独占一行，让正文从表格下方继续。 */
@media screen and (max-width: 768px) {
html body.skin-citizen table.infobox {
float: none !important;
clear: both !important;
width: calc(100% - 16px) !important;
min-width: 0 !important;
max-width: calc(100% - 16px) !important;
box-sizing: border-box !important;
margin: 12px 8px 20px !important;
}
html body.skin-citizen table.infobox th,
html body.skin-citizen table.infobox td {
overflow-wrap: anywhere;
}
html body.skin-citizen table.infobox img {
max-width: 100%;
height: auto;
}
}
/* 39. Navbox 夜间对比：深底 + 亮链接，保留彩色标题/分组。 */
html.skin-theme-clientpref-night body.skin-citizen .navbox {
--color-link: #8bb8ff;
--color-link--visited: #b4a5ff;
--color-link--hover: #b8d3ff;
--color-link-red: #ff9ba6;
--color-link-red--hover: #ffc0c7;
--bl-navbox-divider: #454952;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-list {
background-color: #202327 !important;
background-image: none !important;
color: #eaecf0 !important;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-even {
background-color: #25282d !important;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
background-image: linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.76)) !important;
color: #f1f3f5 !important;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox a[href] { color: var(--color-link) !important; }
html.skin-theme-clientpref-night body.skin-citizen .navbox a[href]:visited { color: var(--color-link--visited) !important; }
html.skin-theme-clientpref-night body.skin-citizen .navbox a[href]:hover { color: var(--color-link--hover) !important; }
html.skin-theme-clientpref-night body.skin-citizen .navbox a.new[href] { color: var(--color-link-red) !important; }
html.skin-theme-clientpref-night body.skin-citizen .navbox a.new[href]:hover { color: var(--color-link-red--hover) !important; }
html.skin-theme-clientpref-black body.skin-citizen .navbox {
--color-link: #8bb8ff;
--color-link--visited: #b4a5ff;
--color-link--hover: #b8d3ff;
--color-link-red: #ff9ba6;
--color-link-red--hover: #ffc0c7;
--bl-navbox-divider: #454952;
}
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-list {
background-color: #202327 !important;
background-image: none !important;
color: #eaecf0 !important;
}
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-even {
background-color: #25282d !important;
}
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
background-image: linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.76)) !important;
color: #f1f3f5 !important;
}
html.skin-theme-clientpref-black body.skin-citizen .navbox a[href] { color: var(--color-link) !important; }
html.skin-theme-clientpref-black body.skin-citizen .navbox a[href]:visited { color: var(--color-link--visited) !important; }
html.skin-theme-clientpref-black body.skin-citizen .navbox a[href]:hover { color: var(--color-link--hover) !important; }
html.skin-theme-clientpref-black body.skin-citizen .navbox a.new[href] { color: var(--color-link-red) !important; }
html.skin-theme-clientpref-black body.skin-citizen .navbox a.new[href]:hover { color: var(--color-link-red--hover) !important; }
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen .navbox {
--color-link: #8bb8ff;
--color-link--visited: #b4a5ff;
--color-link--hover: #b8d3ff;
--color-link-red: #ff9ba6;
--color-link-red--hover: #ffc0c7;
--bl-navbox-divider: #454952;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-list {
background-color: #202327 !important;
background-image: none !important;
color: #eaecf0 !important;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-even {
background-color: #25282d !important;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
background-image: linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.76)) !important;
color: #f1f3f5 !important;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox a[href] { color: var(--color-link) !important; }
html.skin-theme-clientpref-os body.skin-citizen .navbox a[href]:visited { color: var(--color-link--visited) !important; }
html.skin-theme-clientpref-os body.skin-citizen .navbox a[href]:hover { color: var(--color-link--hover) !important; }
html.skin-theme-clientpref-os body.skin-citizen .navbox a.new[href] { color: var(--color-link-red) !important; }
html.skin-theme-clientpref-os body.skin-citizen .navbox a.new[href]:hover { color: var(--color-link-red--hover) !important; }
}