add hover color changes, remove bg from nav

This commit is contained in:
HorizonCode 2024-01-04 16:23:01 +01:00
parent 63ef04e68d
commit 8ad3844eae

View File

@ -1,24 +1,15 @@
<script> <script>
import { import {
Navbar,
NavBrand,
NavLi,
NavUl,
NavHamburger,
Avatar, Avatar,
Dropdown, Dropdown,
DropdownItem, DropdownItem,
DropdownHeader, DropdownHeader,
DropdownDivider DropdownDivider,
} from "flowbite-svelte"; } from "flowbite-svelte";
import ezppLogo from '../public/favicon.png'; import ezppLogo from "../public/favicon.png";
let count = 0;
</script> </script>
<div <div class="p-2 flex flex-row justify-between items-center">
class="p-2 bg-gray-950 flex flex-row justify-between items-center rounded-lg"
>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<img src={ezppLogo} class="w-12 h-12 mr-2" /> <img src={ezppLogo} class="w-12 h-12 mr-2" />
<span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span> <span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
@ -37,25 +28,24 @@
>me@horizonco.de</span >me@horizonco.de</span
> >
</DropdownHeader> </DropdownHeader>
<DropdownItem class="border-0 !bg-gray-700 active:!bg-gray-800" <DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
>Profile</DropdownItem >Profile</DropdownItem
> >
<DropdownDivider /> <DropdownDivider />
<DropdownItem class="border-0 !bg-gray-700 active:!bg-gray-800" <DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
>Sign out</DropdownItem >Sign out</DropdownItem
> >
</Dropdown> </Dropdown>
</div> </div>
<main> <main class="border border-gray-700 rounded-lg"></main>
<!-- <button class="btn" on:click={() => (count += 1)}>Count: {count}</button> -->
</main>
<style> <style>
main { main {
text-align: center; text-align: center;
padding: 1em; padding: 1em;
max-width: 240px;
margin: 0 auto; margin: 0 auto;
} }
@ -73,10 +63,4 @@
border-bottom: 1px solid #353535; border-bottom: 1px solid #353535;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style> </style>