04.12.2022: цитирование
.sh-tooltip {
visibility: hidden!important;
}
.sherlock-chat .reply-box {
display: grid;
grid-template-columns: 30px 1fr 30px;
align-items: center;
margin-left: 6px;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
.sherlock-chat .reply-box .message-reply-box {
border-left: 1px solid #007bff;
padding-left: 6px;
padding-right: 6px;
display: flex;
flex-direction: column;
}
.sherlock-chat .reply-box .message-reply-box .message-reply-text {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
height: 15px;
word-break: break-all;
}
.sherlock-chat .reply-box .reply-cancel-btn {
width: 15px;
height: 15px;
}
.sherlock-chat .reply-info {
border-bottom: 1px solid #000000;
margin-bottom: 3px;
padding-bottom: 5px;
}
.sherlock-chat .reply-info b {
margin-right: 10px;
}
21.09.2022: панель Emoji
.sherlock-chat .editor .editor-panel {
display: flex;
width: 100%;
}
.sherlock-chat .editor .editor-panel.col {
flex-direction: column;
}
.sherlock-chat .editor .editor-panel.col .emoji {
top: -125px;
padding: 5px;
left: -20px;
right: 100px;
}
// ".emoji-2" style should be deleted
.sherlock-chat .editor .editor-panel .emoji.emoji-2 {
top: -180px;
padding: 5px;
left: 23px;
right: calc(100vw - 260px);
}
.emoji-mart-scroll {
width: 225px;
height: 163px !important;
padding: 0 4px 6px 0px;
}
.emoji-mart-scroll::-webkit-scrollbar {
width: 5px;
}
.emoji-mart-scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
.emoji-mart-scroll::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #dee2e6;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
26.10.2021: версия чата без пересчета высоты
.sherlock-chat .sherlock-welcome-form {
height: 100%;
}
.sherlock-chat .sherlock-form {
height: 100%;
}
.sherlock-chat .sherlock-feedback-form {
height: 100%;
}
.sherlock-chat#sherlockChat {
display: flex;
flex-direction: column;
height: 100%;
}
.sherlock-chat .chat {
display: flex;
flex-direction: column;
height: 100%;
}
// Новый стиль
.sherlock-chat .sherlock-app {
height: 100%;
width: 320px;
display: flex;
flex-direction: column;
}
25.10.2021: версия чата с поддержкой нескольких открытых диалогов и окном выбора диалога
.sherlock-chat .selectDialog {
position: absolute;
top: 7px;
left: 4px;
font-size: 32px;
font-weight: bold;
}
.sherlock-chat .sherlock-request-selector {
/* border-top: 1px solid #EAEAEA; */
padding: 10px;
margin-top: 30px;
}
.sherlock-chat .sherlock-request-selector__row {
border-top: 1px solid #EAEAEA;
padding: 10px 0;
}
.sherlock-chat .sherlock-request-selector__text {
padding-top: 5px;
}
.sherlock-chat .sherlock-request-selector__message-date {
font-size: 11px;
color: #8e8e8e;
float: right;
}
20.09.2021: поддержка статуса offline для чата
.sherlock-chat .welcome-message-header {
text-align: end;
z-index: 2147483620;
display: flex;
justify-content: space-between;
}
.sherlock-chat.offline-chat {
width: 300px;
min-height: 60px;
position: fixed;
bottom: 60px;
right: 60px;
z-index: 2147483646;
border: 1px solid #cecece;
padding: 15px;
border-radius: 15px;
display: flex;
flex-direction: column;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.36);
font-family: Arial;
}
.sherlock-chat .welcome-message-close-icon {
width: 16px;
height: 16px;
}
.sherlock-chat .welcome-message-text {
line-height: 1.5em;
}
.sherlock-chat .welcome-message-operator {
font-weight: bold;
}
.sherlock-chat .welcome-message-typing {
margin-top: 10px;
font-size: 0.8em;
color: #c1c1c1;
}
.sherlock-chat .c-pointer {
cursor: pointer;
}
.sherlock-chat .empty {
display: none;
}
.sherlock-chat .offline-chat::before {
display: block;
position: absolute;
float: left;
border: 0 solid transparent;
border-left-width: 10px;
border-right-width: 10px;
border-top: 10px solid #ffffff;
content: '';
bottom: -10px;
right: 15px;
}
.sherlock-chat.offline-chat hr{
width: 100%;
border-style: solid;
border-width: 0.5px;
color: #cacaca;
}
04.06.2021: поддержка кнопки сворачивания клавиатуры
.sherlock-chat .editor-buttons__keyboard {
cursor: pointer;
height: 19px;
width: 25px;
background-repeat: no-repeat;
background-size: contain;
float: right;
display: inline-block;
margin-top: 5px;
margin-bottom: 15px;
}
.sherlock-chat .editor-buttons__keyboard:hover {
cursor: pointer;
}
.sherlock-chat .editor-buttons__keyboard button {
width: 150px;
height: 32px;
border-radius: 4px;
border-style: none;
background-color: #005AAB;
color: #FFFFFF;
font-family: 'SourceSansPro', sans-serif;
font-size: 16px;
cursor: pointer;
text-transform: uppercase;
}
.sherlock-chat .editor-buttons__keyboard button:disabled:hover {
background-color: #DFDFDF;
cursor: not-allowed;
}
.sherlock-chat .editor-buttons__keyboard button:hover {
background-color: #0b6bc9;
}
.sherlock-chat .editor-buttons__keyboard button:active {
background-color: #ed1c24;
}
.sherlock-chat .editor-buttons__keyboard button:focus {
outline: none;
}
.sherlock-chat .editor-buttons-2__keyboard {
cursor: pointer;
height: 19px;
width: 25px;
background-repeat: no-repeat;
background-size: contain;
float: right;
display: inline-block;
margin-top: 5px;
margin-right: 8px;
}
.sherlock-chat .editor-keyboard {
margin:0 auto;
display: block;
width: inherit;
height: inherit;
}
Ранее: скрытие виджета при открытии чата
Внимание: не добавлять, если кнопка виджета должна оставаться видимой.
.sherlock-chat .display-none {
display: none;
}