html_cai_style.css

/*Any changes you make require you to restart oobabooga entirely and run it again to apply the changes*/

/*Set background image/gif/video of chat area. Place a url into the url below within the '' or, if you want a local image -> Place any image into cache folder - Name it anything - Come back here and change the BG01 in the code bellow to the name of the file. Even if you delete the background image and replace it with a new one, it seems to be stored for a while inside the cache, so just rename it and you're safe.*/

/*.chat {*/
/*    background: url('file/cache/BG01.png') no-repeat center center;*/
/*}*/

.gradio-container {
    /*Entire page background color*/
    background: linear-gradient(to bottom, #142036, #21103b);
}

/*Scrollbar design*/

::-webkit-scrollbar {
    width: 8px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #364258;
}

::-webkit-scrollbar-thumb {
    background: #667a8d;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9adfff;
}

/* CSS for desktop devices */
@media screen and (min-width: 768px) {
    .chat {
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
        height: calc(100vh - 200px);
        overflow-y: auto;
        padding-right: 10px;
        display: flex;
        flex-direction: column-reverse;
        word-break: break-word;
        overflow-wrap: anywhere;
        background-size: cover;
        background-position: bottom;
        border-radius: 2%;
    }

    .message {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        padding-bottom: 28px;
        font-size: 15px;
        /*Character image distance from the left edge of the chat area*/
        padding-left: 10px;
        /*Change 'Quicksand' to a font you like and have installed on your PC or leave it as is*/
        font-family: Quicksand Medium, Arial, sans-serif;
        line-height: 1.428571429;
    }
    
    .circle-you {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .circle-bot {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .circle-bot img,
    .circle-you img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .circle-you, .circle-bot, .circle-bot img,
    .circle-you img {
        /*You can set the size of the profile images here, but if you do, you have to also adjust the .text{padding-left: 90px} to a different number according to the width of the image which is right below here*/
        width: 110px;
        height: 140px;
        /*Change the border roundness of character images*/
        border-radius: 20%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        transition: transform 0.3s ease;
    }
    
    .text {
        /*Change this to move the message box further left or right depending on the size of your profile pic*/
        padding-left: 60px;
        text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9);
    }
    
    .text p {
        margin-top: 2px;
    }
    
    .username {
        padding-left: 10px;
        font-size: 20px;
        font-weight: bold;
        padding: 3px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    }
    
    .message-body {
        position: relative;
        border-radius: 1rem;
        border-radius: 20px;
        /*Makes a pointy top left corner of the message*/
        border-top-left-radius: 4px;
        padding: 10px;
        padding-top: 5px;
        /*Message gradient background color - remove the line bellow if you don't want a background color or gradient*/
        background: linear-gradient(to bottom, #44566334, #6e647934);
        
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      }
      
    .message-body img {
        max-width: 300px;
        max-height: 300px;
        border-radius: 20px;
    }
    
    .message-body p {
        margin-bottom: 0 !important;
        font-size: 17px !important;
        line-height: 1.428571429 !important;
    }
    
    .message-body li {
        margin-top: 0.5em !important;
        margin-bottom: 0.5em !important;
    }
    
    .message-body li > p {
        display: inline !important;
    }
    
    .message-body code {
        overflow-x: auto;
    }
    .message-body :not(pre) > code {
        white-space: normal !important;
    }
    
    /*Change both of the lines at the bottom to the color which you want the italic text to be that happens when you put stars before and after words*/
    .dark .message-body p em {
        color: rgb(154, 153, 178) !important;
    }
    
    .message-body p em {
        color: rgb(222, 219, 255) !important;
    }
}

/* CSS for mobile devices */
@media screen and (max-width: 767px) {
    .chat {
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
        height: calc(100vh - 100px);
        overflow-y: auto;
        padding-right: 10px;
        display: flex;
        flex-direction: column-reverse;
        word-break: break-word;
        overflow-wrap: anywhere;
        background-size: cover;
        background-position: bottom;
    }
    
    .message {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        padding-bottom: 28px;
        font-size: 18px;
        /*Character image distance from the left edge of the chat area*/
        padding-left: 10px;
        /*Change to a font you like and have installed on your phone or leave it as is*/
        font-family: Quicksand Medium, Arial, sans-serif;
        line-height: 1.428571429;
    }
    
    .circle-you {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .circle-bot {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .circle-bot img,
    .circle-you img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .circle-you, .circle-bot, .circle-bot img,
    .circle-you img {
        /*You can set the size of the profile images here, but if you do, you have to also adjust the .text{padding-left: 90px} to a different number according to the width of the image which is right below here*/
        width: 60px;
        height: 80px;
        /*Change the border roundness of character images*/
        border-radius: 10%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }
    
    .text {
        /*Change this to move the message box further left or right depending on the size of your profile pic*/
        padding-left: 5px;
        text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9);
    }
    
    .text p {
        margin-top: 2px;
    }
    
    .username {
        padding-left: 10px;
        font-size: 16px;
        font-weight: bold;
        padding: 3px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    }
    
    .message-body {
        position: relative;
        border-radius: 1rem;
        border-radius: 20px;
        /*Makes a pointy top left corner of the message*/
        border-top-left-radius: 5px;
        padding: 10px;
        padding-top: 5px;
        /*Message gradient background color - remove the line bellow if you don't want a background color or gradient*/
        background: linear-gradient(to bottom, #44566334, #6e647934);
        
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      }
      
    .message-body img {
        max-width: 300px;
        max-height: 300px;
        border-radius: 20px;
    }
    
    .message-body p {
        margin-bottom: 0 !important;
        font-size: 15px !important;
        line-height: 1.428571429 !important;
    }
    
    .message-body li {
        margin-top: 0.5em !important;
        margin-bottom: 0.5em !important;
    }
    
    .message-body li > p {
        display: inline !important;
    }
    
    .message-body code {
        overflow-x: auto;
    }
    .message-body :not(pre) > code {
        white-space: normal !important;
    }
    
    /*Change both of the lines at the bottom to the color which you want the italic text to be that happens when you put stars before and after words*/
    .dark .message-body p em {
        color: rgb(154, 153, 178) !important;
    }
    
    .message-body p em {
        color: rgb(222, 219, 255) !important;
    }
  }