22

✏️ Editing: color.css

/* TYPE Color */
.usof-form-row.type_color .usof-form-row-control {
	white-space: nowrap;
	}
.usof-color {
	display: inline-block;
	vertical-align: top;
	position: relative;
	line-height: 2.8em;
	min-height: 2.8em;
	width: 240px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMFJREFUeNrsVlsOhCAM7Jg9j97/GHChMTxcC9UPTNatif0AIxhmOlMqSMpIhBiG9k/y43gP+P8Bn/FPkIbiPZQhTRSafXDKoMDL4DNqWn7fNccMlAYF66ZE/8avBvu0qUG1sPvKLQOFlo0GigfvcVGI8cQbNr8plnlxehflPELlMbMhYDzu7zaluj1onM7GL0/sB+ic7pGBxcXu+QkuqhhrJasartXQ9iqPGtQKOO20lKscbtbAIAXk8J/HEYNVgAEAHShEyUuW684AAAAASUVORK5CYII=");
	background-size: 16px;
	}
	.usof-color-value {
		line-height: 2.8em;
		}
	.usof-color-preview {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		}
	.usof-color input.usof-color-value {
		display: block;
		direction: ltr;
		position: relative;
		font-size: 12px !important;
		font-family: monospace !important;
		font-weight: bold;
		text-align: left;
		line-height: inherit !important;
		box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset !important;
		background: none !important;
		border: none !important;
		border-radius: 0;
		color: var(--usof-color-gray-90);
		}
	.usof-color input.usof-color-value.white {
		color: var(--usof-color-white);
		}
	.usof-color-clear {
		position: absolute;
		top: 0;
		text-align: center;
		width: 2em;
		cursor: pointer;
		opacity: 0;
		}
	.usof-color.clear_left .usof-color-clear {
		left: -2em;
		}
	.usof-color.clear_right .usof-color-clear {
		right: -2em;
		}
	.usof-color:hover .usof-color-clear {
		opacity: .5;
		}
	.usof-color-clear:hover {
		opacity: 1 !important;
		}
		.usof-color-clear:before {
			content: '\f05e';
			font-family: fontawesome;
			font-weight: 900;
			vertical-align: top;
			}

.usof-color-text {
	display: inline-block;
	vertical-align: top;
	line-height: 1.4em;
	margin: .7em 1em;
	}
.usof-color.active + .usof-color-text,
.usof-color:hover + .usof-color-text {
	color: var(--usof-color-blue-50);
	}

/* Dynamic variables */
.usof-color.dynamic_colors > .usof-color-value {
	padding-right: 2em;
	}
	.usof-color.dynamic_colors .usof-color-arrow {
		display: none;
		position: absolute;
		right: 0;
		top: 0;
		text-align: center;
		width: 2em;
		cursor: pointer;
		color: var(--usof-color-gray-90);
		}
	.usof-color.dynamic_colors .white ~ .usof-color-arrow {
		color: var(--usof-color-white);
		}
	.usof-color.dynamic_colors:hover .usof-color-arrow {
		display: block;
		}
	.usof-color.dynamic_colors .usof-color-arrow:hover {
		background: rgba(0,0,0,0.05);
		}
		.usof-color.dynamic_colors .usof-color-arrow:after {
			content: '\f0d7';
			font-family: fontawesome;
			font-weight: 900;
			font-size: 16px;
			}
		.usof-color.dynamic_colors.show .usof-color-arrow:after {
			content: '\f0d8';
			}

/* Loaded */
	.usof-color.dynamic_colors .usof-color-arrow.loaded:after,
	.usof-color.dynamic_colors .loaded ~ .usof-color-list {
		display: none !important;
		}
	.usof-color.dynamic_colors .usof-color-arrow.loaded:before {
		display: block;
		content: '';
		height: 10px;
		width: 10px;
		margin: 13px 8px;
		border-radius: 50%;
		border: 2px solid;
		border-top-color: transparent;
		animation: rotation 1s infinite cubic-bezier(.6,.3,.3,.6);
		}

/* List */
.usof-color.dynamic_colors:not(.show) .usof-color-list {
	display: none !important;
	}
.usof-color.dynamic_colors .usof-color-list {
	position: absolute;
	z-index: 2;
	max-height: 300px;
	min-width: 100%;
	overflow-y: auto;
	background: var(--usof-color-white);
	box-shadow: var(--usof-box-shadow);
	}
	.usof-color.dynamic_colors .usof-color-list-group:before {
		content: attr(data-group);
		display: block;
		font-weight: bold;
		line-height: 30px;
		padding: 10px 10px 0;
		}
	.usof-color.dynamic_colors .usof-color-list-item {
		display: flex;
		align-items: center;
		padding: 0 10px;
		line-height: 32px;
		overflow: hidden;
		cursor: pointer;
		}
	.usof-color.dynamic_colors .usof-color-list-item.selected {
		background: var(--usof-color-gray-5);
		}
	.usof-color.dynamic_colors .usof-color-list-item:hover {
		background: var(--usof-color-gray-2);
		}
		.usof-color.dynamic_colors .usof-color-list-item-name {
			flex-shrink: 0;
			font-size: 13px;
			padding: 0 15px 0 5px;
			cursor: pointer;
			}

/* COLOR PICKER */
.usof-colpick {
	display: none;
	flex-wrap: wrap;
	position: absolute;
	top: 40px;
	z-index: 11;
	font-size: 12px;
	padding: 5px;
	width: 240px;
	box-sizing: border-box;
	background: var(--usof-color-white);
	box-shadow: var(--usof-box-shadow);
	-webkit-user-select: none;
	user-select: none;
	}
.usof-colpick.type_gradient {
	width: 470px;
	}
	.usof-colpick * {
		box-sizing: border-box;
		}
	.usof-colpick .usof-radio {
		width: 220px;
		margin: 5px !important;
		border-radius: 0;
		}
		.usof-colpick .usof-radio-value {
			border-radius: 0;
			}
.usof-colpick.type_solid .usof-colpick-angle,
.usof-colpick.type_solid .usof-colpick-wrap.second {
	display: none;
	}

/* Coloring */
.usof-colpick-wrap {
	display: flex;
	flex-shrink: 0;
	margin: 5px;
	}
.usof-colpick-color {
	position: relative;
	height: 160px;
	width: 160px;
	cursor: crosshair;
	background: #f00; /* fixed color */
	}
	.usof-colpick-color:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		}
	.usof-colpick-color:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		}
	.usof-colpick-color-selector {
		position: absolute;
		z-index: 1;
		width: 10px;
		height: 10px;
		margin: -5px 0 0 -5px;
		border: 1px solid #000;
		box-shadow: 0 0 0 1px var(--usof-color-white) inset;
		border-radius: 50%;
		}
.usof-colpick-hue,
.usof-colpick-alpha {
	position: relative;
	height: 160px;
	width: 30px;
	cursor: n-resize;
	}
.usof-colpick-hue {
	background: linear-gradient( #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00 );
	}
.usof-colpick-alpha:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMFJREFUeNrsVlsOhCAM7Jg9j97/GHChMTxcC9UPTNatif0AIxhmOlMqSMpIhBiG9k/y43gP+P8Bn/FPkIbiPZQhTRSafXDKoMDL4DNqWn7fNccMlAYF66ZE/8avBvu0qUG1sPvKLQOFlo0GigfvcVGI8cQbNr8plnlxehflPELlMbMhYDzu7zaluj1onM7GL0/sB+ic7pGBxcXu+QkuqhhrJasartXQ9iqPGtQKOO20lKscbtbAIAXk8J/HEYNVgAEAHShEyUuW684AAAAASUVORK5CYII=") repeat scroll 0% 0%/16px;
	}
	.usof-colpick-hue-selector,
	.usof-colpick-alpha-selector {
		position: absolute;
		left: 0;
		right: 0;
		height: 6px;
		margin-top: -3px;
		border: 1px solid #000;
		box-shadow: 0 0 0 1px var(--usof-color-white) inset;
		}

/* Angle */
.usof-colpick-angle {
	width: 220px;
	margin: 5px;
	line-height: 30px;
	text-align: center;
	position: relative;
	cursor: w-resize;
	background: #ccc;
	}
	.usof-colpick-angle-selector {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 6px;
		margin-left: -3px;
		border: 1px solid #000;
		box-shadow: 0 0 0 1px var(--usof-color-white) inset;
		}

/* Palette */
.usof-colpick-palette {
	display: flex;
	flex: 1 0 100%;
	height: 27.5px;
	margin: 5px;
	}
.usof-colpick-palette-value {
	flex-shrink: 0;
	position: relative;
	height: 27.5px;
	width: 27.5px;
	background:	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMFJREFUeNrsVlsOhCAM7Jg9j97/GHChMTxcC9UPTNatif0AIxhmOlMqSMpIhBiG9k/y43gP+P8Bn/FPkIbiPZQhTRSafXDKoMDL4DNqWn7fNccMlAYF66ZE/8avBvu0qUG1sPvKLQOFlo0GigfvcVGI8cQbNr8plnlxehflPELlMbMhYDzu7zaluj1onM7GL0/sB+ic7pGBxcXu+QkuqhhrJasartXQ9iqPGtQKOO20lKscbtbAIAXk8J/HEYNVgAEAHShEyUuW684AAAAASUVORK5CYII=");
	background-size: 16px;
	}
	.usof-colpick-palette-value span {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
		box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset;
		}
	.usof-colpick-palette-delete {
		display: none;
		position: absolute;
		z-index: 1;
		top: 100%;
		left: 0;
		right: 0;
		line-height: 27.5px;
		text-align: center;
		background-color: var(--usof-color-gray-90);
		color: var(--usof-color-white);
		cursor: pointer;
		transform-origin: 0 0;
		transform: scaleY(0);
		transition: transform .15s;
		}
	.usof-colpick-palette-delete:hover {
		background-color: var(--usof-color-red-30);
		}
	.usof-colpick-palette-value:hover .usof-colpick-palette-delete {
		transform: scaleY(1);
		transition: transform .15s ease .6s;
		}
		.usof-colpick-palette-delete:before {
			vertical-align: top;
			content: '\f2ed';
			font-family: fontawesome;
			font-weight: 900;
			}
.usof-colpick-palette-add {
	display: none;
	flex-shrink: 0;
	text-align: center;
	line-height: 27.5px;
	width: 27.5px;
	cursor: pointer;
	}
.usof-colpick-palette-add:hover {
	background-color: var(--usof-color-gray-5);
	}
	.usof-colpick-palette-add:before {
		vertical-align: top;
		content: '\f067';
		font-family: fontawesome;
		font-weight: 900;
		}
.usof-colpick-palette-value.deleting,
.usof-colpick-palette-add.adding {
	opacity: .25;
	}
.toplevel_page_us-theme-options .usof-colpick-palette-delete,
.toplevel_page_us-theme-options .usof-colpick-palette-add {
	display: block;
	}
.usof-colpick-palette-add:nth-child(9) {
	display: none !important;
	}

MR SKB