feat: Erweiterung der Druckerstatusüberprüfung durch Implementierung einer Steckdosenabfrage für Drucker. Verbesserung der Benutzeroberfläche mit optimierten Dark Mode-Elementen und neuen Statusanzeigen für Drucker. Anpassungen in den Templates zur Unterstützung dynamischer Statusinformationen und zur Verbesserung der Benutzererfahrung. Aktualisierung der CSS-Styles für ein ansprechenderes Design und bessere Benutzerinteraktion.
This commit is contained in:
@@ -20,22 +20,28 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark Mode Farben - Dunkler gemacht */
|
||||
--color-bg-primary: #0a0f1a; /* Dunkler als vorher */
|
||||
--color-bg-secondary: #131c2e; /* Dunkler als vorher */
|
||||
--color-text-primary: #f8fafc;
|
||||
/* Dark Mode Farben - Noch dunkler und eleganter */
|
||||
--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: #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 */
|
||||
--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); /* Sehr dunkler 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;
|
||||
@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%);
|
||||
}
|
||||
|
||||
/* Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */
|
||||
@@ -407,25 +413,98 @@
|
||||
}
|
||||
|
||||
.dark .mercedes-background::before {
|
||||
opacity: 0.02; /* Leicht reduziert für dunkleren Hintergrund */
|
||||
filter: invert(1);
|
||||
opacity: 0.015; /* Sehr subtil für eleganten Dark Mode */
|
||||
filter: invert(1) brightness(0.3);
|
||||
background-size: 150px 150px; /* Größere Sterne für bessere Sichtbarkeit */
|
||||
}
|
||||
|
||||
/* Monochrome Button Styles */
|
||||
@layer components {
|
||||
/* Buttons im Light Mode Schwarz statt Blau */
|
||||
/* Buttons mit verstärktem Glassmorphism */
|
||||
.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);
|
||||
@apply 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-2xl hover:-translate-y-0.5;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||
0 8px 16px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.4),
|
||||
0 10px 20px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.dark .btn-primary {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.2),
|
||||
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .btn-primary:hover {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.3),
|
||||
0 10px 20px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.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);
|
||||
@apply text-slate-900 dark:text-white 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-2xl hover:-translate-y-0.5;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.2),
|
||||
0 10px 20px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.dark .btn-secondary {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||
0 8px 16px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .btn-secondary:hover {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.4),
|
||||
0 10px 20px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@@ -435,23 +514,59 @@
|
||||
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 */
|
||||
/* Glassmorphism Card mit abgerundeten Ecken - Verstärkt */
|
||||
.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);
|
||||
@apply rounded-xl p-6 shadow-2xl transition-all duration-300;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
.dark .glass-card {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.4),
|
||||
0 8px 16px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Dashboard Cards mit schwarzem Hintergrund */
|
||||
/* Dashboard Cards mit verstärktem Glassmorphism */
|
||||
.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);
|
||||
@apply rounded-xl p-6 shadow-2xl transition-all duration-300 hover:-translate-y-1;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
|
||||
-webkit-backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
.dark .dashboard-card {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
|
||||
-webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.5),
|
||||
0 8px 16px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Navigation Styles */
|
||||
.nav-link {
|
||||
@@ -498,8 +613,26 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-3 mx-4 rounded-2xl border;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .navbar-menu {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
@@ -529,21 +662,81 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-xl transition-all duration-300;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
@apply text-slate-900 dark:text-white;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(15px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(15px) saturate(150%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dark .menu-item {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .menu-item:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
@apply bg-white/60 dark:bg-black/60 text-slate-900 dark:text-white font-medium shadow-sm backdrop-blur-sm;
|
||||
@apply text-slate-900 dark:text-white font-medium;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.dark .menu-item.active {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Dropdown Styles */
|
||||
/* Dropdown Styles - Verstärktes Glassmorphism */
|
||||
.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);
|
||||
@apply absolute right-0 mt-2 w-64 rounded-xl shadow-2xl z-50 overflow-hidden;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.25),
|
||||
0 8px 16px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
animation: fadeIn 0.2s ease-out forwards;
|
||||
}
|
||||
|
||||
.dark .user-dropdown {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.6),
|
||||
0 8px 16px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30;
|
||||
@@ -581,30 +774,299 @@
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
@apply bg-white/60 dark:bg-black/70;
|
||||
backdrop-filter: blur(24px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(200%);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.dark .navbar {
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Animation für Dropdown */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
/* Neue Navbar-Komponenten */
|
||||
.navbar-menu-new {
|
||||
@apply flex items-center justify-center space-x-3 md:space-x-2 lg:space-x-1 xl:space-x-2;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.dropdown-animation {
|
||||
animation: fadeIn 0.2s ease-out forwards;
|
||||
}
|
||||
.navbar-menu-new::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@apply flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300;
|
||||
color: rgba(15, 23, 42, 0.8);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .nav-item {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
@apply transform -translate-y-0.5;
|
||||
color: rgba(15, 23, 42, 1);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.05),
|
||||
0 2px 6px rgba(0, 0, 0, 0.04),
|
||||
0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .nav-item:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.2),
|
||||
0 2px 6px rgba(0, 0, 0, 0.15),
|
||||
0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: rgba(15, 23, 42, 1);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.08),
|
||||
0 3px 8px rgba(0, 0, 0, 0.06),
|
||||
0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .nav-item.active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.3),
|
||||
0 3px 8px rgba(0, 0, 0, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* Dark Mode Toggle - Neues Design */
|
||||
.dark-mode-toggle-new {
|
||||
@apply relative p-2.5 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;
|
||||
background: rgba(241, 245, 249, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.05),
|
||||
0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
color: #334155;
|
||||
z-index: 100; /* Stellt sicher, dass der Button über anderen Elementen liegt */
|
||||
}
|
||||
|
||||
.dark-mode-toggle-new:hover {
|
||||
@apply transform -translate-y-0.5;
|
||||
background: rgba(241, 245, 249, 0.9);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.08),
|
||||
0 2px 6px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.dark-mode-toggle-new:active {
|
||||
@apply transform scale-95;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.dark .dark-mode-toggle-new {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.2),
|
||||
0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.dark .dark-mode-toggle-new:hover {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.2),
|
||||
0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Icon-Animation */
|
||||
.dark-mode-toggle-new .sun-icon,
|
||||
.dark-mode-toggle-new .moon-icon {
|
||||
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300;
|
||||
}
|
||||
|
||||
.dark-mode-toggle-new .sun-icon:not(.hidden) {
|
||||
animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
||||
}
|
||||
|
||||
.dark-mode-toggle-new .moon-icon:not(.hidden) {
|
||||
animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes spin-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(0.7) rotate(20deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.dark .sun-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark .moon-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sun-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.moon-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* User Menu Button - Neues Design */
|
||||
.user-menu-button-new {
|
||||
@apply flex items-center space-x-2 rounded-lg p-1.5 transition-all duration-300;
|
||||
background: rgba(241, 245, 249, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.04),
|
||||
0 1px 2px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.user-menu-button-new:hover {
|
||||
@apply transform -translate-y-0.5;
|
||||
background: rgba(241, 245, 249, 0.8);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.06),
|
||||
0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.dark .user-menu-button-new {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .user-menu-button-new:hover {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.15),
|
||||
0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* User Avatar - Neues Design */
|
||||
.user-avatar-new {
|
||||
@apply h-8 w-8 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-md transition-all duration-300;
|
||||
background: linear-gradient(135deg, #000000, #333333);
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.2),
|
||||
0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .user-avatar-new {
|
||||
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
|
||||
color: #0f172a;
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.3),
|
||||
0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Login Button - Neues Design */
|
||||
.login-button-new {
|
||||
@apply flex items-center px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all duration-300;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.login-button-new:hover {
|
||||
@apply transform -translate-y-0.5;
|
||||
background: #333333;
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.15),
|
||||
0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .login-button-new {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.2),
|
||||
0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dark .login-button-new:hover {
|
||||
background: #f1f5f9;
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.25),
|
||||
0 3px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Mobile Menu - Neues Design */
|
||||
.mobile-menu-new {
|
||||
@apply w-full overflow-hidden transition-all duration-300 z-40;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid rgba(241, 245, 249, 0.8);
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-new.open {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
border-bottom: 1px solid rgba(241, 245, 249, 0.8);
|
||||
}
|
||||
|
||||
.dark .mobile-menu-new {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(30, 41, 59, 0.8);
|
||||
}
|
||||
|
||||
.mobile-nav-item {
|
||||
@apply flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-800 dark:text-slate-200 transition-all duration-300;
|
||||
}
|
||||
|
||||
.mobile-nav-item:hover {
|
||||
background: rgba(241, 245, 249, 0.8);
|
||||
}
|
||||
|
||||
.dark .mobile-nav-item:hover {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
}
|
||||
|
||||
.mobile-nav-item.active {
|
||||
background: rgba(241, 245, 249, 0.9);
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dark .mobile-nav-item.active {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
|
||||
.mb-stat-card {
|
||||
@@ -634,12 +1096,30 @@
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
/* Footer Styling */
|
||||
/* Footer Styling - Verstärktes Glassmorphism */
|
||||
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);
|
||||
@apply transition-all duration-300;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(30px) saturate(180%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 -8px 32px rgba(0, 0, 0, 0.1),
|
||||
0 -2px 8px rgba(0, 0, 0, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.dark footer {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(30px) saturate(160%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 -8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 -2px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* Dropdown Pfeil Animation */
|
||||
@@ -668,6 +1148,286 @@ footer {
|
||||
}
|
||||
|
||||
.dark .mercedes-star-bg::after {
|
||||
opacity: 0.03;
|
||||
filter: invert(1);
|
||||
}
|
||||
opacity: 0.02;
|
||||
filter: invert(1) brightness(0.4);
|
||||
}
|
||||
|
||||
/* Zusätzliche Glassmorphism-Verbesserungen */
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.dark .glass-effect {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Verbesserte Hover-Effekte für alle interaktiven Elemente */
|
||||
.glass-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.glass-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
backdrop-filter: blur(25px) saturate(200%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.dark .glass-hover:hover {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.4),
|
||||
0 8px 16px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */
|
||||
.printer-card-new {
|
||||
@apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||
0 10px 20px rgba(0, 0, 0, 0.06),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--card-radius, 1rem);
|
||||
}
|
||||
|
||||
.dark .printer-card-new {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.4),
|
||||
0 10px 20px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Online Drucker-Karten mit stärkerem visuellen Unterschied */
|
||||
.printer-card-new.online {
|
||||
@apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 122, 85, 0.08),
|
||||
0 10px 20px rgba(0, 122, 85, 0.06),
|
||||
0 0 0 1px rgba(209, 250, 229, 0.4);
|
||||
}
|
||||
|
||||
.dark .printer-card-new.online {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||
0 10px 20px rgba(0, 0, 0, 0.2),
|
||||
0 0 0 1px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
/* Status-Badge mit verbesserten Styles */
|
||||
.status-badge-new {
|
||||
@apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .status-badge-new {
|
||||
background: rgba(30, 41, 59, 0.7);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.status-badge-new.online {
|
||||
@apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300;
|
||||
}
|
||||
|
||||
.status-badge-new.offline {
|
||||
@apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300;
|
||||
}
|
||||
|
||||
/* Verbesserte Filterleiste */
|
||||
.filter-bar-new {
|
||||
@apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl;
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.05),
|
||||
0 5px 10px rgba(0, 0, 0, 0.03),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark .filter-bar-new {
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.2),
|
||||
0 5px 10px rgba(0, 0, 0, 0.15),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.filter-btn-new {
|
||||
@apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium;
|
||||
}
|
||||
|
||||
.filter-btn-new.active {
|
||||
@apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .filter-btn-new.active {
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Verbesserte Aktionsschaltflächen */
|
||||
.action-btn-new {
|
||||
@apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.action-btn-new.primary {
|
||||
@apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500;
|
||||
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
.dark .action-btn-new.primary {
|
||||
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
|
||||
.action-btn-new.success {
|
||||
@apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500;
|
||||
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.dark .action-btn-new.success {
|
||||
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.action-btn-new.danger {
|
||||
@apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500;
|
||||
box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.dark .action-btn-new.danger {
|
||||
box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
/* Informationszeilen in Drucker-Karten */
|
||||
.printer-info-row {
|
||||
@apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5;
|
||||
}
|
||||
|
||||
.printer-info-icon {
|
||||
@apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0;
|
||||
}
|
||||
|
||||
/* Online-Indikator mit Pulseffekt */
|
||||
.online-indicator {
|
||||
@apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg;
|
||||
box-shadow: 0 0 0 rgba(16, 185, 129, 0.6);
|
||||
animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header mit verbesserten Status-Anzeigen */
|
||||
.status-overview-new {
|
||||
@apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg;
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.04),
|
||||
0 5px 10px rgba(0, 0, 0, 0.02),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .status-overview-new {
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.15),
|
||||
0 5px 10px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@apply w-2.5 h-2.5 rounded-full;
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
@apply bg-green-500;
|
||||
animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
@apply bg-red-500;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Verbesserte Modals mit Glassmorphism */
|
||||
.modal-new {
|
||||
@apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.modal-content-new {
|
||||
@apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.15),
|
||||
0 15px 30px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.dark .modal-content-new {
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.4),
|
||||
0 15px 30px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
@keyframes modal-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Verbesserte Input-Felder für Modals */
|
||||
.input-new {
|
||||
@apply w-full px-3 py-2.5 bg-white/70 dark:bg-slate-700/70 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 backdrop-blur-lg;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .input-new {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Verbesserte Form-Labels */
|
||||
.form-label-new {
|
||||
@apply block mb-2 text-sm font-medium text-slate-900 dark:text-white;
|
||||
}
|
||||
2
backend/app/static/css/tailwind.min.css
vendored
2
backend/app/static/css/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
159
backend/app/static/js/dark-mode-fix.js
Normal file
159
backend/app/static/js/dark-mode-fix.js
Normal file
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* Dark Mode Toggle Fix
|
||||
* Diese Datei stellt sicher, dass der Dark Mode Toggle Button korrekt funktioniert
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Dark Mode Toggle Button
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
// Local Storage Key
|
||||
const STORAGE_KEY = 'myp-dark-mode';
|
||||
|
||||
/**
|
||||
* Aktuellen Dark Mode Status aus Local Storage oder Systemeinstellung abrufen
|
||||
*/
|
||||
function isDarkMode() {
|
||||
const savedMode = localStorage.getItem(STORAGE_KEY);
|
||||
if (savedMode !== null) {
|
||||
return savedMode === 'true';
|
||||
}
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons im Toggle-Button aktualisieren
|
||||
*/
|
||||
function updateIcons(isDark) {
|
||||
// Finde die Icons im Button - versuche sowohl direkte Kinder als auch verschachtelte
|
||||
let sunIcon = darkModeToggle.querySelector('.sun-icon');
|
||||
let moonIcon = darkModeToggle.querySelector('.moon-icon');
|
||||
|
||||
// Wenn Icons nicht gefunden wurden, erstelle sie neu
|
||||
if (!sunIcon || !moonIcon) {
|
||||
console.warn('Icons nicht gefunden - erzeuge neue Icons');
|
||||
|
||||
// Entferne vorhandene Inhalte im Button
|
||||
darkModeToggle.innerHTML = '';
|
||||
|
||||
// Neue Icons erstellen
|
||||
sunIcon = document.createElement('svg');
|
||||
sunIcon.className = 'w-5 h-5 sm:w-5 sm:h-5 sun-icon';
|
||||
sunIcon.setAttribute('fill', 'none');
|
||||
sunIcon.setAttribute('stroke', 'currentColor');
|
||||
sunIcon.setAttribute('viewBox', '0 0 24 24');
|
||||
sunIcon.setAttribute('aria-hidden', 'true');
|
||||
sunIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />';
|
||||
|
||||
moonIcon = document.createElement('svg');
|
||||
moonIcon.className = 'w-5 h-5 sm:w-5 sm:h-5 moon-icon hidden';
|
||||
moonIcon.setAttribute('fill', 'none');
|
||||
moonIcon.setAttribute('stroke', 'currentColor');
|
||||
moonIcon.setAttribute('viewBox', '0 0 24 24');
|
||||
moonIcon.setAttribute('aria-hidden', 'true');
|
||||
moonIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />';
|
||||
|
||||
darkModeToggle.appendChild(sunIcon);
|
||||
darkModeToggle.appendChild(moonIcon);
|
||||
}
|
||||
|
||||
// Icons entsprechend dem Dark Mode Status anzeigen/verbergen
|
||||
if (isDark) {
|
||||
sunIcon.classList.add('hidden');
|
||||
moonIcon.classList.remove('hidden');
|
||||
} else {
|
||||
sunIcon.classList.remove('hidden');
|
||||
moonIcon.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dark Mode aktivieren/deaktivieren
|
||||
*/
|
||||
function setDarkMode(enable) {
|
||||
console.log(`Setze Dark Mode auf: ${enable ? 'Aktiviert' : 'Deaktiviert'}`);
|
||||
|
||||
if (enable) {
|
||||
html.classList.add('dark');
|
||||
html.setAttribute('data-theme', 'dark');
|
||||
html.style.colorScheme = 'dark';
|
||||
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'true');
|
||||
darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
|
||||
// Button-Icons aktualisieren
|
||||
updateIcons(true);
|
||||
}
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
html.setAttribute('data-theme', 'light');
|
||||
html.style.colorScheme = 'light';
|
||||
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'false');
|
||||
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
// Button-Icons aktualisieren
|
||||
updateIcons(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Einstellung im Local Storage speichern
|
||||
localStorage.setItem(STORAGE_KEY, enable.toString());
|
||||
|
||||
// ThemeColor Meta-Tag aktualisieren
|
||||
const metaThemeColor = document.getElementById('metaThemeColor');
|
||||
if (metaThemeColor) {
|
||||
metaThemeColor.setAttribute('content', enable ? '#000000' : '#ffffff');
|
||||
}
|
||||
|
||||
// Event für andere Komponenten auslösen
|
||||
window.dispatchEvent(new CustomEvent('darkModeChanged', {
|
||||
detail: { isDark: enable }
|
||||
}));
|
||||
}
|
||||
|
||||
// Toggle Dark Mode Funktion
|
||||
function toggleDarkMode() {
|
||||
const currentMode = isDarkMode();
|
||||
setDarkMode(!currentMode);
|
||||
}
|
||||
|
||||
// Event Listener für Toggle Button
|
||||
if (darkModeToggle) {
|
||||
// Vorherige Event-Listener entfernen, um Duplikate zu vermeiden
|
||||
const newDarkModeToggle = darkModeToggle.cloneNode(true);
|
||||
darkModeToggle.parentNode.replaceChild(newDarkModeToggle, darkModeToggle);
|
||||
|
||||
// Neuen Event-Listener hinzufügen
|
||||
newDarkModeToggle.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // Verhindere Bubbling
|
||||
toggleDarkMode();
|
||||
});
|
||||
|
||||
// Aktualisiere die Variable auf das neue Element
|
||||
darkModeToggle = newDarkModeToggle;
|
||||
|
||||
// Initialen Status setzen
|
||||
const isDark = isDarkMode();
|
||||
setDarkMode(isDark);
|
||||
|
||||
console.log('Dark Mode Toggle Button erfolgreich initialisiert');
|
||||
} else {
|
||||
console.error('Dark Mode Toggle Button konnte nicht gefunden werden!');
|
||||
}
|
||||
|
||||
// Tastaturkürzel: Strg+Shift+D für Dark Mode Toggle
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||||
toggleDarkMode();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Direkte Verfügbarkeit der Funktionen im globalen Bereich
|
||||
window.toggleDarkMode = toggleDarkMode;
|
||||
window.isDarkMode = isDarkMode;
|
||||
window.setDarkMode = setDarkMode;
|
||||
});
|
||||
@@ -79,7 +79,7 @@
|
||||
}, 100);
|
||||
|
||||
// Erfolgsmeldung in die Konsole
|
||||
console.log(`Dark Mode ${enable ? 'aktiviert' : 'deaktiviert'}`);
|
||||
console.log(`${enable ? '🌙' : '☀️'} ${enable ? 'Dark Mode aktiviert - Augenschonender Modus aktiv' : 'Light Mode aktiviert - Heller Modus aktiv'}`);
|
||||
}
|
||||
|
||||
// Aktualisiert das Theme-Color Meta-Tag
|
||||
@@ -117,35 +117,38 @@
|
||||
darkModeToggle.setAttribute('aria-pressed', isDark.toString());
|
||||
darkModeToggle.title = isDark ? "Light Mode aktivieren" : "Dark Mode aktivieren";
|
||||
|
||||
// Stile aktualisieren mit Tailwind-Klassen
|
||||
if (isDark) {
|
||||
darkModeToggle.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
|
||||
darkModeToggle.classList.add('bg-slate-800', 'hover:bg-slate-700', 'text-amber-400');
|
||||
darkModeToggle.setAttribute('data-tooltip', 'Light Mode aktivieren');
|
||||
} else {
|
||||
darkModeToggle.classList.remove('bg-slate-800', 'hover:bg-slate-700', 'text-amber-400');
|
||||
darkModeToggle.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
|
||||
darkModeToggle.setAttribute('data-tooltip', 'Dark Mode aktivieren');
|
||||
}
|
||||
// Icons aktualisieren
|
||||
const sunIcon = darkModeToggle.querySelector('.sun-icon');
|
||||
const moonIcon = darkModeToggle.querySelector('.moon-icon');
|
||||
|
||||
// Icon aktualisieren - ohne innerHTML für CSP-Kompatibilität
|
||||
const icon = darkModeToggle.querySelector('svg');
|
||||
if (icon) {
|
||||
// Animationsklasse hinzufügen
|
||||
icon.classList.add('animate-spin-once');
|
||||
|
||||
// Nach Animation wieder entfernen
|
||||
setTimeout(() => {
|
||||
icon.classList.remove('animate-spin-once');
|
||||
}, 300);
|
||||
|
||||
const pathElement = icon.querySelector('path');
|
||||
if (pathElement) {
|
||||
// Sonnen- oder Mond-Symbol
|
||||
if (isDark) {
|
||||
pathElement.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
|
||||
} else {
|
||||
pathElement.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
if (sunIcon && moonIcon) {
|
||||
if (isDark) {
|
||||
sunIcon.classList.add('hidden');
|
||||
moonIcon.classList.remove('hidden');
|
||||
} else {
|
||||
sunIcon.classList.remove('hidden');
|
||||
moonIcon.classList.add('hidden');
|
||||
}
|
||||
} else {
|
||||
// Fallback für ältere Implementierung mit einem Icon
|
||||
const icon = darkModeToggle.querySelector('svg');
|
||||
if (icon) {
|
||||
// Animationsklasse hinzufügen
|
||||
icon.classList.add('animate-spin-once');
|
||||
|
||||
// Nach Animation wieder entfernen
|
||||
setTimeout(() => {
|
||||
icon.classList.remove('animate-spin-once');
|
||||
}, 300);
|
||||
|
||||
const pathElement = icon.querySelector('path');
|
||||
if (pathElement) {
|
||||
// Sonnen- oder Mond-Symbol
|
||||
if (isDark) {
|
||||
pathElement.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
|
||||
} else {
|
||||
pathElement.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -158,6 +161,7 @@
|
||||
|
||||
// Wenn kein Toggle existiert, erstelle einen
|
||||
if (!darkModeToggle) {
|
||||
console.log('🔧 Dark Mode Toggle nicht gefunden - erstelle automatisch einen neuen Button');
|
||||
createDarkModeToggle();
|
||||
}
|
||||
|
||||
@@ -165,6 +169,7 @@
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.addEventListener('click', function() {
|
||||
const isDark = !shouldUseDarkMode();
|
||||
console.log(`👆 Dark Mode Toggle: Wechsel zu ${isDark ? '🌙 dunkel' : '☀️ hell'} angefordert`);
|
||||
setDarkMode(isDark);
|
||||
});
|
||||
}
|
||||
@@ -173,6 +178,7 @@
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||||
const isDark = !shouldUseDarkMode();
|
||||
console.log(`⌨️ Tastenkombination STRG+SHIFT+D erkannt: Wechsel zu ${isDark ? '🌙 dunkel' : '☀️ hell'}`);
|
||||
setDarkMode(isDark);
|
||||
e.preventDefault();
|
||||
}
|
||||
@@ -186,6 +192,7 @@
|
||||
darkModeMediaQuery.addEventListener('change', function(e) {
|
||||
// Nur anwenden, wenn keine benutzerdefinierte Einstellung gespeichert ist
|
||||
if (localStorage.getItem(STORAGE_KEY) === null) {
|
||||
console.log(`🖥️ Systemeinstellung geändert: ${e.matches ? '🌙 dunkel' : '☀️ hell'}`);
|
||||
setDarkMode(e.matches);
|
||||
}
|
||||
});
|
||||
@@ -193,22 +200,27 @@
|
||||
// Fallback für ältere Browser
|
||||
darkModeMediaQuery.addListener(function(e) {
|
||||
if (localStorage.getItem(STORAGE_KEY) === null) {
|
||||
console.log(`🖥️ Systemeinstellung geändert (Legacy-Browser): ${e.matches ? '🌙 dunkel' : '☀️ hell'}`);
|
||||
setDarkMode(e.matches);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialer Zustand
|
||||
setDarkMode(shouldUseDarkMode());
|
||||
const initialState = shouldUseDarkMode();
|
||||
console.log(`🔍 Ermittelter Ausgangszustand: ${initialState ? '🌙 Dark Mode' : '☀️ Light Mode'}`);
|
||||
setDarkMode(initialState);
|
||||
|
||||
// Animation für den korrekten Modus hinzufügen
|
||||
const animClass = shouldUseDarkMode() ? 'dark-mode-transition' : 'light-mode-transition';
|
||||
const animClass = initialState ? 'dark-mode-transition' : 'light-mode-transition';
|
||||
document.body.classList.add(animClass);
|
||||
|
||||
// Animation entfernen nach Abschluss
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove(animClass);
|
||||
}, 300);
|
||||
|
||||
console.log('🚀 Dark Mode Handler erfolgreich initialisiert');
|
||||
}
|
||||
|
||||
// Erstellt ein Toggle-Element, falls keines existiert
|
||||
@@ -218,46 +230,61 @@
|
||||
const nav = document.querySelector('nav');
|
||||
const container = document.querySelector('.dark-mode-container') || header || nav;
|
||||
|
||||
if (!container) return;
|
||||
if (!container) {
|
||||
console.error('⚠️ Kein geeigneter Container für Dark Mode Toggle gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle-Button erstellen
|
||||
darkModeToggle = document.createElement('button');
|
||||
darkModeToggle.id = 'darkModeToggle';
|
||||
darkModeToggle.className = 'p-2 sm:p-3 rounded-full bg-indigo-600 text-white transition-all duration-300';
|
||||
darkModeToggle.className = 'dark-mode-toggle-new';
|
||||
darkModeToggle.setAttribute('aria-label', 'Dark Mode umschalten');
|
||||
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
darkModeToggle.setAttribute('data-tooltip', 'Dark Mode aktivieren');
|
||||
darkModeToggle.setAttribute('data-action', 'toggle-dark-mode');
|
||||
|
||||
// SVG-Icon erstellen (ohne innerHTML für Content Security Policy)
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.setAttribute("class", "w-4 h-4 sm:w-5 sm:h-5");
|
||||
svg.setAttribute("fill", "none");
|
||||
svg.setAttribute("stroke", "currentColor");
|
||||
svg.setAttribute("viewBox", "0 0 24 24");
|
||||
// Sonnen-Icon erstellen
|
||||
const sunIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
sunIcon.setAttribute("class", "w-5 h-5 sm:w-5 sm:h-5 sun-icon");
|
||||
sunIcon.setAttribute("fill", "none");
|
||||
sunIcon.setAttribute("stroke", "currentColor");
|
||||
sunIcon.setAttribute("viewBox", "0 0 24 24");
|
||||
sunIcon.setAttribute("aria-hidden", "true");
|
||||
|
||||
// Path für das Icon
|
||||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.setAttribute("stroke-linejoin", "round");
|
||||
path.setAttribute("stroke-width", "2");
|
||||
path.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
const sunPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
sunPath.setAttribute("stroke-linecap", "round");
|
||||
sunPath.setAttribute("stroke-linejoin", "round");
|
||||
sunPath.setAttribute("stroke-width", "2");
|
||||
sunPath.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
|
||||
|
||||
// Mond-Icon erstellen
|
||||
const moonIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
moonIcon.setAttribute("class", "w-5 h-5 sm:w-5 sm:h-5 moon-icon hidden");
|
||||
moonIcon.setAttribute("fill", "none");
|
||||
moonIcon.setAttribute("stroke", "currentColor");
|
||||
moonIcon.setAttribute("viewBox", "0 0 24 24");
|
||||
moonIcon.setAttribute("aria-hidden", "true");
|
||||
|
||||
const moonPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
moonPath.setAttribute("stroke-linecap", "round");
|
||||
moonPath.setAttribute("stroke-linejoin", "round");
|
||||
moonPath.setAttribute("stroke-width", "2");
|
||||
moonPath.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
|
||||
// Elemente zusammenfügen
|
||||
svg.appendChild(path);
|
||||
darkModeToggle.appendChild(svg);
|
||||
|
||||
// Screenreader-Text hinzufügen
|
||||
const srText = document.createElement('span');
|
||||
srText.className = 'sr-only';
|
||||
srText.textContent = 'Dark Mode umschalten';
|
||||
darkModeToggle.appendChild(srText);
|
||||
sunIcon.appendChild(sunPath);
|
||||
moonIcon.appendChild(moonPath);
|
||||
darkModeToggle.appendChild(sunIcon);
|
||||
darkModeToggle.appendChild(moonIcon);
|
||||
|
||||
// Zum Container hinzufügen
|
||||
container.appendChild(darkModeToggle);
|
||||
console.log('✅ Dark Mode Toggle Button erfolgreich erstellt und zur Benutzeroberfläche hinzugefügt');
|
||||
}
|
||||
|
||||
// Sofort Dark/Light Mode anwenden (vor DOMContentLoaded)
|
||||
const isDark = shouldUseDarkMode();
|
||||
console.log(`🏃♂️ Sofortige Anwendung: ${isDark ? '🌙 Dark Mode' : '☀️ Light Mode'} (vor DOM-Ladung)`);
|
||||
setDarkMode(isDark);
|
||||
})();
|
||||
|
||||
@@ -275,4 +302,5 @@ if (!document.querySelector('style#dark-mode-animations')) {
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleTag);
|
||||
console.log('💫 Animations-Styles für Dark Mode Toggle hinzugefügt');
|
||||
}
|
||||
@@ -18,7 +18,8 @@
|
||||
constructor() {
|
||||
// DOM-Elemente
|
||||
this.darkModeToggle = document.getElementById('darkModeToggle');
|
||||
this.darkModeIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('svg') : null;
|
||||
this.sunIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.sun-icon') : null;
|
||||
this.moonIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.moon-icon') : null;
|
||||
this.html = document.documentElement;
|
||||
|
||||
// Local Storage Key
|
||||
@@ -51,6 +52,10 @@
|
||||
this.updateDarkModeIcon(true);
|
||||
this.darkModeToggle.setAttribute('aria-pressed', 'true');
|
||||
this.darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
|
||||
if (this.sunIcon && this.moonIcon) {
|
||||
this.sunIcon.classList.add('hidden');
|
||||
this.moonIcon.classList.remove('hidden');
|
||||
}
|
||||
} else {
|
||||
this.html.classList.remove('dark');
|
||||
this.html.setAttribute('data-theme', 'light');
|
||||
@@ -58,6 +63,10 @@
|
||||
this.updateDarkModeIcon(false);
|
||||
this.darkModeToggle.setAttribute('aria-pressed', 'false');
|
||||
this.darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
if (this.sunIcon && this.moonIcon) {
|
||||
this.sunIcon.classList.remove('hidden');
|
||||
this.moonIcon.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Einstellung im Local Storage speichern
|
||||
@@ -74,7 +83,7 @@
|
||||
detail: { isDark: enable }
|
||||
}));
|
||||
|
||||
console.log('Dark Mode set to:', enable);
|
||||
console.log(`${enable ? '🌙' : '☀️'} Design umgeschaltet auf: ${enable ? 'Dark Mode' : 'Light Mode'}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -82,18 +91,17 @@
|
||||
* @param {boolean} isDark - Ob Dark Mode aktiv ist
|
||||
*/
|
||||
updateDarkModeIcon(isDark) {
|
||||
if (!this.darkModeIcon) return;
|
||||
if (!this.darkModeToggle) return;
|
||||
|
||||
if (isDark) {
|
||||
// Sonne anzeigen (für Wechsel zum Light Mode)
|
||||
this.darkModeIcon.innerHTML = `
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
`;
|
||||
} else {
|
||||
// Mond anzeigen (für Wechsel zum Dark Mode)
|
||||
this.darkModeIcon.innerHTML = `
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
`;
|
||||
// Stellen sicher, dass die Icons korrekt angezeigt werden
|
||||
if (this.sunIcon && this.moonIcon) {
|
||||
if (isDark) {
|
||||
this.sunIcon.classList.add('hidden');
|
||||
this.moonIcon.classList.remove('hidden');
|
||||
} else {
|
||||
this.sunIcon.classList.remove('hidden');
|
||||
this.moonIcon.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,15 +110,15 @@
|
||||
*/
|
||||
init() {
|
||||
if (!this.darkModeToggle) {
|
||||
console.error('Dark Mode Toggle Button nicht gefunden!');
|
||||
console.error('⚠️ Dark Mode Toggle Button nicht gefunden! UI-Komponente nicht verfügbar.');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Dark Mode Manager initialisiert');
|
||||
console.log('🚀 Dark Mode Manager erfolgreich initialisiert');
|
||||
|
||||
// Event Listener für den Dark Mode Toggle Button
|
||||
this.darkModeToggle.addEventListener('click', () => {
|
||||
console.log('Dark Mode Toggle geklickt');
|
||||
console.log('👆 Dark Mode Toggle Button angeklickt');
|
||||
const newDarkModeState = !this.isDarkMode();
|
||||
this.setDarkMode(newDarkModeState);
|
||||
});
|
||||
@@ -118,7 +126,7 @@
|
||||
// Alternative Event-Listener für Buttons mit data-action
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-action="toggle-dark-mode"]')) {
|
||||
console.log('Dark Mode Toggle über data-action geklickt');
|
||||
console.log('👆 Dark Mode Toggle über data-action aktiviert');
|
||||
const newDarkModeState = !this.isDarkMode();
|
||||
this.setDarkMode(newDarkModeState);
|
||||
}
|
||||
@@ -144,11 +152,111 @@
|
||||
|
||||
// Initialisierung: Aktuellen Status setzen
|
||||
const isDark = this.isDarkMode();
|
||||
console.log('Initial Dark Mode Status:', isDark);
|
||||
console.log(`🔍 Initialer Dark Mode Status: ${isDark ? '🌙 aktiviert' : '☀️ deaktiviert'}`);
|
||||
this.setDarkMode(isDark);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobile Menu Manager
|
||||
*/
|
||||
class MobileMenuManager {
|
||||
constructor() {
|
||||
this.mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
||||
this.mobileMenu = document.getElementById('mobileMenu');
|
||||
this.isOpen = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
if (!this.mobileMenuToggle || !this.mobileMenu) {
|
||||
console.log('ℹ️ Mobile Menu Komponenten nicht gefunden - Feature deaktiviert');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('📱 Mobile Menu Manager erfolgreich initialisiert');
|
||||
|
||||
// Event Listener für den Mobile Menu Toggle Button
|
||||
this.mobileMenuToggle.addEventListener('click', () => {
|
||||
this.toggleMenu();
|
||||
});
|
||||
|
||||
// Event Listener für Klicks außerhalb des Menüs
|
||||
document.addEventListener('click', (e) => {
|
||||
if (this.isOpen && !this.mobileMenuToggle.contains(e.target) && !this.mobileMenu.contains(e.target)) {
|
||||
this.closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Event Listener für das Schließen bei Klick auf einen Menüpunkt
|
||||
this.mobileMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
this.closeMenu();
|
||||
});
|
||||
});
|
||||
|
||||
// Beim Scrollen das Menü schließen
|
||||
window.addEventListener('scroll', () => {
|
||||
if (this.isOpen && window.scrollY > 50) {
|
||||
this.closeMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
if (this.isOpen) {
|
||||
this.closeMenu();
|
||||
} else {
|
||||
this.openMenu();
|
||||
}
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
if (!this.mobileMenu || this.isOpen) return;
|
||||
|
||||
this.mobileMenu.classList.remove('hidden');
|
||||
this.isOpen = true;
|
||||
this.mobileMenuToggle.setAttribute('aria-expanded', 'true');
|
||||
|
||||
// Icon ändern
|
||||
const menuIcon = this.mobileMenuToggle.querySelector('svg');
|
||||
if (menuIcon) {
|
||||
menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>';
|
||||
}
|
||||
|
||||
// Animation - kleine Verzögerung für sanfte Animation
|
||||
setTimeout(() => {
|
||||
this.mobileMenu.classList.add('open');
|
||||
}, 10);
|
||||
|
||||
// Body-Scroll verhindern (optional)
|
||||
// document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
closeMenu() {
|
||||
if (!this.mobileMenu || !this.isOpen) return;
|
||||
|
||||
this.mobileMenu.classList.remove('open');
|
||||
this.isOpen = false;
|
||||
this.mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
||||
|
||||
// Icon zurücksetzen
|
||||
const menuIcon = this.mobileMenuToggle.querySelector('svg');
|
||||
if (menuIcon) {
|
||||
menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>';
|
||||
}
|
||||
|
||||
// Nach der Animation ausblenden
|
||||
setTimeout(() => {
|
||||
this.mobileMenu.classList.add('hidden');
|
||||
}, 300);
|
||||
|
||||
// Body-Scroll wiederherstellen
|
||||
// document.body.style.overflow = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* User Dropdown Manager
|
||||
*/
|
||||
@@ -992,6 +1100,9 @@
|
||||
// Dark Mode Manager
|
||||
window.MYP.UI.darkMode = new DarkModeManager();
|
||||
|
||||
// Mobile Menu Manager
|
||||
window.MYP.UI.mobileMenu = new MobileMenuManager();
|
||||
|
||||
// User Dropdown Manager
|
||||
window.MYP.UI.userDropdown = new UserDropdownManager();
|
||||
|
||||
@@ -1025,7 +1136,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
console.log('MYP UI Components initialized successfully');
|
||||
console.log('✅ MYP UI Components erfolgreich initialisiert - Benutzeroberfläche bereit');
|
||||
});
|
||||
|
||||
// Globale Variable für Toast-Funktion
|
||||
|
||||
Reference in New Issue
Block a user