From e3c4431b8e1521fa65d66463a58c3bee79189d27 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Tue, 2 Jun 2026 09:43:08 -0400
Subject: [PATCH] zebra-spaces: transparent video bg (tile bg shows through
 letterbox) + UI tweaks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Letterbox issue: setting background:#fff/#000 on the <video> element
didn't reach the letterbox area in some browsers — the UA paints its
own black inside the video box regardless of the CSS. Switched the
video bg to transparent so the tile-element background (already
themed light/dark) shows through wherever video doesn't paint, in
both themes.

Three UI tweaks per fox:
- 'backup / restore key' → 'backup / restore' (identity row)
- share-screen and share-camera now live on separate .row lines (was:
  share-camera row had inline margin-top, now it's just a sibling .row)
- dropped the 'window or tab; tick share audio if offered' hint note —
  fox said it's noise
---
 web/zebra-spaces.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
index d38fe44..3aba94f 100644
--- a/web/zebra-spaces.html
+++ b/web/zebra-spaces.html
@@ -54,8 +54,9 @@
   /* dark mode: tile chrome flips back to the night palette */
   html.theme-dark .screen-tile,
   html.theme-dark .camera-tile { background: #000; border-color: #000; }
-  html.theme-dark .screen-tile video,
-  html.theme-dark .camera-tile video { background: #000; }
+  /* video stays transparent in both themes — the tile element's bg
+   * shows through any letterbox / pre-frame state, so the bars match
+   * the surrounding page in either palette */
   html.theme-dark .screen-tile .screen-meta,
   html.theme-dark .camera-tile .screen-meta { background: #111; color: #ddd; }
   /* badges */
@@ -220,7 +221,8 @@
     display: grid; grid-auto-rows: max-content; position: relative;
   }
   .screen-tile video {
-    width: 100%; height: auto; max-height: 92vh; display: block; background: #fff;
+    width: 100%; height: auto; max-height: 92vh; display: block;
+    background: transparent;  /* let the tile bg show through letterbox */
   }
   .screen-tile .screen-meta {
     background: #f0f0f0; color: #333; font-size: 0.7rem; padding: 0.3rem 0.5rem;
@@ -249,7 +251,8 @@
     display: grid; grid-auto-rows: max-content; position: relative;
   }
   .camera-tile video {
-    width: 100%; height: auto; display: block; background: #fff;
+    width: 100%; height: auto; display: block;
+    background: transparent;
     aspect-ratio: 16 / 9; object-fit: cover;
   }
   .camera-tile .screen-meta {
@@ -504,7 +507,7 @@ try {
     <span id="pub-short" class="pub-short" title="your persistent ed25519 pubkey"></span>
   </div>
   <div class="row">
-    <button id="btn-vault" class="small">backup / restore key</button>
+    <button id="btn-vault" class="small">backup / restore</button>
     <button id="btn-logout" class="small">log out</button>
     <span class="note">key lives in this browser only.</span>
   </div>
@@ -579,9 +582,8 @@ try {
   <div class="row">
     <button id="btn-screen-share" class="invert">share screen</button>
     <button id="btn-screen-stop" class="hidden">stop sharing</button>
-    <span class="note">window or tab; tick "share audio" if offered.</span>
   </div>
-  <div class="row" style="margin-top:0.4rem">
+  <div class="row">
     <button id="btn-camera-share" class="invert">share camera</button>
     <button id="btn-camera-stop" class="hidden">stop camera</button>
     <select id="camera-select" title="camera device — applies on next start"><option value="">default camera</option></select>
@@ -2336,8 +2338,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
 
 <footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-02</span><br>
-  md5 <span class="stamp-md5">1f0e01278f2c18120375ef141e5b8baa</span><br>
-  sha256 <span class="stamp-sha">b08f250c76cec72f7be459a2254d76e787c3869a7a108bb99cd746fe336f06d7</span><br>
+  md5 <span class="stamp-md5">db2c13fdc5565041fb83200fb0d380bc</span><br>
+  sha256 <span class="stamp-sha">cea86b6c1acde906423fbd1f7a2a2ba31f6f2aa6b0962b432706ffe6ae18bd59</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>