Separated CSS to make it cleaner and more maintainable. Fixed bug only 2 nodes would be displayed.

2026-01-21 20:58:48 -07:00
parent 990a683ab8
commit 41dd42bbcb
5 changed files with 257 additions and 212 deletions
@@ -0,0 +1,49 @@
+/* main dock cotainer */
+.hud-dock{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+
+    margin-top: 5px;
+    padding: 6px;
+    z-index: 999;
+
+    background-color: rgba(20, 20, 20, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    backdrop-filter: blur(4px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.hud-dot{
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    transition: transform 0.1s ease;
+    cursor: help;
+}
+
+.hud-dot:hover{
+    transform: scale(1.3);
+    border-color: white;
+}
+
+.hud-chip {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background-color: #222;
+    border: 1px solid #444; /* Default border */
+    border-radius: 8px;
+    padding: 2px 6px;
+    height: 20px; /* Equivalent to your chipHeight + padding */
+    white-space: nowrap;
+    color: #ccc;
+    font-family: Arial, sans-serif;
+    font-size: 10px;
+}