obscreen/data/www/scss/pages/_content-composition.scss

.view-content-edit.view-content-edit-composition main .main-container {

	.page-panel.left-panel {
		flex: 1;

		.form-holder {
			margin: 20px 20px 20px 10px;
			flex: 1;
		}
	}

	.page-content {
		flex: 2;
	}

	.page-panel.right-panel {
		flex: 1;
	}

	h3.main {
		font-size: 16px;
		font-weight: 500;
		color: $gscaleD;
		text-decoration: none;
		margin-top: 5px;
		border-bottom: 1px solid $gscale2;
		margin-bottom: 20px;
		padding-bottom: 10px;
		align-self: stretch;
	}

	.toolbar {
		margin-bottom: 20px;
	}

	.presets {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20px;

		h4 {
			margin-right: 5px;
			font-weight: normal;
			font-size: 14px;
			text-decoration: underline;
		}

		button:focus,
		button {
			padding: 3px 15px;
			margin:0 3px;
			font-size: 12px;
			font-weight: normal;
			min-height: initial;
			border: 1px solid $gkscale3;
		}
	}

	.screen-holder {
		//display: flex;
		//flex-direction: row;
		display: flex;
		flex-direction: column;
		width: 100%;
		position: relative;
		padding-top: 56.25%; /* 16:9 aspect ratio */
		overflow: hidden;
		border-radius: $baseRadius;
		outline: 4px solid rgba($gscaleF, .1);

		.screen {
			background-color: #ddd;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: none;

			.element {
				position: absolute !important;
				background-color: $gkscaleE;
				outline: 1px solid $gkscaleC;
				text-align: center;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&.focused {
					border: none;
					outline: 2px solid $seaBlue;
					z-index: 89 !important;

					.ui-resizable-handle {
						display: block;
					}
				}

				i {
					font-size: 20px;
					color: $gkscaleC;

					&.fa-cog {
						text-shadow: 0 -2px $gkscaleB, 0 0px 2px $gkscaleB;
					}
				}

				.rotate-handle {
					width: 10px;
					height: 10px;
					background-color: red;
					position: absolute;
					top: 50%;
					right: -15px;
					cursor: pointer;
					transform: translateY(-50%);
				}

				.ui-resizable-handle {
					$size: 10px;
					$sizeOffset: -1*calc($size/2);
					background: $gkscaleA;
					border: 1px solid $gkscale5;
					width: $size;
					height: $size;
					z-index: 90;
					display: none;
					position: absolute;

					&.ui-resizable-n {
						cursor: n-resize;
						top: $sizeOffset;
						left: 50%;
						margin-left: $sizeOffset;
					}

					&.ui-resizable-s {
						cursor: s-resize;
						bottom: $sizeOffset;
						left: 50%;
						margin-left: $sizeOffset;
					}

					&.ui-resizable-w {
						cursor: w-resize;
						left: $sizeOffset;
						top: 50%;
						margin-top: $sizeOffset;
					}

					&.ui-resizable-e {
						cursor: e-resize;
						right: $sizeOffset;
						top: 50%;
						margin-top: $sizeOffset;
					}

					&.ui-resizable-nw {
						cursor: nw-resize;
						top: $sizeOffset;
						left: $sizeOffset;
					}

					&.ui-resizable-ne {
						cursor: ne-resize;
						top: $sizeOffset;
						right: $sizeOffset;
					}

					&.ui-resizable-sw {
						cursor: sw-resize;
						bottom: $sizeOffset;
						left: $sizeOffset;
					}

					&.ui-resizable-se {
						cursor: se-resize;
						bottom: $sizeOffset;
						right: $sizeOffset;
					}
				}
			}
		}
	}

	.elements-holder {
		align-self: stretch;

		h3 {
			font-size: 16px;
			font-weight: 500;
			color: $gscaleD;
			text-decoration: none;
			margin: 0 0 20px 0;

			&.divide {
				border-top: 1px solid $gscale2;
				margin-top: 10px;
				padding-top: 20px;
			}
		}

		.form-elements-list {
			padding: 10px;
			background: $gscale2;
			border-radius: $baseRadius;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-self: flex-start;

			.element-list-item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				> i {
					color: $gscaleE;
					margin:0 10px 0 0;
					cursor: move;
					width: 30px;
					text-align: center;
				}

				.inner:hover,
				&.focused .inner {
					background-color: $seaBlue;
					color: white;
					font-weight: bold;

					button.btn-naked {
						color: $white;
					}
				}

				.inner {
					cursor: pointer;
					padding: 5px 5px 5px 10px;
					margin-bottom: 5px;
					background: $gkscaleE;
					border-radius: $baseRadius;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					align-self: stretch;
					color: $gkscale2;
					min-height: 46px;
					flex: 1;

					label {
						flex: 1;
						cursor: pointer;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 219px;
						overflow: hidden;
					}

					button {
						display: none;
						margin-left: 5px;
					}

					button.btn-naked {
						color: $gscale5;
					}

					&:hover {
						label {
							max-width: 150px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						button {
							display: block;
						}
					}
				}
			}
		}
	}


	.form-element-properties {
		flex: 1;
		align-self: stretch;

		form {
			display: flex;
			flex-direction: column;

			h3 {
				font-size: 16px;
				font-weight: 500;
				color: $gscaleD;
				text-decoration: none;
				border-bottom: 1px solid $gscale2;
				margin-bottom: 20px;
				padding-bottom: 10px;
				align-self: stretch;
			}

			.form-group {
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				display: flex;

				label {
					flex-grow: 1;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					display: flex;
					font-weight: bold;
					margin-right: 10px;
				}

				.widget {
					flex-grow: 1;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					display: flex;
					margin: 0;

					input {
						flex: 1;
						margin: 0;

						&[disabled] {
							padding: 8px 0 5px 8px;
							border: 1px solid rgba(255, 255, 255, .05);
						}
					}
				}
			}


		}
	}

}