deco/obs-ss-plugin-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix status indicator dots visibility in footer

Browse source 
- Added custom CSS for status dots using Solarized theme colors
- Replaced Tailwind classes with custom .status-dot classes
- Fixed connection status dot (green when connected, red when disconnected)
- Fixed streaming/recording status dots (red when active, gray when idle)
- Used proper Solarized color palette for consistency

Status dots now properly display:
- Connection: Green dot for connected, red for disconnected
- Streaming: Red dot when live, gray when offline
- Recording: Red dot when recording, gray when idle

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Decobus 2025-07-22 14:36:07 -04:00
parent 02cad6a319
commit 52f3051c82
2 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/Footer.tsx
View file

@ -82,7 +82,7 @@ export default function Footer() {
{/* Connection Status */}
<div>
<div className="flex items-center gap-3 mb-4">
<div className={`w-3 h-3 rounded-full ${obsStatus?.connected ? 'bg-green-500' : 'bg-red-500'}`}></div>
<div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'}`}></div>
<div>
<h3 className="font-semibold">OBS Studio</h3>
<p className="text-sm opacity-60">
@ -151,12 +151,12 @@ export default function Footer() {
<div className="flex gap-4 mt-4">
<div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
<div className={`w-2 h-2 rounded-full ${obsStatus.streaming ? 'bg-red-500' : 'bg-gray-500'}`}></div>
<div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
<span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
</div>
<div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
<div className={`w-2 h-2 rounded-full ${obsStatus.recording ? 'bg-red-500' : 'bg-gray-500'}`}></div>
<div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
<span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
</div>
</div>