diff --git a/public/index.html b/public/index.html
index ba737d8..d77de05 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
SPORE UI
-
+
diff --git a/public/styles/main.css b/public/styles/main.css
index cc24b09..be5ef32 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -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;
diff --git a/public/styles/theme.css b/public/styles/theme.css
index 8b75a88..084e05e 100644
--- a/public/styles/theme.css
+++ b/public/styles/theme.css
@@ -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;
+ }
+}