colorjs.io/notebook/color-notebook.css

Color space agnostic color manipulation library

.cn-wrapper {
	position: relative;
	display: flex;
	--transparency: transparent

}

@supports (background: conic-gradient(red, white)) {

.cn-wrapper {
		--transparency: repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / .05) 0 50%) 0 0 / 1.5em 1.5em content-box border-box

}
	}

.cn-wrapper > pre,
.cn-wrapper > .prism-live {
	flex: 1;
	width: 0;
}

.cn-wrapper .cn-results:empty {
	display: none;
}

.cn-wrapper .cn-results:not(:empty) {
	display: flex;
	flex-flow: column;
	margin-left: .5em;
	padding-top: .5em;
	font: bold 65%/1 var(--font-monospace, monospace)
}

.cn-wrapper .cn-results:not(:empty) > * {
		margin-bottom: .5em;
		min-width: 10rem;
		max-width: 15rem;
	}

@media (max-width: 900px) {
	.cn-wrapper .cn-results:not(:empty),
	.cn-wrapper > pre,
	.cn-wrapper > .prism-live {
		transition: .4s width;
	}

	.cn-wrapper .cn-results:not(:empty) {
		width: 2em;
		overflow: hidden
	}

		.cn-wrapper .cn-results:not(:empty):hover,
		.cn-wrapper .cn-results:not(:empty):focus,
		.cn-wrapper .cn-results:not(:empty):focus-within,
		.cn-wrapper .cn-results:not(:empty):active {
			width: auto;
			overflow: visible;
		}
}

.cn-wrapper .cn-value {
	cursor: pointer;
}

.cn-wrapper .cn-string,
.cn-wrapper .cn-number,
.cn-wrapper .cn-boolean,
.cn-wrapper .cn-error {
	padding: .3em 0;
	line-height: 1.2;
}

.cn-wrapper .cn-error {
	color: var(--color-red);
	cursor: help
}

.cn-wrapper .cn-error::before {
		content: "⚠️";
		margin-right: .1em;
		filter: invert() brightness(2) saturate(.7) hue-rotate(130deg);
	}

.cn-wrapper .cn-color,
.cn-wrapper .cn-range {
	padding: .4em;
	border-radius: .2em;
	transition: .3s .15s transform;
	transform-origin: right
}

.cn-wrapper .cn-color:hover, .cn-wrapper .cn-range:hover {
		z-index: 1;
		transform: scale(2);
	}

.cn-wrapper .cn-range {
	height: 1em;
	background: linear-gradient(to right, var(--stops, transparent, transparent)), var(--transparency);
}

.cn-wrapper .cn-color {
	position: relative;
	background: linear-gradient(var(--color), var(--color)), var(--transparency);
	white-space: nowrap
}

.cn-wrapper .cn-color.dark {
		color: white;
	}

.cn-wrapper .cn-color.out-of-gamut {
		box-shadow: 0 0 .1em .02em var(--out-of-gamut-color, red)
	}

.cn-wrapper .cn-color.out-of-gamut.light {
			--out-of-gamut-color: #b00;
		}

.cn-wrapper .cn-array > * {
		display: inline-block;
	}

.cn-wrapper .cn-array > .cn-color:hover {
		transform: scale(4);
	}

[data-varname] {
	background: var(--color);
	box-shadow: 0 0 0 .1em var(--color);
	border-radius: .01em;
}

	[data-varname].dark {
		color: white;
		text-shadow: none;
	}