mediawiki-skins-Citizen/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less

@import '../variables.less';
@import '../mixins.less';

:root {
	--toc-color: @base-70;

	--toc-title-h2-color: @base-50;

	--toc-li-active-color: @accent-50;
	--toc-li-active-a-li-color: @base-30;

	--toc-a-color: @base-50;
	--toc-a-hover-color: @base-30;

	--screen3-toc-toggle-label-background-color: @base-90;
	--screen3-toc-toggle-label-hover-background-color: @base-80;
	--screen3-toc-toggle-label-focus-background-color: @accent-90;
	--screen3-toc-ul-background-color: @base-100;
}

:root.skin-citizen-dark {
	--toc-color: @dark-text-60;

	--toc-title-h2-color: @base-50;

	--toc-li-active-color: @dark-color-link;
	--toc-li-active-a-li-color: @dark-text-80;

	--toc-a-color: @dark-text-70;
	--toc-a-hover-color: @dark-text-80;

	--screen3-toc-toggle-label-background-color: @dark-bg-50;
	--screen3-toc-toggle-label-hover-background-color: @accent-10;
	--screen3-toc-toggle-label-focus-background-color: @accent-10;
	--screen3-toc-ul-background-color: @dark-bg-40;
}

.toc {
	position: fixed;
	z-index: -1; // So that it is below float objects in content
	max-width: 450px;
	top: @header-height;
	left: 0;
	padding: @margin-side;
	color: var( --toc-color );

	&::-webkit-scrollbar {
		width: 0; // Hide bar on toc
	}

	&title {
		h2 {
			margin: 0;
			color: var( --toc-title-h2-color ) !important;
			font-size: @ui-menu-text-big;
		}
	}

	&toggle {
		&span {
			display: none;
		}

		&checkbox:checked ~ ul {
			display: block !important; // Force display
		}
	}

	li {
		&.toclevel-2,
		&.toclevel-3,
		&.toclevel-4,
		&.toclevel-5,
		&.toclevel-6 {
			margin-left: 9px;
			border-left: 1px dashed;
		}
	}

	li.active {
		color: var( --toc-li-active-a-li-color );

		> a {
			color: inherit !important;
			border-color: currentColor;
		}

		a,
		li {
			color: var( --toc-li-active-a-li-color );
		}
	}

	a {
		display: inline-block;
		margin: @content-margin-top / 4 0;
		padding-left: 9px;
		color: var( --toc-a-color );
		border-left: 3px solid transparent;

		&:hover {
			color: var( --toc-a-hover-color );
		}
	}

	&number {
		.mixin-screen-reader-text;
	}

	ul {
		margin: 0 !important;
		list-style: none;
	}

	> ul {
		margin: @content-margin-top * 0.75 0 0 0 !important;
		position: relative;
		z-index: 2;
		border-left: 1px dashed;
		max-width: ~'calc( (100vw - '@page-width + @margin-side * 4 ~' ) / 2 )';
		max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 4 ~' )';
		overflow: visible auto;
		overscroll-behavior: contain;
		display: block;
	}
}

@media ( max-width: @screen3 ) {
	.toc {
		z-index: 10;
		height: 100%;
		margin-top: -@header-height;
		padding: 0;
		transform: translateX( -100% );

		&:before,
		&:after {
			content: unset; // Disable fade
		}

		&toggle {
			&span {
				display: block;
				font-size: 0 !important;
			}

			&label {
				position: fixed;
				z-index: 7;
				right: -100vw;
				bottom: 0;
				margin: @margin-side;
				padding: 0 @margin-side / 2;
				width: 39px;
				height: 56px;
				display: block;
				background-color: var( --screen3-toc-toggle-label-background-color );
				border-radius: 100%;
				.boxshadow(4);

				&:hover {
					background-color: var( --screen3-toc-toggle-label-hover-background-color );
					.boxshadow(5);

					&:before {
						opacity: @opacity-icon-active;
					}
				}

				&:focus {
					background-color: var( --screen3-toc-toggle-label-focus-background-color );
				}

				&:before {
					.resource-loader-icon;
					display: block;
					opacity: @opacity-icon;
				}
			}

			&checkbox:not( :checked ) ~ ul {
				transform: translateX( -300px - @margin-side );
			}
		}

		&title h2 {
			display: none;
		}

		> ul {
			display: block !important; // So that animation is visible
			margin: 0 !important;
			padding: @header-height + @margin-side @margin-side @margin-side * 2 @margin-side / 2 !important; // More scroll spaces
			max-width: none;
			height: 100%;
			max-height: ~'calc( 100vh - '@header-height + @margin-side * 3 ~')';
			background: var( --screen3-toc-ul-background-color );
			border-radius: 0 @border-radius-large @border-radius-large 0;
			.boxshadow(3);
			transform: translateX( 100% );
			transition: @transition-transform;
		}
	}

	.skin-citizen-dark {
		.toc {
			&togglelabel {
				&:before {
					filter: invert( 1 );
				}
			}
		}
	}
}