Template:Infobox/new/styles.css

/* [[Category:在模板命名空间下的CSS页面]] */
/* 外层容器 */
.infobox {
	box-sizing: border-box;
	margin: var(--spacing-50, 0.5em) 0 var(--spacing-100, 1em) var(--spacing-150, 1.5em);
	font-size: var(--text-sm);
	line-height: 1.5;
	border: var(--border-width-base, 1px) solid var(--border-color-base, #a2a9b1);
	border-radius: var(--border-radius-medium, 2px);
	background: var(--background-color-base, #fff);
	color: var(--color-base, #202122);
	word-break: break-all;
	overflow: hidden;
}
.infobox.infobox-float-right {
	float: right;
	clear: right;
}
.infobox.infobox-float-left {
	float: left;
	clear: left;
	margin: var(--spacing-50, 0.5em) var(--spacing-150, 1.5em) var(--spacing-100, 1em) 0;
}
.infobox.infobox-float-none {
	float: none;
	margin: 0.5em auto;
}

/* 标题+图片 */
.infobox-main {
	display: table;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

/* 分段表格 */
.infobox-section {
	display: table;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
	max-width: none;
	table-layout: fixed;
}
.infobox-section tbody {
	width: 100%;
}

/* 标题 */
.infobox-title th {
	padding: var(--spacing-75, 0.75em);
	font-size: var(--text-base);
	font-weight: 600;
	text-align: center;
	background: var(--background-color-progressive, #36c);
	color: var(--color-inverted-fixed, #fff);
}

/* 图片 */
.infobox-image td {
	padding: 0;
	text-align: center;
}

.infobox-img {
	display: block;
	max-width: 100%;
	height: auto;
	border-top: var(--border-width-thick, 2px) solid var(--background-color-base, #fff);
}

.infobox-caption td {
	padding: var(--spacing-25, 0.25em) var(--spacing-50, 0.5em) var(--spacing-50, 0.5em);
	font-size: var(--text-xs);
	color: var(--color-subtle, #54595d);
	text-align: center;
}

/* 横栏 */
.infobox-header th {
	padding: var(--spacing-25, 0.25em) var(--spacing-50, 0.5em);
	text-align: center;
	font-weight: 600;
	background: var(--background-color-interactive, #eaecf0);
	color: var(--color-base, #202122);
	border-top: var(--border-width-thick, 2px) solid var(--background-color-base, #fff);
	transition: background 100ms ease;
	cursor: pointer;
}

.infobox-collapse-icon {
	float: right;
	margin-top: 0.35em;
	width: 12px;
	height: 12px;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='m2.5 15.25 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: contain;
}

/* 折叠渐隐 */
.infobox-section.mw-collapsible {
	transition: opacity 250ms ease;
}
.infobox-section.mw-collapsed {
	display: table !important;
	opacity: 0;
	pointer-events: none;
}

/* 字段 */
.infobox-row td {
	padding: var(--spacing-25, 0.25em) var(--spacing-50, 0.5em);
	border-top: var(--border-width-thick, 2px) solid var(--background-color-base, #fff);
	transition: background 100ms ease;
}

.infobox-label {
	width: 100px;
	min-width: 4em;
	text-align: center;
	font-weight: 600;
	white-space: normal;
	word-break: keep-all;
	background: var(--background-color-interactive-subtle, #f8f9fa);
	color: var(--color-base, #202122);
}

.infobox-data {
	word-break: break-word;
}

/* data 居中 */
.infobox-data-center .infobox-data {
	text-align: center;
}

/* 自由行 */
.infobox-full td {
	padding: var(--spacing-25, 0.25em) var(--spacing-50, 0.5em);
	border-top: var(--border-width-thick, 2px) solid var(--background-color-base, #fff);
	transition: background 100ms ease;
}

/* hover */
.infobox-row:hover td {
	background: var(--background-color-button-quiet--hover, rgba(0,24,73,0.027));
}
.infobox-header:hover th {
	background: var(--background-color-button-quiet--hover, rgba(0,24,73,0.027));
}
.infobox-full:hover td {
	background: var(--background-color-button-quiet--hover, rgba(0,24,73,0.027));
}

/* 响应式 */
.infobox,
.infobox.infobox-float-right,
.infobox.infobox-float-left {
	float: none;
	width: 100%;
	margin: var(--spacing-50, 0.5em) 0;
}

.infobox-label {
	width: 30%;
}

body.main-sm .infobox {
	width: auto;
	max-width: 300px;
}

body.main-sm .infobox.infobox-float-right {
	float: right;
	clear: right;
	margin: var(--spacing-50, 0.5em) 0 var(--spacing-100, 1em) var(--spacing-150, 1.5em);
}

body.main-sm .infobox.infobox-float-left {
	float: left;
	clear: left;
	margin: var(--spacing-50, 0.5em) var(--spacing-150, 1.5em) var(--spacing-100, 1em) 0;
}

body.main-sm .infobox.infobox-float-none {
	float: none;
}

body.main-sm .infobox-label {
	width: 100px;
}