style.css

* { margin: 0; padding: 0; }

:root {
	--large-padding: 24px;
	--std-padding: 16px;
	--small-padding: 8px;

	--accent-color: #66CCCC;
	--select-fg: rgba(0,0,0,.65);
}

@font-face {
	font-family: 'Roboto';
	font-weight: normal;
	src: local('Roboto'),
	     local('Roboto-Regular'),
	     url('assets/fonts/roboto-regular.woff') format('woff');
}

body {
	background: #E0E0E0;
	font: 90% 'Roboto', 'Open Sans', sans-serif;
	color: #444;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--accent-color);
	color: var(--select-fg);
}
::-moz-selection {
	background: var(--accent-color);
	color: var(--select-fg);
}

a, a:link, a:visited {
	cursor: pointer;
	color: #339966;
	text-decoration: underline;
}

input, select, textarea {
	outline: none;
	color: #444;
	position: relative;
	font-weight: normal;
	box-sizing: border-box;
}

input[type=text], textarea {
	border: 1px solid #CCC;
	font-size: 14px;
	border-radius: 4px;
	padding: .4em;
	background-color: #FAFAFA;
}
input[type=text]:active, input[type=text]:focus,
textarea:active, textarea:focus {
	border-color: var(--accent-color);
}
input[type=button], input[type=submit], select, button {
	background: #ededed;
	background: linear-gradient(#ededed, #ededed 38%, #dedede);
	padding: 5px 10px;
	border: 1px solid #BFBFBF;
	border-radius: 2px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	color: #444;
	margin: 0 3px;
	cursor: pointer;
}
input[type=button]:active, input[type=submit]:active,
input[type=button]:focus, input[type=submit]:focus,
input[type=button]:hover, input[type=submit]:hover,
select:active, select:focus, select:hover,
button:active, button:focus, button:hover {
	border-color: #B3B3B3;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13);
}
input[type=button]:active, input[type=submit]:active, button:active {
	background: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
}


.non-selectable,
.control-svboard, .control-huebar,
h1, .actions-panel {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.non-scrollable {
	overflow: hidden !important;
}


#header {
	display:block;
	width:100%;
	height: 77px;
	min-width: 720px;
	min-height: 40px;
	margin: 16px 0 32px;

	background: url(assets/title/titlebar.png);
	background-size: 100% 100%;

	text-align: center;
	font-size:0px;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
	#header img {
		width: auto;
		height:100%;
	}

.card {
	background: #F5F5F5;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0,0,0,.02);
	border-radius: 3px;
	box-sizing: border-box;
	text-align: left;
}
	.card h2 {
		font-size: 130%;
		font-weight: bold;
	}

.cp-outer-container {
	margin: 0 auto;
	position:relative;
	min-height: 100%;
	width: 800px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
	.cp-outer-container .actions-panel {
		padding: 0;
	}
		.cp-outer-container .actions-panel h2 {
			margin: var(--small-padding) var(--std-padding) 0;
			padding: var(--small-padding);
			border-bottom: 1px solid #DDD;
		}

		.cp-outer-container .actions-panel > div {
			padding: var(--small-padding) var(--std-padding);
			padding-left: calc(var(--large-padding) + 24px + var(--small-padding));
			margin: 4px 0;

			background-repeat: no-repeat;
			background-position: var(--large-padding) center;

			color: #333;
			white-space: nowrap;

			cursor: pointer;
			transition: background-color .25s;
		}
			.cp-outer-container .actions-panel > div:hover {
				background-color: rgba(0,0,0,.16);
				transition-duration: .15s;
			}
			.cp-outer-container .actions-panel > div:active {
				background-color: rgba(0,0,0,.25);
				transition-duration: 0s;
			}
		.actions-panel #action-fav {
			background-image: url('assets/icons/action_fav.svg')
		}
		.actions-panel #action-info {
			background-image: url('assets/icons/action_info.svg')
		}
		.actions-panel #action-invert {
			background-image: url('assets/icons/action_invert.svg')
		}
		.actions-panel #action-random {
			background-image: url('assets/icons/action_random.svg')
		}
		.actions-panel #action-websafe {
			background-image: url('assets/icons/action_safe.svg')
		}
	/* END OF ACTIONS-PANEL */

	.cp-outer-container > .card {
		--card-margin: 4px;
		margin: var(--card-margin);
		display: inline-block;
		flex: 1 0 auto;
	}

	.cp-outer-container .main-panel {
		height: 320px;
		/*width: 564px;*/
		position: relative;
		flex: 0 0 auto;
	}
		.cp-outer-container .main-panel > * {
			vertical-align: top;
			display: inline-block;
			vertical-align: top;
		}

		.main-panel .control-huebar,
		.main-panel .control-svboard {
			position: relative;
			background-size: 100% 100%;
			cursor: default;
			overflow: visible;
		}

		.cp-outer-container .main-panel .control-svboard {
			background-image: linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, transparent);
			background-color: #F00;
			height: 320px;
			width: 320px;
			border-radius: 3px 0 0 3px;
		}
			.cp-outer-container .control-svboard .handle {
				position: absolute;
				height: 14px;
				width: 14px;
				margin: -7px 0 0 -7px;
				background-image: url(assets/picker/cursor.svg);
			}

		.cp-outer-container .main-panel .controls {
			padding: var(--std-padding);
		}
			.cp-outer-container .main-panel .controls > * {
				margin: 0 auto var(--std-padding);
			}

			.cp-outer-container .main-panel .controls .output-sample {
				position: relative;
				height: 120px;
				width: 120px;
			}
				.cp-outer-container .main-panel .output-sample > .current-color,
				.cp-outer-container .main-panel .output-sample > .preview-color  {
					display: block;
					height: 50%;
					width: 100%;
					background-color: #FFFFFF;
				}
				.cp-outer-container .main-panel .output-sample > .current-color {
					/*transition: background-color .2s linear;*/
					border-radius: 50% 50% 0 0/100% 100% 0 0;
				}
				.cp-outer-container .main-panel .output-sample > .preview-color {
					border-radius: 0 0 50% 50%/0 0 100% 100%;
				}

			.cp-outer-container .main-panel .controls .control-inputs {
				font-size: 0px;
				text-align: center;
				/*padding-top: var(--small-padding);*/
			}
				.cp-outer-container .main-panel .controls .control-inputs > div {
					margin-bottom: var(--small-padding);
				}
					.cp-outer-container .main-panel .control-inputs .input-group {
						display: inline-block;
						position: relative;
						margin-right: var(--small-padding);
						font-size: 14px;
					}
						.cp-outer-container .main-panel .control-inputs .input-group:last-child {
							margin-right: 0;
						}

				.cp-outer-container .main-panel .controls .control-inputs input[type=text] {
					width: 64px;
					padding: 6px 0 6px 24px;
					line-height: 1.15em;
					text-align: left;
				}
				.cp-outer-container .main-panel .controls .control-inputs input.hex-input {
					font-size: 24px;
					padding-left: 32px;
					padding-right: 24px;
					line-height: 1.15em;
					width: 162px;
				}
				.cp-outer-container .main-panel .controls .control-inputs span {
					display: block;
					position: absolute;
					line-height: 0px;
					top: 50%;
					left: 10px;
					z-index: 1;
					pointer-events: none;
					color: rgba(0,0,0,.5);
					font-family: sans-serif;
				}
				.cp-outer-container .main-panel .controls .control-inputs .hex-group {
					margin-top: var(--small-padding);
				}
				.cp-outer-container .main-panel .controls .control-inputs .hex-group span {
					font-size: 24px;
					left: 12px;
				}
				.cp-outer-container .main-panel .controls .control-inputs .hex-input + button {
					position: absolute;
					right: 0;
					top: 0;
					height: 100%;
					width: 32px;
					background: none;
					margin: 0;
					box-shadow: none;
					outline: none;
					border: none;
				}
					.cp-outer-container .main-panel .controls .control-inputs .hex-input + button:after {
						content: '';
						position:absolute;
						width: 100%; height: 100%;
						top: 0; left: 0;
						background: url('assets/icons/copy.svg') no-repeat center center;
						opacity: .8;
					}
						.cp-outer-container .main-panel .controls .control-inputs .hex-input + button:hover:after {
							opacity: 1;
						}
				.cp-outer-container .main-panel button .tooltip {
					--tooltip-bg: rgba(51,51,51,.75);
					position: absolute;
					bottom: 90%;
					left: 50%;
					transform: translateX(-50%);
					z-index: 100;
					white-space: nowrap;
					background: var(--tooltip-bg);
					color: #FAFAFA;
					border-radius: 3px;
					padding: 6px 10px;
					filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
					pointer-events: none;
					opacity: 1;
					transition: opacity .2s;
				}
					.cp-outer-container .main-panel button .tooltip:after {
						content: '';
						border: 6px solid transparent;
						border-top-color: var(--tooltip-bg);
						position: absolute;
						z-index: 1;
						top: 100%;
						left: 50%;
						transform: translateX(-50%);
					}
					.cp-outer-container .main-panel button .tooltip.hidden {
						opacity: 0;
					}
			/* END OF CONTROL-INPUTS */

			.cp-outer-container .main-panel .controls .control-huebar {
				height: 8px;
				width: 100%;
				margin-bottom: 0;
				background-image: url(assets/picker/huebar.png);
				border-radius: 2px;
			}
				.cp-outer-container .control-huebar .handle {
					position:absolute;
					width: 16px;
					height: 16px;
					top: -4px;
					margin-left: -8px;

					border-radius: 10px;
					background-color: #424242;
					box-shadow: 0 1px 1px rgba(0,0,0,0.20);
					cursor: pointer;
				}
		/* END OF CONTROLS */

	/* END OF MAIN-PANEL */

	.color-element {
		cursor: pointer;
		min-width: 80px;
		max-width: 7em;
		position: relative;
		margin-right: calc(var(--small-padding) / 2);
		flex: 0 0 auto;
		overflow: hidden;
		box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
	}
		.color-element:last-child {
			margin-right: 0;
		}
		.color-element:active {
			transform: scale(1.03, 1.03);
			z-index:1;
		}
		.color-element.hidden {
			min-width: 0;
			opacity: 0;
			margin: 0;
			pointer-events: none;
			transition-duration: .25s, .25s;
			transition-property: min-width, opacity;
		}
		.color-element span {
			display: block;
			position: absolute;
			bottom: 1px;
			left: 1px;
			right: 1px;
			background: rgba(250,250,250,.5);
			box-shadow: 0 1px 0 1px rgba(255,255,255,.25);
			color: rgba(0,0,0,.7);
			padding: 4px 0;
			text-align: center;
			z-index: 1;
			font-size: 14px;
			font-family: monospace;
		}
		.color-element:after {
			content: '';
			display: block;
			padding-top: 100%;
		}
		.color-element span:before {
			content:"#";
			margin: 0 .1em 0 -.1em;
		}

	.cp-outer-container .favorites-panel {
		position: relative;

		min-width: calc(100% - var(--card-margin) * 2);
		width: calc(100% - 8px);
		box-sizing: border-box;

		flex: 0 0;
		padding: var(--small-padding) var(--std-padding) var(--std-padding);
		overflow-x: hidden;
	}
		.cp-outer-container .favorites-panel h2 {
			margin: var(--small-padding) 0;
		}
		.cp-outer-container .favorites-panel .favorite-colors-box {
			display: flex;
			flex-direction: row;
		}
	/* END OF FAVORITE-COLORS */

/* END OF CP-OUTER-CONTAINER */


#footer {
	margin-top: 32px;
	padding: 16px 0;
	text-align: center;
	background: #CCC;
	border-bottom: 4px solid #339966;
}


.dialog-overlay {
	position:fixed;
	width: 100%;
	height: 100%;
	overflow: auto;
	top: 0;
	right: 0;
	background: rgba(200,200,200,.64);
	z-index: 99;
	opacity: 1;
	visibility: visible;
	transition: opacity .2s, visibility .2s;
}

	.dialog-overlay.hidden {
		opacity: 0;
		visibility: hidden;
	}

.dialog-window {
	overflow: auto;
	transition: opacity .2s linear, visibility .2s linear;

	z-index: 100;
	position: absolute;

	margin: 0 auto 2%;
	top: 4%;
	left:0;
	right: 0;

	width: 600px;
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
	--transition-duration: .25s;
	transition: opacity var(--transition-duration), transform var(--transition-duration), visibility var(--transition-duration);
}
	.dialog-window.hidden {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-32px);
	}
	.dialog-window.nodisplay {
		display: none;
	}

	.dialog-window .close-button {
		position: absolute;
		right: var(--std-padding);
		top: var(--std-padding);

		width: 16px;
		height: 16px;
		cursor: pointer;

		border: none;
		padding: 0;
		margin: 0;
		background: url('assets/icons/close.svg') no-repeat left top;
		background-size: auto 100%;
		box-shadow: none;
	}
		.dialog-window .close-button:hover {
			background-position: right top;
		}

	.dialog-window > h2 {
		margin: var(--std-padding);
		font-size: 2rem;
	}

	.dialog-window-content {
		padding: 0 var(--std-padding) var(--std-padding);
	}
/* END OF DIALOG-WINDOW */

.dialog-window .web-safe-table {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.dialog-window .web-safe-table .color-element {
		flex-grow: 0;
		max-width: initial;

		margin: 2px 0;
		width: calc(100% / 6 - 4px * 5 / 6);
		height: 64px;
	}



/* ======== LEGACY ======== */


#extended-shades,#extended-lights {
	height: 90px;
	padding:0;
	margin: 0.6em 0;
}
/*#extended-lights .color-element {
	height: 78px;
	width: 14.2%;
	margin: 0;
}*/



#ctx-window h3 {
	margin: 0 0 .2em;
}

#ctx-window h5 {
	font-size: 1em;
	font-weight: normal;
	margin: 0.6em 0 .2em;
}
#ctx-window > input {
	margin: 5px 1% 5px 0;
	padding: 6px 8px;
	display: inline-block;
	width: 49%;
	font-size: 85%;
}

.output-sample-extended {
	display: inline-block;
	height: 50px;
	width: 50px;
	border: 5px solid white;
	background-color:white;
	margin-bottom: 0.6em;
}

h3#html-extended-color {
	display:inline-block;
	line-height: 60px;
	height: 60px;
	vertical-align: top;
	margin: 0 15px;
}



.title {
	color: #444;
	left: 120%;
	margin: auto 0;
	top: 0;
	white-space:nowrap;
	line-height: 1.6em;
	height: 1.6em;
	padding: 0 .5em;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0,0,0,.22);
}
.title:before {
	content:'';
	height: 0;
	width: 0;
	border: 0.4em solid transparent;
	border-right-color: white;
	position:absolute;
	left:-0.6em;
	top: 0.4em;
}