Update item with js expanded function

system/styles/scss/items.scss

@@ -49,14 +49,6 @@
                 }
             }
         }
-        .item-description {
-            flex: unset;
-            display: block;
-            height: 0;
-            overflow: hidden;
-            background: rgba(0, 0, 0, 0.05);
-            transition: height 0.25s ease-in;
-        }
         .item-properties {
             display: flex;
             flex-direction: row;
@@ -77,13 +69,6 @@
                 }
             }
         }
-        &:hover {
-            .item-description {
-                height: 5rem;
-                overflow-y: auto;
-                scrollbar-width: thin;
-            }
-        }
         p {
             font-size: 0.85rem;
             margin: 0;
@@ -261,21 +246,50 @@
             }
         }
     }
-    p.item-description {
+}
+li {
+    .item-description {
+        flex: unset;
         height: 0;
         margin: 0;
-        padding: 0.25rem;
+        padding: 0;
         font-size: 0.75rem;
         color: rgba(0, 0, 0, 0.75);
         overflow: hidden;
-        border: 1px solid $l5r5e-title;
+        background: rgba(0, 0, 0, 0.05);
+        border: 0 none;
         transition: height 0.25s ease-in;
     }
-    &:hover {
-        p.item-description {
+    div.item-description {
+        padding: 0;
+        &:hover,
+        &:active {
+            padding: 0;
+        }
+    }
+    .toggle-active {
+        height: 6rem;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        border: 1px solid $l5r5e-title;
+    }
+    p {
+        &.toggle-active {
+            padding: 0.25rem;
+        }
+    }
+    &:hover,
+    &:active {
+        .item-description {
             height: 6rem;
             overflow-y: auto;
             scrollbar-width: thin;
+            border: 1px solid $l5r5e-title;
+        }
+        p {
+            .item-description {
+                padding: 0.25rem;
+            }
         }
     }
 }

system/styles/scss/nav.scss

@@ -1,9 +1,12 @@
 // -- Nav
 nav {
     &.sheet-tabs {
+        height: 3rem;
+        line-height: 3rem;
         font-family: $font-tertiary;
         font-size: 1.25rem;
         border: 0 none;
+        border-bottom: 1px solid $l5r5e-title;
         margin-bottom: 0;
         background: $l5r5e-white;
         color: $l5r5e-black;
@@ -37,8 +40,6 @@ nav {
         }
     }
     .item.active {
-        height: 2.5rem;
-        line-height: 2rem;
         background-color: rgba(73, 12, 11, 0.85);
         color: rgba(255, 255, 255, 1);
         background-color: rgba(73, 12, 11, 0.85);

system/styles/scss/sheets.scss

@@ -321,8 +321,9 @@
                     position: absolute;
                     background: rgba(0, 0, 0, 0.5);
                     color: #fff;
+                    height: auto;
                     padding: 0.25rem;
-                    bottom: -75%;
+                    bottom: -1rem;
                     right: 0;
                     --notchSize: 0.5rem;
                     clip-path: polygon(
@@ -339,6 +340,7 @@
                 &:hover {
                     p {
                         display: block;
+                        height: auto;
                     }
                 }
             }
@@ -359,7 +361,7 @@
         background: $l5r5e-white;
         padding: 0.5rem;
         flex-wrap: wrap;
-        min-height: calc(100% - 2.25rem);
+        min-height: calc(100% - 3.25rem);
         &.tab[data-tab] {
             &.active {
                 display: flex;
@@ -384,11 +386,16 @@
                     var(--notchSize) 100%,
                     0% calc(100% - var(--notchSize))
                 );
+                i {
+                    color: $l5r5e-black;
+                    margin-right: 0.5rem;
+                }
                 label {
                     flex: 0 0 auto;
                     margin: 0 0.25rem 0.25rem;
                     padding: 0 0.5rem;
                     color: $l5r5e-label;
+                    background: $l5r5e-white;
                     border: 1px solid $l5r5e-label;
                     border-radius: 1rem;
                 }
@@ -453,6 +460,8 @@
             th {
                 &:first-child {
                     flex: calc(100% - 16rem);
+                    padding-left: 0.5rem;
+                    text-align: left;
                 }
                 &:nth-child(2),
                 &:nth-child(3) {
@@ -461,8 +470,10 @@
             }
         }
         tbody {
-            th {
+            .name {
                 flex: calc(100% - 13rem);
+                padding-left: 0.5rem;
+                text-align: left;
             }
             .xp,
             .rank {

system/styles/scss/ui.scss

@@ -119,7 +119,7 @@ button {
             &.active,
             &:hover {
                 background: $white;
-                border: 1px solid $l5r5e-border-sidebar;
+                border: 2px solid $l5r5e-border-sidebar;
                 box-shadow: 0 0 10px $l5r5e-white;
             }
         }