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

feat: highlight selected node

Browse Source
This commit is contained in:
0x1d
2025-09-16 14:44:55 +02:00
parent 27f93959ff
commit 13f771837b
4 changed files with 102 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/styles/main.css
View File

@@ -3033,6 +3033,37 @@ p {
animation: highlight-pulse 2s ease-in-out;
}
/* Selected member card styling */
.member-card.selected {
border-color: #3b82f6 !important;
border-width: 2px !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 8px 25px rgba(0, 0, 0, 0.2) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, var(--bg-tertiary) 100%) !important;
z-index: 10 !important;
}
.member-card.selected::before {
opacity: 0.8 !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
}
.member-card.selected .member-header {
background: rgba(59, 130, 246, 0.05) !important;
}
.member-card.selected .member-status {
filter: brightness(1.2) !important;
}
.member-card.selected .member-hostname {
color: #3b82f6 !important;
font-weight: 600 !important;
}
.member-card.selected .member-ip {
color: #60a5fa !important;
}
@keyframes highlight-pulse {
0%, 100% {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

27
public/styles/theme.css
View File

@@ -236,6 +236,33 @@
display: none;
}
/* Selected member card styling for light theme */
[data-theme="light"] .member-card.selected {
border-color: #3b82f6 !important;
border-width: 2px !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 8px 25px rgba(148, 163, 184, 0.15) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0.15) 100%) !important;
}
[data-theme="light"] .member-card.selected::before {
display: block !important;
opacity: 0.6 !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%) !important;
}
[data-theme="light"] .member-card.selected .member-header {
background: rgba(59, 130, 246, 0.03) !important;
}
[data-theme="light"] .member-card.selected .member-hostname {
color: #1d4ed8 !important;
font-weight: 600 !important;
}
[data-theme="light"] .member-card.selected .member-ip {
color: #3b82f6 !important;
}
[data-theme="light"] .tabs-container {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);