MediaWiki:Common.css/src/content/ToC.scss

@use "../lib";
/** ToC **/
.toc, .toc *{
	box-sizing: border-box;
}
/* base common style */
.toc {
	@include lib.box-style;
	margin: var(--layout-gap-l) 0;
	font-size: unset;
	min-width: 12em;
	a{
		color: var(--theme-text-color);
	}
	.tocnumber{
		color: var(--theme-text-color-note);
		&:after{
			content: '.';
		}
	}
}

/* header */
.toc{
	.toctitle{
		position: relative;
		overflow: hidden;
		text-align: left;
		h2, .toctogglespan{
			line-height: 20px;
			margin: 0;
			border: 0;
		}
		h2{
			padding: 0 8px;
			font-weight: normal;
			display: flex;
			align-items: center;
			&::before{
				content: '';
				display: block;
				width: 12px;
				height: 12px;
				@include lib.mask-icon(var(--theme-text-color), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E"));
				margin: 0 6px 0 0;
			}
		}

	}
	.toctogglelabel{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		padding: 0 8px;
		font-size: unset;
		line-height: unset;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.toctogglespan::before,
	.toctogglespan::after,
	.toctogglelabel::after{
		display: none;
	}
	.toctogglelabel::before{
		/* arrow */
		@include lib.pseudo-block;
		@include lib.mask-icon(var(--theme-icon-color), var(--icon-chevron-down));
		width: 14px;
		height: 14px;
		flex: 0 0 auto;
		transform: scaleY(-1);
	}
	.toctogglelabel:hover::before{
		@include lib.mask-icon(var(--theme-icon-color-hover));
	}
	.toctogglecheckbox:checked + .toctitle .toctogglelabel::before{
		transform: none;
	}
	.toctogglecheckbox:checked ~ ul{
		/* do not change ToC title size when toggle show/hide. */
		overflow: hidden;
		display: block;
		height: 0;
		border: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin: 0;
	}
}

/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul{
	margin: 0 0 0 1em;
}
.toc > ul{
	margin: var(--layout-box-padding) 0 0 0;
	border-top: 1px solid var(--theme-border-color);
	padding-top: var(--layout-box-padding);
	a{
		display: block;
		padding: 2px 8px;
		border-radius: 4px;
		transition: background 0.3s;
		&:hover {
			text-decoration: none;
			background: var(--theme-highlight-background);
		}
	}
	li{
		margin: 0;
	}
}