titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-17 13:30:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

hover effect

Browse source
This commit is contained in:
FireStreaker2 2023-12-13 18:51:07 -08:00
parent 25c4a1e9ce
commit 2f86f1c004
4 changed files with 29 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.prettierrc Normal file
View file

@ -0,0 +1,10 @@
{
"singleQuote": false,
"endOfLine": "crlf",
"tabWidth": 2,
"useTabs": false,
"trailingComma": "none",
"plugins": [
"prettier-plugin-tailwindcss"
]
}

12
src/components/HeaderButton.tsx
View file

@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import { Link } from 'preact-router';
import { Link } from "preact-router";
interface HeaderButtonProps {
href: string;
@ -13,10 +13,12 @@ export function HeaderButton(props: HeaderButtonProps) {
return (
<Link href={href}>
<div class="p-4 flex flex-row items-center">
<Icon class="w-6 h-6"/>
<span className="text-text-color text-lg pl-1 font-roboto font-bold">{t(translationKey)}</span>
<div className="group p-4 flex flex-row items-center">
<Icon className="group-hover:text-text-hover-color transition duration-500 w-6 h-6" />
<span className="group-hover:text-text-hover-color transition duration-500 text-text-color text-lg pl-1 font-roboto font-bold">
{t(translationKey)}
</span>
</div>
</Link>
)
);
}

1
src/themes/main.css
View file

@ -6,6 +6,7 @@
--navbar-height: 60px;
--navbar-text-color: #7967dd;
--navbar-link-color: #e0def4;
--navbar-link-hover-color: gray;
--navbar-font: "Roboto";
--input-text-color: #e0def4;
--input-placeholder-color: white;

1
tailwind.config.js
View file

@ -10,6 +10,7 @@ export default {
"navbar-text-color": "var(--navbar-text-color)",
"navbar-color": "var(--navbar-color)",
"text-color": "var(--navbar-link-color)",
"text-hover-color": "var(--navbar-link-hover-color)",
"input": "var(--input-background-color)",
"input-text": "var(--input-text-color)",
"input-border-color": "var(--input-border-color)"