diff --git a/public/styles/theme.css b/public/styles/theme.css index 7594b10..2712239 100644 --- a/public/styles/theme.css +++ b/public/styles/theme.css @@ -29,34 +29,34 @@ --backdrop-blur: blur(10px); } -/* Light Theme - Softer and easier on the eyes */ +/* Nord Frost Light Theme with Glass-Morphism */ [data-theme="light"] { - --bg-primary: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%); - --bg-secondary: rgba(255, 255, 255, 0.9); - --bg-tertiary: rgba(255, 255, 255, 0.7); - --bg-hover: rgba(255, 255, 255, 0.95); + --bg-primary: linear-gradient(135deg, #8fbcbb 0%, #88c0d0 25%, #81a1c1 50%, #5e81ac 75%, #8fbcbb 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); - --text-primary: #1e293b; - --text-secondary: #334155; - --text-tertiary: #475569; - --text-muted: #64748b; + --text-primary: #2e3440; + --text-secondary: #3b4252; + --text-tertiary: #434c5e; + --text-muted: #4c566a; - --border-primary: rgba(30, 41, 59, 0.15); - --border-secondary: rgba(30, 41, 59, 0.2); - --border-hover: rgba(30, 41, 59, 0.3); + --border-primary: rgba(143, 188, 187, 0.2); + --border-secondary: rgba(143, 188, 187, 0.3); + --border-hover: rgba(143, 188, 187, 0.4); - --accent-primary: #059669; - --accent-secondary: #2563eb; - --accent-warning: #d97706; - --accent-error: #dc2626; - --accent-success: #16a34a; + --accent-primary: #88c0d0; + --accent-secondary: #81a1c1; + --accent-warning: #d08770; + --accent-error: #bf616a; + --accent-success: #a3be8c; - --shadow-primary: 0 8px 24px rgba(0, 0, 0, 0.08); - --shadow-secondary: 0 4px 16px rgba(0, 0, 0, 0.04); - --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12); + --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); - --backdrop-blur: blur(8px); + --backdrop-blur: blur(20px); } /* Theme transition */ @@ -147,30 +147,208 @@ } } -/* Additional light theme improvements for better readability */ -[data-theme="light"] { - /* Ensure better contrast for specific elements */ - --text-primary: #0f172a; - --text-secondary: #1e293b; - --text-tertiary: #334155; - --text-muted: #475569; - - /* Improve background contrast */ - --bg-secondary: rgba(255, 255, 255, 0.95); - --bg-tertiary: rgba(255, 255, 255, 0.8); - --bg-hover: rgba(248, 250, 252, 0.95); - - /* Stronger borders for better definition */ - --border-primary: rgba(30, 41, 59, 0.2); - --border-secondary: rgba(30, 41, 59, 0.25); - --border-hover: rgba(30, 41, 59, 0.35); +/* Nord Frost Glass-Morphism Effects */ +[data-theme="light"] .main-navigation { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(25px); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(143, 188, 187, 0.15); } -/* Fix specific text readability issues */ +[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); +} + +[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); + 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="light"] .cluster-status { + background: linear-gradient(135deg, rgba(163, 190, 140, 0.2) 0%, rgba(163, 190, 140, 0.1) 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; +} + +[data-theme="light"] .theme-switcher { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1); +} + +[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); +} + +[data-theme="light"] .view-content { + background: rgba(255, 255, 255, 0.1); + 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); +} + +[data-theme="light"] .cluster-section, +[data-theme="light"] .firmware-section { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(25px); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px rgba(143, 188, 187, 0.2); +} + +/* Member Cards - No Hover Effects */ +[data-theme="light"] .member-card { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); + 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); + transform: none; +} + +[data-theme="light"] .member-card::before { + display: none; +} + +[data-theme="light"] .member-card:hover::before { + display: none; +} + +[data-theme="light"] .tabs-container { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1); +} + +[data-theme="light"] .tabs-header { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.25); +} + +[data-theme="light"] .tab-content { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +[data-theme="light"] .tab-button { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 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); + color: var(--text-primary); +} + +[data-theme="light"] .tab-button.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="light"] .tasks-summary { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 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); +} + +[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); +} + +[data-theme="light"] .summary-stat { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: 0 2px 8px rgba(143, 188, 187, 0.1); +} + +[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); +} + +[data-theme="light"] .action-group { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1); +} + +[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); +} + +[data-theme="light"] .progress-item, +[data-theme="light"] .result-item { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); +} + +[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); +} + +[data-theme="light"] .capability-item { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15); +} + +[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); +} + +/* Text Color Fixes for Nord Frost Theme */ [data-theme="light"] .member-hostname, [data-theme="light"] .member-ip, [data-theme="light"] .latency-label, [data-theme="light"] .latency-value, +[data-theme="light"] .detail-label, +[data-theme="light"] .detail-value, [data-theme="light"] .primary-node-label, [data-theme="light"] .primary-node-ip, [data-theme="light"] .cluster-status, @@ -178,8 +356,13 @@ [data-theme="light"] .summary-title, [data-theme="light"] .summary-subtitle, [data-theme="light"] .task-name, -[data-theme="light"] .detail-label, -[data-theme="light"] .detail-value { +[data-theme="light"] .tab-content p, +[data-theme="light"] .tab-content h1, +[data-theme="light"] .tab-content h2, +[data-theme="light"] .tab-content h3, +[data-theme="light"] .tab-content h4, +[data-theme="light"] .tab-content h5, +[data-theme="light"] .tab-content h6 { color: var(--text-primary) !important; } @@ -194,279 +377,35 @@ color: var(--text-muted) !important; } -/* Ensure proper contrast for status indicators */ +/* Status Indicators for Nord Frost Theme */ [data-theme="light"] .status-online { - background: rgba(5, 150, 105, 0.2); - color: #059669; - border: 1px solid rgba(5, 150, 105, 0.4); + background: rgba(163, 190, 140, 0.2); + color: #a3be8c; + border: 1px solid rgba(163, 190, 140, 0.4); } [data-theme="light"] .status-offline { - background: rgba(220, 38, 38, 0.2); - color: #dc2626; - border: 1px solid rgba(220, 38, 38, 0.4); + background: rgba(191, 97, 106, 0.2); + color: #bf616a; + border: 1px solid rgba(191, 97, 106, 0.4); } [data-theme="light"] .status-inactive { - background: rgba(217, 119, 6, 0.2); - color: #d97706; - border: 1px solid rgba(217, 119, 6, 0.4); + background: rgba(208, 135, 112, 0.2); + color: #d08770; + border: 1px solid rgba(208, 135, 112, 0.4); } -/* Improve button and interactive element contrast */ -[data-theme="light"] .nav-tab { - color: var(--text-secondary); -} - -[data-theme="light"] .nav-tab:hover { - color: var(--text-primary); -} - -[data-theme="light"] .nav-tab.active { - color: var(--text-primary); -} - -/* Fix cluster status contrast */ -[data-theme="light"] .cluster-status { - background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%); - border: 1px solid rgba(5, 150, 105, 0.25); - color: #059669; - box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1); -} - -/* Improve form elements contrast */ -[data-theme="light"] .param-input, -[data-theme="light"] .node-select, -[data-theme="light"] .label-select { - background: var(--bg-tertiary); - border: 1px solid var(--border-secondary); - color: var(--text-primary); -} - -[data-theme="light"] .param-input:focus, -[data-theme="light"] .node-select:focus, -[data-theme="light"] .label-select:focus { - border-color: var(--accent-secondary); - background: var(--bg-hover); -} - -/* Fix dropdown options */ -[data-theme="light"] .param-input option, -[data-theme="light"] .node-select option, -[data-theme="light"] .label-select option { - background: var(--bg-secondary); - color: var(--text-primary); -} - -/* Improve tab content readability */ -[data-theme="light"] .tab-content { - background: var(--bg-tertiary); - border: 1px solid var(--border-secondary); -} - -/* Fix capability form text */ -[data-theme="light"] .param-name { - color: var(--text-tertiary); -} - -[data-theme="light"] .cap-uri { - color: var(--text-secondary); -} - -/* Improve error and success message contrast */ -[data-theme="light"] .error { - background: rgba(220, 38, 38, 0.1); - border: 1px solid rgba(220, 38, 38, 0.2); - color: #dc2626; -} - -[data-theme="light"] .upload-success { - background: rgba(22, 163, 74, 0.1); - border: 1px solid rgba(22, 163, 74, 0.2); - color: #16a34a; -} - -[data-theme="light"] .upload-error { - background: rgba(220, 38, 38, 0.1); - border: 1px solid rgba(220, 38, 38, 0.2); - color: #dc2626; -} - -/* Member Card Text Improvements */ -[data-theme="light"] .member-card { - background: var(--bg-secondary); - border: 1px solid var(--border-secondary); -} - -[data-theme="light"] .member-card .member-hostname { - color: var(--text-primary) !important; - font-weight: 600; -} - -[data-theme="light"] .member-card .member-ip { - color: var(--text-tertiary) !important; - font-weight: 500; -} - -[data-theme="light"] .member-card .latency-label { - color: var(--text-tertiary) !important; - font-weight: 500; -} - -[data-theme="light"] .member-card .latency-value { - color: var(--text-primary) !important; - font-weight: 600; - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); -} - -[data-theme="light"] .member-card .detail-label { - color: var(--text-tertiary) !important; - font-weight: 500; -} - -[data-theme="light"] .member-card .detail-value { - color: var(--text-primary) !important; - font-weight: 500; -} - -[data-theme="light"] .member-card .endpoint-item { - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - color: var(--text-secondary) !important; -} - -[data-theme="light"] .member-card .endpoint-item:hover { - background: var(--bg-hover); - border-color: var(--border-secondary); -} - -[data-theme="light"] .member-card .loading-details { - color: var(--text-tertiary) !important; -} - -/* Tab Text Improvements */ -[data-theme="light"] .tab-button { - color: var(--text-secondary) !important; - background: transparent; - border: 1px solid transparent; -} - -[data-theme="light"] .tab-button:hover { - color: var(--text-primary) !important; - background: var(--bg-hover); - border-color: var(--border-primary); -} - -[data-theme="light"] .tab-button.active { - color: var(--text-primary) !important; - background: var(--bg-tertiary); - border-color: var(--border-secondary); -} - -[data-theme="light"] .tab-content { - background: var(--bg-tertiary); - border: 1px solid var(--border-secondary); - color: var(--text-primary) !important; -} - -[data-theme="light"] .tab-content p, -[data-theme="light"] .tab-content h1, -[data-theme="light"] .tab-content h2, -[data-theme="light"] .tab-content h3, -[data-theme="light"] .tab-content h4, -[data-theme="light"] .tab-content h5, -[data-theme="light"] .tab-content h6 { - color: var(--text-primary) !important; -} - -[data-theme="light"] .tab-content .task-name { - color: var(--text-primary) !important; - font-weight: 600; -} - -[data-theme="light"] .tab-content .task-status { - color: var(--text-primary) !important; - font-weight: 500; -} - -[data-theme="light"] .tab-content .task-interval, -[data-theme="light"] .tab-content .task-enabled { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - color: var(--text-secondary) !important; -} - -/* Tabs Container Improvements */ -[data-theme="light"] .tabs-container { - background: var(--bg-tertiary); - border: 1px solid var(--border-secondary); -} - -[data-theme="light"] .tabs-header { - background: var(--bg-secondary); - border: 1px solid var(--border-secondary); -} - -/* Capability Text Improvements */ -[data-theme="light"] .capability-item { - background: var(--bg-secondary); - border: 1px solid var(--border-secondary); -} - -[data-theme="light"] .capability-item .cap-method { - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - color: var(--text-primary) !important; -} - -[data-theme="light"] .capability-item .cap-uri { - color: var(--text-secondary) !important; -} - -[data-theme="light"] .capability-item .param-name { - color: var(--text-tertiary) !important; -} - -[data-theme="light"] .capability-item .param-input { - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - color: var(--text-primary) !important; -} - -[data-theme="light"] .capability-item .capability-result { - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); -} - -[data-theme="light"] .capability-item .cap-call-success { - background: rgba(22, 163, 74, 0.1); - border: 1px solid rgba(22, 163, 74, 0.2); - color: #16a34a !important; -} - -[data-theme="light"] .capability-item .cap-call-error { - background: rgba(220, 38, 38, 0.1); - border: 1px solid rgba(220, 38, 38, 0.2); - color: #dc2626 !important; -} - -[data-theme="light"] .capability-item .cap-result-pre { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - color: var(--text-primary) !important; -} - -/* Label Chips Improvements */ +/* Label Chips for Nord Frost Theme */ [data-theme="light"] .label-chip { - background: rgba(37, 99, 235, 0.1); - border: 1px solid rgba(37, 99, 235, 0.3); - color: #2563eb !important; + background: rgba(129, 161, 193, 0.2); + border: 1px solid rgba(129, 161, 193, 0.4); + color: #81a1c1 !important; } [data-theme="light"] .label-chip.removable { - background: rgba(37, 99, 235, 0.15); - border: 1px solid rgba(37, 99, 235, 0.4); + background: rgba(129, 161, 193, 0.25); + border: 1px solid rgba(129, 161, 193, 0.5); } [data-theme="light"] .label-chip .chip-remove { @@ -474,423 +413,69 @@ } [data-theme="light"] .label-chip .chip-remove:hover { - background: rgba(37, 99, 235, 0.2); + background: rgba(129, 161, 193, 0.3); } -/* Dark theme improvements for better contrast */ -[data-theme="dark"] .member-card .member-hostname { - color: #ffffff !important; +/* Form Elements for Nord Frost 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); + color: var(--text-primary); + backdrop-filter: blur(10px); } -[data-theme="dark"] .member-card .member-ip { - color: rgba(255, 255, 255, 0.8) !important; +[data-theme="light"] .param-input:focus, +[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); } -[data-theme="dark"] .member-card .latency-label { - color: rgba(255, 255, 255, 0.7) !important; +[data-theme="light"] .param-input option, +[data-theme="light"] .node-select option, +[data-theme="light"] .label-select option { + background: rgba(255, 255, 255, 0.9); + color: var(--text-primary); } -[data-theme="dark"] .member-card .latency-value { - color: #ecf0f1 !important; -} - -[data-theme="dark"] .tab-button { - color: rgba(255, 255, 255, 0.8) !important; -} - -[data-theme="dark"] .tab-button:hover { - color: rgba(255, 255, 255, 0.95) !important; -} - -[data-theme="dark"] .tab-button.active { - color: #ffffff !important; -} - -[data-theme="dark"] .tab-content { - color: #ecf0f1 !important; -} - -[data-theme="dark"] .tab-content p, -[data-theme="dark"] .tab-content h1, -[data-theme="dark"] .tab-content h2, -[data-theme="dark"] .tab-content h3, -[data-theme="dark"] .tab-content h4, -[data-theme="dark"] .tab-content h5, -[data-theme="dark"] .tab-content h6 { - color: #ecf0f1 !important; -} - -/* Fix hover effects that make text disappear */ -[data-theme="light"] .member-card:hover .member-hostname, -[data-theme="light"] .member-card:hover .member-ip, -[data-theme="light"] .member-card:hover .latency-label, -[data-theme="light"] .member-card:hover .latency-value, -[data-theme="light"] .member-card:hover .detail-label, -[data-theme="light"] .member-card:hover .detail-value { - color: var(--text-primary) !important; -} - -[data-theme="light"] .member-card:hover .endpoint-item { - color: var(--text-secondary) !important; -} - -[data-theme="light"] .member-card:hover .loading-details { - color: var(--text-tertiary) !important; -} - -/* Fix tab hover effects */ -[data-theme="light"] .tab-button:hover { - color: var(--text-primary) !important; -} - -[data-theme="light"] .tab-content:hover p, -[data-theme="light"] .tab-content:hover h1, -[data-theme="light"] .tab-content:hover h2, -[data-theme="light"] .tab-content:hover h3, -[data-theme="light"] .tab-content:hover h4, -[data-theme="light"] .tab-content:hover h5, -[data-theme="light"] .tab-content:hover h6 { - color: var(--text-primary) !important; -} - -[data-theme="light"] .tab-content:hover .task-name, -[data-theme="light"] .tab-content:hover .task-status { - color: var(--text-primary) !important; -} - -[data-theme="light"] .tab-content:hover .task-interval, -[data-theme="light"] .tab-content:hover .task-enabled { - color: var(--text-secondary) !important; -} - -/* Fix capability hover effects */ -[data-theme="light"] .capability-item:hover .cap-method, -[data-theme="light"] .capability-item:hover .cap-uri, -[data-theme="light"] .capability-item:hover .param-name { - color: var(--text-primary) !important; -} - -[data-theme="light"] .capability-item:hover .param-input { - color: var(--text-primary) !important; -} - -[data-theme="light"] .capability-item:hover .capability-result { - color: var(--text-primary) !important; -} - -[data-theme="light"] .capability-item:hover .cap-call-success { - color: #16a34a !important; -} - -[data-theme="light"] .capability-item:hover .cap-call-error { - color: #dc2626 !important; -} - -[data-theme="light"] .capability-item:hover .cap-result-pre { - color: var(--text-primary) !important; -} - -/* Fix label chip hover effects */ -[data-theme="light"] .label-chip:hover { - color: #2563eb !important; -} - -[data-theme="light"] .label-chip:hover .chip-remove { - color: var(--text-primary) !important; -} - -/* Fix navigation hover effects */ -[data-theme="light"] .nav-tab:hover { - color: var(--text-primary) !important; -} - -[data-theme="light"] .nav-tab.active:hover { - color: var(--text-primary) !important; -} - -/* Fix primary node info hover effects */ -[data-theme="light"] .primary-node-info:hover .primary-node-label, -[data-theme="light"] .primary-node-info:hover .primary-node-ip { - color: var(--text-primary) !important; -} - -/* Fix cluster status hover effects */ -[data-theme="light"] .cluster-status:hover { - color: #059669 !important; -} - -/* Fix refresh button hover effects */ -[data-theme="light"] .refresh-btn:hover { - color: var(--text-primary) !important; +/* Buttons for Nord Frost 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); + color: var(--text-primary); + backdrop-filter: blur(15px); } +[data-theme="light"] .refresh-btn:hover, [data-theme="light"] .upload-btn:hover, [data-theme="light"] .upload-btn-compact:hover, -[data-theme="light"] .deploy-btn:hover { - color: var(--text-primary) !important; +[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); + color: var(--text-primary); } -/* Fix summary hover effects */ -[data-theme="light"] .tasks-summary:hover .summary-title, -[data-theme="light"] .tasks-summary:hover .summary-subtitle { - color: var(--text-primary) !important; -} - -[data-theme="light"] .summary-stat:hover .summary-stat-value, -[data-theme="light"] .summary-stat:hover .summary-stat-label { - color: var(--text-primary) !important; -} - -/* Fix progress and result item hover effects */ -[data-theme="light"] .progress-item:hover .node-name, -[data-theme="light"] .progress-item:hover .node-ip, -[data-theme="light"] .progress-item:hover .progress-time, -[data-theme="light"] .result-item:hover .node-name, -[data-theme="light"] .result-item:hover .node-ip, -[data-theme="light"] .result-item:hover .result-details { - color: var(--text-primary) !important; -} - -[data-theme="light"] .progress-item:hover .progress-status, -[data-theme="light"] .result-item:hover .result-status { - color: var(--text-primary) !important; -} - -/* Fix form element hover effects */ -[data-theme="light"] .param-input:hover, -[data-theme="light"] .node-select:hover, -[data-theme="light"] .label-select:hover { - color: var(--text-primary) !important; -} - -[data-theme="light"] .file-info:hover { - color: var(--text-primary) !important; -} - -/* Fix action button hover effects */ -[data-theme="light"] .clear-btn:hover, -[data-theme="light"] .refresh-btn:hover, -[data-theme="light"] .progress-refresh-btn:hover { - color: var(--text-primary) !important; -} - -/* Dark theme hover fixes */ -[data-theme="dark"] .member-card:hover .member-hostname, -[data-theme="dark"] .member-card:hover .member-ip, -[data-theme="dark"] .member-card:hover .latency-label, -[data-theme="dark"] .member-card:hover .latency-value { - color: #ffffff !important; -} - -[data-theme="dark"] .tab-button:hover { - color: rgba(255, 255, 255, 0.95) !important; -} - -[data-theme="dark"] .tab-content:hover p, -[data-theme="dark"] .tab-content:hover h1, -[data-theme="dark"] .tab-content:hover h2, -[data-theme="dark"] .tab-content:hover h3, -[data-theme="dark"] .tab-content:hover h4, -[data-theme="dark"] .tab-content:hover h5, -[data-theme="dark"] .tab-content:hover h6 { - color: #ecf0f1 !important; -} - -[data-theme="dark"] .nav-tab:hover { - color: rgba(255, 255, 255, 0.95) !important; -} - -[data-theme="dark"] .refresh-btn:hover, -[data-theme="dark"] .upload-btn:hover, -[data-theme="dark"] .deploy-btn:hover { - color: #ffffff !important; -} - -/* Fix problematic hover overlays that make text disappear */ -[data-theme="light"] .member-card::before { - background: rgba(255, 255, 255, 0.05) !important; -} - -[data-theme="light"] .member-card:hover::before { - background: rgba(255, 255, 255, 0.08) !important; -} - -[data-theme="dark"] .member-card::before { - background: rgba(0, 0, 0, 0.1) !important; -} - -[data-theme="dark"] .member-card:hover::before { - background: rgba(0, 0, 0, 0.15) !important; -} - -/* Fix progress and result item hover overlays */ -[data-theme="light"] .progress-item::before, -[data-theme="light"] .result-item::before { - background: rgba(255, 255, 255, 0.05) !important; -} - -[data-theme="light"] .progress-item:hover::before, -[data-theme="light"] .result-item:hover::before { - background: rgba(255, 255, 255, 0.08) !important; -} - -[data-theme="dark"] .progress-item::before, -[data-theme="dark"] .result-item::before { - background: rgba(0, 0, 0, 0.1) !important; -} - -[data-theme="dark"] .progress-item:hover::before, -[data-theme="dark"] .result-item:hover::before { - background: rgba(0, 0, 0, 0.15) !important; -} - -/* Ensure text is always visible on hover by using higher z-index */ -[data-theme="light"] .member-card:hover .member-hostname, -[data-theme="light"] .member-card:hover .member-ip, -[data-theme="light"] .member-card:hover .latency-label, -[data-theme="light"] .member-card:hover .latency-value, -[data-theme="light"] .member-card:hover .detail-label, -[data-theme="light"] .member-card:hover .detail-value { - position: relative; - z-index: 10; - color: var(--text-primary) !important; -} - -[data-theme="dark"] .member-card:hover .member-hostname, -[data-theme="dark"] .member-card:hover .member-ip, -[data-theme="dark"] .member-card:hover .latency-label, -[data-theme="dark"] .member-card:hover .latency-value { - position: relative; - z-index: 10; - color: #ffffff !important; -} - -/* Fix nav tab hover overlay */ -[data-theme="light"] .nav-tab::before { - background: rgba(255, 255, 255, 0.05) !important; -} - -[data-theme="light"] .nav-tab:hover::before { - background: rgba(255, 255, 255, 0.08) !important; -} - -[data-theme="dark"] .nav-tab::before { - background: rgba(255, 255, 255, 0.05) !important; -} - -[data-theme="dark"] .nav-tab:hover::before { - background: rgba(255, 255, 255, 0.08) !important; -} - -/* Ensure nav tab text is always visible */ -[data-theme="light"] .nav-tab:hover { - position: relative; - z-index: 10; - color: var(--text-primary) !important; -} - -[data-theme="dark"] .nav-tab:hover { - position: relative; - z-index: 10; - color: rgba(255, 255, 255, 0.95) !important; -} - -/* Fix any other problematic hover overlays */ -[data-theme="light"] .tasks-summary::before { - background: rgba(255, 255, 255, 0.02) !important; -} - -[data-theme="light"] .tasks-summary:hover::before { - background: rgba(255, 255, 255, 0.05) !important; -} - -[data-theme="dark"] .tasks-summary::before { - background: rgba(255, 255, 255, 0.02) !important; -} - -[data-theme="dark"] .tasks-summary:hover::before { - background: rgba(255, 255, 255, 0.05) !important; -} - -/* Ensure summary text is always visible */ -[data-theme="light"] .tasks-summary:hover .summary-title, -[data-theme="light"] .tasks-summary:hover .summary-subtitle { - position: relative; - z-index: 10; - color: var(--text-primary) !important; -} - -[data-theme="dark"] .tasks-summary:hover .summary-title, -[data-theme="dark"] .tasks-summary:hover .summary-subtitle { - position: relative; - z-index: 10; - color: #ecf0f1 !important; -} - -/* Additional fixes for text visibility on hover */ -[data-theme="light"] .progress-item:hover .progress-node-info, -[data-theme="light"] .progress-item:hover .progress-status, -[data-theme="light"] .progress-item:hover .progress-time, -[data-theme="light"] .result-item:hover .result-node-info, -[data-theme="light"] .result-item:hover .result-status, -[data-theme="light"] .result-item:hover .result-details { - position: relative; - z-index: 10; -} - -[data-theme="dark"] .progress-item:hover .progress-node-info, -[data-theme="dark"] .progress-item:hover .progress-status, -[data-theme="dark"] .progress-item:hover .progress-time, -[data-theme="dark"] .result-item:hover .result-node-info, -[data-theme="dark"] .result-item:hover .result-status, -[data-theme="dark"] .result-item:hover .result-details { - position: relative; - z-index: 10; -} - -/* Fix any remaining text visibility issues */ -[data-theme="light"] *:hover { - /* Ensure all text elements maintain visibility on hover */ -} - -[data-theme="light"] .member-card:hover .member-info, -[data-theme="light"] .member-card:hover .member-header, -[data-theme="light"] .member-card:hover .member-row-1, -[data-theme="light"] .member-card:hover .member-row-2 { - position: relative; - z-index: 10; -} - -[data-theme="dark"] .member-card:hover .member-info, -[data-theme="dark"] .member-card:hover .member-header, -[data-theme="dark"] .member-card:hover .member-row-1, -[data-theme="dark"] .member-card:hover .member-row-2 { - position: relative; - z-index: 10; -} - -/* Fix tab content text visibility */ -[data-theme="light"] .tab-content:hover .task-item, -[data-theme="light"] .tab-content:hover .capability-item { - position: relative; - z-index: 10; -} - -[data-theme="dark"] .tab-content:hover .task-item, -[data-theme="dark"] .tab-content:hover .capability-item { - position: relative; - z-index: 10; -} - -/* Member Overlay Header Theme Fixes */ +/* Member Overlay Styling with Nord Frost */ [data-theme="light"] .member-overlay-content { - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%); - border: 1px solid var(--border-secondary); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 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); } [data-theme="light"] .member-overlay-header { - border-bottom: 1px solid var(--border-secondary); + border-bottom: 1px solid rgba(143, 188, 187, 0.2); } [data-theme="light"] .member-overlay-header .member-info .member-hostname { @@ -912,9 +497,9 @@ } [data-theme="light"] .member-overlay-header .member-info .member-labels .label-chip { - background: rgba(37, 99, 235, 0.1); - border: 1px solid rgba(37, 99, 235, 0.3); - color: #2563eb !important; + background: rgba(129, 161, 193, 0.2); + border: 1px solid rgba(129, 161, 193, 0.4); + color: #81a1c1 !important; } [data-theme="light"] .member-overlay-subtitle { @@ -926,11 +511,10 @@ } [data-theme="light"] .member-overlay-close:hover { - background: var(--bg-hover); + background: rgba(255, 255, 255, 0.6); color: var(--text-primary) !important; } -/* Member Overlay Body Theme Fixes */ [data-theme="light"] .member-overlay-body .member-card { background: transparent; border: none; @@ -938,18 +522,22 @@ } [data-theme="light"] .member-overlay-body .member-card .member-header { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); + background: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; + box-shadow: 0 2px 8px rgba(143, 188, 187, 0.1); } [data-theme="light"] .member-overlay-body .member-card .member-details { - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); + background: rgba(255, 255, 255, 0.4); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 1rem; + box-shadow: 0 2px 8px rgba(143, 188, 187, 0.08); } [data-theme="light"] .member-overlay-body .detail-section-title { @@ -974,20 +562,21 @@ } [data-theme="light"] .member-overlay-body .resource-chip { - background: rgba(37, 99, 235, 0.1); - color: #2563eb !important; - border: 1px solid rgba(37, 99, 235, 0.3); + background: rgba(129, 161, 193, 0.2); + color: #81a1c1 !important; + border: 1px solid rgba(129, 161, 193, 0.4); } [data-theme="light"] .member-overlay-body .api-chip { - background: rgba(16, 185, 129, 0.1); - color: #10b981 !important; - border: 1px solid rgba(16, 185, 129, 0.3); + background: rgba(163, 190, 140, 0.2); + color: #a3be8c !important; + border: 1px solid rgba(163, 190, 140, 0.4); } /* Dark theme overlay improvements */ [data-theme="dark"] .member-overlay-content { background: linear-gradient(135deg, #1c2a38 0%, #283746 50%, #1a252f 100%); + backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); } @@ -1035,12 +624,16 @@ [data-theme="dark"] .member-overlay-body .member-card .member-header { background: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } [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 { @@ -1076,31 +669,22 @@ border: 1px solid rgba(16, 185, 129, 0.3); } -/* Mobile responsive overlay fixes */ +/* Mobile Responsive Adjustments */ @media (max-width: 768px) { - [data-theme="light"] .member-overlay-content { - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + [data-theme="light"] .main-navigation { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(30px); } - [data-theme="dark"] .member-overlay-content { - background: linear-gradient(135deg, #1c2a38 0%, #283746 100%); + [data-theme="light"] .view-content { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(25px); } } @media (max-width: 480px) { - [data-theme="light"] .member-overlay-header .member-info .member-hostname { - font-size: 1.2rem; - } - - [data-theme="light"] .member-overlay-header .member-info .member-ip { - font-size: 0.9rem; - } - - [data-theme="dark"] .member-overlay-header .member-info .member-hostname { - font-size: 1.2rem; - } - - [data-theme="dark"] .member-overlay-header .member-info .member-ip { - font-size: 0.9rem; + [data-theme="light"] .main-navigation { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(35px); } }