4ea2a83211550c3d706b60ad6a37fb896771e81d
max
  Tue Aug 4 07:49:33 2026 -0700
hgBlat table view: tighten colors and font sizes to the house style

Follow the UCSC browser UI style guide for CGI output more closely:
- drop the decorative green/orange coloring of the Matches/Mismatch values
in the detail panel; only the identity percentage keeps a meaningful color
(the semantic identity scale).
- make the selected-hit location plain ink instead of navy.
- shrink the oversized detail tile values (17px) and location (15px) to the
14px body size, so the panel reads as a data table, not a KPI dashboard.
- darken the washed-out faint-grey stat/tile labels to the palette's muted grey.
- use the palette header tint for the identity/coverage bar tracks instead of
an off-palette shade.

refs #37893

diff --git src/hg/js/hgBlat.js src/hg/js/hgBlat.js
index 6a0d49d2320..8e069edbe07 100644
--- src/hg/js/hgBlat.js
+++ src/hg/js/hgBlat.js
@@ -42,31 +42,31 @@
         --panel:#f4f7fb; --section:#4c7093; --headrow:#dbe4ee; --headrowLine:#a9bcd1;
         --sel:#cfe0f5; --hover:#eef3fb; --stripe:#f4f7fb;
         --btn:#ffffff; --btnLine:#999999; --btnText:#0a2b6b; --btnHover:#eef2f7;
         --btnDark:#0a2b6b; --btnDarkHover:#0a2350;
         font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--ink); font-size:14px; }
     .blatCard { background:var(--card); border:1px solid var(--line); border-radius:3px; overflow:hidden;
         box-shadow:0 1px 2px rgba(20,40,70,.10); margin:12px 0 24px; }
     .blatHead { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
         padding:9px 18px; background:var(--section); }
     .blatHead .t { font-weight:700; font-size:16px; color:#ffffff; }
     .blatHead .t .sub { color:#d7e2ee; font-weight:400; }
     .blatHeadActions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
     .blatStrip { display:flex; align-items:center; gap:24px; flex-wrap:wrap;
         padding:11px 18px; border-bottom:1px solid var(--line); background:var(--panel); }
     .blatStat { display:flex; flex-direction:column; gap:1px; }
-    .blatStat .k { font-size:12px; color:var(--faint); font-weight:700; }
+    .blatStat .k { font-size:12px; color:var(--muted); font-weight:700; }
     .blatStat .v { font-size:14px; font-weight:700; color:var(--ink); }
     .blatDiv { width:1px; height:28px; background:var(--line); }
     .blatStripActions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
     #blatResults .blatPill, #blatResults .blatStripActions input[type=submit],
     #blatResults .blatStripActions input[type=button] {
         font-family:inherit; font-size:13px; font-weight:700; color:var(--btnText); background:var(--btn);
         border:1px solid var(--btnLine); border-radius:3px; padding:5px 12px; cursor:pointer;
         text-decoration:none; display:inline-block; line-height:1.5; }
     #blatResults .blatPill:hover, #blatResults .blatStripActions input[type=submit]:hover,
     #blatResults .blatStripActions input[type=button]:hover { background:var(--btnHover); text-decoration:none; }
     #blatResults .blatPill.primary { background:var(--btnDark); color:#fff; border-color:var(--btnDark); }
     #blatResults .blatPill.primary:hover { background:var(--btnDarkHover); }
     .blatShareBox { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
         padding:11px 18px; border-bottom:1px solid var(--line); background:var(--panel); }
     .blatShareMsg { font-size:14px; color:var(--muted); }
@@ -80,48 +80,48 @@
     #blatTable tbody tr { cursor:pointer; }
     #blatTable tbody tr:nth-child(even) { background:var(--stripe); }
     #blatTable tbody tr:hover { background:var(--hover); }
     #blatTable tbody tr.blatSel { background:var(--sel); box-shadow:inset 3px 0 0 var(--navy); }
     #blatTable td.num, #blatTable th.num { text-align:right; font-variant-numeric:tabular-nums; }
     #blatTable td.rankCol { color:var(--faint); }
     #blatTable td.strandCol { text-align:center; color:var(--muted); }
     #blatTable td.actionsCol a { color:var(--accent); font-weight:700; }
     #blatTable td.actionsCol .blatActSep { color:var(--line); margin:0 10px; }
     #blatTable a { color:var(--accent); text-decoration:none; }
     #blatTable a:hover { color:var(--accentHover); text-decoration:underline; }
     .blatRowHint { padding:11px 18px 2px; font-size:13px; color:var(--muted); }
     .blatLocus { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .chrNote { color:var(--faint); cursor:help; margin-left:4px; }
     .blatIdWrap { display:flex; align-items:center; gap:9px; justify-content:flex-end; }
-    .blatIdBar { flex:0 0 54px; height:8px; background:#dce4ee; border:1px solid var(--headrowLine); overflow:hidden; }
+    .blatIdBar { flex:0 0 54px; height:8px; background:var(--headrow); border:1px solid var(--headrowLine); overflow:hidden; }
     .blatIdBar > i { display:block; height:100%; }
     .blatIdPct { font-size:13px; font-weight:700; width:48px; text-align:right; font-variant-numeric:tabular-nums; }
-    .blatCov { position:relative; display:block; width:150px; height:10px; background:#dce4ee; border:1px solid var(--headrowLine); }
+    .blatCov { position:relative; display:block; width:150px; height:10px; background:var(--headrow); border:1px solid var(--headrowLine); }
     .blatCov > i { position:absolute; top:0; bottom:0; background:var(--accent); }
     #blatTable_filter { float:left; margin:0 0 10px; }
     #blatTable_filter input { width:300px; max-width:55vw; border:1px solid var(--btnLine);
         border-radius:3px; padding:5px 9px; font-size:14px; }
     #blatTable_wrapper { padding:6px 18px 4px; }
     .blatDetail { border-bottom:1px solid var(--line); background:var(--panel); padding:14px 18px 16px; }
     .blatDetail .dhead { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
-    .blatDetail .dhead .lab { font-size:13px; color:var(--faint); }
-    .blatDetail .dhead .loc { font-size:15px; font-weight:700; color:var(--accent); }
+    .blatDetail .dhead .lab { font-size:13px; color:var(--muted); }
+    .blatDetail .dhead .loc { font-size:14px; font-weight:700; color:var(--ink); }
     .blatDetailCard { display:flex; gap:26px; flex-wrap:wrap; padding:14px 16px; background:var(--card);
         border:1px solid var(--line); border-radius:3px; }
     .blatTiles { display:grid; grid-template-columns:repeat(4,auto); gap:14px 26px; }
-    .blatTile .k { font-size:13px; color:var(--faint); cursor:help; }
-    .blatTile .v { font-size:17px; font-weight:700; color:var(--ink); }
+    .blatTile .k { font-size:13px; color:var(--muted); cursor:help; }
+    .blatTile .v { font-size:14px; font-weight:700; color:var(--ink); }
     .blatDetailActions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
     `;
     var st = document.createElement('style');
     st.id = 'blatStyle';
     st.textContent = css;
     document.head.appendChild(st);
 }
 
 // ---- cell renderers ------------------------------------------------------
 
 function blatPositionCell(hit) {
     var note = hit.chromNote ?
         ` <span class="chrNote" title="${blatEsc(hit.chromNote)}">&#9432;</span>` : '';
     return `<a class="blatPos" href="${hit.browserUrl}">${blatEsc(hit.chrom)}:` +
         `${blatFmt(hit.tStart)}-${blatFmt(hit.tEnd)}</a>${note}`;
@@ -208,32 +208,32 @@
 };
 
 function blatTileSkeleton(label, id, color) {
     var style = color ? ` style="color:${color}"` : '';
     var tip = BLAT_TILE_TIPS[label] || '';
     return `<div class="blatTile"><div class="k" title="${blatEsc(tip)}">${label}</div>` +
         `<div class="v" id="${id}"${style}></div></div>`;
 }
 
 function blatDetailSkeleton() {
     // Built once; blatRenderDetail() only updates values, so the tile-label tooltips
     // are wired a single time by convertTitleTagsToMouseovers.
     var tiles =
         blatTileSkeleton('Score', 'dvScore') +
         blatTileSkeleton('Identity', 'dvIdentity') +
-        blatTileSkeleton('Matches', 'dvMatches', '#15803d') +
-        blatTileSkeleton('Mismatch', 'dvMismatch', '#b45309') +
+        blatTileSkeleton('Matches', 'dvMatches') +
+        blatTileSkeleton('Mismatch', 'dvMismatch') +
         blatTileSkeleton('Gaps', 'dvGaps') +
         blatTileSkeleton('Blocks', 'dvBlocks') +
         blatTileSkeleton('Strand', 'dvStrand') +
         blatTileSkeleton('Q span', 'dvQspan');
     document.getElementById('blatDetail').innerHTML =
         `<div class="dhead"><span class="lab">Selected hit</span>` +
         `<span class="loc" id="dvLoc"></span></div>` +
         `<div class="blatDetailCard"><div style="display:flex;flex-direction:column;gap:16px;min-width:250px">` +
         `<div class="blatTiles">${tiles}</div>` +
         `<div class="blatDetailActions">` +
         `<a class="blatPill" id="dvBrowser" href="#">Open in browser</a>` +
         `<a class="blatPill" id="dvNewTab" target="_blank" href="#">Open in new tab</a></div></div>` +
         `<div id="dvAlignBox" style="flex:1;min-width:320px;border-left:1px solid var(--line);padding-left:24px;` +
         `display:flex;flex-direction:column;justify-content:center">` +
         `<div class="blatTile"><div class="k">Alignment</div></div>` +