🎨 style: update CSS and remove unused JS for improved design consistency
This commit is contained in:
@@ -136,7 +136,7 @@
|
||||
--accent-primary:#7c3aed;
|
||||
--accent-secondary:#8b5cf6;
|
||||
--glow-effect:0 0 8px rgba(139,92,246,.08);
|
||||
background-image: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9));
|
||||
background-image: linear-gradient(to bottom right, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
|
||||
background-attachment: fixed;
|
||||
}
|
||||
/* Dark‑Mode */
|
||||
@@ -161,115 +161,42 @@
|
||||
background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
|
||||
-webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
|
||||
}
|
||||
.glass-morphism {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.glass-navbar {
|
||||
@apply glass-morphism border backdrop-blur-xl;
|
||||
}
|
||||
body:not(.dark) .glass-navbar {
|
||||
background-color:rgba(255,255,255,.85);
|
||||
border-color:rgba(0,0,0,.05);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,.05);
|
||||
}
|
||||
.dark .glass-navbar {
|
||||
background-color:rgba(10,14,25,.8);
|
||||
border-color:rgba(255,255,255,.05);
|
||||
}
|
||||
.glass-morphism { backdrop-filter: blur(10px); }
|
||||
.glass-navbar { @apply glass-morphism border backdrop-blur-xl; }
|
||||
.light .glass-navbar { background-color:rgba(255,255,255,.8); border-color:rgba(0,0,0,.05); }
|
||||
.dark .glass-navbar { background-color:rgba(10,14,25,.8); border-color:rgba(255,255,255,.05); }
|
||||
|
||||
/* Light-Mode spezifische Stile */
|
||||
body:not(.dark) {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
background-image: linear-gradient(135deg, rgba(249, 250, 251, 0.92), rgba(243, 244, 246, 0.92));
|
||||
}
|
||||
|
||||
body:not(.dark) .nav-link {
|
||||
.nav-link-light {
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
body:not(.dark) .nav-link:hover {
|
||||
.nav-link-light:hover {
|
||||
color: var(--text-primary);
|
||||
background-color: rgba(124, 58, 237, 0.08);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
|
||||
background-color: rgba(126, 34, 206, 0.1);
|
||||
}
|
||||
|
||||
body:not(.dark) .nav-link-active,
|
||||
body:not(.dark) .nav-link-light-active {
|
||||
.nav-link-light-active {
|
||||
color: var(--accent-primary);
|
||||
background-color: rgba(124, 58, 237, 0.12);
|
||||
font-weight: 600;
|
||||
background-color: rgba(126, 34, 206, 0.15);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Kartendesign im Light-Mode */
|
||||
body:not(.dark) .card {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(229, 231, 235, 0.6);
|
||||
box-shadow: 0 4px 15px -1px rgba(0, 0, 0, 0.05), 0 2px 8px -1px rgba(0, 0, 0, 0.03);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
background-color: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
body:not(.dark) .card:hover {
|
||||
box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(124, 58, 237, 0.2);
|
||||
}
|
||||
|
||||
body:not(.dark) .glass-card {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
body:not(.dark) .glass-card:hover {
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(124, 58, 237, 0.25);
|
||||
}
|
||||
|
||||
/* Verbesserte Buttons im Light Mode */
|
||||
body:not(.dark) .btn {
|
||||
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: 0 3px 6px rgba(91, 33, 182, 0.25);
|
||||
border-radius: 10px;
|
||||
padding: 0.625rem 1.25rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body:not(.dark) .btn:hover {
|
||||
background: linear-gradient(135deg, #9f7afa, #7c3aed);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(109, 40, 217, 0.3);
|
||||
}
|
||||
|
||||
/* Light Mode Netzwerk-Hintergrund */
|
||||
body:not(.dark) .network-background {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
body:not(.dark) .network-background .node {
|
||||
fill: rgba(124, 58, 237, 0.5);
|
||||
}
|
||||
|
||||
body:not(.dark) .network-background .link {
|
||||
stroke: rgba(124, 58, 237, 0.2);
|
||||
stroke-width: 1.5;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -397,53 +324,12 @@
|
||||
<!-- Rechte Seite -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Dark/Light Mode Schalter -->
|
||||
<button
|
||||
@click="darkMode = !darkMode; document.documentElement.classList.toggle('dark', darkMode); localStorage.setItem('darkMode', darkMode ? 'dark' : 'light');"
|
||||
class="p-2 ml-3 rounded-full flex items-center justify-center transition-all duration-300 group focus:outline-none focus:ring-2 focus:ring-indigo-400/50"
|
||||
:class="darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white/90 hover:bg-white shadow-md'"
|
||||
aria-label="Themen-Modus wechseln"
|
||||
data-toggle-theme>
|
||||
|
||||
<!-- Verbesserte Icon-Container für Light/Dark Mode Toggle -->
|
||||
<div class="relative w-10 h-6 flex items-center justify-center transition-all duration-500">
|
||||
<!-- Sonne (Light Mode) -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 absolute transform transition-all duration-500"
|
||||
:class="darkMode ? 'opacity-0 rotate-90 scale-0' : 'opacity-100 rotate-0 scale-100'"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
:style="darkMode ? '' : 'color: #6d28d9;'">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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" />
|
||||
</svg>
|
||||
|
||||
<!-- Mond (Dark Mode) -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 absolute transform transition-all duration-500"
|
||||
:class="darkMode ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-0'"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
style="color: #c4b5fd;">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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" />
|
||||
</svg>
|
||||
|
||||
<!-- Hintergrund-Glow-Effekt -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-full transition-all duration-300"
|
||||
:class="darkMode ? 'shadow-none' : 'shadow-[0_0_10px_rgba(124,58,237,0.3)]'">
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="toggleDarkMode()"
|
||||
class="theme-toggle"
|
||||
:class="{ 'dark': darkMode }"
|
||||
aria-label="Dark Mode umschalten"
|
||||
>
|
||||
</button>
|
||||
<!-- Profil-Link oder Login -->
|
||||
{% if current_user.is_authenticated %}
|
||||
@@ -814,8 +700,5 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="{{ url_for('static', filename='js/theme-toggle.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user