389 lines
11 KiB
CSS
389 lines
11 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Professional Mercedes-Benz Theme für Dashboard-Stil */
|
|
@layer base {
|
|
:root {
|
|
/* Light Mode Farben */
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #f8fafc;
|
|
--color-text-primary: #0f172a;
|
|
--color-text-secondary: #334155;
|
|
--color-text-muted: #64748b;
|
|
--color-border-primary: #e2e8f0;
|
|
--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;
|
|
}
|
|
|
|
.dark {
|
|
/* 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;
|
|
--color-text-muted: #94a3b8;
|
|
--color-border-primary: #1a1a1a; /* Dunkler Rahmen */
|
|
--color-accent: #ffffff; /* Reines Weiß */
|
|
--color-accent-hover: #f0f0f0;
|
|
--color-accent-text: #000000;
|
|
--color-shadow: rgba(0, 0, 0, 0.8);
|
|
--mb-black: #000000; /* Mercedes-Benz Schwarz */
|
|
}
|
|
|
|
body {
|
|
@apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.dark body {
|
|
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%);
|
|
}
|
|
}
|
|
|
|
/* Professional Components mit Dashboard-Styling */
|
|
@layer components {
|
|
|
|
/* 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-professional {
|
|
@apply grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
|
|
}
|
|
|
|
.grid-stats {
|
|
@apply grid gap-4 grid-cols-2 md:grid-cols-4;
|
|
}
|
|
|
|
.spacing-professional {
|
|
@apply space-y-8 lg:space-y-12;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|