Enhance theming and UI components: Introduce a new dark cyan theme in globals.css, update layout to utilize ThemeProvider for consistent theming, and refactor button and card components to use CSS variables for styling. Improve navigation and alert components with dynamic styles based on theme variables, ensuring a cohesive user experience across the application.
Some checks failed
Deploy with Docker Compose / deploy (push) Failing after 49s
Some checks failed
Deploy with Docker Compose / deploy (push) Failing after 49s
This commit is contained in:
Julien Froidefond
148
app/globals.css
148
app/globals.css
@@ -2,9 +2,107 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
/* Font variables - will be overridden by Next.js Font */
|
||||
--font-orbitron: "Orbitron", sans-serif;
|
||||
--font-rajdhani: "Rajdhani", sans-serif;
|
||||
|
||||
/* Dark cyan theme (default) */
|
||||
--background: #001d2e;
|
||||
--foreground: #ffffff;
|
||||
--card: rgba(0, 29, 46, 0.6);
|
||||
--card-hover: rgba(0, 29, 46, 0.8);
|
||||
--card-column: rgba(0, 29, 46, 0.8);
|
||||
--border: rgba(29, 254, 228, 0.3);
|
||||
--input: rgba(0, 29, 46, 0.6);
|
||||
--primary: #1dfee4;
|
||||
--primary-foreground: #001d2e;
|
||||
--muted: #9ca3af;
|
||||
--muted-foreground: #9ca3af;
|
||||
--gray-300: #d1d5db;
|
||||
--gray-400: #9ca3af;
|
||||
--gray-500: #6b7280;
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
--accent: #1dfee4;
|
||||
--destructive: #ef4444;
|
||||
--success: #10b981;
|
||||
--purple: #8b5cf6;
|
||||
--yellow: #eab308;
|
||||
--green: #10b981;
|
||||
--blue: #3b82f6;
|
||||
--pixel-gold: #1dfee4;
|
||||
--accent-color: #1dfee4;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark gold theme (original) */
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--card: rgba(0, 0, 0, 0.6);
|
||||
--card-hover: rgba(0, 0, 0, 0.8);
|
||||
--card-column: rgba(0, 0, 0, 0.8);
|
||||
--border: rgba(218, 165, 32, 0.3);
|
||||
--input: rgba(0, 0, 0, 0.6);
|
||||
--primary: #06b6d4;
|
||||
--primary-foreground: #ffffff;
|
||||
--muted: #9ca3af;
|
||||
--muted-foreground: #9ca3af;
|
||||
--gray-300: #d1d5db;
|
||||
--gray-400: #9ca3af;
|
||||
--gray-500: #6b7280;
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
--accent: #ff8c00;
|
||||
--destructive: #ef4444;
|
||||
--success: #10b981;
|
||||
--purple: #8b5cf6;
|
||||
--yellow: #eab308;
|
||||
--green: #10b981;
|
||||
--blue: #3b82f6;
|
||||
--pixel-gold: #daa520;
|
||||
--accent-color: #daa520;
|
||||
}
|
||||
|
||||
.dark-cyan {
|
||||
/* Dark cyan theme (new) */
|
||||
--background: #001d2e;
|
||||
--foreground: #ffffff;
|
||||
--card: rgba(0, 29, 46, 0.6);
|
||||
--card-hover: rgba(0, 29, 46, 0.8);
|
||||
--card-column: rgba(0, 29, 46, 0.8);
|
||||
--border: rgba(29, 254, 228, 0.3);
|
||||
--input: rgba(0, 29, 46, 0.6);
|
||||
--primary: #1dfee4;
|
||||
--primary-foreground: #001d2e;
|
||||
--muted: #9ca3af;
|
||||
--muted-foreground: #9ca3af;
|
||||
--gray-300: #d1d5db;
|
||||
--gray-400: #9ca3af;
|
||||
--gray-500: #6b7280;
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
--accent: #1dfee4;
|
||||
--destructive: #ef4444;
|
||||
--success: #10b981;
|
||||
--purple: #8b5cf6;
|
||||
--yellow: #eab308;
|
||||
--green: #10b981;
|
||||
--blue: #3b82f6;
|
||||
--pixel-gold: #1dfee4;
|
||||
--accent-color: #1dfee4;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-black text-white;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
@@ -44,4 +142,52 @@
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
/* Button hover states using CSS variables */
|
||||
.btn-primary {
|
||||
border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
|
||||
background-color: color-mix(in srgb, var(--background) 60%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
border-color: var(--accent-color);
|
||||
background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border-color: rgba(107, 114, 128, 0.5);
|
||||
background-color: rgba(31, 41, 55, 0.2);
|
||||
color: var(--gray-400);
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
border-color: var(--gray-500);
|
||||
background-color: rgba(31, 41, 55, 0.3);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
border-color: rgba(16, 185, 129, 0.5);
|
||||
background-color: rgba(16, 185, 129, 0.2);
|
||||
color: var(--success);
|
||||
}
|
||||
.btn-success:hover:not(:disabled) {
|
||||
background-color: rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
color: var(--destructive);
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user