#295 + #296 - Changed login boxes and char select styling

src/assets/scss/main.scss

@@ -145,10 +145,8 @@ button {
   }
 }
 
-.character {
+.character.active {
-  &.active {
+  @apply bg-gray bg-none
-    @apply pr-px border-r-0;
-  }
 }
 
 .hair-deselect:has(:checked) {

src/components/login/LoginForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="submit" class="relative px-6 py-11">
+  <form @submit.prevent="submit" class="relative px-6 py-[70px]">
     <div class="flex flex-col gap-5 p-2 mb-8 relative">
       <div class="w-full grid gap-3 relative">
         <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />

src/components/login/RegisterForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="submit" class="relative px-6 py-11">
+  <form @submit.prevent="submit" class="relative px-6 py-16">
     <div class="flex flex-col gap-5 p-2 mb-8 relative">
       <div class="w-full grid gap-3 relative">
         <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />

src/components/screens/Characters.vue

@@ -13,14 +13,14 @@
           <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] default-border rounded-md rounded-tl-none bg-gray">
+        <div class="flex w-full max-lg:flex-col lg:h-[400px] default-border rounded-md 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="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-t-md lg:rounded-l-md relative">
-            <div class="absolute right-full -top-px flex gap-1 flex-col">
+            <div class="absolute right-[calc(100%_+_16px)] -top-px flex gap-2 flex-col">
-              <div v-for="character in characters" :key="character.id" 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 }">
+              <div v-for="character in characters" :key="character.id" class="character relative rounded default-border w-12 h-12 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/placeholders/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 left-1/2 -translate-y-1/2 -translate-x-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 default-border 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 default-border w-12 h-12 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>