Module:Information/styles2.css

/**
 * This is a derivative of Module:Information/styles.css
 * Its purpose is that the main styles will switch to this as we unify the styles
 * We are doing that in two steps to avoid disruption
 *
 * This EXPECTS the following structure:
 * 1. There is one main information template on a page
 * 2. This Template is generates a div with class: commons-file-information-table
 *    It also carries class hproduct
 *    Note: We probably don't really need this thing, but not entirely sure yet.
 * 3. This contains a table with class fileinfotpl and fileinfotpl-type-subtype
 *    This object also might have dir attribute
 *    but it should not have things like: infobox or toccolours
 * 4. Additional (stacked/adjacent) templates generate ONLY a table, with class fileinfotpl
 *    and fileinfotpl-appendix.
 *
 * This also expects [[:Commons:Machine-readable data]] to be adhered to
 * 1. Each row in fileinfotpl, where the first cell carries the class fileinfo-paramfield
 *    denotes a type of meta information tuple.
 * 2. The header of such a row has an id (or class) with fileinfotpl_metadatatype
 * 3. This header has a human readable name of that metadata information type
 * 4. This cell immediately following this header has thel value of this metadata field type
 * 5. The first row is the header of the template
 *    TODO: This should probably become a caption for accessibility reasons
 * 6. Any THIRD cell is decorative.
 *    It is not important and it is not part of the machine readable data.
 * 
 * Styling rules defined here should be rather specific and use descendant
 * class selectors and/or template specific prefixes.
 * This is because a lot of other templates get nested, but also because
 * this css is transcluded to many other wikis, with their own CSS that we need
 * to be compatible with.
 *
 * The 
 */
.fileinfotpl {
	/* Old toccolours */
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
	padding: 5px;
	font-size: 95%;
	/* end of toccolours */
	border-spacing: 2px;
	box-sizing: border-box;
	margin: 0;
	width: 100%;
}

.fileinfotpl > tbody > tr {
	vertical-align: top;
}

.fileinfotpl > tbody > tr > td,
.fileinfotpl > tbody > tr > th {
	padding: 4px;
}

/* This should be removed from MediaWiki:Filepage.css and MediaWiki:Common.css */
.fileinfo-paramfield {
	background: #ccf;
	text-align: right;
	padding-right: 0.4em;
	width: 15%;
	font-weight: bold;
}

.fileinfo-imagefield {
	width:200px;
	text-align: right
}

/* stack with additional adjacent templates */
.commons-file-information-table + .fileinfotpl,
.fileinfotpl + .fileinfotpl {
    border-top: 0;
    padding-top: 0;
    margin-top: -8px;
}

/* Layout on mobile devices */
@media only screen and (max-width:719px)  {
	.fileinfotpl {
		border-spacing: 0;
		padding: 0;
		word-break: break-word;
		width: 100% !important;
	}

	.fileinfotpl > tbody {
		display: block;
	}

	.fileinfotpl > tbody > tr > td,
	.fileinfotpl > tbody > tr > th {
		padding: 0.2em 0.4em;
		text-align: left;
		text-align: start;
	}

	.fileinfotpl > tbody > tr {
		display: flex;
		flex-direction: column;
	}

	/* stack with additional adjacent templates */
	.commons-file-information-table + .fileinfotpl,
	.fileinfotpl + .fileinfotpl {
	    margin-top: -1px;
	}

	.fileinfo-paramfield {
		box-sizing: border-box;
		flex: 1 0 100%;
		width: 100%;
	}

}