mediawiki-skins-Citizen/resources/skins.citizen.styles/components/TableOfContents.less

.citizen-toc {
	font-size: 0.875rem;
	line-height: var( --line-height-xs );

	&__card {
		display: flex;
		flex-direction: column;
		gap: var( --space-xs );
	}

	&__top {
		&::before {
			width: 0.875rem;
			height: 0.875rem;
			content: '';
			filter: var( --filter-invert );
			opacity: var( --opacity-icon-base );
		}

		&:hover::before {
			opacity: var( --opacity-icon-base--hover );
		}

		&:active::before {
			opacity: var( --opacity-icon-base--hover );
		}
	}

	&__header {
		color: var( --color-base--subtle );
		letter-spacing: 0.05em;
	}

	&__contents {
		margin-left: 1px;
	}

	&__contents,
	&__list {
		margin: 0;
		list-style: none;
		border-left: 1px solid var( --border-color-base );

		.citizen-toc__link {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}

	&__list {
		margin-left: var( --space-xs );
	}

	&__link {
		display: flex;
		gap: var( --space-xs );
		padding-top: var( --space-xs );
		padding-bottom: var( --space-xs );
		font-weight: var( --font-weight-medium );
		color: var( --color-base );
		border-radius: var( --border-radius--small );

		&.citizen-toc__top {
			height: 0;
			padding-top: 0;
			padding-bottom: 0;
			visibility: hidden;
			opacity: 0;
			transition-property: opacity, height, padding;
		}

		&:hover {
			background-color: var( --background-color-quiet--hover );
		}

		&:active {
			background-color: var( --background-color-quiet--active );
		}

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}

	&__indicator {
		flex-shrink: 0;
		width: 3px;
		margin-left: -2px;
		border-radius: var( --border-radius--pill );
	}

	&__text {
		display: flex;
		gap: var( --space-xs );
	}

	&__numb {
		display: none;
		color: var( --color-base--subtle );
	}

	&__listItem {
		&--active {
			> .citizen-toc__link {
				color: var( --color-primary );

				.citizen-toc__indicator {
					background-color: var( --color-primary );
				}
			}
		}
	}
}

// Sticky header styles
.citizen-body-header--sticky {
	.citizen-toc__top.citizen-toc__link {
		height: 2rem; // 1rem text + 1rem padding
		padding-top: var( --space-xs );
		padding-bottom: var( --space-xs );
		visibility: visible;
		opacity: 1;
	}
}

@media ( max-width: ( @max-width-breakpoint-tablet ) ) {
	.citizen-toc {
		position: fixed;
		right: 0;
		bottom: ~'calc( var( --header-size ) + var(  --space-xs ) )';
		z-index: @z-index-page-header;
		// Allow click through
		pointer-events: none;
		transition: var( --transition-menu );
		transition-property: transform;
		will-change: transform;

		&__card {
			// This is not bulletproof since it will get covered by page header
			// in extremely short height. but it should be good for now
			max-height: ~'calc( var( --header-card-maxheight ) - 8rem )';
			padding: var( --space-md );
			margin: var( --space-xs );
			overflow: auto;
			overscroll-behavior: contain;
			-webkit-user-select: none;
			user-select: none;
			.citizen-card;
			.citizen-card-hide( bottom right, '', false );
			.citizen-card-transition();
		}

		// Move down when site header is hidden
		.citizen-scroll--down & {
			transform: translateY( var( --header-size ) );
		}
	}

	#citizen-toc {
		&__checkbox:checked {
			~ .citizen-toc__card {
				.citizen-card-show( false );
			}
		}

		&__buttonCheckbox {
			position: absolute;
			right: 0;
			bottom: 0;
			display: grid;
			place-content: center;
			width: 2.5rem;
			height: 2.5rem;
			margin: var( --space-xs );
			pointer-events: auto;
			background-color: var( --color-surface-1 );
			border-radius: var( --border-radius--medium );
			box-shadow: var( --box-shadow-dialog );
			transition: var( --transition-menu );
			transition-property: transform;
			transform: none;
			transform-origin: bottom right;

			.citizen-ui-icon {
				width: 1rem;
				height: 1rem;
			}

			// The hover state colors are not great but it will do for now
			&:hover {
				background-color: var( --color-surface-3 );
			}

			&:active {
				background-color: var( --color-surface-1 );
			}
		}
	}

	// Hide dismiss button when JS is enabled
	// Since clicking outside will dismiss ToC already
	.client-js {
		#citizen-toc {
			&__checkbox:checked {
				// Fake seamless transition
				~ #citizen-toc__buttonCheckbox {
					pointer-events: none;
					background-color: transparent;
					box-shadow: none;
					transform: scale( 1.2 );

					.citizen-ui-icon {
						display: none;
					}
				}
			}
		}
	}
}

@media ( min-width: @min-width-breakpoint-desktop ) {
	.citizen-toc {
		grid-area: toc;

		&__card {
			--toc-margin-top: var( --space-xs );
			position: -webkit-sticky;
			position: sticky;
			top: var( --toc-margin-top );
			max-height: ~'calc( 100vh - var( --toc-margin-top ) - var( --space-md ) )';
			overflow-y: auto;
			overscroll-behavior: contain;
		}
	}

	// Hide button in desktop viewport
	#citizen-toc__buttonCheckbox {
		display: none;
	}

	// Sticky header styles
	.citizen-body-header--sticky {
		.citizen-toc__card {
			--toc-margin-top: ~'calc( var( --header-size ) + var(  --space-xxl  ) )';

			// Sticky header is shorter without buttons
			@media ( max-height: 800px ) {
				--toc-margin-top: ~'calc( var( --header-size ) + var( --space-md ) )';
			}
		}
	}
}