Global margin for modals, cleaned up gm-panel styling

src/components/utilities/AssetManager/AssetManager.vue

@@ -70,20 +70,24 @@
 <style lang="scss">
 @import '@/assets/scss/main';
 
+.container {
+  &.gm-panel {
+    height: calc(100% - 20px);
+    margin: 0!important;
+  }
+}
 .assets-container {
   display: flex;
   height: 100%;
   width: 100%;
   
   .asset-categories {
-    width: calc(15% - 15px);
+    width: 15%;
-    padding-right: 15px;
     display: flex;
   }
 
   .assets {
-    width: calc(25% - 30px);
+    width: 25%;
-    padding: 0 15px;
     display: none;
     &.active {
       display: flex;
@@ -91,8 +95,7 @@
   }
   .asset-info {
     display: flex;
-    width: calc(60% - 15px);
+    width: 60%;
-    padding-left: 15px;
     &::after {
       display: none;
     }
@@ -100,21 +103,24 @@
       text-align: center;
       img {
         height: 200px;
-        padding-right: 15px;
+        padding-right: 10px;
-        margin: 30px 0;
+        margin: 20px 0;
       }
     }
     .modal-form {
       &.asset-manager {
+        margin: 10px;
+        width: calc(100% - 20px);
+        height: 100%;
         .form-fields {
           display: flex;
-          gap: 15px;
+          gap: 10px;
           flex-wrap: wrap;
 
           .form-field {
-            width: calc(50% - 15px);
+            width: calc(50% - 5px);
             &.name {
-              width: calc(100% - 15px);
+              width: 100%;
             }
           }
           .submit {
@@ -126,7 +132,6 @@
   }
 
   .asset-categories, .assets, .asset-info {
-    gap: 30px;
     flex-direction: column;
     position: relative;
     &::after {
@@ -134,34 +139,27 @@
       position: absolute;
       right: 0;
       width: 1px;
-      height: calc(100% + 30px);
+      height: calc(100% + 20px);
-      top: -15px;
+      top: 0;
       background-color: $dark-cyan;
     }
     .category, .asset, .image-container {
       position: relative;
+      padding: 10px;
       &::after {
         content: '';
         position: absolute;
-        left: -15px;
+        left: 0;
-        bottom: -15px;
+        bottom: 0;
-        width: calc(100% + 30px);
+        width: 100%;
         height: 1px;
         background-color: $dark-cyan;
       }
       &.selected {
-        &::before {
-          content: '';
-          position: absolute;
-          width: calc(100% + 30px);
-          height: calc(100% + 30px);
-          left: -15px;
-          top: -15px;
         background-color: rgba($cyan, 0.8);
-          z-index: -1;
-        }
       }
     }
   }
+  
 }
 </style>

src/components/utilities/GmPanel.vue

@@ -9,9 +9,7 @@
             </div>
         </template>
         <template #modalBody>
-            
+            <div class="container gm-panel">
-
-            <div class="panel-body">
                 <AssetManager v-if="toggle == 'asset-manager'" />
             </div>
         </template>

src/components/utilities/GmTools.vue

@@ -25,5 +25,7 @@ const zoneEditorStore = useZoneEditorStore()
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
+  margin: 15px;
+  height: calc(100% - 30px);
 }
 </style>

src/components/utilities/Modal.vue

@@ -246,9 +246,12 @@ function handleResize() {
   .modal-body {
     max-height: 80vh;
     overflow: auto;
-    padding: 15px;
     flex-grow: 1;
 
+    .container {
+      margin: 15px;
+    }
+
     .resize {
       filter: invert(60%);
       position: absolute;

src/components/utilities/Notifications.vue

@@ -5,7 +5,7 @@
         <h3 class="modal-title">{{ notification.title }}</h3>
       </template>
       <template #modalBody v-if="notification.message">
-        <p>{{ notification.message }}</p>
+        <p class="modal-notif">{{ notification.message }}</p>
       </template>
     </Modal>
   </div>
@@ -54,3 +54,9 @@ onBeforeUnmount(() => {
   }
 })
 </script>
+
+<style lang="scss">
+  .modal-notif {
+    margin: 15px;
+  }
+</style>

src/components/utilities/zoneEditor/Decorations.vue

@@ -5,6 +5,7 @@
         <h3 class="modal-title">Decorations</h3>
       </template>
       <template #modalBody>
+        <div class="container decorations">
           <div class="buttons">
             <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
             <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
@@ -15,6 +16,7 @@
           <div class="decorations">
             <img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
           </div>
+        </div>
       </template>
     </Modal>
   </Teleport>
@@ -91,6 +93,8 @@ onMounted(async () => {
 </script>
 
 <style lang="scss">
+@import '@/assets/scss/main';
+
 .decorations {
   display: flex;
   flex-wrap: wrap;
@@ -111,6 +115,6 @@ onMounted(async () => {
 }
 
 .decorations img.selected {
-  border: 2px solid #ff0000;
+  border: 2px solid $red;
 }
 </style>

src/components/utilities/zoneEditor/Tiles.vue

@@ -5,10 +5,12 @@
         <h3 class="modal-title">Tiles</h3>
       </template>
       <template #modalBody>
+        <div class="container tiles">
           <canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
           <div class="tiles">
             <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
           </div>
+        </div>
       </template>
     </Modal>
   </Teleport>
@@ -85,6 +87,8 @@ onMounted(async () => {
 </script>
 
 <style lang="scss">
+@import '@/assets/scss/main.scss';
+
 .tiles {
   display: flex;
   flex-wrap: wrap;
@@ -100,6 +104,7 @@ onMounted(async () => {
 }
 
 .tiles img.selected {
-  border: 2px solid #ff0000;
+  border: 2px solid $red;
 }
+
 </style>

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -5,6 +5,7 @@
     </template>
 
     <template #modalBody>
+      <div class="container settings">
         <form method="post" @submit.prevent="" class="modal-form">
           <div class="form-fields">
             <div class="form-field">
@@ -27,6 +28,7 @@
             </div>
           </div>
         </form>
+      </div>
     </template>
   </Modal>
 </template>

src/screens/Characters.vue

@@ -44,6 +44,7 @@
     </template>
 
     <template #modalBody>
+      <div class="container character-form">
         <form method="post" @submit.prevent="create" class="modal-form">
           <div class="form-fields">
             <div class="form-field">
@@ -56,6 +57,7 @@
           </div>
         </form>
         <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
+      </div>
     </template>
   </Modal>
 </template>