noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Tailwind config and styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-11 19:16:03 +02:00
parent 2cda650eca
commit 8a4b57daef
12 changed files with 38 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/gui/Chat.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="chat-wrapper w-full h-full flex justify-start items-center">
<input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
<input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white/85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
</div>
</template>

4
src/components/gui/Hud.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
<div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
<div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%]" draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud-bg absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
@ -24,7 +24,7 @@
<!-- TODO: Replace socket.character with other (selected) player's -->
<div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
<div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
<div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud-bg absolute top-0 right-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>

8
src/components/gui/Menu.vue
View File

@ -5,7 +5,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
<a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
</a>
</li>
@ -14,7 +14,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
<a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
</a>
</li>
@ -23,7 +23,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
<a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
</a>
</li>
@ -32,7 +32,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
<a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
</a>
</li>