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

42
app/page.tsx
View file

@ -193,28 +193,28 @@ export default function Home() {
return {
isActive: true,
text: `Program & Preview: ${sceneName}`,
background: 'linear-gradient(135deg, var(--solarized-green), var(--solarized-yellow))',
className: 'active',
showTransition: false
};
} else if (isProgram) {
return {
isActive: true,
text: `Program: ${sceneName}`,
background: 'linear-gradient(135deg, var(--solarized-green), var(--solarized-yellow))',
className: 'active',
showTransition: false
};
} else if (isPreview) {
return {
isActive: true,
text: `Preview: ${sceneName}`,
background: 'linear-gradient(135deg, var(--solarized-yellow), var(--solarized-orange))',
className: 'btn-scene-preview',
showTransition: true
};
} else {
return {
isActive: false,
text: `Set Preview: ${sceneName}`,
background: 'linear-gradient(135deg, var(--solarized-blue), var(--solarized-cyan))',
className: '',
showTransition: false
};
}
@ -224,14 +224,14 @@ export default function Home() {
return {
isActive: true,
text: `Active: ${sceneName}`,
background: 'linear-gradient(135deg, var(--solarized-green), var(--solarized-yellow))',
className: 'active',
showTransition: false
};
} else {
return {
isActive: false,
text: `Switch to ${sceneName}`,
background: 'linear-gradient(135deg, var(--solarized-blue), var(--solarized-cyan))',
className: '',
showTransition: false
};
}
@ -289,20 +289,14 @@ export default function Home() {
<>
<button
onClick={() => handleSceneSwitch('1-Screen')}
className={`btn ${buttonState.isActive ? 'active' : ''}`}
style={{ background: buttonState.background }}
className={`btn ${buttonState.className}`}
>
{buttonState.text}
</button>
{buttonState.showTransition && (
<button
onClick={handleTransition}
className="btn"
style={{
background: 'linear-gradient(135deg, var(--solarized-red), var(--solarized-magenta))',
minWidth: '120px',
marginLeft: '12px'
}}
className="btn btn-scene-transition ml-3"
>
Go Live
</button>
@ -335,20 +329,14 @@ export default function Home() {
<>
<button
onClick={() => handleSceneSwitch('2-Screen')}
className={`btn ${buttonState.isActive ? 'active' : ''}`}
style={{ background: buttonState.background }}
className={`btn ${buttonState.className}`}
>
{buttonState.text}
</button>
{buttonState.showTransition && (
<button
onClick={handleTransition}
className="btn"
style={{
background: 'linear-gradient(135deg, var(--solarized-red), var(--solarized-magenta))',
minWidth: '120px',
marginLeft: '12px'
}}
className="btn btn-scene-transition ml-3"
>
Go Live
</button>
@ -395,20 +383,14 @@ export default function Home() {
<>
<button
onClick={() => handleSceneSwitch('4-Screen')}
className={`btn ${buttonState.isActive ? 'active' : ''}`}
style={{ background: buttonState.background }}
className={`btn ${buttonState.className}`}
>
{buttonState.text}
</button>
{buttonState.showTransition && (
<button
onClick={handleTransition}
className="btn"
style={{
background: 'linear-gradient(135deg, var(--solarized-red), var(--solarized-magenta))',
minWidth: '120px',
marginLeft: '12px'
}}
className="btn btn-scene-transition ml-3"
>
Go Live
</button>