discourse/plugins/chat/assets/stylesheets/common/chat-message-info.scss
Joffrey JAFFEUX 550895a970
FEATURE: adds a link to original message (#25503)
This commit adds a link to the original message of a thread, this link will:
- load the channel message and highlight it while keeping thread panel open on desktop
- open the channel and highlight the message in mobile (and close thread panel, as mobile never shows channel and thread in the same view)

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-02-01 18:27:38 +01:00

102 lines
1.7 KiB
SCSS

.chat-message-info {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.25rem;
}
.chat-message-info__username {
display: inline-flex;
align-items: center;
& + .chat-message-info__bot-indicator,
& + .chat-message-info__date {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.chat-message-info__username__name {
color: var(--secondary-low);
font-weight: 700;
@include ellipsis;
max-width: 180px;
}
.chat-message-info__bot-indicator {
text-transform: uppercase;
padding: 0.25rem;
background: var(--primary-low);
border-radius: var(--d-border-radius);
font-size: var(--font-down-2);
}
.chat-message-info__date {
color: var(--primary-high);
font-size: var(--font-down-1);
&:hover,
&:focus {
.chat-time {
color: var(--primary);
}
}
}
.chat-message-info__flag {
color: var(--secondary-medium);
}
.chat-message-info__bookmark {
.d-icon-discourse-bookmark-clock,
.d-icon-bookmark {
color: var(--primary-low-mid);
font-size: var(--font-down-2);
margin-left: 0.5rem;
}
}
.chat-message-info__status {
display: flex;
margin-left: 0.2rem;
margin-right: 0.2rem;
.emoji {
width: 16px;
height: 16px;
}
}
.chat-message-info__original-message {
display: flex;
align-items: center;
font-size: var(--font-down-2);
color: var(--primary-high);
gap: 0.5em;
line-height: 1.2;
background: var(--tertiary-very-low);
padding: 0.25em 0.75em;
border-radius: 8px;
.chat-channel-title {
gap: 0.25em;
}
.chat-channel-name {
color: var(--tertiary);
}
.chat-channel-icon {
.d-icon {
height: 0.9em;
width: 0.9em;
}
}
&__text,
&__text:visited {
color: var(--primary);
}
}