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