zulip/static/styles/left_sidebar.css

/* The width of the empty space in the sidebar to separate
   content from the edge of the window */
$far_left_gutter_size: 10px;
/* This represents the space in the sidebar reserved for symbols like
   the #; labels like the the stream name go to the right of this. */
$left_col_size: 19px;
/* The full topic indentation includes 4px of indent in addition to
   the above (and another 5px of padding not measured here) */
$topic_indent: calc($far_left_gutter_size + $left_col_size + 4px);

#left-sidebar {
    #user-list {
        padding-left: 10px;
    }
}

.hashtag {
    &:empty {
        &::after {
            content: "#";
            line-height: 0;
            font-size: 18px;
            font-weight: 800;
        }
    }
}

.stream-privacy {
    font-size: 15px;
    font-weight: 800;
    min-width: $left_col_size;
    text-align: center;
}

/* Ideally we'd handle hashtags using an <i> and just have a single rule here. */
.stream-privacy span.hashtag,
#left-sidebar .filter-icon i {
    padding-right: 3px;
}

.pm_left_col {
    min-width: $left_col_size;
}

#stream_filters,
#global_filters {
    font-size: 14px;
    margin-right: 12px;
}

li.show-more-topics {
    a {
        font-size: 12px;
    }
}

#streams_inline_cog,
#streams_filter_icon {
    float: right;
    opacity: 0.5;
    font-size: 13px;
    margin-top: 3px;
    margin-left: 10px;

    &:hover {
        opacity: 1;
        cursor: pointer;
    }
}

#streams_inline_cog {
    margin-right: 10px;
}

.tooltip {
    max-width: 18em;
}

#stream_filters {
    overflow: visible;
    margin-bottom: 10px;
    margin-right: 12px;
    padding: 0;
    font-weight: normal;

    li {
        a {
            padding: 1px 0;
        }

        ul {
            margin-left: 0;

            &.topic-list li {
                padding-top: 2px;
                padding-right: 0;
                padding-bottom: 2px;
                padding-left: $topic_indent;
            }
        }
    }

    .count {
        margin-right: 15px;
    }

    .subscription_block {
        padding: 0;
        margin-right: 25px;
        margin-left: $far_left_gutter_size;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &::after {
            content: "";
            display: block;
            clear: both;
        }

        .stream-name {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            width: 100%;
            padding-right: 2px;
        }

        &.stream-with-count {
            margin-right: 15px;
        }
    }

    .inactive_stream {
        opacity: 0.5;
    }
}

.narrows_panel {
    margin-bottom: 4px;
    li a {
        margin-top: 1px;
        &:hover {
            text-decoration: none;
        }
    }
}

#private-container,
#stream-filters-container {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    z-index: 0;
    width: 100%;
}

#private-container {
    max-height: 200px;
}

:not(.active-sub-filter) {
    &.top_left_row:hover,
    &.bottom_left_row:hover,
    &#stream_filters li.highlighted_stream {
        background-color: hsla(120, 12.3%, 71.4%, 0.38);
        border-radius: 4px;
    }
}

#add-stream-link {
    text-decoration: none;
    margin-left: 10px;
    margin-bottom: 18px;
    i {
        min-width: 19px;
        text-align: center;
        &::before {
            padding-right: 3px;
        }
    }
}

ul.filters {
    list-style-type: none;
    margin-left: 0;

    a {
        color: inherit;
    }

    hr {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    li.muted_topic,
    li.out_of_home_view {
        opacity: 0.25;
    }

    li.out_of_home_view {
        &:hover {
            opacity: 0.6;
        }

        li.muted_topic {
            /* If stream is muted, this resets opacity of muted topics in muted
            stream to 1; since opacity is multiplied down through child
            elements, this avoids an unreadable opacity of 0.25^2. */
            opacity: 1;
        }
    }
}

li.active-filter,
li.active-sub-filter {
    font-weight: 600 !important;
    background-color: hsl(202, 56%, 91%);
    position: relative;
    border-radius: 4px;
}

#global_filters {
    margin-bottom: 16px;

    .filter-icon {
        display: inline-block;
        min-width: $left_col_size;
        text-align: center;
    }

    .count {
        margin-right: 20px;
        margin-top: 2px;
        display: none;
    }

    i {
        opacity: 0.7;
    }
}

li.top_left_all_messages,
.private_messages_header,
li.top_left_mentions,
li.top_left_starred_messages,
li.top_left_recent_topics {
    position: relative;
    padding-top: 1px;
    padding-bottom: 1px;

    a {
        display: block;
    }
}

.top_left_row {
    padding-left: $far_left_gutter_size;
    padding-right: 10px;
}

.top_left_row,
.bottom_left_row,
.top_left_private_messages {
    border-radius: 4px;
}

.conversation-partners {
    line-height: 1.25;
}

.top_left_all_messages i.fa-align-left {
    position: relative;
    font-size: 15px;
}

.top_left_private_messages i.fa-envelope {
    position: relative;
    top: -1px;
    font-size: 11px;
}

.top_left_mentions i.fa-at,
.top_left_starred_messages i.fa-star {
    font-size: 13px;
}

/* We are mostly consistent in how we style
   unread counts, except for starred messages.
   This is the common section.
*/
.top_left_all_messages .count,
.top_left_private_messages .count,
.top_left_starred_messages .count,
.top_left_mentions .count,
#stream_filters .count,
.topic-unread-count,
.private_message_count {
    float: right;
    padding: 0 4px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.6px;
    border-radius: 4px;
}

/* Starred messaged counts aren't really unread
   counts, so we style them differently.
*/
.top_left_starred_messages .count {
    background-color: transparent;
    color: inherit;
    padding: 2px 1px 0 3px;
    border-color: hsl(105, 2%, 50%);
}

/* These are true "unread" counts. */
.top_left_all_messages .count,
.top_left_private_messages .count,
.top_left_mentions .count,
#stream_filters .count,
.topic-unread-count,
.private_message_count {
    background-color: hsl(105, 2%, 50%);
    color: hsl(0, 0%, 100%);
}

.topic-box {
    padding-left: 5px;
    margin-right: 30px;
}

.conversation-partners,
.topic-name {
    display: block;
    width: calc(100% - 5px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 2px;
}

.topic-name {
    /* TODO: We should figure out how to remove this without changing the spacing */
    line-height: 1.1;
}

/*
    All of our left sidebar handlers use absolute
    positioning.  We should fix that.
*/
.all-messages-sidebar-menu-icon,
.stream-sidebar-menu-icon,
.starred-messages-sidebar-menu-icon,
.topic-sidebar-menu-icon {
    position: absolute;
    display: none;
    right: 10px;

    i {
        padding-right: 0.25em;
        display: inline-block;
        width: 13px;
        vertical-align: middle;
    }

    /*
        If you hover directly over the ellipsis itself,
        show it in black.
    */

    &:hover {
        color: hsl(0, 0%, 0%) !important;
    }

    /*
        Hover does not work for touch-based devices like mobile phones.
        Hence the the icons does not appear, making the user unaware of its
        presence on such devices. The following media property displays the
        icon by default for such behaviour.
    */

    @media (hover: none) {
        display: block;
    }
}

/*
    The All messages and stream ellipsis-v (vertical 3 dots) are
    pretty similar.
*/
.all-messages-sidebar-menu-icon,
.starred-messages-sidebar-menu-icon,
.stream-sidebar-menu-icon {
    top: 1px;
    right: 0;
    font-size: 1em;
    text-align: center;
    padding: 0 6px 0 6px;
}

/*
    For topic ellipsis-v(vertical 3 dots) we use a slightly smaller
    font to show they're "lower" in the hierarchy,
    which also affects it positioning.
*/
.topic-sidebar-menu-icon {
    top: 0;
    right: 0;
    font-size: 0.9em;
    text-align: center;
    padding: 1px 6px 0 6px;
}

/*
    When you hover over list items, we hover
    the relevant ellipsis-v(vertical 3 dots) in light gray.
*/
li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,
#stream_filters li:hover .stream-sidebar-menu-icon,
li.topic-list-item:hover .topic-sidebar-menu-icon {
    display: inline;
    cursor: pointer;
    color: hsl(0, 0%, 53%);
}

ul.topic-list {
    list-style-type: none;
    font-weight: normal;
}

ul.expanded_private_messages {
    list-style-type: none;
    font-size: 13px;
    font-weight: 400;
    margin-left: 0;
    padding-bottom: 2px;
    margin-top: 3px;
}

li.topic-list-item {
    position: relative;
    padding-right: 5px;
}

li.expanded_private_message {
    position: relative;
    padding-top: 1px;
    padding-bottom: 1px;

    a {
        margin: 1px 0;
    }
}

.show-all-streams {
    a {
        color: hsl(0, 0%, 20%);
    }

    .fa-chevron-left {
        text-decoration: none;
    }
}

.pm-box,
.topic-box {
    display: flex;
    justify-content: center;
    padding-top: 1px;
    cursor: pointer;
}

.pm-box {
    margin-right: 20px;
    align-items: center;

    .user_circle {
        min-width: 8px;
        height: 8px;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 2px;
        position: relative;
        top: 0;
    }
}

.zero-pm-unreads .pm-box,
.zero-topic-unreads .more-topics-box,
.zero-topic-unreads .topic-box {
    margin-right: 15px;
}

.zoom-out {
    #topics_header {
        display: none;
    }
}

#topics_header {
    margin-right: 10px;
    color: hsl(0, 0%, 43%);
    a {
        color: inherit;
        text-decoration: none;
        text-transform: uppercase;
        i {
            margin: 0 5px 0 10px;
            position: relative;
            top: 1px;
        }
    }
}

#streams_header {
    margin-right: 0;
    padding-left: $far_left_gutter_size;
    cursor: pointer;
    margin-top: 3px;
}

.zero_count {
    visibility: hidden;
}

.searching-for-more-topics img {
    height: 16px;
    margin-left: 6px;
}

.zoom-in {
    .show-more-topics {
        display: none;
    }
    .zoom-in-hide {
        display: none;
    }
}

li.top_left_all_messages a,
li.top_left_private_messages a,
li.top_left_mentions a,
li.top_left_starred_messages a {
    display: block;
}