jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(collab): theme-aware N-online badge and people panel 

The collab overlay badge used --rs-bg-secondary (which doesn't exist in
the theme system), causing it to always fall back to dark hardcoded values.
Updated all Shadow DOM CSS to use proper theme variables (--rs-glass-bg,
--rs-glass-border, --rs-text-primary, etc.) with light-mode-safe fallbacks
so the badge and panel are readable in both dark and light themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-24 17:39:40 -07:00
parent 41051715b9
commit e70b40df9a
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
shared/components/rstack-collab-overlay.ts
View File

@ -722,7 +722,7 @@ const OVERLAY_CSS = `
} }
.count.solo { .count.solo {
color: var(--rs-text-muted, #888); color: var(--rs-text-muted, #64748b);
} }
.dot { .dot {
@ -792,9 +792,9 @@ const OVERLAY_CSS = `
.conn-notice { .conn-notice {
padding: 8px 16px; padding: 8px 16px;
font-size: 12px; font-size: 12px;
color: var(--rs-text-muted, #888); color: var(--rs-text-muted, #64748b);
background: var(--rs-bg-surface-raised, rgba(255,255,255,0.04)); background: var(--rs-bg-surface-raised, #f0efe9);
border-bottom: 1px solid var(--rs-border-subtle, rgba(255,255,255,0.06)); border-bottom: 1px solid var(--rs-border-subtle, rgba(0,0,0,0.06));
} }
.people-row { .people-row {
@ -807,7 +807,7 @@ const OVERLAY_CSS = `
} }
.people-row:hover { .people-row:hover {
background: var(--rs-bg-hover, rgba(255,255,255,0.08)); background: var(--rs-bg-hover, rgba(0,0,0,0.04));
} }
.people-row .dot { .people-row .dot {
@ -824,7 +824,7 @@ const OVERLAY_CSS = `
.people-row .name { .people-row .name {
font-size: 13px; font-size: 13px;
color: var(--rs-text-primary, #fff); color: var(--rs-text-primary, #0f172a);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -832,7 +832,7 @@ const OVERLAY_CSS = `
.peer-context { .peer-context {
font-size: 11px; font-size: 11px;
color: var(--rs-text-muted, #888); color: var(--rs-text-muted, #64748b);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -851,7 +851,7 @@ const OVERLAY_CSS = `
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0; gap: 0;
border: 1px solid var(--rs-border, rgba(255,255,255,0.12)); border: 1px solid var(--rs-border, rgba(0,0,0,0.1));
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
@ -862,19 +862,19 @@ const OVERLAY_CSS = `
border: none; border: none;
background: none; background: none;
font-size: 11px; font-size: 11px;
color: var(--rs-text-muted, #888); color: var(--rs-text-muted, #64748b);
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
white-space: nowrap; white-space: nowrap;
} }
.mode-toggle button.active { .mode-toggle button.active {
background: var(--rs-accent, #3b82f6); background: var(--rs-accent, #14b8a6);
color: #fff; color: #fff;
} }
.mode-toggle button:not(.active):hover { .mode-toggle button:not(.active):hover {
background: var(--rs-bg-hover, rgba(255,255,255,0.08)); background: var(--rs-bg-hover, rgba(0,0,0,0.04));
} }
/* ── Peer action buttons (canvas only) ── */ /* ── Peer action buttons (canvas only) ── */
@ -906,14 +906,14 @@ const OVERLAY_CSS = `
background: none; background: none;
text-align: left; text-align: left;
font-size: 12px; font-size: 12px;
color: var(--rs-text-secondary, #ccc); color: var(--rs-text-secondary, #374151);
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: 6px;
transition: background 0.15s; transition: background 0.15s;
} }
.people-actions button:hover { .people-actions button:hover {
background: var(--rs-bg-hover, rgba(255,255,255,0.08)); background: var(--rs-bg-hover, rgba(0,0,0,0.04));
} }
/* ── Cursors ── */ /* ── Cursors ── */