discourse/plugins/chat/assets/stylesheets/common/chat-message.scss

366 lines
6.3 KiB
SCSS

.chat-message-deleted,
.chat-message-hidden {
margin-left: calc(var(--message-left-width) + 0.75em);
padding: 0;
.chat-message-expand {
color: var(--primary-low-mid);
padding: 0.25em;
.d-button-label {
text-align: left;
}
&:hover {
background: inherit;
color: inherit;
}
}
}
.chat-message {
align-items: flex-start;
padding: 0.25em 0.5em 0.25em 0.75em;
display: flex;
min-width: 0;
.chat-message-reaction {
@include chat-reaction;
}
&.chat-action {
background-color: var(--highlight-bg);
}
&.errored {
color: var(--primary-medium);
}
&.deleted {
background-color: var(--danger-low);
}
.not-mobile-device &.deleted:hover {
background-color: var(--danger-hover);
}
&.is-reply {
display: grid;
grid-template-columns: var(--message-left-width) 1fr;
grid-template-rows: 30px auto;
grid-template-areas:
"replyto replyto"
"avatar message";
.chat-user-avatar {
grid-area: avatar;
}
.chat-message-content {
grid-area: message;
}
}
&.is-threaded {
display: grid;
grid-template-columns: var(--message-left-width) 1fr;
grid-template-rows: auto;
grid-template-areas:
"avatar message"
"threadindicator threadindicator";
padding: 0.65rem 1rem !important;
.chat-user-avatar {
grid-area: avatar;
}
.chat-message-content {
grid-area: message;
}
}
.chat-message-content {
display: flex;
flex-direction: column;
flex-grow: 1;
word-break: break-word;
overflow-wrap: break-word;
min-width: 0;
}
.chat-message-text {
min-width: 0;
width: 100%;
code {
box-sizing: border-box;
font-size: var(--font-down-1);
width: 100%;
}
.mention.highlighted {
background: var(--tertiary-low);
color: var(--primary);
display: inline-block;
font-size: 0.93em;
font-weight: normal;
padding: 0 0.3em 0.07em;
border-radius: 0.6em;
text-decoration: none;
}
// Automatic aspect-ratio mapping https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping
p img:not(.emoji) {
max-width: 100%;
height: auto;
}
ul,
ol {
padding-left: 1.25em;
}
}
.chat-message-edited {
display: inline-block;
color: var(--primary-medium);
font-size: var(--font-down-2);
}
.chat-message-reaction-list,
.chat-transcript-reactions {
@include unselectable;
margin-top: 0.25em;
display: flex;
flex-wrap: wrap;
.reaction-users-list {
position: absolute;
top: -2px;
transform: translateY(-100%);
border: 1px solid var(--primary-low);
border-radius: 6px;
padding: 0.5em;
background: var(--primary-very-low);
max-width: 300px;
z-index: 3;
}
.chat-message-react-btn {
vertical-align: top;
padding: 0em 0.25em;
background: none;
border: none;
> * {
pointer-events: none;
}
.d-icon {
color: var(--primary-high);
}
&:hover {
.d-icon {
color: var(--primary);
}
}
}
}
.chat-send-error {
color: var(--danger-medium);
}
.chat-message-mention-warning {
position: relative;
margin-top: 0.25em;
font-size: var(--font-down-1);
.dismiss-mention-warning {
position: absolute;
top: 15px;
right: 5px;
cursor: pointer;
}
.warning-item {
margin: 0.25em 0;
}
.invite-link {
color: var(--tertiary);
cursor: pointer;
}
}
.chat-message-avatar .chat-user-avatar .chat-user-avatar-container .avatar,
.chat-emoji-avatar .chat-emoji-avatar-container {
width: 28px;
height: 28px;
}
}
.chat-message-container.highlighted .chat-message {
background-color: var(--tertiary-low) !important;
}
.chat-messages-container {
.chat-message {
&.chat-message-bookmarked {
background: var(--highlight-bg);
}
.chat-message-reaction-list .chat-message-react-btn {
display: none;
}
}
.chat-message-container {
background-color: var(--secondary);
.touch & {
&:active,
&.is-active {
background: var(--d-hover);
border-radius: 5px;
}
&.chat-message-bookmarked {
&:active,
&.is-active {
background: var(--highlight-low);
}
}
}
.no-touch & {
&.is-active,
&:hover,
&:active {
background: var(--d-hover);
}
&:hover {
.chat-message-react-btn {
display: inline-block;
}
}
&.chat-message-bookmarked {
&.is-active,
&:hover {
background: var(--highlight-medium);
}
}
}
}
}
.chat-message-flagged {
display: inline-block;
color: var(--danger);
height: 100%;
padding: 0 0.3em;
cursor: pointer;
.flag-count,
.d-icon {
color: var(--danger);
}
}
.chat-action-text {
font-style: italic;
}
.has-full-page-chat .chat-message .onebox:not(img),
.chat-drawer-container .chat-message .onebox {
margin: 0.5em 0;
border-width: 2px;
header {
margin-bottom: 0.5em;
}
h3 a,
h4 a {
font-size: 14px;
}
pre {
display: flex;
max-height: 150px;
}
p {
overflow: hidden;
}
}
.chat-drawer-container .chat-message .onebox {
width: 85%;
border: 2px solid var(--primary-low);
header {
margin-bottom: 0.5em;
}
.onebox-body {
grid-template-rows: auto auto auto;
overflow: auto;
}
h3 {
@include line-clamp(2);
font-weight: 500;
font-size: var(--font-down-1);
}
p {
display: none;
}
}
.chat-message-reaction {
> * {
pointer-events: none;
}
}
.retry-staged-message-btn {
padding: 0.5em 0;
background: none;
&:hover,
&:focus,
&:active {
background: none !important;
}
&:focus .retry-staged-message-btn__action {
text-decoration: underline;
}
.d-icon,
&__title,
&:hover .d-icon {
color: var(--danger) !important;
font-size: var(--font-down-1);
}
.d-icon {
margin-right: 0.25em !important;
}
&__action {
color: var(--tertiary);
font-size: var(--font-down-1);
margin-left: 0.25em;
&:hover {
color: var(--tertiary-high);
text-decoration: underline;
}
}
}