104 lines
2.1 KiB
CSS
104 lines
2.1 KiB
CSS
/* ChatGPT Assistent Styles */
|
|
#chatgpt-assistant {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
#assistant-chat {
|
|
transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#assistant-toggle {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
#assistant-toggle:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
#assistant-history {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
|
}
|
|
|
|
#assistant-history::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
#assistant-history::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
#assistant-history::-webkit-scrollbar-thumb {
|
|
background-color: rgba(156, 163, 175, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.dark #assistant-history::-webkit-scrollbar-thumb {
|
|
background-color: rgba(156, 163, 175, 0.3);
|
|
}
|
|
|
|
/* Mach Platz für Notifications, damit sie nicht mit dem Assistenten überlappen */
|
|
.notification-area {
|
|
bottom: 5rem;
|
|
}
|
|
|
|
/* Verbesserter Glassmorphism-Effekt */
|
|
.glass-morphism {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.dark .glass-morphism {
|
|
background: rgba(15, 23, 42, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Dunkleres Dark Theme */
|
|
.dark {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.dark .bg-dark-900 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
|
|
}
|
|
|
|
.dark .bg-dark-800 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgba(15, 23, 42, var(--tw-bg-opacity)) !important;
|
|
}
|
|
|
|
.dark .bg-dark-700 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgba(23, 33, 64, var(--tw-bg-opacity)) !important;
|
|
}
|
|
|
|
/* Footer immer unten */
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
main {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
footer {
|
|
flex-shrink: 0;
|
|
} |