discourse/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
David Battersby 4404b6808c
UX: expand threads list tap area on mobile (#26818)
This change adds a wrapper link around the thread list details on mobile to make the click area larger.

We also update child div elements to span to ensure valid html, since the link is an inline element and divs are block level.

---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-05-09 12:45:02 +04:00

71 lines
1.3 KiB
SCSS

.c-user-thread {
padding-block: 1.25rem;
margin-inline: 1rem;
border-bottom: 1px solid var(--primary-low);
.c-unread-indicator {
width: 8px;
height: 8px;
align-self: flex-start;
}
.chat-message-thread-indicator {
margin-left: 0;
margin-top: 1rem;
&:hover {
box-shadow: none;
}
}
.chat__thread-title {
&-container {
display: flex;
gap: 1rem;
}
&__name {
font-size: var(--font-up-1-rem);
word-break: break-all;
&:hover {
color: var(--primary-very-high);
}
}
}
.chat-channel-icon {
font-size: var(--font-down-1-rem);
}
.chat-channel-name {
font-size: var(--font-down-1-rem);
color: var(--primary-high);
}
.chat-channel-title__name {
color: var(--primary-high);
font-size: var(--font-down-1);
}
}
.c-user-threads .empty-state-threads {
display: flex;
justify-content: center;
padding: 1.25rem 1rem;
font-size: var(--font-up-1-rem);
color: var(--primary);
}
//sidebar
#sidebar-section-content-user-threads {
padding-bottom: 0.5rem;
.sidebar-section-link-wrapper:hover {
.sidebar-section-link-prefix {
color: var(--primary-very-high);
}
}
.sidebar-section-link-content-text {
color: var(--d-sidebar-header-color);
}
}