imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Convert px to tailwind formats where possible on game screen

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-21 16:22:13 +02:00
parent 25e16870b9
commit 112bb21ccb
4 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +1,39 @@
<template>
<ul class="list-none flex gap-2.5 items-center">
<li class="menu-item group relative">
<div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<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 class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>
<div class="group-hover:block absolute -bottom-2.5 bg-white h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div>
<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 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-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/chat.png" />
</a>
</li>
<li class="menu-item group relative">
<div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<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 class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">World</p>
<div class="group-hover:block absolute -bottom-2.5 bg-white h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div>
<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 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-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/world.png" />
</a>
</li>
<li class="menu-item group relative">
<div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<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 class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Users</p>
<div class="group-hover:block absolute -bottom-2.5 bg-white h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div>
<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 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-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" />
</a>
</li>
<li class="menu-item group relative">
<div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<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 class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Inventory</p>
<div class="group-hover:block absolute -bottom-2.5 bg-white h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div>
<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 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-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
</a>
</li>
</ul>