User:Izno/Sandbox/Infobox/template/styles.css

/*
 * An investigation of a div-based infobox, with support for low resolution
 */
.infobox-div {
	color: black;
	font-size: 88%;
	line-height: 1.5em;
}

div:not(.infobox-div-subbox) > .infobox-div-inner {
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
	padding: 0.4em;
}
	
.infobox-div-subbox {
	display: contents;
}

@media (min-width: 300px) {
	.infobox-div-inner {
		display: grid;
	}
	
	.infobox-div-inner > div {
		grid-column: 1 / 3;
	}
	
	div.infobox-div-label {
		grid-column: 1 / 2;
	}
	
	div.infobox-div-data {
		grid-column: 2 / 3;
	}
	
	/* subgrid doesn't validate RIP
	 * can't do this yet
	.infobox-div-subbox > .infobox-div-inner {
		grid-template-columns: subgrid;
	}
	*/
}

@media (min-width: 720px) {
	.infobox-div {
		/* @noflip */
		margin: 0.5em 0 0.5em 1em;
		/* @noflip */
		float: right;
		/* @noflip */
		clear: right;
		width: 22em;
	}
}

/*
 * not strictly certain .infobox-div-subbox styles are necessary since the modules
 * now exclusively output infobox-div-subbox or infobox, not both
 * just replicating the module faithfully
 */
 /*
.infobox-div-subbox {
	margin: -3px;
}
*/


.infobox-div-above,
.infobox-div-title {
	font-size: 125%;
	font-weight: bold;
	text-align: center;
}

.infobox-div-title {
	padding: 0.2em;
}

.infobox-div-header,
.infobox-div-subheader,
.infobox-div-image,
.infobox-div-full-data,
.infobox-div-below {
	text-align: center;
}

/* must be declared after .infobox-full-data */
.infobox-div-label,
.infobox-div-data {
	/* @noflip */
	text-align: left;
}

.infobox-div-label {
	font-weight: bold;
}

.infobox-div-navbar {
	/* @noflip */
	text-align: right;
}

.infobox-div .navbar {
	font-size: 100%;
}

.infobox-div-3cols-child {
	margin: auto;
}