@tailwind base; @tailwind components; @tailwind utilities; /** * MYP Platform - Raspberry Pi Optimierte Styles * Alle performance-kritischen Glassmorphism-Effekte, backdrop-filter und komplexe Animationen entfernt * Design bleibt unverändert, aber Performance ist deutlich besser */ @layer base { :root { /* Light Mode Farben - Mercedes-Benz Professional - UNVERÄNDERT */ --color-bg-primary: #ffffff; --color-bg-secondary: #fafbfc; --color-bg-tertiary: #f3f5f7; --color-bg-accent: #fbfcfd; --color-text-primary: #111827; --color-text-secondary: #374151; --color-text-muted: #6b7280; --color-text-accent: #0073ce; --color-border-primary: #e5e7eb; --color-border-secondary: #d1d5db; --color-accent: #0073ce; --color-accent-hover: #005a9f; --color-accent-light: #eff6ff; --color-accent-text: #ffffff; --color-shadow: rgba(0, 0, 0, 0.04); --color-shadow-strong: rgba(0, 0, 0, 0.08); --color-shadow-accent: rgba(0, 115, 206, 0.08); --card-radius: 1rem; /* Vereinfachte Gradients - Raspberry Pi optimiert */ --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); --gradient-card: var(--color-bg-primary); --gradient-hero: var(--color-bg-secondary); --gradient-accent: var(--color-accent); --gradient-surface: var(--color-bg-primary); } .dark { /* Dark Mode Farben - UNVERÄNDERT */ --color-bg-primary: #000000; --color-bg-secondary: #0a0a0a; --color-bg-tertiary: #1a1a1a; --color-text-primary: #ffffff; --color-text-secondary: #e2e8f0; --color-text-muted: #94a3b8; --color-border-primary: #1a1a1a; --color-border-secondary: #2a2a2a; --color-accent: #ffffff; --color-accent-hover: #f0f0f0; --color-accent-light: #1e3a8a; --color-accent-text: #000000; --color-shadow: rgba(0, 0, 0, 0.6); --color-shadow-strong: rgba(0, 0, 0, 0.8); --mb-black: #000000; } body { @apply bg-white dark:bg-black text-slate-900 dark:text-white; background: var(--gradient-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.65; font-size: 15px; transition: background-color 0.2s ease, color 0.2s ease; /* Entfernt: transition-colors duration-300 für bessere Performance */ } .dark body { background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%); } /* Body Background - STARK VEREINFACHT */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 115, 206, 0.01) 0%, transparent 70%); pointer-events: none; z-index: -1; } .dark body::before { background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 70%); } /* Navbar - RASPBERRY PI OPTIMIERT */ nav { background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--color-border-primary); transition: background-color 0.2s ease; /* ENTFERNT: backdrop-filter, komplexe box-shadows, cubic-bezier */ } .dark nav { background: rgba(0, 0, 0, 0.95); border-bottom-color: var(--color-border-primary); } /* Card Styles - RASPBERRY PI OPTIMIERT */ .card-enhanced { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--card-radius); transition: background-color 0.2s ease, border-color 0.2s ease; /* ENTFERNT: backdrop-filter, box-shadow, transform, pseudo-elements */ } .card-enhanced:hover { background: var(--color-bg-secondary); border-color: var(--color-border-secondary); /* ENTFERNT: transform, box-shadow für bessere Performance */ } .dark .card-enhanced { background: var(--color-bg-secondary); border-color: var(--color-border-primary); } /* Button Styles - RASPBERRY PI OPTIMIERT */ .btn-enhanced { background: var(--color-accent); color: var(--color-accent-text); border: none; border-radius: 0.5rem; padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; transition: background-color 0.2s ease; /* ENTFERNT: gradient, box-shadow, pseudo-elements, transform */ } .btn-enhanced:hover { background: var(--color-accent-hover); /* ENTFERNT: transform, box-shadow für bessere Performance */ } .btn-enhanced:active { background: var(--color-accent-hover); /* ENTFERNT: transform für bessere Performance */ } .btn-secondary { background: var(--color-bg-primary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); } .btn-secondary:hover { background: var(--color-bg-secondary); border-color: var(--color-accent); color: var(--color-accent); } /* Form Elements - RASPBERRY PI OPTIMIERT */ .input-enhanced { background: rgba(255, 255, 255, 0.98); border: 1px solid var(--color-border-primary); border-radius: 0.5rem; padding: 0.75rem 1rem; color: var(--color-text-primary); font-size: 0.9rem; transition: border-color 0.2s ease, background-color 0.2s ease; /* ENTFERNT: backdrop-filter, box-shadow für bessere Performance */ } .input-enhanced:focus { outline: none; border-color: var(--color-accent); background: rgba(255, 255, 255, 1); /* ENTFERNT: box-shadow für bessere Performance */ } .input-enhanced::placeholder { color: var(--color-text-muted); opacity: 0.8; } .dark .input-enhanced { background: rgba(26, 26, 26, 0.9); border-color: var(--color-border-primary); color: var(--color-text-primary); } .dark .input-enhanced:focus { border-color: #60a5fa; background: rgba(26, 26, 26, 1); } /* Alert Styles - RASPBERRY PI OPTIMIERT */ .alert-enhanced { border-radius: 1rem; padding: 1.25rem; border: 1px solid transparent; position: relative; /* ENTFERNT: backdrop-filter für bessere Performance */ } .alert-enhanced::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; } .alert-info-enhanced { background: rgba(239, 246, 255, 0.95); border-color: rgba(59, 130, 246, 0.2); color: #1e40af; } .alert-info-enhanced::before { background: var(--color-accent); } .alert-success-enhanced { background: rgba(236, 253, 245, 0.95); border-color: rgba(16, 185, 129, 0.2); color: #065f46; } .alert-success-enhanced::before { background: #10b981; } .alert-warning-enhanced { background: rgba(255, 251, 235, 0.95); border-color: rgba(251, 191, 36, 0.2); color: #92400e; } .alert-warning-enhanced::before { background: #fbbf24; } .alert-error-enhanced { background: rgba(254, 242, 242, 0.95); border-color: rgba(239, 68, 68, 0.2); color: #991b1b; } .alert-error-enhanced::before { background: #ef4444; } /* Flash Messages - RASPBERRY PI OPTIMIERT */ .flash-message-light { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(226, 232, 240, 0.6); color: var(--color-text-primary); /* ENTFERNT: backdrop-filter, komplexe box-shadows */ } .flash-message-light.success { border-left: 4px solid #10b981; background: rgba(236, 253, 245, 0.95); } .flash-message-light.error { border-left: 4px solid #ef4444; background: rgba(254, 242, 242, 0.95); } .flash-message-light.warning { border-left: 4px solid #fbbf24; background: rgba(255, 251, 235, 0.95); } .flash-message-light.info { border-left: 4px solid #3b82f6; background: rgba(239, 246, 255, 0.95); } /* Table Styles - RASPBERRY PI OPTIMIERT */ .table-enhanced { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--card-radius); overflow: hidden; /* ENTFERNT: box-shadow für bessere Performance */ } .table-enhanced th { background: var(--color-bg-secondary); color: var(--color-text-primary); font-weight: 600; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border-primary); } .table-enhanced td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border-primary); color: var(--color-text-secondary); transition: background-color 0.2s ease; } .table-enhanced tbody tr:hover { background: var(--color-bg-secondary); /* ENTFERNT: transform für bessere Performance */ } .dark .table-enhanced { background: var(--color-bg-secondary); border-color: var(--color-border-primary); } .dark .table-enhanced th { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .dark .table-enhanced tbody tr:hover { background: var(--color-bg-tertiary); } /* Modal Styles - RASPBERRY PI OPTIMIERT */ .modal-enhanced { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(226, 232, 240, 0.7); border-radius: 1.5rem; position: relative; /* ENTFERNT: backdrop-filter, komplexe box-shadows */ } .dark .modal-enhanced { background: rgba(10, 10, 10, 0.98); border-color: rgba(42, 42, 42, 0.7); } /* Status Badges - RASPBERRY PI OPTIMIERT */ .status-badge-enhanced { display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid transparent; transition: background-color 0.2s ease; } .status-online-enhanced { background: #ecfdf5; color: #065f46; border-color: rgba(16, 185, 129, 0.2); } .status-offline-enhanced { background: #fef2f2; color: #991b1b; border-color: rgba(239, 68, 68, 0.2); } .status-printing-enhanced { background: #eff6ff; color: #1d4ed8; border-color: rgba(59, 130, 246, 0.2); } /* Dark Mode Toggle - RASPBERRY PI OPTIMIERT */ .dark-mode-toggle-new { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--color-border-primary); border-radius: 0.75rem; padding: 0.5rem; transition: background-color 0.2s ease, border-color 0.2s ease; /* ENTFERNT: box-shadow, transform für bessere Performance */ } .dark-mode-toggle-new:hover { background: rgba(255, 255, 255, 1); border-color: var(--color-border-secondary); /* ENTFERNT: transform für bessere Performance */ } .dark .dark-mode-toggle-new { background: rgba(26, 26, 26, 0.95); border-color: var(--color-border-primary); } .dark .dark-mode-toggle-new:hover { background: rgba(26, 26, 26, 1); } /* Icon Animations - STARK VEREINFACHT */ .dark-mode-toggle-new .sun-icon, .dark-mode-toggle-new .moon-icon { transition: opacity 0.2s ease; /* ENTFERNT: komplexe transform animations */ } .dark .sun-icon { display: none; } .dark .moon-icon { display: block; } .sun-icon { display: block; } .moon-icon { display: none; } /* User Menu Button - RASPBERRY PI OPTIMIERT */ .user-menu-button-new { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--color-border-primary); border-radius: 0.75rem; padding: 0.5rem; transition: background-color 0.2s ease; /* ENTFERNT: box-shadow, transform für bessere Performance */ } .user-menu-button-new:hover { background: rgba(255, 255, 255, 1); /* ENTFERNT: transform für bessere Performance */ } .dark .user-menu-button-new { background: rgba(26, 26, 26, 0.95); border-color: var(--color-border-primary); } .dark .user-menu-button-new:hover { background: rgba(26, 26, 26, 1); } /* Hover Effects - STARK VEREINFACHT */ .hover-lift-enhanced { transition: background-color 0.2s ease; /* ENTFERNT: cubic-bezier transition für bessere Performance */ } .hover-lift-enhanced:hover { background-color: var(--color-bg-secondary); /* ENTFERNT: transform, box-shadow für bessere Performance */ } .dark .hover-lift-enhanced:hover { background-color: var(--color-bg-tertiary); } /* Scrollbar Styles - UNVERÄNDERT */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg-secondary); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--color-border-secondary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } .dark ::-webkit-scrollbar-track { background: var(--color-bg-tertiary); } .dark ::-webkit-scrollbar-thumb { background: var(--color-border-secondary); } .dark ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* Loading Animation - VEREINFACHT */ .loading-enhanced { background: var(--color-bg-secondary); border-radius: 0.5rem; overflow: hidden; } .loading-enhanced::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: loading-shimmer 1.5s infinite; } @keyframes loading-shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Focus Styles - VEREINFACHT */ .focus-enhanced:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; /* ENTFERNT: box-shadow für bessere Performance */ } .dark .focus-enhanced:focus { outline-color: #60a5fa; } /* Responsive Anpassungen */ @media (max-width: 768px) { .card-enhanced { border-radius: 0.75rem; padding: 1rem; } .btn-enhanced { padding: 0.625rem 1.25rem; font-size: 0.8rem; } .modal-enhanced { border-radius: 1rem; margin: 1rem; } .dark-mode-toggle-new { padding: 0.4rem; } } /* Reduced Motion Support - ERWEITERT */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transform: none !important; } } /* High Contrast Support */ @media (prefers-contrast: high) { :root { --color-border-primary: #000000; --color-border-secondary: #000000; --color-shadow: rgba(0, 0, 0, 0.2); } .dark { --color-border-primary: #ffffff; --color-border-secondary: #ffffff; } } /* Weitere optimierte Komponenten folgen... */ /* Notification Styles - RASPBERRY PI OPTIMIERT */ .notification { background: rgba(255, 255, 255, 0.98); border: 1px solid var(--color-border-primary); border-radius: 0.75rem; padding: 1rem; /* ENTFERNT: backdrop-filter, komplexe box-shadows */ } .dark .notification { background: rgba(26, 26, 26, 0.95); border-color: var(--color-border-primary); } .notification:hover { background: rgba(255, 255, 255, 1); /* ENTFERNT: transform, box-shadow für bessere Performance */ } .dark .notification:hover { background: rgba(26, 26, 26, 1); } /* Status Dot - VEREINFACHT */ .status-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; display: inline-block; } .status-dot.online { background: #10b981; } .status-dot.offline { background: #ef4444; } /* ENTFERNT: Alle pulse-Animationen für bessere Performance */ /* Weitere Komponenten werden nach gleichem Muster optimiert... */ } /* Flash Messages - RASPBERRY PI OPTIMIERT */ .flash-message { background: rgba(255, 255, 255, 0.98); border: 1px solid var(--color-border-primary); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; /* ENTFERNT: backdrop-filter, box-shadow */ } .dark .flash-message { background: rgba(26, 26, 26, 0.95); border-color: var(--color-border-primary); } .flash-message:hover { background: rgba(255, 255, 255, 1); /* ENTFERNT: transform für bessere Performance */ } .dark .flash-message:hover { background: rgba(26, 26, 26, 1); } .flash-message.info { border-left: 4px solid #3b82f6; background: rgba(239, 246, 255, 0.95); } .flash-message.success { border-left: 4px solid #10b981; background: rgba(236, 253, 245, 0.95); } .flash-message.warning { border-left: 4px solid #fbbf24; background: rgba(255, 251, 235, 0.95); } .flash-message.error { border-left: 4px solid #ef4444; background: rgba(254, 242, 242, 0.95); } /* Einfache Animationen - NUR OPACITY */ @keyframes flash-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Alle weiteren Komponenten folgen dem gleichen Optimierungsmuster: - Entfernung von backdrop-filter - Entfernung von komplexen box-shadows - Entfernung von transform-Animationen - Vereinfachung von transitions zu opacity/background-color only - Beibehaltung des visuellen Designs */