HeapsIO.hide/bin/style.less

@import "common.less";

body {
	margin : 0;
	padding : 0;
	background-color : black;
	user-select:none;
}

//:focus { outline: none; }

ul, li {
	margin : 0;
	padding : 0;
	list-style : none;
}

body, td, th, li, p, a, input, select, textarea, body .select2-dropdown {
	font-family : Verdana, serif;
	font-size : 9pt;
	color: #aaa;
}

a {
	color : #aaf;
	text-decoration : none;
}

canvas {
	user-select: none;
}

input, textarea {
	padding-left : 4px;
}

select {
	&:focus {
		outline: none;
	}
	&:focus:hover {
		border-color : #444;
	}
}

select, input, textarea, body .select2-dropdown {
	background-color: rgb(34,34,34);
	border : 1px solid #444;
	&:focus {
		background-color: rgb(20,20,20);
	}
	&:hover {
		border-color : #888;
	}
}

body .select2-container--default {
	.select2-selection--single {
		background-color: rgb(34,34,34);
		border : none;
		height: auto;
		.select2-selection__rendered {
			padding-left: 2px;
			color: #aaa;
			line-height: inherit;
		}
		.select2-selection__arrow {
			display: none;
		}
	}
	.select2-results__option[aria-selected=true] {
		background-color: #444;
	}
	.select2-results__option--highlighted[aria-selected] {
		background-color: #5897fb;
	}
}

.select2-results__option > div {
	display : flex;
	align-items: center;
	div.tile {
		margin-right : 5px;
	}
}

input.file {
	cursor : pointer;
	&.dragover {
		border-color : white;
		background-color : rgb(20,20,20);
	}
}

input[type=button] {
	background-color : #444;
	cursor : pointer;
	&:hover {
		color : white;
		background-color : #666;
	}
	&:disabled {
		color : rgb(192, 192, 192);
		background-color : rgb(56, 56, 56);
	}
}

input[type=range] {
	-webkit-appearance: none;
	background: transparent;
	border:none;
	padding:0;
	&:focus {
		outline: none;
	}
	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		outline: 1px solid #aaa;
		height: 6px;
		width: 6px;
		background: #ccc;
		cursor: pointer;
		margin-top: 0px;
	}

	&::-webkit-slider-runnable-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		background: rgb(20,20,20);
		border: 1px solid #444;
	}
}

input[type=checkbox] {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    width: 13px;
    height: 13px;
    margin: 0;
    margin-right: 1px;
    display: block;
    float: left;
    position: relative;
    cursor:pointer;
	top:1px;
	&:after {
		content:"";
		vertical-align: middle;
		text-align: center;
		line-height: 13px;
		position: absolute;
		cursor: pointer;
		height: 13px;
		width: 13px;
		left:0px;
		top:0px;
		font-size:10px;
		box-shadow: inset 0px 1px 1px #000, 0px 1px 0px #444;
		background: #202020;
		color: #fff;
	}

	&:checked:after {
		content:'\2714';
	}
}

#mainmenu { display : none }

.hide-scroll {
	max-width : 100%;
	max-height : 100%;
	overflow : auto;
}

.hide-modal {
	position: fixed;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	z-index: @hidemodal-layer;
	background-color: rgba(0,0,0,0.2);
	display: table;
	&> .content {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background: #666;
}

::-webkit-scrollbar-thumb {
	background: #ddd;
}

.checkbox-wrapper {
	display:inline-block;
}

.hide-loading {
	width : 16px;
	height : 16px;
	display : inline-block;
	background : url('libs/jstree/default-dark/throbber.gif');
}

.hide-scene-container {
	width:100%;
	height:100%;
	position:relative;
}

.hide-scene {
	position:absolute;
	cursor: default;
}

.hide-scene-layer {
	width:auto;
	position: absolute;
	z-index: @default-layer;
	max-height: 100%;

	.jstree {
		padding-right : 5px;
	}

	.jstree-container-ul {
		padding-right : 5px;
	}

}

.scene-partition > .props-column {
	.hide-toolbar {
		padding-bottom: 4px;
	}
}


.scene-partition.reduced-columns {
	.hide-scenetree {
		max-height: 40%;
	}
	.tree-column {
		min-width: 322px;
		max-width: 1402px;
	}

	.props-column {
		max-height: 60%;
		padding-bottom: 36px;
	}
}

.tree-column {
	min-width: 302px;
	max-width: 1002px;
}

.splitter {
	position : relative;
	z-index: @splitter-layer;
	background: #000000;
	opacity: .001;
	transition: opacity 200ms ease;

	&:hover, &.dragging {
		background : #444444;
		opacity : 1;
	}

	&.vertical {
		width : 100%;
		height : 5px;
		.drag-handle {
			width : 100%;
			height : 15px;
			position : absolute;
			top : -5px;
			cursor : ns-resize;
		}
	}

	&.horizontal {
		width : 5px;
		height : 100%;
		.drag-handle {
			width : 15px;
			height : 100%;
			position : absolute;
			left  : -5px;
			cursor : ew-resize;
		}
	}
}

.detached {

	.layout-controls:not(& .layout-controls) {
		display : none;
	}

	&.detachable-panel {
		position: fixed;
		bottom : 20px;
		left: 20%;
		right: 620px;
		z-index: @popup-layer;

		.splitter {
			z-index : @popup-layer + 10;
			position : absolute;

			&.handle-right {
				right : -5px;
			}
			&.handle-left {
				left : -5px;
			}
			&.handle-top {
				height : 15px;
				top : -15px;

				.drag-handle {
					cursor : move;
					top : 0px;
				}
			}
			&.handle-bottom {
				bottom : -5px;
			}
		}
	}
}

.hide-scenetree {
	flex: 1;
	background-color : #111;
	border : 1px solid #444;
	min-width: 300px;
	max-width: 1000px;
	overflow-y: auto;
	min-height : 350px;

	.jstree {
		min-width: 300px;
		overflow-x: hidden;
	}

	.jstree-container-ul {
		max-width: 300px;
	}
}

.hide-tileselect {
	display: inline-block;
	background-color : #111;
	border : 1px solid #666;
	text-align: left;
	overflow: hidden;
	.flex-scroll {
		height: 600px;
		width: 800px;
		display: flex;
		flex-direction: column;
		.scroll {
			flex-grow: 1;
			overflow : auto;
			.tile {
				background-color: #202;
				position: relative;
				.valueDisp {
					position: absolute;
					background-color: rgba(0,80,128,0.3);
					border:1px solid rgba(128,128,128,0.5);
					pointer-events:none;
				}
				.cursor {
					position: absolute;
					border : 1px solid #fff;
					pointer-events:none;
				}
			}
		}
	}
}

.hide-range {

	display : inline-block;

	input[type=range] {
		display : inline-block;
		width: 140px;
	}

	input[type=range].small {
		width: 123px;
	}

	input[type=text] {
		display : inline-block;
		width: 44px;
		padding-left:2px;
		margin-left:3px;
		border-color: transparent;
	}
	input[type=text]:hover, input[type=text]:active {
		border-color: #444;
	}
}

.heaps-scene {
	flex: 1;
}

.flex {
	width:100%;
	height:100%;
	display:flex;
	//flex-grow : 100;
}

.flex-elt {
	flex: 1;
	display: flex;
}

.flex.vertical {
	flex-direction: column;
}

.scene-partition .hide-toolbar .button {
	min-width : 16px !important;
	height : 16px !important;
	font-size: 12px !important;
}

.scene-partition .show-cols-btn {
	&:extend(.hide-toolbar .button);
	&:extend(.scene-partition .hide-toolbar .button);

	position: absolute;
	margin-top: 2px;
	right: 0px;

	&:hover {
		&:extend(.hide-toolbar .button:hover);
	}

	&:active {
		&:extend(.hide-toolbar .button:active);
	}
}

.hide-toolbar {

	flex: none;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color : rgb(34,34,34);
	display: inline-block;

	.layout-btn {
		position: absolute;
		right: 26px;
	}

	.close-btn {
		position: absolute;
		right: 0px;
	}

	.toolbar-label, .menu {
		display: inline-block;
		min-width : 20px;
		padding : 2px;
		text-align: center;
		text-shadow: 1px 2px 2px black;
		>.icon {
			vertical-align: middle;
			margin-bottom: 2px;
		}
	}

	.menu {
		user-select:none;
		cursor : pointer;
		background : #444;
		padding-left: 5px;
		padding-right: 5px;
	}

	.button, .toggle {
		display: inline-block;
		user-select:none;
		border: 1px solid rgb(90,90,90);
		min-width : 20px;
		padding : 2px;
		text-align: center;
		border-radius: 1px;
		text-shadow: 1px 2px 2px black;
		background: -webkit-linear-gradient(top, rgb(90,90,90), rgb(50,50,50));
		cursor : pointer;
		font-size: 16px;
		vertical-align: middle;
		&:hover {
			color : white;
			border-color : white;
			background-color : #666;
		}
		label {
			font-size: 12px;
			margin-left: 6px;
			margin-right: 6px;
			text-shadow: none;
		}
		label.locked {
			color: #000;
			font-style: italic;
		}
	}

	.toggle.toggled {
		color : #ddd;
		background : #777;
		padding-top: 2px;
		padding-bottom: 1px;
		text-shadow: none;
		border-top-width: 2px;
		border-top-color: #444;
		&:hover {
			border-top-width: 1px;
			padding-top: 3px;
			border-top-color : white;
		}
	}

	.button:active {
		padding-top: 3px;
		padding-bottom: 1px;
	}

	.select {
		padding : 2px;
		padding-top: 4px;
		margin-right : 5px;
		display : inline-block;
		.icon {
			font-size: 16px;
			vertical-align: top;
		}
		>select {
			margin-left : 5px;
			min-width : 100px;
		}
	}
}

.prefab-toolbar {
	.button, .toggle {
		margin-right : 5px;
	}
}

.hide-list {
	width : 100%;
	min-height : 200px;
	background-color : #111;
	border : 1px solid #444;
	overflow : auto;
}

.hide-block {
	padding : 5px;
	flex-grow: initial;
}

.hide-tabs {
	flex : 0 0 320px;
	position: relative;
	height: 100%;

	&.masked {
		& > * {
			display : none !important;
		}
		flex : none;
		position: absolute;
		height : 20px;
		width : 20px;
		right : 0px;
		>.maskToggle:before {
			content : "«";
		}
	}

	>.maskToggle {
		&:before {
			content : "»";
		}
		display : block !important;
		position : absolute;
		margin-top : -2px;
		right : 5px;
		color : #aaa;
		font-size: 24px;
		&:hover {
			color : white;
		}
	}

	.tabs-header {
		background-color : #111;
		padding : 2px;
		padding-bottom : 0px;
		&>div {
			cursor : pointer;
			display : inline-block;
			color: #888;
			background-color : #151515;
			padding : 3px 8px;
			border : 1px solid #444;
			margin-left : -1px;
			border-top-right-radius: 5px;
			user-select: none;
			&.active {
				background-color : #444;
				color : #bbb;
				border-bottom-color : #222;
				border-top-right-radius: 0px;
			}
			&.active:hover {
				background-color : #333;
			}
			&:hover {
				background-color : #282828;
			}
			&.hidden {
				display: none;
			}
		}
	}
	.tab {
		max-height: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;
		&.expand {
			width: 100%;
			height: 100%;
		}
	}
}

.hide-tabs.tabs-bottom {
	>.tabs-header {
		width:100%;
		position: absolute;
		bottom : 0px;
		padding-top : 0px;
		padding-bottom : 5px;
		z-index: @header-layer;
		&>div {
			border-top : none;
			border-top-right-radius: 0;
			border-bottom-right-radius: 5px;
			&.active {
				border-radius: 0px;
			}
		}
	}
}


.searchBox {
	display : none;
	width : 200px;
	position : fixed;
	z-index: @popup-layer;
	top : 20px;
	right : 0px;
	background-color : black;
	border : 1px solid #555;
	border-top : none;
	border-right : none;
	border-bottom-left-radius : 5px;
	padding : 5px;
	input {
		width : 170px;
		background-color : black;
	}
	i {
		cursor : pointer;
		margin-left : 5px;
		display : inline-block;
		font-size : 18px;
		color : #888;
	}
	i:hover {
		color : #EEE;
	}
	color : #444;
}

.tree > .searchBox {
	position: sticky;
	float : right;
	top : 0px;
	right : 0px;
	width : 130px;
	input {
		width : 100px;
	}
}

/* Properties */
.props-column {
	height : 100%;
	background-color: #111;
	width: 320px;

	.hide-toolbar {
		width: 100%;
		vertical-align: middle;
	}
}

.hide-properties {
	//flex : 0 0 300px;
	padding:10px;
	overflow:auto;
	padding-bottom:80px;

	.section {
		margin-bottom : 10px;
		>h1 {
			font-size:12px;
			margin: 0px;
			cursor:pointer;
			user-select:none;
			width:100%;
			padding : 2px;
			padding-bottom: 0px;
			margin-bottom: 2px;
			background-color : #333;
			&:hover {
				background-color : #555;
			}
			&:before {
				content:"\25ba  ";
			}
		}
	}

	.section.open > h1:before {
		content:"\25bc  ";
	}

	dl {
		overflow-x:hidden;
		margin:0px;
	}

	dd, dt {
		vertical-align:middle;
		display:inline-block;
		overflow-x:hidden;
		margin-top:4px;

		span {
			display: inline-block;
			width: 20px;
		}
	}

	dt {
		width:80px;
		text-align:right;
		font-size:11px;
		color:#aaa;
		user-select:none;
		text-transform: capitalize;
		cursor:pointer;
	}

	input {
		width:190px;
	}

	input.small {
		width:170px;
	}

	input[type=checkbox] {
		width:13px;
	}

	dt {
		input[type=button] {
			width: 100%;
			text-align: right;
			background: none;
			border: none;
			zoom: 1;
			font-size: 11px;
		}
	}

	select {
		width:197px;
	}

	dd {
		position:relative;
		width:200px;
		margin-left:10px;
	}

	.texture-preview {
		pointer-events: none;
		display:inline-block;
		width : 15px;
		height: 15px;
		position : absolute;
		margin-left : -17px;
		margin-top : 2px;
	}

	dl dl {
		dt {
			width : 50px;
		}
		dd {
			width : 140px;
		}
		input[type=range] {
			width : 90px;
		}
		.hide-range input[type=text] {
			width : 30px;
		}
	}

	.group {
		>.title {
			text-align : center;
			background-color : #151515;
			cursor:pointer;
			user-select:none;
			padding : 1px;
			position: relative;
			input[type=button] {
				border: none;
				position : absolute;
				top : 0px;
				right : 0px;
				width : auto;
				padding : 1px 5px;
				background-color: rgb(40,40,40);
				&:hover {
					background-color: rgb(70,70,70);
				}
			}
			>.checkbox-wrapper {
				position: absolute;
				left: 5px;
			}
		}
		>.content {
			margin-bottom : 5px;
		}
		margin-bottom : 5px;
	}

	.btn-list {
		* {
			margin-bottom: 5px;
		}
	}

	.error {
		color: red;
	}

	.vector {
		flex-direction: row;
	}

	.btn-cdb-large {
		width : 16px;
		font-size : 14px;
		margin : 3px;
		opacity : 0.5;
	}

	.cdb-large {
		.cdb-obj-editor {
			max-height: 800px;
			overflow: auto;
			padding: 2px;
			background: #111;
			overflow-y: auto;
		}
		.btn-cdb-large {
			opacity: 1;
		}
	}
}

/* Curve editor */
.hide-curve-editor {
	position: relative;
	&:focus {
		background-color: rgba(0, 0, 0, 0.219);
		outline: none;
	}
	.keyPopup {
		padding: 4px;
		padding-bottom: 2px;
		background-color: #151515;
		position: absolute;
		.line {
			margin-bottom: 2px;
		}
		label {
			width: 60px;
			display: inline-block;
		}
		input { width: 80px; }
	}
	svg {
		@selectCol: rgb(255, 255, 255);
		@previewCol: rgb(192, 111, 6);
		@lineCol: rgb(255, 31, 31);
		border-right: 1px solid black;

		line {
			stroke-width: 1px;
		}

		rect {
			shape-rendering: crispEdges;
		}

		.grid {
			line {
				shape-rendering: crispEdges;
			}
			.hgrid line { stroke: #444; }
			.vgrid line { stroke: #444; }
			line.axis {
				stroke: rgb(116, 116, 116);
				shape-rendering: crispEdges;
			}
			text {
				font: 10px sans-serif; fill: #555;
			}
		}

		.graph {

			.selection rect {
				fill: @selectCol;
				fill-opacity: 0.1;
				stroke: rgb(255, 255, 255);
				opacity: 0.3;
				mix-blend-mode: screen;
			}

			.curve line, path {
				stroke: @lineCol;
				stroke-width: 1px;
				fill: none;
			}

			.vectors {
				line {
					stroke: rgba(207, 207, 207, 0.603);
				}

				line.selected {
					stroke: @selectCol;
				}
			}

			.handles {
				circle, rect {
					fill: rgba(187, 187, 187, 0.644);
					cursor: pointer;
				}
				circle:hover, rect:hover {
					fill: #fff;
					stroke: #fff;
					stroke-width: 2px;
				}
				circle.selected, circle:hover.selected, rect.selected, rect:hover.selected {
					fill: @selectCol;
				}
				rect.preview {
					fill: @previewCol;
				}
			}
		}

		.selection-overlay rect {
			mix-blend-mode: multiply;
			fill: #888;
			fill-opacity: 20px;
			stroke: #000;
			opacity: 50%;
		}
	}
}

/* FX Editor */

.fx-script {
	height: 500px;
	width : 500px;
}

.fx-scriptParams {
	margin : 10px;

	.slider {
		margin : 10px;
	}

	.checkbox {
		margin : 10px;
	}

	input[type=checkbox] {
		display: inline-block;
   		float: none;
	}
}

.fx-animpanel {
	@leftPanelWidth: 120px;
	@timelineHeight: 20px;
	min-height: 120px;
	max-height: 800px;
	position: relative;

	.anim-scroll {
		overflow-y: scroll;
		overflow-x: hidden;
		height: 400px;
	}
	.top-bar {
		margin-left: @leftPanelWidth;
		position: relative;
		//height: 100%;
	}

	.timeline {
		background: rgb(20, 20, 20);
		position: relative;
		height: @timelineHeight;
		overflow: hidden;

		.mark {
			height: 100%;
			border-left: 1px solid white;
			vertical-align: middle;
			padding-left: 4px;
			position: absolute;
			line-height: @timelineHeight;
			user-select: none;
		}
	}

	.overlay-container {
		top: 0;
		position: absolute;
		height: 100%;
		pointer-events: none;
		left: @leftPanelWidth;
		right: 0px;
		.overlay {
			position: absolute;
			top: 0px;
			width: 100%;
			height: 100%;
			overflow: hidden;
			.time-marker {
				position: absolute;
				height: 100%;
				width: 1px;
				background: green;
			}
			.marker {
				position: absolute;
				height: 100%;
				width: 1px;
				background: #907a00;
			}
			.selection {
				position: absolute;
				height: 100%;
				background: #17ffeb12;
				mix-blend-mode: hard-light;
				pointer-events: all;
				cursor: move;
			}
			.selection-left, .selection-right {
				cursor: ew-resize;
				pointer-events: all;
				width: 4px;
				background: #00000036;
				position: absolute;
				height: 100%;
			}
			.selection-left {
				border-right: 1px dashed black;
			}
			.selection-right {
				border-left: 1px dashed black;
			}
			.preview {
				position: absolute;
				height: @timelineHeight;
				background: rgba(255, 255, 255, 0.1);
				opacity: 0.9;
				mix-blend-mode: screen;
				border-left: 1px black;
				border-right: 1px black;
			}
			.preview-left {
				background: rgba(0, 0, 0, 0.3);
				border-right:1px dashed rgb(121, 121, 121);
				position: absolute;
				height: 100%;
			}
			.preview-right {
				background: rgba(0, 0, 0, 0.3);
				border-left:1px dashed rgb(121, 121, 121);
				position: absolute;
				height: 100%;
			}
		}
	}

	.tracks-header {
		position: relative;
		background: #4a4a4a;
		text-align: left;
		.name {
			padding: 1px;
			padding-left: 5px;
			padding-right: 5px;
		}
		.abspath {
			position: absolute;
			opacity: 0.5;
			left: 200px;
		}
		.addtrack {
			margin-left: 4px;
			padding: 2px;
			&:hover {
				color: white;
			}
		}
	}

	.track {
		.track-header {
			min-height: 20px;
			display: flex;
			user-select: none;

			.track-prop {
				cursor: pointer;
				text-align: right;
				width: @leftPanelWidth;
				height: 100%;

				label {
					vertical-align: middle;
					padding-right: 4px;
				}

				.track-toggle {
					width: 16px;
					height: 16px;
					display: inline-block;
					text-align: center;
				}
				&:hover {
					background: rgba(0, 0, 0, 0.438);
				}
			}
			.dopesheet {
				position: relative;
				height: 20px;
				flex-grow: 1;
				background: #333;
				box-shadow: 0px -1px 0px black inset;
				overflow-x: hidden;
				.key {
					cursor: pointer;
					user-select: none;
					position: absolute;
					width: 5px;
					margin-top: 1px;
					margin-left: -2px;
					height: 15px;
					background: #9a9a9a;
					border: 1px solid black;
					&:hover {
						background: white;
					}
					.sp-replacer {
						border: none;
						padding: 0;
					}
				}
			}
		}
		.curve {
			margin-left: @leftPanelWidth;
			position: relative;
			box-shadow: 0px -1px 0px black inset;
		}
		.curves.hidden {
			display: none;
		}

		.events {
			position: relative;
			overflow-x: hidden;
			flex-grow: 1;
			box-shadow: 0px -1px 0px black inset;

			.event {
				cursor: pointer;
				min-width: 10px;
				display: inline-block;
				height: 17px;
				user-select: none;
				position: absolute;
				background: #202;
				overflow-x: hidden;
				padding-top: 3px;

				label, i {
					margin-left: 3px;
					display: inline;
				}
			}

			.event:hover {
				color: white;
			}
		}
		label.curve-label {
			user-select: none;
			pointer-events: none;
			position: absolute;
			text-transform: capitalize;
			margin-left: 15px;
			font-size: 20px;
			color: white;
			mix-blend-mode: overlay;
		}
	}
}

/* Poly editor */
.poly-editor{
	.editModeButton{
		margin: 10px;
		outline: 4px solid #fd5151;
	}
	.editModeEnabled {
		outline: 4px solid #5897fb;
	}
	.description{
		margin: 5px;
		background-color:#303030;
		outline: 4px solid #4a4a4a;
		padding : 2px;
	}
	.point-list {
		input {
			width: 70px;
		}
		.deletePoint {
			width: 20px;
			margin-left: 8px;
		}
	}
	.poly-vector2{
		display: block;
		padding : 5px;
	}
}

// Array of string
.string-array {
	.array-element {
		display: block;
		padding: 5px;
	}
	.string-field {
		width: 120px;
	}
	.delete-button {
		width: 20px;
		margin-left: 8px;
	}
}

// Default Edit Button
.editModeButton{
	margin: 10px;
	outline: 4px solid #fd5151;
}
.editModeEnabled {
	outline: 4px solid #5897fb;
}

// Spline editor
.spline-editor{
	.editModeButton{
		margin: 10px;
		outline: 4px solid #fd5151;
	}
	.editModeEnabled {
		outline: 4px solid #5897fb;
	}
	.description{
		margin: 5px;
		background-color: #303030;
		outline: 4px solid #4a4a4a;
		padding : 2px;
	}
}

/* Mesh Generator */
.meshGenerator-thumbnail {
	display: inline-block;
	margin: 5px;
	@size: 75px;
	width: @size;
	height: @size;
	background-size: @size @size;
	outline: 2px solid #4a4a4a;
	background-size: contain;
}

/* Terrain editor */
.terrain-brushModeDescription{
	margin: 5px;
	background-color: black;
	outline: 4px solid #4a4a4a;
	padding : 2px;
}

.terrain-brushModeContainer{
	padding : 1px;
}

.terrain-brushMode{
	padding : 5px;
	display: inline-block;
	.selected {
		outline: 4px solid #5897fb;
	}
}

.terrain-brushModeIcon {
	@size: 40px;
	width: @size;
	height: @size;
	background-size: @size @size;
	background-color: #AAAAAA;
	outline: 4px solid #4a4a4a;
	background-size: contain;
}

.terrain-brushes {
	.brush {
		display: inline-block;
		padding : 6px;
		position: relative;
	}
	.brush-preview {
		@size: 40px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #4a4a4a;
	}
	.brush-preview-selected {
		@size: 45px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #5897fb;
	}
	.tooltiptext {
		visibility: hidden;
		background-color: black;
		color: #fff;
		text-align: left;
		border-radius: 6px;
		position: absolute;
		z-index: @tooltip-layer;
		padding: 4px;
		width: 90px;
	}
	.brush:hover .tooltiptext {
		visibility: visible;
	}
}

.terrain-surfaces {
	.surface {
		display: inline-block;
		padding : 6px;
		position: relative;
	}
	.surface-preview {
		@size: 85px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #4a4a4a;
	}
	.surface-preview-selected {
		@size: 85px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #5897fb;
	}
	.tooltiptext {
		visibility: hidden;
		background-color: black;
		color: #fff;
		text-align: left;
		border-radius: 6px;
		position: absolute;
		z-index: @tooltip-layer;
		padding: 4px;
	}
	.surface:hover .tooltiptext {
		visibility: visible;
	}
}

/* Shader Editor */
.graph-view {
	outline: none !important;
	.tabs {
		z-index: @default-layer + 5;
    	background: #222222;
		height: 100%;
		user-select: none;
		.tab {
			height: 100%;
			.hide-block {
				height: 70%;

				#parametersList {
					height: 100%;

					.parameter {
						border: 1px solid;
						margin: 5px;
						background-color: #222;

						.header {
							background-color: #d6d6d6;
							height: 20px;
							padding: 5px;
							color: black;
							cursor: pointer;

							.title {
								float: left;
								input {
									width: 130px;
								}
							}

							.type {
								float: right;

								span {
									color: black;
									font-style: italic;
									font-size: 13px;
									padding-right: 5px;
								}
							}
						}

						.content {
							background-color: #b3b3b3;
							padding: 5px;
							box-shadow: inset 0px 13px 6px -15px black;

							div:first-child {
								display: inline;
							}

							div {
								width: 100%;
								height: 20px;

								span {
									float: left;
									color: black;
									font-size: 13px;
									padding-right: 5px;
									font-weight: normal;
								}
							}
							.texture-preview {
								background-repeat: no-repeat;
								background-size: 20px 20px!important;
								border: 2px #444444 solid;
								width: 20px;
							}
							.action-btns {
								input {
									float: right;
								}
							}
						}

						& > span {
							font-size: 12px;
						}
					}
				}
			}
			.options-block {
				height: 25%;
				& > * {
					display: block;
					margin-bottom: 10px;
					width: 100%;
				}
			}
		}
	}
	#add-menu {
		position: absolute;
		width: 400px;
		box-shadow: 0px 0px 25px -4px black;

		background-color: rgb(34, 34, 34);
		border: 1px solid #444;
		z-index: @default-layer + 10;

		.search-container {
			display: flex;

			.icon {
				width: 16px;
				font-size: 15px;
				text-align: center;
				padding: 7px;
				border: solid #444;
				background: #2d2d2d;
				border-width: 0 1px 1px 0;
			}

			.search-bar {
				flex: 1;
				margin: -1px 11px 0px -1px;

				input {
					width: 100%;
					height: 30px;
					padding-left: 10px;
					outline: none;

					&:focus {
						border: 1px solid #888888;
					}
				}
			}
		}
		#results {
			max-height: 300px;

    		overflow-y: auto;
			div {
				padding: 5px;
				border-top: 1px solid #444444;
				cursor: pointer;
				color: #d4d4d4;

				& {
					position: relative;
				}

				&.group {
					background: #474747;
					color: #c0c0c0;
					cursor: default;
					z-index: @default-layer + 5;
    				box-shadow: 0px 0px 34px -9px black;

					&:hover {
						background: #474747!important;
						color: #dadada!important;
						box-shadow: none;
					}
				}

				& > span:first-child {
					font-weight: bold;
					padding-left: 10px;
				}
				& > span:last-child {
					font-style: oblique;
					padding-left: 7px;
				}
				&:first-child {
					border-top: 0;
				}
				&:hover, &.selected {
					background: #5eb7bf;
					color: #000000;
					box-shadow: inset 0px 0px 12px -1px black;
					z-index: @default-layer + 15;
				}
			}
		}

	}
	#context-menu {
		position: absolute;
		width: 150px;
		box-shadow: 0px 0px 25px -4px black;

		background-color: rgb(34, 34, 34);
		border: 1px solid #444;

		z-index: @default-layer + 10;

		#options {
			max-height: 300px;

    		overflow-y: auto;
			div {
				padding: 5px;
				border-top: 1px solid #444444;
				cursor: pointer;
				color: #d4d4d4;

				& {
					position: relative;
				}

				&.group {
					background: #474747;
					color: #c0c0c0;
					cursor: default;
					z-index: @default-layer + 15;
    				box-shadow: 0px 0px 34px -9px black;

					&:hover {
						background: #474747!important;
						color: #dadada!important;
						box-shadow: none;
					}
				}

				& > span:first-child {
					font-weight: bold;
					padding-left: 10px;
				}
				& > span:last-child {
					font-style: oblique;
					padding-left: 7px;
				}
				&:first-child {
					border-top: 0;
				}
				&:hover, &.selected {
					background: #5eb7bf;
					color: #000000;
					box-shadow: inset 0px 0px 12px -1px black!important;
					z-index: @default-layer + 15;
				}
				&.grey-item {
					background: #adadad;
					color: #000000;
					font-weight: bold;
					box-shadow: inset 0px 0px 5px -1px black;
				}
			}
		}

	}
	.heaps-scene {
		outline: none !important;
		#preview {
			position: absolute;

			width: 300px;
			height: 300px;

			background-color: #111;
   			border: 1px solid #444;

			right: 290px;
			bottom: 35px;
		}
		#status-bar {
			position: absolute;

			width: 84%;
			min-height: 20px;

			background-color: #111;
			border: 1px solid #444;

			left: -1px;
			bottom: -1px;

			span {
				padding: 10px;
				vertical-align: sub;

				&.error {
					color: #c74848;
				}
			}
		}
		svg {

			g {
				stroke: #202020;

				&.selected {
					.outline {
						stroke: #668fff;
					}
				}
				&.error {
					.outline {
						stroke: #ff6666;
					}
				}
			}
			.outline {
				fill: none;
			}

			.head-box {
				fill: #155358;
			}

			.title-box {
				fill: #ffffff;
				stroke: none;
				user-select: none;
				&::selection {
					background: none;
				}
			}

			.nodes, .properties {
				fill: #737373;
				opacity: 0.75;
			}

			.hasLink {
				.input-field {
					display: none;
				}
			}

			.input-node, .output-node {
				fill: rgb(200, 200, 200);
				stroke-width: 13px;
				stroke-opacity: 0;

				&.nodeMatch {
					fill: #5ca4ab;
				}
			}

			.title-node {
				fill: #ffffff;
				stroke: none;
				user-select: none;
				&::selection {
					background: none;
				}
			}

			.properties-group {
				span {
					color: #ffffff;
					user-select: none;
					&::selection {
						background: none;
					}
				}
				input[type=text], select {
					width: 100%;
				}
				input[type=text].error {
					border: red 1px solid;
				}

				.texture-preview {
					background-size: 50px 50px;
					height: 50px;
					width: 50px;
					margin: auto;
					margin-bottom: 5px;
				}

				.color-preview {
					background-size: 25px 25px;
					height: 25px;
					width: 25px;
					margin: auto;
					margin-bottom: 5px;
				}

				.float-preview {
					background: #222222;
					font-weight: bold;
					width: fit-content;
					padding: 2px 3px;
					margin: auto;
					margin-bottom: 3px;
					user-select: none;
				}

				.preview-parent {
					position: absolute;
					height: 100px;
					width: 100px;
				}

				.propertySubShader {
					span {
						float: left;
						margin-right: 10px;
					}
				}
			}

			.edge {
				stroke-width: 2;
				stroke: rgb(200, 200, 200);
				fill: transparent;
			}

			.edge:not(.draft):hover, .edge:not(.draft).selected {
				stroke-width: 5;
				stroke: rgb(114, 180, 255);
			}

			.rect-selection {
				stroke: rgba(0, 0, 255, 0.7);
				fill: rgba(70, 70, 116, 0.08);
			}
		}
	}
	.tabs {
		width: 280px;
		padding-top: 10px;
		border-left: 1px solid #444444;

		span { // title
			margin-left: 5px;
			font-size: 15px;
			font-weight: bold;
		}
	}
	.paramVisible {
		color: black!important;
		font-weight: bold;
		font-style: italic;
		letter-spacing: -.5px;
		text-align: center;
		user-select: none;
	}
}

/* Golden Layout Fixes */

.lm_header .lm_tabs {
	z-index : @default-layer;
}

.lm_dropTargetIndicator {
	box-shadow : none;
}
span.lm_title { display: inline-block; padding: 0px 10px; }
li.lm_tab { padding-left: 0px !important; padding-right: 15px !important; }
div.lm_close_tab { top : 0px !important; right : 0px !important; width : 15px !important; height : 18px !important; }
div.lm_close_tab:hover { background-color : #555 !important; }

body.hide-subview {
	.lm_header .lm_tab {
		padding-right: 10px;
	}
	.lm_close_tab, .lm_controls {
		display : none;
	}
}

/* JSTree fixes */

.jstree {
	background:transparent !important;
	padding-bottom: 40px;
	outline: none;
	position: relative;

	.filtered {
		display: none;
	}

	.hidden {
		color: #555 !important;

		i, a {
			color: #555;
		}
	}

	.disabled {
		a {
			color: #533 !important;
			display: inline;
		}
		i {
			color: #533;
		}
	}

	a.locked {
		color: #666 !important;
		font-style: italic;
	}
	a.locked::after {
		content: " (locked)";
	}
}

.jstree-icon.jstree-ocl {
	opacity: 0.7;
	width:18px !important;
	top:-1px;
}

.jstree-icon {
	i {
		color : #aaa;
	}
}

.jstree-node {
	padding-right: 10px!important;
}

.visibility-toggle, .visibility-large-toggle {
	position: absolute;
	right: 4px;
	padding: 4px;

	&:hover {
		color : white;
		background: black;
	}
}
.hidden {
	.visibility-toggle, .visibility-large-toggle {
		background: #0000008a;
		i {
			color: #555;
		}
	}
}

.visibility-large-toggle {
	font-size: 14px!important;
}

.lock-toggle, .lock-large-toggle {
	position: absolute;
	right: 24px;
	padding: 4px;
}
.locked {
	.lock-toggle, .lock-large-toggle {
		i {
			color: #555;
		}
	}
}

.lock-large-toggle {
	font-size: 14px!important;
}

.jstree.small {
	@size: 18px;

	a {
		font-size: 12px;
	}

	.jstree-node {
		min-height: @size;
		line-height: @size;
		margin-left: 12px;
		min-width: @size;
	}
	.jstree-anchor {
		line-height: @size;
		height: @size;
	}
	.jstree-icon {
		width: @size;
		height: @size;
		line-height: @size;
	}
	.jstree-icon:empty {
		width: @size;
		height: @size;
		line-height: @size;
	}
	.jstree-wholerow {
		height: @size;
	}
}

/* Spectrum Color picker */

div.sp-replacer {
	vertical-align:top;
	background-color : #444;
	border : 1px solid #666;
	height : 16px;
	margin-right:5px;
	.sp-preview {
		width: 14px;
		height: 14px;
	}
	.sp-dd {
		padding-top:0px;
	}
	&:hover {
		border-color : white;
	}
	&.sp-active {
		border-color: #888;
	}
}

div.sp-container {
	background-color : #444;
	border : 1px solid #666;
	.sp-picker-container {
		border:none;
	}
	input {
		color: #aaa;
		background-color : rgb(34,34,34);
		border-radius:0px;
		&:hover {
			border-color:white;
		}
	}
}

/* Animation Event Editor */
.event-editor {
	.title {
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		margin: 4px;
		background-color : rgb(30,30,30);
	}
	.event {
		.label {
			text-align: center;
			display: inline-block;
			width: 50%;
		}
	}
}

/* Script Editor */

.codeeditor {
	.codeErrorLine {
		background: #400;
	}
	.codeErrorContentLine {
		background : rgba(255,0,0,0.1);
	}
	.codeErrorContent {
		text-decoration: underline dashed red;
	}
	.codeErrorMessage {
		background : rgba(80, 5, 5, 1);
		color : red;
		position: absolute;
		margin-top : -20px;
		padding: 2px;
		right : 13px;
		border: 1px solid #A00;
	}
}

.script-editor {
	.codeeditor {
		height: 100%;
	}
	div.codeErrorMessage {
		right : 12px;
		bottom : 0px;
		padding : 5px;
	}
}

/* Domkit */

.domkit {
	width:100%;
	height:100%;
	display:flex;
	>* {
		flex-grow : 100;
	}
	.leftpanel {
		width:600px;
		resize:horizontal;
		border-right:1px solid #333;
		overflow:hidden;
		.html {
			.codeeditor {
				padding: 5px;
				height: 400px;
			}
		}
		.cssErrors {
			background : #840;
			border : 1px solid #F80;
			color : #F80;
			padding : 10px;
			position: absolute;
			z-index: @domkit-layer;
			left : 10px;
			bottom : 10px;
		}
	}
}


/* Level 3D */
.overlay-info {
	background: #000000e0;
	position: absolute;
	z-index: @default-layer;
	left : 0px;
	bottom : 0px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 10px;
	max-height: 800px;
    min-width: 600px;
}

.context-menu-item {
	.contextmenu-keys {
		float: right;
		font-size: 8pt;
		color: #8d8d8d;
		&:before {
			content: '\a0'; // ' '
		}
	}
	&.context-menu-disabled {
		.contextmenu-keys {
			color: #c9c9c9;
		}
	}

	.tag-disp-expand {
		display: flex;
		.tag-disp {
			color: white;
			flex-grow: 1;
			padding: 2px;
		}
	}

	&.context-menu-input {
		input[type=checkbox] {
			top: auto !important;
			&:after {
				// background-color: rgb(165, 165, 165);
				background-color: white;
				color: black;
				box-shadow: none;
				border: 1px solid black;
				border-radius: 2px;
			}
		}
	}
}