refactor: port backend and frontend to TypeScript classes (bun + vite)
Backend (src/server, runs on Bun): - GibbzHttpServer (health, /api/ice, /api/rooms, static, keepalive tuning) - SignalingServer with Peer/Room/RoomRegistry classes and typed messages - IceConfigProvider (env STUN/TURN + coturn HMAC ephemeral creds) - StaticFileServer (dist/ with public/ fallback, traversal guard) - Tracing (OpenTelemetry SDK), AppConfig; createApp() factory for tests Frontend (src/client, built by Vite): - VoiceApp orchestrator implementing VoiceAppContext - WebRtcManager + PeerSession (perfect negotiation, pc rebuild, quality monitor) - SignalingClient + ReconnectController, AudioManager, SpatialAudio, Microphone/ScreenShare controllers, ScreensUi/RosterUi/SpatialMap/ SpeakingMonitor, Settings/Welcome dialogs, LayoutManager, MatrixChat Tooling: bun scripts (dev/start/test/typecheck), vite.config.ts root src/client with publicDir public/static, vitest-config for CI-less runs, bun-based Dockerfile (oven/bun:1), Makefile + README updated, legacy server.js/tracing.js/test.js/public js removed. Verified locally: tsc --noEmit clean, vitest run 6/6 green, vite build ok, server smoke-tested serving dist + signaling endpoints under Node. Local bun binary segfaults (SIGILL) on this host, so 'bun test' itself was not executable here; tests are vitest-API compatible which bun test maps.
This commit is contained in:
developer committed
1 parent
9b8c2a9599
commit
2b950e4953
48 files changed
+4589
-9200
No files matched your search
-2546
File diff suppressed because it is too large.
Load diff
@@ -1,147 +0,0 @@
|
||||
// Microphone gain ceilings. Normal rooms capture with echo cancellation enabled,
|
||||
// which already lifts quiet microphones. Hi-Fi rooms capture raw (no AGC, no echo
|
||||
// cancellation) for fidelity, so quiet mics arrive much lower and need more
|
||||
// make-up gain before they reach the Opus encoder.
|
||||
export const MAX_MIC_GAIN = 4; // 400% (+12 dB) — normal rooms
|
||||
export const MAX_MIC_GAIN_HIFI = 8; // 800% (+18 dB) — Hi-Fi rooms, raw capture
|
||||
|
||||
// Gain is stored per profile: dropping back from a Hi-Fi room to a normal one must
|
||||
// not silently truncate a +18 dB setting the user dialled in.
|
||||
const GAIN_KEY = { normal: 'voicepoc.micGain', hifi: 'voicepoc.micGainHifi' };
|
||||
|
||||
// Peaks above 0 dBFS are hard-clipped when the float graph is converted for the
|
||||
// Opus encoder, which turns a big boost into crunch. The limiter only engages
|
||||
// near full scale, so normal-level speech passes through untouched.
|
||||
const LIMITER = { threshold: -1.5, knee: 0, ratio: 20, attack: 0.002, release: 0.15 };
|
||||
|
||||
function makeLimiter(context) {
|
||||
const limiter = context.createDynamicsCompressor();
|
||||
limiter.threshold.value = LIMITER.threshold;
|
||||
limiter.knee.value = LIMITER.knee;
|
||||
limiter.ratio.value = LIMITER.ratio;
|
||||
limiter.attack.value = LIMITER.attack;
|
||||
limiter.release.value = LIMITER.release;
|
||||
return limiter;
|
||||
}
|
||||
|
||||
function clampGain(value, max) {
|
||||
const n = Number(value);
|
||||
if (!Number.isFinite(n)) return 1;
|
||||
return Math.max(0, Math.min(max, n));
|
||||
}
|
||||
|
||||
export class AudioManager {
|
||||
constructor() {
|
||||
this.context = null;
|
||||
this.rawStream = null;
|
||||
this.outputStream = null;
|
||||
this.source = null;
|
||||
this.gainNode = null;
|
||||
this.limiter = null;
|
||||
this.analyser = null;
|
||||
this.meterSink = null;
|
||||
this.meterData = new Float32Array(1024);
|
||||
// The room is unknown until joinVoice() resolves it, so the stricter normal-room
|
||||
// profile is the starting point; joinVoice() calls setProfile() before capture.
|
||||
this.hifi = false;
|
||||
this.maxGain = MAX_MIC_GAIN;
|
||||
// Clamped on load too: an out-of-range localStorage value (older build, hand
|
||||
// edit) must not bypass the ceiling of the profile it belongs to.
|
||||
this.gain = this.readGain();
|
||||
}
|
||||
|
||||
gainKey() {
|
||||
return this.hifi ? GAIN_KEY.hifi : GAIN_KEY.normal;
|
||||
}
|
||||
|
||||
readGain() {
|
||||
const stored = localStorage.getItem(this.gainKey());
|
||||
// No stored value yet: 100%. Users in Hi-Fi rooms raise it themselves — the
|
||||
// ceiling change must not make anyone unexpectedly loud on first join.
|
||||
return stored === null ? 1 : clampGain(stored, this.maxGain);
|
||||
}
|
||||
|
||||
storeGain() {
|
||||
localStorage.setItem(this.gainKey(), String(this.gain));
|
||||
}
|
||||
|
||||
applyGain() {
|
||||
if (this.gainNode) this.gainNode.gain.setTargetAtTime(this.gain, this.context.currentTime, 0.015);
|
||||
}
|
||||
|
||||
// Switch between the normal and Hi-Fi gain profiles. Safe to call on every join:
|
||||
// it is a no-op when the profile is unchanged.
|
||||
setProfile(hifi) {
|
||||
const next = Boolean(hifi);
|
||||
if (next === this.hifi) return this.gain;
|
||||
this.storeGain(); // keep what the profile we are leaving was set to
|
||||
this.hifi = next;
|
||||
this.maxGain = next ? MAX_MIC_GAIN_HIFI : MAX_MIC_GAIN;
|
||||
this.gain = this.readGain();
|
||||
this.applyGain(); // live mic, if one is attached
|
||||
return this.gain;
|
||||
}
|
||||
|
||||
async ensureContext() {
|
||||
if (!this.context) this.context = new AudioContext();
|
||||
await this.context.resume().catch(() => {});
|
||||
return this.context;
|
||||
}
|
||||
|
||||
async attachInput(stream) {
|
||||
await this.ensureContext();
|
||||
this.detachInput();
|
||||
this.rawStream = stream;
|
||||
this.source = this.context.createMediaStreamSource(stream);
|
||||
this.gainNode = this.context.createGain();
|
||||
this.gainNode.gain.value = this.gain;
|
||||
this.limiter = makeLimiter(this.context);
|
||||
this.analyser = this.context.createAnalyser();
|
||||
this.analyser.fftSize = 1024;
|
||||
this.meterSink = this.context.createGain();
|
||||
this.meterSink.gain.value = 0;
|
||||
const destination = this.context.createMediaStreamDestination();
|
||||
this.source.connect(this.gainNode).connect(this.analyser);
|
||||
// Keep the analyser alive without sending the microphone to the speakers.
|
||||
this.analyser.connect(this.meterSink).connect(this.context.destination);
|
||||
// The analyser taps the signal post-gain but pre-limiter, so the clipping
|
||||
// hint reports how hard the gain stage is pushed, not the limited peak.
|
||||
this.gainNode.connect(this.limiter).connect(destination);
|
||||
this.outputStream = destination.stream;
|
||||
return this.outputStream;
|
||||
}
|
||||
|
||||
detachInput() {
|
||||
for (const node of [this.source, this.gainNode, this.analyser, this.limiter, this.meterSink]) {
|
||||
try { node?.disconnect(); } catch {}
|
||||
}
|
||||
this.outputStream?.getTracks().forEach((track) => track.stop());
|
||||
this.rawStream?.getTracks().forEach((track) => track.stop());
|
||||
this.source = this.gainNode = this.analyser = this.limiter = this.meterSink = null;
|
||||
this.outputStream = this.rawStream = null;
|
||||
}
|
||||
|
||||
setGain(value) {
|
||||
this.gain = clampGain(value, this.maxGain);
|
||||
this.storeGain();
|
||||
this.applyGain();
|
||||
}
|
||||
|
||||
getLevel() {
|
||||
if (!this.analyser) return { rms: 0, peak: 0, clipping: false };
|
||||
this.analyser.getFloatTimeDomainData(this.meterData);
|
||||
let sum = 0;
|
||||
let peak = 0;
|
||||
for (const sample of this.meterData) {
|
||||
const magnitude = Math.abs(sample);
|
||||
sum += sample * sample;
|
||||
peak = Math.max(peak, magnitude);
|
||||
}
|
||||
const rms = Math.sqrt(sum / this.meterData.length);
|
||||
return { rms, peak, clipping: peak >= 0.98 };
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.detachInput();
|
||||
}
|
||||
}
|
||||
@@ -1,225 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Gameflow</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
|
||||
<meta name="theme-color" content="#1e1f22" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="gibbz" />
|
||||
<script src="https://otel.k6n.net/static/otel-rum.js"></script>
|
||||
<script>
|
||||
window.rum = window.OtelRUM ? OtelRUM.init({
|
||||
serviceName: "gibbz",
|
||||
baseUrl: "https://otel.k6n.net",
|
||||
release: window.__APP_RELEASE__ || "dev",
|
||||
environment: "production",
|
||||
traceHeaderOrigins: [window.location.origin]
|
||||
}) : null;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- mobile top bar: hamburger opens the channel drawer, shows live status -->
|
||||
<header id="mobile-topbar">
|
||||
<button id="btn-menu" title="Channels"><span class="material-symbols-outlined">menu</span></button>
|
||||
<img id="mobile-logo" src="/icons/icon-192.png" alt="" width="24" height="24" />
|
||||
<span id="mobile-title">gibbz voice</span>
|
||||
<span class="status-row" id="mobile-status-row">
|
||||
<span class="status-indicator" id="mobile-status-dot"></span>
|
||||
<span id="mobile-status-text">Disconnected</span>
|
||||
</span>
|
||||
</header>
|
||||
<div id="sidebar-backdrop"></div>
|
||||
|
||||
<div id="app">
|
||||
<!-- channel sidebar -->
|
||||
<aside id="sidebar">
|
||||
<header id="server-name">
|
||||
<span class="server-name-text">gibbz</span>
|
||||
<button id="btn-sidebar-collapse" class="icon-btn" title="Hide sidebar"><span class="material-symbols-outlined">left_panel_close</span></button>
|
||||
</header>
|
||||
<div class="channel-group-label">Text channels</div>
|
||||
<div class="channel text" data-mx-room="gibbz-general"><span class="material-symbols-outlined channel-icon">tag</span>
|
||||
general <span class="hint">matrix</span></div>
|
||||
<div class="channel-group-label">Voice channels</div>
|
||||
<div class="channel voice" data-room="general"><span class="material-symbols-outlined channel-icon">volume_up</span> General <span class="count" data-room-count="general"></span></div>
|
||||
<div class="channel voice" data-room="gaming"><span class="material-symbols-outlined channel-icon">volume_up</span> Gaming <span class="hifi-badge" title="Hi-Fi voice: stereo Opus, 256 kbps, echo cancellation off">HI-FI</span> <span class="count" data-room-count="gaming"></span></div>
|
||||
<div class="channel voice" data-room="lounge"><span class="material-symbols-outlined channel-icon">volume_up</span> Lounge <span class="count" data-room-count="lounge"></span></div>
|
||||
<div class="channel voice" data-room="code"><span class="material-symbols-outlined channel-icon">volume_up</span> Code <span class="hifi-badge" title="Hi-Fi voice: stereo Opus, 256 kbps, echo cancellation off">HI-FI</span> <span class="count" data-room-count="code"></span></div>
|
||||
<div class="channel voice" data-room="work"><span class="material-symbols-outlined channel-icon">volume_up</span> Work <span class="count" data-room-count="work"></span></div>
|
||||
|
||||
<footer id="user-panel">
|
||||
<div class="user-buttons">
|
||||
<button id="btn-mic" class="ctl" title="Toggle mic (M)"><span class="material-symbols-outlined">mic</span></button>
|
||||
<button id="btn-deafen" class="ctl" title="Toggle deafen (D)"><span class="material-symbols-outlined">headphones</span></button>
|
||||
<button id="btn-share" class="ctl" title="Share your screen (S)"><span class="material-symbols-outlined">present_to_all</span></button>
|
||||
<button id="btn-settings" class="ctl" title="Voice & ICE settings"><span class="material-symbols-outlined">settings</span></button>
|
||||
</div>
|
||||
<div class="me">
|
||||
<div class="avatar" id="me-avatar">?</div>
|
||||
<div class="me-meta">
|
||||
<input id="nick" maxlength="24" spellcheck="false" title="Click to edit nickname" />
|
||||
<div class="status-row" id="status-row" title="Not connected">
|
||||
<span class="status-indicator" id="status-dot"></span>
|
||||
<span id="voice-status">Disconnected</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btn-help" class="ctl help-ctl" title="How to use gibbz voice"><span class="material-symbols-outlined">help</span></button>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="sidebar-resizer" title="Drag to resize"></div>
|
||||
</aside>
|
||||
|
||||
<!-- main content area -->
|
||||
<main id="main">
|
||||
<button id="btn-sidebar-expand" title="Show sidebar"><span class="material-symbols-outlined">left_panel_open</span></button>
|
||||
<!-- voice stage and spatial audio view -->
|
||||
<div id="voice-view">
|
||||
<div id="stage">
|
||||
<div id="screens"></div>
|
||||
<div id="stage-empty">
|
||||
<div class="big-icon"><span class="material-symbols-outlined">present_to_all</span></div>
|
||||
<h2>No active screen shares</h2>
|
||||
<p>When someone shares their screen, it will appear here. Click the screen button below or press <b>S</b> to share.</p>
|
||||
</div>
|
||||
<button id="btn-spatial-expand" title="Show spatial audio"><span class="material-symbols-outlined">keyboard_arrow_up</span></button>
|
||||
</div>
|
||||
|
||||
<div id="spatial-resizer" title="Drag to resize"></div>
|
||||
<div id="spatial-wrap">
|
||||
<div class="spatial-label">
|
||||
<span>SPATIAL AUDIO</span>
|
||||
<span class="hint">drag your avatar to move; drag peers for local positioning • scroll to zoom</span>
|
||||
<button id="btn-spatial-fit" class="spatial-action-btn" title="Fit all users in view"><span class="material-symbols-outlined">fit_screen</span> Fit View</button>
|
||||
<button id="btn-spatial-collapse" class="spatial-action-btn" title="Hide spatial audio pane"><span class="material-symbols-outlined">keyboard_arrow_down</span> Hide</button>
|
||||
</div>
|
||||
<div id="spatial"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- matrix text chat view -->
|
||||
<div id="mx-panel" class="hidden">
|
||||
<div class="mx-header">
|
||||
<div class="mx-header-info">
|
||||
<span class="material-symbols-outlined channel-icon">tag</span>
|
||||
<span class="mx-header-title">general</span>
|
||||
<span class="poc-tag">matrix · experimental</span>
|
||||
</div>
|
||||
<button id="mx-close" class="ghost" title="Back to Voice Stage"><span class="material-symbols-outlined">close</span></button>
|
||||
</div>
|
||||
<div id="mx-messages"></div>
|
||||
<div class="mx-composer">
|
||||
<textarea id="mx-input" rows="1" placeholder="Message #general (Enter to send)"></textarea>
|
||||
<button id="mx-send">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- mobile bottom bar: always-reachable call controls, mirror the sidebar's -->
|
||||
<div id="mobile-controls">
|
||||
<button class="ctl mirror-mic" title="Toggle mic (M)"><span class="material-symbols-outlined">mic</span></button>
|
||||
<button class="ctl mirror-deafen" title="Toggle deafen (D)"><span class="material-symbols-outlined">headphones</span></button>
|
||||
<button class="ctl mirror-share" title="Share your screen (S)"><span class="material-symbols-outlined">present_to_all</span></button>
|
||||
<button id="btn-reset-ice-mobile" class="ctl" title="Reset saved ICE settings"><span class="material-symbols-outlined">restart_alt</span></button>
|
||||
</div>
|
||||
|
||||
<!-- settings modal -->
|
||||
<div id="modal-backdrop" class="hidden">
|
||||
<div id="settings-modal" role="dialog" aria-modal="true">
|
||||
<h2>Voice & ICE settings</h2>
|
||||
<h3>Audio input</h3>
|
||||
<label class="field-label" for="audio-input">Microphone</label>
|
||||
<select id="audio-input" class="settings-select">
|
||||
<option value="">System default</option>
|
||||
</select>
|
||||
<label class="field-label" for="mic-gain">Microphone gain</label>
|
||||
<div class="gain-control">
|
||||
<input id="mic-gain" type="range" min="0" max="4" step="0.05" value="1" />
|
||||
<span id="mic-gain-value">100%</span>
|
||||
</div>
|
||||
<div class="signal-preview" aria-live="polite">
|
||||
<span>Signal</span>
|
||||
<meter id="mic-level" min="0" max="1" low="0.35" high="0.8" optimum="0.55" value="0"></meter>
|
||||
<span id="mic-level-value">-∞ dB</span>
|
||||
</div>
|
||||
<p id="mic-clipping" class="hint hidden">Peaks are hitting the limiter — lower the gain if it sounds distorted.</p>
|
||||
<p id="mic-gain-hint" class="hint">This room allows up to 400%. Hi-Fi rooms (Code, Gaming) capture raw with no AGC and allow up to 800%.</p>
|
||||
<p class="hint">Changes apply immediately when connected, or the next time you join.</p>
|
||||
<h3>Screen sharing</h3>
|
||||
<label class="field-label" for="screen-hint">Optimization</label>
|
||||
<select id="screen-hint" class="settings-select">
|
||||
<option value="">Browser default</option>
|
||||
<option value="detail">Details / text editor / terminal</option>
|
||||
<option value="motion">Gameplay / motion</option>
|
||||
</select>
|
||||
<p class="hint">Details favors sharp text; motion favors smoother movement.</p>
|
||||
<p class="hint">Overrides the server-provided ICE configuration (stored in <code>localStorage</code>, applied on next join).</p>
|
||||
<label class="toggle-row">
|
||||
<input type="checkbox" id="override-enabled" />
|
||||
<span>Use custom STUN/TURN (JSON below)</span>
|
||||
</label>
|
||||
<textarea id="ice-json" rows="12" spellcheck="false"></textarea>
|
||||
<div class="modal-actions">
|
||||
<button id="ice-reset" class="ghost">Reset to server defaults</button>
|
||||
<span class="spacer"></span>
|
||||
<button id="ice-cancel" class="ghost">Cancel</button>
|
||||
<button id="ice-save">Save</button>
|
||||
</div>
|
||||
<h3>Server defaults</h3>
|
||||
<pre id="ice-server-default" class="hint"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- welcome / nickname / how-to-use modal -->
|
||||
<div id="welcome-backdrop" class="hidden">
|
||||
<div id="welcome-modal" role="dialog" aria-modal="true">
|
||||
<h2>Welcome to gibbz voice</h2>
|
||||
<p class="hint">Pick a name so others can recognize you.</p>
|
||||
<label class="field-label" for="welcome-nick">Nickname</label>
|
||||
<input id="welcome-nick" maxlength="24" spellcheck="false" autocomplete="off" placeholder="e.g. alex" />
|
||||
<div id="welcome-nick-error" class="field-error hidden">Enter a nickname to continue.</div>
|
||||
|
||||
<h3>Quick start</h3>
|
||||
<ul class="howto-list">
|
||||
<li>Click a <b>voice channel</b> in the sidebar to join it — click another to switch.</li>
|
||||
<li><b>Mic</b>, <b>Deafen</b> and <b>Share screen</b> are the buttons bottom-left, or press <b>M</b> / <b>D</b> / <b>S</b>.</li>
|
||||
<li>On the <b>spatial audio</b> map, drag your dot around — you hear people relative to where they stand.</li>
|
||||
<li>Screen shares show up at the top of the main area; pop one into its own window with <span class="material-symbols-outlined inline-icon">open_in_new</span>.</li>
|
||||
</ul>
|
||||
|
||||
<div class="modal-actions">
|
||||
<span class="spacer"></span>
|
||||
<button id="welcome-continue">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="reconnect-banner" class="hidden" role="alert">
|
||||
<div class="reconnect-spinner"></div>
|
||||
<span id="reconnect-text">Connection lost</span>
|
||||
<div class="reconnect-actions">
|
||||
<button id="reconnect-retry">Retry now</button>
|
||||
<button id="reconnect-dismiss" class="ghost">Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toasts"></div>
|
||||
|
||||
<script type="module" src="/app.js"></script>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js').catch((err) => console.warn('sw registration failed', err));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,700 +0,0 @@
|
||||
/* Discord-ish dark theme (POC) */
|
||||
:root {
|
||||
--bg-0: #1e1f22; /* user panel / topbar */
|
||||
--bg-1: #2b2d31; /* sidebar */
|
||||
--bg-2: #313338; /* main */
|
||||
--bg-3: #383a40; /* hover */
|
||||
--bg-4: #404249;
|
||||
--text-0: #f2f3f5;
|
||||
--text-1: #b5bac1;
|
||||
--text-2: #80848e;
|
||||
--brand: #5865f2;
|
||||
--green: #23a55a;
|
||||
--red: #f23f43;
|
||||
--yellow: #f0b232;
|
||||
--radius: 8px;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font: 14px/1.4 "gg sans", "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
background: var(--bg-2);
|
||||
color: var(--text-0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Material Symbols font configuration */
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'liga';
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.inline-icon {
|
||||
font-size: 16px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
.channel-icon {
|
||||
font-size: 18px;
|
||||
color: var(--text-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.channel:hover .channel-icon,
|
||||
.channel.active .channel-icon {
|
||||
color: var(--text-0);
|
||||
}
|
||||
|
||||
#app { display: flex; height: 100vh; }
|
||||
|
||||
/* sidebar */
|
||||
#sidebar {
|
||||
width: 250px; background: var(--bg-1); display: flex; flex-direction: column; flex-shrink: 0;
|
||||
position: relative; z-index: 10;
|
||||
}
|
||||
#server-name {
|
||||
padding: 8px 10px 8px 16px; font-weight: 700; font-size: 15px;
|
||||
border-bottom: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.06);
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
#server-logo, #mobile-logo { border-radius: 6px; flex-shrink: 0; }
|
||||
.server-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.icon-btn {
|
||||
background: transparent; border: none; color: var(--text-2); cursor: pointer;
|
||||
width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
|
||||
flex-shrink: 0; padding: 0; transition: background .12s, color .12s;
|
||||
}
|
||||
.icon-btn .material-symbols-outlined { font-size: 18px; }
|
||||
.icon-btn:hover { background: var(--bg-3); color: var(--text-0); }
|
||||
|
||||
/* sidebar drag-to-resize handle */
|
||||
#sidebar-resizer {
|
||||
position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
|
||||
cursor: col-resize; z-index: 15; background: transparent;
|
||||
}
|
||||
#sidebar-resizer:hover, #sidebar-resizer.dragging { background: var(--brand); opacity: .5; }
|
||||
body.sidebar-collapsed #sidebar { display: none; }
|
||||
|
||||
/* floating button to bring the sidebar back once collapsed */
|
||||
#btn-sidebar-expand {
|
||||
display: none; position: absolute; top: 12px; left: 12px; z-index: 20;
|
||||
background: var(--bg-1); border: 1px solid var(--bg-4); color: var(--text-1);
|
||||
width: 32px; height: 32px; border-radius: 6px; cursor: pointer; place-items: center;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,.35);
|
||||
}
|
||||
#btn-sidebar-expand .material-symbols-outlined { font-size: 18px; }
|
||||
#btn-sidebar-expand:hover { background: var(--bg-3); color: var(--text-0); }
|
||||
body.sidebar-collapsed #btn-sidebar-expand { display: grid; }
|
||||
.poc-tag {
|
||||
font-size: 10px; background: var(--yellow); color: #000; border-radius: 4px;
|
||||
padding: 1px 5px; vertical-align: 2px; margin-left: 6px; font-weight: 800;
|
||||
}
|
||||
.channel-group-label {
|
||||
padding: 18px 8px 4px 16px; font-size: 11px; font-weight: 700;
|
||||
letter-spacing: .4px; color: var(--text-2); text-transform: uppercase;
|
||||
}
|
||||
.channel {
|
||||
margin: 1px 8px; padding: 7px 8px; border-radius: 6px; color: var(--text-1);
|
||||
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.channel:hover { background: var(--bg-3); color: var(--text-0); }
|
||||
.channel.text { color: var(--text-2); }
|
||||
.channel.text.active { background: rgba(88,101,242,.25); color: var(--text-0); }
|
||||
.channel.text .hint { font-size: 10px; margin-left: 4px; }
|
||||
.channel.voice.active { background: rgba(88,101,242,.25); color: var(--text-0); }
|
||||
.channel .count { margin-left: auto; color: var(--text-2); font-size: 12px; }
|
||||
.hifi-badge {
|
||||
font-size: 9px; font-weight: 700; letter-spacing: .5px; line-height: 1.5;
|
||||
color: #23a55a; border: 1px solid rgba(35,165,90,.55); border-radius: 999px;
|
||||
padding: 0 6px; flex-shrink: 0; user-select: none;
|
||||
}
|
||||
.channel.active .hifi-badge { color: #2dc770; border-color: rgba(45,199,112,.8); }
|
||||
|
||||
#user-panel {
|
||||
margin-top: auto; background: var(--bg-0); padding: 8px;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
}
|
||||
|
||||
/* row 1: available tools */
|
||||
.user-buttons {
|
||||
display: flex; align-items: center; justify-content: center; gap: 4px;
|
||||
padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
}
|
||||
.ctl {
|
||||
background: transparent; border: none; color: var(--text-1); font-size: 15px;
|
||||
width: 34px; height: 30px; border-radius: 6px; cursor: pointer; position: relative;
|
||||
display: grid; place-items: center; padding: 0; transition: background .12s, color .12s;
|
||||
}
|
||||
.ctl .material-symbols-outlined { font-size: 19px; }
|
||||
.ctl:hover { background: var(--bg-3); color: var(--text-0); }
|
||||
.ctl.off { color: var(--red); }
|
||||
.ctl:disabled { opacity: .35; cursor: not-allowed; }
|
||||
.ctl.active { color: var(--green); }
|
||||
|
||||
/* row 2: user info + help */
|
||||
.me { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.me-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; }
|
||||
#nick {
|
||||
background: transparent; border: none; color: var(--text-0); font: inherit;
|
||||
font-weight: 600; font-size: 13px; width: 100%; padding: 0; outline: none; border-bottom: 1px dashed transparent;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
#nick:hover, #nick:focus { border-bottom-color: var(--text-2); }
|
||||
.status-row {
|
||||
display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
|
||||
}
|
||||
.status-indicator {
|
||||
width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); flex-shrink: 0;
|
||||
}
|
||||
.status-indicator.online { background: var(--green); }
|
||||
.status-indicator.connecting { background: var(--yellow); }
|
||||
.status-indicator.error { background: var(--red); }
|
||||
#voice-status {
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.help-ctl { flex-shrink: 0; color: var(--text-2); }
|
||||
|
||||
/* main */
|
||||
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; height: 100%; }
|
||||
#voice-view { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }
|
||||
#voice-view.hidden { display: none; }
|
||||
#stage {
|
||||
flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 16px;
|
||||
overflow: auto; position: relative;
|
||||
}
|
||||
#stage-empty {
|
||||
position: absolute; inset: 0; display: grid; place-content: center;
|
||||
text-align: center; gap: 8px; color: var(--text-1); padding: 24px;
|
||||
isolation: isolate; overflow: hidden;
|
||||
}
|
||||
#stage-empty::before,
|
||||
#stage-empty::after {
|
||||
content: ""; position: absolute; left: 50%; top: 50%; z-index: -2;
|
||||
width: min(48vw, 440px); aspect-ratio: 1; border-radius: 50%;
|
||||
transform: translate(-50%, -54%); pointer-events: none;
|
||||
}
|
||||
#stage-empty::before {
|
||||
background: radial-gradient(circle, rgba(88,101,242,.13), rgba(88,101,242,0) 68%);
|
||||
}
|
||||
#stage-empty::after {
|
||||
width: min(31vw, 280px); border: 1px solid rgba(88,101,242,.14);
|
||||
box-shadow: 0 0 0 24px rgba(88,101,242,.035), 0 0 0 48px rgba(88,101,242,.025);
|
||||
}
|
||||
#stage-empty .big-icon {
|
||||
position: absolute; left: 50%; top: 50%; z-index: -1;
|
||||
color: rgba(139,148,255,.11); transform: translate(-50%, -57%) rotate(-8deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
#stage-empty .big-icon .material-symbols-outlined {
|
||||
font-size: clamp(180px, 25vw, 330px); font-variation-settings: 'wght' 300;
|
||||
}
|
||||
#stage-empty h2 { font-size: 20px; color: var(--text-0); }
|
||||
#stage-empty p { max-width: 420px; color: var(--text-2); }
|
||||
#stage.empty #stage-empty { display: grid; }
|
||||
#stage:not(.empty) #stage-empty { display: none; }
|
||||
|
||||
#screens { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
|
||||
|
||||
/* own share(s): compact pill, no video preview */
|
||||
.own-pills { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
|
||||
.own-pill {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: var(--bg-2); border: 1px solid var(--bg-4); border-radius: 999px;
|
||||
padding: 5px 8px 5px 12px; font-size: 12px; font-weight: 600; color: var(--text-1);
|
||||
}
|
||||
.own-pill .live { color: var(--red); font-weight: 800; }
|
||||
.own-pill-close {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
|
||||
background: var(--bg-3); color: var(--text-0);
|
||||
}
|
||||
.own-pill-close .material-symbols-outlined { font-size: 15px; }
|
||||
.own-pill-close:hover { background: var(--red); }
|
||||
|
||||
/* remote shares: fills remaining space, arranged in as large a grid as fits */
|
||||
.screens-body { flex: 1; min-height: 0; }
|
||||
.screens-grid { display: grid; gap: 12px; }
|
||||
.screens-grid .screen-card { max-width: 100%; }
|
||||
|
||||
.screens-body.spotlight { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
|
||||
.screens-body.spotlight .screen-card.focused { flex: 1; min-height: 0; }
|
||||
.thumbs-row { display: flex; gap: 8px; flex: none; height: 110px; overflow-x: auto; }
|
||||
.thumbs-row .screen-card { flex: 0 0 180px; height: 100%; }
|
||||
|
||||
.screen-card.popped {
|
||||
min-height: 120px; display: grid; place-items: center;
|
||||
background: var(--bg-0); box-shadow: none; border: 1px dashed var(--bg-4);
|
||||
}
|
||||
.pop-btn {
|
||||
position: absolute; right: 8px; top: 8px; z-index: 2;
|
||||
background: rgba(0,0,0,.65); color: var(--text-0); border: none; cursor: pointer;
|
||||
border-radius: 5px; padding: 4px 8px; font-size: 12px; font-weight: 600;
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.pop-btn .material-symbols-outlined { font-size: 16px; }
|
||||
.pop-btn:hover { background: var(--brand); }
|
||||
.screen-card {
|
||||
position: relative; background: #000; border-radius: var(--radius); overflow: hidden;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.4); cursor: pointer;
|
||||
}
|
||||
.screen-card video { width: 100%; height: 100%; display: block; max-height: 100%; object-fit: contain; }
|
||||
.screen-card .label {
|
||||
position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.65);
|
||||
padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600;
|
||||
display: inline-flex; align-items: center;
|
||||
}
|
||||
.screen-card .label .live { color: var(--red); font-weight: 800; margin-right: 5px; }
|
||||
.screen-card.speaking { box-shadow: 0 0 0 3px var(--green), 0 8px 24px rgba(0,0,0,.4); }
|
||||
.tile-mic-badge { margin-left: 6px; display: inline-flex; align-items: center; }
|
||||
.tile-mic-badge .material-symbols-outlined { font-size: 15px; color: var(--red); }
|
||||
|
||||
/* channel user lines */
|
||||
.channel-users {
|
||||
margin: 2px 8px 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.channel-user-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-1);
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
}
|
||||
.channel-user-item:hover {
|
||||
background: var(--bg-3);
|
||||
color: var(--text-0);
|
||||
}
|
||||
.channel-user-item.speaking .user-line-avatar {
|
||||
box-shadow: 0 0 0 2px var(--green);
|
||||
}
|
||||
.user-line-avatar {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.user-line-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-line-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.user-line-badges .material-symbols-outlined {
|
||||
font-size: 15px;
|
||||
}
|
||||
.badge-conn {
|
||||
color: var(--yellow);
|
||||
font-weight: bold;
|
||||
}
|
||||
.badge-mute {
|
||||
color: var(--red);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.badge-deafen {
|
||||
color: var(--red);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.badge-share {
|
||||
color: var(--brand);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* hover volume popup */
|
||||
.volume-popup {
|
||||
position: absolute;
|
||||
left: calc(100% + 6px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--bg-0);
|
||||
border: 1px solid var(--bg-4);
|
||||
border-radius: var(--radius);
|
||||
padding: 8px 12px;
|
||||
width: 150px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
|
||||
display: none;
|
||||
z-index: 100;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.channel-user-item:hover .volume-popup,
|
||||
.channel-user-item.show-vol .volume-popup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.volume-popup .vol-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.volume-popup input[type=range] {
|
||||
width: 100%;
|
||||
accent-color: var(--brand);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
|
||||
font-weight: 700; color: #fff; flex-shrink: 0; user-select: none;
|
||||
}
|
||||
|
||||
.channel-user-item div.user-line-avatar {
|
||||
width: 24px; height: 24px;
|
||||
}
|
||||
|
||||
/* spatial plane */
|
||||
#spatial-resizer {
|
||||
height: 6px; flex-shrink: 0; cursor: row-resize; background: transparent; position: relative;
|
||||
}
|
||||
#spatial-resizer::after {
|
||||
content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 2px;
|
||||
}
|
||||
#spatial-resizer:hover, #spatial-resizer.dragging { background: var(--brand); opacity: .5; }
|
||||
#spatial-wrap {
|
||||
height: 34vh; min-height: 220px; background: var(--bg-1);
|
||||
border-top: 1px solid rgba(0,0,0,.35); display: flex; flex-direction: column;
|
||||
}
|
||||
body.spatial-collapsed #spatial-wrap,
|
||||
body.spatial-collapsed #spatial-resizer { display: none; }
|
||||
|
||||
/* floating button to bring the spatial pane back once collapsed */
|
||||
#btn-spatial-expand {
|
||||
display: none; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 20;
|
||||
background: var(--bg-1); border: 1px solid var(--bg-4); color: var(--text-1);
|
||||
width: 32px; height: 32px; border-radius: 6px; cursor: pointer; place-items: center;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,.35);
|
||||
}
|
||||
#btn-spatial-expand .material-symbols-outlined { font-size: 18px; }
|
||||
#btn-spatial-expand:hover { background: var(--bg-3); color: var(--text-0); }
|
||||
body.spatial-collapsed #btn-spatial-expand { display: grid; }
|
||||
.spatial-label {
|
||||
padding: 8px 16px; font-size: 11px; font-weight: 700; color: var(--text-2);
|
||||
letter-spacing: .5px; display: flex; align-items: center; gap: 16px;
|
||||
}
|
||||
.spatial-label .hint { font-weight: 400; letter-spacing: 0; text-transform: none; flex: 1; }
|
||||
.spatial-action-btn {
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--bg-4);
|
||||
color: var(--text-1);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.spatial-action-btn:hover {
|
||||
background: var(--bg-3);
|
||||
color: var(--text-0);
|
||||
}
|
||||
#spatial {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* modal */
|
||||
#modal-backdrop {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid;
|
||||
place-items: center; z-index: 50;
|
||||
}
|
||||
#modal-backdrop.hidden { display: none; }
|
||||
#settings-modal {
|
||||
width: min(620px, 92vw); max-height: 90vh; overflow: auto;
|
||||
background: var(--bg-1); border-radius: 8px; padding: 20px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,.6);
|
||||
}
|
||||
#settings-modal h2 { font-size: 18px; margin-bottom: 6px; }
|
||||
#settings-modal h3 { font-size: 13px; margin: 16px 0 4px; color: var(--text-1); }
|
||||
#settings-modal p { margin-bottom: 10px; }
|
||||
.settings-select {
|
||||
width: 100%; background: var(--bg-0); color: var(--text-0); border: 1px solid var(--bg-4);
|
||||
border-radius: 6px; padding: 9px 10px; margin-bottom: 4px; font: inherit;
|
||||
}
|
||||
.settings-select:focus { outline: none; border-color: var(--brand); }
|
||||
.gain-control, .signal-preview { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
|
||||
.gain-control input { flex: 1; accent-color: var(--brand); }
|
||||
.gain-control span, .signal-preview > span:last-child { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.signal-preview meter { flex: 1; height: 10px; }
|
||||
#ice-json {
|
||||
width: 100%; background: var(--bg-0); color: var(--text-0); border: 1px solid var(--bg-4);
|
||||
border-radius: 6px; padding: 10px; font: 12px/1.5 ui-monospace, "Cascadia Code", monospace;
|
||||
resize: vertical;
|
||||
}
|
||||
#ice-json:focus { outline: none; border-color: var(--brand); }
|
||||
#ice-server-default {
|
||||
background: var(--bg-0); padding: 8px 10px; border-radius: 6px;
|
||||
font: 11px/1.5 ui-monospace, monospace; white-space: pre-wrap;
|
||||
}
|
||||
.toggle-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; cursor: pointer; }
|
||||
.toggle-row input { accent-color: var(--brand); width: 16px; height: 16px; }
|
||||
.modal-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
|
||||
.modal-actions .spacer { flex: 1; }
|
||||
.modal-actions button {
|
||||
padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer;
|
||||
font-weight: 600; font-size: 13px;
|
||||
}
|
||||
.modal-actions button:not(.ghost) { background: var(--brand); color: #fff; }
|
||||
.modal-actions button.ghost { background: transparent; color: var(--text-1); }
|
||||
.modal-actions button.ghost:hover { text-decoration: underline; }
|
||||
|
||||
/* welcome modal */
|
||||
#welcome-backdrop {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid;
|
||||
place-items: center; z-index: 60;
|
||||
}
|
||||
#welcome-backdrop.hidden { display: none; }
|
||||
#welcome-modal {
|
||||
width: min(480px, 92vw); max-height: 90vh; overflow: auto;
|
||||
background: var(--bg-1); border-radius: 8px; padding: 20px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,.6);
|
||||
}
|
||||
#welcome-modal h2 { font-size: 18px; margin-bottom: 6px; }
|
||||
#welcome-modal h3 { font-size: 13px; margin: 18px 0 8px; color: var(--text-1); }
|
||||
.field-label { display: block; font-size: 12px; color: var(--text-1); margin-bottom: 4px; }
|
||||
#welcome-nick {
|
||||
width: 100%; background: var(--bg-0); color: var(--text-0); border: 1px solid var(--bg-4);
|
||||
border-radius: 6px; padding: 8px 10px; font-size: 14px;
|
||||
}
|
||||
#welcome-nick:focus { outline: none; border-color: var(--brand); }
|
||||
#welcome-nick.invalid { border-color: var(--red); }
|
||||
.field-error { color: var(--red); font-size: 12px; margin-top: 4px; }
|
||||
.field-error.hidden { display: none; }
|
||||
.howto-list { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; font-size: 13px; color: var(--text-1); }
|
||||
.howto-list li { line-height: 1.4; }
|
||||
|
||||
/* matrix text chat panel (main view) */
|
||||
#mx-panel {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
#mx-panel.hidden { display: none; }
|
||||
.mx-header {
|
||||
padding: 14px 16px;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(0,0,0,.25);
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,.06);
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-2);
|
||||
}
|
||||
.mx-header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.mx-header-title {
|
||||
color: var(--text-0);
|
||||
font-weight: 700;
|
||||
}
|
||||
.mx-header button.ghost {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-1);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.mx-header button.ghost:hover {
|
||||
background: var(--bg-3);
|
||||
color: var(--text-0);
|
||||
}
|
||||
#mx-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.mx-msg { font-size: 14px; line-height: 1.45; }
|
||||
.mx-sender { font-weight: 700; color: var(--text-0); margin-right: 8px; }
|
||||
.mx-body { color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||
.mx-composer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 14px 20px;
|
||||
border-top: 1px solid rgba(0,0,0,.2);
|
||||
background: var(--bg-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mx-composer textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: var(--bg-0);
|
||||
border: 1px solid var(--bg-4);
|
||||
border-radius: 8px;
|
||||
color: var(--text-0);
|
||||
padding: 10px 14px;
|
||||
font: inherit;
|
||||
max-height: 120px;
|
||||
}
|
||||
.mx-composer textarea:focus { outline: none; border-color: var(--brand); }
|
||||
.mx-composer button {
|
||||
background: var(--brand);
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 0 18px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* reconnect banner */
|
||||
#reconnect-banner {
|
||||
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
|
||||
z-index: 70; display: flex; align-items: center; gap: 12px;
|
||||
background: var(--bg-0); border: 1px solid var(--red);
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(242,63,67,.15);
|
||||
border-radius: 10px; padding: 10px 14px; font-size: 13px;
|
||||
animation: banner-in .2s ease-out;
|
||||
}
|
||||
#reconnect-banner.hidden { display: none; }
|
||||
#reconnect-banner #reconnect-text { color: var(--text-0); font-weight: 600; white-space: nowrap; }
|
||||
.reconnect-spinner {
|
||||
width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
|
||||
border: 2px solid rgba(242,63,67,.25); border-top-color: var(--red);
|
||||
animation: spin .8s linear infinite;
|
||||
}
|
||||
.reconnect-actions { display: flex; gap: 6px; margin-left: 4px; }
|
||||
.reconnect-actions button {
|
||||
padding: 5px 10px; border-radius: 6px; border: none; cursor: pointer;
|
||||
font-weight: 600; font-size: 12px; background: var(--red); color: #fff;
|
||||
}
|
||||
.reconnect-actions button.ghost { background: transparent; color: var(--text-1); }
|
||||
.reconnect-actions button.ghost:hover { color: var(--text-0); text-decoration: underline; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes banner-in { from { transform: translate(-50%, -12px); opacity: 0; } }
|
||||
|
||||
/* toasts */
|
||||
#toasts {
|
||||
position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column;
|
||||
gap: 8px; z-index: 60; max-width: 380px;
|
||||
}
|
||||
.toast {
|
||||
background: var(--bg-0); border-left: 3px solid var(--brand); border-radius: 6px;
|
||||
padding: 10px 14px; box-shadow: 0 8px 20px rgba(0,0,0,.5); font-size: 13px;
|
||||
animation: slide-in .18s ease-out;
|
||||
}
|
||||
.toast.error { border-left-color: var(--red); }
|
||||
.toast.warn { border-left-color: var(--yellow); }
|
||||
.toast.ok { border-left-color: var(--green); }
|
||||
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }
|
||||
|
||||
.hint { color: var(--text-2); font-size: 12px; }
|
||||
code { font-family: ui-monospace, monospace; font-size: 12px; }
|
||||
|
||||
/* mobile chrome — hidden on desktop, shown/positioned in the breakpoint below */
|
||||
#mobile-topbar, #sidebar-backdrop, #mobile-controls { display: none; }
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
mobile layout
|
||||
- sidebar becomes an off-canvas drawer opened from #mobile-topbar
|
||||
- mic/deafen/share get an always-visible mirror bar pinned to the bottom
|
||||
--------------------------------------------------------------------------- */
|
||||
@media (max-width: 860px) {
|
||||
#app { padding-top: 48px; } /* room for the fixed topbar */
|
||||
|
||||
#mobile-topbar {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 55;
|
||||
background: var(--bg-0); padding: 0 12px; box-shadow: 0 1px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
#mobile-topbar button {
|
||||
background: transparent; border: none; color: var(--text-0); font-size: 20px;
|
||||
width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
|
||||
}
|
||||
#mobile-topbar button:active { background: var(--bg-3); }
|
||||
#mobile-title { font-weight: 700; font-size: 14px; }
|
||||
#mobile-status-row {
|
||||
display: flex; align-items: center; gap: 5px; margin-left: auto;
|
||||
font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#sidebar-backdrop.show {
|
||||
display: block; position: fixed; inset: 0; top: 48px; z-index: 65; background: rgba(0,0,0,.55);
|
||||
}
|
||||
#sidebar {
|
||||
position: fixed; top: 48px; bottom: 0; left: 0; z-index: 66; width: 82vw; max-width: 320px;
|
||||
transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 24px rgba(0,0,0,.5);
|
||||
}
|
||||
#sidebar.open { transform: translateX(0); }
|
||||
/* desktop sidebar collapse/resize is irrelevant here — the drawer always exists,
|
||||
it's just toggled on/off screen via .open */
|
||||
body.sidebar-collapsed #sidebar { display: flex; }
|
||||
#sidebar-resizer, #spatial-resizer, #btn-sidebar-expand, #btn-sidebar-collapse { display: none !important; }
|
||||
|
||||
#main { width: 100%; padding-bottom: 64px; } /* room for the fixed bottom controls */
|
||||
#stage { padding: 10px; gap: 10px; }
|
||||
.screens-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(220px, 1fr); }
|
||||
.thumbs-row { height: 84px; }
|
||||
.thumbs-row .screen-card { flex-basis: 120px; }
|
||||
|
||||
#spatial-wrap { height: 26vh; min-height: 160px; }
|
||||
.spatial-label { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
|
||||
.spatial-label .hint { display: none; } /* the drag/zoom hint doesn't fit — controls are still discoverable by touch */
|
||||
|
||||
/* bigger touch targets everywhere controls are tapped directly */
|
||||
.ctl { width: 40px; height: 40px; font-size: 18px; }
|
||||
|
||||
#mobile-controls {
|
||||
display: flex; justify-content: center; gap: 10px;
|
||||
position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
|
||||
background: var(--bg-0); padding: 8px; box-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
#mobile-controls .ctl { width: 48px; height: 48px; font-size: 20px; background: var(--bg-2); }
|
||||
|
||||
/* volume popup: side placement would run off a narrow drawer */
|
||||
.volume-popup { left: 0; right: 0; top: 100%; transform: none; width: auto; margin-top: 4px; }
|
||||
|
||||
/* modals already clamp to 92vw; just tighten padding a bit */
|
||||
#settings-modal, #welcome-modal { padding: 16px; }
|
||||
|
||||
#toasts { left: 12px; right: 12px; max-width: none; }
|
||||
}
|
||||
Reference in new issue
Block a user