Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-05-11 04:41:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update other bookmark styles

Browse source
This commit is contained in:
Pas 2025-06-02 12:44:13 -06:00
parent 29ca428b6a
commit 609d4e79cd
3 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/assets/css/index.css
View file

@ -349,3 +349,19 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
opacity: 1; opacity: 1;
} }
} }
.bookmark-button {
opacity: 0;
transition: opacity 0.3s;
}
.group:hover .bookmark-button {
opacity: 1;
}
@media (max-width: 1024px) {
.group:hover .bookmark-button {
opacity: 0;
}
}

6
src/components/media/MediaCard.tsx
View file

@ -8,7 +8,6 @@ import { Link } from "react-router-dom";
import { mediaItemToId } from "@/backend/metadata/tmdb"; import { mediaItemToId } from "@/backend/metadata/tmdb";
import { DotList } from "@/components/text/DotList"; import { DotList } from "@/components/text/DotList";
import { Flare } from "@/components/utils/Flare"; import { Flare } from "@/components/utils/Flare";
import { useIsMobile } from "@/hooks/useIsMobile";
import { useSearchQuery } from "@/hooks/useSearchQuery"; import { useSearchQuery } from "@/hooks/useSearchQuery";
import { usePreferencesStore } from "@/stores/preferences"; import { usePreferencesStore } from "@/stores/preferences";
import { MediaItem } from "@/utils/mediaTypes"; import { MediaItem } from "@/utils/mediaTypes";
@ -59,7 +58,6 @@ function MediaCardContent({
}: MediaCardProps) { }: MediaCardProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const percentageString = `${Math.round(percentage ?? 0).toFixed(0)}%`; const percentageString = `${Math.round(percentage ?? 0).toFixed(0)}%`;
const { isMobile } = useIsMobile();
const isReleased = useCallback(() => checkReleased(media), [media]); const isReleased = useCallback(() => checkReleased(media), [media]);
@ -156,9 +154,7 @@ function MediaCardContent({
{!closable && ( {!closable && (
<div <div
className={classNames("absolute", { className="absolute bookmark-button"
"bookmark-button": !isMobile,
})}
onClick={(e) => e.preventDefault()} onClick={(e) => e.preventDefault()}
> >
<MediaBookmarkButton media={media} /> <MediaBookmarkButton media={media} />

13
src/components/utils/Flare.css
View file

@ -6,15 +6,6 @@
opacity: 1 !important; opacity: 1 !important;
} }
.bookmark-button {
opacity: 0;
transition: opacity 0.3s;
}
.group:hover .bookmark-button {
opacity: 1;
}
/* Ensure text is always visible on mobile */ /* Ensure text is always visible on mobile */
@media (max-width: 1024px) { @media (max-width: 1024px) {
/* .group h1, .group button { /* .group h1, .group button {
@ -24,8 +15,4 @@
.group .group-hover\\:opacity-100 { .group .group-hover\\:opacity-100 {
opacity: 1; /* Ensure the flare effect is always visible */ opacity: 1; /* Ensure the flare effect is always visible */
} }
.group:hover .bookmark-button {
opacity: 0;
}
} }