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

text-background-color-source #10

Merged
deco merged 7 commits from text-background-color-source into main 2025-07-22 23:36:53 +03:00
Conversation 0 Commits 7 Files changed 12 +27 -3
2 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 52f3051c82 - Show all commits

24
app/globals.css
View file

@ -40,6 +40,30 @@ body {
line-height: 1.6; line-height: 1.6;
} }
/* Status Indicator Dots */
.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.status-dot.connected {
background-color: #859900; /* Solarized green */
}
.status-dot.disconnected {
background-color: #dc322f; /* Solarized red */
}
.status-dot.streaming {
background-color: #dc322f; /* Solarized red */
}
.status-dot.idle {
background-color: #586e75; /* Solarized base01 */
}
/* Glass Card Component */ /* Glass Card Component */
.glass { .glass {
background: rgba(7, 54, 66, 0.4); background: rgba(7, 54, 66, 0.4);

6
components/Footer.tsx
View file

@ -82,7 +82,7 @@ export default function Footer() {
{/* Connection Status */} {/* Connection Status */}
<div> <div>
<div className="flex items-center gap-3 mb-4"> <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> <div>
<h3 className="font-semibold">OBS Studio</h3> <h3 className="font-semibold">OBS Studio</h3>
<p className="text-sm opacity-60"> <p className="text-sm opacity-60">
@ -151,12 +151,12 @@ export default function Footer() {
<div className="flex gap-4 mt-4"> <div className="flex gap-4 mt-4">
<div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}> <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> <span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
</div> </div>
<div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}> <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> <span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
</div> </div>
</div> </div>