1
0
forked from noxious/client

Updated Tailwind config and styling

This commit is contained in:
2024-07-11 19:16:03 +02:00
parent 2cda650eca
commit 8a4b57daef
12 changed files with 38 additions and 39 deletions

View File

@ -19,7 +19,7 @@
<div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
</div>
<div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50 bg-opacity-50 bg-no-repeat shadow-character" v-if="characters.length < 4">
<div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
<button class="h-full w-full py-[40px] flex flex-col justify-between" @click="isModalOpen = true">
<div class="filler"></div>
<img class="w-[100px] h-[100px] m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
@ -33,7 +33,7 @@
<div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
<button
class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
:disabled="!selected_character"
@click="select_character()"
>

View File

@ -7,12 +7,12 @@
<form @submit.prevent="loginFunc">
<div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
<div class="w-full grid gap-[15px]">
<div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
<div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
</div>
<div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
<div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
</div>
</div>