[cdb] Fix header zOrdering, separator refacto and style tweaks

bin/cdb.css

@@ -61,7 +61,6 @@
   overflow-x: auto;
   width: 100%;
   table-layout: fixed;
-  border-collapse: collapse;
   border-spacing: 0;
   background-color: #222;
   position: relative;
@@ -123,16 +122,18 @@
   cursor: pointer;
   background-color: #333;
   border-left: none;
+  border-bottom: 1px solid #444;
 }
 .cdb .cdb-sheet tr.head td.start {
   cursor: nw-resize;
 }
 .cdb .cdb-sheet tr.separator {
+  --level: 0;
   height: 10px;
 }
 .cdb .cdb-sheet tr.separator td {
   position: sticky;
-  top: 19px;
+  top: 21px;
   z-index: 2;
   border-left: none;
   padding-top: 6px;
@@ -148,41 +149,11 @@
 .cdb .cdb-sheet tr.separator td .toggle:hover {
   color: #ccc;
 }
-.cdb .cdb-sheet tr.separator.seplevel-1 td {
-  background-color: #3d3d3d;
-}
-.cdb .cdb-sheet tr.separator.seplevel-1 td .toggle {
-  padding-left: 25px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-2 td {
-  background-color: #383838;
-}
-.cdb .cdb-sheet tr.separator.seplevel-2 td .toggle {
-  padding-left: 40px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-3 td {
-  background-color: #343434;
-}
-.cdb .cdb-sheet tr.separator.seplevel-3 td .toggle {
-  padding-left: 50px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-4 td {
-  background-color: #303030;
-}
-.cdb .cdb-sheet tr.separator.seplevel-4 td .toggle {
-  padding-left: 60px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-5 td {
-  background-color: #303030;
-}
-.cdb .cdb-sheet tr.separator.seplevel-5 td .toggle {
-  padding-left: 70px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-6 td {
-  background-color: #303030;
+.cdb .cdb-sheet tr.separator td {
+  background-color: #NaNNaNNaN;
 }
-.cdb .cdb-sheet tr.separator.seplevel-6 td .toggle {
-  padding-left: 80px;
+.cdb .cdb-sheet tr.separator td .toggle {
+  padding-left: calc(25px + var(--level) * 20px);
 }
 .cdb .cdb-sheet tr.locIgnored {
   background-color: #221C1C;
@@ -238,18 +209,25 @@
 .cdb .cdb-sheet tr.clickable:hover {
   background-color: #f8f8f8;
 }
+.cdb .cdb-sheet thead.head {
+  background-color: #2A2A2A;
+  z-index: 9;
+}
 .cdb .cdb-sheet:not(.cdb-sub-sheet) > thead.head {
   position: sticky;
   top: 0;
 }
+.cdb .cdb-sheet .cdb-sub-sheet > thead.head {
+  top: 21px;
+  z-index: 10;
+}
 .cdb .cdb-sheet tr.head,
 .cdb .cdb-sheet 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;
+  border-left: 1px solid #666;
+  border-bottom: 1px solid #666;
   color: #ddd;
   width: auto;
   white-space: nowrap;
@@ -263,8 +241,6 @@
 .cdb .cdb-sheet td {
   user-select: none;
   border-left: 1px solid #444;
-}
-.cdb .cdb-sheet tr {
   border-bottom: 1px solid #333;
 }
 .cdb .cdb-sheet tr.validation-error td {
@@ -397,7 +373,6 @@
   outline: 1px solid black;
 }
 .cdb .cdb-sheet td.t_flags {
-  position: relative;
   overflow: visible;
 }
 .cdb .cdb-sheet td.t_ref,

bin/cdb.less

@@ -128,7 +128,7 @@
 
 		width : 100%;
 		table-layout:fixed;
-		border-collapse : collapse;
+		//border-collapse : collapse;
 		border-spacing : 0;
 		background-color: #222;
 		position: relative; // so that error message follow along with scrolling
@@ -144,6 +144,7 @@
 			cursor : pointer;
 			background-color: #333;
 			border-left: none;
+			border-bottom : 1px solid #444;
 		}
 
 		tr.head td.start {
@@ -151,10 +152,11 @@
 		}
 
 		tr.separator {
+			--level: 0;
 			height : 10px;
 			td {
 				position: sticky;
-				top: 19px;
+				top: 21px;
 				z-index: 2;
 				border-left: none;
 				padding-top: 6px;
@@ -170,41 +172,12 @@
 					}
 				}
 			}
-			&.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 {
+
+			& td {
 				.toggle {
-					padding-left : 80px;
+					padding-left : calc(25px + var(--level) * 20px);
 				}
-				background-color : #303030;
+				background-color: mix(#3d3d3d, #303030, calc(var(--level) / 6));
 			}
 		}
 
@@ -264,18 +237,28 @@
 			background-color : #f8f8f8;
 		}
 
+		thead.head {
+			background-color : #2A2A2A;
+			z-index: 9;
+		}
+
 		&:not(.cdb-sub-sheet) > thead.head {
 			position: sticky;
 			top: 0;
 		}
 
+		.cdb-sub-sheet > thead.head {
+			top: 21px;
+			z-index: 10;
+
+		}
+
 		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;
+			border-left: 1px solid #666;
+			border-bottom: 1px solid #666;
 			color : #ddd;
 			width: auto;
 			white-space: nowrap;
@@ -291,9 +274,7 @@
 		td {
 			user-select: none;
 			border-left : 1px solid #444;
-		}
 
-		tr {
 			border-bottom : 1px solid #333;
 		}
 
@@ -446,7 +427,6 @@
 		}
 
 		td.t_flags {
-			position: relative;
 			overflow: visible;
 		}
 

hide/comp/cdb/Separator.hx

@@ -238,8 +238,7 @@ class Separator extends Component {
 		}
 
 		element.attr("level", data.level == null ? 0 : data.level);
-		element.removeClass("seplevel-"+(data.level == null ? 0 : data.level));
-		element.addClass('seplevel-'+(data.level == null ? 0 : data.level));
+		element.get(0).style.setProperty("--level", data.level == null ? "0" : ""+data.level);
 
 		if (refreshChildren) {
 			for (s in subs)