RnQ/Distro/Template/color-selector.css

@set color-selector  {
	:root {
		var(clr): #ff0000;
		display: block;
		width: 338dip;
		background: #fff;
		padding: 0;
		font: inherit;
		box-sizing: border-box;
		overflow: hidden;
	}

	:root > div.sliders {
		width: *;
		flow: vertical;
		margin: 0;
		//min-height: 2.4em;
		vertical-align: middle;
	}

	div.sliders::marker {
		display: none;
//		size: 2.2em;
//		margin: * 0;
//		background: url(sciter:no-color.png) repeat;
//		background-size: 6dip;
//		background-clip: border-box;
//		border-radius: 50%;
//		foreground: url(stock:disk) 50% 50% no-repeat;
//		foreground-size: 100%;
//		fill: var(clr);
//		stroke: none;
	}

	div.sliders > input button.slider {
		width: 7dip;
		height: 14dip;
		padding: 0;
		border: 0dip solid #7f7f7f;
		border-radius: 0;
		background: none;
		background-color: #ffffffcc;
		background-image: none;
		foreground-image: none;
	}
	div.sliders > input button.slider:hover,
	div.sliders > input button.slider:focus {
		//background: none;
		//background-color: @activeColorLight;
	}
	div.sliders > input button.slider:active {
		//background-color: @activeColorLighter;
	}

	div.sliders > input(h) {
		border: none;
		height: 14dip;
		width: *;
		margin: 0;
		padding: 0;
		background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
	}

	div.sliders > input(a) {
		border: none;
		height: 14dip;
		width: *;
		margin: 0;
		padding: 0;
		background: url(sciter:no-color.png) repeat linear-gradient(to right, #00000000 0%, morph(var(clr),opacity:1) 100%);
		background-size: 6dip;
	}

	div.layers { 
		width: 338dip;
		height: 200dip;
		flow: stack;
		margin: *;
	}

	div.value {
		size: *;
		background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 1%, rgba(0,0,0,1.0) 100%); 
	}
	div.saturation {
		size: *;
		background: linear-gradient(to right, var(clr) 0%, #ffffff 100%);
	}

	div.rep { 
		width: *; 
		flow: stack;
		margin: 10dip 0;
	}
	
	div.rep > form { 
		border-spacing: 6dip;
		flow: row(input span, input span, input span);
		width: max-content;
		margin: 0 *;
	}

	div.rep > form[alpha=true] {
		flow: row(input span, input span, input span, input span); 
	}

	div.rep > form > input {
		display: block;
		width: 7ch;
		padding: 3dip 6dip 3dip 0;
		text-align: center;
	}
	div.rep > form > span {
		display: inline-block;
		margin: 0 *;
		width: max-content;
		text-align: center;
	}

	div.rep > icon {
		display: block;
		behavior: clickable;
		size: 30dip;
		foreground-size: 20dip;
		fill: @ctrlBorderColorLight;
		cursor: pointer;
	}
	div.rep > icon:hover {
		foreground-color: @greyColor;
		fill: @ctrlBorderColor;
	}
	div.rep > icon#colors {
		margin: 0 * 0 10dip;
	}
	div.rep > icon#formats {
		margin: 0 10dip 0 *;
	}
/*
	//icon|down
	
	div.switch {
		height:1.8em;
		width:0.9em;
	}

	div.switch > icon {
		size:0.9em;
		behavior:clickable;
	}

	div.switch > icon:hover {
		foreground-color:var(highlight-hover);
	}
	
	div.numerics {
		flow:horizontal;
		width:200dip;
		margin:0 *;
		border-spacing:6dip;
	}

	div.numerics form { width:*; flow:horizontal; line-height:1.8em; }

	div.numerics input { display:block; width:*; line-height:1.2em; padding:0;}
	div.numerics input caption { padding:1dip 3dip; }
	div.numerics input.sole { padding:1dip 3dip; line-height:1.4em; }
*/

	[name="extra"] {
		margin: 6dip 0dip;
	}

	div.predefined {
		//display: none;
		flow: horizontal-wrap;
		border-spacing: *;
		margin: 6dip 0 0 0;
		flow: row(span,span,span,span,span,span,span,span,span,span,span,span);
	}
	div.predefined > span {
		display: inline-block;
		margin: 0;
		size: 28dip;
	}
	div.predefined > span:hover::marker {
		size: 24dip;
		border: 2dip solid #7f7f7f;
		cursor: pointer;
	}
	div.predefined > span.current {
		foreground-image: url(icon:i-tick);
		foreground-size: 100%;
		foreground-repeat: no-repeat;
		fill: #ffffffcc;
	}

	:root:popup {
		border: 1dip solid @activeColor;
		border-radius: 1dip;
		margin-top: 2dip;
	}
}

widget[type="color"] { 
	prototype: ColorSelector url(color-selector.js); 
	style-set:color-selector; 
	content-isolate:isolate;
}

@set color-input {
	:root {
		font: inherit;
		display: inline-block;
		flow: horizontal;
		color: color(widget-text);
		padding: 0;
		width: max-content;
		height: 28dip;
		popup-position: at-bottom;
		background-color: #fff;
		background-image: none;
		border: 2dip solid @ctrlBorderColorLight;
		margin: 10dip 0 11dip 0;
	}
	:root:hover {
		border: 2dip solid @ctrlBorderColor !important;
	}
	:root:active,
	:root:owns-popup,
	:root.focused {
		border: 2dip solid @activeColor !important;
	}	

	:root:disabled {
		opacity: 0.5;
	}

	:root > input { 
		height: *; 
		width: calc(8ch + 0.8em);
		padding: 0.2em 0;
		margin: 0;
		border: none;
		text-align: center;
		text-selection: windowtext transparent;
	}

	:root.focused > input {
		text-selection: #fff @activeColor !important;
	}

	:root[alpha] > input {
		width:10.5ch;
	}

	:root:rtl > input {
		padding: 0.2em 0.4ch 0.2em 0;
	}

	:root:disabled > input { color: color(widget-disabled-text); }

	:root > span {
		behavior: clickable;
		display: block;
		padding: 0;
		background-color: #fff;
		size: 28dip;
		cursor: pointer;
	}

	:root > button {
		display: none !important;
	}
	:root:rtl > button {
		border-radius: length(border-radius) 0 0 length(border-radius);
	}
		
	:root > button:hover    { transition:none; background:color(button-hover); }
	:root > button:active   { background: color(button-hover); }
	:root > button:disabled { background-color: color(widget-disabled); color: color(widget-disabled-text); fill: color(widget-disabled-text); }

	:root[embedded] > span {
		width: *;    
	}
	
	@media dropdown-animation-supported {
		:root { popup-animation: popup-animation(type:blend,duration:100ms); }
	}
}

input[type="color"] {
	prototype: ColorInput url(color-selector.js) !important; 
	style-set: color-input !important;
	content-isolate: none !important;
}