Templat:TOC templates/styles.css

/*
 * Common and shared styles
 *
 * The classes titles "1-m-1" and similar are used to target general formatting:
 * Any cells before the "m" are considered "chapter numbers", the "m" is the main
 * cell: this is the widest one. Cells after the "m" are pagenumber cells.
 *
 * NOTE: *Only* the most common cases belong here - this style sheet is loaded for
 * every TOC using these templates. Specialised formatting or formatting that
 * applies only to a small number of works should use its own, dedicated CSS.
 */

.wst-toc-table {
	border-collapse: collapse;
	background-color:transparent;
	margin:auto;
	max-width: 100%;
}
 
/* Default cell styles */
.wst-toc-table td {
	vertical-align: top;
}

/* Captions */
.wst-toc-table caption {
	text-align: center;
	padding-bottom: 1em; /* most works have a gap here, can override if not needed */
}
 
/* First cells (chapter numbers) are aligned right by default */
.__toc_row_1-m-1 td:nth-child(1),
.__toc_row_1-1-m-1 td:nth-child(1),
.__toc_row_1-1-m-1 td:nth-child(2) {
	text-align: right;
	white-space: nowrap;
	padding-right: 1em;
}

/* Select the main cell */
.__toc_row_1-m-1 td:nth-child(2),
.__toc_row_m-1 td:nth-child(1),
.__toc_row_m-1-1 td:nth-child(1),
.__toc_row_1-1-m-1 td:nth-child(3) {
	width: 99%;
}

/* The last cell is the page number */
.__toc_row_1-m-1 td:last-child,
.__toc_row_1-1-m-1 td:last-child,
.__toc_row_m-1 td:last-child,
.__toc_row_m-1-1 td:last-child, .__toc_row_m-1-1 td:nth-child(2) {
	vertical-align: bottom;
	text-align: right;
	padding-left: 1em;
	white-space: nowrap;
}

/* Rows with L/C/R aligned first cells (this includes {{TOC row l/c/r}}) */
.__toc_row_first-l td:first-child {
	text-align: left;
}
.__toc_row_first-c td:first-child {
	text-align: center;
}
.__toc_row_first-r td:first-child {
	text-align: right;
}

.__toc_row_last-l td:last-child {
	text-align: left;
}
.__toc_row_last-c td:last-child {
	text-align: center;
}

/* Hanging indents */
.wst-toc-row-2out-1 td:nth-child(1),
.wst-toc-row-1-out-1 td:nth-child(2) {
	text-indent: -1.50em;
	padding-left: 1.50em;
}

/* override class to remove padding from the first cells */
.__no_first_col_padding td:nth-child(1) {
	padding-right: 0;
}
.__no_last_col_padding td:last-child {
	padding-left: 0;
}

/* auxiliary content (i.e. rows added by wikisource) */
.wst-toc-aux {
	background: #E6F2E6;
}

/*
 * Styles related to the faux dot leaders.
 */

/* dotted row backgrounds - default white to cover the dots */
.wst-toc-dot-bg {
	background: white;
}

/* in places we know there is a coloured background (sometimes), inherit */
.wst-toc-aux .wst-toc-dot-bg,
.subheadertemplate .wst-toc-dot-bg {
	background: #E6F2E6;
}

/* Outer wrapper for cells with dot leaders */
/* TODO: It's a div now, but why not set this on the td instead? */
.wst-toc-dotcell {
	position: relative;
	width: 100%;
}

/* Inner wrapper for the raw dot characters. */
.wst-toc-dotinner {
	display: inline;
	float: right;
}

/* Content part of dotcell **/
.wst-toc-dotcell-content {
	display: inline;
	position: relative;
	background: white;
	z-index: 2;
}

/* Outer wrapper for the raw dot characters. */
.wst-toc-dotouter {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-align: right;
	z-index: 0;
}

/* That weird empty div before the dots. */
.wst-toc-dotempty {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1em;
	z-index: 1;
}

/* The part of a dotted cell containing actual content. */
.wst-toc-dotentry {
	display: inline;
	position: relative;
	text-align: left;
	padding: 0 .5em 0 0;
	z-index: 2;
}