// 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.chat-header-icon { .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-section-wrapper.sidebar-section[data-section-name="my-threads"] { .sidebar-section-content { padding-bottom: 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; } .channel-list-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-new-message-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-prefix { .prefix-image { border: 1px solid transparent; } &.active .prefix-image { box-shadow: 0px 0px 0px 1px var(--success); } } .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); } } } }