zulip/static/styles/recent_topics.scss

.recent_topics_container {
    position: relative;
    height: 95%;
    width: 70%;
    max-width: 1200px;
    max-height: 1000px;
    padding: 0px;
    border-radius: 4px;
    background-color: hsl(0, 0%, 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    @media (max-width: 1130px) {
        max-width: 90%;
    }

    @media (max-width: 700px) {
        height: 95%;
        max-width: none;
        width: 90%;
    }

    .recent_topics_header {
        padding-top: 4px;
        padding-bottom: 8px;
        text-align: center;
        border-bottom: 1px solid hsl(0, 0%, 87%);

        h1 {
            margin: 0;
            font-size: 1.1em;
            text-transform: uppercase;
        }

        .exit {
            font-weight: 400;
            position: absolute;
            top: 10px;
            right: 10px;
            color: hsl(0, 0%, 67%);
            cursor: pointer;

            .exit-sign {
                position: relative;
                top: 3px;
                margin-left: 3px;
                font-size: 1.5rem;
                font-weight: 600;
                cursor: pointer;
            }
        }
    }

    .recent_topics_table {
        margin: 0px;
        padding: 15px;
        overflow: hidden !important;

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

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

        .tableFixHead {
            padding: 10px;
            padding-top: 0px !important;
            overflow-y: auto;
            max-height: 100%;
        }
        .tableFixHead thead th {
            position: sticky;
            top: 0;
            z-index: 1000;
            background-color: hsl(0, 0%, 27%);
            color: hsl(0, 0%, 100%);
        }

        #recent_topics_filter_buttons {
            margin: 0 10px 0 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        #recent_topics_search {
            margin: 0 0 10px 0px;
            flex-grow: 1;
        }

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

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

        .recent_topic_unread_count {
            background-color: hsl(0, 0%, 89%);
            float: right;
            padding: 0.5px;
            margin-right: 10px;
            border-radius: 5px;
        }

        .recent_avatars {
            display: inline-flex; /* Causes LI items to display in row. */
            list-style-type: none;
            margin: auto; /* Centers vertically / horizontally in flex container. */
            height: 15px !important;

            /*
                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_avatars_item {
            height: 18px;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
            position: relative;
            min-width: 18px;
        }

        .recent_avatars_img,
        .recent_avatars_others {
            border: 1px solid hsl(221.1, 23.5%, 15.9%);
            border-left: 0 !important;
            border-radius: 6px;
            color: hsl(0, 0%, 100%);
            display: block;
            height: 18px;
            text-align: center;
        }

        .recent_avatars_others {
            background-color: hsl(205.2, 76.5%, 50%);
        }
    }
}