llm-mixer / css /default.css
Hansimov's picture
:zap: [Enhance] Prettify padding of chat-session-container and shadow of message
89b5851
raw
history blame
4.15 kB
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
}
.container {
max-width: 100vw;
}
/* Adaptation for mobile */
@media (min-width: 900px) {
.container {
max-width: 900px;
}
}
.form-control {
margin: 0;
padding: 5px 5px 5px 5px;
}
body {
/* background-image: linear-gradient(90deg, #eef3ff, #ecf1ff); */
background-color: #ecf1ff;
}
#main-container {
height: 100vh;
display: flex;
flex-direction: column;
}
#top-toolbar {
background-color: #e9efff;
flex: 0 0 auto;
}
#chat-session-container {
overflow-y: auto;
overflow-x: hidden;
padding: 4px 0px 0px 0px;
flex: 1 1 auto;
}
#user-interactions {
box-shadow: 0px 2px 8px 0px rgba(122, 122, 122, 0.4);
/* background-image: linear-gradient(-45deg, #eef3ff, #e9efff); */
background-color: #e9efff;
border-radius: 10px;
flex: 0 0 auto;
}
.message-user,
.message-assistant {
box-shadow: 0px 1px 4px 0px rgba(122, 122, 122, 0.4);
border-radius: 5px;
padding: 5px 0px 5px 0px;
margin: 0px 0px 8px 0px;
}
.message-user {
/* background-image: linear-gradient(-45deg, #f6f8fe, #e9efff); */
background-color: #e9fbff;
}
.message-user .role-displayer {
color: #0f74da;
}
.message-assistant {
/* background-image: linear-gradient(-45deg, #f4f6fe, #ecedff); */
background-color: #ecedff;
}
.message-assistant .role-displayer {
color: #d03afe;
}
.inferring {
/* background-image: linear-gradient(-45deg, #f6f8fe, #fff5e5); */
background-color: #fff5e5;
}
#chat-agents-sidebar,
#chat-history-sidebar {
box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
/* background-image: linear-gradient(-45deg, #eef3ff, #e9efff); */
background-color: rgba(233, 239, 255, 0.6);
border-width: 0px;
}
.available-model-item {
display: flex;
align-items: center;
justify-content: center;
}
.available-model-item:hover {
background-color: #dbedff;
cursor: pointer;
}
#user-input {
resize: none;
max-height: 500px;
}
.chat-user {
color: black;
/* border: lightgray 1px solid; */
/* background-color: #eafaf1; */
white-space: pre-wrap;
}
.chat-assistant {
/* color: blue; */
/* border: lightgray 1px solid; */
}
#available-models-select {
max-width: calc(100vw - 200px);
display: none;
}
#agents-select {
max-width: calc(100vw - 200px);
}
#temperature-select {
max-width: 75px;
}
.message-viewer .edit-button,
.message-viewer .copy-button,
.message-viewer .regenerate-button {
display: none;
}
.message-viewer:hover .edit-button,
.message-viewer:hover .copy-button,
.message-viewer:hover .regenerate-button {
display: inline-block;
}
.message-viewer * {
margin-bottom: 0;
}
/* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
.message-viewer .role-displayer,
.message-viewer .content-displayer {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
@keyframes blink {
0% {
background-color: transparent;
}
50% {
background-color: antiquewhite;
}
100% {
background-color: transparent;
}
}
.blinking {
animation: blink 2s infinite;
}
.fa:hover {
color: lightsalmon;
transform: scale(1.25);
}
.fa-small {
font-size: small;
margin: 0;
padding: 0;
}
.icon-success {
color: green;
}
.fa-spin-fast {
animation: fa-spin 0.6s infinite linear;
color: orange;
}
.fa-fade-fast {
animation: fa-fade 1.5s infinite linear;
color: orange;
}
.new-agent-button {
background-color: #e9efff;
border-width: 0px;
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(122, 122, 122, 0.4);
}
.agent-button {
background-color: #e9efff;
border-width: 0px;
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(122, 122, 122, 0.4);
}
.new-agent-button:hover {
background-color: rgb(223, 252, 227);
font-weight: bold;
}
.agent-button:hover {
background-color: rgb(252, 231, 223);
font-weight: bold;
}