state sync

pak/static/css/seagull.css

@@ -62,11 +62,36 @@ div#main-button-bar {
     vertical-align: middle;
 }
 
+button.main-bar {
+    width: 2.5em;
+    height: 2.5em;
+    margin: 2.5px;
+    background-color: rgba(0,0,0,0);
+    border: 1px solid black;
+    font-size: 2em;
+}
+
 div#main-log {
     display: flex;
     flex-direction: column-reverse;
 }
 
+div#harvest-button-bar {
+    display: flex;
+    flex-direction: row;
+    min-height: 125px;
+    vertical-align: middle;
+}
+
+button.harvest-button {
+    width: 2.5em;
+    height: 2.5em;
+    margin: 2.5px;
+    background-color: rgba(0,0,0,0);
+    border: 1px solid black;
+    font-size: 2em;
+}
+
 div.log-line {
     display: flex;
     flex-direction: row;
@@ -127,15 +152,6 @@ div#modal {
     padding: 0.3em
 }
 
-button.main-bar {
-    width: 2.5em;
-    height: 2.5em;
-    margin: 2.5px;
-    background-color: rgba(0,0,0,0);
-    border: 1px solid black;
-    font-size: 2em;
-}
-
 button#button-modal-close {
     position: fixed;
     top: 0;
@@ -229,4 +245,16 @@ div#charsheet-upgrade-tree {
     flex-wrap: nowrap;
     flex-direction: row;
     width: max-content;
+}
+
+div#charsheet-upgrade-details {
+    display: none;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.mermaid svg {
+    height: auto;
+    min-height: 400px;
 }