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);