MediaWiki:Infobox.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

.portable-infobox {
	background-color: var(--background-color-base);
	border: 1px solid var(--border-color-base);
	border-radius: 8px;
	font-weight: normal;
	padding: 0.5em;
	width: 22rem;
}

.portable-infobox .pi-header,
.portable-infobox .pi-horizontal-group .pi-header {
	text-align: center;
}

.portable-infobox img {
	height: auto;
	max-width: 100%;
}

.portable-infobox .pi-media {
	margin: 10px 0;
}

.portable-infobox .pi-title {
	background: var(--background-color-progressive);
	border-radius: 5px;
	color: var(--color-inverted-fixed);
	font-family: "Determination Mono", sans-serif;
	font-size: 24px;
	font-smooth: never;
	font-weight: normal;
	letter-spacing: -0.5px;
	line-height: 1.2em;
	margin: 0 0 10px;
	padding: 9px 12px;
	text-align: center;
	-webkit-font-smoothing: none;
}

.portable-infobox .pi-secondary-background {
	background-color: var(--background-color-progressive);
	color: var(--color-inverted-fixed);
	font-size: 14px;
	font-weight: 700;
	padding: 9px;
}

.portable-infobox .pi-navigation {
	background-color: var(--background-color-base);
}

.portable-infobox .pi-section-navigation,
.portable-infobox .pi-media-collection-tabs {
	flex-wrap: nowrap;
	font-size: 16px;
	gap: 10px;
	justify-content: initial;
	overflow-x: auto;
	margin-bottom: 5px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.pi-section-navigation::-webkit-scrollbar,
.pi-media-collection-tabs::-webkit-scrollbar {
	display: none;
}

.pi-section-navigation .pi-section-tab,
.pi-media-collection li.pi-tab-link {
	border: 0;
	border-bottom: 3px solid var(--color-base);
	overflow: visible;
	max-width: 100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: none;
	border-bottom: 3px solid var(--background-color-progressive);
}

.pi-data-label {
	flex-basis: 100px;
}

.pi-image {
	margin: 0.5em auto;
	text-align: center;
}

.portable-infobox .pi-border-color {
	border: none;
}

.pi-data-value {
	margin: auto;
}

.pi-caption {
	text-align: center;
}

.portable-infobox ul {
	list-style-type: none;
	margin: 0;
}

.pi-data[data-source="caption"] .pi-data-value,
.pi-data[data-source="battle"] .pi-data-value,
.pi-data[data-source="shop"] .pi-data-value,
.pi-data[data-source="flavortext"] .pi-data-value,
.pi-data[data-source="usetext"] .pi-data-value {
	font-style: italic;
}

body:not(.page-Lightner):not(.page-Darkner) .portable-infobox:not(.pi-type-chapter) .pi-data[data-source="caption"] .pi-data-value:before,
body:not(.page-Lightner):not(.page-Darkner) .portable-infobox:not(.pi-type-chapter) .pi-data[data-source="caption"] .pi-data-value:after {
	content: "\"";
}

.portable-infobox.pi-type-chapter .pi-data[data-source="caption"] .pi-data-value {
	color: #808080;
	font-size: 1em;
}

.portable-infobox.pi-theme-person div[data-source="links"] ul {
	column-count: 2;
	list-style-type: none;
}

.portable-infobox.pi-theme-person .pi-group:nth-of-type(2) .pi-data-value {
	width: 100%;
}

.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
	border-color: var(--border-color-base);
}

.portable-infobox .pi-horizontal-group {
	text-align: left;
	width: 100%;
}

@media screen and (max-width: 639px) {
	.portable-infobox table.pi-horizontal-group {
		display: table;
	}
}

@media screen and (max-width: 720px) {
	.portable-infobox {
		box-sizing: border-box;
		width: 100%;
	}

	.pi-media-collection-tabs {
		display: none;
	}

	.pi-media-collection {
		display: flex;
		overflow-x: auto;
	}

	.pi-media-collection-tab-content {
		display: block;
		min-width: calc(-1.5rem + 50vw);
	}

	.pi-data {
		--pi-item-spacing: 10px;
		flex-direction: column;
		text-align: left;
	}

	.pi-data .pi-data-label {
		flex-basis: unset;
		font-size: 1em;
	}

	.pi-data .pi-data-value {
		box-sizing: border-box;
		flex-basis: unset;
		margin: 0 10px;
	}

	.portable-infobox ul {
		text-align: left;
	}
}