iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Simplify navigation and background gradient

Browse Source 
🎨 Background Gradient:
- Reduced from 5 to 3 Nord Frost colors
- Cleaner, more minimal gradient: #8fbcbb → #88c0d0 → #81a1c1
- Less visual noise in background

🧭 Navigation Improvements:
- Only active tab has background and border
- Inactive tabs are completely transparent
- Subtle hover effects for better UX
- Cleaner visual hierarchy

✨ Benefits:
- More minimal and professional appearance
- Better focus on active content
- Reduced visual complexity
- Consistent with modern design principles

Files modified:
- public/styles/theme.css - Simplified gradient and navigation styling
This commit is contained in:
0x1d
2025-09-04 21:08:24 +02:00
parent 4498da72fa
commit 2cf50486a7
1 changed files with 83 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
public/styles/theme.css
View File

@@ -31,7 +31,7 @@
/* Nord Frost Light Theme with Glass-Morphism */
[data-theme="light"] {
--bg-primary: linear-gradient(135deg, #8fbcbb 0%, #88c0d0 25%, #81a1c1 50%, #5e81ac 75%, #8fbcbb 100%);
--bg-primary: linear-gradient(135deg, #8fbcbb 0%, #88c0d0 50%, #81a1c1 100%);
--bg-secondary: rgba(143, 188, 187, 0.15);
--bg-tertiary: rgba(143, 188, 187, 0.1);
--bg-hover: rgba(143, 188, 187, 0.25);
@@ -688,3 +688,85 @@
backdrop-filter: blur(35px);
}
}
/* Fix navigation - only active tabs should have borders */
[data-theme="light"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: blur(15px);
color: var(--text-secondary);
}
[data-theme="light"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.2);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.3);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
}
[data-theme="dark"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: blur(15px);
color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.1);
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .nav-tab.active {
background: rgba(255, 255, 255, 0.15);
border: 1px solid var(--accent-secondary);
color: #ffffff;
box-shadow: 0 4px 20px rgba(96, 165, 250, 0.25);
}
/* Fix navigation - only active tabs should have background */
[data-theme="light"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: none;
color: var(--text-secondary);
}
[data-theme="light"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.1);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.3);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
}
[data-theme="dark"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: none;
color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.05);
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .nav-tab.active {
background: rgba(255, 255, 255, 0.15);
border: 1px solid var(--accent-secondary);
color: #ffffff;
box-shadow: 0 4px 20px rgba(96, 165, 250, 0.25);
}