diff --git a/src/components/Bookmark.tsx b/src/components/Bookmark.tsx index 5fb52b6..95afe56 100644 --- a/src/components/Bookmark.tsx +++ b/src/components/Bookmark.tsx @@ -11,6 +11,9 @@ import { BookmarkEditModal } from "./BookmarkEditModal.tsx" import { useMutation, useQueryClient } from "@tanstack/solid-query" import { useWebHaptics } from "../utils/haptics.ts" import { client } from "../apiclient.ts" +import { InternetArchiveIcon } from "../utils/icons.tsx" + +import "./ui/tooltip.css" interface BookmarkProps { bookmark: Bookmark & { id: string } @@ -221,6 +224,16 @@ export function Bookmark(props: BookmarkProps) { > + + + diff --git a/src/components/ui/tooltip.css b/src/components/ui/tooltip.css new file mode 100644 index 0000000..903b576 --- /dev/null +++ b/src/components/ui/tooltip.css @@ -0,0 +1,23 @@ +[data-tooltip] { + &::after { + content: attr(data-tooltip); + position: absolute; + top: 120%; + transform: translateY(-5px); + background-color: var(--primary-text); + color: var(--page-bg); + padding: 5px 10px; + border-radius: 4px; + font-size: 0.75rem; + white-space: nowrap; + z-index: 1000; + opacity: 0; + transition: all 0.2s ease; + pointer-events: none; + } + + &:hover::after { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/routes/index.css b/src/routes/index.css index d5c469b..36e0704 100644 --- a/src/routes/index.css +++ b/src/routes/index.css @@ -86,7 +86,6 @@ border-radius: var(--radius); background: var(--secondary); border: 1px solid oklch(from var(--primary-text) l c h / 0.1); - overflow: hidden; transition: all 0.25s ease; &:hover { @@ -98,6 +97,7 @@ position: relative; width: 100%; aspect-ratio: 16/9; + border-radius: var(--radius); overflow: hidden; background: oklch(from var(--primary) l c h / 0.05); object-fit: cover; diff --git a/src/routes/main.css b/src/routes/main.css index 940a9df..be62859 100644 --- a/src/routes/main.css +++ b/src/routes/main.css @@ -47,7 +47,7 @@ z-index: 1; } - & ~ :is(a, button, select, input) { + & ~ :is(a, button, select, input, [class*="button"]) { z-index: 2; } } diff --git a/src/utils/icons.tsx b/src/utils/icons.tsx new file mode 100644 index 0000000..72f4400 --- /dev/null +++ b/src/utils/icons.tsx @@ -0,0 +1,20 @@ +import { JSX } from "solid-js/jsx-runtime" + +export function InternetArchiveIcon( + props: JSX.IntrinsicElements["svg"] & { size: number }, +) { + return ( + + + + ) +}