Hugging Face's logo

Imablank
/
AnythingV3-1

Model card Files Community
2
AnythingV3-1 / html_cai_style.css
Imablank's picture
Imablank
Update html_cai_style.css
5410a6a
raw history blame contribute delete
8.3 kB
/*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;
}
}