Cleaned up assets, added default border values to main.scss

src/assets/scss/main.scss

@@ -128,7 +128,7 @@ button {
     &.active,
     &.selected,
     &:hover {
-      @apply bg-gray-700 border-gray-700;
+      @apply bg-gray border-gray;
     }
   }
 
@@ -157,6 +157,10 @@ button {
   }
 }
 
+.default-border {
+  @apply border border-solid border-gray-500;
+}
+
 .text-pixel {
   @apply text-white font-ui drop-shadow-pixel-black;
 }

src/components/gameMaster/assetManager/AssetManager.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex gap-4 h-[calc(100%_-_32px)] w-[calc(100%_-_32px)] relative m-4">
-    <div class="w-2/12 flex flex-col relative overflow-auto rounded-md border border-solid border-gray-500 bg-gray-700 p-2.5">
+    <div class="w-2/12 flex flex-col relative overflow-auto rounded-md default-border bg-gray p-2.5">
       <!-- Asset Categories -->
       <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
+    <div class="p-2.5 block rounded-md default-border bg-gray">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair">
         <div class="form-field-full">
           <label for="name">Name</label>

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue

@@ -9,7 +9,7 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
+    <div class="p-2.5 block rounded-md default-border bg-gray">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
         <div class="form-field-full">
           <label for="name">Name</label>

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue

@@ -9,7 +9,7 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/item/itemDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
+    <div class="p-2.5 block rounded-md default-border bg-gray">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveItem">
         <div class="form-field-full">
           <label for="name">Name</label>

src/components/gameMaster/assetManager/partials/item/itemList.vue

@@ -9,7 +9,7 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
       <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
     </div>
     <div class="mt-5 block">

src/components/gameMaster/assetManager/partials/object/ObjectList.vue

@@ -8,7 +8,7 @@
       </svg>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full overflow-auto">
     <div class="relative flex flex-col">
-      <div class="flex flex-wrap gap-2 p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700">
+      <div class="flex flex-wrap gap-2 p-2.5 rounded-md default-border bg-gray">
         <div class="w-full flex flex-col">
           <label class="mb-1.5 font-titles" for="name">Name</label>
           <input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />

src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue

@@ -7,7 +7,7 @@
       </svg>
     </button>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/tile/TileDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
       <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
     </div>
     <div class="mt-5 block">

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -8,7 +8,7 @@
       </svg>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
         <div class="flex items-center gap-2.5">

src/components/gui/CharacterProfile.vue

@@ -22,34 +22,34 @@
           </div>
           <div class="flex justify-between">
             <div class="flex flex-col gap-0.5">
-              <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                 <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
               </div>
-              <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                 <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
               </div>
               <div class="flex gap-0.5 items-end">
-                <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                   <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
                 </div>
-                <div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                   <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
                 </div>
               </div>
             </div>
             <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
             <div class="flex flex-col items-end gap-0.5">
-              <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                 <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/helmet.svg" />
               </div>
-              <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                 <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/chestplate.svg" />
               </div>
               <div class="flex gap-0.5 items-end">
-                <div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                   <img class="absolute w-4 h-4 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/boots.svg" />
                 </div>
-                <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                   <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/legs.svg" />
                 </div>
               </div>
@@ -110,7 +110,7 @@
           </div>
         </div>
         <div class="grid grid-rows-4 grid-cols-6 gap-0.5">
-          <div v-for="n in 24" class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600"></div>
+          <div v-for="n in 24" class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600"></div>
         </div>
       </div>
     </div>

src/components/gui/Menu.vue

@@ -15,7 +15,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
-        <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/avatar/default/head.png" />
+        <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/placeholders/head.png" />
         <p class="absolute bottom-0 -right-1.5 m-0 max-w-4 font-ui z-10 text-white text-[12px] leading-[6px] drop-shadow-pixel"><span class="font-ui text-white text-[8px] ml-0.5">LVL</span> {{ characterLevel }}</p>
       </a>
     </li>

src/components/gui/Minimap.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="absolute top-4 right-4 hidden lg:block">
-    <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
+    <div class="w-40 h-40 rounded-full default-border bg-[url('/assets/ui-texture.png')] bg-no-repeat">
       <div class="w-40 h-40 rounded-full shadow-inner"></div>
     </div>
     <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">

src/components/gui/UserPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
-    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-700 border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
+    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
       <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
         <h3 class="m-0 font-medium shrink-0">Game menu</h3>
         <div class="hidden sm:flex gap-1.5 flex-wrap">

src/components/screens/Characters.vue

@@ -13,19 +13,19 @@
           <h1 class="text-white font-bold">SELECT CHARACTER TO PLAY</h1>
           <p class="m-0">Maximum of 4 characters can be created per player</p>
         </div>
-        <div class="flex w-full max-lg:flex-col lg:h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
+        <div class="flex w-full max-lg:flex-col lg:h-[400px] default-border rounded-md rounded-tl-none bg-gray">
           <div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-tr-md lg:rounded-bl-md relative">
             <div class="absolute right-full -top-px flex gap-1 flex-col">
               <div
                 v-for="character in characters"
                 :key="character.id"
-                class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500"
+                class="character relative rounded-l default-border w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500"
                 :class="{ active: selectedCharacterId == character.id }"
               >
-                <img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
+                <img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
                 <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
               </div>
-              <div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
+              <div class="character relative rounded-l default-border w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
                 <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = true">
                   <img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
                 </button>
@@ -69,7 +69,7 @@
                 <span class="text-sm">Hairstyle</span>
                 <div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
                   <div
-                    class="hair-deselect relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
+                    class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                   >
                     <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
                     <input type="radio" name="hair" :value="null" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
@@ -77,7 +77,7 @@
                   <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
                   <div
                     v-for="hair in characterHairs"
-                    class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
+                    class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                   >
                     <img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" />
                     <input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />

src/components/utilities/Modal.vue

@@ -6,7 +6,7 @@
         <div
           :class="{
             'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
-            'bg-gray-700': bgStyle !== 'textured'
+            'bg-gray': bgStyle !== 'textured'
           }"
           class="rounded-t absolute w-full h-full top-0 left-0"
         />
@@ -29,7 +29,7 @@
           :class="{
             'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
             'bg-gray-800': bgStyle === 'dark',
-            'bg-gray-700': bgStyle === 'none'
+            'bg-gray': bgStyle === 'none'
           }"
           class="rounded-b absolute w-full h-full top-0 left-0"
         />