move legend 30px above

superstar54 · Nov 14, 2024 · 4cb32dd · 4cb32dd
1 parent 3dc12d9
commit 4cb32dd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/atoms/atomsGui.js b/src/atoms/atomsGui.js
@@ -206,6 +206,8 @@ class AtomsGUI {
     }
     const animation_div = document.createElement("div");
     animation_div.id = "animation-controls";
+    animation_div.style.backgroundColor = "transparent";
+
     animation_div.innerHTML =
       '<button id="play-pause-btn">Play</button><button id="reset-btn">Reset</button><input type="range" id="timeline" min="0" max="100" value="0"><span id="current-frame">0</span>';
     this.div.appendChild(animation_div);

diff --git a/src/atoms/plugins/AtomsLegend.js b/src/atoms/plugins/AtomsLegend.js
@@ -19,6 +19,8 @@ export default class AtomsLegend {
     this.legendContainer.style.position = "absolute";
     this.legendContainer.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
     this.legendContainer.style.padding = "10px";
+    // bottom margin to avoid overlapping with other GUI elements
+    this.legendContainer.style.marginBottom = "30px";
     this.legendContainer.style.borderRadius = "5px";
     this.legendContainer.style.zIndex = "1000";