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;
	container-type: inline-size;
}

#space_picker {
	margin-inline-start: -0.7em; /* align with the channel names */
	font-size: 150%;
	transition: border-color 0.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: 0.3em;
	min-inline-size: 10em;
	--grid-column: 1;
}

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

#sliders,
[part="swatch"],
slot[name="swatch"]::slotted(*) {
	grid-column: 1 / -1;

	@container (width > 25em) {
		grid-column: var(--grid-column);
	}

	@container style(--orientation: vertical) {
		grid-column: 1 / -1;
	}
}