diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index 6f1bc8e..f531f64 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -275,15 +275,19 @@ .tile-thumb .viewing-badge { position: absolute; inset: 0; display: grid; place-items: center; - background: rgba(0,0,0,0.55); color: #fff; + background: rgba(0,0,0,0.22); color: #fff; font-family: monospace; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; pointer-events: none; + text-shadow: 0 1px 2px rgba(0,0,0,0.75); opacity: 0; transition: opacity 0.12s; z-index: 5; } .tile-thumb.viewing { cursor: default; } .tile-thumb.viewing:hover { outline: none; } - .tile-thumb.viewing > video { opacity: 0.35; } + /* keep the underlying stream legible — a soft dim is enough to + * read as 'this is what's in the spotlight slot', no need to + * blacken it. */ + .tile-thumb.viewing > video { opacity: 0.75; } .tile-thumb.viewing .viewing-badge { opacity: 1; } /* spotlight sizing — a camera in the spotlight uses contain so the * whole frame is visible (not cropped like the thumb cover) */ @@ -3783,9 +3787,9 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');