color-elements/src/color-picker/color-picker.css

A set of web components for working with color. A Color.js project.

:host {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 1em;
}

#space_picker {
	margin-inline-start: -.7em; /* align with the channel names */
	font-size: 150%;
	transition: border-color .2s;

	&:not(:hover) {
		border-color: transparent;
	}
}

[part="color-space"],
slot[name="color-space"]::slotted(*) {
	grid-column: 1 / -1;
	justify-self: start;
}

#sliders {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	gap: .3em;
	min-inline-size: 10em;
}

[part="swatch"],
slot[name="swatch"]::slotted(*) {
	width: auto;
	margin: 0;
}