discourse/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss
Joffrey JAFFEUX c5ac500181
UX: minor tweaks to thread list item (#23259)
- drop @
- prevents +X  (participants) to show on next line
- few spacing/fonts adjustments

Note that this commit is also stripping links from chat excerpts.
2023-08-25 11:20:03 +02:00

125 lines
2.0 KiB
SCSS

@mixin thread-list-item {
display: flex;
flex-direction: row;
padding: 0.5rem;
border-radius: var(--d-border-radius);
background-color: var(--primary-very-low);
border: 1px solid transparent;
}
.chat-thread-list-item {
@include thread-list-item;
cursor: pointer;
margin: 0.25rem;
& + .chat-thread-list-item {
margin-top: 0;
}
.touch & {
&:active {
background-color: var(--d-hover);
border: 1px solid var(--primary-300);
}
}
.no-touch & {
&:hover,
&:active {
background-color: var(--d-hover);
border: 1px solid var(--primary-300);
}
}
&__participants {
display: flex;
align-items: center;
}
&__main {
flex: 1 1 100%;
width: 100%;
}
&__body {
padding-bottom: 0.25rem;
word-break: break-word;
margin: 0.5rem 0rem;
> * {
pointer-events: none;
}
}
&__last-reply-author {
font-weight: 700;
}
&__metadata {
display: flex;
align-items: center;
justify-content: space-between;
}
&__metadata__separator {
padding-inline: 0.5rem;
font-weight: 700;
font-size: 20px;
text-align: center;
}
&__participants {
margin-right: 0.25rem;
}
&__replies-count {
margin-left: auto;
}
&__last-reply-timestamp,
&__replies-count {
color: var(--secondary-low);
font-size: var(--font-down-1);
@include ellipsis;
}
&__header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 0.25rem;
}
&__title {
flex: 1 1 auto;
font-weight: 500;
font-size: var(--font-up-1);
@include ellipsis;
}
&__last-reply-excerpt {
font-size: var(--font-0);
}
&__unread-indicator {
flex: 0 0 auto;
.chat-thread-list-item-unread-indicator__number {
color: var(--primary);
font-size: var(--font-up-1);
}
}
&__open-button {
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
}
&__om-user-avatar {
margin-right: 0.25rem;
flex: 0 0 auto;
}
}