22

✏️ Editing: _general.css

/*
 *
 * UpSolution Options Framework
 *
 */

/* Icons
   ========================================================================== */
[class*="icon_"]:before {
	font-family: 'fontawesome';
	font-style: normal;
	font-weight: 400;
	}
.icon_add:before {
	content: '\f067';
	}
.icon_left:before {
	content: '\f053';
	}
.icon_clone:before {
	content: '\f24d';
	}
.icon_delete:before {
	content: '\f2ed';
	}
.icon_close:before {
	content: '\f00d';
	font-size: 1.2em;
	}
.icon_menu:before {
	content: '\f0c9';
	}
.icon_eye:before {
	content: '\f06e';
	}
.icon_devices:before {
	content: '\f87a';
	}
.icon_devices_default:before {
	content: '\f108';
	}
.icon_devices_laptops:before {
	content: '\f109';
	}
.icon_devices_tablets:before {
	content: '\f3fa';
	}
.icon_devices_mobiles:before {
	content: '\f3cd';
	}
.icon_css3:before {
	content: 'CSS';
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	}

/* Customize WordPress admin pages
   ========================================================================== */
body.us_builder,
body.toplevel_page_us-theme-options {
	overflow-y: scroll;
	background-color: var(--usof-color-white);
	}
body.us_builder.us-popup,
body.toplevel_page_us-theme-options.us-popup {
	overflow: hidden;
	}
body.us_builder #wpcontent,
body.us_builder #wpbody-content,
.toplevel_page_us-theme-options #wpcontent,
.toplevel_page_us-theme-options #wpbody-content {
	padding: 0 !important;
	}
body.us_builder #wpbody-content .wrap,
.toplevel_page_us-theme-options #wpbody-content .wrap {
	margin: 0;
	}
body.us_builder .wrap > *:not(form),
body.us_builder #screen-meta-links,
body.us_builder #post-body-content,
body.us_builder #postbox-container-2,
body.us_builder .postbox:not(#ml_box),
body.us_builder #wpfooter,
.toplevel_page_us-theme-options #wpfooter,
.toplevel_page_us-theme-options .wrap > *:not(.usof-container),
.usof-container.theme_activated .us-screenlock,
.usof-container .hidden {
	display: none !important;
	}

.toplevel_page_us-theme-options .us-migration {
	position: fixed;
	left: 160px;
	right: 0;
	margin: 0;
	z-index: 33;
	}

/* Base
   ========================================================================== */
.usof-container {
	font-size: 14px;
	line-height: 24px;
	}
.usof-container.type_builder,
.wrap > .usof-container {
	padding-top: 60px;
	}
	.usof-container * {
		box-sizing: border-box;
		}
	.usof-container a {
		text-decoration: none;
		}
	.usof-container a:hover {
		text-decoration: underline;
		}
.us-bld-window.dragged,
.usof-container.dragged {
	-webkit-user-select: none;
	user-select: none;
	}

/* Basic Form Fields
   ========================================================================== */

/* Inputs */
.usof-container input,
.usof-container textarea,
.usof-container select {
	font-size: inherit;
	margin: 0;
	width: 100%;
	border: none;
	background-color: var(--usof-color-gray-2);
	}
.usof-container input:not(:focus),
.usof-container textarea:not(:focus),
.usof-container select:not(:focus) {
	box-shadow: var(--usof-box-shadow-inset);
	}
.usof-container input {
	line-height: 2.8em;
	}
.usof-container select {
	max-width: none;
	line-height: 2.8em;
	}
.usof-container select:focus {
	color: inherit;
	}
.usof-form-row select option {
	font-weight: normal;
	}
.usof-container textarea {
	padding: 6px 10px;
	min-height: 150px;
	}
::-moz-placeholder {
	opacity: .5;
	color: inherit;
	}
::-webkit-input-placeholder {
	color: inherit;
	opacity: .5;
	}

/* Buttons */
button::-moz-focus-inner {
	border: 0;
	padding: 0;
	}
.usof-button {
	display: inline-block;
	vertical-align: top;
	font-weight: 600;
	line-height: 2.8em !important;
	text-decoration: none;
	text-align: center;
	padding: 0 2em;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: none;
	border-radius: 4em;
	box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
	background-color: var(--usof-color-gray-2);
	color: inherit;
	}
.wp-core-ui .usof-button {
	padding: 0 2em;
	border: none;
	border-radius: 4em;
	box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
	}
.usof-button:hover {
	background-color: var(--usof-color-gray-5);
	}
.usof-button[disabled] {
	opacity: .5;
	cursor: default;
	pointer-events: none;
	}
.usof-button.type_save {
	box-shadow: none;
	min-width: 200px;
	}
	.usof-button span {
		transition: opacity .2s;
		}

/* Preloader */
.usof-preloader {
	display: inline-block;
	vertical-align: top;
	position: absolute !important;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	opacity: 0;
	transition: opacity .2s;
	}
	.usof-preloader:before,
	.usof-preloader:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		border: 2px solid;
		}
	.usof-preloader:before {
		opacity: .33;
		}
	.usof-preloader:after {
		border-color: transparent;
		border-top-color: inherit;
		animation: rotation 1s infinite cubic-bezier(.6,.3,.3,.6);
		}
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(1turn); }
	}

/* Control element
   ========================================================================== */
.usof-control {
	position: relative;
	}
	.usof-control .usof-button {
		display: block;
		font-size: inherit;
		z-index: 3;
		}
	.usof-control-message {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		font-weight: 600;
		line-height: 20px;
		text-align: center;
		padding: 10px 0;
		color: var(--usof-color-green-20);
		opacity: 0;
		transition: opacity .2s;
		}

/* STATUS clear */
.usof-control.status_clear .usof-button.type_save {
	opacity: .33;
	cursor: default;
	pointer-events: none;
	}

/* STATUS notsaved */
.usof-control.status_notsaved .usof-button {
	opacity: 1;
	pointer-events: auto;
	}

/* STATUS loading */
.usof-button.loading,
.usof-control.status_loading .usof-button,
.usof-schemes-controls.loading .usof-button {
	cursor: default;
	}
.usof-button.loading span,
.usof-control.status_loading .usof-button span,
.usof-schemes-controls.loading .usof-button span {
	opacity: 0;
	}
.usof-button.loading .usof-preloader,
.usof-control.status_loading .usof-button .usof-preloader,
.usof-schemes-controls.loading .usof-button .usof-preloader {
	opacity: 1;
	}

/* STATUS success */
.usof-control.status_success .usof-button {
	cursor: default;
	pointer-events: none;
	opacity: 0;
	}
.usof-control.status_success .usof-control-message {
	opacity: 1;
	}

/* STATUS error */
.usof-control.status_error .usof-button {
	cursor: default;
	pointer-events: none;
	opacity: 0;
	}
.usof-control.status_error .usof-control-message {
	color: var(--usof-color-red-30);
	opacity: 1;
	}

/* FOR color schemes */
.usof-header .usof-control.for_schemes {
	margin-left: 0;
	margin-right: 0;
	}

/* Header
   ========================================================================== */
.usof-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	position: fixed;
	z-index: 13;
	top: 32px;
	left: 160px;
	right: 0;
	background-color: var(--usof-color-gray-80);
	color: var(--usof-color-white);
	}
@media screen and ( min-width: 961px ) {
.wp-admin.folded .usof-header {
	left: 36px;
	}
.rtl.wp-admin.folded .usof-header {
	left: 0;
	right: 36px;
	}
}
.usof-header-logo {
	flex-shrink: 0;
	font-weight: 600;
	line-height: 60px;
	padding: 0 40px;
	width: 180px;
	white-space: nowrap;
	background-color: var(--usof-color-gray-70);
	}
	.usof-header-logo span {
		color: var(--usof-color-blue-20);
		}
.usof-header-title {
	margin-left: 40px;
	margin-right: auto;
	max-width: calc(100vw - 620px);
	}
	.usof-header-title span {
		display: inline-block;
		vertical-align: top;
		font-size: 20px;
		line-height: 60px;
		color: var(--usof-color-gray-20);
		}
	.usof-header-title h2 {
		display: inline-block;
		vertical-align: top;
		font-size: 20px;
		line-height: 60px;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: var(--usof-color-white);
		}
.usof-header .usof-control {
	flex-shrink: 0;
	margin: 10px;
	}

/* Side Navigation
   ========================================================================== */
.usof-nav {
	position: absolute;
	z-index: 12;
	top: 60px;
	left: 0;
	width: 180px;
	}
	.usof-nav-bg {
		position: fixed;
		top: 0;
		bottom: 0;
		width: inherit;
		background-color: var(--usof-color-gray-2);
		}
	.usof-nav-list {
		margin: 0;
		}
	@media (min-height: 612px) {
	.usof-nav-list {
		position: fixed;
		width: inherit;
		}
	}
		.usof-nav-item {
			margin: 0;
			position: relative;
			}
		.usof-nav-item.level_1.current {
			box-shadow: 0 1px 0 rgba(0,0,0,0.1);
			background-color: var(--usof-color-white);
			}
			.usof-nav-anchor {
				display: block;
				line-height: 18px;
				position: relative;
				text-decoration: none;
				box-shadow: none !important;
				color: inherit;
				}
				.usof-nav-title {
					display: block;
					font-weight: 600;
					text-overflow: ellipsis;
					overflow: hidden;
					}
			.usof-nav-anchor.level_1 {
				padding: 11px 11px 11px 40px;
				text-decoration: none !important;
				color: inherit;
				}
			.usof-nav-item.level_1:hover .usof-nav-anchor.level_1 {
				background-color: var(--usof-color-gray-5);
				}
			.usof-nav-item.level_1.current .usof-nav-anchor.level_1 {
				background-color: var(--usof-color-white);
				color: var(--usof-color-blue-50);
				}
				.usof-nav-anchor.level_1 .usof-nav-icon {
					display: block;
					position: absolute;
					z-index: 1;
					top: 12px;
					left: 12px;
					height: 16px;
					width: 16px;
					}

/* Compact Navigation */
.usof-container.nav_compact .usof-header-logo {
	padding-left: 25px;
	width: auto;
	background: none;
	color: var(--usof-color-gray-30);
	}
	.usof-container.nav_compact .usof-header-logo .dash {
		display: inline;
		}
.usof-container.nav_compact .usof-header-title {
	padding-left: 0;
	}
.usof-container.nav_compact .usof-nav {
	width: 46px;
	}
.usof-container.nav_compact .usof-content {
	margin-left: 46px;
	}
.usof-container.nav_compact .usof-nav-anchor {
	height: 46px;
	}
.usof-container.nav_compact .usof-nav-title {
	visibility: hidden;
	position: absolute;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	padding: 13px 13px 13px 0;
	background-color: var(--usof-color-gray-5);
	opacity: 0;
	transition: opacity .1s .3s;
	}
.usof-container.nav_compact .usof-nav-item:hover .usof-nav-title {
	visibility: visible;
	opacity: 1;
	}
.usof-container.nav_compact .usof-nav-item.current .usof-nav-title {
	display: none;
	}

/* Content
   ========================================================================== */
.usof-content {
	margin-left: 180px;
	}
	.usof-section {
		position: relative;
		max-width: 920px;
		}
		.usof-section-header {
			display: none;
			font-size: 24px;
			line-height: 30px;
			text-align: center;
			padding: 20px 40px;
			cursor: pointer;
			background-color: var(--usof-color-gray-2);
			}
		.usof-section-header.current {
			background-color: var(--usof-color-white);
			}
		.usof-section + .usof-section .usof-section-header {
			box-shadow: var(--usof-box-shadow-inset);
			}
			.usof-section-header h3 {
				font-size: inherit;
				line-height: inherit;
				margin: 0;
				color: var(--usof-color-blue-50);
				}
		.usof-section-content {
			display: flex;
			flex-wrap: wrap;
			padding: 20px 0 40px;
			}
			.usof-form-row {
				clear: both;
				padding: 15px 40px;
				width: 100%;
				}
				.usof-form-row:after {
					display: block;
					content: '';
					clear: both;
					}
				.usof-form-row-title {
					line-height: 1.4;
					padding-bottom: .4em;
					}
					.usof-form-row-title span {
						font-weight: 600;
						}
					.usof-form-row-title i {
						color: var(--usof-color-gray-30);
						}
				.usof-form-row-field {
					position: relative;
					}

/* Improvements for Colors tab */
.usof-section[data-id="colors"] {
	max-width: none;
	}

/* Improvements for Custom Code tab */
.usof-section[data-id="code"] {
	max-width: none;
	}
.usof-section[data-id="code"] .usof-section-content {
	display: block;
	overflow: hidden;
	padding: 15px 20px 0;
	}
.usof-section[data-id="code"] .usof-form-row {
	float: left;
	clear: none;
	padding: 15px 20px;
	width: 50%;
	}
.usof-section[data-id="code"] .usof-form-row.type_css .CodeMirror {
	height: calc(100vh - 32px - 60px - 15px - 15px - 40px - 15px);
	}
.usof-section[data-id="code"] .usof-form-row.type_html .CodeMirror {
	height: calc(50vh - 32px - 60px - 26px);
	}

/* Form row description */
.usof-form-row-desc {
	display: none;
	}
	.usof-form-row-desc code {
		font-size: inherit;
		white-space: nowrap;
		padding: 0;
		}
	/* type 1 */
	.usof-form-row.desc_1 .usof-form-row-desc {
		display: block;
		}
		.us-icon-desc,
		.usof-form-row-hint-text,
		.usof-form-row.desc_1 .usof-form-row-desc-text {
			font-size: .9em;
			line-height: 1.2;
			padding-top: .3em;
			color: var(--usof-color-gray-30);
			}
	/* type 2 & 3 */
	.usof-form-row.desc_2 .usof-form-row-desc {
		display: block;
		position: absolute;
		top: .5em;
		right: -2em;
		}
	.usof-form-row.desc_3 .usof-form-row-desc {
		display: block;
		position: absolute;
		top: .5em;
		left: -2em;
		}
	.usof-form-row.desc_3 .usof-form-row-title {
		padding-right: 2.5em;
		}
	.usof-form-row.desc_4 .usof-form-row-desc {
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: -2px;
		}
		.usof-form-row.desc_2 .usof-form-row-desc-icon,
		.usof-form-row.desc_3 .usof-form-row-desc-icon,
		.usof-form-row.desc_4 .usof-form-row-desc-icon {
			font-family: fontawesome;
			font-weight: 900;
			text-align: center;
			width: 2em;
			cursor: help;
			color: var(--usof-color-gray-10);
			}
			.usof-form-row.desc_2 .usof-form-row-desc-icon:before,
			.usof-form-row.desc_3 .usof-form-row-desc-icon:before,
			.usof-form-row.desc_4 .usof-form-row-desc-icon:before {
				content: '\f059';
				}
		.usof-tooltip-text,
		.usof-form-row.desc_2 .usof-form-row-desc-text,
		.usof-form-row.desc_3 .usof-form-row-desc-text,
		.usof-form-row.desc_4 .usof-form-row-desc-text {
			position: absolute;
			top: 32px;
			left: 0;
			z-index: 111;
			font-size: 12px;
			line-height: 18px;
			padding: 12px 15px;
			width: 270px;
			background-color: var(--usof-color-gray-90);
			color: var(--usof-color-white);
			opacity: 0;
			visibility: hidden;
			transition: opacity .2s ease .2s;
			}
		.usof-tooltip:hover .usof-tooltip-text,
		.usof-form-row.desc_2 .usof-form-row-desc:hover .usof-form-row-desc-text,
		.usof-form-row.desc_3 .usof-form-row-desc:hover .usof-form-row-desc-text,
		.usof-form-row.desc_4 .usof-form-row-desc:hover .usof-form-row-desc-text {
			opacity: 1;
			visibility: visible;
			}
			.usof-tooltip-text:before,
			.usof-form-row.desc_2 .usof-form-row-desc-text:before,
			.usof-form-row.desc_3 .usof-form-row-desc-text:before,
			.usof-form-row.desc_4 .usof-form-row-desc-text:before {
				content: '';
				position: absolute;
				left: 12px;
				top: -6px;
				height: 12px;
				width: 12px;
				background-color: var(--usof-color-gray-90);
				transform: rotate(45deg);
				}
			.usof-tooltip-text:after,
			.usof-form-row.desc_2 .usof-form-row-desc-text:after,
			.usof-form-row.desc_3 .usof-form-row-desc-text:after,
			.usof-form-row.desc_4 .usof-form-row-desc-text:after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				top: -12px;
				height: 20px;
				}
			.usof-form-row-desc-text img {
				display: block;
				max-width: 100px;
				margin: 10px 0 3px;
				}
			.usof-tooltip-text a:hover,
			.usof-form-row.desc_2 .usof-example:hover,
			.usof-form-row.desc_3 .usof-example:hover,
			.usof-form-row.desc_4 .usof-example:hover {
				color: #fff;
				}
			.usof-tooltip-text a,
			.usof-form-row.desc_2 .usof-form-row-desc-text a,
			.usof-form-row.desc_3 .usof-form-row-desc-text a,
			.usof-form-row.desc_4 .usof-form-row-desc-text a {
				color: var(--usof-color-blue-20);
				}

.usof-tooltip {
	position: relative;
	border-bottom: 1px dotted;
	cursor: help;
	}
	.usof-tooltip-text {
		width: 150px;
		}

/* Message */
.usof-message {
	display: inline-block;
	vertical-align: top;
	font-weight: 600;
	padding: 8px;
	color: var(--usof-color-green-20);
	}

/* Clickable examples */
.usof-example {
	border-bottom: 1px dotted;
	cursor: pointer;
	}
.usof-example:hover {
	color: inherit;
	}

/* Form row states */
.usof-form-row-state {
	display: none;
	font-size: .9em;
	line-height: 1.2;
	padding-top: .3em;
	}
	/* error */
	.usof-form-row.validate_error input[type="text"],
	.usof-form-row.validate_error input[type="password"],
	.usof-form-row.validate_error input[type="email"],
	.usof-form-row.validate_error input[type="url"],
	.usof-form-row.validate_error input[type="tel"],
	.usof-form-row.validate_error input[type="number"],
	.usof-form-row.validate_error input[type="date"],
	.usof-form-row.validate_error input[type="search"],
	.usof-form-row.validate_error textarea,
	.usof-form-row.validate_error select,
	.usof-container textarea.validate_error {
		box-shadow: 0 0 0 1px red;
		}
	.usof-form-row.validate_error .usof-form-row-state {
		display: block;
		color: red;
		}

/* Form Row Modifications
   ========================================================================== */

/* Disabled */
.usof-form-row.disabled .usof-form-row-control {
	opacity: .5;
	}
.usof-form-row.disabled .usof-form-row-control * {
	cursor: not-allowed;
	}

/* Sticky */
.usof-form-row.sticky {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
	top: 77px; /* 92px - 15px */
	background: var(--usof-color-white);
	}

/* FOR above */
.usof-form-row.for_above {
	padding-top: 0 !important;
	}

/* Title Position at side */
.usof-form-row.titlepos_side .usof-form-row-title {
	float: left;
	width: 30%;
	padding-top: .8em;
	padding-right: 1.4em;
	}
.usof-form-row.titlepos_side .usof-form-row-field {
	float: right;
	width: 70%;
	}

/* COLUMNS */
@media screen and ( min-width: 1025px ) {
.usof-form-row.cols_2 {
	width: 50%;
	}
.usof-form-row.cols_3 {
	width: 33.3333%;
	}
.usof-form-row.cols_4 {
	width: 25%;
	}
.usof-form-row.cols_5 {
	width: 20%;
	}
.usof-form-row.for_socials {
	width: 28%;
	}
.usof-form-row.for_socials + .usof-form-row {
	flex-grow: 1;
	width: auto;
	padding-left: 0;
	}
.rtl .usof-form-row.for_socials + .usof-form-row {
	padding-left: 1em;
	padding-right: 0;
	}
}

/* Inline Appearance */
@media ( min-width: 481px ) {
.usof-form-row.inline {
	padding: 0 25px 15px 0;
	}
.usof-form-row.inline:not(.cols_2) {
	width: auto;
	}
.usof-form-row.inline.type_checkboxes {
	padding-top: 6px;
	}
	.usof-form-row.inline .usof-checkbox-text {
		white-space: nowrap;
		}
	.usof-form-row.inline .usof-form-row-title {
		display: inline-block;
		vertical-align: top;
		padding: 10px 10px 10px 0;
		}
		.usof-form-row.inline .usof-form-row-title span {
			font-weight: normal;
			}
	.usof-form-row.inline .usof-form-row-field {
		display: inline-block;
		vertical-align: top;
		}
		.usof-form-row.inline .usof-form-row-control {
			display: inline-block;
			vertical-align: top;
			}
}
.usof-form-row.inline .usof-form-row-desc {
	display: inline-block;
	vertical-align: top;
	}
	.usof-form-row.inline .usof-form-row-desc-text {
		font-size: inherit;
		padding: 10px 0 0 10px;
		color: inherit;
		}

/* Improvements for Layouts selection */
.usof-form-row[data-name*="_id"] select {
	font-weight: 700;
	}
.usof-form-row[selected-value="__defaults__"] select {
	font-weight: normal !important;
	}

/* Improvements for Social Links in Header */
.usof-form-row.for_socials select {
	font-weight: 600;
	}

/* TYPE Css / Html */
.usof-container .CodeMirror {
	font: 12px/18px Consolas, monospace;
	}
.usof-form-row .CodeMirror {
	border-radius: 4px;
	background: var(--usof-color-gray-2);
	box-shadow: var(--usof-box-shadow-inset);
	}
	.usof-form-row .CodeMirror-gutters {
		border: none;
		background-color: #f9f9f9;
		}
	.usof-form-row .CodeMirror-linenumber {
		color: var(--usof-color-gray-30) !important;
		}

MR SKB