HeapsIO.hide/bin/cdb.less

@import "common.less";

.cdb-view > .hide-tabs > .tab > ::-webkit-scrollbar {
	width: 12px;
}

.cdb-view .cdb {
	margin-bottom: 350px;
}

.cdb-view.cdb-diff {
	.cdb-sheet th, th.start {
		background-color: #d60;
	}
}

.cdb {

	background-color : black;

	&:focus {
		outline: none;
	}

	.cdb-sheet {
		td.cursorView {
			border: 2px solid #ccc !important;
		}

		th.highlight {
			background-color: rgb(28, 60, 112);
		}
		.highlight {
			td.start, &th {
				background-color: rgb(28, 60, 112);
			}
		}

		.active-line {
			background-color: #1f1e1e;
		}

		tr.selected, td.selected {
			background-color : #313a48;

			&.top td.start { border-top: 1px solid #ccc; }
			&.bot td.start { border-bottom: 1px solid #ccc; }
			td.start, td.t_readonly {
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				color: rgb(170, 170, 170);
				background-color: #0b57d0;
			}
		}

		td.selected {
			&.top { border-top: 1px solid #ccc; }
			&.right { border-right: 1px solid #ccc; }
			&.bot { border-bottom: 1px solid #ccc; }
			&.left { border-left: 1px solid #ccc; }
		}
	}


	.cdb-sheet {

		width : 100%;
		table-layout:fixed;
		border-collapse : collapse;
		border-spacing : 0;
		background-color: #222;
		position: relative; // so that error message follow along with scrolling

		th.start {
			width : 30px;
			border-left-color : #333;
			cursor:default;
		}

		td.start {
			text-align : center;
			cursor : pointer;
			background-color: #333;
			border-left: none;
		}

		tr.head td.start {
			cursor : nw-resize;
		}

		tr.separator {
			height : 10px;
			td {
				position: sticky;
				top: 19px;
				z-index: 2;
				border-left: none;
				padding-top: 6px;
				color : #bbb;
				font-weight : bold;
				background-color : #444;
				.toggle {
					padding : 0px 4px;
					padding-left : 10px;
					color : #aaa;
					&:hover {
						color : #ccc;
					}
				}
			}
			&.seplevel-1 td {
				.toggle {
					padding-left : 25px;
				}
				background-color : #3d3d3d;
			}
			&.seplevel-2 td {
				.toggle {
					padding-left : 40px;
				}
				background-color : #383838;
			}
			&.seplevel-3 td {
				.toggle {
					padding-left : 50px;
				}
				background-color : #343434;
			}
			&.seplevel-4 td {
				.toggle {
					padding-left : 60px;
				}
				background-color : #303030;
			}
			&.seplevel-5 td {
				.toggle {
					padding-left : 70px;
				}
				background-color : #303030;
			}
			&.seplevel-6 td {
				.toggle {
					padding-left : 80px;
				}
				background-color : #303030;
			}
		}

		tr.locIgnored {
			background-color: #221C1C;
		}

		td {
			padding : 2px 4px;
			overflow : hidden;
		}

		tr.props td, tr.code td, tr.list td {
			overflow : visible; // for flags dropdown
		}

		&> tbody > tr.props:last-child {
			border-bottom: 0;
			background-color: black;
		}

		td.edit {
			/*padding : 2px;
			padding-right : 6px;*/
			&> input, textarea, select {
				width : 100%;
				padding : 0px 2px;
				border : none;
			}
			&> textarea {
				overflow: hidden;
			}
			&> div.error {
				margin-top : 5px;
				position : absolute;
				z-index : @cdb-error-layer;
				color : red;
				background-color : #633;
				border : 1px solid #833;
				max-width : 200px;
				padding : 2px;
			}
		}
		td.edit_long {
			padding-bottom : 0px;
		}

		tr.filtered, tr.hidden, tr.sep-hidden {
			display : none;
		}

		tr.clickable {
			cursor : pointer;
		}

		tr.clickable:hover {
			background-color : #f8f8f8;
		}

		&:not(.cdb-sub-sheet) > thead.head > th {
			position: sticky;
			z-index: @header-layer;
			top: 0;
		}

		tr.head, th {
			font-weight: bold;
			text-align: center;
			padding: 1px 10px 4px 10px;
			box-shadow: inset 0px -1px 1px #666;
			border-left: 1px solid #444;
			background-color : #222;
			color : #ddd;
			width: auto;
			white-space: nowrap;
			overflow: hidden;
			cursor: pointer;
			user-select: none;
		}

		tr.head .display {
			font-style : italic;
		}

		td {
			user-select: none;
			border-left : 1px solid #444;
		}

		tr {
			border-bottom : 1px solid #333;
		}

		tr.validation-error {
			td {
				background-color: rgba(255, 0, 0, 0.3);
			}
		}

		// ----- types -------

		tr.list {
			background-color:black;
			& > td {
				padding : 0;
				padding-bottom: 20px;
				border : none;
			}
		}


		th.t_tilepos {
			width: 64px;
		}
		td.t_tilepos {
			text-align : center;
		}

		td.t_readonly {
			background-color: #333;
		}

		th.t_bool,
		th.t_int,
		th.t_float {
			width: 6%;
		}

		th.hidden, td.hidden {
			width: 1px;
			padding: 0;
			visibility: hidden;
		}

		td.t_bool {
			text-align : center;
		}
		td.t_bool.true {
			color: #76AA09;
			font-weight: bold;
			font-size: inherit;
		}
		td.t_bool.false {
			color: red;
			font-weight: normal;
			font-size: 75%;
		}

		td.t_script {
			div.script {
				white-space: nowrap;
				font-family : Consolas, Courier;
				font-size: 80%;
			}
			input, textarea {
				font-family : Consolas, Courier;
			}
			span {
				display: inline-block;
			}

			color : #CCC;
			.kwd {
				color : #88F;
			}
			.str {
				color : #C66;
			}
			.comment {
				color : #182;
			}
		}

		.tile {
			display: inline-block;
			vertical-align: middle;
			image-rendering: pixelated;
		}

		td.t_int, td.t_float {
			text-align : center;
			input {
				text-align : center;
			}
		}

		td.t_int.zero, td.t_float.zero {
			color: #888;
		}
		td.nan {
			color : #C44;
		}

		td.formula {
			font-style : italic;
			color : #888;
		}

		td.t_list, td.t_properties {
			white-space: nowrap;
			cursor : pointer;
			text-overflow: ellipsis;
			max-width: 900px;
			overflow: hidden!important;
			img {
				max-height: 32px;
				max-width: 32px;
			}
			//&.parent-sub-table {
				//background-color: #2b3036;
			//}
		}

		td.t_enum {
			padding-left : 5px;
		}

		td.t_color {
			text-align : center;
			position: relative;
			._hide-modal {
				opacity : 0;
			}
			.sp-replacer {
				visibility: hidden;
				position: absolute;
			}
			.color {
				display : inline-block;
				width : 20px;
				height : 20px;
				border : 2px solid white;
				outline : 1px solid black;
			}
		}

		td.t_flags {
			position: relative;
			overflow: visible;
		}

		td.t_ref, td.t_enum {
			overflow : visible;
		}

		.flagValues {
			position : absolute;
			background-color : #333;
			width : 200px;
			padding : 5px;
			border : 1px solid #666;
			z-index: @cdb-flageditor-layer;
			label {
				display : block;
				clear : both;
				input {
					float : left;
					margin-right: 5px;
				}
				padding : 1px;
			}
			label:hover {
				background-color : #262d35;
			}
		}

		td.t_curve {
			width: 100%;
			height: 100%;

			.cdb-curve {
				display: block;
				height:50px;
				width:100%;
			}
		}

		.cdb-curve {
			display: inline-block;
			transform: scaleY(-1);
			height:1em;
			width:50px;
			path {
				fill: transparent;
				stroke-width: 0.5px;
				shape-rendering: geometricPrecision;
				vector-effect: non-scaling-stroke;
			}

			.x-axis, .y-axis {
				stroke: #AAA;
			}
			.curve {
				stroke: white;
			}
		}

		td.t_gradient {
			width: 100%;
			height: 100%;
			&.edit .cdb-gradient {
				visibility: hidden;
			}

			.cdb-gradient {
				display: block;
				width: 100%;
				height: 100%;
				min-height: 25px;
				min-width: 50px;
			}
		}

		.cdb-gradient {
			display: inline-block;
			position: relative;

			width: 50px;
			height: 1em;

			.inner-gradient, .alpha-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.alpha-bg {
				z-index: 0;
				background:
					url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAE5JREFUWIVjnL12+38GCoCBnisl2hmYKNJNBTDqgFEHjDpg1AGjDhh1wKgDGE/f/kNRe+DCpd0UOWDAQ2DUAaMOGHXAqANGHTDqgFEHAAAO3QneZHM9AwAAAABJRU5ErkJggg==);
			}

			.inner-gradient {
				z-index: 1;
			}
		}



		span.error {
			color : #C44;
		}

		span.minor {
			color: #666;
		}

		tr.props {
			background-color: #111;
			&> td {
				border : none;
				padding : 0;
				text-align: right;
				&> div {
					display: inline-block;
					max-width: 600px;
					&.cdb-large {
						max-width: 1000px;
					}
				}
			}
			.cdb-sheet {
				th {
					width: 200px;
					&.start {
						width : 20px;
					}
				}
				td, td > input {
					text-align: left;
				}
				width : auto;
				min-width: 400px;
				border-right: 1px solid #333;
				margin-bottom: 15px;
			}
		}

		td.t_file {
			.preview {
				.previewContent {
					.label {
						text-align : center;
						margin-bottom : 5px;
						background-color: #444;
						font-family : monospace;
					}
					display : none;
					position : fixed;
					background-color : #333;
					color: white;
					border : 1px solid black;
					padding : 5px;
					z-index : @cdb-preview-layer;
				}
			}
			.inlineImage {
				>img {
					max-height: 100px;
				}
			}
			.preview:hover {
				.previewContent {
					display : block;
				}
			}
		}

		div.cdb-script {
			position : relative;
			.codeeditor {
				min-height: 500px;
			}
		}

		.cdb-types {
			position: absolute;
			z-index: 900;
			padding: 2px 2px 2px 2px;
			display: flex;
			background-color: #333333;
			border-style: solid;
			border-width: 1px;
			border-color: #474747;
			cursor:pointer;

			select {
				cursor:pointer;
				min-width: 100px;
				width: auto!important;
			}

			#dropdown-custom-type {
				width:fit-content;
			}

			#parameters {
				display: flex;
			}

			input {
				cursor:pointer;
				width: 50px;
			}

			input[type="checkbox"] {
				width: auto;
				height: auto;
				margin: 0px 0px 0px 0px;
				margin-top: 2px;
				margin-bottom: 2px;
			}

			p {
				margin-top: 2px;
				margin-bottom: 2px;
				padding-left: 2px;
				padding-right: 2px;
			}
		}

		.cdb-preview-drag {
			position: absolute;
			width: 100%;
			height: 5px;
			background-color: #54FF85;
			pointer-events: none;
		}
	}

	&.cdb-obj-editor {
		&:not(.cdb-large &) {
			margin-top : 10px;
		}
		>.cdb-sheet {
			border : 2px solid #333;
			>tr>th {
				width : 50px;
			}
			tr.props .cdb-sheet > tr > th {
				width : 50px;
			}
		}
		div.cdb-large .cdb-sheet {
			min-width: 0 !important;
		}
		div.cdb-script {
			.codeeditor {
				min-height: 300px;
			}
		}
	}

	.floating-thead {
		position: fixed;
		background-color : #222;

		th:first-child {
			border-left: 1px solid #222;
		}

		th {
			overflow: hidden;
			color : #ddd;
			padding: 1px 10px;
			border-left: 1px solid #555;
			border-bottom: 2px solid #666;
		}
	}

	.content-modal {
		width: 350px;
		min-height: 300px;
		margin: auto;
		padding: 15px;
		background: #292929;
		border: 2px solid #555;
		color: #dadada;
		text-align: left;

		form {
			font-size: 14px;
			input[type=text], input[type=submit], select {
				height: 28px;
			}
			input:user-invalid {
				outline: 2px red dashed;
			}
			td {
				vertical-align: top;
			}
			td.first {
				width : 120px;
			}
			.formula {
				display: none;
			}
			.t_int, .t_float {
				.disp { display : table-row; }
				.formula { display: table-row; }
			}
			.t_string {
				.kind { display : table-row; }
			}
			.t_enum .values, .t_flags .values { display : table-row; }
			.t_ref .sheet { display : table-row; }
			.t_layer .sheet { display : table-row; }
			.t_custom .custom { display : table-row; }
			.t_id .scope { display : table-row; }
			.values, .sheet, .custom, .disp, .kind, .scope { display : none; }
			.doctog {
				cursor:pointer;
				color : #888;
			}
			.hide {
				display: none !important;
			}
		}

		form.edit {
			input.create {
				display: none;
			}
		}
		form.create {
			input.edit {
				display: none;
			}
		}

		#errorModal {
			color: red;
			text-align: center;
		}
	}
}


body.fullScreenMode {
	.lm_content, .lm_header, .lm_splitter {
		display : none;
	}
	.lm_content.fullScreen {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width : 100% !important;
		height: 100% !important;
	}
}