Template: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%;
}
.wst-toc-table-align-left {
	margin-left:0;
}
.wst-toc-table-align-right {
	margin-right:0;
}
 
/* Default cell styles */
.wst-toc-table td {
	vertical-align:top;
}

/* Default header cell styles */
.wst-toc-table th {
	vertical-align:top;
	font-weight:inherit;
	text-align:center;
}
.wst-toc-table th:first-child {
	text-align:left;
}
.wst-toc-table th:last-child {
	text-align:right;
}

/* Captions */
.wst-toc-table caption {
	text-align:center;
	/* most works have a gap here, can override if not needed */
	padding-bottom:1em;
}
 
/* 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%;
	text-align:left;
}

/* 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;
}

/* Rows with L/C/R aligned last cells */
.__toc_row_last-l td:last-child {
	text-align:left;
}
.__toc_row_last-c td:last-child {
	text-align:center;
}
.__toc_row_last-r td:last-child {
	text-align:right;
}

/* Hanging indents */
.wst-toc-row-2out-1 td:nth-child(1),
.wst-toc-row-1-out-1 td:nth-child(2),
.wst-toc-row-1-2out-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;
	user-select:none;
}

/* 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;
}