MediaWiki:Common.css：修订间差异

2025年6月11日 (三) 23:20的版本 查看源代码 OctoberSama​（留言 | 贡献） 小 ←上一编辑		2025年6月15日 (日) 00:10的最新版本 查看源代码 棍牧典​（留言 | 贡献）
第1行：		第1行：
	/* =========================================================		/* =========================================================
	* @font-face – 字体声明		* CSS 变量定义（主题无关设计）
	* ======================================================= */		* ======================================================= */
			:root {
			/* 滚动条颜色 */
			--otto-scrollbar-thumb: rgba(0,0,0,0.2);
			--otto-scrollbar-track: transparent;
			/* 导航框配色 */
			--otto-navbox-title-bg: #a5e4a5;
			--otto-navbox-subtitle-bg: #c0ecc0;
			--otto-navbox-subgroup-bg: #e6f6e6;
			--otto-navbox-even-bg: #f5fcf5;
			--otto-navbox-odd-bg: #fdfdfd;
			/* 通用间距 */
			--otto-spacing-xs: 4px;
			--otto-spacing-sm: 6px;
			--otto-spacing-md: 10px;
			--otto-spacing-lg: 1rem;
			}
	/* FOT-Rodin Pro（站点 Logo / 标题）*/		/* =========================================================
			* 字体声明
			* ======================================================= */
	@font-face {		@font-face {
	font-family: "FOT-Rodin Pro";		font-family: "FOT-Rodin Pro";
第12行：		第32行：
	}		}
	/* 霞鹜文楷 – 正文字体（中文）*/
	@font-face {		@font-face {
	font-family: "WenKai";		font-family: "WenKai";
第21行：		第40行：
	}		}
	/* Merriweather – 英文衬线 */
	@font-face {		@font-face {
	font-family: "Merriweather";		font-family: "Merriweather";
第30行：		第48行：
	}		}
	/* JetBrains Mono – 等宽英文 */
	@font-face {		@font-face {
	font-family: "JetBrains Mono";		font-family: "JetBrains Mono";
第39行：		第56行：
	}		}
	/* 霞鹜文楷 Mono – 等宽中文 */
	@font-face {		@font-face {
	font-family: "WenKai Mono";		font-family: "WenKai Mono";
第47行：		第63行：
	font-display: swap;		font-display: swap;
	}		}
	/* 全局细线滚动条样式 */
			/* =========================================================
			* 全局滚动条样式
			* ======================================================= */
	::-webkit-scrollbar {		::-webkit-scrollbar {
	width: 6px;     /* 纵向滚动条宽度 */		width: var(--otto-spacing-sm);
	height: 6px;     /* 横向滚动条高度 */		height: var(--otto-spacing-sm);
	}		}
	::-webkit-scrollbar-thumb {		::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.2); /* 滚动条滑块颜色 */		background: var(--otto-scrollbar-thumb);
	border-radius: 3px;         /* 滚动条滑块圆角 */		border-radius: calc(var(--otto-spacing-sm) / 2);
	}		}
	::-webkit-scrollbar-track {		::-webkit-scrollbar-track {
	background: transparent;     /* 滚动条轨道背景 */		background: var(--otto-scrollbar-track);
	}		}
	/* Firefox 支持 */
	* {		* {
	scrollbar-width: thin;             /* 滚动条宽度 */		scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.2) transparent;/* 滚动条颜色 */		scrollbar-color: var(--otto-scrollbar-thumb) var(--otto-scrollbar-track);
	}		}
	/* =========================================================		/* =========================================================
	* 编辑器（WikiEditor / CodeMirror）		* 编辑器样式
	* ======================================================= */		* ======================================================= */
	.wikiEditor-ui {		.wikiEditor-ui {
	font-family: "WenKai Mono", "JetBrains Mono", monospace !important;		font-family: "WenKai Mono", "JetBrains Mono", monospace !important;
	font-size: 14px;		font-size: 14px;
	line-height: 1.6;		line-height: 1.6;
	color: var(--color-base,#1f1f1f);		color: var(--color-base, #1f1f1f);
	background-color: var(--background-color-neutral-subtle,#f9f9f9);		background-color: var(--background-color-neutral-subtle, #f9f9f9);
	border: 1px solid #ccc;		border: 1px solid #ccc;
	padding: 10px;		padding: var(--otto-spacing-md);
	border-radius: 6px;		border-radius: var(--otto-spacing-sm);
	overflow: auto;		overflow: auto;
	tab-size: 4;		tab-size: 4;
第87行：		第105行：
	/* =========================================================		/* =========================================================
	* <pre> / <code> / .mw-code		* 代码块样式
	* ======================================================= */		* ======================================================= */
	pre,		pre,
	code,		code,
第95行：		第112行：
	font-family: "JetBrains Mono", monospace;		font-family: "JetBrains Mono", monospace;
	font-size: 0.95em;		font-size: 0.95em;
	background-color: var(--background-color-neutral-subtle,#f9f9f9);		background-color: var(--background-color-neutral-subtle, #f9f9f9);
	color: var(--color-emphasized,#222);		color: var(--color-emphasized, #222);
	padding: 4px 6px;		padding: var(--otto-spacing-xs) var(--otto-spacing-sm);
	border-radius: 4px;		border-radius: var(--otto-spacing-xs);
	overflow-x: auto;		overflow-x: auto;
	}		}
第105行：		第122行：
	* 加载动画		* 加载动画
	* ======================================================= */		* ======================================================= */
	#loadingIndicator img {		#loadingIndicator img {
	animation: fadePulse 1s ease-in-out infinite;		animation: fadePulse 1s ease-in-out infinite;
第112行：		第128行：
	@keyframes fadePulse {		@keyframes fadePulse {
	0%   { opacity: 1; }		0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }		50% { opacity: 0.5; }
	100% { opacity: 1; }
	}		}
	/* ======================================================= */
			/* =========================================================
			* 扩展组件样式
			* ======================================================= */
	/* 社交扩展 */		/* 社交扩展 */
	.visualClear {		.visualClear {
	clear:both;		clear: both;
	}		}
	/* 子页面扩展 */		/* 子页面扩展 */
	.subpageNavigation {		.subpageNavigation {
	background-color: color-mix(in srgb, var(--color-surface-2) 60%, transparent) !important;		background-color: color-mix(in srgb, var(--color-surface-2) 60%, transparent) !important;
	}		}
			/* 跨wiki链接 */
	/* 设置非本站的跨 Wiki 链接颜色 */		a.extiw:not([href*="wiki.ottohub.cn"]) {
	a.extiw:not([href*="wiki.ottohub.cn"]),		color: #00AF89 !important;
	a.extiw:not([href*="wiki.ottohub.cn"]):visited {
	color: #00AF89;
	}		}
			a.extiw:not([href*="wiki.ottohub.cn"]):hover {
	/* 设置非本站的跨 Wiki 链接在悬停时的颜色 */		color: #00D7A8 !important;
	a.extiw:not([href*="wiki.ottohub.cn"]):hover,
	a.extiw:not([href*="wiki.ottohub.cn"]):hover:visited {
	color: #00D7A8;
	}		}
	/* 黑幕相关 - 非 Citizen 皮肤适用 */		/* 黑幕效果 */
	body:not(.skin-citizen) .heimu,		body:not(.skin-citizen) .heimu,
	body:not(.skin-citizen) .heimu rt {		body:not(.skin-citizen) .heimu rt {
	background-color: #252525;		background-color: #252525;
			transition: color 0.13s linear;
			color: #252525;
			text-shadow: none;
	}		}
	body:not(.skin-citizen) .heimu,
	body:not(.skin-citizen) .heimu a,		body:not(.skin-citizen) .heimu a,
	body:not(.skin-citizen) a .heimu,		body:not(.skin-citizen) a .heimu,
第153行：		第167行：
	body:not(.skin-citizen) span.heimu a.new,		body:not(.skin-citizen) span.heimu a.new,
	body:not(.skin-citizen) span.heimu a.external,		body:not(.skin-citizen) span.heimu a.external,
	body:not(.skin-citizen) span.heimu a.external:visited,
	body:not(.skin-citizen) span.heimu a.extiw,		body:not(.skin-citizen) span.heimu a.extiw,
	body:not(.skin-citizen) span.heimu a.extiw:visited,
	body:not(.skin-citizen) span.heimu a.mw-disambig,		body:not(.skin-citizen) span.heimu a.mw-disambig,
	body:not(.skin-citizen) span.heimu a.mw-redirect {		body:not(.skin-citizen) span.heimu a.mw-redirect {
	transition: color 0.13s linear;		color: #252525;
	color: #252525;		text-shadow: none;
	text-shadow: none;
	}		}
	body:not(.skin-citizen) span.heimu:hover,		body:not(.skin-citizen) span.heimu:hover,
	body:not(.skin-citizen) span.heimu:active {		body:not(.skin-citizen) span.heimu:active {
	color: white;		color: white;
	}		}
	body:not(.skin-citizen) span.heimu:hover a,		body:not(.skin-citizen) span.heimu:hover a,
	body:not(.skin-citizen) a:hover span.heimu {		body:not(.skin-citizen) a:hover span.heimu {
	color: lightblue;		color: lightblue;
	}		}
	body:not(.skin-citizen) span.heimu:hover a:visited,		body:not(.skin-citizen) span.heimu:hover a:visited,
	body:not(.skin-citizen) a:visited:hover span.heimu {		body:not(.skin-citizen) a:visited:hover span.heimu {
	color: #C5CAE9;		color: #C5CAE9;
	}		}
	body:not(.skin-citizen) span.heimu:hover a.new,		body:not(.skin-citizen) span.heimu:hover a.new,
	body:not(.skin-citizen) a.new:hover span.heimu {		body:not(.skin-citizen) a.new:hover span.heimu {
	color: #FCC;		color: #FCC;
	}		}
	body:not(.skin-citizen) span.heimu a.new:hover:visited,		/* =========================================================
	body:not(.skin-citizen) a.new:hover:visited span.heimu {		* 导航盒子 (Navbox)
	color: #EF9A9A;		* ======================================================= */
			table.navbox {
			border: 1px solid #aaa;
			clear: both;
			margin: auto;
			padding: 1px;
			text-align: center;
			width: 100%;
	}		}
	body:not(.skin-citizen) span.heimu:hover a.extiw:visited,		table.navbox + table.navbox {
	body:not(.skin-citizen) a.extiw:visited:hover span.heimu {		margin-top: -1px;
	color: #D1C4E9;
	}
	/* navbox */
	table.navbox{
	border:1px solid #aaa;
	clear:both;
	margin:auto;
	padding:1px;
	text-align:center;
	width:100%;
	}		}
	table.navbox + table.navbox{		table.navbox th,
	margin-top:-1px;		table.navbox .navbox-title,
			table.navbox .navbox-abovebelow {
			padding: 0 1em;
			text-align: center;
	}		}
	.navbox-title,		table.navbox .navbox-group {
	.navbox-abovebelow,		font-weight: 700;
	table.navbox th{		white-space: nowrap;
	padding-left:1em;
	padding-right:1em;
	text-align:center;
	}		}
	.navbox-group{		.navbox, .navbox-subgroup {
	font-weight:700;		background: var(--otto-navbox-odd-bg);
	white-space:nowrap;
	}		}
	.navbox,		.navbox-title, table.navbox th {
	.navbox-subgroup{		background: var(--otto-navbox-title-bg);
	background:none repeat scroll 0 0 var(--theme-card-background-color, #fdfdfd);
	}		}
	.navbox-list{		.navbox-abovebelow,
	border-color:#fdfdfd;		.navbox-group,
	}		.navbox-subgroup .navbox-title {
			background: var(--otto-navbox-subtitle-bg);
	.navbox-title,
	table.navbox th{
	background:none repeat scroll 0 0 #a5e4a5;
	}
	.navbox-abovebelow,
	.navbox-group,
	.navbox-subgroup .navbox-title{
	background:none repeat scroll 0 0 #c0ecc0;
	}		}
	.navbox-subgroup .navbox-group,		.navbox-subgroup .navbox-group,
	.navbox-subgroup .navbox-abovebelow{		.navbox-subgroup .navbox-abovebelow {
	background:none repeat scroll 0 0 #e6f6e6;		background: var(--otto-navbox-subgroup-bg);
	}		}
	.navbox-even{		.navbox-even {
	background:none repeat scroll 0 0 #f5fcf5;		background: var(--otto-navbox-even-bg);
	}		}
	.navbox-odd{		/* =========================================================
	background:none repeat scroll 0 0 #fdfdfd;		* 信息盒子 (Infobox)
	}		* ======================================================= */
	/* infobox */		.infoBox, .infoTop {
	.infoBox{		margin: 0 auto;
	margin:0 auto;		width: 80%;
	width:80%;		box-sizing: border-box;
	box-sizing:border-box;
	}		}
	.infoBoxTitle{		.infoBox-Title, .infoTop-Title {
	margin:3px auto;		margin: 3px auto;
	padding:0;		padding: 0;
	text-align:center;		text-align: center;
	font-weight:700;		font-weight: 700;
	}		}
	.infoBoxIcon{		.infoBox-Icon, .infoTop-Icon {
	display:table-cell;		display: table-cell;
	padding:2px 0 2px 0.5em;		padding: 2px 0 2px 0.5em;
	vertical-align:middle;		vertical-align: middle;
	}		}
	.infoBoxText{		.infoBox-Text, .infoTop-Text {
	display:table-cell;		display: table-cell;
	padding:0.25em 0.5em 0.25em 1.3em;		padding: 0.25em 0.5em 0.25em 1.3em;
	width:100%;		width: 100%;
	vertical-align:middle;		vertical-align: middle;
	}		}
	.infoBoxContent{		.infoBox-Below, .infoTop-Below {
	border:1px solid var(--color-surface-1);		margin: 0 auto;
	border-left-width:0;		padding: 0;
	background:var(--color-surface-0);		text-align: center;
	}		}
	.infoBoxBelow{		.infoBoxContent {
	margin:0 auto;		border: 1px solid var(--color-surface-1);
	padding:0;		border-left-width: 0;
	text-align:center;		background: var(--color-surface-0);
	}		}
	/* 设备差异显示 */		.infoTopContent {
	@media screen and (max-width: 1119px) {		border: 1px solid var(--color-surface-0);
	/* 手机端显示 */		border-left-width: 0;
	.only-desktop { display: none !important; }		background: var(--color-surface-2);
	}		}
	@media screen and (min-width: 1120px) {		/* =========================================================
	/* 桌面端显示 */		* Infobox2 样式
	.only-mobile { display: none !important; }		* ======================================================= */
	}
	/* Infobox2 基础结构 */
	table.infobox2 {		table.infobox2 {
	font-size: 89%;		font-size: 89%;
第314行：		第307行：
	}		}
	/* 顶部标题栏 */		table.infobox2 .infobox2-header {
	.infobox2-header {		background-color: var(--color-surface-4);
	background-color: var(--color-surface-4);		color: var(--color-base);
	color: var(--color-base);		margin: 3px auto;
	margin:3px auto;		padding: 0;
	padding:0;		text-align: center;
	text-align:center;		font-weight: 700;
	font-weight:700;
	}		}
	/* 横栏标题（如-=） */		table.infobox2 .infobox2-subtitle {
	.infobox2-subtitle {		background-color: var(--color-surface-3);
	background-color: var(--color-surface-3);		color: var(--color-base);
	color: var(--color-base);
	}		}
	/* 信息栏普通项 */		table.infobox2 .infobox2-row {
	.infobox2-row {		width: 80px;
	width: 80px;		background-color: var(--color-surface-2);
	background-color: var(--color-surface-2);		color: var(--color-base);
	color: var(--color-base);
	}		}
	/* infobox2结束 */
	/* infobox系移动设备全宽 */		/* =========================================================
	@media (max-width: 576px) {		* 响应式设计
	.mw-parser-output > * {		* ======================================================= */
	float: unset !important;		/* 设备差异显示 */
	}		@media (max-width: 1119px) {
	.infotemplatebox,		.only-desktop {
	table.infobox,		display: none !important;
	table.infobox2,		}
	table.infoboxSpecial,
	.infoTop {
	width: 100% !important;
	float: unset !important;
	margin: 1rem 0 !important;
	}
	}
	/* infoTop */
	.infoTop{
	margin:0 auto;
	width:80%;
	box-sizing:border-box;
	}		}
	.infoTopTitle{		@media (min-width: 1120px) {
	margin:3px auto;		.only-mobile {
	padding:0;		display: none !important;
	text-align:center;		}
	font-weight:700;
	}		}
	.infoTopIcon{		/* 移动端信息盒子适配 */
	display:table-cell;		@media (max-width: 576px) {
	padding:2px 0 2px 0.5em;		.mw-parser-output > * {
	vertical-align:middle;		float: unset !important;
	}		}
	.infoTopText{		.infotemplatebox,
	display:table-cell;		table.infobox,
	padding:0.25em 0.5em 0.25em 1.3em;		table.infobox2,
	width:100%;		table.infoboxSpecial,
	vertical-align:middle;		.infoTop {
	}		width: 100% !important;
			float: unset !important;
	.infoTopContent{		margin: var(--otto-spacing-lg) 0 !important;
	border:1px solid var(--color-surface-0);		}
	border-left-width:0;
	background:var(--color-surface-2);
	}
	.infoTopBelow{
	margin:0 auto;
	padding:0;
	text-align:center;
	}		}

2025年6月15日 (日) 00:10的最新版本

/* =========================================================
 * CSS 变量定义（主题无关设计）
 * ======================================================= */
:root {
  /* 滚动条颜色 */
  --otto-scrollbar-thumb: rgba(0,0,0,0.2);
  --otto-scrollbar-track: transparent;
  
  /* 导航框配色 */
  --otto-navbox-title-bg: #a5e4a5;
  --otto-navbox-subtitle-bg: #c0ecc0;
  --otto-navbox-subgroup-bg: #e6f6e6;
  --otto-navbox-even-bg: #f5fcf5;
  --otto-navbox-odd-bg: #fdfdfd;
  
  /* 通用间距 */
  --otto-spacing-xs: 4px;
  --otto-spacing-sm: 6px;
  --otto-spacing-md: 10px;
  --otto-spacing-lg: 1rem;
}

/* =========================================================
 * 字体声明
 * ======================================================= */
@font-face {
  font-family: "FOT-Rodin Pro";
  src: url("/resources/assets/FOT-Rodin Pro DB.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "WenKai";
  src: url("/resources/assets/LXGWWenKai-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/resources/assets/Merriweather-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/resources/assets/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "WenKai Mono";
  src: url("/resources/assets/LXGWWenKaiMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
 * 全局滚动条样式
 * ======================================================= */
::-webkit-scrollbar {
  width: var(--otto-spacing-sm);
  height: var(--otto-spacing-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--otto-scrollbar-thumb);
  border-radius: calc(var(--otto-spacing-sm) / 2);
}

::-webkit-scrollbar-track {
  background: var(--otto-scrollbar-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--otto-scrollbar-thumb) var(--otto-scrollbar-track);
}

/* =========================================================
 * 编辑器样式
 * ======================================================= */
.wikiEditor-ui {
  font-family: "WenKai Mono", "JetBrains Mono", monospace !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-base, #1f1f1f);
  background-color: var(--background-color-neutral-subtle, #f9f9f9);
  border: 1px solid #ccc;
  padding: var(--otto-spacing-md);
  border-radius: var(--otto-spacing-sm);
  overflow: auto;
  tab-size: 4;
  white-space: pre;
  font-variant-ligatures: none;
}

/* =========================================================
 * 代码块样式
 * ======================================================= */
pre,
code,
.mw-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95em;
  background-color: var(--background-color-neutral-subtle, #f9f9f9);
  color: var(--color-emphasized, #222);
  padding: var(--otto-spacing-xs) var(--otto-spacing-sm);
  border-radius: var(--otto-spacing-xs);
  overflow-x: auto;
}

/* =========================================================
 * 加载动画
 * ======================================================= */
#loadingIndicator img {
  animation: fadePulse 1s ease-in-out infinite;
  will-change: opacity;
}

@keyframes fadePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =========================================================
 * 扩展组件样式
 * ======================================================= */
/* 社交扩展 */
.visualClear {
  clear: both;
}

/* 子页面扩展 */
.subpageNavigation {
  background-color: color-mix(in srgb, var(--color-surface-2) 60%, transparent) !important;
}

/* 跨wiki链接 */
a.extiw:not([href*="wiki.ottohub.cn"]) {
  color: #00AF89 !important;
}
a.extiw:not([href*="wiki.ottohub.cn"]):hover {
  color: #00D7A8 !important;
}

/* 黑幕效果 */
body:not(.skin-citizen) .heimu,
body:not(.skin-citizen) .heimu rt {
  background-color: #252525;
  transition: color 0.13s linear;
  color: #252525;
  text-shadow: none;
}

body:not(.skin-citizen) .heimu a,
body:not(.skin-citizen) a .heimu,
body:not(.skin-citizen) a.new .heimu,
body:not(.skin-citizen) span.heimu a.new,
body:not(.skin-citizen) span.heimu a.external,
body:not(.skin-citizen) span.heimu a.extiw,
body:not(.skin-citizen) span.heimu a.mw-disambig,
body:not(.skin-citizen) span.heimu a.mw-redirect {
  color: #252525;
  text-shadow: none;
}

body:not(.skin-citizen) span.heimu:hover,
body:not(.skin-citizen) span.heimu:active {
  color: white;
}

body:not(.skin-citizen) span.heimu:hover a,
body:not(.skin-citizen) a:hover span.heimu {
  color: lightblue;
}

body:not(.skin-citizen) span.heimu:hover a:visited,
body:not(.skin-citizen) a:visited:hover span.heimu {
  color: #C5CAE9;
}

body:not(.skin-citizen) span.heimu:hover a.new,
body:not(.skin-citizen) a.new:hover span.heimu {
  color: #FCC;
}

/* =========================================================
 * 导航盒子 (Navbox)
 * ======================================================= */
table.navbox {
  border: 1px solid #aaa;
  clear: both;
  margin: auto;
  padding: 1px;
  text-align: center;
  width: 100%;
}

table.navbox + table.navbox {
  margin-top: -1px;
}

table.navbox th, 
table.navbox .navbox-title, 
table.navbox .navbox-abovebelow {
  padding: 0 1em;
  text-align: center;
}

table.navbox .navbox-group {
  font-weight: 700;
  white-space: nowrap;
}

.navbox, .navbox-subgroup {
  background: var(--otto-navbox-odd-bg);
}

.navbox-title, table.navbox th {
  background: var(--otto-navbox-title-bg);
}

.navbox-abovebelow, 
.navbox-group, 
.navbox-subgroup .navbox-title {
  background: var(--otto-navbox-subtitle-bg);
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
  background: var(--otto-navbox-subgroup-bg);
}

.navbox-even {
  background: var(--otto-navbox-even-bg);
}

/* =========================================================
 * 信息盒子 (Infobox)
 * ======================================================= */
.infoBox, .infoTop {
  margin: 0 auto;
  width: 80%;
  box-sizing: border-box;
}

.infoBox-Title, .infoTop-Title {
  margin: 3px auto;
  padding: 0;
  text-align: center;
  font-weight: 700;
}

.infoBox-Icon, .infoTop-Icon {
  display: table-cell;
  padding: 2px 0 2px 0.5em;
  vertical-align: middle;
}

.infoBox-Text, .infoTop-Text {
  display: table-cell;
  padding: 0.25em 0.5em 0.25em 1.3em;
  width: 100%;
  vertical-align: middle;
}

.infoBox-Below, .infoTop-Below {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.infoBoxContent {
  border: 1px solid var(--color-surface-1);
  border-left-width: 0;
  background: var(--color-surface-0);
}

.infoTopContent {
  border: 1px solid var(--color-surface-0);
  border-left-width: 0;
  background: var(--color-surface-2);
}

/* =========================================================
 * Infobox2 样式
 * ======================================================= */
table.infobox2 {
  font-size: 89%;
  text-align: center;
  width: 280px;
  max-width: 100%;
  float: right;
  background-color: var(--color-surface-1);
  color: var(--color-base);
  border-collapse: separate;
  border-spacing: 2px;
}

table.infobox2 .infobox2-header {
  background-color: var(--color-surface-4);
  color: var(--color-base);
  margin: 3px auto;
  padding: 0;
  text-align: center;
  font-weight: 700;
}

table.infobox2 .infobox2-subtitle {
  background-color: var(--color-surface-3);
  color: var(--color-base);
}

table.infobox2 .infobox2-row {
  width: 80px;
  background-color: var(--color-surface-2);
  color: var(--color-base);
}

/* =========================================================
 * 响应式设计
 * ======================================================= */
/* 设备差异显示 */
@media (max-width: 1119px) {
  .only-desktop { 
    display: none !important; 
  } 
}

@media (min-width: 1120px) {
  .only-mobile { 
    display: none !important; 
  } 
}

/* 移动端信息盒子适配 */
@media (max-width: 576px) {
  .mw-parser-output > * {
    float: unset !important;
  }
  
  .infotemplatebox,
  table.infobox,
  table.infobox2,
  table.infoboxSpecial,
  .infoTop {
    width: 100% !important;
    float: unset !important;
    margin: var(--otto-spacing-lg) 0 !important;
  }
}