Upload html_cai_style.css

html_cai_style.css

@@ -0,0 +1,286 @@
+/*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: 1px;
+        /*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(214, 196, 255) !important;
+    }
+    
+    .message-body p em {
+        color: rgb(107, 86, 145) !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(178, 178, 193) !important;
+    }
+    
+    .message-body p em {
+        color: rgb(107, 86, 145) !important;
+    }
+  }