mirror of
https://github.com/mudler/LocalAI.git
synced 2024-06-07 19:40:48 +00:00
2c5a46bc34
* feat(webui): Add chat page Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * feat(webui): Add image-gen page Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * feat(webui): Add tts page Signed-off-by: Ettore Di Giacinto <mudler@localai.io> --------- Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
74 lines
1.8 KiB
CSS
74 lines
1.8 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;
|
|
}
|