final edit sys-promt and markdown image
This commit is contained in:
459
static/chat.css
Normal file
459
static/chat.css
Normal file
@@ -0,0 +1,459 @@
|
||||
/* --- Basis Layout für die Chat Seite --- */
|
||||
.chat-main {
|
||||
display: flex;
|
||||
height: calc(100vh - 42px);
|
||||
margin-top: 45px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Kleiner visueller Indikator (zwei Punkte oder Linien) */
|
||||
.resizer::after {
|
||||
content: "⋮";
|
||||
color: var(--text-muted);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* --- Artikel Sidebar --- */
|
||||
.chat-article {
|
||||
/* width: 40%; Breite des Artikels
|
||||
max-width: 800px;*/
|
||||
height: 100%;
|
||||
background: var(--bg-section-alt);
|
||||
color: var(--text-main);
|
||||
overflow-y: auto; /* Erlaubt vertikales Scrollen */
|
||||
overflow-x: hidden; /* Verhindert horizontales Wackeln */
|
||||
|
||||
/* Positionierung der Scrollbar erzwingen */
|
||||
direction: rtl; /* Left-to-Right (Standard) setzt Scrollbar nach rechts */
|
||||
/* Optional: Ein schöneres Design für die Scrollbar (Webkit) */
|
||||
scrollbar-gutter: stable; /* Verhindert das Springen des Inhalts beim Erscheinen */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --- Artikel-Formatierung --- */
|
||||
.article-content {
|
||||
direction: ltr; /* Left-to-Right: Textfluss wieder normal */
|
||||
padding: 1rem; /* Hier kommt das eigentliche Padding für den Text hin */
|
||||
/* 1. Blocksatz */
|
||||
text-align: justify;
|
||||
/* Verhindert große Lücken im Blocksatz durch Silbentrennung */
|
||||
hyphens: auto;
|
||||
line-height: 1.6; /* Angenehmer Zeilenabstand */
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* 2. Abstand zwischen Absätzen */
|
||||
.article-content p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem; /* Etwa 1,5 Zeilen Platz nach jedem Absatz */
|
||||
}
|
||||
|
||||
/* Letzten Absatz ohne Abstand nach unten, falls ein Footer folgt */
|
||||
.article-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 3. Überschriften-Abstände (damit sie klar vom Text getrennt sind) */
|
||||
.article-content h1,
|
||||
.article-content h2,
|
||||
.article-content h3 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: left; /* Überschriften bleiben linksbündig */
|
||||
}
|
||||
|
||||
/* 4. Listen-Formatierung */
|
||||
.article-content ul,
|
||||
.article-content ol {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.article-content li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* --- Chat Container --- */
|
||||
.chat-container {
|
||||
flex: 1; /* Nimmt den verfügbaren Platz ein */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--card-bg);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
|
||||
/* --- System-Konfiguration Styling --- */
|
||||
.system-config {
|
||||
background-color: var(--bg-section-alt);
|
||||
border: 1px dashed var(--accent);
|
||||
border-radius: 12px;
|
||||
padding: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
/*align-self: stretch;*/
|
||||
box-shadow: 0 4px 12px var(--card-shadow);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.system-config strong {
|
||||
display: block;
|
||||
color: var(--accent);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.system-config p {
|
||||
margin-bottom: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Die Textarea für den Prompt */
|
||||
.system-textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: var(--bg-input);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.system-textarea:focus { border-color: var(--accent); }
|
||||
.system-config.locked { display: none; }
|
||||
|
||||
/* Eingabefeld (Chat) */
|
||||
#user-input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-input);
|
||||
color: var(--text-input);
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#user-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
#chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 80%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 15px;
|
||||
line-height: 1.5;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
align-self: flex-end;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-text);
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
align-self: flex-start;
|
||||
background-color: var(--bg-section-alt);
|
||||
color: var(--text-main);
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
padding: 20px;
|
||||
background-color: var(--card-bg);
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* View-Klassen */
|
||||
.view-chat-only .chat-article { display: none; }
|
||||
.view-chat-only .chat-container { display: flex; width: 100%; }
|
||||
|
||||
/* --- View-Logik: Article Only --- */
|
||||
.view-article-only .chat-container,
|
||||
.view-article-only .resizer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.view-article-only .chat-article {
|
||||
display: block !important;
|
||||
width: 100% !important; /* Erzwingt volle Breite */
|
||||
flex: 1 1 100% !important; /* Nimmt den gesamten Flex-Platz ein */
|
||||
max-width: none !important;
|
||||
border-right: none;
|
||||
padding-right: 20px; /* Ein bisschen Platz zum Rand lassen */
|
||||
}
|
||||
|
||||
.view-split .chat-article {
|
||||
display: block;
|
||||
flex: 0 0 40%; /* WICHTIG: Verhindert, dass das CSS die Breite erzwingt */
|
||||
/* width: ; Das ist jetzt nur noch der Startwert */
|
||||
max-width: 80%; /* Verhindert, dass man den Chat ganz wegdrückt */
|
||||
min-width: 10%; /* Verhindert, dass der Artikel verschwindet */
|
||||
}
|
||||
|
||||
.view-split .chat-container {
|
||||
display: flex;
|
||||
flex: 1 1 0; /* Nimmt sich dynamisch den Rest */
|
||||
min-width: 0; /* Verhindert das "Rausplatzen" bei langem Text */
|
||||
}
|
||||
|
||||
.resizing {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.resizer {
|
||||
width: 6px;
|
||||
cursor: col-resize;
|
||||
background-color: var(--border-color);
|
||||
transition: background 0.3s;
|
||||
cursor: col-resize;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.resizer:hover {
|
||||
background-color: var(--accent); /* Färbt sich beim Drüberfahren ein */
|
||||
}
|
||||
|
||||
|
||||
/* Button Deaktiviert-Status */
|
||||
.send-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
/* Die "KI schreibt..." Blase */
|
||||
.typing-indicator {
|
||||
align-self: flex-start;
|
||||
background-color: var(--bg-section-alt);
|
||||
padding: 12px 16px;
|
||||
border-radius: 15px;
|
||||
border-bottom-left-radius: 5px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
|
||||
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: scale(0); }
|
||||
40% { transform: scale(1.0); }
|
||||
}
|
||||
|
||||
/* Bilder im Artikel und Chat begrenzen */
|
||||
.article-content img,
|
||||
.ai-message img {
|
||||
max-width: 100%; /* Nie breiter als der Text */
|
||||
height: auto; /* Proportional bleiben */
|
||||
border-radius: 8px; /* Sieht moderner aus */
|
||||
margin: 1rem 0;
|
||||
box-shadow: 0 4px 10px var(--card-shadow);
|
||||
}
|
||||
|
||||
/* Links hervorheben */
|
||||
.article-content a,
|
||||
.ai-message a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.article-content a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Videos responsiv machen */
|
||||
.article-content video,
|
||||
.article-content iframe {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
.nav-links { display: none;}
|
||||
*/
|
||||
/* AUẞERHALB des Media Queries (für Desktop) */
|
||||
.nav-links {
|
||||
display: flex; /* Auf Desktop immer zeigen */
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.close-edit-btn {
|
||||
display: none !important;
|
||||
}
|
||||
/* Mobile Hamburger & Menu */
|
||||
@media (max-width: 600px) {
|
||||
.hamburger {
|
||||
display: flex !important; /* Hamburger nur auf Chat-Mobile zeigen */
|
||||
}
|
||||
.nav-links {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 40px; /* Abstand nach unten vom Hamburger */
|
||||
left: 10px; /* Richtet das Menü am linken Rand des Hamburgers aus */
|
||||
right: auto; /* Verhindert das "Ziehen" nach rechts */
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
/* padding: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 20px var(--card-shadow);*/
|
||||
|
||||
border-radius: 8px;
|
||||
min-width: 180px;
|
||||
box-shadow: 0 10px 25px var(--card-shadow);
|
||||
z-index: 2000;
|
||||
/*padding: 0.5rem 0;*/
|
||||
|
||||
}
|
||||
.nav-links.mobile-open {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*gap: 10px;*/
|
||||
}
|
||||
|
||||
.resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
/* WICHTIG: Nutzt die volle Höhe abzüglich Header,
|
||||
aber ohne aus dem Viewport zu ragen */
|
||||
height: calc(100dvh - 45px); /* dvh = dynamic viewport height */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view-split {
|
||||
flex-direction: column !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.view-split .chat-article {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
min-width: 100% !important;
|
||||
/* Wir geben dem Artikel eine feste, aber begrenzte Höhe */
|
||||
height: 35% !important;
|
||||
flex: 0 0 35% !important;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.view-split .chat-container {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
min-width: 100% !important;
|
||||
/* Der Chat nimmt den restlichen Platz ein (65%) */
|
||||
height: 65% !important;
|
||||
flex: 1 1 65% !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden; /* Verhindert, dass der Container wächst */
|
||||
}
|
||||
|
||||
#system-prompt-container {
|
||||
/* Verhindert, dass das Mitwachsen der Textarea den Chat-Scroll triggert */
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
#chat-messages {
|
||||
/* flex: 1; Drückt die Eingabezeile nach unten, aber hält sie im Bild */
|
||||
display: block !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.message {
|
||||
/* Da wir oben display: block nutzen, brauchen wir margin für die Abstände */
|
||||
margin-bottom: 15px;
|
||||
clear: both;
|
||||
display: block;
|
||||
/*width: fit-content;*/
|
||||
}
|
||||
/*
|
||||
.user-message {
|
||||
margin-left: auto;
|
||||
}*/
|
||||
|
||||
.user-message { float: right; }
|
||||
.ai-message { float: left; }
|
||||
.system-message {
|
||||
float: none;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
/* Sicherstellen, dass die Eingabezeile immer sichtbar bleibt */
|
||||
flex-shrink: 0;
|
||||
padding: 10px 15px; /* Etwas kompakter auf Mobile */
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
/* Diese Klasse wird per JS gesetzt, wenn du ins Feld klickst */
|
||||
.mobile-edit-mode {
|
||||
position: fixed !important;
|
||||
top: 45px !important;
|
||||
/*margin-top: 45px;*/
|
||||
left: 0 !important;
|
||||
max-width: none !important;
|
||||
min-width: 100% !important;
|
||||
width: 100vw !important;
|
||||
height: 75vh;
|
||||
z-index: 9999;
|
||||
background: var(--bg-body); /* Deine Hintergrundfarbe */
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile-edit-mode textarea {
|
||||
flex: 1; /* Nutzt den Platz über der Tastatur */
|
||||
font-size: 16px; /* Wichtig gegen Auto-Zoom */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user