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

Fix mobile navigation light theme

Browse Source 
- Replace hardcoded dark colors in main.css with CSS variables
- Add comprehensive light theme overrides for mobile navigation
- Implement cool glass-morphism styling for mobile expanded state
- Ensure proper contrast and readability on all screen sizes
- Add cache-busting parameter to theme.css for browser refresh

Mobile navigation now properly displays light theme when expanded.
This commit is contained in:
0x1d
2025-09-06 14:02:48 +02:00
parent 2cf3fb2852
commit 103aeabea7
3 changed files with 476 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/styles/main.css
View File

@@ -2271,7 +2271,7 @@ p {
/* Lighter Tab Theme (final overrides) */
.tabs-container {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--border-primary);
}
.tabs-header {
@@ -2299,7 +2299,7 @@ p {
}
.tab-content {
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--border-primary);
background: rgba(255, 255, 255, 0.08);
}
@@ -2562,8 +2562,8 @@ p {
top: 100%;
left: 0;
right: 0;
background: linear-gradient(135deg, #1c2a38 0%, #283746 50%, #1a252f 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: 12px;
padding: 0.5rem;
gap: 0.25rem;
@@ -2690,8 +2690,8 @@ p {
}
.member-overlay-content {
background: linear-gradient(135deg, #1c2a38 0%, #283746 50%, #1a252f 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
max-width: 800px;
@@ -2792,9 +2792,6 @@ p {
height: 20px;
}
.member-overlay-body {
padding: 24px;
}
.member-overlay-section {
margin-bottom: 24px;
@@ -2821,10 +2818,6 @@ p {
border-bottom: none;
}
.member-overlay-body .member-card .member-details {
padding: 0px 24px;
}
/* Hide expand icon in overlay since card is always expanded */
.member-overlay-body .member-card .expand-icon {
display: none;
@@ -2951,7 +2944,7 @@ p {
}
.member-overlay-body {
padding: 20px;
padding: 0px;
}
.member-overlay-actions {
@@ -3013,10 +3006,6 @@ p {
max-height: calc(90vh - 80px);
}
.member-overlay-body .member-card .member-details {
padding: 0 12px;
}
/* Further compact layout for very small screens */
.member-overlay-header .member-info .member-row-1 {
gap: 0.25rem;