zulip/web/styles/recent_view.css

.recent_view_container {
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100vh;

    #recent_view_table {
        max-width: 100%;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        border-style: solid;
        border-color: hsl(0deg 0% 88%);
        border-width: 0 1px;
        border-radius: 0;
        /* To make the table span full height
         * when rows don't reach bottom of the
         * window. This makes the border span
         * fully to bottom in that case.
         */
        min-height: 100vh;

        & td {
            vertical-align: middle;
            padding: 3px 8px;
        }

        .recent_view_focusable {
            /* Use flexbox to align icons vertically */
            display: flex;
            align-items: center;

            .filter-icon {
                /* Maintain righthand space between icon
                   and stream name. */
                margin-right: 3px;
            }

            & > * {
                outline: 0;
            }

            &:focus-within {
                /* Use the same color as the message feed pointer */
                box-shadow: 0 3px 0 var(--color-outline-focus);
            }

            .change_visibility_policy i {
                display: block;
            }
        }

        & a {
            color: hsl(205deg 47% 42%);
            text-decoration: none;

            &:hover {
                color: hsl(214deg 40% 58%);
            }
        }

        .empty-table-message {
            background-color: var(--color-background);
            padding: 3em 1em;
        }

        .fa-check-square-o,
        .fa-square-o {
            padding: 0 2px;
            width: 10px;
        }

        .fa-envelope {
            font-size: 0.7rem;
            margin-right: 2px;
            position: relative;
            top: -1px;
            opacity: 0.6;
        }

        .table_fix_head {
            padding: 0 !important;
            max-height: calc(
                100vh - var(--recent-topics-filters-height) -
                    var(--navbar-fixed-height)
            );
        }

        .recent-view-container {
            /*
            Add margin bottom equal to `#bottom-whitespace`. This helps us keep
            #compose visible at its max-height without overlapping with any visible
            topics.

            Alternative is to adjust the max-height of `table_fix_head` based on compose height which is an
            expensive repaint. The downside of not doing so is that the scrollbar is not visible to user when
            user is at the bottom of scroll container when the compose box is open.
            */
            margin-bottom: var(--max-unexpanded-compose-height);
        }

        .recent-view-load-more-container {
            margin: 20px 10px;
            align-items: center;
        }

        .fetch-messages-button {
            display: grid;
            justify-items: center;

            .loading_indicator_spinner {
                height: 20px;
                width: 20px;
            }

            path {
                fill: var(--color-recent-view-loading-spinner);
            }
        }

        .table_fix_head table {
            /* To keep border properties to the thead th. */
            border-collapse: separate;

            border-spacing: 0;
            width: 100%;

            th {
                padding: 8px;
                text-align: left;
            }

            .unread_sort {
                padding-left: 6px;

                .zulip-icon-unread {
                    position: absolute;
                    right: 30px;
                    top: 11px;
                }

                &::after {
                    right: 15px;
                    top: 7px;
                }
            }

            td {
                border-top: 1px solid hsl(0deg 0% 87%);
            }
        }

        #recent_view_filter_buttons {
            padding-top: 12px;
            margin: 0 10px;
            display: flex;
            /* Search box has no height without this in safari. */
            flex: 0 0 auto;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .search_group {
            display: flex;
            flex-grow: 1;
            margin: 0 -27px 10px 0;
        }

        #recent_view_search {
            flex-grow: 1;
            padding-right: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .clear_search_button {
            /* Overrides app_components.css property. */
            padding-top: 4px !important;
        }

        .btn-recent-filters {
            border-radius: 40px;
            margin: 0 5px 10px 0;

            &:focus {
                background-color: hsl(0deg 0% 80%);
                outline: 0;
            }

            &.fake_disabled_button {
                cursor: not-allowed;
                opacity: 0.5;

                &:hover {
                    background-color: hsl(0deg 0% 100%);
                    border-color: hsl(0deg 0% 80%);
                }
            }
        }

        .btn-recent-selected {
            background-color: hsl(0deg 11% 93%);
        }

        .unread_count {
            /* Focus underline can only occupy the total length of the unread count */
            margin-right: 1px;
            margin-left: 1px;
            align-self: center;
            background-color: hsl(105deg 2% 50%);
        }

        .unread_mention_info:not(:empty) {
            /* Zero out right margin from left sidebar presentation. */
            margin-right: 0;
            /* Match with its font-size. */
            line-height: 14px;
            /* Present a default/arrow cursor */
            cursor: default;
        }

        .unread_hidden {
            visibility: hidden;
        }

        .flex_container_pm {
            /* Flex container to fit in user circle and group icon */
            display: flex;
            justify-content: space-between;

            .tippy-content {
                font-weight: 400;
            }
        }

        .flex_container {
            display: flex;
            align-items: center;
        }

        .flex_container .left_part {
            flex-wrap: wrap;

            .user_status_icon_wrapper {
                display: inline-flex;
                align-items: center;
                flex-direction: row;
            }
        }

        .flex_container .right_part {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
        }

        .recent_topic_actions {
            /* Add spacing between mention marker, unread count
               and mute icon */
            margin-left: 5px;
            display: flex;
            flex-flow: row nowrap;
        }

        .mention_in_unread {
            opacity: 0.7;
        }

        .recent_topic_actions.dummy_action_button {
            visibility: hidden;
        }

        .recent_topic_actions .recent_view_focusable {
            /* Keep a uniform distance from the focus-within
               indicator at bottom. */
            padding-bottom: 3px;
            /* But push down with margin by the same amount,
               so as to preserve vertical alignment introduced
               by the parent flexbox. */
            margin-top: 3px;
        }

        .recent_topic_actions .recipient_bar_icon {
            /* Zero out padding used in recipient bar. */
            padding-right: 0;
            padding-left: 0;
        }

        .recent_view_participants {
            display: inline-flex; /* Causes LI items to display in row. */
            list-style-type: none;
            margin: auto; /* Centers vertically / horizontally in flex container. */
            height: 24px;
            padding: 4px;
            border-radius: 6px;
            overflow: hidden;

            /*
                By using the row-reverse layout, the visual ordering will be opposite of
                the DOM ordering. This will allows us to stack the items in the opposite
                direction of the natural stacking order without having to mess with the
                zIndex value. The MAJOR DOWNSIDE is that the HTML itself now reads
                backwards, which super janky.
            */
            flex-direction: row-reverse;
        }

        .recent_view_participant_item {
            height: 24px;
            margin: 0;
            padding: 0 1.5px;
            position: relative;
            min-width: 24px;
            cursor: pointer;

            .fa-user {
                opacity: 0.7;
            }
        }

        .recent_view_participant_avatar,
        .recent_view_participant_overflow {
            border: 0;
            border-radius: 6px;
            color: hsl(0deg 0% 100%);
            display: block;
            height: 24px;
            text-align: center;
            background-color: hsl(0deg 0% 88%);
        }

        .recent_view_participant_overflow {
            color: hsl(0deg 0% 0%);
            line-height: 24px;
        }

        & tr {
            background-color: hsl(100deg 11% 96%);

            &:hover {
                background-color: hsl(210deg 100% 97%);
            }
        }

        .unread_topic {
            background-color: hsl(0deg 0% 100%);
        }

        .last_msg_time {
            float: left;
            margin-right: 5px;
        }

        & thead th {
            background-color: hsl(0deg 0% 100%);
            color: inherit;
            border-top: 1px solid hsl(0deg 0% 0% / 20%) !important;
            border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
            position: sticky;
            top: 0;
            z-index: 1;

            &.active::after,
            &[data-sort]:hover::after {
                content: " \f0d8";
                white-space: pre;
                display: inline-block;
                position: absolute;
                padding-top: 3px;
                font: normal normal normal 12px/1 FontAwesome;
                font-size: inherit;
            }

            &.active {
                opacity: 1;
                transition: opacity 100ms ease-out;

                &.descend::after {
                    content: " \f0d7";
                }
            }

            &[data-sort]:hover {
                cursor: pointer;
                background-color: hsl(0deg 0% 95%);
                transition: background-color 100ms ease-in-out;

                &:not(.active)::after {
                    opacity: 0.3;
                }
            }
        }

        /* These fixed column widths prevent column widths from being adjusted
           as new messages arrive from the server. */
        .recent_topic_stream {
            width: 25%;
            padding: 8px 0 8px 8px;

            & a {
                word-break: break-word;
                hyphens: auto;
            }
        }

        .recent_topic_name {
            width: 40%;

            & a {
                word-break: break-word;
                /* No hyphes for word break since it caused hyphens to appear before
                   the ellipsis `longText-...` which is not desirable. Ellipsis appears due
                   to the line clamp applied below.
                */
            }

            .line_clamp {
                /* This -webkit-box display property is webkit-specific, but
                   it appears that line clamping works fine for this component
                   on Firefox anyway. */
                /* stylelint-disable-next-line value-no-vendor-prefix */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        .recent_topic_users {
            width: 20%;
        }

        .recent_topic_timestamp {
            width: 15%;
        }

        & thead .last_msg_time_header {
            /* The responsive table of bootstrap
               somehow ignores the width of ::after
               element. This ensures it is always visible.
               20px = space occupied by ::after (icon) +
               some extra padding.
            */
            padding-right: 20px;
        }

        @media (width < $md_min) {
            /* Hide participants and last message time
               on smaller screens. This ensures user always
               has a nice UI experience. */
            .recent_topic_users,
            .recent_topic_timestamp,
            thead .participants_header,
            thead .last_msg_time_header {
                display: none;
            }

            .recent_topic_actions {
                margin-right: 5px;
                font-size: 15px;
            }
        }

        .private_conversation_row {
            .recent_topic_stream {
                /* Reduce padding of stream section so that user status
                   icon can have more padding without impacting height of the row */
                padding: 5px 0 5px 8px;
            }

            .pm_status_icon {
                display: flex;
                justify-content: center;
                align-items: center;
                /* Increasing vertical padding any further will increase
                the height of the row. */
                padding: 8px;
                position: relative;
                right: -8px; /* To cancel padding-right */
                /* To accommodate fa-group icon */
                width: 14px;
                height: 14px;

                .fa-group,
                .zulip-icon.zulip-icon-bot {
                    font-size: 0.8rem;
                    opacity: 0.6;
                }

                .user_circle {
                    /* Shrink the user activity circle for the Recent Conversations context. */
                    min-width: 7px;
                    height: 7px;
                    float: left;
                    position: unset;
                }
            }
        }
    }

    #recent_view_bottom_whitespace {
        /* For visual reasons, in a message feed, we require a large
         * bottom_whitespace to make it convenient to display new
         * messages as they come in and prevent occluding the last
         * message with an open compose box. Here, the bottom item
         * is rarely interesting context for a message one is
         * composing, but we do need at least 41px to allow the
         * close-compose-box UI element (including border) to not
         * overlap content. Add some more margin so that user
         * can clearly see the end of the topics.
         */
        height: 120px;

        #recent_view_loading_messages_indicator,
        .bottom-messages-logo {
            display: block;
            position: absolute;
            top: 200px;
            left: 0;
            right: 0;
            margin: auto;

            .loading_indicator_spinner {
                position: relative;
                top: -7px;
            }
        }
    }

    .stream-privacy {
        .zulip-icon {
            position: relative;
            left: -1px;
            top: 1.5px;
        }
    }
}

#recent_view {
    display: none;
    position: relative;
}

#recent-view-filter_widget {
    display: inline-flex;
    width: 150px;
    margin: 0 5px 10px 0;

    &:hover {
        background-color: var(--color-background-inbox-search-hover);
    }

    &:focus {
        outline: 2px solid var(--color-outline-focus);
    }
}

#recent-view-filter_widget.disabled-for-spectators {
    cursor: not-allowed;
    opacity: 0.5;
}