core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📚 Improved build scripts & optimized CSS files for enhanced performance 🎉

Browse Source
This commit is contained in:
Till Tomczak
2025-06-03 13:58:44 +02:00
parent 7cd02bd99e
commit 0c99c6ceba
12 changed files with 1453 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
backend/static/css/animations-optimized.css Normal file
View File

@ -0,0 +1,84 @@
/**
* Optimized Animations for Raspberry Pi
* All animations removed for performance
*/
/* Keine Animationen - alle entfernt */
/* Placeholder für Animation-Klassen ohne Effekte */
.fade-in,
.fade-out,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.scale-in,
.scale-out,
.rotate-in,
.rotate-out,
.bounce,
.pulse,
.ping,
.spin,
.wiggle,
.swing,
.rubberBand,
.flash,
.shake,
.flip,
.zoom-in,
.zoom-out {
/* Keine Animation */
}
/* Keine Keyframes definiert */
/* Utility Classes ohne Effekte */
.animate-none { animation: none !important; }
.animate-spin { /* Keine Animation */ }
.animate-ping { /* Keine Animation */ }
.animate-pulse { /* Keine Animation */ }
.animate-bounce { /* Keine Animation */ }
/* Duration Classes - ignoriert */
.duration-75,
.duration-100,
.duration-150,
.duration-200,
.duration-300,
.duration-500,
.duration-700,
.duration-1000 {
/* Keine Duration */
}
/* Delay Classes - ignoriert */
.delay-75,
.delay-100,
.delay-150,
.delay-200,
.delay-300,
.delay-500,
.delay-700,
.delay-1000 {
/* Kein Delay */
}
/* Easing Classes - ignoriert */
.ease-linear,
.ease-in,
.ease-out,
.ease-in-out {
/* Kein Easing */
}
/* Motion-safe - ignoriert */
@media (prefers-reduced-motion: no-preference) {
/* Keine Animationen auch bei no-preference */
}
/* Alle Animationen global deaktiviert */
* {
animation: none !important;
transition: none !important;
}

520
backend/static/css/components-optimized.css Normal file
View File

@ -0,0 +1,520 @@
/**
* Optimized MYP Platform Components for Raspberry Pi
* All transitions and animations removed for performance
*/
@layer components {
/* Karten und Container - Keine Transitions */
.card {
@apply bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-6 m-4;
}
.card-hover {
@apply hover:shadow-xl hover:shadow-slate-300/50 dark:hover:shadow-slate-900/50 hover:bg-slate-50 dark:hover:bg-slate-800;
}
.container-panel {
@apply bg-slate-50 dark:bg-slate-800 rounded-xl p-6 m-4 border border-slate-200 dark:border-slate-700 shadow-sm;
}
/* Formulare - Keine Transitions */
.form-input {
@apply w-full rounded-xl border-2 border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-4 py-3 text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 dark:focus:ring-blue-400/20;
}
.form-label {
@apply block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2;
}
.form-group {
@apply mb-6;
}
.form-help {
@apply mt-1 text-xs text-slate-500 dark:text-slate-400;
}
.form-error {
@apply mt-1 text-xs text-red-600 dark:text-red-400 font-medium;
}
/* Buttons - Keine Transitions */
.btn-icon {
@apply inline-flex items-center justify-center rounded-xl p-3 shadow-md hover:shadow-lg;
}
.btn-text {
@apply inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold shadow-md hover:shadow-lg;
}
.btn-rounded {
@apply rounded-full;
}
.btn-sm {
@apply px-4 py-2 text-xs;
}
.btn-lg {
@apply px-8 py-4 text-base;
}
/* Badges und Tags - Keine Transitions */
.badge {
@apply inline-flex items-center rounded-full px-3 py-1.5 text-xs font-semibold shadow-sm;
}
.badge-blue {
@apply bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700;
}
.badge-green {
@apply bg-green-100 text-green-800 border border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700;
}
.badge-red {
@apply bg-red-100 text-red-800 border border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-700;
}
.badge-yellow {
@apply bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-700;
}
.badge-purple {
@apply bg-purple-100 text-purple-800 border border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700;
}
/* Status Anzeigen - Keine Animation */
.status-dot {
@apply relative flex h-3 w-3 rounded-full shadow-sm;
}
.status-dot::after {
@apply absolute top-0 left-0 h-full w-full rounded-full content-[''] opacity-75;
}
.status-online {
@apply bg-green-500 dark:bg-green-400;
}
.status-online::after {
@apply bg-green-500 dark:bg-green-400;
}
.status-offline {
@apply bg-red-500 dark:bg-red-400;
}
.status-warning {
@apply bg-yellow-500 dark:bg-yellow-400;
}
.status-warning::after {
@apply bg-yellow-500 dark:bg-yellow-400;
}
/* Tabellen - Keine Transitions */
.table-container {
@apply w-full overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-700 shadow-lg bg-white dark:bg-slate-900;
}
.table-styled {
@apply w-full whitespace-nowrap text-left text-sm text-slate-700 dark:text-slate-300;
}
.table-styled thead {
@apply bg-slate-100 dark:bg-slate-800;
}
.table-styled th {
@apply px-6 py-4 font-semibold text-slate-900 dark:text-white;
}
.table-styled tbody tr {
@apply border-t border-slate-200 dark:border-slate-700;
}
.table-styled tbody tr:hover {
@apply bg-slate-50 dark:bg-slate-800/50;
}
.table-styled td {
@apply px-6 py-4;
}
/* Alerts - Keine Transitions */
.alert {
@apply rounded-xl border-2 p-6 mb-4 shadow-lg;
}
.alert-info {
@apply bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-600 text-blue-900 dark:text-blue-200;
}
.alert-success {
@apply bg-green-50 dark:bg-green-900/20 border-green-300 dark:border-green-600 text-green-900 dark:text-green-200;
}
.alert-warning {
@apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-300 dark:border-yellow-600 text-yellow-900 dark:text-yellow-200;
}
.alert-error {
@apply bg-red-50 dark:bg-red-900/20 border-red-300 dark:border-red-600 text-red-900 dark:text-red-200;
}
/* Navigation - Keine Transitions */
.nav-tab {
@apply inline-flex items-center gap-2 px-6 py-3 border-b-2 text-sm font-semibold;
}
.nav-tab-active {
@apply border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 rounded-t-lg;
}
.nav-tab-inactive {
@apply border-transparent text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-t-lg;
}
/* Navigation Links - Keine Transitions */
.nav-link {
@apply flex items-center gap-3 px-4 py-3 rounded-xl text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white font-medium;
}
.nav-link.active {
@apply bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-semibold shadow-sm;
}
/* Printer Status - Statisch */
.printer-status {
@apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold shadow-sm border;
}
.printer-ready {
@apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-700;
}
.printer-busy {
@apply bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-200 dark:border-orange-700;
}
.printer-error {
@apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700;
}
.printer-offline {
@apply bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600;
}
.printer-maintenance {
@apply bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border-purple-200 dark:border-purple-700;
}
/* Job Status - Statisch */
.job-status {
@apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold shadow-sm border;
}
.job-queued {
@apply bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600;
}
.job-printing {
@apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-700;
}
.job-completed {
@apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-700;
}
.job-failed {
@apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700;
}
.job-cancelled {
@apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700;
}
.job-paused {
@apply bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border-purple-200 dark:border-purple-700;
}
/* Buttons - Keine Transitions */
.btn {
@apply px-6 py-3 rounded-xl focus:outline-none focus:ring-4 shadow-lg hover:shadow-xl font-semibold;
}
.btn-primary {
@apply btn bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500/50 shadow-blue-500/25;
}
.btn-secondary {
@apply btn bg-slate-200 hover:bg-slate-300 text-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white focus:ring-slate-500/50;
}
.btn-danger {
@apply btn bg-red-600 hover:bg-red-700 text-white focus:ring-red-500/50 shadow-red-500/25;
}
.btn-success {
@apply btn bg-green-600 hover:bg-green-700 text-white focus:ring-green-500/50 shadow-green-500/25;
}
/* Mercedes Design-Komponenten - Vereinfacht */
.mercedes-glass {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.dark .mercedes-glass {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Gradients - Statisch */
.professional-gradient {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%);
}
.dark .professional-gradient {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
}
/* Mercedes-Pattern */
.mercedes-pattern {
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 2px, transparent 2px);
background-size: 60px 60px;
}
.dark .mercedes-pattern {
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 2px, transparent 2px);
background-size: 60px 60px;
}
/* Schatten - Statisch */
.professional-shadow {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 8px 16px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
.dark .professional-shadow {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 8px 16px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* Button Styles - Vereinfacht */
.professional-button {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.dark .professional-button {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}
.professional-button:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}
.dark .professional-button:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.3);
}
/* Input Fields - Vereinfacht */
.input-field {
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(203, 213, 225, 0.8);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.dark .input-field {
background: rgba(51, 65, 85, 0.95);
border: 2px solid rgba(71, 85, 105, 0.8);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.input-field:focus {
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
border-color: #3b82f6;
background: rgba(255, 255, 255, 1);
}
.dark .input-field:focus {
background: rgba(51, 65, 85, 1);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}
/* Cards - Vereinfacht */
.professional-card {
border-radius: 1.5rem;
overflow: hidden;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(203, 213, 225, 0.5);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.dark .professional-card {
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(71, 85, 105, 0.5);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.professional-card:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.dark .professional-card:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
/* Navigation - Vereinfacht */
.nav-item {
position: relative;
border-radius: 0.75rem;
}
.nav-item::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
.nav-item:hover::after,
.nav-item.active::after {
width: 100%;
}
/* Header-Stile */
.hero-header {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border: 1px solid rgba(203, 213, 225, 0.5);
}
.dark .hero-header {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border: 1px solid rgba(71, 85, 105, 0.5);
}
/* Container */
.main-container {
background: rgba(248, 250, 252, 0.8);
}
.dark .main-container {
background: rgba(15, 23, 42, 0.8);
}
/* Status Badges - Vereinfacht */
.status-badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
border-radius: 9999px;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: 0.025em;
}
/* Keine globalen Transitions */
* {
transition: none !important;
animation: none !important;
}
/* Interactive Hover - Vereinfacht */
.interactive-hover:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.dark .interactive-hover:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Loading States - Keine Animation */
.loading-shimmer {
background: #f1f5f9;
}
.dark .loading-shimmer {
background: #334155;
}
/* Focus Indicators */
.focus-ring:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
.dark .focus-ring:focus {
outline: 3px solid #60a5fa;
}
/* Typography */
.professional-title {
background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.025em;
}
.dark .professional-title {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Responsive Design */
@media (max-width: 768px) {
.professional-shadow {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.professional-card {
border-radius: 1rem;
}
}
/* Keine Animationen */
.fade-in,
.slide-up {
/* Keine Animation */
}
/* Root Variablen */
:root {
--mercedes-primary: #3b82f6;
--mercedes-secondary: #64748b;
--mercedes-accent: #1d4ed8;
--shadow-light: rgba(0, 0, 0, 0.1);
--shadow-dark: rgba(0, 0, 0, 0.3);
}
.dark {
--shadow-light: rgba(0, 0, 0, 0.2);
--shadow-dark: rgba(0, 0, 0, 0.5);
}
}

74
backend/static/css/glassmorphism-optimized.css Normal file
View File

@ -0,0 +1,74 @@
/**
* Optimized Glassmorphism Effects for Raspberry Pi
* Performance-optimized version with effects only on navbar
*/
/* Glassmorphism nur für Navbar */
.navbar::before,
.glass-nav {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark .navbar::before,
.dark .glass-nav {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
/* Alle anderen Glass-Effekte entfernt für Performance */
.glass-base,
.glass-card,
.glass-btn,
.glass-input,
.glass-dropdown,
.glass-modal,
.glass-sidebar,
.glass-header,
.glass-footer,
.glass-table,
.glass-badge,
.glass-alert,
.glass-tooltip,
.glass-progress,
.glass-tab {
/* Keine Effekte - nur einfache Hintergründe */
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.dark .glass-base,
.dark .glass-card,
.dark .glass-btn,
.dark .glass-input,
.dark .glass-dropdown,
.dark .glass-modal,
.dark .glass-sidebar,
.dark .glass-header,
.dark .glass-footer,
.dark .glass-table,
.dark .glass-badge,
.dark .glass-alert,
.dark .glass-tooltip,
.dark .glass-progress,
.dark .glass-tab {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Utility Classes - Keine Effekte */
.glass-light { background: rgba(255, 255, 255, 0.9); }
.glass-dark { background: rgba(0, 0, 0, 0.9); }
.glass-blur-none { /* Kein Blur */ }
.glass-blur-sm { /* Kein Blur */ }
.glass-blur-md { /* Kein Blur */ }
.glass-blur-lg { /* Kein Blur */ }
.glass-blur-xl { /* Kein Blur */ }
/* Border Utilities */
.glass-border-light { border-color: rgba(255, 255, 255, 0.2); }
.glass-border-dark { border-color: rgba(0, 0, 0, 0.2); }
/* Keine Hover-Effekte für Performance */

310
backend/static/css/professional-theme-optimized.css Normal file
View File

@ -0,0 +1,310 @@
/**
* 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;
}