zulip/static/styles/right_sidebar.css

.right-sidebar {
    font-size: 14px;

    a:hover {
        text-decoration: none;
    }
}

#buddy_list_wrapper {
    position: relative;
    margin-left: 0;
    overflow: auto;
}

#user_presences {
    max-width: 95%;
    overflow-x: hidden;
    list-style-position: inside; /* Draw the bullets inside our box */

    li {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        list-style-type: none;
        border-radius: 4px;
        padding-right: 15px;
        padding-top: 1px;
        padding-bottom: 2px;

        .user-list-sidebar-menu-icon {
            position: absolute;
            top: 1px;
            right: 0;
            font-size: 1em;
            display: none;
            text-align: center;
            padding: 0 6px 0 6px;

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

            &:hover {
                display: inline;
                cursor: pointer;
                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: inline;
            }
        }

        &:hover {
            .user-list-sidebar-menu-icon {
                display: inline;
                cursor: pointer;
                color: hsl(0, 0%, 53%);
            }
        }

        &:hover,
        &.highlighted_user {
            background-color: hsla(120, 12.3%, 71.4%, 0.38);
        }
    }

    .user_circle {
        width: 8px;
        height: 8px;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 5px;
        margin-right: 5px;
        display: block;
    }

    a {
        color: inherit;
        margin-left: 0;
    }
}

#invite-user-link i {
    text-decoration: none;
    margin-right: 3px;
    margin-left: 5px;
}

.user-presence-link,
.user_sidebar_entry .selectable_sidebar_block {
    overflow: hidden;
    text-overflow: ellipsis;
}

.user_sidebar_entry .selectable_sidebar_block {
    width: calc(100% - 16px);
    display: flex;
    flex-direction: row;
}

.user-presence-link {
    width: calc(100% - 24px);
}

.my_user_status {
    opacity: 0.5;
}

.selectable_sidebar_block {
    cursor: pointer;
}

.user_sidebar_entry {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .count {
        float: right;
        padding: 0 4px;
        background-color: hsl(105, 2%, 50%);
        color: hsl(0, 0%, 100%);
        font-size: 12px;
        line-height: 14px;
        height: 15px;
        font-weight: normal;
        letter-spacing: 0.6px;
        position: relative;
        top: 3px;
        border-radius: 4px;
        margin-left: 5px;
        display: none;
    }

    &.user-with-count .count {
        display: block;
    }
}

#userlist-toggle {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid hsl(0, 0%, 88%);
}

#userlist-toggle-button {
    text-decoration: none;
    color: hsl(0, 0%, 60%);
    display: block;
    width: 45px;
    height: 19px;
    padding-top: 12px;
    padding-bottom: 9px;

    &:hover {
        color: inherit;
    }
}

.right-sidebar-items:first-of-type #userlist-header {
    border-top: none;
}

#userlist-header {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px;

    #userlist-title {
        margin: 0;
    }

    #user_filter_icon {
        font-size: 13px;
        opacity: 0.5;
        margin-right: 5px;

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

#keyboard-icon {
    position: fixed;
    bottom: 8px; /* bottom padding of .compose-content */
    cursor: pointer;
    font-size: 20px;
}

#sidebar-keyboard-shortcuts {
    color: inherit;
}

/* This max-width must be synced with message_viewport.is_narrow */
@media (width < $xl_min) {
    #sidebar-keyboard-shortcuts {
        /* This is supposed to fix this appearing improperly in narrow
        windows.  It's likely the wrong solution; a proper fix likely
        involves replacing `position: fixed` in #keyboard-icon so that
        it still appears in the right sidebar overlay. */
        display: none;
    }

    #userlist-toggle {
        display: block;
    }
}

@media (width < $md_min) {
    #user_search_section .user-list-filter {
        /* input should be 100% - 6px padding x2 - 1px border x2. */
        width: calc(100% - 12px - 2px);
    }
}

@media (width < $sm_min) {
    #userlist-toggle {
        height: 30px;
        line-height: 30px;
    }

    #userlist-toggle-button {
        height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
}