githubmirror/zulip

web/styles/inbox.css
766 строк20 KB
Karl Stolley
inbox: Move lefthand padding to avoid disturbing grid.
13 авг 2025, 00:06
13 авг 2025, 00:0639b69ab
.inbox-container {
    display: flex;
    flex-direction: column;
    background: var(--color-background-inbox);
    padding: 0;
    min-height: 100vh;

    #inbox-pane {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        margin: var(--navbar-fixed-height) 25px 0;

        a {
            color: var(--color-text-message-header);
            text-decoration: none;
        }

        .unread_count {
            opacity: 1;
            outline: 0 solid var(--color-background-unread-counter);
            transition: outline-width 0.1s ease;

            &:hover {
                outline-width: 1.5px;
            }
        }

        .search_group {
            position: sticky;
            top: var(--navbar-fixed-height);
            background: var(--color-background-inbox);
            display: flex;
            padding: 15px 0 10px;
            z-index: 1;
        }

        .button-inbox-selected {
            background-color: var(--color-background-button-inbox-selected);
        }

        #inbox-filters {
            .inbox-search-wrapper {
                flex-grow: 1;
                max-width: var(--width-inbox-search);
            }
        }

        .inbox-empty-text {
            display: none;
        }

        #inbox-loading-indicator {
            margin-top: 20px;
            margin-bottom: var(--max-unmaximized-compose-height);

            .searching-for-more-topics {
                margin-left: 0;
            }
        }

        #inbox-list {
            overflow: hidden;
            /* search box left border (1px) + search box right border (1px)
               + dropdown left border (1px) + dropdown right border (1px) = 4px at 16px em */
            max-width: calc(
                var(--width-inbox-search) +
                    var(--width-inbox-filters-dropdown) + 0.25em
            );

            .inbox-channel-topic-list {
                margin: 0;
            }

            .inbox-focus-border {
                display: flex;
                min-height: 1.875em; /* 30px at 16px em */
                border: 2px solid transparent;
                border-radius: 3px;
                box-sizing: border-box;
                justify-content: space-between;
            }

            .inbox-header {
                user-select: none;
                display: block;
                height: 1.875em; /* 30px at 16px em */

                .inbox-focus-border {
                    height: 1.875em; /* 30px at 16px em */
                }

                .inbox-left-part {
                    grid-template:
                        auto / minmax(auto, min-content)
                        auto min-content min-content;
                    grid-template-areas: "header_name collapse_button unread_mention_info unread_count";
                }

                .inbox-header-name {
                    grid-area: header_name;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    outline: 0;
                    cursor: pointer;

                    .inbox-header-name-text {
                        margin: 0;
                        padding: 1px 0;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        font-weight: 600;
                    }
                }

                &:focus {
                    outline: 0;
                }

                &:hover {
                    .collapsible-button {
                        visibility: visible;
                    }
                }
            }

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

            .stream-privacy.filter-icon {
                /* 0 5px at 16px/1em */
                padding: 0 0.3125em;
                margin: 0;
            }

            .zulip-icon-user {
                position: relative;
                top: -1px;
                margin-right: 4px;
            }

            .collapsible-button {
                grid-area: collapse_button;

                &:hover {
                    cursor: pointer;
                }

                .zulip-icon-chevron-down {
                    padding: 0.3125em 0.25em; /* 5px 4px at 16px em */
                    transform: rotate(180deg);
                }
            }

            .user-circle {
                /* 8.5328px at 16px/1em */
                font-size: 0.5333em;
                /* TODO: Refactor inbox rows to use grid, to avoid the
                   min-width here that holds the other rows to similar
                   columns. */
                /* 16px at 8.5328px/1em */
                min-width: 1.8751em;
                top: 0;
                text-align: center;
            }

            .zulip-icon-bot,
            .conversation-partners-icon {
                opacity: 0.7;
                /* Required to align DM fullnames in user circle icon */
                /* 2px at 16px / 1em */
                margin-left: 0.125em;
            }

            .user_block .zulip-icon {
                /* 0 5px at 16px/1em */
                padding: 0 0.3125em;

                &.user-circle {
                    /* 5px at 16px / ~ 0.5em */
                    padding: 0 0.586em;
                }
            }

            .inbox-row {
                user-select: none;
                display: block;
                background-color: var(--color-background-inbox-row);

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

                .inbox-left-part {
                    grid-template:
                        auto / min-content minmax(0, 1fr)
                        min-content min-content;
                    grid-template-areas: "match_topic_and_dm_start recipient_info unread_mention_info unread_count";
                }

                .inbox-topic-container .user-circle {
                    grid-area: match_topic_and_dm_start;
                }

                .recipients_info,
                .inbox-topic-name {
                    grid-area: recipient_info;
                }

                .inbox-right-part-wrapper {
                    flex-grow: 1;

                    .inbox-right-part {
                        display: flex;
                        justify-content: space-between;
                        flex-grow: 1;

                        > .inbox-action-button:first-child {
                            margin-left: auto;
                        }
                    }
                }

                .visibility-policy-indicator {
                    display: flex;
                    align-items: center;
                    border-radius: 3px;
                    margin-left: 3px;
                }
            }

            .unread-count-focus-outline {
                /* Because the inbox view font-size will
                   never be smaller than the em-equivalent
                   of 15px, we restate the base font-size
                   here so that unreads match others in
                   the UI at legacy size (14px). */
                font-size: var(--base-font-size-px);
                grid-area: unread_count;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 3px;
                padding: 0 5px;
                /* Stretch to the row to keep unread
                   count from affecting overall row
                   size as test scales up. */
                align-self: stretch;
            }

            .unread_mention_info {
                grid-area: unread_mention_info;
                margin-right: 0;
            }

            .stream-privacy {
                display: flex;
                align-items: center;
                margin-right: 4px;
                margin-left: 17px;

                .zulip-icon {
                    line-height: 0.875em; /* 14px at 16px em */
                    height: 1em;
                    width: 1em;
                }
            }

            .inbox-topic-name {
                /* 16px channel icon width + 10px padding */
                padding-left: 1.625em; /* 26x at 16px em */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                & a {
                    padding: 1px 0;
                    white-space: pre;
                }
            }

            .inbox-left-part-wrapper {
                display: flex;
                width: 80%;
            }

            #inbox-direct-messages-container {
                /* Since a direct message row can have span to multiple lines,
                   having an underline focus will not work very well.
                */
                .inbox-row:focus-visible {
                    box-shadow: inset 0 0 0 2px var(--color-outline-focus);
                }
            }

            .inbox-left-part {
                width: 100%;
                display: grid;
                align-items: center;

                &:hover {
                    cursor: pointer;
                }

                .inbox-group-or-bot-dm {
                    position: relative;
                    left: -3px;

                    /* We don't display status emoji in group DMs,
                       so prepare an ordinary inline layout... */
                    .user-status-microlayout {
                        display: inline;
                        white-space: collapse;
                    }
                    /* ...and hide the status emoji. */
                    .status-emoji {
                        display: none;
                    }
                }

                .recipients_info {
                    display: flex;
                    flex-wrap: wrap;
                    column-gap: 10px;
                    grid-area: recipient_info;

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

        #inbox-collapsed-note {
            display: none;
            overflow: hidden;
            max-width: calc(
                var(--width-inbox-search) +
                    var(--width-inbox-filters-dropdown) + 0.25em
            );

            .inbox-collapsed-note-and-button-wrapper {
                margin-top: 3px;
                padding-left: 8px;

                .inbox-collpased-note-span {
                    font-size: 1em;
                }

                #inbox-expand-all-button {
                    display: block;
                    margin-top: 5px;
                }
            }
        }

        .inbox-right-part-wrapper {
            display: flex;
            align-items: center;
        }

        .inbox-row,
        .inbox-header {
            &:hover {
                .inbox-row-visibility-policy-inherit,
                .inbox-action-button {
                    opacity: 1;
                }
            }
        }

        .inbox-row-visibility-policy-inherit {
            opacity: 0;

            &.visibility-policy-popover-visible {
                opacity: 1;
            }
        }

        .inbox-action-button {
            display: flex;
            border-radius: 3px;
            outline: none;
            opacity: 0;

            &.hide {
                display: none;
            }

            & i {
                padding: 0.3125em; /* 5px at 16px em */
                opacity: 0.3;
                color: var(--color-vdots-hover);

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

    .inbox-header-stream-archived {
        color: var(--color-text-message-header-archived);
    }
}

#inbox-view {
    display: none;
    position: relative;

    .inbox-folder {
        margin-bottom: 1px;
        background-color: transparent;

        .inbox-header-name-text,
        .unread_mention_info {
            color: var(--color-folder-header);
            opacity: 0.5;
        }

        .inbox-header-name-text {
            font-style: normal;
            font-weight: var(--font-weight-sidebar-heading);
            line-height: 112.5%;
            letter-spacing: var(--letter-spacing-sidebar-heading);
            text-transform: uppercase;
            outline: none;
            /* 16px at 16px / 1em */
            font-size: 1em;
            /* Align the folder title with the channel privacy icons; 5px at 16px/1em.

            TODO: Reduce the depth of selectors in this file,
            so that the use of !important becomes unnecessary
            here. */
            padding-left: 0.3125em !important;
        }

        &:hover {
            .inbox-header-name-text,
            .collapsible-button .zulip-icon,
            .unread_mention_info,
            .unread_count {
                opacity: 1;
            }
        }
    }

    .hidden_by_filters {
        display: none !important;
    }
}

.inbox-container #inbox-pane #inbox-empty-without-search {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inbox-empty-illustration {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    background-color: var(--color-background-inbox-no-unreads-illustration);
    mask: url("../images/empty-view-illustrations/inbox-done.svg") no-repeat
        center;
}

.inbox-empty-title {
    /* Matches the font-size used for .empty-list-message */
    font-size: 1.5em;
    color: var(--color-background-inbox-no-unreads-illustration);
}

.inbox-empty-action {
    font-size: 1.3em;
    padding-top: 0.5em;
}

.inbox-container #inbox-pane .inbox-empty-action-link {
    color: var(--color-text-url);

    &:hover {
        color: var(--color-text-url-hover);
    }
}

#inbox-filter_widget {
    margin-right: 0.3571em; /* 5px / 14px em */
    max-width: var(--width-inbox-filters-dropdown);
    border: 1px solid var(--color-border-inbox-search);
    background-color: var(--color-background-inbox-search);
    gap: 0.3571em; /* 5px / 14px em */
    /* 1.5px at 16px/1em and legacy 6px at 14px/1em. */
    padding: 0.0937em 0.4285em;

    &:hover {
        background-color: var(--color-background-inbox-search-hover);
        border: 1px solid var(--color-border-inbox-search-hover);
    }

    &:focus {
        outline: none;
    }
}

#recent-view-filter_widget .dropdown_widget_value,
#inbox-filter_widget .dropdown_widget_value {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

#recent-view-filter_widget .zulip-icon-chevron-down,
#inbox-filter_widget .zulip-icon-chevron-down {
    color: var(--color-icons-inbox);
    opacity: 0.4;
}

.dropdown-list-item-common-styles .dropdown-list-text-selected {
    font-weight: 700;
}

.recent-view-filter-dropdown-list-container .dropdown-list-wrapper,
.inbox-filter-dropdown-list-container .dropdown-list-wrapper {
    /* We want these dropdowns to open to fit their
       contents, which differ based on the language
       in use. */
    width: 100%;
    /* We also don't want to set a min-width, again
       so that the content is in charge. This pushes
       back against more generic styles. */
    min-width: unset;
}

.recent-view-filter-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles,
.inbox-filter-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles {
    /* Parallel to the `width: 100%` set on
       .dropdown-list-wrapper above, we set
       min-width here to max-content so that
       the box opens to accommodate different
       lengths of text--and to ensure that
       hovered/selectable areas look correct. */
    min-width: max-content;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    /* For columnar flex items, we need
       to make set alignment to the start
       of the flex container. This pushes
       back against non-columnar flexboxes
       that require centered alignment. */
    align-items: flex-start;
}

.recent-view-filter-dropdown-list-container .dropdown-list-item-name,
.inbox-filter-dropdown-list-container .dropdown-list-item-name {
    white-space: nowrap;
    font-weight: 500;
    padding: 0;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.recent-view-filter-dropdown-list-container .dropdown-list-item-description,
.inbox-filter-dropdown-list-container .dropdown-list-item-description {
    white-space: nowrap;
    font-weight: 400;
    font-size: 0.9285em; /* 13px at 14px em */
    opacity: 0.8;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.inbox-container #inbox-pane .inbox-folder .unread_count {
    transition: none;
    cursor: default;

    &:hover {
        outline: 0;
    }
}

.inbox-container #inbox-pane .inbox-folder:not(#inbox-dm-header) .unread_count {
    display: none;
}

#inbox-pane #inbox-list .collapsible-button {
    visibility: hidden;
}

#inbox-pane #inbox-list .inbox-collapsed-state .collapsible-button {
    visibility: visible;

    .zulip-icon-chevron-down {
        transform: rotate(0deg);
    }
}

.folder-row-chevron {
    color: var(--color-folder-header);
}

.channel-row-chevron {
    color: var(--color-inbox-row-chevron);
}

.inbox-collapsed-state {
    .folder-row-chevron,
    .channel-row-chevron {
        opacity: 0.5;
    }
}

.inbox-container #inbox-pane .inbox-folder .unread_mention_info {
    display: none;
}

.inbox-container
    #inbox-pane
    .inbox-folder.inbox-collapsed-state
    .unread_mention_info,
.inbox-container
    #inbox-pane
    .inbox-folder.inbox-collapsed-state:not(#inbox-dm-header)
    .unread_count {
    display: inline;
}

.inbox-folder-components {
    border-radius: 5px;
    border: 0.5px solid hsl(0deg 0% 0% / 13%);
    /* 8px at 16px / 1em */
    margin-bottom: 0.5em;
    overflow: hidden;
}

.inbox-folder.inbox-collapsed-state,
.inbox-folder.hidden_by_filters {
    + .inbox-folder-components {
        border: 0;
    }
}

#inbox-pane #inbox-list .inbox-collapsed-state {
    + .inbox-folder-components,
    + .inbox-topic-container {
        display: none;
    }
}

#inbox-pane
    #inbox-list
    .inbox-streams-container
    .inbox-header
    .inbox-header-name {
    /* 5px at 16px / 1em */
    padding: 1px 0.3125em 1px 0;
}

#inbox-view.no-visible-focus-outlines
    .inbox-container
    #inbox-pane
    [tabindex="0"] {
    /* Remove default focus outline from elements. */
    &:focus-visible {
        outline: 0;
    }
}

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane {
    /* Only show focus outlines when user uses keyboard. */
    #inbox-filter_widget {
        &:focus-visible {
            outline: 2px solid var(--color-outline-focus);
        }
    }

    .inbox-header {
        &:focus-visible {
            .inbox-focus-border {
                border-color: var(--color-outline-focus);
            }

            .collapsible-button > .zulip-icon {
                opacity: 1;
            }

            .collapsible-button {
                visibility: visible;
            }
        }
    }

    .inbox-row {
        &:focus-visible {
            .inbox-focus-border {
                border: 2px solid var(--color-outline-focus);
                border-radius: 3px;
            }

            outline: 0;
            padding: 0;
        }
    }

    .visibility-policy-indicator {
        &:focus-visible {
            outline: 2px solid var(--color-outline-focus);
        }
    }

    .inbox-action-button {
        &:focus-visible {
            box-shadow: 0 0 0 2px var(--color-outline-focus);
        }
    }

    .unread-count-focus-outline {
        &:focus-visible {
            outline: 2px solid var(--color-outline-focus);
        }
    }

    .inbox-row,
    .inbox-header {
        /* Don't show the icons unless user is visibly focused
            on the element or one of the elements within it. */
        &:focus-within:not(:focus),
        &:focus-visible {
            .inbox-row-visibility-policy-inherit,
            .inbox-action-button {
                opacity: 1;
            }
        }
    }

    .inbox-folder {
        &:focus-visible {
            .inbox-header-name-text,
            .collapsible-button .zulip-icon,
            .unread_mention_info,
            .unread_count {
                opacity: 1;
            }

            background: light-dark(
                transparent,
                var(--color-background-hover-popover-menu)
            );
        }
    }
}