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