discourse/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss
Joffrey JAFFEUX 39b598f304
UI: refines thread list item (#23207)
It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-24 18:45:20 +02:00

108 lines
1.7 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);
}
}
&__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.25rem;
font-weight: 700;
}
&__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: bold;
@include ellipsis;
}
&__unread-indicator {
flex: 0 0 auto;
}
&__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;
}
}