645 lines
22 KiB
CSS
645 lines
22 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom Styles für Light und Dark Mode */
|
|
@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 statt Blau */
|
|
--color-accent-hover: #333333;
|
|
--color-accent-text: #ffffff;
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
--card-radius: 1rem; /* Abgerundete Ecken für Karten */
|
|
}
|
|
|
|
.dark {
|
|
/* Dark Mode Farben - Dunkler gemacht */
|
|
--color-bg-primary: #0a0f1a; /* Dunkler als vorher */
|
|
--color-bg-secondary: #131c2e; /* Dunkler als vorher */
|
|
--color-text-primary: #f8fafc;
|
|
--color-text-secondary: #e2e8f0;
|
|
--color-text-muted: #94a3b8;
|
|
--color-border-primary: #1e293b; /* Angepasst */
|
|
--color-accent: #f8fafc; /* Weiß statt Indigo */
|
|
--color-accent-hover: #e2e8f0;
|
|
--color-accent-text: #0f172a;
|
|
--color-shadow: rgba(0, 0, 0, 0.5); /* Dunklerer Schatten */
|
|
--mb-black: #000000; /* Mercedes-Benz Schwarz */
|
|
}
|
|
|
|
body {
|
|
@apply bg-white dark:bg-[#050505] text-slate-900 dark:text-slate-200 transition-colors duration-300;
|
|
}
|
|
|
|
/* Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */
|
|
nav {
|
|
@apply bg-white/60 dark:bg-black/60 backdrop-blur-xl border-b border-gray-200/70 dark:border-slate-700/20 shadow-lg transition-all duration-300;
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Benutzer-Dropdown Styles */
|
|
#user-dropdown {
|
|
@apply absolute right-0 mt-2 w-64 bg-white/60 dark:bg-black/60 backdrop-blur-xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-200 z-50;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: fadeIn 0.2s ease-out forwards;
|
|
}
|
|
}
|
|
|
|
/* Admin Panel spezifische Styles */
|
|
@layer components {
|
|
/* Dark Mode Styles für Admin Panel */
|
|
.dark .bg-dark-card {
|
|
@apply bg-dark-surface transition-colors;
|
|
}
|
|
|
|
/* Alternative direkte Definition ohne Zirkularität */
|
|
.bg-dark-surface {
|
|
background-color: #1e293b;
|
|
}
|
|
|
|
/* Übergangseffekt für alle Komponenten */
|
|
.transition-all-colors {
|
|
@apply transition-colors duration-300;
|
|
}
|
|
|
|
/* Admin Panel Container */
|
|
.admin-container {
|
|
@apply max-w-7xl mx-auto p-4 md:p-8;
|
|
}
|
|
|
|
/* Admin Stats Cards */
|
|
.admin-stats {
|
|
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8;
|
|
}
|
|
|
|
.stat-card {
|
|
@apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-5 relative overflow-hidden shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.stat-icon {
|
|
@apply absolute top-4 right-4 opacity-15 text-4xl;
|
|
}
|
|
|
|
.stat-title {
|
|
@apply text-sm text-slate-500 dark:text-slate-400 mb-2 font-medium uppercase;
|
|
}
|
|
|
|
.stat-value {
|
|
@apply text-2xl font-bold text-slate-900 dark:text-white mb-1;
|
|
}
|
|
|
|
.stat-desc {
|
|
@apply text-sm text-slate-500 dark:text-slate-400;
|
|
}
|
|
|
|
/* Navigation Tabs */
|
|
.nav-tabs {
|
|
@apply flex border-b border-gray-200 dark:border-slate-700/30 mb-4 overflow-x-auto;
|
|
}
|
|
|
|
.nav-tab {
|
|
@apply py-4 px-6 text-slate-600 dark:text-slate-300 border-b-2 border-transparent cursor-pointer transition-all duration-200 whitespace-nowrap hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50;
|
|
}
|
|
|
|
.nav-tab.active {
|
|
@apply text-slate-900 dark:text-white border-b-2 border-black dark:border-white font-medium;
|
|
}
|
|
|
|
/* Tab Content */
|
|
.tab-content {
|
|
@apply mt-8;
|
|
}
|
|
|
|
.tab-pane {
|
|
@apply hidden;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
@apply block;
|
|
}
|
|
|
|
/* Formulare für Admin Panel */
|
|
.form-group {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300;
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
@apply w-full px-3 py-2 bg-white/60 dark:bg-slate-800/60 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all duration-200 backdrop-blur-lg;
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Tabellen im Admin Panel */
|
|
.admin-table {
|
|
@apply min-w-full divide-y divide-gray-200 dark:divide-slate-700;
|
|
}
|
|
|
|
.admin-table thead {
|
|
@apply bg-slate-50 dark:bg-slate-800;
|
|
}
|
|
|
|
.admin-table th {
|
|
@apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider;
|
|
}
|
|
|
|
.admin-table tbody {
|
|
@apply bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-slate-700;
|
|
}
|
|
|
|
.admin-table tr {
|
|
@apply hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors;
|
|
}
|
|
|
|
.admin-table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge {
|
|
@apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
|
|
}
|
|
|
|
/* Drucker-Karten */
|
|
.printer-card {
|
|
@apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-6 shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.printer-header {
|
|
@apply flex justify-between items-center mb-4;
|
|
}
|
|
|
|
.printer-name {
|
|
@apply text-xl font-bold text-slate-900 dark:text-white;
|
|
}
|
|
|
|
.printer-actions {
|
|
@apply flex space-x-2;
|
|
}
|
|
|
|
.printer-info {
|
|
@apply grid grid-cols-2 gap-4 mb-4;
|
|
}
|
|
|
|
.printer-status {
|
|
@apply flex items-center mt-4;
|
|
}
|
|
|
|
/* Status Indikatoren */
|
|
.status-indicator {
|
|
@apply w-3 h-3 rounded-full mr-2;
|
|
}
|
|
|
|
.status-running {
|
|
@apply bg-green-500;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-stopped {
|
|
@apply bg-red-500;
|
|
}
|
|
|
|
/* Pulse Animation */
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Log-Einträge */
|
|
.log-entry {
|
|
@apply p-3 border-l-4 mb-2 rounded-r-lg bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors;
|
|
}
|
|
|
|
.log-debug {
|
|
@apply border-gray-400 dark:border-gray-500;
|
|
}
|
|
|
|
.log-info {
|
|
@apply border-blue-400 dark:border-blue-500;
|
|
}
|
|
|
|
.log-warning {
|
|
@apply border-yellow-400 dark:border-yellow-500;
|
|
}
|
|
|
|
.log-error {
|
|
@apply border-red-400 dark:border-red-500;
|
|
}
|
|
|
|
.log-critical {
|
|
@apply border-purple-400 dark:border-purple-500;
|
|
}
|
|
|
|
/* Scheduler Status */
|
|
.scheduler-status {
|
|
@apply flex items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 shadow-md;
|
|
}
|
|
|
|
/* Fortschrittsbalken */
|
|
.progress-bar {
|
|
@apply w-full h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
@apply h-full transition-all duration-300;
|
|
}
|
|
|
|
.progress-bar-fill-blue {
|
|
@apply bg-blue-500 dark:bg-blue-600;
|
|
}
|
|
|
|
.progress-bar-fill-green {
|
|
@apply bg-green-500 dark:bg-green-600;
|
|
}
|
|
|
|
.progress-bar-fill-purple {
|
|
@apply bg-purple-500 dark:bg-purple-600;
|
|
}
|
|
|
|
/* Benachrichtigungen */
|
|
.notification {
|
|
@apply fixed top-4 right-4 max-w-md p-4 rounded-lg shadow-lg transform translate-x-full opacity-0 transition-all duration-300 z-50 bg-white dark:bg-slate-800 border-l-4;
|
|
}
|
|
|
|
.notification.show {
|
|
@apply translate-x-0 opacity-100;
|
|
}
|
|
|
|
.notification-success {
|
|
@apply border-green-500;
|
|
}
|
|
|
|
.notification-error {
|
|
@apply border-red-500;
|
|
}
|
|
|
|
.notification-warning {
|
|
@apply border-yellow-500;
|
|
}
|
|
|
|
.notification-info {
|
|
@apply border-blue-500;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert {
|
|
@apply p-4 rounded-lg border mb-4;
|
|
}
|
|
|
|
.alert-success {
|
|
@apply bg-green-50 border-green-500 text-green-800 dark:bg-green-900/30 dark:text-green-200;
|
|
}
|
|
|
|
.alert-error {
|
|
@apply bg-red-50 border-red-500 text-red-800 dark:bg-red-900/30 dark:text-red-200;
|
|
}
|
|
|
|
.alert-warning {
|
|
@apply bg-yellow-50 border-yellow-500 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200;
|
|
}
|
|
|
|
.alert-info {
|
|
@apply bg-blue-50 border-blue-500 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200;
|
|
}
|
|
}
|
|
|
|
/* Glassmorphism Flash Messages */
|
|
.flash-message {
|
|
@apply fixed top-4 right-4 px-6 py-4 rounded-xl text-sm font-medium shadow-2xl transform transition-all duration-300 z-50 backdrop-blur-xl border border-white/20;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(120%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: slide-down 0.3s ease-out;
|
|
}
|
|
|
|
.flash-message.info {
|
|
@apply bg-blue-500/70 dark:bg-blue-600/70 text-white;
|
|
}
|
|
|
|
.flash-message.success {
|
|
@apply bg-green-500/70 dark:bg-green-600/70 text-white;
|
|
}
|
|
|
|
.flash-message.warning {
|
|
@apply bg-yellow-500/70 dark:bg-yellow-600/70 text-white;
|
|
}
|
|
|
|
.flash-message.error {
|
|
@apply bg-red-500/70 dark:bg-red-600/70 text-white;
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Mercedes Background Pattern */
|
|
.mercedes-background::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.03' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: 120px 120px;
|
|
pointer-events: none;
|
|
opacity: 0.03;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.dark .mercedes-background::before {
|
|
opacity: 0.02; /* Leicht reduziert für dunkleren Hintergrund */
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* Monochrome Button Styles */
|
|
@layer components {
|
|
/* Buttons im Light Mode Schwarz statt Blau */
|
|
.btn-primary {
|
|
@apply bg-black/80 hover:bg-gray-800/80 dark:bg-white/80 dark:hover:bg-gray-200/80 text-white dark:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 shadow-xl backdrop-blur-lg;
|
|
backdrop-filter: blur(16px) saturate(150%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(150%) brightness(110%);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-white/70 hover:bg-gray-100/70 dark:bg-slate-800/70 dark:hover:bg-slate-700/70 text-slate-900 dark:text-white border border-gray-300/60 dark:border-slate-700/60 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 shadow-xl backdrop-blur-lg;
|
|
backdrop-filter: blur(16px) saturate(150%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(150%) brightness(110%);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border-2 border-black/70 hover:bg-black/70 dark:border-white/70 dark:hover:bg-white/70 text-black hover:text-white dark:text-white dark:hover:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 backdrop-blur-lg;
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Glassmorphism Card mit abgerundeten Ecken */
|
|
.glass-card {
|
|
@apply bg-white/70 dark:bg-black/70 backdrop-blur-xl border border-gray-200/60 dark:border-slate-700/40 rounded-xl p-6 shadow-xl transition-all duration-300;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
|
|
/* Dashboard Cards mit schwarzem Hintergrund */
|
|
.dashboard-card {
|
|
@apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl p-6 shadow-xl transition-all duration-300;
|
|
backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
|
|
/* Navigation Styles */
|
|
.nav-link {
|
|
@apply flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:shadow-md;
|
|
}
|
|
|
|
.nav-link.active {
|
|
@apply text-slate-900 dark:text-white bg-slate-100 dark:bg-black shadow-sm;
|
|
}
|
|
|
|
/* Verbesserte Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */
|
|
.navbar {
|
|
@apply sticky top-0 z-50 backdrop-blur-2xl border-b border-gray-200/40 dark:border-slate-700/15 shadow-xl;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dark .navbar {
|
|
background: rgba(0, 0, 0, 0.5); /* Transparenter für stärkeren Glaseffekt */
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.navbar-brand {
|
|
@apply flex items-center space-x-2 transition-transform duration-300 hover:scale-105;
|
|
}
|
|
|
|
.navbar-menu {
|
|
@apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-2 rounded-full;
|
|
background: transparent;
|
|
}
|
|
|
|
.navbar-button {
|
|
@apply p-2 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
}
|
|
|
|
/* User Menu Styles */
|
|
.user-menu-button {
|
|
@apply flex items-center space-x-2 rounded-lg p-1 transition-all duration-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2;
|
|
}
|
|
|
|
.user-avatar {
|
|
@apply w-10 h-10 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-sm shadow-md transition-all duration-300 hover:shadow-lg;
|
|
}
|
|
|
|
/* Avatar im Dropdown */
|
|
.avatar-large {
|
|
@apply w-14 h-14 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-md;
|
|
}
|
|
|
|
.user-dropdown-item {
|
|
@apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300 focus:outline-none focus:bg-gray-100/80 dark:focus:bg-slate-700/60;
|
|
}
|
|
|
|
.user-dropdown-separator {
|
|
@apply border-t border-gray-200/80 dark:border-slate-700/30 my-1;
|
|
}
|
|
|
|
.menu-item {
|
|
@apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-full hover:bg-white/50 dark:hover:bg-slate-800/50 hover:text-slate-900 dark:hover:text-white transition-all duration-300 hover:shadow-md;
|
|
}
|
|
|
|
.menu-item.active {
|
|
@apply bg-white/60 dark:bg-black/60 text-slate-900 dark:text-white font-medium shadow-sm backdrop-blur-sm;
|
|
}
|
|
|
|
/* Dropdown Styles */
|
|
.user-dropdown {
|
|
@apply absolute right-0 mt-2 w-64 bg-white/70 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl z-50 overflow-hidden;
|
|
backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: fadeIn 0.2s ease-out forwards;
|
|
}
|
|
|
|
.dropdown-header {
|
|
@apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30;
|
|
}
|
|
|
|
.dropdown-item {
|
|
@apply flex items-center gap-3 px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
@apply border-t border-gray-200/80 dark:border-slate-700/30;
|
|
}
|
|
|
|
/* Mercedes-Benz Logo Animation */
|
|
@keyframes mercedes-rotate {
|
|
0% { transform: rotate(0deg); }
|
|
25% { transform: rotate(90deg); }
|
|
50% { transform: rotate(180deg); }
|
|
75% { transform: rotate(270deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.navbar-brand:hover svg {
|
|
animation: mercedes-rotate 5s infinite linear;
|
|
transform-origin: center;
|
|
}
|
|
}
|
|
|
|
/* Dark Mode Toggle - Schwarz statt Blau im Light Mode */
|
|
.dark-mode-toggle {
|
|
@apply p-3 rounded-full bg-black/80 hover:bg-gray-800/80 dark:bg-white/80 dark:hover:bg-gray-200/80 text-white dark:text-slate-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 shadow-xl;
|
|
backdrop-filter: blur(12px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
min-width: 42px;
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Animation für Dropdown */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.dropdown-animation {
|
|
animation: fadeIn 0.2s ease-out forwards;
|
|
}
|
|
|
|
/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
|
|
.mb-stat-card {
|
|
background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%);
|
|
color: #0f172a;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: none;
|
|
border-radius: var(--card-radius);
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dark .mb-stat-card {
|
|
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); /* Noch dunkleres Schwarz */
|
|
color: var(--text-primary, #f8fafc);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Stats und Jobs Page Card Styles */
|
|
.stats-card, .job-card {
|
|
@apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300;
|
|
backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
|
|
/* Footer Styling */
|
|
footer {
|
|
@apply bg-white/60 dark:bg-black/60 backdrop-blur-xl border-t border-gray-200/70 dark:border-slate-700/20 transition-all duration-300;
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Dropdown Pfeil Animation */
|
|
.dropdown-arrow {
|
|
@apply transition-transform duration-300;
|
|
}
|
|
|
|
/* Mercedes-Benz Hintergrund mit Star-Pattern */
|
|
.mercedes-star-bg {
|
|
position: relative;
|
|
}
|
|
|
|
.mercedes-star-bg::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: 40px 40px;
|
|
z-index: -1;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
.dark .mercedes-star-bg::after {
|
|
opacity: 0.03;
|
|
filter: invert(1);
|
|
} |