zulip/static/styles/recent_topics.css

.recent_topics_container {
    padding: 0;
    border-radius: 4px;
    background-color: hsl(0, 0%, 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100vh;

    #recent_topics_table {
        max-width: 100%;
        padding-top: 12px;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        border-style: solid;
        border-color: hsl(0, 0%, 88%);
        border-width: 0 1px;
        border-radius: 0;
        margin-top: 40px;
        /* 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: 100vw;

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

        .recent_topics_focusable {
            display: inline-block;

            & > * {
                outline: 0;
            }

            &:focus-within {
                /* Use the same color as the message feed pointer */
                box-shadow: 0 3px 0 hsl(215, 47%, 50%);
            }
        }

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

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

        .required-text:empty::after {
            content: attr(data-empty);
            display: block;
            font-style: italic;
            color: hsl(0, 0%, 67%);
            position: absolute;
        }

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

        .fa-lock {
            padding-right: 3px;
        }

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

        .table_fix_head {
            padding: 0 !important;
            /* 100px = space occupied by `recent_topics_filter_buttons`( ~49px)
                     + give user some extra space at the bottom so that last
                       topic row is clearly visible. */
            max-height: calc(100vh - 100px);
        }

        .table_fix_head table {
            /* To keep border properties to the thead th. */
            border-collapse: separate;
            margin-bottom: 100px;
        }

        #recent_topics_filter_buttons {
            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 0 10px;
        }

        #recent_topics_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: 6px !important;
        }

        #recent_topics_search_clear {
            margin-top: -10px !important;
        }

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

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

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

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

        .btn-recent-selected {
            background-color: hsl(0, 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(105, 2%, 50%);
        }

        .unread_mention_info:not(:empty) {
            margin-right: -5px;
            /* Match with its font-size. */
            line-height: 14px;
        }

        .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;
        }

        .recent_topic_actions {
            /* To add spacing between unread count and mute icon */
            margin-left: 10px;
            display: flex;
            flex-flow: row nowrap;
        }

        .mention_in_unread {
            opacity: 0.7;
        }

        .recent_topic_actions.dummy_action_button {