style.css

/* 
    .CSS zur Anpassung der einzelnen Elemente;
    mit "#" werden Komponenten gekennzeichnet
    mit "." Komponenten die keine ID haben / in div stehen
    man kann Elementen eigene IDs geeben (Siehe #CHATBOT)
*/

/*gradio bug fix von github(9702) für mittige darstellung der avatar images*/
.message-row img {
    margin: 0px !important;
}

.avatar-container img {
padding: 0px !important;
}

/*background chatbot*/
.svelte-4mgbad {
    background: #ffffff !important;
}

/*background suchfeld*/
/*#component-4 {
    background: #E2554C !important;
}

/*nachrichten bot*/
.message.bot {
    background: #ffada7 !important;
    font-family: "Arial" !important; 
}
.message.bot * {
    color: #5d1d18 !important; 
}
.bot.svelte-1x5p6hu.svelte-1x5p6hu{
    border-width: 0px;
}

/*nachrichten user*/
.message.user {
    background: #e4e4e4 !important;
    font-family: "Arial" !important;
}
.message.user * {
    color: #000000 !important; 
}
.user.svelte-1x5p6hu.svelte-1x5p6hu{
    border-width: 0px;
}

/*textzeile*/
.svelte-11mx0st {
    background: #E2554C !important;
}
.svelte-5y6bt2 {
    background: #E2554C !important;
}
.svelte-11mx0st::placeholder {
    color: #ffffff !important;
}
.svelte-1kpcxni {
    background: #ffffff !important; 
}

#component-12 {
    background: #E2554C !important;
}
#component-5 {
    background: #ffffff !important;
}
#component-1 {
    background:#ffffff
}

/*Darkmode*/

/* Standard-Stile (für den Hellmodus) */
/* Standard (Hellmodus) */
/* Standardmodus (Hellmodus) */
/*
body {
    background-color: #ffffff;   Heller Hintergrund 
    color: #000000;              Dunkle Schrift 
}

.chatbox {
    background-color: #f9f9f9;   Hellere Chatbox 
    border-color: #cccccc;
}

.message.assistant {
    background-color: #e6e6e6;   Hellere Nachrichten 
    color: #000000;
}

.message.user {
    background-color: #dcdcdc;    Hellere Nachrichten 
    color: #000000;
}

input {
    background-color: #ffffff;    Heller Eingabebereich 
    color: #000000;
    border-color: #cccccc;
}

button {
    background-color: #e6e6e6;    Heller Button 
    color: #000000;
    border-color: #cccccc;
}
*/
/* Darkmode-Stile */
/*

@media (prefers-color-scheme: dark) {
    body {
        background-color: #181818;  Dunkler Hintergrund
        color: #ffffff;             Weiße Schrift
    }

    .chatbox {
        background-color: #2b2b2b;   Dunklerer Chatbereich 
        border-color: #555555;
    }

    .message.assistant {
        background-color: #333333;   Dunklere Nachrichten für den Assistenten 
        color: #ffffff;
    }

    .message.user {
        background-color: #444444;    Dunklere Nachrichten für den User 
        color: #ffffff;
    }

    input {
        background-color: #222222;   Dunkler Eingabebereich 
        color: #ffffff;
        border-color: #555555;
    }

    button {
        background-color: #333333;    Dunkler Button 
        color: #ffffff;
        border-color: #555555;
    }
}

*/