color-elements/src/channel-slider/channel-slider.css

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

.color-slider-label {
	--_transition-duration: var(--transition-duration, 200ms);

	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3em;
	align-items: center;
	text-align: start;

	em {
		opacity: 60%;
		transition: opacity var(--_transition-duration);
	}

	&:not(:hover, :focus-within) em {
		opacity: 0;
	}

	input[type="number"] {
		--_border-color: var(
			--border-color,
			color-mix(
				in oklab,
				currentcolor calc(var(--_current-color-percent, 30) * 1%),
				oklab(none none none / 0%)
			)
		);

		all: unset;

		--content-width: calc(var(--value-length) * 1ch);
		width: calc(var(--content-width, 2ch) + 1.2em);
		min-width: calc(2ch + 1.2em);
		box-sizing: content-box;
		padding: 0.1em 0.2em;
		border-radius: 0.2em;
		border: 1px solid var(--_border-color);
		text-align: center;
		font-size: 90%;
		transition: var(--_transition-duration) allow-discrete;
		transition-property: opacity, border-color;

		&::-webkit-textfield-decoration-container {
			gap: 0.2em;
		}

		&:not(:hover, :focus) {
			--_current-color-percent: 10;

			opacity: 60%;
			border-color: var(--_border-color);

			&::-webkit-inner-spin-button {
				/* Fade out the spin buttons in Chrome and Safari */
				opacity: 0.35;
				filter: contrast(2);
			}
		}

		@supports (field-sizing: content) {
			field-sizing: content;
			width: auto;
		}
	}
}

color-slider {
	grid-column: 1 / -1;
}