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: .3em;
	align-items: center;

	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: .1em .2em;
		border-radius: .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: .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: .35;
				filter: contrast(2);
			}
		}

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

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