diff --git a/public/script.js b/public/script.js index 9dc09a9..d0a26fe 100644 --- a/public/script.js +++ b/public/script.js @@ -424,7 +424,11 @@ function displayClusterMembers(members, expandedCards = new Map()) { ${member.latency ? member.latency + 'ms' : 'N/A'} -
▶️
+
+ + + +
Loading detailed information...
diff --git a/public/styles.css b/public/styles.css index a8daa91..e91ac37 100644 --- a/public/styles.css +++ b/public/styles.css @@ -150,8 +150,23 @@ p { transform: scale(1.02); } +.expand-icon:hover { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.9); + border-color: rgba(255, 255, 255, 0.2); +} + +.expand-icon:hover svg { +} + .member-card.expanded .expand-icon { - transform: rotate(90deg); + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.25); + color: rgba(255, 255, 255, 0.9); +} + +.member-card.expanded .expand-icon svg { + transform: rotate(180deg); } .member-header { @@ -166,9 +181,25 @@ p { } .expand-icon { - font-size: 1.2rem; - opacity: 0.7; - transition: transform 0.3s ease; + color: rgba(255, 255, 255, 0.7); + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + margin-left: auto; + padding: 0.25rem; + border-radius: 8px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + justify-content: center; +} + +.expand-icon svg { + width: 20px; + height: 20px; + stroke: currentColor; + stroke-width: 2; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .member-details {