/** * Optimized Professional Theme for Raspberry Pi * All transitions and hover effects removed for performance */ :root { /* Mercedes-Benz Farben */ --mercedes-black: #000000; --mercedes-silver: #C0C0C0; --mercedes-dark-gray: #1a1a1a; --mercedes-light-gray: #f5f5f5; /* Theme Farben */ --primary-color: #3b82f6; --secondary-color: #64748b; --accent-color: #1d4ed8; --success-color: #10b981; --warning-color: #f59e0b; --error-color: #ef4444; /* Light Mode */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; --text-primary: #1a202c; --text-secondary: #4a5568; --border-color: #e2e8f0; } .dark { /* Dark Mode */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --border-color: #334155; } /* Base Styles - Keine Transitions */ body { background-color: var(--bg-primary); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Typography - Keine Hover-Effekte */ h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 700; letter-spacing: -0.025em; } /* Links - Keine Hover-Animation */ a { color: var(--primary-color); text-decoration: none; } a:hover { text-decoration: underline; } /* Buttons - Keine Transitions oder Hover-Effekte */ .btn { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; border: none; outline: none; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-secondary { background-color: var(--secondary-color); color: white; } /* Cards - Keine Schatten-Animationen */ .card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1.5rem; } /* Forms - Keine Focus-Animationen */ .form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem; border: 2px solid var(--border-color); border-radius: 0.5rem; background-color: var(--bg-primary); color: var(--text-primary); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary-color); outline: none; } /* Tables - Keine Hover-Effekte */ .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: 0.75rem; border-bottom: 1px solid var(--border-color); } .table th { font-weight: 600; text-align: left; } /* Navigation - Keine Hover-Animationen */ .nav-link { padding: 0.5rem 1rem; color: var(--text-secondary); display: inline-block; } .nav-link:hover { color: var(--text-primary); background-color: var(--bg-secondary); } .nav-link.active { color: var(--primary-color); font-weight: 600; } /* Badges - Statisch */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 600; border-radius: 9999px; } .badge-success { background-color: #d1fae5; color: #065f46; } .badge-warning { background-color: #fef3c7; color: #92400e; } .badge-error { background-color: #fee2e2; color: #991b1b; } /* Dark Mode Badges */ .dark .badge-success { background-color: #064e3b; color: #6ee7b7; } .dark .badge-warning { background-color: #78350f; color: #fcd34d; } .dark .badge-error { background-color: #7f1d1d; color: #fca5a5; } /* Alerts - Statisch */ .alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; } .alert-info { background-color: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; } .alert-success { background-color: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; } .alert-warning { background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .alert-error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } /* Dark Mode Alerts */ .dark .alert-info { background-color: #1e3a8a; color: #93c5fd; border-color: #3b82f6; } .dark .alert-success { background-color: #064e3b; color: #6ee7b7; border-color: #10b981; } .dark .alert-warning { background-color: #78350f; color: #fcd34d; border-color: #f59e0b; } .dark .alert-error { background-color: #7f1d1d; color: #fca5a5; border-color: #ef4444; } /* Utility Classes - Keine Animationen */ .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); } /* Keine Transitions */ * { transition: none !important; animation: none !important; } /* Keine Transform-Effekte */ .transform, .translate-x-0, .translate-y-0, .rotate-0, .scale-100 { transform: none !important; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* Print Styles */ @media print { body { background: white; color: black; } .no-print { display: none !important; } } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focus Visible - Einfacher Stil */ :focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }