Consolidate z-index accross style files (#173)

There are now variables for each z-index layer in the common.less file.
This fixes the image previews going below separators in cdb

bin/cdb.css

@@ -60,7 +60,7 @@
 }
 .cdb .cdb-sheet tr.separator td {
   position: sticky;
-  z-index: 1;
+  z-index: 100;
   top: 19px;
   border-left: none;
   padding-top: 6px;
@@ -106,7 +106,7 @@
 .cdb .cdb-sheet td.edit > div.error {
   margin-top: 5px;
   position: absolute;
-  z-index: 2;
+  z-index: 300;
   color: red;
   background-color: #633;
   border: 1px solid #833;
@@ -128,7 +128,7 @@
 }
 .cdb .cdb-sheet:not(.cdb-sub-sheet) > thead.head > th {
   position: sticky;
-  z-index: 10;
+  z-index: 600;
   top: 0;
 }
 .cdb .cdb-sheet tr.head,
@@ -291,7 +291,7 @@
   width: 150px;
   padding: 5px;
   border: 1px solid #666;
-  z-index: 100;
+  z-index: 500;
 }
 .cdb .cdb-sheet .flagValues label {
   display: block;
@@ -352,7 +352,7 @@
   color: white;
   border: 1px solid black;
   padding: 5px;
-  z-index: 1;
+  z-index: 510;
 }
 .cdb .cdb-sheet td.t_file .preview .previewContent .label {
   text-align: center;

bin/cdb.less

@@ -1,3 +1,5 @@
+@import "common.less";
+
 .cdb-view > .hide-tabs > .tab > ::-webkit-scrollbar {
 	width: 12px;
 }
@@ -69,7 +71,7 @@
 			height : 10px;
 			td {
 				position: sticky;
-				z-index: 1;
+				z-index: @cdb-separator-layer;
 				top: 19px;
 				border-left: none;
 				padding-top: 6px;
@@ -115,7 +117,7 @@
 			&> div.error {
 				margin-top : 5px;
 				position : absolute;
-				z-index : 2;
+				z-index : @cdb-error-layer;
 				color : red;
 				background-color : #633;
 				border : 1px solid #833;
@@ -141,7 +143,7 @@
 
 		&:not(.cdb-sub-sheet) > thead.head > th {
 			position: sticky;
-			z-index: 10;
+			z-index: @header-layer;
 			top: 0;
 		}
 
@@ -323,7 +325,7 @@
 			width : 150px;
 			padding : 5px;
 			border : 1px solid #666;
-			z-index: 100;
+			z-index: @cdb-flageditor-layer;
 			label {
 				display : block;
 				clear : both;
@@ -395,7 +397,7 @@
 					color: white;
 					border : 1px solid black;
 					padding : 5px;
-					z-index : 1;
+					z-index : @cdb-preview-layer;
 				}
 			}
 			.inlineImage {

bin/common.less

@@ -0,0 +1,17 @@
+// z-index layers
+
+@default-layer: 200;
+@tooltip-layer: @default-layer;
+@splitter-layer: @default-layer;
+@domkit-layer: 400;
+@popup-layer: 500;
+@header-layer: 600;
+@hidemodal-layer: 800;
+
+// This is also set in hide.comp.ContextMenu
+@contextmenu-layer: 900;
+
+@cdb-separator-layer: 100;
+@cdb-error-layer: 300;
+@cdb-flageditor-layer: @popup-layer;
+@cdb-preview-layer: @popup-layer + 10;

bin/style.css

@@ -177,7 +177,7 @@ input[type=checkbox]:checked:after {
   left: 0px;
   width: 100%;
   height: 100%;
-  z-index: 99;
+  z-index: 800;
   background-color: rgba(0, 0, 0, 0.2);
   display: table;
 }
@@ -217,7 +217,7 @@ input[type=checkbox]:checked:after {
 .hide-scene-layer {
   width: auto;
   position: absolute;
-  z-index: 1;
+  z-index: 200;
   max-height: 100%;
 }
 .hide-scene-layer .jstree {
@@ -246,7 +246,7 @@ input[type=checkbox]:checked:after {
 }
 .splitter {
   position: relative;
-  z-index: 20;
+  z-index: 200;
   background: #000000;
   opacity: 0.001;
   transition: opacity 200ms ease;
@@ -565,7 +565,7 @@ input[type=checkbox]:checked:after {
   bottom: 0px;
   padding-top: 0px;
   padding-bottom: 5px;
-  z-index: 10;
+  z-index: 600;
 }
 .hide-tabs.tabs-bottom > .tabs-header > div {
   border-top: none;
@@ -579,7 +579,7 @@ input[type=checkbox]:checked:after {
   display: none;
   width: 200px;
   position: fixed;
-  z-index: 99;
+  z-index: 500;
   top: 20px;
   right: 0px;
   background-color: black;
@@ -774,7 +774,7 @@ input[type=checkbox]:checked:after {
   max-height: 800px;
   left: 20%;
   right: 620px;
-  z-index: 99;
+  z-index: 500;
   overflow: auto;
   padding: 2px;
   background: #111;
@@ -1224,7 +1224,7 @@ input[type=checkbox]:checked:after {
   text-align: left;
   border-radius: 6px;
   position: absolute;
-  z-index: 1;
+  z-index: 200;
   padding: 4px;
   width: 90px;
 }
@@ -1255,7 +1255,7 @@ input[type=checkbox]:checked:after {
   text-align: left;
   border-radius: 6px;
   position: absolute;
-  z-index: 1;
+  z-index: 200;
   padding: 4px;
 }
 .terrain-surfaces .surface:hover .tooltiptext {
@@ -1266,7 +1266,7 @@ input[type=checkbox]:checked:after {
   outline: none !important;
 }
 .graph-view .tabs {
-  z-index: 1;
+  z-index: 205;
   background: #222222;
   height: 100%;
   user-select: none;
@@ -1352,7 +1352,7 @@ input[type=checkbox]:checked:after {
   box-shadow: 0px 0px 25px -4px black;
   background-color: #222222;
   border: 1px solid #444;
-  z-index: 2;
+  z-index: 210;
 }
 .graph-view #add-menu .search-container {
   display: flex;
@@ -1394,7 +1394,7 @@ input[type=checkbox]:checked:after {
   background: #474747;
   color: #c0c0c0;
   cursor: default;
-  z-index: 1;
+  z-index: 205;
   box-shadow: 0px 0px 34px -9px black;
 }
 .graph-view #add-menu #results div.group:hover {
@@ -1418,7 +1418,7 @@ input[type=checkbox]:checked:after {
   background: #5eb7bf;
   color: #000000;
   box-shadow: inset 0px 0px 12px -1px black;
-  z-index: 3;
+  z-index: 215;
 }
 .graph-view #context-menu {
   position: absolute;
@@ -1426,7 +1426,7 @@ input[type=checkbox]:checked:after {
   box-shadow: 0px 0px 25px -4px black;
   background-color: #222222;
   border: 1px solid #444;
-  z-index: 2;
+  z-index: 210;
 }
 .graph-view #context-menu #options {
   max-height: 300px;
@@ -1443,7 +1443,7 @@ input[type=checkbox]:checked:after {
   background: #474747;
   color: #c0c0c0;
   cursor: default;
-  z-index: 3;
+  z-index: 215;
   box-shadow: 0px 0px 34px -9px black;
 }
 .graph-view #context-menu #options div.group:hover {
@@ -1467,7 +1467,7 @@ input[type=checkbox]:checked:after {
   background: #5eb7bf;
   color: #000000;
   box-shadow: inset 0px 0px 12px -1px black !important;
-  z-index: 3;
+  z-index: 215;
 }
 .graph-view #context-menu #options div.grey-item {
   background: #adadad;
@@ -1632,7 +1632,7 @@ input[type=checkbox]:checked:after {
 }
 /* Golden Layout Fixes */
 .lm_header .lm_tabs {
-  z-index: 1;
+  z-index: 200;
 }
 .lm_dropTargetIndicator {
   box-shadow: none;
@@ -1865,7 +1865,7 @@ div.sp-container input:hover {
   color: #F80;
   padding: 10px;
   position: absolute;
-  z-index: 1;
+  z-index: 400;
   left: 10px;
   bottom: 10px;
 }
@@ -1873,7 +1873,7 @@ div.sp-container input:hover {
 .overlay-info {
   background: #000000e0;
   position: absolute;
-  z-index: 1;
+  z-index: 200;
   left: 0px;
   bottom: 0px;
   overflow-y: scroll;

bin/style.less

@@ -1,3 +1,5 @@
+@import "common.less";
+
 body {
 	margin : 0;
 	padding : 0;
@@ -179,7 +181,7 @@ input[type=checkbox] {
 	left:0px;
 	width: 100%;
 	height: 100%;
-	z-index: 99;
+	z-index: @hidemodal-layer;
 	background-color: rgba(0,0,0,0.2);
 	display: table;
 	&> .content {
@@ -227,7 +229,7 @@ input[type=checkbox] {
 .hide-scene-layer {
 	width:auto;
 	position: absolute;
-	z-index: 1;
+	z-index: @default-layer;
 	max-height: 100%;
 
 	.jstree {
@@ -269,31 +271,31 @@ input[type=checkbox] {
 
 .splitter {
 	position : relative;
-	z-index:20;
-	background:#000000;
-	opacity:.001;
-	transition:opacity 200ms ease;
-}
+	z-index: @splitter-layer;
+	background: #000000;
+	opacity: .001;
+	transition: opacity 200ms ease;
 
-.splitter:hover, .splitter.dragging {
-	background : #444444;
-	opacity : 1;
-}
+	&:hover, &.dragging {
+		background : #444444;
+		opacity : 1;
+	}
 
-.splitter.vertical .drag_handle {
-	width : 100%;
-	height : 15px;
-	position : absolute;
-	top : -5px;
-	cursor : ns-resize;
-}
+	&.vertical .drag_handle {
+		width : 100%;
+		height : 15px;
+		position : absolute;
+		top : -5px;
+		cursor : ns-resize;
+	}
 
-.splitter.horizontal .drag_handle {
-	width : 15px;
-	height : 100%;
-	position : absolute;
-	left  :-5px;
-	cursor : ew-resize;
+	&.horizontal .drag_handle {
+		width : 15px;
+		height : 100%;
+		position : absolute;
+		left  : -5px;
+		cursor : ew-resize;
+	}
 }
 
 .hide-scenetree {
@@ -625,7 +627,7 @@ input[type=checkbox] {
 		bottom : 0px;
 		padding-top : 0px;
 		padding-bottom : 5px;
-		z-index: 10;
+		z-index: @header-layer;
 		&>div {
 			border-top : none;
 			border-top-right-radius: 0;
@@ -642,7 +644,7 @@ input[type=checkbox] {
 	display : none;
 	width : 200px;
 	position : fixed;
-	z-index: 99;
+	z-index: @popup-layer;
 	top : 20px;
 	right : 0px;
 	background-color : black;
@@ -866,7 +868,7 @@ input[type=checkbox] {
 			max-height: 800px;
 			left: 20%;
 			right: 620px;
-			z-index: 99;
+			z-index: @popup-layer;
 			overflow: auto;
 			padding: 2px;
 			background: #111;
@@ -1376,7 +1378,7 @@ input[type=checkbox] {
 		text-align: left;
 		border-radius: 6px;
 		position: absolute;
-		z-index: 1;
+		z-index: @tooltip-layer;
 		padding: 4px;
 		width: 90px;
 	}
@@ -1412,7 +1414,7 @@ input[type=checkbox] {
 		text-align: left;
 		border-radius: 6px;
 		position: absolute;
-		z-index: 1;
+		z-index: @tooltip-layer;
 		padding: 4px;
 	}
 	.surface:hover .tooltiptext {
@@ -1424,7 +1426,7 @@ input[type=checkbox] {
 .graph-view {
 	outline: none !important;
 	.tabs {
-		z-index: 1;
+		z-index: @default-layer + 5;
     	background: #222222;
 		height: 100%;
 		user-select: none;
@@ -1524,7 +1526,7 @@ input[type=checkbox] {
 
 		background-color: rgb(34, 34, 34);
 		border: 1px solid #444;
-		z-index: 2;
+		z-index: @default-layer + 10;
 
 		.search-container {
 			display: flex;
@@ -1573,7 +1575,7 @@ input[type=checkbox] {
 					background: #474747;
 					color: #c0c0c0;
 					cursor: default;
-					z-index: 1;
+					z-index: @default-layer + 5;
     				box-shadow: 0px 0px 34px -9px black;
 
 					&:hover {
@@ -1598,7 +1600,7 @@ input[type=checkbox] {
 					background: #5eb7bf;
 					color: #000000;
 					box-shadow: inset 0px 0px 12px -1px black;
-    				z-index: 3;
+					z-index: @default-layer + 15;
 				}
 			}
 		}
@@ -1612,7 +1614,7 @@ input[type=checkbox] {
 		background-color: rgb(34, 34, 34);
 		border: 1px solid #444;
 
-		z-index: 2;
+		z-index: @default-layer + 10;
 
 		#options {
 			max-height: 300px;
@@ -1632,7 +1634,7 @@ input[type=checkbox] {
 					background: #474747;
 					color: #c0c0c0;
 					cursor: default;
-					z-index: 3;
+					z-index: @default-layer + 15;
     				box-shadow: 0px 0px 34px -9px black;
 
 					&:hover {
@@ -1657,7 +1659,7 @@ input[type=checkbox] {
 					background: #5eb7bf;
 					color: #000000;
 					box-shadow: inset 0px 0px 12px -1px black!important;
-    				z-index: 3;
+					z-index: @default-layer + 15;
 				}
 				&.grey-item {
 					background: #adadad;
@@ -1863,7 +1865,7 @@ input[type=checkbox] {
 /* Golden Layout Fixes */
 
 .lm_header .lm_tabs {
-	z-index : 1;
+	z-index : @default-layer;
 }
 
 .lm_dropTargetIndicator {
@@ -2127,7 +2129,7 @@ div.sp-container {
 			color : #F80;
 			padding : 10px;
 			position: absolute;
-			z-index: 1;
+			z-index: @domkit-layer;
 			left : 10px;
 			bottom : 10px;
 		}
@@ -2139,7 +2141,7 @@ div.sp-container {
 .overlay-info {
 	background: #000000e0;
 	position: absolute;
-	z-index: 1;
+	z-index: @default-layer;
 	left : 0px;
 	bottom : 0px;
 	overflow-y: scroll;