|
|
|
@ -13,6 +13,97 @@
|
|
|
|
|
background-color: @content-background-color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-chat-message {
|
|
|
|
|
padding: @grid-small-gutter-vertical @grid-small-gutter-horizontal;
|
|
|
|
|
margin: (@grid-small-gutter-vertical / 2) @grid-small-gutter-horizontal;
|
|
|
|
|
|
|
|
|
|
border: solid 1px @content-border-color;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
|
|
background: @content-background-color;
|
|
|
|
|
color: inherit;
|
|
|
|
|
font-size: var(--dtp-chat-font-size);
|
|
|
|
|
|
|
|
|
|
&.full-width {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
|
|
&:first-of-type { margin-top: 0; }
|
|
|
|
|
|
|
|
|
|
&:last-of-type { margin-bottom: 0; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.system-message {
|
|
|
|
|
background: #e8e8e8;
|
|
|
|
|
color: #1a1a1a;
|
|
|
|
|
|
|
|
|
|
&[data-message-type="info"] {
|
|
|
|
|
background: #068be4;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
&[data-message-type="warning"] {
|
|
|
|
|
background: #e4c306;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
&[data-message-type="error"] {
|
|
|
|
|
background: #ff00131a;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-username {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: var(--dtp-chat-font-size);
|
|
|
|
|
line-height: 1;
|
|
|
|
|
color: var(--dtp-chat-username-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img.chat-author-image {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-content {
|
|
|
|
|
line-height: 1.2em;
|
|
|
|
|
font-size: var(--dtp-chat-font-size);
|
|
|
|
|
color: inherit;
|
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
|
|
|
|
|
|
p:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-timestamp {
|
|
|
|
|
color: var(--dtp-chat-timestamp-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-sticker {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
color: inherit;
|
|
|
|
|
|
|
|
|
|
video {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-user-menu {
|
|
|
|
|
|
|
|
|
|
button.chat-menu-button {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: transparent;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#site-chat-container {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
background-color: @content-container-color;
|
|
|
|
@ -145,88 +236,6 @@
|
|
|
|
|
|
|
|
|
|
background-color: @scrollbar-thumb-color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-message {
|
|
|
|
|
padding: @grid-small-gutter-vertical @grid-small-gutter-horizontal;
|
|
|
|
|
margin: (@grid-small-gutter-vertical / 2) @grid-small-gutter-horizontal;
|
|
|
|
|
|
|
|
|
|
border: solid 1px @content-border-color;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
|
|
background: @content-background-color;
|
|
|
|
|
color: inherit;
|
|
|
|
|
font-size: var(--dtp-chat-font-size);
|
|
|
|
|
|
|
|
|
|
&.system-message {
|
|
|
|
|
background: #e8e8e8;
|
|
|
|
|
color: #1a1a1a;
|
|
|
|
|
|
|
|
|
|
&[data-message-type="info"] {
|
|
|
|
|
background: #068be4;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
&[data-message-type="warning"] {
|
|
|
|
|
background: #e4c306;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
&[data-message-type="error"] {
|
|
|
|
|
background: #ff00131a;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-username {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: var(--dtp-chat-font-size);
|
|
|
|
|
line-height: 1;
|
|
|
|
|
color: var(--dtp-chat-username-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img.chat-author-image {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-content {
|
|
|
|
|
line-height: 1.2em;
|
|
|
|
|
font-size: var(--dtp-chat-font-size);
|
|
|
|
|
color: inherit;
|
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
|
|
|
|
|
|
p:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-timestamp {
|
|
|
|
|
color: var(--dtp-chat-timestamp-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-sticker {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
color: inherit;
|
|
|
|
|
|
|
|
|
|
video {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-user-menu {
|
|
|
|
|
|
|
|
|
|
button.chat-menu-button {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: transparent;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-message-menu {
|
|
|
|
|