183 lines
3.6 KiB
SCSS
183 lines
3.6 KiB
SCSS
// Styles to make channels list in sidebar match sidebar theme
|
|
.chat-enabled {
|
|
.has-sidebar {
|
|
.sidebar-header {
|
|
.d-header .menu-panel {
|
|
top: calc(3.4em - 2px) !important;
|
|
}
|
|
.d-header-icons .icon {
|
|
width: 2em;
|
|
height: 2em;
|
|
img.avatar,
|
|
#logo-small {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
}
|
|
}
|
|
.header-dropdown-toggle.open-chat {
|
|
.chat-channel-unread-indicator {
|
|
border-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
.sidebar-container {
|
|
.channels-list {
|
|
.chat-channel-divider {
|
|
padding: 0 0.5em 0 1.75rem;
|
|
}
|
|
.chat-channel-row {
|
|
padding-right: 0.75em;
|
|
}
|
|
.chat-channel-leave-btn {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-container {
|
|
.channels-list {
|
|
color: var(--primary);
|
|
font-size: var(--font-down-1);
|
|
padding-bottom: 2em;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
|
|
.chat-channel-divider {
|
|
padding: 0 1.75rem;
|
|
|
|
&:hover {
|
|
.title-caret {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channels-list-container {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.public-channel-empty-message {
|
|
margin: 0;
|
|
padding: 0em 2em 0.5em;
|
|
}
|
|
|
|
.chat-channel-row:not(.active) {
|
|
&:hover {
|
|
.category-chat-private {
|
|
.d-icon {
|
|
background-color: var(--primary-low);
|
|
}
|
|
}
|
|
}
|
|
.category-chat-private {
|
|
.d-icon {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
}
|
|
|
|
.open-draft-channel-page-btn,
|
|
.open-browse-page-btn,
|
|
.edit-channels-dropdown .select-kit-header,
|
|
.chat-channel-leave-btn {
|
|
display: flex;
|
|
padding: 0.25em;
|
|
border-radius: 0.25em;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-low);
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
padding: 0.25em;
|
|
}
|
|
}
|
|
|
|
.chat-channel-leave-btn {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-row {
|
|
padding-left: calc(1.8rem / 2);
|
|
margin-left: calc(1.8rem / 2);
|
|
border-radius: 0.25em;
|
|
padding-right: 1.8rem;
|
|
min-height: 28px;
|
|
margin-bottom: 0.125rem;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-low);
|
|
}
|
|
|
|
.chat-channel-title {
|
|
padding: 0.25rem;
|
|
font-weight: unset;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-enabled {
|
|
.sidebar-section-link-suffix.icon {
|
|
&.urgent svg {
|
|
color: var(--success);
|
|
}
|
|
|
|
&.unread svg {
|
|
color: var(--tertiary-med-or-tertiary);
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-prefix {
|
|
.prefix-image {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
&.active .prefix-image {
|
|
box-shadow: 0px 0px 0px 1px var(--success);
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-content-text {
|
|
.user-status {
|
|
margin-left: 0.3em;
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link--active {
|
|
background: var(--primary-low);
|
|
}
|
|
|
|
.sidebar-section-link--muted {
|
|
opacity: 0.5;
|
|
|
|
.sidebar-section-link-prefix.icon .d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
&.active {
|
|
.sidebar-section-link-prefix.icon .d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
}
|