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