125 lines
4.2 KiB
JavaScript
125 lines
4.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./templates/**/*.html",
|
|
"./static/**/*.js",
|
|
"./static/css/input.css"
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
spacing: {
|
|
'72': '18rem',
|
|
'84': '21rem',
|
|
'96': '24rem',
|
|
'128': '32rem'
|
|
},
|
|
colors: {
|
|
// Mercedes-Benz Corporate Colors
|
|
'mercedes': {
|
|
'black': '#000000',
|
|
'deep-black': '#000000', // Tiefes Schwarz für Dashboard-Style
|
|
'silver': '#C0C0C0',
|
|
'dark-gray': '#0a0a0a', // Sehr dunkles Grau für Kontrast
|
|
'light-gray': '#f5f5f5',
|
|
'platinum': '#E5E4E2',
|
|
'charcoal': '#1a1a1a', // Für Rahmen und Grenzen
|
|
'steel': '#71797E'
|
|
},
|
|
// Dashboard-kompatible Dark Mode Farben
|
|
'dark': {
|
|
'bg': '#000000', // Tiefes Schwarz wie Dashboard
|
|
'bg-secondary': '#0a0a0a', // Sehr dunkles Grau
|
|
'surface': '#0f0f0f', // Kartenhintergrund
|
|
'surface-hover': '#1a1a1a', // Hover-Zustand
|
|
'card': '#0f0f0f', // Karten-Hintergrund
|
|
'card-hover': '#1a1a1a', // Karten-Hover
|
|
'text': '#ffffff',
|
|
'text-secondary': '#e2e8f0',
|
|
'text-muted': '#94a3b8',
|
|
'text-disabled': '#64748b',
|
|
'border': '#1a1a1a', // Dunkle Rahmen
|
|
'border-light': '#2a2a2a',
|
|
'hover': '#1a1a1a',
|
|
'focus': '#2a2a2a',
|
|
'accent': '#ffffff' // Weißer Akzent auf schwarzem Hintergrund
|
|
},
|
|
// Light Mode optimierte Farben
|
|
'light': {
|
|
'bg': '#ffffff',
|
|
'bg-secondary': '#f8fafc',
|
|
'surface': '#ffffff',
|
|
'surface-hover': '#f8fafc',
|
|
'card': '#ffffff',
|
|
'card-hover': '#f7fafc',
|
|
'text': '#0f172a',
|
|
'text-secondary': '#334155',
|
|
'text-muted': '#64748b',
|
|
'text-disabled': '#a0aec0',
|
|
'border': '#e2e8f0',
|
|
'border-light': '#f1f5f9',
|
|
'hover': '#f1f5f9',
|
|
'focus': '#e2e8f0',
|
|
'accent': '#000000' // Schwarzer Akzent auf weißem Hintergrund
|
|
},
|
|
// Professional Theme Colors
|
|
'professional': {
|
|
'primary': '#000000', // Mercedes Schwarz
|
|
'secondary': '#ffffff', // Reines Weiß
|
|
'accent': '#0ea5e9', // Mercedes Blau Akzent
|
|
'muted': '#64748b',
|
|
'success': '#10b981',
|
|
'warning': '#f59e0b',
|
|
'error': '#ef4444'
|
|
}
|
|
},
|
|
backgroundImage: {
|
|
'gradient-professional': 'linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%)',
|
|
'gradient-professional-light': 'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)'
|
|
},
|
|
boxShadow: {
|
|
'glass': '0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05)',
|
|
'glass-dark': '0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
|
|
'professional': '0 20px 40px rgba(0, 0, 0, 0.1)',
|
|
'professional-dark': '0 20px 40px rgba(0, 0, 0, 0.6)',
|
|
'card-professional': '0 10px 30px rgba(0, 0, 0, 0.1)',
|
|
'card-professional-dark': '0 10px 30px rgba(0, 0, 0, 0.4)'
|
|
},
|
|
backdropBlur: {
|
|
'xs': '2px',
|
|
'professional': '20px'
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.6s ease-out',
|
|
'slide-up': 'slideUp 0.6s ease-out',
|
|
'scale-in': 'scaleIn 0.4s ease-out',
|
|
'pulse-professional': 'pulseProfessional 2s infinite'
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' }
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(30px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' }
|
|
},
|
|
scaleIn: {
|
|
'0%': { opacity: '0', transform: 'scale(0.9)' },
|
|
'100%': { opacity: '1', transform: 'scale(1)' }
|
|
},
|
|
pulseProfessional: {
|
|
'0%, 100%': { opacity: '1', transform: 'scale(1)' },
|
|
'50%': { opacity: '0.5', transform: 'scale(1.1)' }
|
|
}
|
|
},
|
|
fontFamily: {
|
|
'mercedes': ['Inter', 'system-ui', 'sans-serif']
|
|
}
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/typography')
|
|
],
|
|
}
|