colorjs.io/assets/css/docs.css

Color space agnostic color manipulation library

main {
	position: relative;
}

#toc {
	font-size: 75%
}

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

@media (min-width: 1480px) {

#toc {
		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)) {

#toc {
			top: max(0em, 11rem - var(--scrolltop) * 1px)
}
		}
	}

@media (max-width: 1480px), (max-height: 30rem) {

#toc {
		/* Hide all but next, current, prev */
}
			#toc > ul > li:not(.next):not(.current):not(.previous) {
				display: none;
			}
	}

#toc ul ul {
		list-style: square
	}

#toc .previous[aria-label]::before, #toc .current[aria-label]::before, #toc .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
	}

[mv-app="colorSpaces"] [property="space"] > * {
			grid-column: 1;
		}

[mv-app="colorSpaces"] [property="space"] > header {
			grid-column: 1 / span 2;
			display: flex;
			align-items: center
		}

[mv-app="colorSpaces"] [property="space"] > header h2 {
				margin: 0 auto 0 0;
			}

[mv-app="colorSpaces"] [property="space"] > header .file {
				font-style: italic;
				opacity: .6;
			}

[mv-app="colorSpaces"] [property="space"] [property="description"] {
			margin: .5em 0;
		}

[mv-app="colorSpaces"] [property="space"] dl {
			min-width: 10em;
			margin: 0;
			grid-row: 2 / span 3;
			grid-column: 2;
			background: hsl(var(--gray) 95%);
			border-radius: .2em;
			padding: 1em
		}

[mv-app="colorSpaces"] [property="space"] dl dt {
				margin-top: .5em;
				font-size: 80%;
			}

[mv-app="colorSpaces"] [property="space"] dl dd {
				grid-column: 1;
			}