From 4ae9655a3fde683f641d051d21e64f85be6357aa Mon Sep 17 00:00:00 2001
From: fin444 <fin444@users.noreply.github.com>
Date: Tue, 12 Jul 2022 14:09:09 -0700
Subject: [PATCH] final style touches

---
 css/sq2bs.css | 36 ------------------------------------
 js/atree.js   |  9 +++++++--
 2 files changed, 7 insertions(+), 38 deletions(-)

diff --git a/css/sq2bs.css b/css/sq2bs.css
index 7845a26..291a216 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -449,36 +449,6 @@ a:hover {
     border-color: #fff;
 }
 
-/* atree connector rotations */
-.rotate-90 {
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.rotate-180 {
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.rotate-270 {
-    -webkit-transform: rotate(270deg);
-    -moz-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
-    transform: rotate(270deg);
-}
-
-.rotate-flip {
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-}
-
 
 
 .hide-scroll {
@@ -489,12 +459,6 @@ a:hover {
     display: none;  /* Safari and Chrome */
 }
 
-.atree-circle {
-    border-radius:50%;
-    -moz-border-radius:50%;
-    -webkit-border-radius:50%;
-}
-
 .hppeng{
     color: #20c2b6;
 }
diff --git a/js/atree.js b/js/atree.js
index c53a7b2..d584f19 100644
--- a/js/atree.js
+++ b/js/atree.js
@@ -665,6 +665,12 @@ class AbilityTreeEnsureNodesNode extends ComputeNode {
  */
 function render_AT(UI_elem, list_elem, tree) {
     console.log("constructing ability tree UI");
+
+    // increase padding, since images are larger than the space provided
+    UI_elem.style.paddingRight = "calc(var(--bs-gutter-x) * 1)";
+    UI_elem.style.paddingLeft = "calc(var(--bs-gutter-x) * 1)";
+    UI_elem.style.paddingTop = "calc(var(--bs-gutter-x) * .5)";
+
     // add in the "Active" title to atree
     let active_row = document.createElement("div");
     active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center");
@@ -799,7 +805,6 @@ function render_AT(UI_elem, list_elem, tree) {
         node_img.src = '../media/atree/'+icon+'.png';
         node_img.style = "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1;";
         node_elem.appendChild(node_img);
-        node_elem.classList.add("atree-circle");
 
         // create hitbox
         // this is necessary since images exceed the size of their square, but should only be interactible within that square
@@ -857,7 +862,7 @@ function render_AT(UI_elem, list_elem, tree) {
             let tooltip = this.parentElement.children[this.parentElement.children.length - 1];
             tooltip.style.top = "50px";
             tooltip.style.left = (this.parentElement.parentElement.parentElement.getBoundingClientRect().left - this.getBoundingClientRect().left) + "px";
-            tooltip.style.width = UI_elem.getBoundingClientRect().width * .95 + "px";
+            tooltip.style.width = UI_elem.getBoundingClientRect().width * .9 + "px";
             tooltip.style.display = "block";
         });