PortableInfobox/resources/PortableInfobox.less

@import "mediawiki.mixins";

.prefixer( @property; @value; @prefixes: webkit, moz, ms; @unprefixed: true ) {
	.prefixer-loop( @propety; @value; @prefixes; @i: length( @prefixes ) ) when ( @i > 0 ) {
		@prefix: extract( @prefixes, @i );
		-@{prefix}-@{property}: @value;
		.prefixer-loop( @propety; @value; @prefixes; ( @i - 1 ) );
	}
	.prefixer-loop( @property; @value; @prefixes );

	& when ( @unprefixed ) {
		@{property}: @value;
	}
}

.flexbox( @flex-direction: row ) {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	& when ( @flex-direction = row ) {
		.prefixer( box-orient; horizontal; webkit, ms; false );
	}
	& when ( @flex-direction = column ) {
		.prefixer( box-orient; vertical; webkit, ms; false );
	}
	.prefixer( flex-direction; @flex-direction; webkit, ms );
}

.flex-basis( @value ) {
	-ms-flex-preferred-size: @value;
	.prefixer( flex-basis; @value; webkit, moz );
}

.flex-grow( @value ) {
	-ms-flex-positive: @value;
	.prefixer( flex-grow; @value; webkit, moz );
}

.flex-shrink( @value ) {
	-ms-flex-negative: @value;
	.prefixer( flex-shrink; @value; webkit, moz );
}

.transform( @value ) {
	.prefixer( transform; @value );
}

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

:root {
	--pi-background: @pi-background;
	--pi-secondary-background: @pi-secondary-background;
	--pi-border-color: @pi-border-color;
	--pi-item-spacing: @pi-item-spacing;
	--pi-margin: @pi-margin;
	--pi-width: @pi-width;
}

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

	.pi-border-color {
		border-color: @pi-border-color;
		border-color: var( --pi-border-color );
	}
	.pi-secondary-background {
		background-color: @pi-secondary-background;
		background-color: var( --pi-secondary-background );
	}
	.pi-secondary-font {
		margin: 0;
		padding: 0;
	}
	.pi-item-spacing {
		padding: @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-media {
		margin: 0;
		max-width: 100%;
		text-align: center;
	}
	.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 {
	&-media-collection {
		overflow: hidden;
		margin: 0;
		padding-top: 1px;
		& &-tabs {
			list-style: none;
			margin: 0 -1px;
			padding: 1px 0;
			text-align: center;
		}
		&-tabs {
			.client-nojs & {
				display: none;
			}
			li {
				border-width: 1px;
				border-style: solid;
				border-color: @pi-secondary-background;
				border-color: 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: @pi-secondary-background;
				background: var( --pi-secondary-background );
				font-weight: bold;
			}
		}
		&-tab-content {
			display: none;
			&.current {
				display: inherit;
			}
		}
	}
	&-image-thumbnail {
		max-width: @pi-width;
		max-width: var( --pi-width );
		height: auto;
	}
	&-video-player {
		width: @pi-width;
		width: var( --pi-width );
		height: auto;
		display: block;
	}
	&-audio-player {
		width: @pi-width;
		width: var( --pi-width );
		&::-webkit-media-controls-enclosure {
			border-radius: 0;
		}
	}
	&-caption {
		.hyphens( auto );
		color: #808080;
		font-size: 1em;
		font-style: italic;
		word-wrap: break-word;
	}
	&-data {
		border-bottom-style: solid;
		border-bottom-width: 1px;
		.flexbox();
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		&-label {
			.flex-basis( 90px );
			.hyphens( auto );
			overflow: hidden;
			word-wrap: break-word;
		}
		&-value {
			.flex-grow( 1 );
			.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: @pi-border-color;
				border-color: var( --pi-border-color );
				border-left-style: solid;
				border-left-width: 1px;
			}
		}
		&-group {
			border-bottom-style: solid;
			border-bottom-width: 1px;
			.flexbox( column );
			text-align: center;

			&:after {
				content: "";
				clear: both;
				display: block;
			}
			&:last-child {
				border-bottom: 0;
			}
			&-head,
			&-body {
				.flexbox();
			}
			&-head + .pi-smart-group-body .pi-data-value {
				padding-top: 0;
			}
			.pi-smart-data-label {
				padding-bottom: 0;
				box-sizing: border-box;
				.flex-grow( 1 );
				.flex-basis( auto );
				float: left;
			}
			.pi-smart-data-value {
				box-sizing: border-box;
				.flex-basis( auto );
				float: left;
			}
		}
	}
	&-layout-stacked {
		.pi-data {
			display: block;
		}
		.pi-data-value:not( :only-child ) {
			padding-left: 10px;
		}
	}

}
@media screen and ( min-width: 720px ) {
	.client-js {
		.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;
				.transform( rotate( -45deg  ));
				margin-top: -3px;
			}
		}
		.pi-collapse-closed {
			.pi-header:first-child::after {
				.transform( rotate( 135deg  ));
				margin-top: -5px;
			}
			> :nth-child( n+2 ) {
				display: none;
			}
			.pi-horizontal-group {
				thead,
				tbody {
					display: none;
				}
			}
		}
	}
}

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

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

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

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

	.pi-image-collection-tabs {
		.flexbox();
		.flex-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 {
	.flexbox();
	&-number {
		box-sizing: border-box;
		.flex-basis( 50px );
		.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: @pi-item-spacing;
		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;
	}
}