fonts

.gitattributes

@@ -37,3 +37,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
 assets/* filter=lfs diff=lfs merge=lfs -text
+assets/chat_icons filter=lfs diff=lfs merge=lfs -text
+assets/fonts filter=lfs diff=lfs merge=lfs -text

app.py

@@ -150,11 +150,11 @@ def main():
         value=[{"role": "assistant", "content": "Wie kann ich dir helfen?"}],
         type="messages",
         show_label=False,
-        avatar_images=("./assets/avatar_images/human.png", "./assets/avatar_images/robot.png"),
+        avatar_images=("./assets/chat_icons/person_icon.png", "./assets/chat_icons/chatbot_icon.png"),
         elem_id="CHATBOT",
         height=450
     )
-    
+
     chatinterface = gr.ChatInterface(
         fn=response,
         chatbot=chatbot,

style.css

@@ -1,21 +1,26 @@
 /* Inter Font laden */
 @font-face {
     font-family: "Inter";
-    src: url("./fonts/Inter.ttf") format("truetype");
+    src: url("./assets/fonts/Inter.ttf") format("truetype");
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: "LemonMilk";
-    src: url("./fonts/LemonMilk.otf") format("opentype");
+    src: url("./assets/fonts/LemonMilk.otf") format("opentype");
     font-weight: 700;
     font-style: normal;
 }
 
 /* Bot Nachricht - Farbe #8EA1C0 */
-.message.bot {
-    background: #8EA1C0 !important;
+.message.bot,
+.message.bot *,
+.message.bot p,
+.message.bot span,
+.message.bot div {
+    background: #AECDE9 !important;
+    color: #3E414A !important;
     font-family: "Inter", sans-serif !important;
 }
 
@@ -26,7 +31,7 @@
 .message.user span,
 .message.user div {
     background: #AECDE9 !important;
-    color: #000000 !important;
+    color: #3E414A !important;
     font-family: "Inter", sans-serif !important;
 }
 
@@ -60,20 +65,20 @@ h1, .main > div > h1 {
     margin: 5px auto !important;
     width: fit-content !important;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
-    color: #000000 !important;
+    color: #3E414A !important;
     font-family: "LemonMilk", sans-serif !important;
 }
 
-/* Eingabefeld Container - Breite reduzieren */
+/* Eingabefeld-Container wieder volle Breite */
 .input-container,
 [class*="input-container"],
 form,
 div.form {
-    max-width: calc(100% - 50px) !important;
+    max-width: 100% !important;      /* wieder volle Breite */
     margin-right: 0px !important;
 }
 
-/* Eingabefeld - z-index niedriger */
+/* Eingabefeld */
 textarea, input[type="text"] {
     background: #EDEDED !important;
     border: 3px solid #8EA1C0 !important;
@@ -117,7 +122,6 @@ button[aria-label="Undo"],
     display: none !important;
 }
 
-/* Submit Button - z-index höher */
 button[aria-label="Submit"],
 .submit-button,
 button.submit-button,
@@ -134,13 +138,16 @@ button.submit-button,
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    margin-left: 10px !important;
+
+    margin-left: auto !important;   /* bleibt, damit er nach rechts rutscht */
+    margin-right: 10px !important;  /* ← hier 10–20px einstellen, z.B. 10px */
     position: relative !important;
-    transform: translateY(-5px) !important;;
+    transform: translateY(-5px) !important;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
     z-index: 10 !important;
 }
 
+
 /* Submit Button Icon (SVG) färben */
 button[aria-label="Submit"] svg,
 .submit-button svg,
@@ -159,7 +166,7 @@ button.submit-button svg path,
 [class*="submit-button"] svg path,
 button[aria-label="Submit"] svg g,
 .submit-button svg g,
-button.submit-button svg g,
+button-submit svg g,
 [class*="submit-button"] svg g {
     fill: #000000 !important;
     stroke: #000000 !important;
@@ -182,3 +189,40 @@ input[type="text"]::-webkit-scrollbar-thumb {
     background: #000000 !important;
     border-radius: 10px !important;
 }
+
+/* Stop-Button während der Antwort */
+button[aria-label="Stop"],
+button[aria-label="Stop generation"],
+[class*="stop-button"] {
+    background-color: #3E414A !important;
+    border-radius: 50% !important;
+    width: 40px !important;
+    height: 40px !important;
+    min-width: 40px !important;
+    min-height: 40px !important;
+    padding: 0px !important;
+
+    border: 2px solid #3E414A !important;   /* gleiche Kontur wie gewünscht */
+
+    outline: none !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    margin-left: auto !important;           /* gleiche Position wie Submit */
+    margin-right: 10px !important;
+    position: relative !important;
+    transform: translateY(-5px) !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+    z-index: 10 !important;
+}
+
+/* Stop-Icon selbst */
+button[aria-label="Stop"] svg,
+button[aria-label="Stop generation"] svg,
+[class*="stop-button"] svg {
+    width: 24px !important;                 /* wie Submit-Icon */
+    height: 24px !important;
+    fill: #EDEDED !important;
+    stroke: #EDEDED !important;
+}

theme.py

@@ -13,7 +13,7 @@ class CustomTheme(gr.themes.Base):
             body_background_fill="#8EA1C0",
             body_background_fill_dark="#8EA1C0",
             button_primary_background_fill="#8EA1C0",
-            button_primary_background_fill_hover="#FFFFFF",
+            button_primary_background_fill_hover="#7A91B0",
             button_primary_text_color="#FFFFFF",
             button_secondary_background_fill="#EDEDED",
             input_background_fill="#EDEDED",