ಮೋಡ್ಯೂಲ್:Proofreadpage index template/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;
}

/*
 * Demo index styling demonstrating some possibilities.
 */

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

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

.ws-tng .ws-index-metadata-container {
	grid-area: metadata;
}
.ws-tng .ws-index-metadata {
	width: 100%;
}

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

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

@media (min-width: 700px) {
	.ws-tng.ws-index-container {
		grid-template-areas:
		"metadata cover"
		"pagelist pagelist"
		"remarks remarks";
		grid-template-columns: 1fr fit-content(250px);
		grid-gap: 2em;
	}
}

@media (min-width: 1000px) {
	.ws-tng.ws-index-container {
		grid-template-areas: 
			"metadata cover    remarks"
			"pagelist pagelist remarks"
			".        .        remarks";
		grid-template-columns: 1fr fit-content(250px) fit-content(30%);
		grid-gap: 3em;
/*		box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px; */
/*		filter: drop-shadow(0.6rem 0.6rem 1rem rgba(20, 20, 180, 0.8)); */
		padding: 6em;
		background-image: url(//upload.wikimedia.org/wikipedia/commons/e/eb/Pinckney_Marcius-Simons%2C_endleaf_1_verso--endleaf_2_recto%2C_extra-illustrated_copy_of_A_Midsummer_Night%27s_Dream.png);
		background-origin: border-box;
		background-size: 100% 100%;		
	}
	.ws-tng .ws-index-remarks-container {
		box-shadow: inset rgba(50, 50, 93, 0.25) 0 10px 10px -5px;
		background-color: white;
		padding: .5em;
	}
	.ws-tng .ws-index-pagelist-container {
		background-color: rgba(255, 255, 255, 0.9);
	}

	.ws-tng .ws-index-metadata {
/*		background-image:
			linear-gradient(180deg, white 3rem, #F0A4A4 calc(3rem), #F0A4A4 calc(3rem + 2px), transparent 1px),
			repeating-linear-gradient(0deg, transparent, transparent 1.5rem, #DDD 1px, #DDD calc(1.5rem + 1px)); */
		/* box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); */
		border-collapse: collapse;
	}
	.ws-tng .ws-index-row {
		border-bottom: 1px solid #DDD;
	}
	.ws-tng .ws-index-row:first-child {
		border-bottom: 2px solid #F0A4A4;
	}
	.ws-tng .ws-index-metadata-container {
	    height: fit-content(250px);
	    width: fit-content(400px);
	    justify-self: center;
	    align-self: center;
	    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	    background: white;
	}
	.ws-tng .ws-index-cover-container {
		width: 300px;
	}
	.ws-tng .ws-index-cover-container img {
		margin: 0 auto;
		filter: drop-shadow(10px 10px 5px #000);
	}
	
}