Module:Proofreadpage index template/sandbox/styles.css

/* Styles for Index: namespace pages */

#ws-index-container {
	display: table;
	border-spacing: 1px 1px;
	box-sizing: border-box;
	width: 100%;
}

#ws-index-main-cell {
	padding: 0;
	vertical-align: top;
}

#ws-index-main-table {
	display: inline-table;
	border-collapse: collapse;
	border-spacing: 0 0;
	box-sizing: border-box;
	width: 100%;
}

#ws-index-cover-container {
	float: left;
	margin: .5em .25em .5em 0;
}

#ws-index-metadata {
	border-collapse: separate;
	border-spacing: 2px 2px;
	box-sizing: border-box;
	empty-cells: show;
}

.ws-index-label {
	padding-right: .5em;
	text-align: right;
	vertical-align: top;
}

.ws-index-value {
	vertical-align: top;
}

#ws-index-pagelist-container {
	margin-right: .75em;
}

#ws-index-pagelist {
	text-align: justify;
}

#ws-index-pagelist-container em {
	font-weight: bold;
	font-style: normal;
}

#ws-index-pagelist-legend {
	font-size: 83%;
	white-space: nowrap;
}

#ws-index-remarks {
	padding: 0 .25em;
	vertical-align: top;
	width: 30%;
}

#ws-index-remarks-empty {
	display: none;
	padding: 0;
	vertical-align: top;
}


/* Experimental new-style index markup below this line. */


/*
 * Normal index styling mimicing the old layout.
 */

/* The main container */
.ws-index-container {
	display: grid;
	box-sizing: border-box;
	max-width: 100%;
	grid-template-areas: 
		"cover    metadata remarks"
		"pagelist pagelist remarks"
		".        .        remarks";
	grid-template-columns: 250px 1fr 30%;
	grid-gap: 1em;
}

.ws-index-cover-container {
	grid-area: cover;
}

.ws-index-metadata-container {
	grid-area: metadata;
}

.ws-index-pagelist-container {
	grid-area: pagelist;
}
.ws-index-pagelist-heading {
	padding-bottom: .5em;
	white-space: pre-wrap;
	font-weight: bold;
}
.ws-index-pagelist-heading-legend {
	font-size: 83%;
	font-weight: normal;
}

.ws-index-remarks-container {
	grid-area: remarks;
}