discourse/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
chapoi d0427919f1
UX: add illustrations for empty chat list + split into tabs on drawer (#26910)
Adds a placeholder image + CTA in chat, for empty channel and DM lists.

On desktop with drawer mode, we split chat into tabs (like mobile).

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: David Battersby <info@davidbattersby.com>
Co-authored-by: Régis Hanol <regis@hanol.fr>
2024-05-28 17:00:04 +04:00

59 lines
1.2 KiB
SCSS

.has-full-page-chat:not(.discourse-sidebar) {
.full-page-chat {
.channels-list {
height: calc(100vh - var(--header-offset));
border-right: 1px solid var(--primary-low);
background: var(--primary-very-low);
overflow-y: auto;
.channel-list-empty-message {
padding: 1rem;
text-align: center;
svg,
.channel-title {
display: none;
}
}
.chat-channel-divider {
padding: 2rem 1rem 0.5rem 1rem;
&:first-of-type {
padding-top: 1.5rem;
}
}
.loading-container {
padding-bottom: 1em;
}
.chat-channel-row {
height: 2.5em;
padding: 0 0.5rem;
margin: 0 0.5rem 0.125rem 0.5rem;
&:hover,
&.active {
background-color: var(--primary-low);
.chat-channel-title {
.category-chat-name,
.chat-name,
.dm-usernames {
color: var(--primary);
}
}
}
.chat-channel-metadata {
&__date {
display: none;
}
}
}
}
.channels-list-container {
height: auto;
}
}
}