60d75b94bb7e8e3d749c103ff5ae613268562c46
max
  Fri Jan 30 02:55:20 2026 -0800
Revert "Revert "Reapply "changing superTrack TrackUi quite a bit.""

This reverts commit 55df1a106590a6c9fd7e3cca90fa6bbad8eb50c4.

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index e63ac948c72..c7a27fef8c4 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -484,30 +484,88 @@
 
 div.trackUiHicHiddenAttributes
 {
     font-size: 0.9em;
     display: none;
     max-height: 10em;
     max-width: 60em;
     overflow: scroll;
     background-color: white;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
     border: solid;
     border-width: thin;
 }
 
+#superTrackTable {
+    border-collapse: collapse;
+}
+
+#superTrackTable tr {
+    border-bottom: 1px solid #DDD;
+}
+
+#superTrackTable td {
+    vertical-align: top;
+}
+
+.seg-btn-group {
+    display: inline-flex;
+  }
+
+/* the buttons in the middle */
+.seg-btn-group button {
+    border-radius: 0px;
+    color: #777;
+    padding: 2px 3px;
+    font-size: 11px;
+    font-weight: 500;
+    border: 1px solid #ccc;
+    background: #fff;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    margin: 0;
+    outline: none;
+    margin-left: -1px;
+  }
+
+/* the first button is round on the left */
+  .seg-btn-group button:first-child {
+    margin-left: 0;
+    border-radius: 3px 0 0 3px;
+  }
+
+/* the last button is round on the right */
+  .seg-btn-group button:last-child {
+    border-radius: 0 3px 3px 0;
+  }
+
+  .seg-btn-group button:hover:not(.seg-active) {
+    background: #f5f5f5;
+  }
+
+  /* the active button is the 'pressed' button, dark with bright text */
+  .seg-btn-group button.seg-active {
+    background: #888888;
+    color: #fff;
+    border-color: #AAAAAA;
+    z-index: 1;
+    position: relative;
+  }
+
+/* -------------- */
+
 /* hgTracks config page groups list */
 TABLE.groupLists { background-color: #FFFEE8; width: 50em; }
 TABLE.groupLists TR:not(.blueToggleBar):not(.noData) TD { border: 1px solid; }
 
 /* for displaying a basic table - need to condense these to all just the .stdTbl class */
 table.chainTbl, .descTbl, .stdTbl {border-collapse: collapse;}
 table.chainTbl td, .descTbl td, .descTbl th, .stdTbl td, .stdTbl th {border: 1px solid #666; padding: 5px;}
 table.descTbl td.number { text-align: right; }
 
 /* --------------- Newer UI 2.0 styles --------------- */
 .ghost { background-color: #EEEEEE; }
 .pale  { background-color: #F8F8F8; }
 .bgLevel1  { background-color: #FFFEE8; }
 .bgLevel2  { background-color: #FFF9D2; }
 .bgLevel3  { background-color: #FCECC0; }