PortableInfobox/resources/PortableInfobox.less

:root {
	--pi-background: #f8f9fa;
	--pi-secondary-background: #eaecf0;
	--pi-border-color: #a2a9b1;
	--pi-item-spacing: 5px 10px;
	--pi-margin: 15px;
	--pi-width: 270px
}

.portable-infobox {
	background: var(--pi-background);
	clear: right;
	float: right;
	font-size: .85em;
	margin: 0 0 var(--pi-margin) var(--pi-margin);
	width: var(--pi-width);

	.pi-border-color {
		border-color: var(--pi-border-color);
	}
	.pi-secondary-background {
		background-color: var(--pi-secondary-background);
	}
	.pi-secondary-font {
		margin: 0;
		padding: 0;
	}
	.pi-item-spacing {
		padding: var(--pi-item-spacing);
	}

	.pi-title {
		border: 0;
		margin: 0;
		font-family: inherit;
		font-size: 1.75em;
		line-height: 1.5;
	}
	.pi-header {
		border: 0;
		margin: 0;
		font-family: inherit;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.3;
	}
	.pi-image {
		margin: 0;
		max-width: 100%;
		text-align: center;

		a {
			display: block;
			line-height: 0;
		}
	}
	.pi-data-label {
		font-size: inherit;
		line-height: inherit;
	}
	.pi-data-value {
		>:not(ul), li {
			margin: 0;
		}
		ol {
			list-style-position: inside;
		}
	}
	>.pi-item:last-child {
		border-bottom: 0;
	}
}
.pi {
	&-image {
		&-thumbnail {
			max-width: var(--pi-width);
			height: auto;
		}
		&-collection {
			overflow: hidden;
			margin: 0;
			padding-top: 1px;
			& &-tabs {
				list-style: none;
				margin: 0 -1px;
				padding: 1px 0;
				text-align: center;
			}
			&-tabs {
				li {
					border: 1px solid var(--pi-secondary-background);
					box-sizing: border-box;
					cursor: pointer;
					display: inline-block;
					margin: -1px -1px 0 0;
					max-width: 50%;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align: bottom;
					white-space: nowrap;
				}
				li.current {
					background: var(--pi-secondary-background);
					font-weight: bold;
				}
			}
			&-tab-content {
				display: none;
				.video-thumbnail {
					display: block;
				}
				&.current {
					display: inherit;
				}
			}
		}
	}
	&-video-player {
		width: var(--pi-width);
		height: auto;
	}
	&-caption {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		color: #808080;
		font-size: 1em;
		font-style: italic;
		word-wrap: break-word;
	}
	&-data {
		border-bottom-style: solid;
		border-bottom-width: 1px;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-box-orient: horizontal;
		-webkit-box-orient: horizontal;
		-ms-flex-direction: row;
		-webkit-flex-direction: row;
		flex-direction: row;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		&-label {
			-ms-flex-preferred-size: 90px;
			-webkit-flex-basis: 90px;
			-moz-flex-basis: 90px;
			flex-basis: 90px;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
			overflow: hidden;
			word-wrap: break-word;
		}
		&-value {
			-ms-flex: 1;
			-webkit-flex: 1;
			-moz-flex: 1;
			flex: 1;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
			padding-left: 0;
			word-break: break-word;
			&:not(:first-child) {
				padding-left: 10px;
			}
		}
	}
	&-group {
		border-bottom-style: solid;
		border-bottom-width: 1px;
		>.pi-item:last-child {
				border-bottom: 0;
		}
	}
	&-horizontal-group {
		border-spacing: 0;
		table-layout: fixed;
		text-align: center;
		width: 100%;
		.pi-header {
			text-align: left;
		}
		thead + tbody .pi-data-value {
			padding-top: 0;
		}
		.pi-horizontal-group-item {
			vertical-align: top;
			&:not(:first-child) {
				border-left-style: solid;
				border-left-width: 1px;
			}
		}
		.pi-data-label {
			padding-bottom: 0;
		}
	}
	&-smart {
		&-data {
			&-label:not(:first-child),
			&-value:not(:first-child) {
				border-color: var(--pi-border-color);
				border-left-style: solid;
				border-left-width: 1px;
			}
		}
		&-group {
			border-bottom-style: solid;
			border-bottom-width: 1px;
			display: flex;
			flex-direction: column;
			text-align: center;
			&:last-child {
				border-bottom: 0;
			}
			&-head {
				display: flex;
				& + .pi-smart-group-body .pi-data-value {
					padding-top: 0;
				}
			}
			&-body {
				display: flex;
			}
			.pi-smart-data-label {
				padding-bottom: 0;
				box-sizing: border-box;
				flex-basis: auto;
			}
			.pi-smart-data-value {
				box-sizing: border-box;
				flex-basis: auto;
			}
		}
	}
	&-layout-stacked {
		.pi-data {
			display: block;
		}
		.pi-data-value:not(:only-child) {
			padding-left: 10px;
		}
	}

}
@media screen and (min-width: 720px) {
	.pi-collapse .pi-header:first-child {
		padding-right: 25px;
		position: relative;
		&::after {
			border-color: currentColor;
			border-style: solid;
			border-width: 2px 2px 0 0;
			content: '';
			display: block;
			height: 5px;
			right: 10px;
			position: absolute;
			top: 50%;
			width: 5px;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			margin-top: -3px;
		}
	}
	.pi-collapse-closed {
		.pi-header:first-child::after {
			transform: rotate(135deg);
			-webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			-ms-transform: rotate(135deg);
			margin-top: -5px;
		}
		> :nth-child(n+2) {
			display: none;
		}
		.pi-horizontal-group {
			thead {
				display: none;
			}
			tbody {
				display: none;
			}
		}
	}
}

@media screen and (max-width: 720px) {
	:root {
		--pi-width: 100%;
	}

	.portable-infobox {
		float: none;
		width: initial;
		font-size: initial;
		margin: 0;

		.skin-minerva & {
			margin: 0 -16px;
		}
	}

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

	.pi-image-collection-tabs {
		  display: flex;
		  flex-wrap: wrap;

		  li { flex: 1 50% }
	}
}

/* PI errors */
p.pi-error-info {
	background-color:  #f33;
	color: #fff;
	font-size: 18px;
	line-height: 28px;
	margin: 0;
	padding: 30px 50px;
}
ul.pi-debug {
	background-color: #e6e6e6;
	font-family: monospace;
	list-style: none;
	margin: 0;
	width: 100%;
	li {
		margin: 0;
	}
	.error {
		font-size: inherit;
	}
}
.pi-debug-line {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	&-number {
		box-sizing: border-box;
		-ms-flex-preferred-size: 50px;
		-webkit-flex-basis: 50px;
		-moz-flex-basis: 50px;
		flex-basis: 50px;
		-ms-flex-negative: 0;
		-webkit-flex-shrink: 0;
		-moz-flex-shrink: 0;
		flex-shrink: 0;
		padding-left: 10px;
	}
	&-code {
		box-sizing: border-box;
	}
}
.pi-debug-error-message {
	background-color: #000;
	color: #fff;
	font-family: Helvetica,Arial,sans-serif;
	margin: 20px 0 10px 25px;
	padding: 10px 15px;
	position: relative;
	width: 400px;
	&:before {
		border-bottom: 15px solid black;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		content: '';
		display: block;
		height: 0;
		left: 25px;
		position: absolute;
		top: -15px;
		width: 0;
	}
	.pi-debug-error-message-item {
		margin: 5px 0;
	}
}

/* Skin specific fixes */
.skin-minerva {
	.pi-image-collection-tabs li {
		margin-bottom: 0;
	}

	.pi-caption {
		margin: var(--pi-item-spacing);
	}

	.pi-horizontal-group {
		display: table;
		margin: 0;
		width: 100% !important;

		.pi-header {
			display: table-caption;
		}
	}

	.pi-navigation {
		box-sizing: border-box;
		width: 100%;
		float: none;
	}
}

.skin-timeless #mw-content-text {
	.pi-title {
		border: none;
		font-size: 1.75em;
		line-height: 1.5;
		margin: 0;
	}

	.pi-header {
		border: none;
		font-family: inherit;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.3;
		margin: 0;
	}

	.pi-data-label {
		font-family: inherit;
		font-size: inherit;
		font-weight: bold;
		line-height: inherit;
		margin: 0;
	}
}