js-draw/src/Coloris.css

Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript.

/* Imports Coloris' CSS and makes additional changes to the color picker */

#clr-picker {
	--clr-slider-size: 30px;
}

/* Coloris: Try to avoid scrolling instead of updating the color input. */
#clr-picker #clr-color-area,
#clr-picker .clr_hue {
	touch-action: none;
}

/* Increase space between inputs */
#clr-picker .clr-alpha {
	margin-top: 15px;
	margin-bottom: 15px;
}

/* Increase size of input thumb to make it easier to select colors. */
#clr-picker.clr-picker input[type='range']::-moz-range-thumb {
	width: var(--clr-slider-size);
	height: var(--clr-slider-size);
}

/* Also apply to Chrome/iOS */
#clr-picker.clr-picker input[type='range']::-webkit-slider-thumb {
	/*
	 Note: This doesn't seem to take effect in iOS if it's combined with the
	       ::-moz-range-thumb rule above
	 */
	width: var(--clr-slider-size);
	height: var(--clr-slider-size);
}

#clr-picker.clr-picker input[type='range']::-webkit-slider-runnable-track {
	height: var(--clr-slider-size);
}

#clr-picker.clr-picker input[type='range']::-moz-range-track {
	height: var(--clr-slider-size);
}

/*
Debugging: Uncommenting this rule makes Coloris' sliders more
visible.

#clr-picker.clr-picker input[type="range"] {
	opacity: 0.5;
	-webkit-appearance: auto;
	appearance: auto;
}
*/