MediaWiki:Common.css/src/template/infobox/portable infobox.scss

/********* Portable infobox theme *********/

/* Extension:PortableInfobox */

/* Portable infobox templates:
 * [[Template:Buff infobox]]
 * [[Template:Patch infobox]]
 * [[Template:Re-Logic staff infobox]]
 * [[Template:Software infobox]]
 * [[Template:User infobox]]
 */

.portable-infobox {
	$pi-border-color: var(--theme-box-border-color);
	border: 1px solid $pi-border-color;
	border-radius: 8px;
	padding: 6px;
	font-size: 12px;
	background-color: var(--theme-box-background);
	line-height: 1.5;
	float: right;
	margin: 0.5em 0 0.5em 1em;
	width: 21em;
	box-sizing: border-box;

	.pi-data,
	.pi-group {
		border: none;
	}

	.pi-title,
	.pi-header,
	.pi-navigation {
		color: var(--modetabs-text-color);
		text-align: center;
	}

	.pi-title,
	.pi-header {
		background: var(--modetabs-background);
		border: 1px solid;
		border-color: var(--theme-box-border-color-inner);
		border-radius: var(--theme-box-border-radius-inner);
	}

	.pi-title {
		font-weight: bold;
		font-size: 15px;
		padding: 6px 3px;
		line-height: 1.2;
	}

	.pi-title + .pi-group,
	.pi-group.pi-collapse-closed + .pi-group {
		margin-top: 4px;
	}

	.pi-header {
		padding: 2px 0;
	}

	.pi-secondary-font {
		font-size: 12px;
		line-height: 1.5;
	}

	.pi-navigation {
		background-color: transparent;
		border-top: 1px solid $pi-border-color;
		font-size: 11.5px;
	}

	.pi-data.pi-item .pi-data-label {
		flex-basis: 120px;
		text-align: right;
		hyphens: unset; /* overwriting the default "hyphens:auto" */
	}

	.pi-group.pi-collapse .pi-header {
		cursor: pointer;
	}

	.pi-image {
		margin: 6px;

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

	h2::after {
		/* Hide the line that is displayed below normal h2 elements by default */
		display: none;
	}
}

@media screen and (min-width: 720px) {
	.client-js .pi-collapse .pi-header:first-child {
		padding-right: 0;
	}
}