hexabot/frontend/src/components/inbox/inbox.css

119 lines
2.7 KiB
CSS

:root {
--cs-main-color: #43a29b;
--cs-main-color-light: #d7f0eb6e;
--cs-main-color-dark: #f5f6fa;
--cs-message-incoming-color: #f5f6fa;
--cs-message-outgoing-color: #43a29b;
--cs-message-outgoing-text-color: #ffffff;
--cs-message-incming-text-color: hsl(174, 59%, 7%);
--cs-message-input-color: #43a29c3e;
--cs-message-search-bg: #fdfefe;
--cs-message-input-bg: #f5f6fa;
--cs-message-input-bg-disabled: #e6e6e6;
}
.cs-conversation-header {
background-color: #f5f6fa !important;
}
div .cs-message--outgoing .cs-message__content {
background-color: var(--cs-message-outgoing-color) !important;
}
div .cs-message--outgoing .cs-message__custom-content {
color: var(--cs-message-outgoing-text-color) !important;
}
div .cs-message--incoming .cs-message__content {
background-color: var(--cs-main-color-dark) !important;
}
div .cs-message-input__content-editor-wrapper {
background-color: var(--cs-message-input-bg);
outline: 1px solid rgba(0, 0, 0, 0.142);
}
div .cs-message-input--disabled .cs-message-input__content-editor-wrapper {
background-color: var(--cs-message-input-bg-disabled);
}
div .cs-message-input__content-editor-container,
.cs-message-input__content-editor {
background-color: rgba(255, 255, 255, 0) !important;
}
.cs-button--send {
color: var(--cs-main-color) !important;
}
.cs-conversation {
background-color: #f7f7f700 !important;
color: #071b19 !important;
font-weight: 500 !important;
}
.cs-conversation--active {
background-color: var(--cs-message-input-bg) !important;
}
.cs-conversation-list {
overflow: auto !important;
}
.cs-conversation__info {
color: #0e2525 !important;
font-weight: 200;
}
.cs-search {
background-color: var(--cs-message-search-bg) !important;
outline: 1px solid rgba(0, 0, 0, 0.23);
border-radius: 99px !important;
}
/* Now target .cs-search when the child input is active */
.cs-search:has(input:focus) {
outline: 2px solid var(--cs-main-color) !important;
}
.cs-search input {
background-color: #ffffff00 !important;
}
.cs-search__search-icon,
.cs-search__clear-icon {
color: var(--cs-main-color) !important;
}
.ps__rail-y {
background-color: var(--cs-main-color-light) !important;
}
.ps__thumb-y {
background-color: var(--cs-main-color) !important;
}
.cs-main-container > .cs-sidebar.cs-sidebar--left {
flex-basis: 50%;
max-width: 420px !important;
}
.cs-avatar:hover > img {
filter: none !important;
}
.cs-message-input {
padding: 15px 5px !important;
box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.066);
}
/* Styles for autolinked chat messages */
.chat-link {
color: inherit !important;
text-decoration: underline !important;
word-break: break-all !important;
}
.chat-link:hover {
opacity: 0.8;
}