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。
/* ================================================================
国漫TV · MediaWiki:Citizen.css v2
方案：幽紫幻境 + D竖脉经络 + A导航 + A页脚
适配：Citizen v3.16.1 · MediaWiki 1.45+
版本：v2 — 新增三栏留白 / 段落卡片 / 导航重排 / 四列页脚
写入位置：后台编辑 MediaWiki:Citizen.css（完全替换旧版）
================================================================ */
/* ╔══════════════════════════════════════════════════════════════╗
║ 第1部分：全局色彩系统 ║
╚══════════════════════════════════════════════════════════════╝ */
:root {
--color-progressive-oklch__h: 301;
--color-progressive-oklch__c: 0.168;
--color-progressive-oklch__l: 48%;
--transform-image-hover: none;
--backdrop-filter-frosted-glass: blur(10px) saturate(120%);
}
/* ── 浅色模式 ── */
.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;
}
}
/* ── 深色模式 ── */
.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;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第2部分：D竖脉经络背景线条 ║
╚══════════════════════════════════════════════════════════════╝ */
.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;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第3部分：页面宽度 — 加宽以容纳三栏留白 ║
╚══════════════════════════════════════════════════════════════╝ */
:root.citizen-feature-custom-width-clientpref-standard {
--width-layout: 1240px;
}
:root.citizen-feature-custom-width-clientpref-wide {
--width-layout: 1680px;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第4部分：顶部导航栏 — 方案A 单行通栏 ║
║ Citizen header 在 top 模式下的样式覆盖 ║
╚══════════════════════════════════════════════════════════════╝ */
/* 导航栏整体背景 */
.citizen-header {
background: linear-gradient(135deg, #1A1033 0%, #2D1B69 100%);
border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}
/* Logo区域 */
.citizen-header__logo {
border-radius: 8px;
}
/* 导航栏按钮（搜索/用户/菜单等） */
.citizen-header__button {
border-radius: 8px;
}
.citizen-header__button:hover {
background-color: rgba(124, 58, 237, 0.15);
}
/* 搜索触发区域 */
.citizen-search-trigger {
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.citizen-search-trigger:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(124, 58, 237, 0.3);
}
/* 侧边抽屉（汉堡菜单展开后）导航链接 */
.citizen-drawer {
border-right: 1px solid var(--color-surface-3);
}
.citizen-drawer .mw-portal .vector-menu-content-list a {
border-radius: 6px;
padding: 6px 12px;
}
.citizen-drawer .mw-portal .vector-menu-content-list a:hover {
background: var(--color-surface-3);
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第5部分：页面标题与章节标题 ║
╚══════════════════════════════════════════════════════════════╝ */
.skin-citizen .firstHeading {
font-weight: 900;
letter-spacing: 1px;
}
.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);
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第6部分：Infobox — 左侧悬浮独立卡片 ║
║ PC端：固定宽度 + sticky + 圆角卡片 + 与内容区间距 ║
║ 移动端：自动回流全宽 ║
╚══════════════════════════════════════════════════════════════╝ */
/* --- 传统 table.infobox --- */
.skin-citizen .mw-body-content .infobox {
border: 1px solid var(--color-surface-3);
border-radius: 14px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media screen and (min-width: 1100px) {
.skin-citizen .mw-body-content .infobox {
float: left;
clear: left;
width: 260px;
margin: 0 24px 20px 0;
position: sticky;
top: 80px;
z-index: 2;
}
}
.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.1rem;
letter-spacing: 2px;
padding: 14px 16px;
text-align: center;
border: none;
}
.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;
}
.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: 35%;
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;
}
.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.85rem;
padding: 8px 12px;
text-align: center;
letter-spacing: 1px;
}
/* --- PortableInfobox --- */
.skin-citizen .mw-body-content .portable-infobox {
border: 1px solid var(--color-surface-3);
border-radius: 14px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media screen and (min-width: 1100px) {
.skin-citizen .mw-body-content .portable-infobox {
float: left;
clear: left;
width: 260px;
margin: 0 24px 20px 0;
position: sticky;
top: 80px;
z-index: 2;
}
}
.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.1rem;
letter-spacing: 2px;
padding: 14px 16px;
text-align: center;
}
.skin-citizen .mw-body-content .portable-infobox .pi-image img {
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;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第7部分：目录（TOC）— 右侧独立卡片 ║
╚══════════════════════════════════════════════════════════════╝ */
/* TOC 容器卡片化 */
.citizen-toc {
background: #FFFFFF;
border-radius: 14px;
border: 1px solid var(--color-surface-3);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 16px 14px;
}
.skin-theme-clientpref-night .citizen-toc {
background: var(--color-surface-1);
}
.skin-citizen .citizen-toc__top {
font-weight: 800;
letter-spacing: 1px;
font-size: 0.8rem;
text-transform: uppercase;
padding-bottom: 8px;
margin-bottom: 6px;
border-bottom: 1px solid var(--color-surface-3);
}
.skin-citizen .citizen-toc__link--active {
color: var(--color-progressive);
font-weight: 700;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第8部分：内容区段落独立白色卡片（修正版） ║
║ MW 1.45 用 <section data-mw-section-id> 包裹标题+内容 ║
║ 直接对 section 做卡片 = 标题和内容一起包在白色卡片里 ║
╚══════════════════════════════════════════════════════════════╝ */
/* 每个顶级 section（h2级别章节）= 一张独立卡片 */
.skin-citizen .mw-body-content .mw-parser-output > section {
background: #FFFFFF;
border: 1px solid var(--color-surface-3);
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
/* 深色模式 */
.skin-theme-clientpref-night .skin-citizen .mw-body-content .mw-parser-output > section {
background: var(--color-surface-1);
}
/* 嵌套的子section（h3/h4级别）不重复加卡片，保持透明 */
.skin-citizen .mw-body-content .mw-parser-output > section > section {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 8px;
box-shadow: none;
}
/* 卡片内章节标题间距微调 */
.skin-citizen .mw-body-content .mw-parser-output > section > .mw-heading {
margin-top: 0;
padding-top: 0;
}
/* Infobox 所在 section 不加双层白背景 */
.skin-citizen .mw-body-content .mw-parser-output > section > .infobox,
.skin-citizen .mw-body-content .mw-parser-output > section > .portable-infobox {
margin-top: 0;
}
/* Navbox 所在 section 透明（Navbox 自身已有样式） */
.skin-citizen .mw-body-content .mw-parser-output > section:has(.navbox) {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第9部分：表格样式 ║
╚══════════════════════════════════════════════════════════════╝ */
.skin-citizen .mw-body-content .wikitable {
border: 1px solid var(--color-surface-3);
border-radius: 12px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.skin-theme-clientpref-night .skin-citizen .mw-body-content .wikitable {
background: var(--color-surface-1);
}
.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: 5px;
border-radius: 3px;
background: var(--color-surface-3);
overflow: hidden;
margin-top: 4px;
}
.skin-citizen .mw-body-content .realm-progress-bar {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #7C3AED, #F59E0B);
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第10部分：Navbox 底部导航 ║
╚══════════════════════════════════════════════════════════════╝ */
.skin-citizen .mw-body-content .navbox {
border: 1px solid var(--color-surface-3);
border-radius: 14px;
overflow: hidden;
margin: 24px 0;
background: #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.skin-theme-clientpref-night .skin-citizen .mw-body-content .navbox {
background: var(--color-surface-1);
}
.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); }
/* ╔══════════════════════════════════════════════════════════════╗
║ 第11部分：分类标签 ║
╚══════════════════════════════════════════════════════════════╝ */
.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);
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第12部分：链接样式 ║
╚══════════════════════════════════════════════════════════════╝ */
.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; }
/* ╔══════════════════════════════════════════════════════════════╗
║ 第13部分：引用 / 经典台词 ║
╚══════════════════════════════════════════════════════════════╝ */
.skin-citizen .mw-body-content blockquote {
border-left: 4px solid var(--color-progressive);
background: var(--color-surface-2);
border-radius: 0 10px 10px 0;
padding: 14px 20px;
margin: 12px 0;
font-style: italic;
color: var(--color-base);
}
.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;
}
.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;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第14部分：Tabber / Mermaid / 图片 ║
╚══════════════════════════════════════════════════════════════╝ */
.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: #FFFFFF;
border: 1px solid var(--color-surface-3);
border-top: none;
border-radius: 0 0 10px 10px;
padding: 16px;
}
.skin-citizen .mw-body-content .mermaid {
background: #FFFFFF;
border: 1px solid var(--color-surface-3);
border-radius: 12px;
padding: 16px;
text-align: center;
overflow-x: auto;
}
.skin-citizen .mw-body-content .thumb .thumbinner {
border: 1px solid var(--color-surface-3);
border-radius: 10px;
overflow: hidden;
background: #FFFFFF;
}
.skin-citizen .mw-body-content .thumbcaption {
font-size: 0.8rem;
color: var(--color-subtle);
padding: 6px 10px;
line-height: 1.4;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第15部分：自定义标签（角色/IP/境界/势力） ║
╚══════════════════════════════════════════════════════════════╝ */
.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;
}
.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;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第16部分：角色关系卡片网格 ║
╚══════════════════════════════════════════════════════════════╝ */
.skin-citizen .relation-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
margin: 12px 0;
}
.skin-citizen .relation-card {
background: var(--color-surface-2);
border: 1px solid var(--color-surface-3);
border-radius: 10px;
padding: 12px 8px;
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: 56px; height: 56px;
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;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第17部分：战绩统计条 / 剧透折叠 ║
╚══════════════════════════════════════════════════════════════╝ */
.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;
}
.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;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第18部分：页脚 — 方案A 四列信息式 ║
║ 覆盖 Citizen 默认 footer 样式 ║
╚══════════════════════════════════════════════════════════════╝ */
/* 页脚整体背景 */
.citizen-footer,
#footer {
background: linear-gradient(135deg, #0F0A1A 0%, #1A1033 100%);
border-top: 2px solid rgba(124, 58, 237, 0.15);
padding: 32px 24px 16px;
}
/* 页脚文字颜色 */
.citizen-footer,
.citizen-footer a,
#footer,
#footer a {
color: rgba(228, 220, 245, 0.5);
}
.citizen-footer a:hover,
#footer a:hover {
color: #C4B5FD;
}
/* 页脚列表横排 */
.citizen-footer ul,
#footer ul {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
.citizen-footer li,
#footer li {
font-size: 0.8rem;
}
/* 页脚信息行 */
.citizen-footer__info,
#footer-info {
font-size: 0.75rem;
color: rgba(228, 220, 245, 0.3);
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
text-align: center;
}
/* 页脚图标 */
.citizen-footer__icons img,
#footer-icons img {
opacity: 0.4;
}
.citizen-footer__icons img:hover,
#footer-icons img:hover {
opacity: 0.7;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第19部分：移动端响应式 ║
╚══════════════════════════════════════════════════════════════╝ */
@media screen and (max-width: 1099px) {
.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(3, 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: repeat(2, 1fr);
}
.skin-citizen .mw-body-content .navbox-group {
display: block;
width: 100%;
border-right: none;
border-bottom: 1px solid var(--color-surface-3);
}
.skin-citizen .mw-body-content .mw-heading + div,
.skin-citizen .mw-body-content .mw-heading + p {
padding: 14px 16px;
}
}
/* ╔══════════════════════════════════════════════════════════════╗
║ 第20部分：打印样式 ║
╚══════════════════════════════════════════════════════════════╝ */
@media print {
.mw-page-container { background-image: none !important; }
.citizen-toc { background: transparent; border: none; box-shadow: none; }
.navbox, .spoiler-box, .battle-stats { display: none; }
.infobox, .portable-infobox { float: none; width: 100%; position: static; }
}
/* ══════════════════════════ 结束 ══════════════════════════════ */