julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/LanguageSelector.tsx
View File

@@ -27,13 +27,13 @@ export default function LanguageSelector() {
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => handleLanguageChange("fr")}
className={i18n.language === "fr" ? "bg-accent" : ""}
className={i18n.language === "fr" ? "bg-accent/80 backdrop-blur-md" : ""}
>
{t("language.fr")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleLanguageChange("en")}
className={i18n.language === "en" ? "bg-accent" : ""}
className={i18n.language === "en" ? "bg-accent/80 backdrop-blur-md" : ""}
>
{t("language.en")}
</DropdownMenuItem>

2
src/components/admin/DeleteUserDialog.tsx
View File

@@ -80,7 +80,7 @@ export function DeleteUserDialog({
<AlertDialogAction
onClick={handleDelete}
disabled={isLoading}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
className="bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/80"
>
{isLoading ? "Suppression..." : "Supprimer"}
</AlertDialogAction>

6
src/components/auth/LoginForm.tsx
View File

@@ -62,7 +62,7 @@ export function LoginForm({ from }: LoginFormProps) {
autoComplete="email"
required
defaultValue="demo@stripstream.local"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -79,7 +79,7 @@ export function LoginForm({ from }: LoginFormProps) {
autoComplete="current-password"
required
defaultValue="fft$VSD96dis"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="flex items-center space-x-2">
@@ -105,7 +105,7 @@ export function LoginForm({ from }: LoginFormProps) {
<button
type="submit"
disabled={isLoading}
className="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isLoading ? t("login.form.submit.loading.login") : t("login.form.submit.login")}
</button>

8
src/components/auth/RegisterForm.tsx
View File

@@ -100,7 +100,7 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
type="email"
autoComplete="email"
required
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -116,7 +116,7 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
type="password"
autoComplete="new-password"
required
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -132,14 +132,14 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
type="password"
autoComplete="new-password"
required
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
{error && <ErrorMessage errorCode={error.code} variant="form" />}
<button
type="submit"
disabled={isLoading}
className="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="bg-[#4F46E5] inline-flex w-full items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isLoading ? t("login.form.submit.loading.register") : t("login.form.submit.register")}
</button>

2
src/components/common/CompactModeButton.tsx
View File

@@ -19,7 +19,7 @@ export function CompactModeButton({ onToggle }: CompactModeButtonProps) {
return (
<button
onClick={handleClick}
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground whitespace-nowrap"
title={isCompact ? t("series.filters.normal") : t("series.filters.compact")}
>
{isCompact ? <LayoutTemplate className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}

2
src/components/common/UnreadFilterButton.tsx
View File

@@ -14,7 +14,7 @@ export function UnreadFilterButton({ showOnlyUnread, onToggle }: UnreadFilterBut
return (
<button
onClick={onToggle}
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground whitespace-nowrap"
title={showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
>
<Filter className="h-4 w-4" />

14
src/components/debug/DebugInfo.tsx
View File

@@ -90,11 +90,11 @@ export function DebugInfo() {
return (
<div
className={`fixed bottom-4 right-4 bg-zinc-900 border border-zinc-700 rounded-lg shadow-lg p-4 text-zinc-100 z-50 ${
className={`fixed bottom-4 right-4 bg-zinc-900/90 backdrop-blur-md border border-zinc-700 rounded-lg shadow-lg p-4 text-zinc-100 z-50 ${
isMinimized ? "w-auto" : "w-[800px] max-h-[50vh] overflow-auto"
}`}
>
<div className="flex items-center justify-between mb-4 sticky top-0 bg-zinc-900 pb-2">
<div className="flex items-center justify-between mb-4 sticky top-0 bg-zinc-900/90 backdrop-blur-md pb-2">
<div className="flex items-center gap-2">
<h2 className="font-bold text-lg">{t("debug.title")}</h2>
{!isMinimized && (
@@ -107,7 +107,7 @@ export function DebugInfo() {
{!isMinimized && (
<button
onClick={() => setShowFilters(!showFilters)}
className={`hover:bg-zinc-700 rounded-full p-1.5 ${showFilters ? "bg-zinc-700" : ""}`}
className={`hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5 ${showFilters ? "bg-zinc-700/80 backdrop-blur-md" : ""}`}
aria-label="Filtres"
>
<Filter className="h-5 w-5" />
@@ -115,7 +115,7 @@ export function DebugInfo() {
)}
<button
onClick={fetchLogs}
className="hover:bg-zinc-700 rounded-full p-1.5"
className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
aria-label={t("debug.actions.refresh")}
disabled={isRefreshing}
>
@@ -123,14 +123,14 @@ export function DebugInfo() {
</button>
<button
onClick={() => setIsMinimized(!isMinimized)}
className="hover:bg-zinc-700 rounded-full p-1.5"
className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
aria-label={t(isMinimized ? "debug.actions.maximize" : "debug.actions.minimize")}
>
{isMinimized ? <Maximize2 className="h-5 w-5" /> : <Minimize2 className="h-5 w-5" />}
</button>
<button
onClick={clearLogs}
className="hover:bg-zinc-700 rounded-full p-1.5"
className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
aria-label={t("debug.actions.clear")}
>
<X className="h-5 w-5" />
@@ -139,7 +139,7 @@ export function DebugInfo() {
</div>
{!isMinimized && showFilters && (
<div className="mb-4 p-3 bg-zinc-800 rounded-lg">
<div className="mb-4 p-3 bg-zinc-800/80 backdrop-blur-md rounded-lg">
<div className="flex flex-wrap gap-2">
{[
{ key: "all", label: "Toutes", icon: Calendar },

2
src/components/downloads/DownloadManager.tsx
View File

@@ -307,7 +307,7 @@ function BookDownloadCard({ book, status, onDelete, onRetry }: BookDownloadCardP
return (
<Card className="p-4">
<div className="flex items-center gap-4">
<div className="relative w-12 aspect-[2/3] bg-muted rounded overflow-hidden">
<div className="relative w-12 aspect-[2/3] bg-muted/80 backdrop-blur-md rounded overflow-hidden">
<Image
src={`/api/komga/images/books/${book.id}/thumbnail`}
alt={t("books.coverAlt", { title: book.metadata?.title })}

4
src/components/home/HeroSection.tsx
View File

@@ -30,7 +30,7 @@ export function HeroSection({ series }: HeroSectionProps) {
{series?.map((series) => (
<div
key={series.id}
className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden"
className="relative aspect-[2/3] bg-muted/80 backdrop-blur-md rounded-lg overflow-hidden"
>
<SeriesCover
series={series as KomgaSeries}
@@ -42,7 +42,7 @@ export function HeroSection({ series }: HeroSectionProps) {
</div>
{/* Overlay gradient */}
<div className="absolute inset-0 bg-gradient-to-b from-background/50 to-background" />
<div className="absolute inset-0 bg-gradient-to-b from-background/70 to-background backdrop-blur-sm" />
{/* Contenu */}
<div className="relative h-full container flex flex-col items-center justify-center text-center space-y-2 sm:space-y-4">

2
src/components/home/MediaRow.tsx
View File

@@ -130,7 +130,7 @@ function MediaCard({ item, onClick }: MediaCardProps) {
return (
<div
onClick={onClick}
className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden cursor-pointer"
className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground transition-colors overflow-hidden cursor-pointer"
>
<div className="relative aspect-[2/3] bg-muted">
{isSeries ? (

2
src/components/layout/ClientLayout.tsx
View File

@@ -95,7 +95,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<DebugProvider>
<div className="relative min-h-screen h-full" style={backgroundStyle}>
<div className="relative min-h-screen bg-background" style={backgroundStyle}>
{!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
{!isPublicRoute && (
<Sidebar

2
src/components/layout/Header.tsx
View File

@@ -16,7 +16,7 @@ export function Header({ onToggleSidebar }: HeaderProps) {
};
return (
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pt-safe">
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50 pt-safe">
<div className="container flex h-14 max-w-screen-2xl items-center">
<button
onClick={onToggleSidebar}

2
src/components/layout/Sidebar.tsx
View File

@@ -167,7 +167,7 @@ export function Sidebar({ isOpen, onClose, initialLibraries, initialFavorites, u
suppressHydrationWarning
className={cn(
"fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r border-border/40",
"bg-background/80 backdrop-blur-sm supports-[backdrop-filter]:bg-background/60",
"bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50",
"transition-transform duration-300 ease-in-out flex flex-col",
isOpen ? "translate-x-0" : "-translate-x-full"
)}

2
src/components/library/PaginatedSeriesGrid.tsx
View File

@@ -124,7 +124,7 @@ export function PaginatedSeriesGrid({
{/* 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("sidebar.libraries.loading")}</span>
</div>

4
src/components/reader/BookReader.tsx
View File

@@ -98,12 +98,12 @@ export function BookReader({ book, pages, onClose, nextBook }: BookReaderProps)
<div className="relative h-full w-full flex items-center justify-center">
{showEndMessage && (
<div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
<div className="bg-background border rounded-lg shadow-lg p-6 max-w-md text-center">
<div className="bg-background/80 backdrop-blur-md border rounded-lg shadow-lg p-6 max-w-md text-center">
<h3 className="text-lg font-semibold mb-2">{t("reader.endOfSeries")}</h3>
<p className="text-muted-foreground mb-4">{t("reader.endOfSeriesMessage")}</p>
<button
onClick={() => onClose?.(currentPage)}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
className="px-4 py-2 bg-primary/90 backdrop-blur-md text-primary-foreground rounded-md hover:bg-primary/80 transition-colors"
>
{t("reader.backToSeries")}
</button>

16
src/components/reader/components/ControlButtons.tsx
View File

@@ -53,7 +53,7 @@ export const ControlButtons = ({
e.stopPropagation();
onToggleDoublePage();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label={t(
isDoublePage
? "reader.controls.doublePage.disable"
@@ -71,7 +71,7 @@ export const ControlButtons = ({
e.stopPropagation();
onToggleDirection();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label={t("reader.controls.direction.current", {
direction: t(
direction === "ltr"
@@ -91,7 +91,7 @@ export const ControlButtons = ({
e.stopPropagation();
onToggleFullscreen();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label={t(
isFullscreen ? "reader.controls.fullscreen.exit" : "reader.controls.fullscreen.enter"
)}
@@ -104,7 +104,7 @@ export const ControlButtons = ({
onToggleThumbnails();
}}
className={cn(
"p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors",
"p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors",
showThumbnails && "ring-2 ring-primary"
)}
aria-label={t(
@@ -113,7 +113,7 @@ export const ControlButtons = ({
>
<Images className="h-6 w-6" />
</button>
<div className="p-2 rounded-full bg-background/50" onClick={(e) => e.stopPropagation()}>
<div className="p-2 rounded-full bg-background/70 backdrop-blur-md" onClick={(e) => e.stopPropagation()}>
<PageInput
currentPage={currentPage}
totalPages={totalPages}
@@ -133,7 +133,7 @@ export const ControlButtons = ({
onClose(currentPage);
}}
className={cn(
"absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
"absolute top-4 right-4 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-30",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label={t("reader.controls.close")}
@@ -150,7 +150,7 @@ export const ControlButtons = ({
onPreviousPage();
}}
className={cn(
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
direction === "rtl" ? "right-4" : "left-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
@@ -168,7 +168,7 @@ export const ControlButtons = ({
onNextPage();
}}
className={cn(
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
direction === "rtl" ? "left-4" : "right-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}

4
src/components/reader/components/NavigationBar.tsx
View File

@@ -55,7 +55,7 @@ export const NavigationBar = ({
return (
<div
className={cn(
"absolute bottom-0 left-0 right-0 bg-background/50 backdrop-blur-sm border-t border-border/40 transition-all duration-300 ease-in-out z-30",
"absolute bottom-0 left-0 right-0 bg-background/70 backdrop-blur-md border-t border-border/40 transition-all duration-300 ease-in-out z-30",
showThumbnails ? "h-52 opacity-100" : "h-0 opacity-0"
)}
>
@@ -90,7 +90,7 @@ export const NavigationBar = ({
</div>
{showControls && (
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/50 text-sm">
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/70 backdrop-blur-md text-sm">
Page {currentPage} / {pages.length}
</div>
)}

4
src/components/reader/components/PageInput.tsx
View File

@@ -69,7 +69,7 @@ export const PageInput = ({ currentPage, totalPages, onPageChange }: PageInputPr
value={inputValue}
onChange={handleChange}
className={cn(
"w-12 bg-background/50 text-center rounded-md py-1 px-2",
"w-12 bg-background/70 backdrop-blur-md text-center rounded-md py-1 px-2",
"focus:outline-none focus:ring-2 focus:ring-primary",
"text-sm text-foreground"
)}
@@ -80,7 +80,7 @@ export const PageInput = ({ currentPage, totalPages, onPageChange }: PageInputPr
<button
onClick={handleGoToPage}
data-action="goto"
className="p-1 rounded-md bg-background/50 hover:bg-background/80 transition-colors"
className="p-1 rounded-md bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label="Aller à cette page"
>
<ArrowRight className="h-4 w-4" />

2
src/components/series/PaginatedBookGrid.tsx
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>

2
src/components/series/SeriesHeader.tsx
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 })}

2
src/components/settings/BackgroundSettings.tsx
View File

@@ -94,7 +94,7 @@ export function BackgroundSettings() {
};
return (
<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
<div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
<div className="p-5 space-y-6">
<div>
<h2 className="text-xl font-semibold flex items-center gap-2">

22
src/components/settings/CacheSettings.tsx
View File

@@ -186,7 +186,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
};
return (
<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
<div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
<div className="p-5 space-y-4">
<div>
<h2 className="text-xl font-semibold flex items-center gap-2">
@@ -205,7 +205,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
</div>
{/* Informations sur la taille du cache */}
<div className="rounded-md border bg-muted/50 p-4 space-y-3">
<div className="rounded-md border bg-muted/50 backdrop-blur-md p-4 space-y-3">
<div className="flex items-center gap-2 font-medium">
<HardDrive className="h-4 w-4" />
{t("settings.cache.size.title")}
@@ -255,7 +255,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
min="1"
value={ttlConfig.defaultTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -269,7 +269,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
min="1"
value={ttlConfig.homeTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -283,7 +283,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
min="1"
value={ttlConfig.librariesTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -297,7 +297,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
min="1"
value={ttlConfig.seriesTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -311,7 +311,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
min="1"
value={ttlConfig.booksTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -325,14 +325,14 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
min="1"
value={ttlConfig.imagesTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div className="flex gap-3">
<button
type="submit"
className="flex-1 inline-flex items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="flex-1 inline-flex items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{t("settings.cache.buttons.saveTTL")}
</button>
@@ -340,7 +340,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
type="button"
onClick={handleClearCache}
disabled={isCacheClearing}
className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isCacheClearing ? (
<>
@@ -357,7 +357,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
type="button"
onClick={handleClearServiceWorkerCache}
disabled={isServiceWorkerClearing}
className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isServiceWorkerClearing ? (
<>

2
src/components/settings/DisplaySettings.tsx
View File

@@ -27,7 +27,7 @@ export function DisplaySettings() {
};
return (
<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
<div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
<div className="p-5 space-y-4">
<div>
<h2 className="text-xl font-semibold flex items-center gap-2">

12
src/components/settings/KomgaSettings.tsx
View File

@@ -144,7 +144,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
};
return (
<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
<div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
<div className="p-5 space-y-4">
<div>
<h2 className="text-xl font-semibold flex items-center gap-2">
@@ -173,7 +173,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
<button
type="button"
onClick={() => setIsEditingConfig(true)}
className="inline-flex items-center justify-center rounded-md bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground ring-offset-background transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
className="inline-flex items-center justify-center rounded-md bg-secondary/80 backdrop-blur-md px-3 py-2 text-sm font-medium text-secondary-foreground ring-offset-background transition-colors hover:bg-secondary/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
{t("settings.komga.buttons.edit")}
</button>
@@ -192,7 +192,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
required
value={config.serverUrl}
onChange={handleInputChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -206,7 +206,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
required
value={config.username}
onChange={handleInputChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
@@ -220,7 +220,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
required
value={config.password}
onChange={handleInputChange}
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
@@ -228,7 +228,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
<button
type="submit"
disabled={isSaving}
className="flex-1 inline-flex items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="flex-1 inline-flex items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isSaving ? (
<>

8
src/components/skeletons/BookSkeleton.tsx
View File

@@ -1,15 +1,15 @@
export function BookSkeleton() {
return (
<div className="fixed inset-0 bg-background flex items-center justify-center">
<div className="fixed inset-0 bg-background/80 backdrop-blur-md flex items-center justify-center">
<div className="w-full h-full max-w-6xl mx-auto flex flex-col items-center justify-center space-y-4">
{/* Barre de navigation */}
<div className="w-full h-12 bg-muted rounded animate-pulse" />
<div className="w-full h-12 bg-muted/80 backdrop-blur-md rounded animate-pulse" />
{/* Page du livre */}
<div className="w-full flex-1 bg-muted rounded animate-pulse" />
<div className="w-full flex-1 bg-muted/80 backdrop-blur-md rounded animate-pulse" />
{/* Barre de contrôles */}
<div className="w-full h-16 bg-muted rounded animate-pulse" />
<div className="w-full h-16 bg-muted/80 backdrop-blur-md rounded animate-pulse" />
</div>
</div>
);

2
src/components/ui/ErrorMessage.tsx
View File

@@ -53,7 +53,7 @@ export const ErrorMessage = ({
<div
role="alert"
aria-live="assertive"
className="relative overflow-hidden rounded-lg border border-destructive/50 bg-background p-6 shadow-lg dark:border-destructive/30 dark:bg-destructive/5"
className="relative overflow-hidden rounded-lg border border-destructive/50 bg-background/80 backdrop-blur-md p-6 shadow-lg dark:border-destructive/30 dark:bg-destructive/5"
>
<div className="absolute inset-0 bg-destructive/5 dark:bg-gradient-to-b dark:from-destructive/10 dark:to-destructive/5" />

6
src/components/ui/InstallPWA.tsx
View File

@@ -102,7 +102,7 @@ export function InstallPWA() {
return (
<div className="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-4 z-50">
<div className="bg-card border shadow-lg rounded-lg p-4 max-w-sm mx-auto sm:mx-0">
<div className="bg-card/80 backdrop-blur-md border shadow-lg rounded-lg p-4 max-w-sm mx-auto sm:mx-0">
<div className="flex items-start gap-4">
<Download className="h-6 w-6 flex-shrink-0 text-primary" />
<div className="flex-1">
@@ -120,7 +120,7 @@ export function InstallPWA() {
) : (
<button
onClick={handleInstallClick}
className="w-full bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors"
className="w-full bg-primary/90 backdrop-blur-md text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/80 transition-colors"
>
Installer l'application
</button>
@@ -128,7 +128,7 @@ export function InstallPWA() {
</div>
<button
onClick={handleDismiss}
className="p-1 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
className="p-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground rounded-md transition-colors"
aria-label="Fermer"
>
<X className="h-4 w-4" />

2
src/components/ui/NetworkStatus.tsx
View File

@@ -9,7 +9,7 @@ export function NetworkStatus() {
if (isOnline) return null;
return (
<div className="fixed bottom-4 left-4 z-[100] flex items-center gap-2 rounded-lg bg-destructive px-4 py-2 text-sm text-destructive-foreground shadow-lg">
<div className="fixed bottom-4 left-4 z-[100] flex items-center gap-2 rounded-lg bg-destructive/90 backdrop-blur-md px-4 py-2 text-sm text-destructive-foreground shadow-lg">
<WifiOff className="h-4 w-4" />
<span>Hors ligne</span>
</div>

8
src/components/ui/Pagination.tsx
View File

@@ -61,7 +61,7 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
<button
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
aria-label="Page précédente"
>
<ChevronLeft className="h-4 w-4" />
@@ -87,8 +87,8 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
className={cn(
"inline-flex items-center justify-center rounded-md text-sm font-medium h-10 w-10",
page === currentPage
? "bg-primary text-primary-foreground"
: "hover:bg-accent hover:text-accent-foreground"
? "bg-primary/90 backdrop-blur-md text-primary-foreground"
: "hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground"
)}
aria-label={`Page ${page}`}
aria-current={page === currentPage ? "page" : undefined}
@@ -103,7 +103,7 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
<button
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
aria-label="Page suivante"
>
<span className="sr-only md:not-sr-only">Suivant</span>

2
src/components/ui/alert-dialog.tsx
View File

@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background/80 backdrop-blur-md p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}

6
src/components/ui/badge.tsx
View File

@@ -9,11 +9,11 @@ const badgeVariants = cva(
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
"border-transparent bg-primary/90 backdrop-blur-md text-primary-foreground hover:bg-primary/70",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
"border-transparent bg-secondary/80 backdrop-blur-md text-secondary-foreground hover:bg-secondary/70",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
"border-transparent bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/70",
outline: "text-foreground",
},
},

10
src/components/ui/button.tsx
View File

@@ -8,11 +8,11 @@ const buttonVariants = cva(
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
default: "bg-primary/90 backdrop-blur-md text-primary-foreground hover:bg-primary/80",
destructive: "bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/80",
outline: "border border-input bg-background/70 backdrop-blur-md hover:bg-accent/80 hover:text-accent-foreground",
secondary: "bg-secondary/80 backdrop-blur-md text-secondary-foreground hover:bg-secondary/70",
ghost: "hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {

2
src/components/ui/card.tsx
View File

@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
className={cn("rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm", className)}
{...props}
/>
)

2
src/components/ui/cover-client.tsx
View File

@@ -55,7 +55,7 @@ export const CoverClient = ({
if (imageError) {
return (
<div className="w-full h-full flex items-center justify-center bg-muted rounded-lg">
<div className="w-full h-full flex items-center justify-center bg-muted/80 backdrop-blur-md rounded-lg">
<ImageOff className="w-12 h-12 text-muted-foreground" />
</div>
);

2
src/components/ui/dialog.tsx
View File

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background/80 backdrop-blur-md p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}

4
src/components/ui/dropdown-menu.tsx
View File

@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover/80 backdrop-blur-md p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover/80 backdrop-blur-md p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}

2
src/components/ui/input.tsx
View File

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}

2
src/components/ui/progress-bar.tsx
View File

@@ -11,7 +11,7 @@ export function ProgressBar({ progress, total, type }: ProgressBarProps) {
? "bg-gradient-to-r from-purple-500 to-pink-500"
: "bg-gradient-to-r from-blue-500 to-cyan-500";
return (
<div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-black/50 backdrop-blur-sm border-t border-white/10">
<div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-black/70 backdrop-blur-md border-t border-white/10">
<div className="h-2 bg-white/30 rounded-full overflow-hidden">
<div
className={`h-full transition-all duration-300 ${barColor}`}

2
src/components/ui/progress.tsx
View File

@@ -15,7 +15,7 @@ const Progress = React.forwardRef<
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
className="h-full w-full flex-1 bg-primary/90 backdrop-blur-md transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>

4
src/components/ui/select.tsx
View File

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
@@ -40,7 +40,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover/80 backdrop-blur-md text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className

4
src/components/ui/table.tsx
View File

@@ -37,7 +37,7 @@ const TableFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
<tfoot
ref={ref}
className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
className={cn("border-t bg-muted/50 backdrop-blur-md font-medium [&>tr]:last:border-b-0", className)}
{...props}
/>
));
@@ -48,7 +48,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
"border-b transition-colors hover:bg-muted/50 hover:backdrop-blur-md data-[state=selected]:bg-muted/80 data-[state=selected]:backdrop-blur-md",
className
)}
{...props}

4
src/components/ui/tabs.tsx
View File

@@ -61,7 +61,7 @@ const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(({ className, .
<div
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
"inline-flex h-10 items-center justify-center rounded-md bg-muted/80 backdrop-blur-md p-1 text-muted-foreground",
className
)}
{...props}
@@ -87,7 +87,7 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
aria-selected={isSelected}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
isSelected && "bg-background text-foreground shadow-sm",
isSelected && "bg-background/90 backdrop-blur-md text-foreground shadow-sm",
className
)}
onClick={() => onValueChange(value)}

4
src/components/ui/toast.tsx
View File

@@ -27,9 +27,9 @@ const toastVariants = cva(
{
variants: {
variant: {
default: "border border-border/40 bg-background/60 text-foreground shadow-lg",
default: "border border-border/40 bg-background/70 backdrop-blur-md text-foreground shadow-lg",
destructive:
"destructive group border-destructive/20 bg-destructive/60 text-destructive-foreground font-medium",
"destructive group border-destructive/20 bg-destructive/70 backdrop-blur-md text-destructive-foreground font-medium",
},
},
defaultVariants: {

13
src/styles/globals.css
View File

@@ -88,7 +88,7 @@ body {
@apply border-border;
}
body {
@apply bg-background text-foreground;
@apply text-foreground;
}
}
@@ -105,4 +105,15 @@ body {
.pt-safe {
padding-top: env(safe-area-inset-top, 0);
}
/* Glassmorphism utilities */
.glass {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.glass-strong {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
}