colorjs.io/assets/css/docs.src.css

Color space agnostic color manipulation library

main {
	position: relative;
}

#toc {
	font-size: 75%;

	& > ul {
		padding: 0;
		list-style: none;
	}

	@media (min-width: 1480px) {
		position: fixed;
		top: 11rem;
		right: calc(var(--page-width) + var(--page-margin) + 1em);
		width: fit-content;
		max-width: calc(var(--page-margin) - 1em);
		margin-left: 1em;

		@supports (top: max(1em, 1px)) {
			top: max(0em, 11rem - var(--scrolltop) * 1px);
		}
	}


	@media (max-width: 1480px), (max-height: 30rem) {
		/* Hide all but next, current, prev */
		& > ul {
			& > li:not(.next):not(.current):not(.previous) {
				display: none;
			}
		}
	}

	& ul ul {
		list-style: square
	}

	& .previous,
	& .current,
	& .next {
		&[aria-label]::before {
			content: attr(aria-label) ": ";
			font-size: 85%;
			font-weight: 600;
			opacity: .5;
			text-transform: uppercase;
		}
	}
}

[mv-app="colorSpaces"] {
	& [property="space"] {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-gap: 0 1em;
		margin: 1em 0;

		& > * {
			grid-column: 1;
		}

		& > header {
			grid-column: 1 / span 2;
			display: flex;
			align-items: center;

			& h2 {
				margin: 0 auto 0 0;
			}

			& .file {
				font-style: italic;
				opacity: .6;
			}
		}

		& [property="description"] {
			margin: .5em 0;
		}

		& dl {
			min-width: 10em;
			margin: 0;
			grid-row: 2 / span 3;
			grid-column: 2;
			background: hsl(var(--gray) 95%);
			border-radius: .2em;
			padding: 1em;

			& dt {
				margin-top: .5em;
				font-size: 80%;
			}

			& dd {
				grid-column: 1;
			}
		}
	}


}