feat: enhance UI components with backdrop blur effects and improved background styles for better visual aesthetics

This commit is contained in:
Julien Froidefond
2025-10-17 11:09:07 +02:00
parent 8d6f8f4de7
commit faca1cdce6
44 changed files with 112 additions and 101 deletions

View File

@@ -137,7 +137,7 @@ export function PaginatedBookGrid({
{/* Loading indicator */}
{isChangingPage && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background/70 backdrop-blur-md border shadow-sm">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm">{t("books.loading")}</span>
</div>

View File

@@ -134,7 +134,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
<div className="relative container mx-auto px-4 py-8">
<div className="flex flex-col md:flex-row gap-6 items-center md:items-start w-full">
{/* Image principale */}
<div className="relative w-[180px] aspect-[2/3] rounded-lg overflow-hidden shadow-lg bg-muted flex-shrink-0">
<div className="relative w-[180px] aspect-[2/3] rounded-lg overflow-hidden shadow-lg bg-muted/80 backdrop-blur-md flex-shrink-0">
<SeriesCover
series={series as KomgaSeries}
alt={t("series.header.coverAlt", { title: series.metadata.title })}