From c48312e3da9459328a34101f2aaf9f7480db790c Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Tue, 2 Jun 2026 09:37:14 -0400
Subject: [PATCH] zebra-spaces: tile chrome defaults to light, dark mode
 restores black
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Screen-share + camera tiles had hardcoded #000 background, border, and
meta-bar regardless of theme — fine in dark mode, jarring in light mode
where the tile sat on a white page like a black box.

Light is now the base: tile bg #fff, border #ddd, meta bar #f0f0f0
with #333 text. A short dark-mode override block restores the night
palette (bg #000, meta #111/#ddd) so dark mode still looks the same.
---
 web/zebra-spaces.html | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
index 3b0063d..d38fe44 100644
--- a/web/zebra-spaces.html
+++ b/web/zebra-spaces.html
@@ -51,6 +51,13 @@
   html.theme-dark .dot.ok { background: #0a0; border-color: #0a0; }
   html.theme-dark .meter { background: #000; border-color: #444; }
   html.theme-dark .meter-fill { background: #ccc; }
+  /* 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; }
+  html.theme-dark .screen-tile .screen-meta,
+  html.theme-dark .camera-tile .screen-meta { background: #111; color: #ddd; }
   /* badges */
   html.theme-dark .badge.host    { background: #ccc; color: #000; border-color: #ccc; }
   html.theme-dark .badge.cohost  { background: #666; color: #000; border-color: #666; }
@@ -205,15 +212,18 @@
    * When sec-screens is shown the game tabs + iframe are hidden so the
    * screen owns the column. */
   #screens { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
+  /* tile chrome (border + bg + meta) defaults to light-theme palette so
+   * the screen-share blends with a white page. Dark-theme overrides
+   * further down restore the black tile chrome for the night palette. */
   .screen-tile {
-    border: 1px solid #000; background: #000; padding: 0;
+    border: 1px solid #ddd; background: #fff; padding: 0;
     display: grid; grid-auto-rows: max-content; position: relative;
   }
   .screen-tile video {
-    width: 100%; height: auto; max-height: 92vh; display: block; background: #000;
+    width: 100%; height: auto; max-height: 92vh; display: block; background: #fff;
   }
   .screen-tile .screen-meta {
-    background: #111; color: #ddd; font-size: 0.7rem; padding: 0.3rem 0.5rem;
+    background: #f0f0f0; color: #333; font-size: 0.7rem; padding: 0.3rem 0.5rem;
     display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center;
   }
   /* Firefox Android rejects MediaStream <video> autoplay even when muted.
@@ -235,15 +245,15 @@
    * vertically. Each tile keeps a 16:9 letterbox so faces don't squash. */
   #cameras { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
   .camera-tile {
-    border: 1px solid #000; background: #000; padding: 0;
+    border: 1px solid #ddd; background: #fff; padding: 0;
     display: grid; grid-auto-rows: max-content; position: relative;
   }
   .camera-tile video {
-    width: 100%; height: auto; display: block; background: #000;
+    width: 100%; height: auto; display: block; background: #fff;
     aspect-ratio: 16 / 9; object-fit: cover;
   }
   .camera-tile .screen-meta {
-    background: #111; color: #ddd; font-size: 0.7rem; padding: 0.2rem 0.4rem;
+    background: #f0f0f0; color: #333; font-size: 0.7rem; padding: 0.2rem 0.4rem;
     display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; align-items: center;
   }
   /* tap-to-play overlay applies to camera tiles too */
@@ -2326,8 +2336,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">5e52fb393afcebe7f8500da0ad8e3170</span><br>
-  sha256 <span class="stamp-sha">df072d2fc56d260f0c393f22fb0ba5ad59c7fe83a6f176b140434d1d56810249</span><br>
+  md5 <span class="stamp-md5">1f0e01278f2c18120375ef141e5b8baa</span><br>
+  sha256 <span class="stamp-sha">b08f250c76cec72f7be459a2254d76e787c3869a7a108bb99cd746fe336f06d7</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>