238 lines
6.9 KiB
CSS
238 lines
6.9 KiB
CSS
/* eveai_chat.css */
|
|
:root {
|
|
--user-message-bg: #292929; /* Default user message background color */
|
|
--bot-message-bg: #1e1e1e; /* Default bot message background color */
|
|
--chat-bg: #1e1e1e; /* Default chat background color */
|
|
--status-line-color: #e9e9e9; /* Color for the status line text */
|
|
--status-line-bg: #1e1e1e; /* Background color for the status line */
|
|
--status-line-height: 30px; /* Fixed height for the status line */
|
|
|
|
--algorithm-color-rag-tenant: #0f0; /* Green for RAG_TENANT */
|
|
--algorithm-color-rag-wikipedia: #00f; /* Blue for RAG_WIKIPEDIA */
|
|
--algorithm-color-rag-google: #ff0; /* Yellow for RAG_GOOGLE */
|
|
--algorithm-color-llm: #800080; /* Purple for RAG_LLM */
|
|
|
|
/*--font-family: 'Arial, sans-serif'; !* Default font family *!*/
|
|
--font-family: 'ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol';
|
|
--font-color: #e9e9e9; /* Default font color */
|
|
--user-message-font-color: #e9e9e9; /* User message font color */
|
|
--bot-message-font-color: #e9e9e9; /* Bot message font color */
|
|
--input-bg: #292929; /* Input background color */
|
|
--input-border: #ccc; /* Input border color */
|
|
--input-text-color: #e9e9e9; /* Input text color */
|
|
--button-color: #007bff; /* Button text color */
|
|
|
|
/* Variables for hyperlink backgrounds */
|
|
--link-bg: #1e1e1e; /* Default background color for hyperlinks */
|
|
--link-hover-bg: #1e1e1e; /* Background color on hover for hyperlinks */
|
|
--link-color: #dec981; /* Default text color for hyperlinks */
|
|
--link-hover-color: #D68F53; /* Text color on hover for hyperlinks */
|
|
|
|
/* New scrollbar variables */
|
|
--scrollbar-bg: #292929; /* Background color for the scrollbar track */
|
|
--scrollbar-thumb: #4b4b4b; /* Color for the scrollbar thumb */
|
|
--scrollbar-thumb-hover: #dec981; /* Color for the thumb on hover */
|
|
--scrollbar-thumb-active: #D68F53; /* Color for the thumb when active (dragged) */
|
|
|
|
/* Thumb colors */
|
|
--thumb-icon-outlined: #4b4b4b;
|
|
--thumb-icon-filled: #e9e9e9;
|
|
}
|
|
|
|
/* Custom scrollbar styles */
|
|
.messages-area::-webkit-scrollbar {
|
|
width: 12px; /* Width of the scrollbar */
|
|
}
|
|
|
|
.messages-area::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-bg); /* Background color for the track */
|
|
}
|
|
|
|
.messages-area::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb); /* Color of the thumb */
|
|
border-radius: 10px; /* Rounded corners for the thumb */
|
|
border: 3px solid var(--scrollbar-bg); /* Space around the thumb */
|
|
}
|
|
|
|
.messages-area::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scrollbar-thumb-hover); /* Color when hovering over the thumb */
|
|
}
|
|
|
|
.messages-area::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--scrollbar-thumb-active); /* Color when active (dragging) */
|
|
}
|
|
|
|
/* For Firefox */
|
|
.messages-area {
|
|
scrollbar-width: thin; /* Make scrollbar thinner */
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Thumb and track colors */
|
|
}
|
|
|
|
/* General Styles */
|
|
.chat-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 99vh;
|
|
/*max-height: 100vh;*/
|
|
max-width: 600px;
|
|
margin: auto;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-color: var(--chat-bg);
|
|
font-family: var(--font-family); /* Apply the default font family */
|
|
color: var(--font-color); /* Apply the default font color */
|
|
}
|
|
|
|
.messages-area {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
background-color: var(--bot-message-bg);
|
|
}
|
|
|
|
.message {
|
|
max-width: 90%;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.message.user {
|
|
margin-left: auto;
|
|
background-color: var(--user-message-bg);
|
|
color: var(--user-message-font-color); /* Apply user message font color */
|
|
}
|
|
|
|
.message.bot {
|
|
background-color: var(--bot-message-bg);
|
|
color: var(--bot-message-font-color); /* Apply bot message font color */
|
|
}
|
|
|
|
.message-icons {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Scoped styles for thumb icons */
|
|
.thumb-icon.outlined {
|
|
color: var(--thumb-icon-outlined); /* Color for outlined state */
|
|
}
|
|
|
|
.thumb-icon.filled {
|
|
color: var(--thumb-icon-filled); /* Color for filled state */
|
|
}
|
|
|
|
/* Default styles for material icons */
|
|
.material-icons {
|
|
font-size: 24px;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.question-area {
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--user-message-bg);
|
|
}
|
|
|
|
.question-area input {
|
|
flex: 1;
|
|
border: none;
|
|
padding: 10px;
|
|
border-radius: 15px;
|
|
margin-right: 10px;
|
|
background-color: var(--input-bg); /* Apply input background color */
|
|
border: 1px solid var(--input-border); /* Apply input border color */
|
|
color: var(--input-text-color); /* Apply input text color */
|
|
}
|
|
|
|
.question-area button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--button-color);
|
|
}
|
|
|
|
/* Styles for the send icon */
|
|
.send-icon {
|
|
font-size: 24px; /* Size of the icon */
|
|
color: var(--button-color); /* Color of the icon */
|
|
}
|
|
|
|
.send-icon.disabled {
|
|
color: grey; /* Color for the disabled state */
|
|
cursor: not-allowed; /* Change cursor to indicate disabled state */
|
|
}
|
|
|
|
/* New CSS for the status-line */
|
|
.status-line {
|
|
height: var(--status-line-height); /* Fixed height for the status line */
|
|
padding: 5px 10px;
|
|
background-color: var(--status-line-bg); /* Background color */
|
|
color: var(--status-line-color); /* Text color */
|
|
font-size: 0.9rem; /* Slightly smaller font size */
|
|
text-align: center; /* Centered text */
|
|
border-top: 1px solid #ccc; /* Subtle top border */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Algorithm-specific colors for fingerprint icon */
|
|
.fingerprint-rag-tenant {
|
|
color: var(--algorithm-color-rag-tenant);
|
|
}
|
|
|
|
.fingerprint-rag-wikipedia {
|
|
color: var(--algorithm-color-rag-wikipedia);
|
|
}
|
|
|
|
.fingerprint-rag-google {
|
|
color: var(--algorithm-color-rag-google);
|
|
}
|
|
|
|
.fingerprint-llm {
|
|
color: var(--algorithm-color-llm);
|
|
}
|
|
|
|
/* Styling for citation links */
|
|
.citations a {
|
|
background-color: var(--link-bg); /* Apply default background color */
|
|
color: var(--link-color); /* Apply default link color */
|
|
padding: 2px 4px; /* Add padding for better appearance */
|
|
border-radius: 3px; /* Add slight rounding for a modern look */
|
|
text-decoration: none; /* Remove default underline */
|
|
transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
|
|
}
|
|
|
|
.citations a:hover {
|
|
background-color: var(--link-hover-bg); /* Background color on hover */
|
|
color: var(--link-hover-color); /* Text color on hover */
|
|
}
|
|
|
|
/* Media queries for responsiveness */
|
|
@media (max-width: 768px) {
|
|
.chat-container {
|
|
max-width: 90%; /* Reduce max width on smaller screens */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.chat-container {
|
|
max-width: 95%; /* Further reduce max width on very small screens */
|
|
}
|
|
|
|
.question-area input {
|
|
font-size: 0.9rem; /* Adjust input font size for smaller screens */
|
|
}
|
|
|
|
.status-line {
|
|
font-size: 0.8rem; /* Adjust status line font size for smaller screens */
|
|
}
|
|
}
|
|
|
|
|
|
|