325 lines
11 KiB
JavaScript
325 lines
11 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./templates/**/*.html",
|
|
"./static/**/*.js",
|
|
"./static/css/input.css"
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
// Erweiterte Container-Einstellungen für bessere Responsivität
|
|
container: {
|
|
center: true,
|
|
padding: {
|
|
DEFAULT: '1rem',
|
|
sm: '1.5rem',
|
|
lg: '2rem',
|
|
xl: '3rem',
|
|
'2xl': '4rem',
|
|
},
|
|
screens: {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1400px',
|
|
},
|
|
},
|
|
// Erweiterte Breakpoints für bessere Kontrolle
|
|
screens: {
|
|
'xs': '480px', // Extra small devices
|
|
'sm': '640px', // Small devices
|
|
'md': '768px', // Medium devices
|
|
'lg': '1024px', // Large devices
|
|
'xl': '1280px', // Extra large devices
|
|
'2xl': '1536px', // 2X large devices
|
|
'3xl': '1920px', // Ultra wide screens
|
|
// Custom breakpoints für spezielle Anwendungsfälle
|
|
'tablet': '768px',
|
|
'laptop': '1024px',
|
|
'desktop': '1280px',
|
|
'wide': '1536px',
|
|
// Orientierungs-spezifische Breakpoints
|
|
'landscape': {'raw': '(orientation: landscape)'},
|
|
'portrait': {'raw': '(orientation: portrait)'},
|
|
// Touch device detection
|
|
'touch': {'raw': '(hover: none) and (pointer: coarse)'},
|
|
'no-touch': {'raw': '(hover: hover) and (pointer: fine)'},
|
|
},
|
|
spacing: {
|
|
'72': '18rem',
|
|
'84': '21rem',
|
|
'96': '24rem',
|
|
'128': '32rem',
|
|
'144': '36rem',
|
|
'160': '40rem',
|
|
// Responsive spacing utilities
|
|
'safe-top': 'env(safe-area-inset-top)',
|
|
'safe-bottom': 'env(safe-area-inset-bottom)',
|
|
'safe-left': 'env(safe-area-inset-left)',
|
|
'safe-right': 'env(safe-area-inset-right)',
|
|
},
|
|
fontSize: {
|
|
// Responsive font sizes
|
|
'xs': ['0.75rem', { lineHeight: '1rem' }],
|
|
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
|
'base': ['1rem', { lineHeight: '1.5rem' }],
|
|
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
|
|
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
|
'5xl': ['3rem', { lineHeight: '1' }],
|
|
'6xl': ['3.75rem', { lineHeight: '1' }],
|
|
'7xl': ['4.5rem', { lineHeight: '1' }],
|
|
'8xl': ['6rem', { lineHeight: '1' }],
|
|
'9xl': ['8rem', { lineHeight: '1' }],
|
|
// Mobile-optimized sizes
|
|
'mobile-xs': ['0.675rem', { lineHeight: '0.875rem' }],
|
|
'mobile-sm': ['0.8rem', { lineHeight: '1.1rem' }],
|
|
'mobile-base': ['0.925rem', { lineHeight: '1.4rem' }],
|
|
'mobile-lg': ['1.05rem', { lineHeight: '1.6rem' }],
|
|
},
|
|
colors: {
|
|
// Mercedes-Benz Corporate Colors
|
|
'mercedes': {
|
|
'black': '#000000',
|
|
'silver': '#C0C0C0',
|
|
'dark-gray': '#1a1a1a',
|
|
'light-gray': '#f5f5f5',
|
|
'platinum': '#E5E4E2',
|
|
'charcoal': '#36454F',
|
|
'steel': '#71797E'
|
|
},
|
|
// Dark Mode optimierte Farben - Verbessert
|
|
'dark': {
|
|
'bg': '#0f172a', // Dunkler Hintergrund
|
|
'bg-secondary': '#131c2e', // Sekundärer Hintergrund noch dunkler
|
|
'surface': '#1e293b',
|
|
'surface-hover': '#334155',
|
|
'card': '#1e293b', // Dunklere Kartenfarbe für besseren Kontrast
|
|
'card-hover': '#334155', // Dunklerer Hover-Zustand
|
|
'text': '#f8fafc',
|
|
'text-secondary': '#e2e8f0',
|
|
'text-muted': '#94a3b8',
|
|
'text-disabled': '#64748b',
|
|
'border': '#334155',
|
|
'border-light': '#475569',
|
|
'hover': '#334155', // Dunklerer Hover-Zustand
|
|
'focus': '#475569',
|
|
'accent': '#4f46e5'
|
|
},
|
|
// Light Mode optimierte Farben - Verbessert
|
|
'light': {
|
|
'bg': '#ffffff',
|
|
'bg-secondary': '#f8fafc',
|
|
'surface': '#f7fafc',
|
|
'surface-hover': '#edf2f7',
|
|
'card': '#ffffff',
|
|
'card-hover': '#f7fafc',
|
|
'text': '#1a202c',
|
|
'text-secondary': '#2d3748',
|
|
'text-muted': '#4a5568',
|
|
'text-disabled': '#a0aec0',
|
|
'border': '#e2e8f0',
|
|
'border-light': '#edf2f7',
|
|
'hover': '#f1f5f9',
|
|
'focus': '#e2e8f0',
|
|
'accent': '#3b82f6'
|
|
},
|
|
// Status Farben - Erweitert
|
|
'status': {
|
|
'online': '#10b981',
|
|
'offline': '#ef4444',
|
|
'warning': '#f59e0b',
|
|
'info': '#3b82f6',
|
|
'success': '#059669',
|
|
'error': '#dc2626',
|
|
'pending': '#8b5cf6',
|
|
'processing': '#06b6d4',
|
|
'unknown': '#6b7280'
|
|
},
|
|
// Printer Status Farben - Erweitert
|
|
'printer': {
|
|
'ready': '#10b981',
|
|
'busy': '#f59e0b',
|
|
'error': '#ef4444',
|
|
'offline': '#6b7280',
|
|
'maintenance': '#8b5cf6',
|
|
'initializing': '#06b6d4'
|
|
},
|
|
// Job Status Farben - Erweitert
|
|
'job': {
|
|
'queued': '#6b7280',
|
|
'printing': '#3b82f6',
|
|
'completed': '#10b981',
|
|
'failed': '#ef4444',
|
|
'cancelled': '#f59e0b',
|
|
'paused': '#8b5cf6',
|
|
'retrying': '#f97316'
|
|
},
|
|
// Accent Farben - Erweitert
|
|
'accent': {
|
|
'primary': '#3b82f6',
|
|
'secondary': '#8b5cf6',
|
|
'tertiary': '#06b6d4',
|
|
'quaternary': '#10b981',
|
|
'quinary': '#f97316'
|
|
},
|
|
// Gradient Farben - Erweitert
|
|
'gradient': {
|
|
'from-blue': '#3b82f6',
|
|
'to-purple': '#8b5cf6',
|
|
'from-green': '#10b981',
|
|
'to-blue': '#3b82f6',
|
|
'from-purple': '#8b5cf6',
|
|
'to-pink': '#ec4899',
|
|
'from-orange': '#f97316',
|
|
'to-red': '#ef4444'
|
|
}
|
|
},
|
|
typography: {
|
|
DEFAULT: {
|
|
css: {
|
|
'code::before': {
|
|
content: 'none',
|
|
},
|
|
'code::after': {
|
|
content: 'none',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
boxShadow: {
|
|
'mercedes': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'card-dark': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
|
|
// Responsive shadows
|
|
'mobile': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
'tablet': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'desktop': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
},
|
|
// Responsive border radius
|
|
borderRadius: {
|
|
'none': '0',
|
|
'sm': '0.125rem',
|
|
DEFAULT: '0.25rem',
|
|
'md': '0.375rem',
|
|
'lg': '0.5rem',
|
|
'xl': '0.75rem',
|
|
'2xl': '1rem',
|
|
'3xl': '1.5rem',
|
|
'full': '9999px',
|
|
// Mobile-optimized radius
|
|
'mobile': '0.375rem',
|
|
'tablet': '0.5rem',
|
|
'desktop': '0.75rem',
|
|
},
|
|
// Animation improvements
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.5s ease-in-out',
|
|
'slide-up': 'slideUp 0.5s ease-out',
|
|
'slide-down': 'slideDown 0.5s ease-out',
|
|
'slide-left': 'slideLeft 0.5s ease-out',
|
|
'slide-right': 'slideRight 0.5s ease-out',
|
|
'scale-in': 'scaleIn 0.3s ease-out',
|
|
'bounce-soft': 'bounceSoft 0.6s ease-out',
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 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' },
|
|
},
|
|
slideLeft: {
|
|
'0%': { transform: 'translateX(100%)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
slideRight: {
|
|
'0%': { transform: 'translateX(-100%)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
scaleIn: {
|
|
'0%': { transform: 'scale(0.9)', opacity: '0' },
|
|
'100%': { transform: 'scale(1)', opacity: '1' },
|
|
},
|
|
bounceSoft: {
|
|
'0%, 20%, 53%, 80%, 100%': { transform: 'translate3d(0,0,0)' },
|
|
'40%, 43%': { transform: 'translate3d(0,-15px,0)' },
|
|
'70%': { transform: 'translate3d(0,-7px,0)' },
|
|
'90%': { transform: 'translate3d(0,-2px,0)' },
|
|
},
|
|
},
|
|
// Responsive grid templates
|
|
gridTemplateColumns: {
|
|
'auto-fit-240': 'repeat(auto-fit, minmax(240px, 1fr))',
|
|
'auto-fit-280': 'repeat(auto-fit, minmax(280px, 1fr))',
|
|
'auto-fit-320': 'repeat(auto-fit, minmax(320px, 1fr))',
|
|
'auto-fill-240': 'repeat(auto-fill, minmax(240px, 1fr))',
|
|
'auto-fill-280': 'repeat(auto-fill, minmax(280px, 1fr))',
|
|
'auto-fill-320': 'repeat(auto-fill, minmax(320px, 1fr))',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
// Plugin für erweiterte responsive Utilities
|
|
function({ addUtilities, theme }) {
|
|
const newUtilities = {
|
|
// Safe area utilities für mobile Geräte
|
|
'.pt-safe': {
|
|
'padding-top': 'env(safe-area-inset-top)',
|
|
},
|
|
'.pb-safe': {
|
|
'padding-bottom': 'env(safe-area-inset-bottom)',
|
|
},
|
|
'.pl-safe': {
|
|
'padding-left': 'env(safe-area-inset-left)',
|
|
},
|
|
'.pr-safe': {
|
|
'padding-right': 'env(safe-area-inset-right)',
|
|
},
|
|
'.p-safe': {
|
|
'padding-top': 'env(safe-area-inset-top)',
|
|
'padding-bottom': 'env(safe-area-inset-bottom)',
|
|
'padding-left': 'env(safe-area-inset-left)',
|
|
'padding-right': 'env(safe-area-inset-right)',
|
|
},
|
|
// Responsive text utilities
|
|
'.text-responsive': {
|
|
'font-size': 'clamp(0.875rem, 2.5vw, 1.125rem)',
|
|
'line-height': '1.5',
|
|
},
|
|
'.text-responsive-lg': {
|
|
'font-size': 'clamp(1.125rem, 3vw, 1.5rem)',
|
|
'line-height': '1.4',
|
|
},
|
|
'.text-responsive-xl': {
|
|
'font-size': 'clamp(1.5rem, 4vw, 2.25rem)',
|
|
'line-height': '1.3',
|
|
},
|
|
// Container query utilities
|
|
'.container-responsive': {
|
|
'container-type': 'inline-size',
|
|
},
|
|
// Touch-friendly targets
|
|
'.touch-target': {
|
|
'min-height': '44px',
|
|
'min-width': '44px',
|
|
},
|
|
'.touch-target-lg': {
|
|
'min-height': '48px',
|
|
'min-width': '48px',
|
|
},
|
|
}
|
|
addUtilities(newUtilities, ['responsive'])
|
|
}
|
|
],
|
|
}
|