"Update database configuration and assets for theming consistency"
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Mercedes Deep Black Theme - Professional Grid Layouts */
|
||||
/* Professional Mercedes-Benz Theme für Dashboard-Stil */
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light Mode Farben */
|
||||
@@ -12,16 +12,16 @@
|
||||
--color-text-secondary: #334155;
|
||||
--color-text-muted: #64748b;
|
||||
--color-border-primary: #e2e8f0;
|
||||
--color-accent: #000000; /* Mercedes-Benz Schwarz statt Blau */
|
||||
--color-accent: #000000; /* Mercedes-Benz Schwarz */
|
||||
--color-accent-hover: #333333;
|
||||
--color-accent-text: #ffffff;
|
||||
--color-shadow: rgba(0, 0, 0, 0.1);
|
||||
--card-radius: 1rem; /* Abgerundete Ecken für Karten */
|
||||
--card-radius: 1rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Mercedes Deep Black Dark Mode */
|
||||
--color-bg-primary: #000000; /* Tiefes Schwarz wie Dashboard */
|
||||
/* Tiefschwarzer Dark Mode wie Dashboard */
|
||||
--color-bg-primary: #000000; /* Tiefes Schwarz */
|
||||
--color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */
|
||||
--color-text-primary: #ffffff;
|
||||
--color-text-secondary: #e2e8f0;
|
||||
@@ -30,145 +30,359 @@
|
||||
--color-accent: #ffffff; /* Reines Weiß */
|
||||
--color-accent-hover: #f0f0f0;
|
||||
--color-accent-text: #000000;
|
||||
--color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */
|
||||
--color-shadow: rgba(0, 0, 0, 0.8);
|
||||
--mb-black: #000000; /* Mercedes-Benz Schwarz */
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white dark:bg-mercedes-black text-slate-900 dark:text-white transition-colors duration-300;
|
||||
@apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background: #000000; /* Reines Schwarz wie Dashboard */
|
||||
background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
|
||||
}
|
||||
|
||||
/* Professionelle Navbar mit Glassmorphismus */
|
||||
nav {
|
||||
@apply bg-white/80 dark:bg-black/80 backdrop-blur-professional border-b border-gray-200/70 dark:border-slate-700/20 shadow-professional-dark transition-all duration-300;
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
}
|
||||
|
||||
/* Benutzer-Dropdown */
|
||||
#user-dropdown {
|
||||
@apply absolute right-0 mt-2 w-64 bg-white/80 dark:bg-black/80 backdrop-blur-professional border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-professional-dark transition-all duration-200 z-50;
|
||||
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mercedes Professional Grid System */
|
||||
/* Professional Components mit Dashboard-Styling */
|
||||
@layer components {
|
||||
/* Dashboard-style Container */
|
||||
.mercedes-container {
|
||||
|
||||
/* Optimierte Abstände für bessere Übersicht */
|
||||
.content-spacing {
|
||||
@apply space-y-8;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
|
||||
}
|
||||
|
||||
.widget-grid {
|
||||
@apply grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
@apply grid grid-cols-2 md:grid-cols-4 gap-6;
|
||||
}
|
||||
|
||||
/* Professional Glassmorphismus Container */
|
||||
.professional-container {
|
||||
@apply bg-white/80 dark:bg-black/80 backdrop-blur-professional rounded-2xl border border-white/20 dark:border-white/10 shadow-professional-dark p-8 lg:p-12 transition-all duration-300;
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
}
|
||||
|
||||
.professional-container:hover {
|
||||
@apply transform -translate-y-1 shadow-glass-dark;
|
||||
}
|
||||
|
||||
/* Professional Hero Header */
|
||||
.professional-hero {
|
||||
@apply relative overflow-hidden rounded-3xl mx-6 mb-8 shadow-professional-dark;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.9) 0%,
|
||||
rgba(248, 250, 252, 0.8) 100%);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
}
|
||||
|
||||
.dark .professional-hero {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(0, 0, 0, 0.9) 0%,
|
||||
rgba(10, 10, 10, 0.8) 100%);
|
||||
}
|
||||
|
||||
/* Hero Pattern Overlay */
|
||||
.hero-pattern {
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
||||
radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
background-position: 0 0, 25px 25px;
|
||||
}
|
||||
|
||||
.dark .hero-pattern {
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
||||
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* Mercedes Glassmorphismus Cards */
|
||||
.mb-glass {
|
||||
@apply bg-white/80 dark:bg-black/80 backdrop-blur-professional border border-white/20 dark:border-white/10 rounded-2xl shadow-glass-dark transition-all duration-300;
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
}
|
||||
|
||||
.mb-glass:hover {
|
||||
@apply transform -translate-y-1 shadow-professional-dark;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.dark .mb-glass:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
/* Professional Buttons */
|
||||
.btn-professional {
|
||||
@apply bg-professional-primary hover:bg-professional-primary/90 text-professional-secondary border-none rounded-xl px-6 py-3 font-semibold text-sm uppercase tracking-wide transition-all duration-300 shadow-professional backdrop-blur-sm;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-professional::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn-professional:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-professional:hover {
|
||||
@apply transform -translate-y-1 shadow-professional-dark;
|
||||
}
|
||||
|
||||
.btn-secondary-professional {
|
||||
@apply bg-white/80 dark:bg-black/80 text-professional-primary border-2 border-professional-primary/20 rounded-xl px-6 py-3 font-semibold text-sm transition-all duration-300 shadow-card-professional backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.btn-secondary-professional:hover {
|
||||
@apply border-professional-primary transform -translate-y-1 shadow-professional;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.dark .btn-secondary-professional:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.btn-success-professional {
|
||||
@apply bg-professional-success hover:bg-professional-success/90 text-white border-none rounded-xl px-6 py-3 font-semibold text-sm uppercase tracking-wide transition-all duration-300 shadow-professional backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.btn-danger-professional {
|
||||
@apply bg-professional-error hover:bg-professional-error/90 text-white border-none rounded-xl px-6 py-3 font-semibold text-sm uppercase tracking-wide transition-all duration-300 shadow-professional backdrop-blur-sm;
|
||||
}
|
||||
|
||||
/* Professional Input Fields */
|
||||
.input-professional {
|
||||
@apply bg-white/80 dark:bg-black/80 border-2 border-professional-primary/20 rounded-lg px-4 py-3 text-professional-primary text-sm transition-all duration-300 shadow-card-professional backdrop-blur-sm;
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(150%);
|
||||
}
|
||||
|
||||
.input-professional:focus {
|
||||
@apply border-professional-primary shadow-professional transform -translate-y-0.5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-professional::placeholder {
|
||||
@apply text-professional-muted;
|
||||
}
|
||||
|
||||
/* Dashboard-Style Statistics Cards */
|
||||
.stat-card, .mb-stat-card {
|
||||
@apply bg-white/80 dark:bg-black/80 backdrop-blur-professional rounded-2xl border border-white/20 dark:border-white/10 p-6 shadow-professional-dark transition-all duration-300 hover:transform hover:-translate-y-1;
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Professional Typography */
|
||||
.title-professional {
|
||||
@apply font-bold tracking-tight leading-tight;
|
||||
background: linear-gradient(135deg,
|
||||
var(--color-text-primary) 0%,
|
||||
var(--color-text-secondary) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.subtitle-professional {
|
||||
@apply text-professional-muted font-normal leading-relaxed;
|
||||
}
|
||||
|
||||
.text-professional-primary {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.text-professional-secondary {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.text-professional-muted {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.text-professional-accent {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Professional Background */
|
||||
.bg-professional {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.dark .bg-professional {
|
||||
background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
|
||||
}
|
||||
|
||||
/* Status Dots */
|
||||
.status-dot {
|
||||
@apply w-3 h-3 rounded-full inline-block relative;
|
||||
}
|
||||
|
||||
.status-dot.status-online {
|
||||
@apply bg-professional-success;
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
|
||||
animation: pulse-professional 2s infinite;
|
||||
}
|
||||
|
||||
.status-dot.status-offline {
|
||||
@apply bg-professional-error;
|
||||
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
/* Professional Shadow Effects */
|
||||
.professional-shadow {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .professional-shadow {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
/* Filter Buttons Mercedes Style */
|
||||
.filter-btn-mercedes {
|
||||
@apply bg-transparent text-professional-muted border-none rounded-lg px-4 py-2 font-medium text-sm transition-all duration-300 cursor-pointer;
|
||||
}
|
||||
|
||||
.filter-btn-mercedes:hover {
|
||||
@apply text-professional-primary bg-white/10 dark:bg-black/10;
|
||||
}
|
||||
|
||||
.filter-btn-mercedes.active {
|
||||
@apply bg-professional-accent text-white shadow-professional;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optimierte Responsive Breakpoints für bessere Übersicht */
|
||||
@layer utilities {
|
||||
.container-professional {
|
||||
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* Grid Layouts wie Dashboard */
|
||||
.stats-grid {
|
||||
@apply grid gap-card-md;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
.grid-professional {
|
||||
@apply grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
.stats-grid {
|
||||
@apply grid-cols-stats-tablet gap-card-md;
|
||||
}
|
||||
.grid-stats {
|
||||
@apply grid gap-4 grid-cols-2 md:grid-cols-4;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
.stats-grid {
|
||||
@apply grid-cols-stats-desktop gap-card-lg;
|
||||
}
|
||||
.spacing-professional {
|
||||
@apply space-y-8 lg:space-y-12;
|
||||
}
|
||||
|
||||
/* Card Grid für Drucker/Jobs etc. */
|
||||
.cards-grid {
|
||||
@apply grid gap-card-md;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.cards-grid {
|
||||
@apply grid-cols-cards-tablet gap-card-md;
|
||||
}
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
.cards-grid {
|
||||
@apply grid-cols-cards-desktop gap-card-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@screen xl {
|
||||
.cards-grid {
|
||||
@apply grid-cols-wide-desktop gap-card-lg;
|
||||
}
|
||||
}
|
||||
|
||||
/* Professional Section Spacing */
|
||||
.section-spacing {
|
||||
@apply space-y-10;
|
||||
}
|
||||
|
||||
/* Mercedes Deep Black Cards */
|
||||
.mercedes-card {
|
||||
@apply bg-white/90 dark:bg-deep-black-surface/90 backdrop-blur-mercedes border border-gray-200/50 dark:border-deep-black-border/50 rounded-mercedes p-6 shadow-card-dark hover:shadow-mercedes-hover transition-all duration-400 hover:-translate-y-1;
|
||||
}
|
||||
|
||||
/* Dashboard-style Stats Cards */
|
||||
.dashboard-stat-card {
|
||||
@apply mercedes-card relative overflow-hidden;
|
||||
}
|
||||
|
||||
.dashboard-stat-card::before {
|
||||
content: '';
|
||||
@apply absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-status-info via-status-success to-status-warning;
|
||||
}
|
||||
|
||||
/* Professional Hero Sections */
|
||||
.mercedes-hero {
|
||||
@apply relative bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-mercedes-black dark:via-mercedes-dark-gray dark:to-mercedes-black py-16 lg:py-24 overflow-hidden;
|
||||
}
|
||||
|
||||
.mercedes-hero::before {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent dark:via-white/5 opacity-50;
|
||||
}
|
||||
|
||||
/* Button System - Dashboard Style */
|
||||
.btn-mercedes {
|
||||
@apply px-6 py-3 rounded-card font-semibold text-sm uppercase tracking-wide transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 backdrop-blur-mercedes border;
|
||||
}
|
||||
|
||||
.btn-mercedes-primary {
|
||||
@apply btn-mercedes bg-mercedes-black/90 dark:bg-white/90 text-white dark:text-black border-mercedes-black/20 dark:border-white/20 hover:bg-mercedes-black dark:hover:bg-white shadow-mercedes-glass hover:shadow-mercedes-hover;
|
||||
}
|
||||
|
||||
.btn-mercedes-secondary {
|
||||
@apply btn-mercedes bg-white/20 dark:bg-white/10 text-gray-900 dark:text-white border-white/30 dark:border-white/20 hover:bg-white/30 dark:hover:bg-white/20 shadow-mercedes-glass;
|
||||
}
|
||||
|
||||
/* Status Indicators - Dashboard Style */
|
||||
.status-indicator-mercedes {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
@apply status-indicator-mercedes bg-status-online/20 text-status-online border border-status-online/30;
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
@apply status-indicator-mercedes bg-status-offline/20 text-status-offline border border-status-offline/30;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
@apply status-indicator-mercedes bg-status-warning/20 text-status-warning border border-status-warning/30;
|
||||
}
|
||||
|
||||
/* Professional Form Elements */
|
||||
.form-input-mercedes {
|
||||
@apply w-full px-4 py-3 bg-white/80 dark:bg-deep-black-surface/80 border border-gray-300/50 dark:border-deep-black-border rounded-card text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-deep-black-text-muted focus:outline-none focus:ring-2 focus:ring-mercedes-black/50 dark:focus:ring-white/50 focus:border-transparent transition-all duration-300 backdrop-blur-mercedes;
|
||||
}
|
||||
|
||||
/* Grid Gap Utilities - Dashboard Consistent */
|
||||
.gap-dashboard {
|
||||
@apply gap-6 lg:gap-8;
|
||||
}
|
||||
|
||||
.gap-cards {
|
||||
@apply gap-4 md:gap-6;
|
||||
}
|
||||
|
||||
.gap-stats {
|
||||
@apply gap-4 lg:gap-6;
|
||||
.padding-professional {
|
||||
@apply p-6 lg:p-8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Keyframe Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-professional {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Optimierungen für bessere Übersicht */
|
||||
@media (max-width: 768px) {
|
||||
.professional-hero {
|
||||
@apply mx-4 rounded-2xl;
|
||||
}
|
||||
|
||||
.professional-container {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
@apply grid-cols-1 gap-4;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
@apply grid-cols-1 gap-4;
|
||||
}
|
||||
|
||||
.widget-grid {
|
||||
@apply grid-cols-1 gap-6;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user