Update

1 files changed, 84 insertions, 1 deletions

diff --git a/assets/charsheet/charsheet.css b/assets/charsheet/charsheet.css
index ca2bcf7..c8116ce 100644
--- a/assets/charsheet/charsheet.css
+++ b/assets/charsheet/charsheet.css
@@ -108,7 +108,7 @@ body {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, 1fr);
     gap: 0.5rem;
-    overflow: scroll;
+    overflow: auto;
 }
 .contents-anim-unfold {
     animation-duration: 0.5s;
@@ -142,6 +142,12 @@ body {
     margin: 0px;
     font-size: 100rem;
 }
+#login {
+    position: absolute;
+    z-index: 5;
+    color: black;
+    text-decoration: none;
+}
 #visualization {
     position: relative;
     grid-column-end: span 2;
@@ -200,3 +206,80 @@ table {
 table tr td:first-child {
     font-weight: bold;
 }
+
+#edit-mode {
+    position: absolute;
+    z-index: 5;
+}
+
+#edit-scrollable {
+    overflow: scroll;
+    width: 100vw;
+    height: 100vh;
+}
+#edit-talentarea {
+    position: relative;
+    left: 0px;
+    top: 0px;
+    width: 300vw;
+    height: 300vh;
+    background-color: white;
+    background-image: radial-gradient(lightgrey 1px, transparent 0);
+    background-size: 0.25rem 0.25rem;
+}
+.edit-talent {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    background-color: black;
+    border-radius: 2px;
+    margin-top: 8px;
+    margin-left: 8px;
+}
+.edit-talent:hover {
+    border: 4px solid lightgrey;
+    margin-top: 4px;
+    margin-left: 4px;
+}
+.edit-talent.edit-talent-selected {
+    border: 8px solid grey;
+    margin-top: 0px;
+    margin-left: 0px;
+}
+.edit-talent > img {
+    width: 64px;
+    height: 64px;
+    image-rendering: pixelated;
+}
+#edit-contents {
+    position: fixed;
+    left: 10vw;
+    top: 10vh;
+    width: 80vw;
+    height: 80vh;
+    display: grid;
+    grid-auto-columns: 0;
+    grid-auto-flow: row;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 2rem;
+    overflow: hidden;
+    pointer-events: none;
+}
+#edit-contents > div {
+    border: 1px solid lightgrey;
+    background-color: white;
+    opacity: 0.0;
+    transition: opacity 2s;
+    pointer-events: auto;
+}
+#edit-infobox {
+    grid-column: 1;
+    grid-row: 2;
+}
+#edit-selected-tooltip-box {
+    grid-column: 2;
+    grid-row: 2;
+    transition: opacity 0.5s !important;
+    overflow: auto;
+}