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 {
- + key lives in this browser only.
@@ -579,9 +582,8 @@ try {
- window or tab; tick "share audio" if offered.
-
+
@@ -2336,8 +2338,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');