1 files changed, 73 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 23013a4..dc121ab 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2084,6 +2084,79 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   outline: none;
 }
 
+/* The player as a remote while a television plays the film. Opaque, over
+   the local picture, which keeps running underneath only to pace the
+   download. */
+.video-remote {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  padding: 16px;
+  background: #0b1222;
+  border-radius: 4px;
+  color: #e2e8f0;
+  min-height: 260px;
+}
+
+.video-remote-device {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 1.05rem;
+  text-align: center;
+}
+
+.video-remote-time {
+  font-variant-numeric: tabular-nums;
+  color: #94a3b8;
+}
+
+.video-remote-seek {
+  width: min(100%, 640px);
+}
+
+.video-remote-buttons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.video-remote-btn {
+  min-width: 64px;
+  min-height: 44px;
+  padding: 8px 14px;
+  border: 1px solid #334155;
+  border-radius: 999px;
+  background: #1e293b;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.video-remote-btn:disabled { opacity: 0.4; cursor: default; }
+
+.video-remote-main {
+  min-width: 56px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-remote-stop {
+  border: 0;
+  background: none;
+  color: #fca5a5;
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 /* Where the film was picked up again. Sits over the picture rather than
    pushing it down, and clears itself once the viewer is watching. */
 .video-container { position: relative; }