mirror of
https://github.com/mudler/LocalAI.git
synced 2024-06-07 19:40:48 +00:00
b58274b8a2
* feat(ui/chat): handle multiline in the input field Signed-off-by: mudler <mudler@localai.io> * feat(ui/chat): correctly display multiline messages Signed-off-by: mudler <mudler@localai.io> * feat(ui/chat): add list style Signed-off-by: mudler <mudler@localai.io> --------- Signed-off-by: mudler <mudler@localai.io>
94 lines
2.4 KiB
CSS
94 lines
2.4 KiB
CSS
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.chat-container { height: 90vh; display: flex; flex-direction: column; }
|
|
.chat-messages { overflow-y: auto; flex-grow: 1; }
|
|
.htmx-indicator{
|
|
opacity:0;
|
|
transition: opacity 10ms ease-in;
|
|
}
|
|
.htmx-request .htmx-indicator{
|
|
opacity:1
|
|
}
|
|
/* Loader (https://cssloaders.github.io/) */
|
|
.loader {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
margin:15px auto;
|
|
position: relative;
|
|
color: #FFF;
|
|
box-sizing: border-box;
|
|
animation: animloader 2s linear infinite;
|
|
}
|
|
|
|
@keyframes animloader {
|
|
0% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
|
|
25% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px; }
|
|
50% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px; }
|
|
75% { box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
|
|
100% { box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px; }
|
|
}
|
|
.progress {
|
|
height: 20px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
background-color: #f5f5f5;
|
|
border-radius: 4px;
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
|
|
}
|
|
.progress-bar {
|
|
float: left;
|
|
width: 0%;
|
|
height: 100%;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: #337ab7;
|
|
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
|
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
|
-webkit-transition: width .6s ease;
|
|
-o-transition: width .6s ease;
|
|
transition: width .6s ease;
|
|
}
|
|
|
|
.user {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.assistant {
|
|
background-color: #28a745;
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user, .assistant {
|
|
flex-grow: 1;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc; /* Adds bullet points */
|
|
padding-left: 1.25rem; /* Indents the list from the left margin */
|
|
margin-top: 1rem; /* Space above the list */
|
|
}
|
|
|
|
li {
|
|
font-size: 0.875rem; /* Small text size */
|
|
color: #4a5568; /* Dark gray text */
|
|
background-color: #f7fafc; /* Very light gray background */
|
|
border-radius: 0.375rem; /* Rounded corners */
|
|
padding: 0.5rem; /* Padding inside each list item */
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Subtle shadow */
|
|
margin-bottom: 0.5rem; /* Vertical space between list items */
|
|
}
|
|
|
|
li:last-child {
|
|
margin-bottom: 0; /* Removes bottom margin from the last item */
|
|
}
|