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;

477
public/styles/theme.css
View File

@@ -531,11 +531,6 @@
}
[data-theme="light"] .member-overlay-body .member-card .member-details {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(12px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 8px rgba(148, 163, 184, 0.06);
}
@@ -629,10 +624,6 @@
}
[data-theme="dark"] .member-overlay-body .member-card .member-details {
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .member-overlay-body .detail-section-title {
@@ -687,3 +678,471 @@
backdrop-filter: blur(35px);
}
}
/* Enhanced Mobile Responsive Adjustments for Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: none;
color: var(--text-secondary);
padding: 0.75rem 1rem;
}
[data-theme="light"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.12);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.25);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .cluster-status {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(5, 150, 105, 0.3);
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
color: #059669;
}
[data-theme="light"] .theme-switcher {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1);
}
[data-theme="light"] .theme-switcher:hover {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
/* Enhanced Mobile Responsive Adjustments for Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: none;
color: var(--text-secondary);
padding: 0.75rem 1rem;
}
[data-theme="light"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.12);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.25);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .cluster-status {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(5, 150, 105, 0.3);
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
color: #059669;
}
[data-theme="light"] .theme-switcher {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1);
}
[data-theme="light"] .theme-switcher:hover {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .cluster-section,
[data-theme="light"] .firmware-section {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(35px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .nav-tab {
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .cluster-status {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
backdrop-filter: blur(25px);
border: 1px solid rgba(5, 150, 105, 0.35);
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.15);
}
[data-theme="light"] .theme-switcher {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
}
/* Mobile Navigation Expanded State - Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
backdrop-filter: none;
margin-bottom: 0.25rem;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(148, 163, 184, 0.25);
color: var(--text-secondary);
backdrop-filter: blur(15px);
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(148, 163, 184, 0.35);
color: var(--text-primary);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1);
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(148, 163, 184, 0.3);
backdrop-filter: blur(20px);
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15);
}
}
/* Mobile Navigation Expanded State - Light Theme (Higher Specificity) */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%) !important;
backdrop-filter: blur(25px) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
backdrop-filter: none !important;
margin-bottom: 0.25rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid var(--accent-secondary) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(148, 163, 184, 0.25) !important;
color: var(--text-secondary) !important;
backdrop-filter: blur(15px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1) !important;
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%) !important;
backdrop-filter: blur(30px) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(148, 163, 184, 0.4) !important;
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
}
}
/* Ultra-specific mobile navigation override for light theme */
@media (max-width: 768px) {
html[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%) !important;
backdrop-filter: blur(25px) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15) !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
backdrop-filter: none !important;
margin-bottom: 0.25rem !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid var(--accent-secondary) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(148, 163, 184, 0.25) !important;
color: var(--text-secondary) !important;
backdrop-filter: blur(15px) !important;
}
html[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1) !important;
}
}
@media (max-width: 480px) {
html[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%) !important;
backdrop-filter: blur(30px) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2) !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
}
html[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
backdrop-filter: blur(20px) !important;
}
html[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(148, 163, 184, 0.4) !important;
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
}
}
/* Mobile Navigation Override - Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%) !important;
backdrop-filter: blur(25px) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
backdrop-filter: none !important;
margin-bottom: 0.25rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid var(--accent-secondary) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(148, 163, 184, 0.25) !important;
color: var(--text-secondary) !important;
backdrop-filter: blur(15px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1) !important;
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%) !important;
backdrop-filter: blur(30px) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(148, 163, 184, 0.4) !important;
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
}
}