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。
/* ════════════════════════════════════════════════════════════════
第1部分：全局色彩系统 — OKLCH 主色调
════════════════════════════════════════════════════════════════ */
/* 主色相301（紫色系），对浅色和深色模式均生效 */
:root {
--color-progressive-oklch__h: 301;
--color-progressive-oklch__c: 0.168;
--color-progressive-oklch__l: 48%;
}
/* ════════════════════════════════════════════════════════════════
第2部分：浅色模式 — Surface 与文字层级
文档来源：Theming > Surface colors / Text colors
════════════════════════════════════════════════════════════════ */
.skin-theme-clientpref-day {
--color-surface-0: #F8F6FC;
--color-surface-1: #FFFFFF;
--color-surface-2: #F3F0FF;
--color-surface-3: #EDE9FE;
--color-surface-4: #DDD6FE;
--color-base: #2D2640;
--color-emphasized: #1A1033;
--color-subtle: #7C7394;
--color-link: #6D28D9;
}
/* 自动模式下浅色环境的兼容 */
@media screen and (prefers-color-scheme: light) {
.skin-theme-clientpref-os {
--color-surface-0: #F8F6FC;
--color-surface-1: #FFFFFF;
--color-surface-2: #F3F0FF;
--color-surface-3: #EDE9FE;
--color-surface-4: #DDD6FE;
--color-base: #2D2640;
--color-emphasized: #1A1033;
--color-subtle: #7C7394;
--color-link: #6D28D9;
}
}
/* ════════════════════════════════════════════════════════════════
第3部分：深色模式 — Surface 与文字层级
文档来源：Theming > Theme modes
════════════════════════════════════════════════════════════════ */
.skin-theme-clientpref-night {
--color-surface-0: #110D1B;
--color-surface-1: #1A1428;
--color-surface-2: #231C34;
--color-surface-3: #2D2540;
--color-surface-4: #3D3356;
--color-base: #D4CEE4;
--color-emphasized: #F0ECF8;
--color-subtle: #8E85A6;
--color-link: #C4B5FD;
}
/* 自动模式下深色环境的兼容 */
@media screen and (prefers-color-scheme: dark) {
.skin-theme-clientpref-os {
--color-surface-0: #110D1B;
--color-surface-1: #1A1428;
--color-surface-2: #231C34;
--color-surface-3: #2D2540;
--color-surface-4: #3D3356;
--color-base: #D4CEE4;
--color-emphasized: #F0ECF8;
--color-subtle: #8E85A6;
--color-link: #C4B5FD;
}
}
/* 纯黑模式额外覆盖 */
.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
--color-surface-0: #000000;
--color-surface-1: #0D0A14;
--color-surface-2: #151020;
--color-surface-3: #1E182C;
}
/* ════════════════════════════════════════════════════════════════
第4部分：D竖脉经络 — 页面背景线条
纯CSS repeating-linear-gradient，零图片零JS
性能模式下自动关闭（遵循官方Performance mode规范）
════════════════════════════════════════════════════════════════ */
/* 浅色模式背景线条 — 仅在性能模式关闭时显示 */
.citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-day .mw-page-container {
background-image:
repeating-linear-gradient(
90deg,
transparent,
transparent 80px,
rgba(124, 58, 237, 0.03) 80px,
rgba(124, 58, 237, 0.03) 81px,
transparent 81px,
transparent 100px,
rgba(124, 58, 237, 0.018) 100px,
rgba(124, 58, 237, 0.018) 101px
);
background-attachment: fixed;
}
/* 深色模式背景线条 — 透明度降低避免刺眼 */
.citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-night .mw-page-container {
background-image:
repeating-linear-gradient(
90deg,
transparent,
transparent 80px,
rgba(196, 181, 253, 0.025) 80px,
rgba(196, 181, 253, 0.025) 81px,
transparent 81px,
transparent 100px,
rgba(196, 181, 253, 0.015) 100px,
rgba(196, 181, 253, 0.015) 101px
);
background-attachment: fixed;
}
/* 自动模式兼容 */
@media screen and (prefers-color-scheme: light) {
.citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-os .mw-page-container {
background-image:
repeating-linear-gradient(
90deg,
transparent,
transparent 80px,
rgba(124, 58, 237, 0.03) 80px,
rgba(124, 58, 237, 0.03) 81px,
transparent 81px,
transparent 100px,
rgba(124, 58, 237, 0.018) 100px,
rgba(124, 58, 237, 0.018) 101px
);
background-attachment: fixed;
}
}
@media screen and (prefers-color-scheme: dark) {
.citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-os .mw-page-container {
background-image:
repeating-linear-gradient(
90deg,
transparent,
transparent 80px,
rgba(196, 181, 253, 0.025) 80px,
rgba(196, 181, 253, 0.025) 81px,
transparent 81px,
transparent 100px,
rgba(196, 181, 253, 0.015) 100px,
rgba(196, 181, 253, 0.015) 101px
);
background-attachment: fixed;
}
}
/* 性能模式开启时 — 纯色背景 */
.citizen-feature-performance-mode-clientpref-1 .mw-page-container {
background-image: none;
}
/* ════════════════════════════════════════════════════════════════
第5部分：页面标题（.firstHeading）
════════════════════════════════════════════════════════════════ */
.skin-citizen .firstHeading {
font-weight: 900;
letter-spacing: 1px;
}
/* ════════════════════════════════════════════════════════════════
第6部分：章节标题
MediaWiki 1.45 使用 .mw-heading 包裹 h2/h3 等
════════════════════════════════════════════════════════════════ */
.skin-citizen .mw-body-content .mw-heading h2 {
border-left: 4px solid var(--color-progressive);
padding-left: 12px;
font-weight: 800;
letter-spacing: 0.5px;
}
.skin-citizen .mw-body-content .mw-heading h3 {
border-left: 3px solid var(--color-surface-4);
padding-left: 10px;
font-weight: 700;
}
.skin-citizen .mw-body-content .mw-heading h4 {
padding-left: 10px;
font-weight: 600;
color: var(--color-subtle);
}
/* ════════════════════════════════════════════════════════════════
第7部分：Infobox 样式 — 左侧悬浮
Citizen 原生支持 PortableInfobox 的 skinStyles
此处对传统 .infobox 和 PortableInfobox 均做覆盖
PC端 float:left sticky，移动端自动回流
════════════════════════════════════════════════════════════════ */
/* --- 传统 table.infobox --- */
@media screen and (min-width: 1200px) {
.skin-citizen .mw-body-content .infobox {
float: left;
clear: left;
width: 280px;
margin: 0 24px 20px 0;
position: sticky;
top: 80px;
z-index: 2;
}
}
.skin-citizen .mw-body-content .infobox {
border: 1px solid var(--color-surface-3);
border-radius: 12px;
overflow: hidden;
background: var(--color-surface-1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Infobox 顶部标题栏 — 渐变色 */
.skin-citizen .mw-body-content .infobox > caption,
.skin-citizen .mw-body-content .infobox > tbody > tr:first-child > th {
background: linear-gradient(135deg, #7C3AED 0%, #F59E0B 100%);
color: #FFFFFF;
font-weight: 800;
font-size: 1.125rem;
letter-spacing: 2px;
padding: 14px 16px;
text-align: center;
border: none;
}
/* Infobox 图片区域 */
.skin-citizen .mw-body-content .infobox .infobox-image,
.skin-citizen .mw-body-content .infobox > tbody > tr > td[colspan] {
background: var(--color-surface-2);
padding: 8px;
text-align: center;
}
.skin-citizen .mw-body-content .infobox .infobox-image img {
border-radius: 8px;
max-width: 100%;
height: auto;
}
/* Infobox 数据行 */
.skin-citizen .mw-body-content .infobox th {
background: var(--color-surface-2);
color: var(--color-subtle);
font-weight: 600;
font-size: 0.85rem;
padding: 6px 12px;
text-align: left;
white-space: nowrap;
width: 30%;
vertical-align: top;
border-bottom: 1px solid var(--color-surface-3);
}
.skin-citizen .mw-body-content .infobox td {
padding: 6px 12px;
font-size: 0.85rem;
border-bottom: 1px solid var(--color-surface-3);
vertical-align: top;
}
/* Infobox 子标题行 */
.skin-citizen .mw-body-content .infobox .infobox-header,
.skin-citizen .mw-body-content .infobox th[colspan] {
background: var(--color-surface-3);
color: var(--color-emphasized);
font-weight: 700;
font-size: 0.9rem;
padding: 8px 12px;
text-align: center;
letter-spacing: 1px;
}
/* --- PortableInfobox (Extension:PortableInfobox) --- */
@media screen and (min-width: 1200px) {
.skin-citizen .mw-body-content .portable-infobox {
float: left;
clear: left;
width: 280px;
margin: 0 24px 20px 0;
position: sticky;
top: 80px;
z-index: 2;
}
}
.skin-citizen .mw-body-content .portable-infobox {
border: 1px solid var(--color-surface-3);
border-radius: 12px;
overflow: hidden;
background: var(--color-surface-1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.skin-citizen .mw-body-content .portable-infobox .pi-header {
background: linear-gradient(135deg, #7C3AED 0%, #F59E0B 100%);
color: #FFFFFF;
font-weight: 800;
font-size: 1.125rem;
letter-spacing: 2px;
padding: 14px 16px;
text-align: center;
}
.skin-citizen .mw-body-content .portable-infobox .pi-image img {
border-radius: 0;
width: 100%;
height: auto;
}
.skin-citizen .mw-body-content .portable-infobox .pi-item {
border-bottom: 1px solid var(--color-surface-3);
}
.skin-citizen .mw-body-content .portable-infobox .pi-data-label {
background: var(--color-surface-2);
color: var(--color-subtle);
font-weight: 600;
font-size: 0.85rem;
padding: 6px 12px;
}
.skin-citizen .mw-body-content .portable-infobox .pi-data-value {
padding: 6px 12px;
font-size: 0.85rem;
}
/* Infobox 底部分类标签 */
.skin-citizen .mw-body-content .infobox .infobox-nav,
.skin-citizen .mw-body-content .portable-infobox .pi-navigation {
background: var(--color-surface-2);
padding: 8px 12px;
text-align: center;
font-size: 0.8rem;
}
/* ════════════════════════════════════════════════════════════════
第8部分：目录（TOC）样式
Citizen 自带右侧粘性 TOC，此处仅做视觉增强
════════════════════════════════════════════════════════════════ */
/* TOC 当前激活项高亮 */
.skin-citizen .citizen-toc__link--active {
color: var(--color-progressive);
font-weight: 700;
}
/* TOC 标题 */
.skin-citizen .citizen-toc__top {
font-weight: 700;
letter-spacing: 1px;
font-size: 0.8rem;
text-transform: uppercase;
}
/* ════════════════════════════════════════════════════════════════
第9部分：内容区卡片化
每个章节内容包裹在白色/表面色卡片中
════════════════════════════════════════════════════════════════ */
/* 章节内容卡片 */
.skin-citizen .mw-body-content .mw-heading + div,
.skin-citizen .mw-body-content .mw-heading + p,
.skin-citizen .mw-body-content .mw-heading + ul,
.skin-citizen .mw-body-content .mw-heading + ol,
.skin-citizen .mw-body-content .mw-heading + dl,
.skin-citizen .mw-body-content .mw-heading + blockquote {
background: var(--color-surface-1);
border: 1px solid var(--color-surface-3);
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
/* ════════════════════════════════════════════════════════════════
第10部分：表格样式（.wikitable）
文档来源：Utility classes > Tables
════════════════════════════════════════════════════════════════ */
.skin-citizen .mw-body-content .wikitable {
border: 1px solid var(--color-surface-3);
border-radius: 10px;
overflow: hidden;
background: var(--color-surface-1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.skin-citizen .mw-body-content .wikitable th {
background: var(--color-surface-2);
color: var(--color-emphasized);
font-weight: 700;
padding: 10px 14px;
border-bottom: 2px solid var(--color-surface-4);
font-size: 0.875rem;
letter-spacing: 0.3px;
}
.skin-citizen .mw-body-content .wikitable td {
padding: 8px 14px;
border-bottom: 1px solid var(--color-surface-3);
font-size: 0.875rem;
vertical-align: top;
}
/* 表格悬停行高亮 */
.citizen-animations-ready .skin-citizen .mw-body-content .wikitable tbody tr {
transition: background-color var(--transition-hover);
}
.skin-citizen .mw-body-content .wikitable tbody tr:hover {
background-color: var(--color-surface-2);
}
/* 战绩表格：胜/负/平 彩色标记 */
.skin-citizen .mw-body-content .wikitable .result-win {
color: #10B981;
font-weight: 700;
}
.skin-citizen .mw-body-content .wikitable .result-lose {
color: #EF4444;
font-weight: 700;
}
.skin-citizen .mw-body-content .wikitable .result-draw {
color: #F59E0B;
font-weight: 700;
}
/* 境界进度条 — 用于角色词条境界历程表格 */
.skin-citizen .mw-body-content .realm-progress {
height: 6px;
border-radius: 3px;
background: var(--color-surface-3);
overflow: hidden;
}
.skin-citizen .mw-body-content .realm-progress-bar {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #7C3AED, #F59E0B);
}
/* ════════════════════════════════════════════════════════════════
第11部分：Navbox 底部导航
════════════════════════════════════════════════════════════════ */
.skin-citizen .mw-body-content .navbox {
border: 1px solid var(--color-surface-3);
border-radius: 12px;
overflow: hidden;
margin: 24px 0;
background: var(--color-surface-1);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.skin-citizen .mw-body-content .navbox-title {
background: linear-gradient(135deg, #7C3AED 0%, #F59E0B 100%);
color: #FFFFFF;
font-weight: 700;
padding: 10px 16px;
text-align: center;
letter-spacing: 1px;
font-size: 0.9rem;
}
.skin-citizen .mw-body-content .navbox-title a {
color: #FFFFFF;
font-weight: 700;
}
.skin-citizen .mw-body-content .navbox-group {
background: var(--color-surface-2);
font-weight: 700;
padding: 8px 14px;
min-width: 80px;
white-space: nowrap;
font-size: 0.85rem;
color: var(--color-emphasized);
border-right: 2px solid var(--color-surface-4);
vertical-align: middle;
}
.skin-citizen .mw-body-content .navbox-list {
padding: 6px 14px;
font-size: 0.85rem;
}
.skin-citizen .mw-body-content .navbox-even {
background: var(--color-surface-2);
}
.skin-citizen .mw-body-content .navbox-odd {
background: var(--color-surface-1);
}
/* Navbox 内分隔符样式 */
.skin-citizen .mw-body-content .navbox-list a {
white-space: nowrap;
}
/* ════════════════════════════════════════════════════════════════
第12部分：分类标签
════════════════════════════════════════════════════════════════ */
.skin-citizen .mw-normal-catlinks {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--color-surface-3);
}
.skin-citizen .mw-normal-catlinks a {
display: inline-block;
background: var(--color-surface-2);
color: var(--color-link);
padding: 3px 10px;
border-radius: 6px;
font-size: 0.8rem;
margin: 2px 3px;
font-weight: 500;
border: 1px solid var(--color-surface-3);
}
.citizen-animations-ready .skin-citizen .mw-normal-catlinks a {
transition: background-color var(--transition-hover), color var(--transition-hover);
}
.skin-citizen .mw-normal-catlinks a:hover {
background: var(--color-progressive);
color: #FFFFFF;
border-color: var(--color-progressive);
}
/* ════════════════════════════════════════════════════════════════
第13部分：链接样式
════════════════════════════════════════════════════════════════ */
/* 正文链接悬停下划线 */
.skin-citizen .mw-body-content a:not(.new):not(.external):hover {
text-decoration: underline;
text-decoration-color: var(--color-progressive);
text-underline-offset: 3px;
text-decoration-thickness: 2px;
}
/* 红链（不存在的词条） */
.skin-citizen .mw-body-content a.new {
color: #DC2626;
}
.skin-theme-clientpref-night .skin-citizen .mw-body-content a.new {
color: #FCA5A5;
}
/* 外部链接 */
.skin-citizen .mw-body-content a.external {
color: var(--color-link);
}
/* ════════════════════════════════════════════════════════════════
第14部分：引用与脚注
════════════════════════════════════════════════════════════════ */
/* 块引用（经典台词区域可用） */
.skin-citizen .mw-body-content blockquote {
border-left: 4px solid var(--color-progressive);
background: var(--color-surface-2);
border-radius: 0 8px 8px 0;
padding: 14px 20px;
margin: 12px 0;
font-style: italic;
color: var(--color-base);
}
/* 参考文献列表 */
.skin-citizen .mw-body-content .references {
font-size: 0.85rem;
color: var(--color-subtle);
}
/* ════════════════════════════════════════════════════════════════
第15部分：Tabber 扩展标签页样式
Citizen 原生 skinStyles 支持 Tabber/TabberNeue
此处做配色覆盖
════════════════════════════════════════════════════════════════ */
.skin-citizen .tabber__header {
border-bottom: 2px solid var(--color-surface-3);
}
.skin-citizen .tabber__tab--active {
border-bottom-color: var(--color-progressive);
color: var(--color-progressive);
font-weight: 700;
}
.skin-citizen .tabber__panel {
background: var(--color-surface-1);
border: 1px solid var(--color-surface-3);
border-top: none;
border-radius: 0 0 8px 8px;
padding: 16px;
}
/* ════════════════════════════════════════════════════════════════
第16部分：Mermaid 图表样式（角色关系图/势力图）
════════════════════════════════════════════════════════════════ */
.skin-citizen .mw-body-content .mermaid {
background: var(--color-surface-1);
border: 1px solid var(--color-surface-3);
border-radius: 10px;
padding: 16px;
text-align: center;
overflow-x: auto;
}
/* ════════════════════════════════════════════════════════════════
第17部分：图片样式
════════════════════════════════════════════════════════════════ */
/* 图片边框与圆角 */
.skin-citizen .mw-body-content .thumb .thumbinner {
border: 1px solid var(--color-surface-3);
border-radius: 8px;
overflow: hidden;
background: var(--color-surface-1);
}
.skin-citizen .mw-body-content .thumbcaption {
font-size: 0.8rem;
color: var(--color-subtle);
padding: 6px 10px;
line-height: 1.4;
}
/* 关闭图片悬停放大（保持稳定阅读体验） */
:root {
--transform-image-hover: none;
}
/* ════════════════════════════════════════════════════════════════
第18部分：页面宽度
文档来源：Theming > Layout
角色词条需要更宽空间容纳左Infobox+中内容+右TOC
════════════════════════════════════════════════════════════════ */
:root.citizen-feature-custom-width-clientpref-standard {
--width-layout: 1200px;
}
:root.citizen-feature-custom-width-clientpref-wide {
--width-layout: 1680px;
}
/* ════════════════════════════════════════════════════════════════
第19部分：自定义角色/IP/境界/势力 标签色
用于Infobox底部或正文中的分类标记
════════════════════════════════════════════════════════════════ */
/* 角色标签 */
.skin-citizen .tag-character {
display: inline-block;
background: #F3F0FF;
color: #6D28D9;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-character {
background: rgba(124, 58, 237, 0.15);
color: #C4B5FD;
}
/* IP标签 */
.skin-citizen .tag-ip {
display: inline-block;
background: #FEF3C7;
color: #B45309;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-ip {
background: rgba(245, 158, 11, 0.15);
color: #FDE68A;
}
/* 境界标签 */
.skin-citizen .tag-realm {
display: inline-block;
background: #ECFDF5;
color: #047857;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-realm {
background: rgba(16, 185, 129, 0.15);
color: #A7F3D0;
}
/* 势力标签 */
.skin-citizen .tag-faction {
display: inline-block;
background: #FEE2E2;
color: #B91C1C;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-faction {
background: rgba(239, 68, 68, 0.15);
color: #FCA5A5;
}
/* ════════════════════════════════════════════════════════════════
第20部分：角色关系卡片
用于词条内"人物关系"章节
════════════════════════════════════════════════════════════════ */
.skin-citizen .relation-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin: 12px 0;
}
.skin-citizen .relation-card {
background: var(--color-surface-1);
border: 1px solid var(--color-surface-3);
border-radius: 10px;
padding: 12px;
text-align: center;
}
.citizen-animations-ready .skin-citizen .relation-card {
transition: box-shadow var(--transition-hover), border-color var(--transition-hover);
}
.skin-citizen .relation-card:hover {
border-color: var(--color-progressive);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}
.skin-citizen .relation-card img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 6px;
border: 2px solid var(--color-surface-3);
}
.skin-citizen .relation-card .relation-name {
font-weight: 700;
font-size: 0.85rem;
color: var(--color-link);
}
.skin-citizen .relation-card .relation-type {
font-size: 0.75rem;
color: var(--color-subtle);
margin-top: 2px;
}
/* ════════════════════════════════════════════════════════════════
第21部分：经典台词区块
════════════════════════════════════════════════════════════════ */
.skin-citizen .quote-block {
background: var(--color-surface-2);
border-left: 4px solid var(--color-progressive);
border-radius: 0 10px 10px 0;
padding: 14px 20px;
margin: 10px 0;
position: relative;
}
.skin-citizen .quote-block .quote-text {
font-size: 0.95rem;
font-style: italic;
line-height: 1.7;
color: var(--color-emphasized);
}
.skin-citizen .quote-block .quote-source {
font-size: 0.8rem;
color: var(--color-subtle);
margin-top: 6px;
text-align: right;
}
/* ════════════════════════════════════════════════════════════════
第22部分：战绩统计条
用于战绩表格上方的统计摘要
════════════════════════════════════════════════════════════════ */
.skin-citizen .battle-stats {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.skin-citizen .battle-stats .stat-win {
background: rgba(16, 185, 129, 0.1);
color: #10B981;
padding: 4px 12px;
border-radius: 6px;
font-weight: 700;
font-size: 0.85rem;
}
.skin-citizen .battle-stats .stat-lose {
background: rgba(239, 68, 68, 0.1);
color: #EF4444;
padding: 4px 12px;
border-radius: 6px;
font-weight: 700;
font-size: 0.85rem;
}
.skin-citizen .battle-stats .stat-draw {
background: rgba(245, 158, 11, 0.1);
color: #F59E0B;
padding: 4px 12px;
border-radius: 6px;
font-weight: 700;
font-size: 0.85rem;
}
/* ════════════════════════════════════════════════════════════════
第23部分：剧透折叠区块
════════════════════════════════════════════════════════════════ */
.skin-citizen .spoiler-box {
background: var(--color-surface-2);
border: 1px dashed var(--color-surface-4);
border-radius: 8px;
padding: 12px 16px;
margin: 10px 0;
}
.skin-citizen .spoiler-box summary {
cursor: pointer;
font-weight: 700;
color: var(--color-progressive);
font-size: 0.9rem;
}
/* ════════════════════════════════════════════════════════════════
第24部分：移动端响应式
Citizen 本身是移动端优先，此处做额外优化
════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1199px) {
/* 移动端 Infobox 恢复正常文档流 */
.skin-citizen .mw-body-content .infobox,
.skin-citizen .mw-body-content .portable-infobox {
float: none;
width: 100%;
margin: 0 0 16px 0;
position: static;
}
/* 移动端关系卡片两列 */
.skin-citizen .relation-card-grid {
grid-template-columns: repeat(2, 1fr);
}
/* 移动端表格横向滚动 */
.skin-citizen .mw-body-content .wikitable {
display: block;
overflow-x: auto;
}
}
@media screen and (max-width: 600px) {
/* 小屏关系卡片单列 */
.skin-citizen .relation-card-grid {
grid-template-columns: 1fr;
}
/* 小屏 Navbox 紧凑化 */
.skin-citizen .mw-body-content .navbox-group {
display: block;
width: 100%;
border-right: none;
border-bottom: 1px solid var(--color-surface-3);
}
}
/* ════════════════════════════════════════════════════════════════
第25部分：打印样式
════════════════════════════════════════════════════════════════ */
@media print {
.mw-page-container {
background-image: none !important;
}
.navbox,
.spoiler-box,
.battle-stats {
display: none;
}
.infobox,
.portable-infobox {
float: none;
width: 100%;
position: static;
}
}
/* ════════════════════════════════════════════════════════════════
第26部分：毛玻璃效果微调
文档来源：Recipes > Turn off frosted glass
保留毛玻璃但降低模糊度，提升性能
════════════════════════════════════════════════════════════════ */
:root {
--backdrop-filter-frosted-glass: blur(10px) saturate(120%);
}
/* ══════════════════════════ 结束 ══════════════════════════════ */