Module:Proofreadpage index template/sandbox/styles.css

/* Styles for Index: namespace pages */

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

padding: 0; vertical-align: top; }
 * 1) ws-index-main-cell {

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

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

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

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

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

margin-right: .75em; }
 * 1) ws-index-pagelist-container {

text-align: justify; }
 * 1) ws-index-pagelist {

font-weight: bold; font-style: normal; }
 * 1) ws-index-pagelist-container em {

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

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

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

/* 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; color: #202122; }

.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; color: #202122; }

@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; color: #202122; padding: .5em; }	.ws-tng .ws-index-pagelist-container { background-color: rgba(255, 255, 255, 0.9); color: #202122; }

.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; color: #202122; }	.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); } }