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

Consolidate CSS architecture and eliminate repetition
All checks were successful
Lint and Build / build (pull_request) Successful in 2m43s
Details

Browse source 
- Add CSS custom properties for commonly used gradients
- Consolidate duplicate button variants (.btn.active and .btn-success)
- Replace inline gradient styles with semantic CSS classes
- Standardize spacing with utility classes (mr-1, mr-2, mr-4, ml-3)
- Remove unused Home.module.css file
- Replace hard-coded colors with Solarized CSS variables
- Add scene-specific button classes (btn-scene-preview, btn-scene-transition)

Reduces CSS duplication, improves maintainability, and ensures consistent
styling throughout the application with reusable utility classes.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Decobus 2025-07-25 21:39:49 -04:00
parent 3bad71cb26
commit 4f9e6d2097
5 changed files with 77 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/Footer.tsx
View file

@ -86,7 +86,7 @@ export default function Footer() {
<div className="mb-4">
<h3 className="font-semibold mb-2">OBS Studio</h3>
<div className="flex items-center">
<div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'}`} style={{marginRight: '4px'}}></div>
<div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'} mr-1`}></div>
<p className="text-sm opacity-60">
{obsStatus?.connected ? 'Connected' : 'Disconnected'}
</p>
@ -102,17 +102,17 @@ export default function Footer() {
{obsStatus.connected && (
<div className="flex flex-wrap gap-6 mt-4">
<div className={`flex items-center ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
<div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '10px', height: '10px', marginRight: '4px'}}></div>
<span className="text-sm font-medium" style={{marginRight: '8px'}}>{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
<div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'} mr-1`} style={{width: '10px', height: '10px'}}></div>
<span className="text-sm font-medium mr-2">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
</div>
<div className={`flex items-center ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
<div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '10px', height: '10px', marginRight: '4px'}}></div>
<span className="text-sm font-medium" style={{marginRight: '8px'}}>{obsStatus.recording ? 'REC' : 'IDLE'}</span>
<div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'} mr-1`} style={{width: '10px', height: '10px'}}></div>
<span className="text-sm font-medium mr-2">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
</div>
<div className={`flex items-center ${obsStatus.studioModeEnabled ? 'text-yellow-400' : 'opacity-60'}`}>
<div className={`status-dot ${obsStatus.studioModeEnabled ? 'connected' : 'idle'}`} style={{width: '10px', height: '10px', marginRight: '4px'}}></div>
<div className={`status-dot ${obsStatus.studioModeEnabled ? 'connected' : 'idle'} mr-1`} style={{width: '10px', height: '10px'}}></div>
<span className="text-sm font-medium">{obsStatus.studioModeEnabled ? 'STUDIO' : 'DIRECT'}</span>
</div>
</div>