mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-09 03:04:20 -04:00
Theme the focus ring
This commit is contained in:
parent
869c1fbe51
commit
1f049952cc
@ -60,10 +60,22 @@ export const WebTooltip = ({ theme }: { theme: Theme }) => {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
[data-tooltip]:hover::after {
|
||||
:where(body:not(.noHover)) [data-tooltip]:hover::after,
|
||||
[data-tooltip]:focus-visible::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
transition: box-shadow 0.15s ease-in-out;
|
||||
box-shadow: 0 0 0 2px ${theme.colors.black};
|
||||
/* box-shadow: ${theme.accent} 1px; */
|
||||
}
|
||||
`}</style>
|
||||
);
|
||||
};
|
||||
|
@ -21,35 +21,46 @@
|
||||
import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models";
|
||||
import { IconButton, Header, Avatar, A, Skeleton, tooltip, ts } from "@kyoo/primitives";
|
||||
import { View } from "react-native";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { rem, useYoshiki } from "yoshiki/native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { rem, Stylable, useYoshiki } from "yoshiki/native";
|
||||
import { Fetch } from "../fetch";
|
||||
import { KyooLongLogo } from "./icon";
|
||||
|
||||
export const NavbarTitle = KyooLongLogo;
|
||||
export const NavbarTitle = (props: Stylable) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
export const Navbar = () => {
|
||||
return (
|
||||
<A href="/" {...tooltip(t("navbar.home"))} {...props}>
|
||||
<KyooLongLogo />
|
||||
</A>
|
||||
);
|
||||
};
|
||||
|
||||
export const Navbar = (props: Stylable) => {
|
||||
const { css } = useYoshiki();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Header
|
||||
{...css({
|
||||
backgroundColor: (theme) => theme.appbar,
|
||||
paddingX: ts(2),
|
||||
height: { xs: 48, sm: 64 },
|
||||
flexDirection: "row",
|
||||
justifyContent: { xs: "space-between", sm: "flex-start" },
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
{...css(
|
||||
{
|
||||
backgroundColor: (theme) => theme.appbar,
|
||||
paddingX: ts(2),
|
||||
height: { xs: 48, sm: 64 },
|
||||
flexDirection: "row",
|
||||
justifyContent: { xs: "space-between", sm: "flex-start" },
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4.65,
|
||||
elevation: 8,
|
||||
},
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4.65,
|
||||
elevation: 8,
|
||||
})}
|
||||
props,
|
||||
)}
|
||||
>
|
||||
<IconButton
|
||||
icon="menu"
|
||||
@ -92,7 +103,6 @@ export const Navbar = () => {
|
||||
<A href="/auth/login" {...tooltip(t("navbar.login"))}>
|
||||
<Avatar alt={t("navbar.login")} size={30} />
|
||||
</A>
|
||||
{/* {isError && <ErrorSnackbar error={error} />} */}
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user