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