加上纯色websocket

webapp_gallery/src/styles.css

@@ -36,6 +36,8 @@ h2 { margin: 4px 0 0; font-size: 23px; letter-spacing: -.03em; }
 .error { color: #ff879d !important; }
 
 .topbarActions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+.transportSelector { display: flex; align-items: center; gap: 7px; color: #8296b2; font-size: 11px; white-space: nowrap; }
+.transportSelector select { padding: 7px 9px; color: #c9d8eb; border: 1px solid #2a3b55; border-radius: 8px; background: #0a1220; }
 .topbarActions button, nav button {
     padding: 8px 13px;
     color: #aabbd3;
@@ -78,7 +80,7 @@ nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; }
 .plotExecutionPolicy label { display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; }
 .plotExecutionPolicy input { accent-color:#52dbc1; }
 .plotViewportHidden { position:relative; }
-.plotViewportHidden video { visibility:hidden; }
+.plotViewportHidden video, .plotViewportHidden canvas { visibility:hidden; }
 .plotHiddenState { position:absolute; inset:0; display:grid; place-content:center; gap:5px; text-align:center; color:#91a5bf; background:repeating-linear-gradient(135deg,rgba(15,27,43,.96),rgba(15,27,43,.96) 12px,rgba(18,33,52,.96) 12px,rgba(18,33,52,.96) 24px); }
 .plotHiddenState strong { color:#d9e8f6; }
 canvas { display: block; width: 100%; height: 100%; background: #070d18; }