133a09f995
- 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.
787 lines
28 KiB
CSS
787 lines
28 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
/* Valeurs par défaut (Light theme) */
|
|
--background: #f1f5f9; /* slate-100 */
|
|
--foreground: #0f172a; /* slate-900 */
|
|
--card: #ffffff; /* white */
|
|
--card-hover: #f8fafc; /* slate-50 */
|
|
--card-column: #f8fafc; /* slate-50 - colonnes plus foncées que les cartes */
|
|
--border: #cbd5e1; /* slate-300 */
|
|
--input: #ffffff; /* white */
|
|
--primary: #0891b2; /* cyan-600 */
|
|
--primary-foreground: #ffffff; /* white */
|
|
--muted: #94a3b8; /* slate-400 - plus clair pour scrollbar */
|
|
--muted-foreground: #64748b; /* slate-500 */
|
|
--accent: #d97706; /* amber-600 */
|
|
--destructive: #dc2626; /* red-600 */
|
|
--success: #059669; /* emerald-600 */
|
|
--purple: #8b5cf6; /* purple-500 */
|
|
--yellow: #eab308; /* yellow-500 */
|
|
--green: #059669; /* emerald-600 */
|
|
--blue: #2563eb; /* blue-600 */
|
|
--gray: #6b7280; /* gray-500 */
|
|
--gray-light: #e5e7eb; /* gray-200 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #dbeafe; /* blue-100 - clair */
|
|
--tfs-card: #fed7aa; /* orange-200 - clair */
|
|
--jira-border: #3b82f6; /* blue-500 */
|
|
--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 {
|
|
/* Light theme explicit */
|
|
--background: #f1f5f9; /* slate-100 */
|
|
--foreground: #0f172a; /* slate-900 */
|
|
--card: #ffffff; /* white */
|
|
--card-hover: #f8fafc; /* slate-50 */
|
|
--card-column: #f8fafc; /* slate-50 */
|
|
--border: #cbd5e1; /* slate-300 */
|
|
--input: #ffffff; /* white */
|
|
--primary: #0891b2; /* cyan-600 */
|
|
--primary-foreground: #ffffff; /* white */
|
|
--muted: #94a3b8; /* slate-400 */
|
|
--muted-foreground: #64748b; /* slate-500 */
|
|
--accent: #d97706; /* amber-600 */
|
|
--destructive: #dc2626; /* red-600 */
|
|
--success: #059669; /* emerald-600 */
|
|
--purple: #8b5cf6; /* purple-500 */
|
|
--yellow: #eab308; /* yellow-500 */
|
|
--green: #059669; /* emerald-600 */
|
|
--blue: #2563eb; /* blue-600 */
|
|
--gray: #6b7280; /* gray-500 */
|
|
--gray-light: #e5e7eb; /* gray-200 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #dbeafe; /* blue-100 - clair */
|
|
--tfs-card: #fed7aa; /* orange-200 - clair */
|
|
--jira-border: #3b82f6; /* blue-500 */
|
|
--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 {
|
|
/* Dark theme override */
|
|
--background: #1e293b; /* slate-800 - background principal */
|
|
--foreground: #f1f5f9; /* slate-100 */
|
|
--card: #334155; /* slate-700 - plus clair que le background */
|
|
--card-hover: #475569; /* slate-600 */
|
|
--card-column: #0f172a; /* slate-900 - plus foncé que les cartes */
|
|
--border: #64748b; /* slate-500 - encore plus clair */
|
|
--input: #334155; /* slate-700 - plus clair */
|
|
--primary: #06b6d4; /* cyan-500 */
|
|
--primary-foreground: #ffffff; /* white - better contrast with cyan */
|
|
--muted: #64748b; /* slate-500 */
|
|
--muted-foreground: #94a3b8; /* slate-400 */
|
|
--accent: #f59e0b; /* amber-500 */
|
|
--destructive: #ef4444; /* red-500 */
|
|
--success: #10b981; /* emerald-500 */
|
|
--purple: #8b5cf6; /* purple-500 */
|
|
--yellow: #eab308; /* yellow-500 */
|
|
--green: #10b981; /* emerald-500 */
|
|
--blue: #3b82f6; /* blue-500 */
|
|
--gray: #9ca3af; /* gray-400 */
|
|
--gray-light: #374151; /* gray-700 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #475569; /* slate-700 - plus subtil */
|
|
--tfs-card: #475569; /* slate-600 - plus subtil */
|
|
--jira-border: #60a5fa; /* blue-400 - plus clair pour contraste */
|
|
--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 {
|
|
/* Dracula theme */
|
|
--background: #282a36; /* dracula background */
|
|
--foreground: #f8f8f2; /* dracula foreground */
|
|
--card: #44475a; /* dracula current line */
|
|
--card-hover: #6272a4; /* dracula comment */
|
|
--card-column: #21222c; /* darker background */
|
|
--border: #6272a4; /* dracula comment */
|
|
--input: #44475a; /* dracula current line */
|
|
--primary: #ff79c6; /* dracula pink */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #6272a4; /* dracula comment */
|
|
--muted-foreground: #50fa7b; /* dracula green */
|
|
--accent: #ffb86c; /* dracula orange */
|
|
--destructive: #ff5555; /* dracula red */
|
|
--success: #50fa7b; /* dracula green */
|
|
--purple: #bd93f9; /* dracula purple */
|
|
--yellow: #f1fa8c; /* dracula yellow */
|
|
--green: #50fa7b; /* dracula green */
|
|
--blue: #8be9fd; /* dracula cyan */
|
|
--gray: #6272a4; /* dracula comment */
|
|
--gray-light: #44475a; /* dracula current line */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #44475a; /* dracula current line - fond neutre */
|
|
--tfs-card: #44475a; /* dracula current line - fond neutre */
|
|
--jira-border: #8be9fd; /* dracula cyan */
|
|
--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 {
|
|
/* Monokai theme */
|
|
--background: #272822; /* monokai background */
|
|
--foreground: #f8f8f2; /* monokai foreground */
|
|
--card: #3e3d32; /* monokai selection */
|
|
--card-hover: #49483e; /* monokai line */
|
|
--card-column: #1e1f1c; /* darker background */
|
|
--border: #49483e; /* monokai line */
|
|
--input: #3e3d32; /* monokai selection */
|
|
--primary: #f92672; /* monokai pink */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #75715e; /* monokai comment */
|
|
--muted-foreground: #a6e22e; /* monokai green */
|
|
--accent: #fd971f; /* monokai orange */
|
|
--destructive: #f92672; /* monokai red */
|
|
--success: #a6e22e; /* monokai green */
|
|
--purple: #ae81ff; /* monokai purple */
|
|
--yellow: #e6db74; /* monokai yellow */
|
|
--green: #a6e22e; /* monokai green */
|
|
--blue: #66d9ef; /* monokai cyan */
|
|
--gray: #75715e; /* monokai comment */
|
|
--gray-light: #3e3d32; /* monokai selection */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #3e3d32; /* monokai selection - fond neutre */
|
|
--tfs-card: #3e3d32; /* monokai selection - fond neutre */
|
|
--jira-border: #66d9ef; /* monokai cyan */
|
|
--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 {
|
|
/* Nord theme */
|
|
--background: #2e3440; /* nord0 */
|
|
--foreground: #d8dee9; /* nord4 */
|
|
--card: #3b4252; /* nord1 */
|
|
--card-hover: #434c5e; /* nord2 */
|
|
--card-column: #242831; /* darker nord0 */
|
|
--border: #4c566a; /* nord3 */
|
|
--input: #3b4252; /* nord1 */
|
|
--primary: #88c0d0; /* nord7 */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #4c566a; /* nord3 */
|
|
--muted-foreground: #81a1c1; /* nord9 */
|
|
--accent: #d08770; /* nord12 */
|
|
--destructive: #bf616a; /* nord11 */
|
|
--success: #a3be8c; /* nord14 */
|
|
--purple: #b48ead; /* nord13 */
|
|
--yellow: #ebcb8b; /* nord15 */
|
|
--green: #a3be8c; /* nord14 */
|
|
--blue: #5e81ac; /* nord10 */
|
|
--gray: #4c566a; /* nord3 */
|
|
--gray-light: #3b4252; /* nord1 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #3b4252; /* nord1 - fond neutre */
|
|
--tfs-card: #3b4252; /* nord1 - fond neutre */
|
|
--jira-border: #5e81ac; /* nord10 - bleu */
|
|
--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 {
|
|
/* Gruvbox theme */
|
|
--background: #282828; /* gruvbox bg0 */
|
|
--foreground: #ebdbb2; /* gruvbox fg */
|
|
--card: #3c3836; /* gruvbox bg1 */
|
|
--card-hover: #504945; /* gruvbox bg2 */
|
|
--card-column: #1d2021; /* gruvbox bg0_h */
|
|
--border: #665c54; /* gruvbox bg3 */
|
|
--input: #3c3836; /* gruvbox bg1 */
|
|
--primary: #fe8019; /* gruvbox orange */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #665c54; /* gruvbox bg3 */
|
|
--muted-foreground: #a89984; /* gruvbox gray */
|
|
--accent: #fabd2f; /* gruvbox yellow */
|
|
--destructive: #fb4934; /* gruvbox red */
|
|
--success: #b8bb26; /* gruvbox green */
|
|
--purple: #d3869b; /* gruvbox purple */
|
|
--yellow: #fabd2f; /* gruvbox yellow */
|
|
--green: #b8bb26; /* gruvbox green */
|
|
--blue: #83a598; /* gruvbox blue */
|
|
--gray: #a89984; /* gruvbox gray */
|
|
--gray-light: #3c3836; /* gruvbox bg1 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #3c3836; /* gruvbox bg1 - fond neutre */
|
|
--tfs-card: #3c3836; /* gruvbox bg1 - fond neutre */
|
|
--jira-border: #83a598; /* gruvbox blue */
|
|
--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 {
|
|
/* Tokyo Night theme */
|
|
--background: #1a1b26; /* tokyo-night bg */
|
|
--foreground: #a9b1d6; /* tokyo-night fg */
|
|
--card: #24283b; /* tokyo-night bg_highlight */
|
|
--card-hover: #2f3349; /* tokyo-night bg_visual */
|
|
--card-column: #16161e; /* tokyo-night bg_dark */
|
|
--border: #565f89; /* tokyo-night comment */
|
|
--input: #24283b; /* tokyo-night bg_highlight */
|
|
--primary: #7aa2f7; /* tokyo-night blue */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #565f89; /* tokyo-night comment */
|
|
--muted-foreground: #9aa5ce; /* tokyo-night fg_dark */
|
|
--accent: #ff9e64; /* tokyo-night orange */
|
|
--destructive: #f7768e; /* tokyo-night red */
|
|
--success: #9ece6a; /* tokyo-night green */
|
|
--purple: #bb9af7; /* tokyo-night purple */
|
|
--yellow: #e0af68; /* tokyo-night yellow */
|
|
--green: #9ece6a; /* tokyo-night green */
|
|
--blue: #7aa2f7; /* tokyo-night blue */
|
|
--gray: #565f89; /* tokyo-night comment */
|
|
--gray-light: #24283b; /* tokyo-night bg_highlight */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #24283b; /* tokyo-night bg_highlight - fond neutre */
|
|
--tfs-card: #24283b; /* tokyo-night bg_highlight - fond neutre */
|
|
--jira-border: #7aa2f7; /* tokyo-night blue */
|
|
--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 {
|
|
/* Catppuccin Mocha theme */
|
|
--background: #1e1e2e; /* catppuccin base */
|
|
--foreground: #cdd6f4; /* catppuccin text */
|
|
--card: #313244; /* catppuccin surface0 */
|
|
--card-hover: #45475a; /* catppuccin surface1 */
|
|
--card-column: #181825; /* catppuccin mantle */
|
|
--border: #6c7086; /* catppuccin overlay0 */
|
|
--input: #313244; /* catppuccin surface0 */
|
|
--primary: #cba6f7; /* catppuccin mauve */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #6c7086; /* catppuccin overlay0 */
|
|
--muted-foreground: #a6adc8; /* catppuccin subtext0 */
|
|
--accent: #fab387; /* catppuccin peach */
|
|
--destructive: #f38ba8; /* catppuccin red */
|
|
--success: #a6e3a1; /* catppuccin green */
|
|
--purple: #cba6f7; /* catppuccin mauve */
|
|
--yellow: #f9e2af; /* catppuccin yellow */
|
|
--green: #a6e3a1; /* catppuccin green */
|
|
--blue: #89b4fa; /* catppuccin blue */
|
|
--gray: #6c7086; /* catppuccin overlay0 */
|
|
--gray-light: #313244; /* catppuccin surface0 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #313244; /* catppuccin surface0 - fond neutre */
|
|
--tfs-card: #313244; /* catppuccin surface0 - fond neutre */
|
|
--jira-border: #89b4fa; /* catppuccin blue */
|
|
--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 {
|
|
/* Rose Pine theme */
|
|
--background: #191724; /* rose-pine base */
|
|
--foreground: #e0def4; /* rose-pine text */
|
|
--card: #26233a; /* rose-pine surface */
|
|
--card-hover: #312f44; /* rose-pine overlay */
|
|
--card-column: #16141f; /* rose-pine base */
|
|
--border: #6e6a86; /* rose-pine muted */
|
|
--input: #26233a; /* rose-pine surface */
|
|
--primary: #c4a7e7; /* rose-pine iris */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #6e6a86; /* rose-pine muted */
|
|
--muted-foreground: #908caa; /* rose-pine subtle */
|
|
--accent: #f6c177; /* rose-pine gold */
|
|
--destructive: #eb6f92; /* rose-pine love */
|
|
--success: #9ccfd8; /* rose-pine foam */
|
|
--purple: #c4a7e7; /* rose-pine iris */
|
|
--yellow: #f6c177; /* rose-pine gold */
|
|
--green: #9ccfd8; /* rose-pine foam */
|
|
--blue: #3e8fb0; /* rose-pine pine */
|
|
--gray: #6e6a86; /* rose-pine muted */
|
|
--gray-light: #26233a; /* rose-pine surface */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #26233a; /* rose-pine surface - fond neutre */
|
|
--tfs-card: #26233a; /* rose-pine surface - fond neutre */
|
|
--jira-border: #3e8fb0; /* rose-pine pine - bleu */
|
|
--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 {
|
|
/* One Dark theme */
|
|
--background: #282c34; /* one-dark bg */
|
|
--foreground: #abb2bf; /* one-dark fg */
|
|
--card: #3e4451; /* one-dark bg1 */
|
|
--card-hover: #4f5666; /* one-dark bg2 */
|
|
--card-column: #21252b; /* one-dark bg0 */
|
|
--border: #5c6370; /* one-dark bg3 */
|
|
--input: #3e4451; /* one-dark bg1 */
|
|
--primary: #61afef; /* one-dark blue */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #5c6370; /* one-dark bg3 */
|
|
--muted-foreground: #828997; /* one-dark gray */
|
|
--accent: #e06c75; /* one-dark red */
|
|
--destructive: #e06c75; /* one-dark red */
|
|
--success: #98c379; /* one-dark green */
|
|
--purple: #c678dd; /* one-dark purple */
|
|
--yellow: #e5c07b; /* one-dark yellow */
|
|
--green: #98c379; /* one-dark green */
|
|
--blue: #61afef; /* one-dark blue */
|
|
--gray: #5c6370; /* one-dark bg3 */
|
|
--gray-light: #3e4451; /* one-dark bg1 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #3e4451; /* one-dark bg1 - fond neutre */
|
|
--tfs-card: #3e4451; /* one-dark bg1 - fond neutre */
|
|
--jira-border: #61afef; /* one-dark blue */
|
|
--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 {
|
|
/* Material Design Dark theme */
|
|
--background: #121212; /* material bg */
|
|
--foreground: #ffffff; /* material on-bg */
|
|
--card: #1e1e1e; /* material surface */
|
|
--card-hover: #2c2c2c; /* material surface-variant */
|
|
--card-column: #0f0f0f; /* material surface-container */
|
|
--border: #3c3c3c; /* material outline */
|
|
--input: #1e1e1e; /* material surface */
|
|
--primary: #bb86fc; /* material primary */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #3c3c3c; /* material outline */
|
|
--muted-foreground: #b3b3b3; /* material on-surface-variant */
|
|
--accent: #ffab40; /* material secondary */
|
|
--destructive: #cf6679; /* material error */
|
|
--success: #4caf50; /* material success */
|
|
--purple: #bb86fc; /* material primary */
|
|
--yellow: #ffab40; /* material secondary */
|
|
--green: #4caf50; /* material success */
|
|
--blue: #2196f3; /* material info */
|
|
--gray: #3c3c3c; /* material outline */
|
|
--gray-light: #1e1e1e; /* material surface */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #1e1e1e; /* material surface - fond neutre */
|
|
--tfs-card: #1e1e1e; /* material surface - fond neutre */
|
|
--jira-border: #2196f3; /* material info - bleu */
|
|
--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 {
|
|
/* Solarized Dark theme */
|
|
--background: #002b36; /* solarized base03 */
|
|
--foreground: #93a1a1; /* solarized base1 */
|
|
--card: #073642; /* solarized base02 */
|
|
--card-hover: #0a4b5a; /* solarized base01 */
|
|
--card-column: #001e26; /* solarized base03 darker */
|
|
--border: #586e75; /* solarized base01 */
|
|
--input: #073642; /* solarized base02 */
|
|
--primary: #268bd2; /* solarized blue */
|
|
--primary-foreground: #ffffff; /* white for contrast */
|
|
--muted: #586e75; /* solarized base01 */
|
|
--muted-foreground: #657b83; /* solarized base00 */
|
|
--accent: #b58900; /* solarized yellow */
|
|
--destructive: #dc322f; /* solarized red */
|
|
--success: #859900; /* solarized green */
|
|
--purple: #6c71c4; /* solarized violet */
|
|
--yellow: #b58900; /* solarized yellow */
|
|
--green: #859900; /* solarized green */
|
|
--blue: #268bd2; /* solarized blue */
|
|
--gray: #586e75; /* solarized base01 */
|
|
--gray-light: #073642; /* solarized base02 */
|
|
|
|
/* Cartes spéciales */
|
|
--jira-card: #073642; /* solarized base02 - fond neutre */
|
|
--tfs-card: #073642; /* solarized base02 - fond neutre */
|
|
--jira-border: #268bd2; /* solarized blue */
|
|
--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 {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-geist-mono), 'Courier New', monospace;
|
|
overflow-x: hidden;
|
|
transition: background-image 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Styles pour les images de fond */
|
|
body.has-background-image {
|
|
/* Assurer que le contenu reste lisible avec une image de fond */
|
|
position: relative;
|
|
}
|
|
|
|
body.has-background-image::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Améliorer la lisibilité des cartes avec image de fond */
|
|
body.has-background-image .bg-\[var\(--card\)\] {
|
|
background-color: color-mix(in srgb, var(--card) 90%, transparent) !important;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
body.has-background-image .bg-\[var\(--card\)\]\/30 {
|
|
background-color: color-mix(in srgb, var(--card) 20%, transparent) !important;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
/* Rendre les conteneurs principaux transparents avec image de fond */
|
|
body.has-background-image .min-h-screen.bg-\[var\(--background\)\] {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Scrollbar tech style */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--card);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--muted);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--primary);
|
|
}
|
|
|
|
/* Outline card styles pour meilleure lisibilité */
|
|
.outline-card-blue {
|
|
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--primary);
|
|
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
|
|
}
|
|
|
|
.outline-card-green {
|
|
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--success);
|
|
background-color: color-mix(in srgb, var(--success) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
|
|
}
|
|
|
|
.outline-card-orange {
|
|
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--accent);
|
|
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
|
|
}
|
|
|
|
.outline-card-red {
|
|
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--destructive);
|
|
background-color: color-mix(in srgb, var(--destructive) 8%, transparent);
|
|
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);
|
|
background-color: color-mix(in srgb, var(--purple) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--purple) 25%, var(--border));
|
|
}
|
|
|
|
.outline-card-yellow {
|
|
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--yellow);
|
|
background-color: color-mix(in srgb, var(--yellow) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--yellow) 25%, var(--border));
|
|
}
|
|
|
|
.outline-card-gray {
|
|
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--muted-foreground);
|
|
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
|
|
}
|
|
|
|
/* Variantes pour les métriques (padding plus large) */
|
|
.outline-metric-blue {
|
|
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--primary);
|
|
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
|
|
}
|
|
|
|
.outline-metric-green {
|
|
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--success);
|
|
background-color: color-mix(in srgb, var(--success) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
|
|
}
|
|
|
|
.outline-metric-orange {
|
|
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--accent);
|
|
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
|
|
}
|
|
|
|
.outline-metric-purple {
|
|
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--purple);
|
|
background-color: color-mix(in srgb, var(--purple) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--purple) 25%, var(--border));
|
|
}
|
|
|
|
.outline-metric-gray {
|
|
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
|
|
color: var(--muted-foreground);
|
|
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
|
|
}
|
|
|
|
/* Animations tech */
|
|
@keyframes glow {
|
|
0%, 100% { box-shadow: 0 0 5px var(--primary); }
|
|
50% { box-shadow: 0 0 20px var(--primary); }
|
|
}
|
|
|
|
.animate-glow {
|
|
animation: glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Line clamp utilities */
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Styles pour les sliders */
|
|
.slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
cursor: pointer;
|
|
border: 2px solid var(--background);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb:hover {
|
|
background: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
cursor: pointer;
|
|
border: 2px solid var(--background);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.slider::-moz-range-thumb:hover {
|
|
background: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
|
|
transform: scale(1.1);
|
|
}
|