It appears you have a well-structured Git repository with various files, including SVG icons and HTML documents. Here's a brief overview:
This commit is contained in:
196
backend/tailwind.config.js
Normal file
196
backend/tailwind.config.js
Normal file
@@ -0,0 +1,196 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./templates/**/*.html',
|
||||
'./static/js/**/*.js',
|
||||
'./static/**/*.html',
|
||||
// Berücksichtige alle Python-Templates mit Tailwind-Klassen
|
||||
'./blueprints/**/*.py',
|
||||
'./models.py',
|
||||
'./app.py'
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
// Mercedes-Benz Corporate Design System
|
||||
colors: {
|
||||
'mercedes-black': '#000000',
|
||||
'mercedes-blue': '#0073ce',
|
||||
'mercedes-silver': '#aaa9ad',
|
||||
'mercedes-gray': '#5e5e5e',
|
||||
'mercedes-dark': '#1a1a1a',
|
||||
'mercedes-light': '#f8f9fa',
|
||||
// Zusätzliche Systemfarben
|
||||
'success': '#10b981',
|
||||
'warning': '#f59e0b',
|
||||
'error': '#ef4444',
|
||||
'info': '#3b82f6'
|
||||
},
|
||||
fontFamily: {
|
||||
'mercedes': ['Mercedes-Benz Text', 'Arial', 'sans-serif'],
|
||||
'sans': ['Mercedes-Benz Text', 'system-ui', 'sans-serif']
|
||||
},
|
||||
spacing: {
|
||||
'18': '4.5rem',
|
||||
'88': '22rem',
|
||||
'128': '32rem'
|
||||
},
|
||||
borderRadius: {
|
||||
'mercedes': '8px',
|
||||
'xl': '12px',
|
||||
'2xl': '16px',
|
||||
'3xl': '24px'
|
||||
},
|
||||
boxShadow: {
|
||||
'mercedes': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
'mercedes-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
|
||||
'glass-inset': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.05)'
|
||||
},
|
||||
backdropBlur: {
|
||||
'xs': '2px',
|
||||
'glass': '16px'
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.5s ease-in-out',
|
||||
'slide-up': 'slideUp 0.3s ease-out',
|
||||
'slide-down': 'slideDown 0.3s ease-out',
|
||||
'pulse-slow': 'pulse 3s infinite',
|
||||
'bounce-slow': 'bounce 2s infinite',
|
||||
'spin-slow': 'spin 3s linear infinite',
|
||||
'ping-slow': 'ping 3s cubic-bezier(0, 0, 0.2, 1) infinite'
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' }
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(100%)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' }
|
||||
},
|
||||
slideDown: {
|
||||
'0%': { transform: 'translateY(-100%)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' }
|
||||
}
|
||||
},
|
||||
screens: {
|
||||
'xs': '475px',
|
||||
'3xl': '1920px',
|
||||
'4xl': '2560px'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms')({
|
||||
strategy: 'class' // Nur bei .form-input, .form-select, etc.
|
||||
}),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
require('@tailwindcss/line-clamp'),
|
||||
// Custom Plugin für Mercedes-Benz Utilities
|
||||
function({ addUtilities, addComponents, theme }) {
|
||||
const newUtilities = {
|
||||
'.glassmorphism': {
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
WebkitBackdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.18)'
|
||||
},
|
||||
'.glassmorphism-dark': {
|
||||
background: 'rgba(0, 0, 0, 0.05)',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
WebkitBackdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.18)'
|
||||
},
|
||||
'.text-shadow': {
|
||||
textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
'.text-shadow-lg': {
|
||||
textShadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
|
||||
}
|
||||
}
|
||||
|
||||
const newComponents = {
|
||||
'.btn-mercedes': {
|
||||
padding: '0.75rem 1.5rem',
|
||||
borderRadius: '8px',
|
||||
fontWeight: '600',
|
||||
fontSize: '0.875rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
background: 'linear-gradient(135deg, #0073ce 0%, #005ba3 100%)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(135deg, #005ba3 0%, #003d82 100%)',
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 12px 20px -5px rgba(0, 115, 206, 0.4)'
|
||||
},
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
boxShadow: '0 0 0 3px rgba(0, 115, 206, 0.3)'
|
||||
},
|
||||
'&:active': {
|
||||
transform: 'translateY(0)',
|
||||
boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.2)'
|
||||
}
|
||||
},
|
||||
'.mercedes-form-input': {
|
||||
padding: '0.75rem 1rem',
|
||||
borderRadius: '8px',
|
||||
border: '2px solid #e5e7eb',
|
||||
background: 'rgba(255, 255, 255, 0.95)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
fontWeight: '500',
|
||||
'&:focus': {
|
||||
borderColor: '#0073ce',
|
||||
boxShadow: '0 0 0 4px rgba(0, 115, 206, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)',
|
||||
transform: 'translateY(-2px)',
|
||||
background: 'rgba(255, 255, 255, 1)'
|
||||
}
|
||||
},
|
||||
'.dashboard-card': {
|
||||
background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
|
||||
border: '2px solid #f1f5f9',
|
||||
borderRadius: '16px',
|
||||
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
backdropFilter: 'blur(10px)',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-4px) scale(1.02)',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
borderColor: '#0073ce'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addUtilities(newUtilities)
|
||||
addComponents(newComponents)
|
||||
}
|
||||
],
|
||||
// Für Production: Entferne ungenutzte Styles (Tailwind v3)
|
||||
safelist: [
|
||||
// Behalte wichtige Klassen auch wenn sie dynamisch generiert werden
|
||||
{ pattern: /^text-/ },
|
||||
{ pattern: /^bg-/ },
|
||||
{ pattern: /^border-/ },
|
||||
{ pattern: /^hover:.*/ },
|
||||
{ pattern: /^focus:.*/ },
|
||||
{ pattern: /^active:.*/ },
|
||||
{ pattern: /^dark:.*/ },
|
||||
'glassmorphism',
|
||||
'glassmorphism-dark',
|
||||
'btn-mercedes',
|
||||
'mercedes-form-input',
|
||||
'dashboard-card'
|
||||
],
|
||||
// Dark Mode Support
|
||||
darkMode: 'class' // Verwende .dark Klasse für Dark
|
||||
Reference in New Issue
Block a user