MediaWiki:Citizen.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* =====================================================================
* Blockland Wiki · 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 {
/* —— 材质 —— */
--bl-glass: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 20, 20, 20, 0.55 ) );
--bl-glass-soft: light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 20, 20, 20, 0.50 ) );
--bl-glass-strong: light-dark( rgba( 255, 255, 255, 0.75 ), rgba( 28, 28, 28, 0.70 ) );
--bl-blur: blur( 14px ) saturate( 100% );
/* —— 不透明表面：Basic 模式关掉模糊后使用，保证可读性 —— */
--bl-surface-2: light-dark( #f5f5f5, #2d2e2f );
/* —— 描边与分隔线 —— */
--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 ) );
/* —— 页面底色 —— */
--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 {
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);
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%,
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;
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 ) ),
transparent 80%
) 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; }
#skin-client-prefs-citizen-feature-image-dimming { order: 4 !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;
}
/* =====================================================================
* 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–12. Infobox · 一体式卡片（2026-10-06）
* 标题只有上沿圆角；正文保留原生表格结构，底部统一圆角。
* 不再把 tbody 变成另一张 table，也不再叠加白色光圈。
* 不使用 :has() / :is()；背景色继续由模板提供。
* ===================================================================== */
:root {
--bl-ib-radius: 16px;
--bl-ib-outline-width: 3px;
--bl-ib-surface: rgba(255,255,255,.78);
--bl-ib-text: #202122;
--bl-ib-muted: #54595d;
--bl-ib-link: #285bb7;
--bl-ib-border: rgba(70,90,110,.20);
--bl-ib-divider: rgba(70,90,110,.11);
--bl-ib-hairline: rgba(70,90,110,.11);
--bl-ib-section: rgba(90,130,160,.07);
--bl-ib-wash: rgba(0,0,0,0);
--bl-ib-shadow: rgba(30,50,70,.10);
}
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-black {
--bl-ib-surface: rgba(26,29,34,.92);
--bl-ib-text: #eaedf2;
--bl-ib-muted: #b5bec9;
--bl-ib-link: #91bbff;
--bl-ib-border: rgba(180,200,220,.23);
--bl-ib-divider: rgba(190,210,230,.11);
--bl-ib-hairline: rgba(190,210,230,.11);
--bl-ib-section: rgba(190,210,230,.065);
--bl-ib-wash: rgba(10,15,24,.70);
--bl-ib-shadow: rgba(0,0,0,.30);
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--bl-ib-surface: rgba(26,29,34,.92);
--bl-ib-text: #eaedf2;
--bl-ib-muted: #b5bec9;
--bl-ib-link: #91bbff;
--bl-ib-border: rgba(180,200,220,.23);
--bl-ib-divider: rgba(190,210,230,.11);
--bl-ib-hairline: rgba(190,210,230,.11);
--bl-ib-section: rgba(190,210,230,.065);
--bl-ib-wash: rgba(10,15,24,.70);
--bl-ib-shadow: rgba(0,0,0,.30);
}
}
/* 优先级足以覆盖 Common.css 的地理、国家、夜间规则。 */
html body.skin-citizen table.infobox {
display: table !important;
position: relative !important;
isolation: isolate;
float: right !important;
clear: right !important;
width: 22em;
max-width: 100%;
margin: .4em 0 1.1em 1.25em !important;
padding: 0 !important;
box-sizing: border-box;
border: 1px solid var(--bl-ib-border) !important;
border-radius: 0 0 var(--bl-ib-radius) var(--bl-ib-radius) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: var(--bl-ib-surface) !important;
color: var(--bl-ib-text) !important;
box-shadow: 0 8px 24px var(--bl-ib-shadow) !important;
backdrop-filter: var(--bl-blur);
-webkit-backdrop-filter: var(--bl-blur);
font-size: .925rem !important;
line-height: 1.55;
overflow: visible !important;
z-index: auto !important;
}
html body.skin-citizen table.infobox > tbody {
display: table-row-group !important;
width: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
position: static !important;
}
html body.skin-citizen table.infobox > tbody > tr,
html body.skin-citizen table.infobox > tfoot > tr {
background: transparent !important;
}
html body.skin-citizen table.infobox > tbody > tr > th,
html body.skin-citizen table.infobox > tbody > tr > td,
html body.skin-citizen table.infobox > tfoot > tr > th,
html body.skin-citizen table.infobox > tfoot > tr > td {
padding: 9px 12px !important;
line-height: 1.55 !important;
vertical-align: top;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background-color: transparent;
overflow-wrap: break-word;
}
html body.skin-citizen table.infobox > tbody > tr:not(:last-child) > th,
html body.skin-citizen table.infobox > tbody > tr:not(:last-child) > td {
border-bottom: 1px solid var(--bl-ib-divider) !important;
}
html body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]),
html body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]) {
color: var(--bl-ib-text) !important;
}
html body.skin-citizen table.infobox .infobox-label {
font-weight: 600;
text-align: left;
width: 34%;
}
html body.skin-citizen table.infobox .infobox-data {
text-align: left;
}
/* caption 与第一行标题使用同样的尺寸与轮廓；没有下沿圆角或间隙。 */
html body.skin-citizen table.infobox > caption,
html body.skin-citizen table.infobox .infobox-above,
html body.skin-citizen table.infobox .infobox-title {
margin: 0 !important;
padding: 8px 14px !important;
box-sizing: border-box !important;
border: 0 !important;
border-bottom: 1px solid var(--bl-ib-divider) !important;
border-radius: 15px 15px 0 0 !important;
background-color: var(--bl-ib-section);
background-image: linear-gradient(var(--bl-ib-wash), var(--bl-ib-wash)) !important;
color: var(--bl-ib-text);
font-size: 1.15rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-align: center !important;
letter-spacing: normal !important;
text-transform: none !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
outline: none !important;
overflow: visible !important;
}
html body.skin-citizen table.infobox > caption {
display: table-caption !important;
caption-side: top !important;
width: auto !important;
position: static !important;
}
html body.skin-citizen table.infobox th.infobox-above,
html body.skin-citizen table.infobox td.infobox-above,
html body.skin-citizen table.infobox th.infobox-title,
html body.skin-citizen table.infobox td.infobox-title {
display: table-cell !important;
}
/* 模板里副标题常用 small / div，保留其内联字号。 */
html body.skin-citizen table.infobox > caption small,
html body.skin-citizen table.infobox .infobox-above small {
font-size: .78em;
font-weight: 500;
line-height: 1.5;
}
html body.skin-citizen table.infobox > caption p {
margin: 0 !important;
}
/* 清除标题内部默认段落/区块间距，保留正常的换行。 */
html body.skin-citizen table.infobox > caption > div,
html body.skin-citizen table.infobox .infobox-above > p,
html body.skin-citizen table.infobox .infobox-above > div,
html body.skin-citizen table.infobox .infobox-title > p {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 中间栏目为平直色带，不再做独立胶囊。默认文字与正文同色。 */
html body.skin-citizen table.infobox .infobox-header,
html body.skin-citizen table.infobox .infobox-subheader,
html body.skin-citizen table.infobox .infobox-player-header {
padding: 8px 12px !important;
margin: 0 !important;
border-radius: 0 !important;
font-size: .925rem !important;
font-weight: 650 !important;
line-height: 1.5 !important;
letter-spacing: normal !important;
text-transform: none !important;
text-align: center !important;
color: var(--bl-ib-text) !important;
background-color: var(--bl-ib-section);
background-image: linear-gradient(var(--bl-ib-wash), var(--bl-ib-wash)) !important;
border: 0 !important;
border-bottom: 1px solid var(--bl-ib-divider) !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* 正文上沿始终平直，只有末行保留底部外角。 */
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > th:first-child,
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > td:first-child,
html body.skin-citizen table.infobox > tfoot:last-child > tr:last-child > td:first-child {
border-bottom-left-radius: 15px !important;
}
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > th:last-child,
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > td:last-child,
html body.skin-citizen table.infobox > tfoot:last-child > tr:last-child > td:last-child {
border-bottom-right-radius: 15px !important;
}
html body.skin-citizen table.infobox > caption + tbody > tr:first-child > th,
html body.skin-citizen table.infobox > caption + tbody > tr:first-child > td {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
html body.skin-citizen table.infobox .infobox-image {
text-align: center;
padding: 12px !important;
}
html body.skin-citizen table.infobox img {
max-width: 100%;
height: auto;
}
html body.skin-citizen table.infobox .mw-file-description img {
background: transparent !important;
}
/* 关闭旧白色光圈与覆盖在内容上的发光层。 */
html body.skin-citizen table.infobox::before,
html body.skin-citizen table.infobox::after {
display: none !important;
content: none !important;
}
/* 继承 caption 的实心主题色画一圈外框；暗色时继承相同的压暗层。
caption 保持 static，使伪元素以整个 table 为定位参照。
仅 caption 提供颜色的模板自动同色；第一行 th 标题使用中性外框。 */
html body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"])::before {
content: "";
position: absolute;
inset: -3px;
padding: var(--bl-ib-outline-width);
box-sizing: border-box;
border: 0;
border-radius: 19px;
background-color: inherit;
background-image: inherit;
-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[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen table.infobox {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
background-color: var(--bl-ib-surface) !important;
}
#map-ctx-1778649814 {
border-radius: 10px !important;
overflow: hidden !important;
}
@media screen and (max-width: 640px) {
html body.skin-citizen table.infobox {
float: none !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
margin: 1em 0 1.25em !important;
}
}
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption,
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption,
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-above,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-above *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-above,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-above *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-title,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-title *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-title,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-title *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-header,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-header *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-header,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-header *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-subheader,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-subheader *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-subheader,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-subheader *:not(a) {
color: var(--bl-ib-text) !important;
}
html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]) { color: var(--bl-ib-text) !important; }
html.skin-theme-clientpref-night body.skin-citizen table.infobox a:not(.new),
html.skin-theme-clientpref-black body.skin-citizen table.infobox a:not(.new) { color: var(--bl-ib-link) !important; }
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption,
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-above,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-above *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-title,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-title *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-header,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-header *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-subheader,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-subheader *:not(a) {
color: var(--bl-ib-text) !important;
}
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]) { color: var(--bl-ib-text) !important; }
html.skin-theme-clientpref-os body.skin-citizen table.infobox a:not(.new) { color: var(--bl-ib-link) !important; }
}
/* =====================================================================
* 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. Navbox 导航框
* ===================================================================== */
.navbox,
.navbox-inner,
.navbox-subgroup {
background: transparent !important;
border: none !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: 16px !important;
}
.navbox {
overflow: hidden !important;
margin: 1.5em 0 !important;
box-shadow: 0 4px 15px var(--bl-shadow-color) !important;
}
/* navbox 两套主题下都是玻璃面板（原先只有暗色有），这样它才接得住光效 */
.navbox-inner {
background: var(--bl-glass) !important;
backdrop-filter: var(--bl-blur) !important;
-webkit-backdrop-filter: var(--bl-blur) !important;
}
/* 光效：与其它面板同源，光圈画在盒内（.navbox 自身是 overflow:hidden） */
.navbox {
position: relative;
isolation: isolate;
}
.navbox > * {
position: relative;
z-index: 2;
}
.navbox::before {
content: "" !important;
position: absolute;
inset: 0;
border: 2px solid transparent;
border-radius: inherit;
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 );
-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;
}
.navbox::after {
content: "" !important;
position: absolute;
inset: 0;
border-radius: inherit;
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;
}
.navbox-title {
background: light-dark( rgba( 204, 238, 255, 0.50 ), rgba( 54, 121, 204, 0.30 ) ) !important;
color: light-dark( #004466, #ffffff ) !important;
font-weight: bold !important;
}
.navbox-group {
background: light-dark( rgba( 54, 121, 204, 0.10 ), rgba( 54, 121, 204, 0.15 ) ) !important;
color: light-dark( #3366cc, #ffffff ) !important;
font-weight: bold !important;
}
.navbox-list,
.navbox-list > div {
background: transparent !important;
color: var(--bl-text) !important;
}
/* bl-navbox-wrap 容器（首页模板） */
.bl-navbox-wrap table.navbox {
background: var(--color-surface-1) !important;
border-color: var(--bl-border) !important;
}
.bl-navbox-wrap .navbox-group {
background: var(--color-surface-2) !important;
color: var(--bl-accent) !important;
border-color: var(--bl-border-soft) !important;
}
.bl-navbox-wrap .navbox-list { border-color: var(--bl-border-soft) !important; }
.bl-navbox-wrap .navbox-list a { color: var(--bl-text) !important; }
.bl-navbox-wrap .navbox-list a:hover { color: var(--bl-accent-hover) !important; }
.bl-navbox-wrap .navbox-odd { background: var(--color-surface-1) !important; }
.bl-navbox-wrap .navbox-even { background: var(--color-surface-2) !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;
}
.mw-parser-output table.wikitable th:not(.notheme),
.mw-parser-output table.wikitable td:not(.notheme) {
border: 1px solid var(--bl-divider) !important;
padding: 10px 16px !important;
}
.mw-parser-output table.wikitable th:not(.notheme) {
background-color: transparent !important;
color: var(--bl-text) !important;
}
.mw-parser-output table.wikitable td:not(.notheme) { color: var(--bl-text) !important; }
.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;
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;
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. 页面杂物
* ===================================================================== */
.catlinks {
border-color: var(--bl-divider) !important;
background-color: light-dark( rgba( 0, 0, 0, 0.02 ), rgba( 0, 0, 0, 0.20 ) ) !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;
}
}
/* =====================================================================
* 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;
/* —— 亮色侧的默认值 —— */
--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 );
}
/* 暗色开关：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 );
}
}
/* —— 首页组件：暗色下需要单独修正的文字色 —— */
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;
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: var(--bl-glass);
border: 1px solid var(--bl-border);
backdrop-filter: var(--bl-blur);
-webkit-backdrop-filter: var(--bl-blur);
}
/* =====================================================================
* 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: 2px !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"] .navbox::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"] .navbox::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;
}
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;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-parser-output table.wikitable th:not(.notheme) {
background-color: transparent !important;
}
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"] .navbox {
box-shadow: none !important;
}
html[class*="citizen-feature-performance-mode-clientpref-1"] .navbox-inner {
background-color: var(--color-surface-1) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !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-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-page-bg: #fafafa;
--color-surface-0: #fafafa;
--color-surface-1: #ffffff;
--color-surface-2: #f5f5f5;
--color-surface-3: #e8e8e8;
}
}
html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > td[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > th[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > td[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > th[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
background-image: linear-gradient(var(--bl-ib-wash),var(--bl-ib-wash)) !important;
color: var(--bl-ib-text) !important;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > td[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > th[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
background-image: linear-gradient(var(--bl-ib-wash),var(--bl-ib-wash)) !important;
color: var(--bl-ib-text) !important;
}
}