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);
-    padding-right: 15px;
+    width: 15%;
     display: flex;
   }
 
   .assets {
-    width: calc(25% - 30px);
-    padding: 0 15px;
+    width: 25%;
     display: none;
     &.active {
       display: flex;
@@ -91,8 +95,7 @@
   }
   .asset-info {
     display: flex;
-    width: calc(60% - 15px);
-    padding-left: 15px;
+    width: 60%;
     &::after {
       display: none;
     }
@@ -100,21 +103,24 @@
       text-align: center;
       img {
         height: 200px;
-        padding-right: 15px;
-        margin: 30px 0;
+        padding-right: 10px;
+        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);
-      top: -15px;
+      height: calc(100% + 20px);
+      top: 0;
       background-color: $dark-cyan;
     }
     .category, .asset, .image-container {
       position: relative;
+      padding: 10px;
       &::after {
         content: '';
         position: absolute;
-        left: -15px;
-        bottom: -15px;
-        width: calc(100% + 30px);
+        left: 0;
+        bottom: 0;
+        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;
-        }
+        background-color: rgba($cyan, 0.8);
       }
     }
   }
+  
 }
 </style>

src/components/utilities/GmPanel.vue

@@ -9,9 +9,7 @@
             </div>
         </template>
         <template #modalBody>
-            
-
-            <div class="panel-body">
+            <div class="container gm-panel">
                 <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,15 +5,17 @@
         <h3 class="modal-title">Decorations</h3>
       </template>
       <template #modalBody>
-        <div class="buttons">
-          <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
-          <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
-          <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
-        </div>
-        <hr>
-        <canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
-        <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 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>
+            <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
+          </div>
+          <hr>
+          <canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
+          <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>
@@ -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,9 +5,11 @@
         <h3 class="modal-title">Tiles</h3>
       </template>
       <template #modalBody>
-        <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 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>
@@ -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>
+
+</style>

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -5,28 +5,30 @@
     </template>
 
     <template #modalBody>
-      <form method="post" @submit.prevent="" class="modal-form">
-        <div class="form-fields">
-          <div class="form-field">
-            <label for="name">Name</label>
-            <input class="input-cyan" v-model="name" name="name" id="name" />
-          </div>
-          <div class="form-field two-col">
-            <div class="field">
-              <label for="name">Width</label>
-              <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
+      <div class="container settings">
+        <form method="post" @submit.prevent="" class="modal-form">
+          <div class="form-fields">
+            <div class="form-field">
+              <label for="name">Name</label>
+              <input class="input-cyan" v-model="name" name="name" id="name" />
             </div>
-            <div class="field">
-              <label for="name">Height</label>
-              <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
+            <div class="form-field two-col">
+              <div class="field">
+                <label for="name">Width</label>
+                <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
+              </div>
+              <div class="field">
+                <label for="name">Height</label>
+                <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
+              </div>
+            </div>
+            <div class="form-field">
+              <label for="name">PVP enabled</label>
+              <input class="input-cyan" name="name" id="name" />
             </div>
           </div>
-          <div class="form-field">
-            <label for="name">PVP enabled</label>
-            <input class="input-cyan" name="name" id="name" />
-          </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </template>
   </Modal>
 </template>

src/screens/Characters.vue

@@ -44,18 +44,20 @@
     </template>
 
     <template #modalBody>
-      <form method="post" @submit.prevent="create" class="modal-form">
-        <div class="form-fields">
-          <div class="form-field">
-            <label for="name">Name</label>
-            <input class="input-cyan" v-model="name" name="name" id="name" />
+      <div class="container character-form">
+        <form method="post" @submit.prevent="create" class="modal-form">
+          <div class="form-fields">
+            <div class="form-field">
+              <label for="name">Name</label>
+              <input class="input-cyan" v-model="name" name="name" id="name" />
+            </div>
           </div>
-        </div>
-        <div class="submit">
-          <button class="btn-cyan" type="submit">CREATE</button>
-        </div>
-      </form>
-      <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
+          <div class="submit">
+            <button class="btn-cyan" type="submit">CREATE</button>
+          </div>
+        </form>
+        <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
+      </div>
     </template>
   </Modal>
 </template>