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

feat: enhance Card and StyledCard components with new shadow and gradient effects

Browse Source 
- Added new shadow variables for light, medium, and heavy effects in `globals.css` to improve card depth.
- Updated `Card` and `StyledCard` components to utilize these shadows and introduced gradient backgrounds for a more dynamic appearance.
- Enhanced hover effects in `TaskCard` for improved user interaction with scaling and opacity transitions.
This commit is contained in:
Julien Froidefond
2025-10-01 22:23:29 +02:00
parent e73e46893f
commit 133a09f995
4 changed files with 191 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/app/globals.css
View File

@@ -30,6 +30,13 @@
--tfs-border: #f59e0b; /* amber-500 */
--jira-text: #1e40af; /* blue-800 - foncé pour contraste */
--tfs-text: #92400e; /* amber-800 - foncé pour contraste */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(0, 0, 0, 0.08);
--card-shadow-medium: rgba(0, 0, 0, 0.15);
--card-shadow-heavy: rgba(0, 0, 0, 0.25);
--card-glow-primary: rgba(8, 145, 178, 0.2);
--card-glow-accent: rgba(217, 119, 6, 0.2);
}
.light {
@@ -62,6 +69,13 @@
--tfs-border: #f59e0b; /* amber-500 */
--jira-text: #1e40af; /* blue-800 - foncé pour contraste */
--tfs-text: #92400e; /* amber-800 - foncé pour contraste */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(0, 0, 0, 0.08);
--card-shadow-medium: rgba(0, 0, 0, 0.15);
--card-shadow-heavy: rgba(0, 0, 0, 0.25);
--card-glow-primary: rgba(8, 145, 178, 0.2);
--card-glow-accent: rgba(217, 119, 6, 0.2);
}
.dark {
@@ -94,6 +108,13 @@
--tfs-border: #fb923c; /* orange-400 - plus clair pour contraste */
--jira-text: #93c5fd; /* blue-300 - clair pour contraste */
--tfs-text: #fdba74; /* orange-300 - clair pour contraste */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(6, 182, 212, 0.3);
--card-glow-accent: rgba(245, 158, 11, 0.3);
}
.dracula {
@@ -126,6 +147,13 @@
--tfs-border: #ffb86c; /* dracula orange */
--jira-text: #f8f8f2; /* dracula foreground - texte principal */
--tfs-text: #f8f8f2; /* dracula foreground - texte principal */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(255, 121, 198, 0.3);
--card-glow-accent: rgba(255, 184, 108, 0.3);
}
.monokai {
@@ -158,6 +186,13 @@
--tfs-border: #fd971f; /* monokai orange */
--jira-text: #f8f8f2; /* monokai foreground */
--tfs-text: #f8f8f2; /* monokai foreground */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(249, 38, 114, 0.3);
--card-glow-accent: rgba(253, 151, 31, 0.3);
}
.nord {
@@ -190,6 +225,13 @@
--tfs-border: #d08770; /* nord12 - orange */
--jira-text: #d8dee9; /* nord4 - texte principal */
--tfs-text: #d8dee9; /* nord4 - texte principal */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(94, 129, 172, 0.3);
--card-glow-accent: rgba(208, 135, 112, 0.3);
}
.gruvbox {
@@ -222,6 +264,13 @@
--tfs-border: #fe8019; /* gruvbox orange */
--jira-text: #ebdbb2; /* gruvbox fg */
--tfs-text: #ebdbb2; /* gruvbox fg */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(254, 128, 25, 0.3);
--card-glow-accent: rgba(250, 189, 47, 0.3);
}
.tokyo_night {
@@ -254,6 +303,13 @@
--tfs-border: #ff9e64; /* tokyo-night orange */
--jira-text: #a9b1d6; /* tokyo-night fg */
--tfs-text: #a9b1d6; /* tokyo-night fg */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(122, 162, 247, 0.3);
--card-glow-accent: rgba(255, 158, 100, 0.3);
}
.catppuccin {
@@ -286,6 +342,13 @@
--tfs-border: #fab387; /* catppuccin peach */
--jira-text: #cdd6f4; /* catppuccin text */
--tfs-text: #cdd6f4; /* catppuccin text */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(203, 166, 247, 0.3);
--card-glow-accent: rgba(250, 179, 135, 0.3);
}
.rose_pine {
@@ -318,6 +381,13 @@
--tfs-border: #f6c177; /* rose-pine gold - orange/jaune */
--jira-text: #e0def4; /* rose-pine text */
--tfs-text: #e0def4; /* rose-pine text */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(196, 167, 231, 0.3);
--card-glow-accent: rgba(246, 193, 119, 0.3);
}
.one_dark {
@@ -350,6 +420,13 @@
--tfs-border: #e5c07b; /* one-dark yellow */
--jira-text: #abb2bf; /* one-dark fg */
--tfs-text: #abb2bf; /* one-dark fg */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(97, 175, 239, 0.3);
--card-glow-accent: rgba(229, 192, 123, 0.3);
}
.material {
@@ -382,6 +459,13 @@
--tfs-border: #ffab40; /* material secondary - orange */
--jira-text: #ffffff; /* material on-bg */
--tfs-text: #ffffff; /* material on-bg */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(187, 134, 252, 0.3);
--card-glow-accent: rgba(255, 171, 64, 0.3);
}
.solarized {
@@ -414,6 +498,13 @@
--tfs-border: #b58900; /* solarized yellow */
--jira-text: #93a1a1; /* solarized base1 */
--tfs-text: #93a1a1; /* solarized base1 */
/* Effets de profondeur pour les cards */
--card-shadow-light: rgba(255, 255, 255, 0.05);
--card-shadow-medium: rgba(255, 255, 255, 0.1);
--card-shadow-heavy: rgba(255, 255, 255, 0.15);
--card-glow-primary: rgba(38, 139, 210, 0.3);
--card-glow-accent: rgba(181, 137, 0, 0.3);
}
@theme inline {
@@ -513,6 +604,80 @@ body.has-background-image .min-h-screen.bg-\[var\(--background\)\] {
border-color: color-mix(in srgb, var(--destructive) 25%, var(--border));
}
/* Effets de texture sophistiqués pour les cards */
.card-texture-subtle {
background-image:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
}
.card-texture-dark {
background-image:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
}
/* Effets de brillance pour les cards */
.card-shine {
position: relative;
overflow: hidden;
}
.card-shine::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s;
}
.card-shine:hover::before {
left: 100%;
}
/* Effets de profondeur améliorés */
.card-depth-1 {
box-shadow:
0 1px 3px var(--card-shadow-light),
0 1px 2px var(--card-shadow-light);
}
.card-depth-2 {
box-shadow:
0 4px 6px -1px var(--card-shadow-light),
0 2px 4px -1px var(--card-shadow-light);
}
.card-depth-3 {
box-shadow:
0 10px 15px -3px var(--card-shadow-medium),
0 4px 6px -2px var(--card-shadow-light);
}
.card-glow-primary {
box-shadow:
0 0 0 1px var(--card-glow-primary),
0 4px 6px -1px var(--card-shadow-light),
0 2px 4px -1px var(--card-shadow-light);
}
.card-glow-accent {
box-shadow:
0 0 0 1px var(--card-glow-accent),
0 4px 6px -1px var(--card-shadow-light),
0 2px 4px -1px var(--card-shadow-light);
}
.outline-card-purple {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--purple);

22
src/components/ui/Card.tsx
View File

@@ -11,9 +11,9 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
const Card = forwardRef<HTMLDivElement, CardProps>(
({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => {
const backgrounds = {
default: 'bg-[var(--card)] bg-gradient-to-b from-[var(--card)] to-[color-mix(in_srgb,var(--card)_80%,var(--background)_20%)]',
column: 'bg-[var(--card-column)] bg-gradient-to-b from-[var(--card-column)] to-[color-mix(in_srgb,var(--card-column)_80%,var(--background)_20%)]',
muted: 'bg-[var(--muted)]/10 bg-gradient-to-b from-[var(--muted)]/10 to-[color-mix(in_srgb,var(--muted)_4%,var(--background)_6%)]'
default: 'bg-[var(--card)] bg-gradient-to-br from-[var(--card)] via-[color-mix(in_srgb,var(--card)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80',
column: 'bg-[var(--card-column)] bg-gradient-to-br from-[var(--card-column)] via-[color-mix(in_srgb,var(--card-column)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card-column)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90',
muted: 'bg-[var(--muted)]/15 bg-gradient-to-br from-[var(--muted)]/15 via-[color-mix(in_srgb,var(--muted)_10%,var(--background)_5%)] to-[color-mix(in_srgb,var(--muted)_8%,var(--background)_7%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--muted)_12%,transparent)] before:to-transparent before:opacity-60'
};
const borders = {
@@ -25,18 +25,18 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
const shadows = {
none: '',
sm: 'shadow-sm',
md: 'shadow-md',
lg: 'shadow-lg'
sm: 'shadow-lg shadow-[var(--card-shadow-medium)]',
md: 'shadow-xl shadow-[var(--card-shadow-medium)]',
lg: 'shadow-2xl shadow-[var(--card-shadow-heavy)]'
};
// Variants prédéfinis pour la rétrocompatibilité
const variantStyles = {
default: '',
elevated: 'shadow-lg',
bordered: 'border-[var(--primary)]/30 shadow-lg',
column: 'bg-[var(--card-column)] shadow-lg',
glass: 'bg-[var(--card)]/30 border border-[var(--border)]/50 backdrop-blur-sm'
default: 'shadow-lg shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-transparent before:opacity-70',
elevated: 'shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80',
bordered: 'border-[var(--primary)]/40 shadow-xl shadow-[var(--primary)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90',
column: 'bg-[var(--card-column)] shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80',
glass: 'bg-[var(--card)]/40 border border-[var(--border)]/60 backdrop-blur-md shadow-xl shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_12%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:to-transparent before:opacity-90'
};
// Appliquer le variant si spécifié, sinon utiliser les props individuelles

28
src/components/ui/StyledCard.tsx
View File

@@ -9,24 +9,24 @@ interface StyledCardProps extends HTMLAttributes<HTMLDivElement> {
const StyledCard = forwardRef<HTMLDivElement, StyledCardProps>(
({ className, variant = 'default', color = 'default', ...props }, ref) => {
const variants = {
default: 'bg-[var(--card)]/50 border border-[var(--border)]/50',
outline: 'bg-transparent border border-[var(--border)]',
elevated: 'bg-[var(--card)]/80 border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20',
bordered: 'bg-[var(--card)]/50 border border-[var(--primary)]/30 shadow-[var(--primary)]/10 shadow-lg',
column: 'bg-[var(--card-column)] border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20'
default: 'bg-[var(--card)]/50 border border-[var(--border)]/50 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-40',
outline: 'bg-transparent border border-[var(--border)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:via-transparent before:to-transparent before:opacity-30',
elevated: 'bg-[var(--card)]/80 border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:to-transparent before:opacity-50',
bordered: 'bg-[var(--card)]/50 border border-[var(--primary)]/30 shadow-[var(--primary)]/10 shadow-lg relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-60',
column: 'bg-[var(--card-column)] border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-50'
};
const colors = {
default: '',
primary: 'bg-[color-mix(in_srgb,var(--primary)_8%,transparent)] border-[color-mix(in_srgb,var(--primary)_25%,var(--border))] text-[var(--primary)]',
success: 'bg-[color-mix(in_srgb,var(--success)_8%,transparent)] border-[color-mix(in_srgb,var(--success)_25%,var(--border))] text-[var(--success)]',
destructive: 'bg-[color-mix(in_srgb,var(--destructive)_8%,transparent)] border-[color-mix(in_srgb,var(--destructive)_25%,var(--border))] text-[var(--destructive)]',
accent: 'bg-[color-mix(in_srgb,var(--accent)_8%,transparent)] border-[color-mix(in_srgb,var(--accent)_25%,var(--border))] text-[var(--accent)]',
purple: 'bg-[color-mix(in_srgb,var(--purple)_8%,transparent)] border-[color-mix(in_srgb,var(--purple)_25%,var(--border))] text-[var(--purple)]',
yellow: 'bg-[color-mix(in_srgb,var(--yellow)_8%,transparent)] border-[color-mix(in_srgb,var(--yellow)_25%,var(--border))] text-[var(--yellow)]',
green: 'bg-[color-mix(in_srgb,var(--green)_8%,transparent)] border-[color-mix(in_srgb,var(--green)_25%,var(--border))] text-[var(--green)]',
blue: 'bg-[color-mix(in_srgb,var(--blue)_8%,transparent)] border-[color-mix(in_srgb,var(--blue)_25%,var(--border))] text-[var(--blue)]',
gray: 'bg-[color-mix(in_srgb,var(--gray)_8%,transparent)] border-[color-mix(in_srgb,var(--gray)_25%,var(--border))] text-[var(--gray)]'
primary: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--primary)_12%,transparent)] via-[color-mix(in_srgb,var(--primary)_8%,transparent)] to-[color-mix(in_srgb,var(--primary)_4%,transparent)] border-[color-mix(in_srgb,var(--primary)_30%,var(--border))] text-[var(--primary)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
success: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--success)_12%,transparent)] via-[color-mix(in_srgb,var(--success)_8%,transparent)] to-[color-mix(in_srgb,var(--success)_4%,transparent)] border-[color-mix(in_srgb,var(--success)_30%,var(--border))] text-[var(--success)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--success)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
destructive: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--destructive)_12%,transparent)] via-[color-mix(in_srgb,var(--destructive)_8%,transparent)] to-[color-mix(in_srgb,var(--destructive)_4%,transparent)] border-[color-mix(in_srgb,var(--destructive)_30%,var(--border))] text-[var(--destructive)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--destructive)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
accent: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--accent)_12%,transparent)] via-[color-mix(in_srgb,var(--accent)_8%,transparent)] to-[color-mix(in_srgb,var(--accent)_4%,transparent)] border-[color-mix(in_srgb,var(--accent)_30%,var(--border))] text-[var(--accent)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--accent)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
purple: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--purple)_12%,transparent)] via-[color-mix(in_srgb,var(--purple)_8%,transparent)] to-[color-mix(in_srgb,var(--purple)_4%,transparent)] border-[color-mix(in_srgb,var(--purple)_30%,var(--border))] text-[var(--purple)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--purple)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
yellow: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--yellow)_12%,transparent)] via-[color-mix(in_srgb,var(--yellow)_8%,transparent)] to-[color-mix(in_srgb,var(--yellow)_4%,transparent)] border-[color-mix(in_srgb,var(--yellow)_30%,var(--border))] text-[var(--yellow)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--yellow)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
green: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--green)_12%,transparent)] via-[color-mix(in_srgb,var(--green)_8%,transparent)] to-[color-mix(in_srgb,var(--green)_4%,transparent)] border-[color-mix(in_srgb,var(--green)_30%,var(--border))] text-[var(--green)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--green)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
blue: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--blue)_12%,transparent)] via-[color-mix(in_srgb,var(--blue)_8%,transparent)] to-[color-mix(in_srgb,var(--blue)_4%,transparent)] border-[color-mix(in_srgb,var(--blue)_30%,var(--border))] text-[var(--blue)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--blue)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
gray: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--gray)_12%,transparent)] via-[color-mix(in_srgb,var(--gray)_8%,transparent)] to-[color-mix(in_srgb,var(--gray)_4%,transparent)] border-[color-mix(in_srgb,var(--gray)_30%,var(--border))] text-[var(--gray)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--gray)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50'
};
return (

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

@@ -335,7 +335,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
<Card
ref={ref}
className={cn(
'hover:scale-[1.02] hover:shadow-lg hover:shadow-[var(--primary)]/10 hover:border-[var(--primary)]/20 hover:-translate-y-1 transition-all duration-300 ease-out cursor-pointer group',
'hover:scale-[1.03] hover:shadow-2xl hover:shadow-[var(--primary)]/25 hover:border-[var(--primary)]/50 hover:-translate-y-2 transition-all duration-300 ease-out cursor-pointer group relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300',
isDragging && 'opacity-50 rotate-3 scale-105',
(status === 'done' || status === 'archived') && 'opacity-60',
status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',