Live console: theme-aware interaction colors (no more black-on-black in day mode); soften group headers from black bars to tinted band; default to OS light/dark

c5739cee53b6e7334802327467fee2d0a68b0cdf · 2026-08-13 16:11:03 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M public_live/index.html

Diff

commit c5739cee53b6e7334802327467fee2d0a68b0cdf
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Aug 13 16:11:03 2026 -0700

    Live console: theme-aware interaction colors (no more black-on-black in day mode); soften group headers from black bars to tinted band; default to OS light/dark
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public_live/index.html | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/public_live/index.html b/public_live/index.html
index 2d03cd8..54e8fda 100644
--- a/public_live/index.html
+++ b/public_live/index.html
@@ -9,9 +9,14 @@
   :root{
     --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#2b333d; --ink:#e6edf3;
     --dim:#9aa7b4; --accent:#4c9be8; --green:#cbe6b4; --greenink:#1a2e10; --chip:#232c37; --fs:13px; --rail:300px;
+    /* interaction colors — theme-aware so nothing goes black-on-black in day mode */
+    --rowhover:#1a212b; --cellfocus:#0d2b3f; --linkhover:#12283a;
+    --ghdr-bg:rgba(76,155,232,.16); --ghdr-fg:#7fbcf2; --linkval-li:#6bb2ff;
   }
   *{box-sizing:border-box}
-  body.light{--bg:#f4f6f9;--panel:#ffffff;--panel2:#eef2f6;--line:#d3dbe4;--ink:#1a2230;--dim:#5c6b7a;--chip:#e7edf3;--green:#dff0cf;--greenink:#26401a;}
+  body.light{--bg:#f4f6f9;--panel:#ffffff;--panel2:#eef2f6;--line:#d3dbe4;--ink:#1a2230;--dim:#5c6b7a;--chip:#e7edf3;--green:#dff0cf;--greenink:#26401a;
+    --rowhover:#eaf1f8; --cellfocus:#dcebfb; --linkhover:#e4f0ff;
+    --ghdr-bg:rgba(76,155,232,.13); --ghdr-fg:#1d5c96; --linkval-li:#1a66c2;}
   body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:var(--fs)}
   header{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:9px 14px;flex-wrap:wrap}
   header h1{font-size:15px;margin:0;font-weight:700;letter-spacing:.3px;white-space:nowrap}
@@ -70,9 +75,9 @@
   table{table-layout:fixed}
   td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* collapsed: compact single line */
   tbody td{padding:6px 9px;border-bottom:1px solid var(--line);vertical-align:top;max-width:320px}
-  tbody tr:hover{background:#1a212b}
+  tbody tr:hover{background:var(--rowhover)}
   /* EXPAND ON CLICK: focus a cell (e.g. Notes) and it wraps + grows to show/edit the whole value */
-  td[contenteditable]:focus{outline:none;background:#0d2b3f;box-shadow:inset 0 0 0 2px var(--accent);
+  td[contenteditable]:focus{outline:none;background:var(--cellfocus);box-shadow:inset 0 0 0 2px var(--accent);
     white-space:pre-wrap;word-break:break-word;overflow:visible;text-overflow:clip;min-width:260px;max-width:520px;position:relative;z-index:4}
   td.saved{background:var(--green);color:var(--greenink)}
   td.enriched{box-shadow:inset 3px 0 0 #7bc043;background:rgba(123,192,67,.09)}
@@ -87,23 +92,23 @@
   td.linkcell .cicon,td.callcell .cicon{display:inline-flex;vertical-align:middle;margin-right:5px}
   td.linkcell .cicon svg,td.callcell .cicon svg{width:1.05em;height:1.05em;display:block}
   td.linkcell.web .cicon,td.linkcell.web .linkval{color:var(--accent)}
-  td.linkcell.li .cicon,td.linkcell.li .linkval{color:#4aa3ff}
+  td.linkcell.li .cicon,td.linkcell.li .linkval{color:var(--linkval-li)}
   td.callcell .cicon{color:#16a34a}
-  td.linkcell:hover,td.callcell:hover{background:#12283a}
+  td.linkcell:hover,td.callcell:hover{background:var(--linkhover)}
   td.linkcell:hover .linkval,td.callcell:hover .linkval{text-decoration:underline}
   /* FIELD LOOKUP: click a field in the left rail -> its full value list opens here in the main area */
   .lkhead{display:flex;align-items:center;gap:10px;padding:8px 10px;position:sticky;top:0;background:var(--panel2);border-bottom:1px solid var(--line);z-index:6}
   .lkhead b{font-size:14px;color:var(--accent)} .lksub{color:var(--dim);font-size:12px}
   .lkback{cursor:pointer;color:var(--accent);font-weight:700;white-space:nowrap} .lkback:hover{text-decoration:underline}
   .lkclose{cursor:pointer;color:var(--dim);font-weight:700} .lkclose:hover{color:#fff}
-  #lksearch{margin-left:auto;background:var(--panel);border:1px solid var(--line);color:#e6edf3;border-radius:6px;padding:3px 8px;font-size:12px;min-width:150px}
+  #lksearch{margin-left:auto;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:3px 8px;font-size:12px;min-width:150px}
   table.lktbl{table-layout:auto;border-collapse:collapse;width:100%}
   .lktbl th{position:sticky;top:39px;text-align:left;background:var(--panel);color:var(--dim);font-size:11px;padding:6px 10px;border-bottom:1px solid var(--line);z-index:5}
-  .lkrow{cursor:pointer;border-bottom:1px solid var(--line)} .lkrow:hover{background:#1a212b}
+  .lkrow{cursor:pointer;border-bottom:1px solid var(--line)} .lkrow:hover{background:var(--rowhover)}
   .lkrow td{padding:6px 10px} .lkv{max-width:680px} .lkn{color:var(--dim);text-align:right;white-space:nowrap}
   .lkrow .lkbx{width:18px;color:transparent} .lkrow.on{background:rgba(123,192,67,.12)} .lkrow.on .lkbx{color:#7bc043}
   .rowbtn{background:var(--accent);color:#04121f;border:0;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
-  .grouphdr td{background:#12161c;color:var(--accent);font-weight:700;font-size:12px;padding:6px 9px;position:sticky;top:26px}
+  .grouphdr td{background:var(--ghdr-bg);color:var(--ghdr-fg);font-weight:600;font-size:11px;letter-spacing:.3px;padding:5px 9px;position:sticky;top:26px;box-shadow:inset 3px 0 0 var(--accent);border-bottom:1px solid var(--line)}
   /* cards */
   .cards{display:grid;gap:11px} .cards.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .cards.list{grid-template-columns:1fr}
   .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;position:relative} .card:hover{border-color:var(--accent)}
@@ -603,7 +608,7 @@ $('#purpose').onchange=regen;$('#tone').onchange=regen;$('#regen').onclick=regen
 $('#act-copy').onclick=()=>{navigator.clipboard?.writeText(($('#d-subject').value?('Subject: '+$('#d-subject').value+'\n\n'):'')+$('#d-body').value);$('#act-copy').textContent='✓ Copied';setTimeout(()=>$('#act-copy').textContent='⧉ Copy draft',1200)};
 function applyTheme(t){document.body.classList.toggle('light',t==='light');$('#theme').textContent=t==='light'?'☀️':'🌙'}
 $('#theme').onclick=()=>{const t=document.body.classList.contains('light')?'dark':'light';LS.set('theme',t);applyTheme(t)};
-applyTheme(LS.get('theme','dark'));
+applyTheme(LS.get('theme', (window.matchMedia&&matchMedia('(prefers-color-scheme: light)').matches)?'light':'dark'));
 document.addEventListener('keydown',e=>{if(e.key==='Escape')closeDraft()});
 (async()=>{await loadMeta();await loadData()})();
 </script>

← 4ff3c02 Live console: Website/LinkedIn/phone cells are now WHOLE-CEL · back to Rentv Sheet Enrich · Draft drawer: contact data on a white card (crisp links, not e2b2b9e →