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

Implement cool & minimal light theme

Browse Source 
- Replace warm & cozy theme with cool & minimal aesthetic
- Use clean slate grays (#f8fafc, #f1f5f9, #e2e8f0) for backgrounds
- Apply sophisticated blue accents (#3b82f6, #1d4ed8) for interactive elements
- Maintain high contrast text colors for excellent readability
- Preserve glass-morphism effects with cool-tinted shadows
- Create professional, corporate-friendly color scheme
- Ensure minimal visual noise with subtle borders and clean typography
This commit is contained in:
0x1d
2025-09-04 21:15:44 +02:00
parent 2cf50486a7
commit 7898a1d461
1 changed files with 150 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
public/styles/theme.css
View File

@@ -29,32 +29,32 @@
--backdrop-blur: blur(10px); --backdrop-blur: blur(10px);
} }
/* Nord Frost Light Theme with Glass-Morphism */ /* Cool & Minimal Light Theme with Glass-Morphism */
[data-theme="light"] { [data-theme="light"] {
--bg-primary: linear-gradient(135deg, #8fbcbb 0%, #88c0d0 50%, #81a1c1 100%); --bg-primary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
--bg-secondary: rgba(143, 188, 187, 0.15); --bg-secondary: rgba(255, 255, 255, 0.1);
--bg-tertiary: rgba(143, 188, 187, 0.1); --bg-tertiary: rgba(255, 255, 255, 0.05);
--bg-hover: rgba(143, 188, 187, 0.25); --bg-hover: rgba(255, 255, 255, 0.15);
--bg-overlay: rgba(0, 0, 0, 0.4); --bg-overlay: rgba(0, 0, 0, 0.3);
--text-primary: #2e3440; --text-primary: #1e293b;
--text-secondary: #3b4252; --text-secondary: #475569;
--text-tertiary: #434c5e; --text-tertiary: #64748b;
--text-muted: #4c566a; --text-muted: #94a3b8;
--border-primary: rgba(143, 188, 187, 0.2); --border-primary: rgba(148, 163, 184, 0.2);
--border-secondary: rgba(143, 188, 187, 0.3); --border-secondary: rgba(148, 163, 184, 0.3);
--border-hover: rgba(143, 188, 187, 0.4); --border-hover: rgba(148, 163, 184, 0.4);
--accent-primary: #88c0d0; --accent-primary: #3b82f6;
--accent-secondary: #81a1c1; --accent-secondary: #1d4ed8;
--accent-warning: #d08770; --accent-warning: #f59e0b;
--accent-error: #bf616a; --accent-error: #dc2626;
--accent-success: #a3be8c; --accent-success: #059669;
--shadow-primary: 0 8px 32px rgba(143, 188, 187, 0.2); --shadow-primary: 0 8px 32px rgba(148, 163, 184, 0.1);
--shadow-secondary: 0 4px 16px rgba(143, 188, 187, 0.1); --shadow-secondary: 0 4px 16px rgba(148, 163, 184, 0.05);
--shadow-hover: 0 12px 40px rgba(143, 188, 187, 0.3); --shadow-hover: 0 12px 40px rgba(148, 163, 184, 0.15);
--backdrop-blur: blur(20px); --backdrop-blur: blur(20px);
} }
@@ -147,85 +147,84 @@
} }
} }
/* Nord Frost Glass-Morphism Effects */ /* Cool & Minimal Glass-Morphism Effects */
[data-theme="light"] .main-navigation { [data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(25px); backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: 0 8px 32px rgba(143, 188, 187, 0.15); box-shadow: 0 8px 32px rgba(148, 163, 184, 0.1);
} }
[data-theme="light"] .nav-tab { [data-theme="light"] .nav-tab {
background: rgba(255, 255, 255, 0.1); background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid transparent;
backdrop-filter: blur(15px); backdrop-filter: none;
color: var(--text-primary); color: var(--text-secondary);
} }
[data-theme="light"] .nav-tab:hover { [data-theme="light"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid transparent;
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.2);
color: var(--text-primary); color: var(--text-primary);
} }
[data-theme="light"] .nav-tab.active { [data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2);
border: 1px solid var(--accent-secondary); border: 1px solid var(--accent-secondary);
color: var(--text-primary); color: var(--text-primary);
box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
} }
[data-theme="light"] .cluster-status { [data-theme="light"] .cluster-status {
background: linear-gradient(135deg, rgba(163, 190, 140, 0.2) 0%, rgba(163, 190, 140, 0.1) 100%); background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
border: 1px solid rgba(163, 190, 140, 0.3); border: 1px solid rgba(5, 150, 105, 0.25);
box-shadow: 0 4px 16px rgba(163, 190, 140, 0.2); box-shadow: 0 4px 16px rgba(5, 150, 105, 0.1);
color: #a3be8c; color: #059669;
} }
[data-theme="light"] .theme-switcher { [data-theme="light"] .theme-switcher {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
} }
[data-theme="light"] .theme-switcher:hover { [data-theme="light"] .theme-switcher:hover {
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.35); border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 6px 20px rgba(143, 188, 187, 0.2); box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
} }
[data-theme="light"] .view-content { [data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: 0 8px 32px rgba(143, 188, 187, 0.15); box-shadow: 0 8px 32px rgba(148, 163, 184, 0.1);
} }
[data-theme="light"] .cluster-section, [data-theme="light"] .cluster-section,
[data-theme="light"] .firmware-section { [data-theme="light"] .firmware-section {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px); backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(143, 188, 187, 0.2); box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
} }
/* Member Cards - No Hover Effects */ /* Member Cards - No Hover Effects */
[data-theme="light"] .member-card { [data-theme="light"] .member-card {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
transition: none; transition: none;
} }
[data-theme="light"] .member-card:hover { [data-theme="light"] .member-card:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
transform: none; transform: none;
} }
@@ -238,111 +237,111 @@
} }
[data-theme="light"] .tabs-container { [data-theme="light"] .tabs-container {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.06);
} }
[data-theme="light"] .tabs-header { [data-theme="light"] .tabs-header {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(148, 163, 184, 0.25);
} }
[data-theme="light"] .tab-content { [data-theme="light"] .tab-content {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(148, 163, 184, 0.2);
} }
[data-theme="light"] .tab-button { [data-theme="light"] .tab-button {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(148, 163, 184, 0.2);
color: var(--text-primary); color: var(--text-primary);
} }
[data-theme="light"] .tab-button:hover { [data-theme="light"] .tab-button:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.3);
color: var(--text-primary); color: var(--text-primary);
} }
[data-theme="light"] .tab-button.active { [data-theme="light"] .tab-button.active {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2);
border: 1px solid var(--accent-secondary); border: 1px solid var(--accent-secondary);
color: var(--text-primary); color: var(--text-primary);
box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
} }
[data-theme="light"] .tasks-summary { [data-theme="light"] .tasks-summary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
backdrop-filter: blur(25px); backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
} }
[data-theme="light"] .tasks-summary:hover { [data-theme="light"] .tasks-summary:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 6px 20px rgba(143, 188, 187, 0.2); box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
} }
[data-theme="light"] .summary-stat { [data-theme="light"] .summary-stat {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 2px 8px rgba(143, 188, 187, 0.1); box-shadow: 0 2px 8px rgba(148, 163, 184, 0.06);
} }
[data-theme="light"] .summary-stat:hover { [data-theme="light"] .summary-stat:hover {
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35); border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 4px 12px rgba(143, 188, 187, 0.2); box-shadow: 0 4px 12px rgba(148, 163, 184, 0.1);
} }
[data-theme="light"] .action-group { [data-theme="light"] .action-group {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
} }
[data-theme="light"] .action-group:hover { [data-theme="light"] .action-group:hover {
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35); border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 6px 20px rgba(143, 188, 187, 0.2); box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
} }
[data-theme="light"] .progress-item, [data-theme="light"] .progress-item,
[data-theme="light"] .result-item { [data-theme="light"] .result-item {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
} }
[data-theme="light"] .progress-item:hover, [data-theme="light"] .progress-item:hover,
[data-theme="light"] .result-item:hover { [data-theme="light"] .result-item:hover {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 8px 32px rgba(143, 188, 187, 0.25); box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
} }
[data-theme="light"] .capability-item { [data-theme="light"] .capability-item {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
} }
[data-theme="light"] .capability-item:hover { [data-theme="light"] .capability-item:hover {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 6px 20px rgba(143, 188, 187, 0.25); box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
} }
/* Text Color Fixes for Nord Frost Theme */ /* Text Color Fixes for Cool & Minimal Theme */
[data-theme="light"] .member-hostname, [data-theme="light"] .member-hostname,
[data-theme="light"] .member-ip, [data-theme="light"] .member-ip,
[data-theme="light"] .latency-label, [data-theme="light"] .latency-label,
@@ -377,35 +376,35 @@
color: var(--text-muted) !important; color: var(--text-muted) !important;
} }
/* Status Indicators for Nord Frost Theme */ /* Status Indicators for Cool & Minimal Theme */
[data-theme="light"] .status-online { [data-theme="light"] .status-online {
background: rgba(163, 190, 140, 0.2); background: rgba(5, 150, 105, 0.15);
color: #a3be8c; color: #059669;
border: 1px solid rgba(163, 190, 140, 0.4); border: 1px solid rgba(5, 150, 105, 0.3);
} }
[data-theme="light"] .status-offline { [data-theme="light"] .status-offline {
background: rgba(191, 97, 106, 0.2); background: rgba(220, 38, 38, 0.15);
color: #bf616a; color: #dc2626;
border: 1px solid rgba(191, 97, 106, 0.4); border: 1px solid rgba(220, 38, 38, 0.3);
} }
[data-theme="light"] .status-inactive { [data-theme="light"] .status-inactive {
background: rgba(208, 135, 112, 0.2); background: rgba(245, 158, 11, 0.15);
color: #d08770; color: #f59e0b;
border: 1px solid rgba(208, 135, 112, 0.4); border: 1px solid rgba(245, 158, 11, 0.3);
} }
/* Label Chips for Nord Frost Theme */ /* Label Chips for Cool & Minimal Theme */
[data-theme="light"] .label-chip { [data-theme="light"] .label-chip {
background: rgba(129, 161, 193, 0.2); background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(129, 161, 193, 0.4); border: 1px solid rgba(59, 130, 246, 0.3);
color: #81a1c1 !important; color: #3b82f6 !important;
} }
[data-theme="light"] .label-chip.removable { [data-theme="light"] .label-chip.removable {
background: rgba(129, 161, 193, 0.25); background: rgba(59, 130, 246, 0.2);
border: 1px solid rgba(129, 161, 193, 0.5); border: 1px solid rgba(59, 130, 246, 0.4);
} }
[data-theme="light"] .label-chip .chip-remove { [data-theme="light"] .label-chip .chip-remove {
@@ -413,15 +412,15 @@
} }
[data-theme="light"] .label-chip .chip-remove:hover { [data-theme="light"] .label-chip .chip-remove:hover {
background: rgba(129, 161, 193, 0.3); background: rgba(59, 130, 246, 0.25);
} }
/* Form Elements for Nord Frost Theme */ /* Form Elements for Cool & Minimal Theme */
[data-theme="light"] .param-input, [data-theme="light"] .param-input,
[data-theme="light"] .node-select, [data-theme="light"] .node-select,
[data-theme="light"] .label-select { [data-theme="light"] .label-select {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.25);
color: var(--text-primary); color: var(--text-primary);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -430,8 +429,8 @@
[data-theme="light"] .node-select:focus, [data-theme="light"] .node-select:focus,
[data-theme="light"] .label-select:focus { [data-theme="light"] .label-select:focus {
border-color: var(--accent-secondary); border-color: var(--accent-secondary);
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(129, 161, 193, 0.2); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
} }
[data-theme="light"] .param-input option, [data-theme="light"] .param-input option,
@@ -441,15 +440,15 @@
color: var(--text-primary); color: var(--text-primary);
} }
/* Buttons for Nord Frost Theme */ /* Buttons for Cool & Minimal Theme */
[data-theme="light"] .refresh-btn, [data-theme="light"] .refresh-btn,
[data-theme="light"] .upload-btn, [data-theme="light"] .upload-btn,
[data-theme="light"] .upload-btn-compact, [data-theme="light"] .upload-btn-compact,
[data-theme="light"] .deploy-btn, [data-theme="light"] .deploy-btn,
[data-theme="light"] .cap-call-btn, [data-theme="light"] .cap-call-btn,
[data-theme="light"] .clear-btn { [data-theme="light"] .clear-btn {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.25);
color: var(--text-primary); color: var(--text-primary);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
} }
@@ -460,22 +459,22 @@
[data-theme="light"] .deploy-btn:hover, [data-theme="light"] .deploy-btn:hover,
[data-theme="light"] .cap-call-btn:hover, [data-theme="light"] .cap-call-btn:hover,
[data-theme="light"] .clear-btn:hover { [data-theme="light"] .clear-btn:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 4px 16px rgba(143, 188, 187, 0.2); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.12);
color: var(--text-primary); color: var(--text-primary);
} }
/* Member Overlay Styling with Nord Frost */ /* Member Overlay Styling with Cool & Minimal */
[data-theme="light"] .member-overlay-content { [data-theme="light"] .member-overlay-content {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 20px 40px rgba(143, 188, 187, 0.15); box-shadow: 0 20px 40px rgba(148, 163, 184, 0.12);
} }
[data-theme="light"] .member-overlay-header { [data-theme="light"] .member-overlay-header {
border-bottom: 1px solid rgba(143, 188, 187, 0.2); border-bottom: 1px solid rgba(148, 163, 184, 0.2);
} }
[data-theme="light"] .member-overlay-header .member-info .member-hostname { [data-theme="light"] .member-overlay-header .member-info .member-hostname {
@@ -497,9 +496,9 @@
} }
[data-theme="light"] .member-overlay-header .member-info .member-labels .label-chip { [data-theme="light"] .member-overlay-header .member-info .member-labels .label-chip {
background: rgba(129, 161, 193, 0.2); background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(129, 161, 193, 0.4); border: 1px solid rgba(59, 130, 246, 0.3);
color: #81a1c1 !important; color: #3b82f6 !important;
} }
[data-theme="light"] .member-overlay-subtitle { [data-theme="light"] .member-overlay-subtitle {
@@ -522,22 +521,22 @@
} }
[data-theme="light"] .member-overlay-body .member-card .member-header { [data-theme="light"] .member-overlay-body .member-card .member-header {
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(143, 188, 187, 0.1); box-shadow: 0 2px 8px rgba(148, 163, 184, 0.08);
} }
[data-theme="light"] .member-overlay-body .member-card .member-details { [data-theme="light"] .member-overlay-body .member-card .member-details {
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 1rem;
box-shadow: 0 2px 8px rgba(143, 188, 187, 0.08); box-shadow: 0 2px 8px rgba(148, 163, 184, 0.06);
} }
[data-theme="light"] .member-overlay-body .detail-section-title { [data-theme="light"] .member-overlay-body .detail-section-title {
@@ -562,15 +561,15 @@
} }
[data-theme="light"] .member-overlay-body .resource-chip { [data-theme="light"] .member-overlay-body .resource-chip {
background: rgba(129, 161, 193, 0.2); background: rgba(59, 130, 246, 0.15);
color: #81a1c1 !important; color: #3b82f6 !important;
border: 1px solid rgba(129, 161, 193, 0.4); border: 1px solid rgba(59, 130, 246, 0.3);
} }
[data-theme="light"] .member-overlay-body .api-chip { [data-theme="light"] .member-overlay-body .api-chip {
background: rgba(163, 190, 140, 0.2); background: rgba(5, 150, 105, 0.15);
color: #a3be8c !important; color: #059669 !important;
border: 1px solid rgba(163, 190, 140, 0.4); border: 1px solid rgba(5, 150, 105, 0.3);
} }
/* Dark theme overlay improvements */ /* Dark theme overlay improvements */
@@ -672,101 +671,19 @@
/* Mobile Responsive Adjustments */ /* Mobile Responsive Adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
[data-theme="light"] .main-navigation { [data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(30px); backdrop-filter: blur(30px);
} }
[data-theme="light"] .view-content { [data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(25px); backdrop-filter: blur(25px);
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
[data-theme="light"] .main-navigation { [data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(35px); 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);
}