🎨 Style: Complete CSS Enhancement Package
- Erweiterte Table-Optimierungen für bessere Datenvisualisierung - Tooltip-System mit Backdrop-Filter Integration - Badge & Status-Komponenten für bessere UX - Responsive Design Verbesserungen für Mobile - Performance-Optimierungen (Reduced Motion, High Contrast) - Print-Styles für professionelle Dokumente - Enhanced Utility Classes und Scrollbar-Styling - Loading States und Status Indicators - Hover Effects für interaktive Elemente 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@ -1059,86 +1059,167 @@ body {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dark .card {
|
||||
border: 1px solid var(--border-primary);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
/* === TABLE OPTIMIERUNGEN === */
|
||||
.table {
|
||||
@apply w-full border-collapse;
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden;
|
||||
margin: 1rem 0;
|
||||
background: var(--bg-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.dark .card:hover {
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
.table th {
|
||||
@apply text-left text-sm font-medium uppercase tracking-wider;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-tertiary);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.dark .form-input {
|
||||
border: 1px solid var(--border-primary);
|
||||
.table td {
|
||||
@apply text-sm;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: var(--hover-card);
|
||||
}
|
||||
|
||||
.dark .table {
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.dark .form-input:focus {
|
||||
border-color: var(--border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
|
||||
.dark .table th {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.dark .alert-info {
|
||||
background: rgba(0, 115, 206, 0.15);
|
||||
border-color: var(--mb-primary);
|
||||
color: #60a5fa;
|
||||
.dark .table td {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dark .alert-success {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
border-color: var(--text-success);
|
||||
color: #4ade80;
|
||||
/* === TOOLTIPS === */
|
||||
.tooltip {
|
||||
@apply absolute z-50 text-sm;
|
||||
background: var(--bg-modal);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 8px !important;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 0.25rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.dark .alert-warning {
|
||||
background: rgba(251, 191, 36, 0.15);
|
||||
border-color: var(--text-warning);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.dark .alert-error {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
border-color: var(--text-error);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* === UNIVERSAL CONTAINER STYLES === */
|
||||
div:not(nav):not(.navbar-sticky), section, article, main, header, footer, .container, .wrapper {
|
||||
/* === BADGES & STATUS === */
|
||||
.badge {
|
||||
@apply inline-flex items-center text-xs font-medium;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 12px !important;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin: 0.125rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.badge-primary { background: var(--mb-primary); color: var(--mb-white); border-color: transparent; }
|
||||
.badge-success { background: var(--text-success); color: var(--mb-white); border-color: transparent; }
|
||||
.badge-warning { background: var(--text-warning); color: var(--mb-white); border-color: transparent; }
|
||||
.badge-error { background: var(--text-error); color: var(--mb-white); border-color: transparent; }
|
||||
|
||||
/* === RESPONSIVE OPTIMIERUNGEN === */
|
||||
@media (max-width: 768px) {
|
||||
.modal, .mercedes-modal {
|
||||
margin: 0.5rem;
|
||||
max-width: calc(100% - 1rem);
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.card, .dashboard-card {
|
||||
border-radius: 12px !important;
|
||||
margin: 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply text-sm;
|
||||
padding: 0.625rem 1rem;
|
||||
margin: 0.125rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-input, input, textarea, select {
|
||||
padding: 0.75rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 8px;
|
||||
font-size: 16px; /* Verhindert Zoom auf iOS */
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 0.75rem;
|
||||
margin: 0.125rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.navbar-sticky {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* === PERFORMANCE OPTIMIERUNGEN === */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.glass, .glass-card {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* === HIGH CONTRAST MODE === */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--border-primary: #000000;
|
||||
--text-primary: #000000;
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--border-primary: #ffffff;
|
||||
--text-primary: #ffffff;
|
||||
--shadow-sm: 0 1px 3px rgba(255, 255, 255, 0.3);
|
||||
--shadow-md: 0 4px 6px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* === PRINT STYLES === */
|
||||
@media print {
|
||||
.modal-overlay, .tooltip, .btn, .navbar-sticky, .mobile-menu {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.card, .dashboard-card {
|
||||
box-shadow: none;
|
||||
border: 1px solid #000000;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
body {
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* === ENHANCED UTILITY CLASSES === */
|
||||
.container, .wrapper, .content {
|
||||
padding: 2rem;
|
||||
margin: 1rem;
|
||||
border-radius: 20px !important;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 2.5rem;
|
||||
margin: 1.5rem 0;
|
||||
border-radius: 24px !important;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* === ENHANCED PADDING SYSTEM === */
|
||||
.p-xs { padding: 0.5rem !important; }
|
||||
.p-sm { padding: 1rem !important; }
|
||||
.p-md { padding: 1.5rem !important; }
|
||||
.p-lg { padding: 2rem !important; }
|
||||
.p-xl { padding: 3rem !important; }
|
||||
|
||||
.m-xs { margin: 0.25rem !important; }
|
||||
.m-sm { margin: 0.5rem !important; }
|
||||
.m-md { margin: 1rem !important; }
|
||||
.m-lg { margin: 1.5rem !important; }
|
||||
.m-xl { margin: 2rem !important; }
|
||||
|
||||
.theme-transition {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@ -1158,4 +1239,110 @@ div:not(nav):not(.navbar-sticky), section, article, main, header, footer, .conta
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.transition-fast { transition: all 0.15s ease; }
|
||||
.transition-normal { transition: all 0.2s ease; }
|
||||
.transition-slow { transition: all 0.3s ease; }
|
||||
|
||||
/* === SCROLLBAR STYLING === */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-primary);
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-primary);
|
||||
}
|
||||
|
||||
/* === LOADING STATES === */
|
||||
.loading {
|
||||
@apply animate-pulse;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@apply animate-spin rounded-full;
|
||||
border: 2px solid var(--border-primary);
|
||||
border-top-color: var(--text-accent);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* === STATUS INDICATORS === */
|
||||
.status-online { color: var(--text-success); }
|
||||
.status-offline { color: var(--text-error); }
|
||||
.status-warning { color: var(--text-warning); }
|
||||
.status-info { color: var(--text-accent); }
|
||||
|
||||
.status-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.status-dot.online { background: var(--text-success); }
|
||||
.status-dot.offline { background: var(--text-error); }
|
||||
.status-dot.warning { background: var(--text-warning); }
|
||||
.status-dot.info { background: var(--text-accent); }
|
||||
|
||||
/* === HOVER EFFECTS === */
|
||||
.hover-lift {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
Reference in New Issue
Block a user