githubmirror/zulip

web/styles/subscriptions.css
1 791 строка45 KB
kumbhar-sarthak
group_settings: Use CSS flex layout and scrollable pill input for member list.
08 июн 2026, 20:50
08 июн 2026, 20:50b60632d
#subs_page_loading_indicator {
    margin: 10px auto;
}

.member_list_loading_indicator,
.subscriber_list_loading_indicator {
    margin: 10px auto;
}

.member_list_loading_indicator:empty,
.subscriber_list_loading_indicator:empty {
    margin: 0;
}

.subscriptions div #response {
    overflow-wrap: break-word;
}

.subscription_settings .bootstrap-btn {
    border-radius: 2px;
}

.stream-email {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Source Code Pro", monospace;
    padding: 10px;
    font-size: 0.85em; /* 13.6px at 16px/em (previously 0.85rem) */
    background-color: var(--color-background-stream-email);
    border: 1px solid hsl(0deg 0% 87%);
    border-radius: 4px;
}

.stream-email .email-address {
    display: block;
    flex: 0 0 90%;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

.stream-email .copy-email-address {
    font-size: 1.1765em; /* 16px at 13.6px/em */
}

.sub_setting_checkbox {
    display: flex;

    & .control-label-disabled label.checkbox + label {
        cursor: not-allowed;
    }
}

.mute-note {
    font-size: 90%;
    opacity: 0.5;
}

.hide-mute-note {
    display: none;
}

.sub_setting_control {
    display: inline-block;
    margin-right: 10px;
}

#add_new_user_group {
    margin-left: auto;
    height: var(--settings-overlay-header-button-height);
}

.two-pane-settings-plus-button {
    font-weight: 400;
    position: relative;
    border: 1px solid var(--color-border-settings-plus-button);
    border-radius: 5px;
    background-color: var(--color-background-settings-plus-button);
    color: var(--color-text-settings-plus-button);
    margin: 0;
    height: 100%;
    width: var(--settings-overlay-header-button-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;

    &:hover {
        border: 1px solid hsl(0deg 0% 47%);
    }

    .create_button_plus_sign {
        line-height: 1em;
        display: block;
        font-size: 1.2em;
        opacity: 0.8;
    }

    &:disabled {
        /* Replicate disabled values */
        cursor: not-allowed;
        opacity: 0.5;
    }
}

#create_user_group_description,
#create_stream_description {
    width: calc(100% - 15px);
}

.user_group_creation_error,
.stream_creation_error,
#settings-topics-already-exist-error {
    display: none;
    margin-left: 2px;
    color: hsl(0deg 100% 50%);
}

.stream_creation_error a,
#change_stream_name_error a {
    text-decoration: underline;
}

#change_stream_name {
    margin-bottom: 0;
}

#change_stream_name_error {
    color: hsl(0deg 100% 50%);
}

.change-stream-name-container,
.channel-folder-name-container {
    margin-bottom: 20px;
}

/* TODO: Unify with settings.css definition */
h3.stream_setting_subsection_title,
h3.user_group_setting_subsection_title {
    display: inline-block;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.5;
    margin: 4px 0;
}

h4.stream_setting_subsection_title {
    margin-bottom: 5px;
}

h4.stream_setting_subsection_title,
h4.user_group_setting_subsection_title {
    display: inline-block;
    font-size: 1.35em;
    font-weight: normal;
    line-height: 1.5;
}

.subscriber_list_settings_container.no-display {
    display: none;
}

.subscriber-list-settings-loading {
    display: flex;
    align-items: center;
    /* Override the inline width set by loading.make_indicator(),
       which is miscalculated when the element is inside a hidden
       parent (display:none makes $text_elem.width() return 0). */
    width: fit-content !important;
    margin: auto;

    &:not(:empty) {
        margin-top: 100px;
    }
}

#people_to_add_in_group,
#people_to_add,
.member_list_settings_container,
.subscriber_list_settings_container {
    display: flex;
    flex-direction: column;

    .input-group {
        margin-bottom: 10px;
    }
}

.subscribers-list-header,
.create_stream_subscriber_list_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .subscribers-heading {
        display: flex;
        align-items: center;

        .loading_indicator_spinner {
            width: 100%;
            height: 100%;
        }
    }
}

.add-group-member-loading-spinner {
    align-self: center;
}

.member-list-box,
.subscriber-list-box {
    text-align: center;
    border-left: 1px solid var(--color-border-table-subscriber-list);
    border-right: 1px solid var(--color-border-table-subscriber-list);
    border-radius: 4px;

    .member_list_container,
    .subscriber_list_container {
        position: relative;
        border-bottom: 1px solid var(--color-border-table-subscriber-list);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        max-height: var(--stream-subscriber-list-max-height);
        overflow: auto;
        text-align: left;
        -webkit-overflow-scrolling: touch;

        .member-list,
        .subscriber-list {
            width: 100%;
            margin: auto;

            & tbody {
                border-bottom: none;
            }

            & tr {
                & td,
                th {
                    padding: 4px 10px 4px 5px;
                    vertical-align: middle;

                    &:first-of-type {
                        padding-left: 10px;
                    }
                }
            }

            & thead {
                position: sticky;
                top: 0;
                z-index: 1;

                th {
                    &:first-of-type {
                        border-top-left-radius: 4px;
                    }

                    &:last-of-type {
                        border-top-right-radius: 4px;
                    }
                }
            }

            .hidden-subscriber-email {
                font-style: italic;
            }

            .strikethrough {
                text-decoration: line-through;
            }
        }
    }
}

.subscriber-name,
.subscriber-email {
    padding: 5px;
}

.subscriber-email {
    margin-left: 20px;
    padding-right: 8px;
}

.add_members_container,
.add_subscribers_container {
    display: inline-flex;
    width: 100%;
    align-items: center;

    /* We need on click events to fire on this input for our typeahead.
       This ensures that the input occupies space in the parent
       container. */
    .input {
        flex-grow: 1;
    }

    & button[disabled] {
        pointer-events: none;
    }

    /* Set minimum height so that at least one row of pills is visible. */
    min-height: calc(
        var(--height-input-pill) + 2 *
            var(--outer-spacing-input-pill-container) + 2px
    );

    .members-input-scrollable-container,
    .subscriber-input-scrollable-container {
        max-height: 30vh;
        height: 100%;
        /* This makes sure that the element not takes the 100% space
           and only takes the space remaining after button's width. */
        flex: 1;
        min-width: 0;

        .simplebar-content {
            /* Render as a flex container so whitespace-only text nodes around
               .pill-container are not rendered as anonymous flex items.
               Otherwise those text nodes contribute line box height to
               scrollHeight, which triggers simplebar to show a scrollbar even
               when the pill-container fits its visible area. */
            display: flex;
        }

        .pill-container {
            /* Subtract the total padding and border width from both width and height. */
            width: calc(100% - 15px);
            height: calc(100% - 6px);
            /* Reserve space for the 11px simplebar vertical track so
               pills don't overlap the scrollbar. */
            padding-right: 11px;
        }
    }
}

.user_group_subscription_request_result,
.stream_subscription_request_result {
    & a {
        color: inherit;
    }
    margin-bottom: 10px;
}

.member-search,
.subscriber-search {
    margin: 10px 0 0;

    .search {
        max-width: 160px;
    }

    @media (max-width: $ms_min) {
        float: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 5px;
    }
}

.add_subscriber_button_wrapper,
.add_member_button_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;

    .check,
    .add-subscriber-button,
    .add-member-button {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        z-index: 1;
        visibility: visible;
        max-height: 1.75em;
        width: 100%;
        position: relative;

        &.hidden-below {
            visibility: hidden;
            z-index: -1;
        }
    }
}

.add_subscribers_container .add_subscriber_button_wrapper,
.add_members_container .add_member_button_wrapper {
    padding-left: 5px;
}

.add-subscribers-subtitle,
.add-members-subtitle {
    opacity: 0.7;
}

.send_notification_to_new_subscribers_container {
    /* Avoid having the clickable area extend to the full width of
    the containing element. */
    width: fit-content;
    /* Padding ensures the focus outline is fully visible; without it,
    the left side gets clipped by overflow: hidden on the subscribers
    tab content. This shifts the checkbox 2px right, but the effect
    on alignment is negligible. */
    padding-left: 2px;
}

#stream_settings .add-subscribers-subtitle,
#user_group_settings .add-members-subtitle {
    margin-bottom: 10px;
}

.choose-subscribers-label {
    display: inline;
}

.two-pane-settings-container .two-pane-settings-header .fa-chevron-left {
    position: relative;
    transform: translate(-50px, 0);
    opacity: 0;
    color: hsl(0deg 0% 67%);

    float: left;
    padding: 2px 10px;

    cursor: pointer;
    visibility: hidden;

    transition: 0.3s ease;
    transition-property: opacity, transform;
}

.two-pane-settings-container
    .two-pane-settings-header.slide-left
    .fa-chevron-left,
#settings_overlay_container
    .settings-header.mobile.slide-left
    .fa-chevron-left {
    transform: translate(0, 0);
    opacity: 1;
}

.group-assigned-permissions {
    .subsection-header {
        h3 {
            font-size: 1.5em;
            font-weight: normal;
            line-height: 1.5;
            display: inline;
        }
    }

    .subsection-settings {
        margin-top: 10px;
    }

    .no-permissions-for-group-text {
        font-size: 1.5em;
    }

    .inline {
        display: inline;
    }
}

.two-pane-settings-container .two-pane-settings-subheader {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-modal-bar);
    grid-area: settings-overlay-subheader;
    justify-content: center;

    .list-toggler-container {
        flex-wrap: wrap;
        padding: 8px;
        display: flex;
        justify-content: end;
        flex-grow: 1;
        gap: 5px;
        align-self: start;
    }

    .tab-switcher.stream_sorter_toggle {
        margin-left: auto;
    }

    .tab-switcher,
    #add_new_subscription {
        margin: 0;
        height: var(--settings-overlay-header-button-height);
    }

    .display-type {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        padding: 10px;
        overflow: hidden;
        width: 100%;

        & a {
            color: inherit;

            &:hover {
                color: inherit;
                text-decoration: none;
            }
        }

        &.preview::after {
            content: "Preview";
        }

        &.preferences::after {
            content: "Preferences";
        }

        .stream-info-title {
            display: flex;
            justify-content: center;
        }

        .user-group-info-title {
            display: block;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .stream-info-title,
        .user-group-info-title {
            font-size: 1.5em; /* 21px at 14px/em */
            line-height: 1.25;
            font-weight: 600;
            overflow-wrap: break-word;
            overflow: hidden;
            width: 100%;

            &.new-channel-members-title {
                line-clamp: 2;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                width: unset;
            }

            /* The right pane header/title for user group and channel setting menu has
               two major components, The group/channel name section and the button groups. */
            .selected-group-title,
            .selected-stream-title {
                display: flex;
                width: 100%;

                /* This works in tandem with ".small-window-alert-notification-container"
                   in the right pane body. */
                .large-window-alert-notification-container {
                    display: flex;

                    @media (width < $sm_min) {
                        display: none;
                    }

                    .stream_change_property_info {
                        margin-right: 1px;
                        font-weight: 400;
                        font-size: var(--base-font-size-px);
                        min-width: max-content;
                    }
                }

                .selected-stream,
                .selected-group {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                /* These contain two button groups, the left group should stick to the
                   right side of the group/channel title name, and the right group that
                   should stick to the rightmost side of the right pane header. */
                .selected-group-buttons,
                .stream-title-buttons {
                    display: flex;
                    justify-content: space-between;
                    /* Make the button groups stretch and take the rest of the right pane
                       header */
                    flex-grow: 1;
                }

                .button-group {
                    height: 1.25em;
                    display: flex;

                    .subscribe-button,
                    .join_leave_button,
                    #preview-stream-button {
                        height: 100%;
                        margin-left: 3px;
                    }

                    .icon-button {
                        /* Equal to to font sizes for other icon buttons
                        in the channel and group settings UI. */
                        font-size: calc(1.2 * var(--base-font-size-px));
                    }
                }

                .deactivated-user-group-icon {
                    font-size: var(--base-font-size-px);
                }
            }

            .large-icon {
                display: inline-block;
                margin-left: 5px;
                /* Square off the icon box for better alignment
                   with adjacent text. */
                line-height: 1;
                /* Middle alignment looks good for all but the lock icon. */
                vertical-align: middle;

                &:has(.zulip-icon-lock) {
                    /* Keep the default baseline alignment for the lock icon. */
                    vertical-align: baseline;
                }

                .zulip-icon {
                    font-size: 0.75em; /* 18px at 24px/em */
                }
            }
        }
    }
}

.two-pane-settings-container {
    display: grid;
    grid-template:
        "settings-overlay-header   " var(--settings-overlay-header-height)
        "settings-overlay-content     " minmax(0, 1fr) / 100%;
    height: 95%;
    border-radius: 4px;
    padding: 0;
    width: 97%;
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    max-height: var(--overlay-container-max-height);

    /* This variable allows JavaScript to detect whether we are showing both
    the left sidebar and settings content for the current screen width or not. */
    --column-count: 2;

    .list-toggler-container .tab-switcher .ind-tab {
        width: auto;
        display: flex;
        padding: 0 10px;

        .fa {
            font-size: 1em;
        }
    }

    .two-pane-settings-header {
        grid-area: settings-overlay-header;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
        font-weight: 700;
        background-color: var(--color-background-modal-bar);
        border-bottom: 1px solid var(--color-border-modal-bar);

        .exit {
            font-weight: 600;
            color: hsl(0deg 0% 67%);
            cursor: pointer;
        }
    }

    .two-pane-settings-content {
        grid-area: settings-overlay-content;
        display: flex;

        .left,
        .right {
            display: grid;
            grid-template:
                "settings-overlay-subheader" minmax(
                    var(--settings-overlay-subheader-height),
                    max-content
                )
                "settings-overlay-body     " minmax(0, 1fr) / 100%;
        }
    }

    .exit-sign {
        font-size: 1.5em;
        margin-right: 0.7142em; /* 10px at 14px em */
        font-weight: 600;
        cursor: pointer;
    }

    .left .no-streams-to-show,
    .left .no-groups-to-show,
    .right .nothing-selected .create-stream-button-container {
        display: block;
        text-align: center;
        font-size: 1em;
        margin-left: 2em;
        margin-right: 2em;

        .settings-empty-option-text {
            color: var(--color-text-item);
        }
    }

    .left .no-streams-to-show,
    .left .no-groups-to-show {
        margin-top: calc(45vh - 75px);
    }

    .right .nothing-selected {
        padding: 5px 5px 0;

        .stream-info-banner a,
        .group-info-banner a {
            color: inherit;
        }

        .create-stream-button-container {
            margin-top: calc(45vh - 128px);
        }

        .create-group-button-container {
            margin-top: calc(45vh - 134px);
            text-align: center;

            .settings-empty-option-text {
                color: var(--color-text-item);
            }
        }
    }

    .left {
        width: 40%;
    }

    .right {
        width: calc(60% + 1px);
        border-left: 1px solid var(--color-border-modal-bar);
        box-sizing: border-box;

        .nothing-selected .create_stream_button,
        .nothing-selected .create_user_group_button {
            padding: 6px 10px 8px;
            display: block;
            margin: 0 auto 10px;
            font-family: inherit;
            font-size: inherit;
        }

        .main-view-banner.group_deactivated {
            margin-bottom: 10px;
        }
    }

    & input[type="text"].small {
        border: 1px solid hsl(0deg 0% 80%);
        border-radius: 4px;
        padding: 3px;
        outline: none;
        color: hsl(0deg 0% 27%);
        text-align: center;

        &:focus {
            text-align: left;
        }

        &:valid {
            text-align: left;
        }
    }
}

#search_stream_name,
#search_group_name {
    box-shadow: none;
    padding-right: 28px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    grid-column: search-input-start / clear-search-end;
    grid-row: search-input;
}

.stream_name_search_section,
.group_name_search_section {
    padding: 0.5em 0.625em; /* 8px 10px at 16px font size */
    display: grid;
    border-bottom: 1px solid var(--color-border-modal-bar);
}

.stream_name_search_section {
    grid-template:
        "folder-filter search-input clear-search dropdown-widget" auto / auto minmax(
            0,
            1fr
        )
        30px;
}

.group_name_search_section {
    grid-template:
        "search-input clear-search dropdown-widget" auto / minmax(0, 1fr)
        30px;
}

#stream_settings_filter_widget {
    margin-left: 10px;
    gap: 3px;
    width: auto;
}

#clear_search_stream_name,
#clear_search_group_name {
    grid-area: clear-search;
}

#folder_filter_container {
    grid-area: folder-filter;
    display: flex;
}

#folder_filter_button {
    font-size: calc(
        1.5625 * var(--base-font-size-px)
    ); /* 25px at 16px font size */
    padding: 0;
    height: var(--folder-filter-dropdown-widget-button-height);
    /* To align the search input with privacy icon box in the stream row,
    margin is set by subtracting the button width (which is equal to
    its height) from total width of the checkbox container in stream row. */
    margin-right: calc(
        2.3125 * var(--base-font-size-px) -
            var(--folder-filter-dropdown-widget-button-height)
    );
}

.stream_settings_filter_container.hide_filter {
    display: none;
}

#user_group_visibility_settings_widget {
    grid-area: more-options-button;
    margin-left: 10px;
    display: flex;
    gap: 3px;
    width: auto;
}

.user-groups-list,
.streams-list {
    position: relative;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.left .group-name-wrapper .fa-ban,
.right .group-name .fa-ban {
    font-size: 0.8em;
    opacity: 0.6;
}

.left .group-name-wrapper,
.right .group-name {
    display: flex;
    gap: 3px;
    align-items: center;
}

.user-groups-list.hide-deactivated-user-groups .deactivated-group {
    display: none;
}

.user-groups-list.hide-active-user-groups .group-row:not(.deactivated-group) {
    display: none;
}

.user_group_visibility_settings-dropdown-list-container .dropdown-list-wrapper {
    min-width: 11em;
}

#search_group_name:placeholder-shown + #clear_search_group_name {
    visibility: hidden;
}

#search_stream_name:placeholder-shown + #clear_search_stream_name {
    visibility: hidden;
}

.stream-title {
    font-size: 1.3em;
    font-weight: 400;
}

.user-group-creation-body,
.stream-creation-body {
    & section {
        margin-bottom: 20px;
    }

    #announce-new-stream {
        margin: 20px auto;
    }
}

.stream-row,
.group-row {
    padding: 0.9375em 0.625em 0.6875em; /* 15px 10px 11px at 16px font size */
    border-bottom: 1px solid var(--color-border-modal-bar);
    cursor: pointer;
    display: flex;
    align-items: center;

    .check {
        width: 1.5625em; /* 25px at 16px font size */
        height: 1.5625em; /* 25px at 16px font size */
        margin-right: 0.75em; /* 12px at 16px font size */
        background-size: 60% auto;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        justify-content: center;

        & .sub-unsub-icon {
            display: flex;
            height: 100%;
            align-items: center;
            /* This color is used in .subscriber-check-icon of the help
               center to make the icon color same as the web app. Do change
               the color there when changing the color here */
            color: var(--color-stream-group-row-plus-icon);
            font-size: 1.0938em; /* 70% of 1.5625em */

            &.hide {
                display: none;
            }
        }

        &.checked:hover .sub-unsub-icon {
            color: var(--color-stream-group-row-checked-icon-hover);
        }

        &.not-direct-member {
            .sub-unsub-icon {
                cursor: default;
            }
        }

        &.disabled {
            &:not(.checked) .sub-unsub-icon {
                /* Change opacity to 50% in dark mode */
                color: var(--color-stream-group-row-plus-icon-disabled);
            }

            .sub-unsub-icon {
                color: var(--color-stream-group-row-checked-icon-disabled);
                cursor: not-allowed;
            }
        }

        .sub_unsub_status,
        .join_leave_status {
            display: inline-block !important;
            height: auto !important;
            width: auto !important;

            .loading_indicator_spinner {
                width: 100%;
                height: 100%;
                margin: 0;
            }

            .loading_indicator_spinner svg path {
                fill: var(--color-stream-group-row-plus-icon);
            }
        }
    }

    .checked .sub-unsub-icon {
        /* This color is used in .subscriber-check-icon of the help
           center to make the icon color same as the web app. Do change
           the color there when changing the color here */
        color: var(--color-stream-group-row-checked-icon);
    }

    .checked .sub_unsub_status,
    .checked .join_leave_status {
        .loading_indicator_spinner svg path {
            fill: var(--color-stream-group-row-checked-icon);
        }
    }

    .check:not(.checked, .disabled):hover .sub-unsub-icon,
    &.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
        color: var(--color-stream-group-row-plus-icon-hover);
    }

    .icon {
        width: 2.1875em; /* 35px at 16px font size */
        height: 2.1875em; /* 35px at 16px font size */
        margin-right: 0.75em; /* 12px at 16px font size */
        background-color: hsl(300deg 100% 25%);
        border-radius: 4px;
        color: hsl(0deg 0% 100%);

        .symbol {
            font-weight: 600;
            font-size: 1.1em;
        }

        .hashtag {
            font-size: 1.4em;
            font-weight: 600;
        }
    }

    .sub-info-box {
        /* 5.5em = width of checkmark (1.5625em) + right margin for checkmark (0.75em)
        + width of privacy icon (2.1875em) + right margin for privacy icon (0.75em) +
        right margin for this element (0.25em) */
        width: calc(100% - 5.5em);
    }

    .group-info-box {
        /* 2.5625em = width of checkmark (1.5625em) + right margin for checkmark (0.75em)
        + right margin for this element (0.25em) */
        width: calc(100% - 2.5625em);
    }

    &.system-group .group-info-box {
        /* We want to align this with the search filter placeholder.
           Search filter box and group info box have the same left
           margin in ems. Since filter box has a left padding of 6px,
           we set the same as left margin here. */
        margin-left: var(--input-horizontal-padding);
    }

    .sub-info-box,
    .group-info-box {
        margin-right: 0.25em; /* 4px at 16px font size */

        .top-bar,
        .bottom-bar {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .top-bar .group-name-wrapper {
            overflow: hidden;
        }

        .top-bar .stream-name,
        .top-bar .group-name,
        .bottom-bar .description {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .top-bar .stream-name,
        .bottom-bar .description {
            margin-right: 0.75em; /* 12px at 16px font size */
        }

        .top-bar .subscriber-count,
        .bottom-bar .stream-message-count {
            white-space: nowrap;
            color: hsl(0deg 0% 67%);
        }

        .top-bar .subscriber-count-text,
        .top-bar .subscriber-count-lock,
        .bottom-bar .stream-message-count-text {
            margin-right: 0.3125em; /* 5px at 16px font size */
        }

        .top-bar .stream-name {
            font-weight: 600;
        }

        .bottom-bar {
            line-height: 1.5;
        }
    }

    &.active {
        background-color: var(--color-active-row-modal);
    }

    &::selection,
    .icon .hashtag::selection {
        background-color: transparent;
    }
}

.stream-row .sub-info-box .description:empty::after,
.group-row .group-info-box .description:empty::after {
    content: attr(data-no-description);
    font-style: italic;
    color: hsl(0deg 0% 67%);
}

.add_subscribers_container.add_subscribers_disabled,
.add_members_container.add_members_disabled {
    cursor: not-allowed;

    .pill-container {
        cursor: not-allowed;
        pointer-events: none;
    }
}

.org-permissions-form,
.org-settings-form,
.group-permissions,
.advanced-configurations-container,
.channel-permissions {
    .group_setting_disabled {
        cursor: not-allowed;
        /* This ensures that we do not see the not allowed cursor in the
           extra space of a div */
        width: fit-content;

        /* This specific rules are needed to override the default settings
           of these elements */
        .pill-container,
        .group-setting-label {
            cursor: not-allowed;
        }

        .pill-container {
            opacity: 0.7;

            .pill {
                .exit {
                    display: none;
                }
            }

            .input {
                pointer-events: none;
                min-height: var(--height-input-pill);
            }
        }
    }
}

#settings_page,
.two-pane-settings-overlay {
    container: settings-overlay / inline-size;
}

.two-pane-settings-overlay {
    .tab-switcher {
        display: flex;
        flex-wrap: nowrap;
        height: var(--settings-overlay-header-button-height);
    }

    #user-group-creation,
    #stream-creation {
        overflow: auto;
        outline: none;
        -webkit-overflow-scrolling: touch;

        .user-group-creation-body,
        .stream-creation-body {
            padding: 15px 15px 0;
        }

        .settings-sticky-footer {
            display: flex;
            justify-content: space-between;
            padding: 9px 15px;
            text-align: right;
            background-color: var(--color-background-modal-bar);
            border-top: 1px solid var(--color-border-modal-bar);
        }

        @container settings-overlay (width > $settings_overlay_sidebar_collapse_breakpoint) {
            .settings-sticky-footer {
                border-radius: 0 0 6px;
            }
        }

        .create_user_group_member_list_header,
        .create_stream_subscriber_list_header {
            margin-top: 10px;
            margin-bottom: 3px;

            & h5 {
                display: inline-block;
            }
        }

        .add-user-list-filter {
            width: 140px;
            float: right;
            margin-top: 10px;
        }

        #user_group_creation_form,
        #stream_creation_form {
            margin: 0;

            .user_group_create_info.show {
                margin: 5px;
            }

            #user_group_creating_indicator,
            #stream_creating_indicator {
                &:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

                .loading_indicator_text {
                    font-weight: 400;
                }
            }
        }
    }

    .inner-box {
        margin: 18px;
    }

    .group_settings_header,
    .stream_settings_header {
        flex-wrap: wrap;
        display: flex;
        margin-left: 18px;

        .tab-container {
            .tab-switcher {
                margin: 0;
            }

            .ind-tab {
                padding: 0 4px;
                min-width: 5.7142em; /* 80px at 14px/em */
                width: auto;
                display: flex;
            }
        }
    }

    .group-description-field,
    .channel-description-field {
        display: flex;
        flex-wrap: wrap;
        /* 10px at 16px */
        margin: 0 0 0.625em;

        /* Subtract the total horizontal padding and border width from the input width
           so that this matches other setting elements using box-sizing: border-box. */
        .settings-view-only-textarea {
            width: calc(
                var(--modal-input-width) - 2 *
                    var(--view-only-field-horizontal-padding) - 2 *
                    var(--input-border-width)
            );
        }

        .icon-button {
            align-items: baseline;
        }
    }

    .user-group-description,
    .stream-description {
        hyphens: auto;
        display: flex;
        align-items: center;

        .no-description {
            font-style: italic;
            color: hsl(0deg 0% 67%);
        }
    }

    .checkmark {
        display: none;
        margin-left: 5px;
        color: hsl(0deg 0% 67%);

        cursor: pointer;

        &.show {
            display: block;
        }
    }

    .hash::after {
        position: relative;
        content: "#";
    }

    .settings {
        position: relative;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        .tab-container {
            padding-top: 5px;
        }
    }

    .subscription_settings {
        display: none;
        position: relative;
        width: 100%;
        margin: 0 auto;
        border-radius: 4px;
        top: -1px;

        &.show {
            display: block;
        }

        /* This works in tandem with ".large-window-alert-notification-container"
           in the right pane title. */
        .small-window-alert-notification-container {
            display: none;

            @media (width < $sm_min) {
                display: flex;
                justify-content: end;
            }

            .stream_change_property_info {
                margin-bottom: 10px;
            }
        }
    }

    #stream_settings.subscribers-tab-active,
    #user_group_settings.members-tab-active {
        /* When the subscribers/members tab is active, disable simplebar
           on #stream_settings/#user_group_settings so the panel itself
           is not scrollable — only the subscriber/member list table
           scrolls via its own simplebar. Simplebar reads the host
           element's computed overflow-y and disables its scrollbar
           when it sees 'hidden'. */
        overflow-y: hidden;

        /* Propagate the container height through simplebar's wrapper
           DOM to the actual content. :has() targets only the outer
           simplebar-content (the one containing .subscription_settings/
           user_group_settings_wrapper), not the nested one inside
           .subscriber_list_container/.member_list_container. */
        .simplebar-content:has(> .subscription_settings),
        .simplebar-content:has(> .user_group_settings_wrapper) {
            height: 100%;
            display: flex;
            flex-direction: column;

            .subscription_settings,
            .user_group_settings_wrapper,
            .inner-box {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

            .stream_section[data-stream-section="subscribers"],
            .group_setting_section[data-group-section="members"] {
                flex: 1;
                overflow: hidden;

                .edit_subscribers_for_stream,
                .edit_members_for_user_group,
                .subscriber_list_settings_container,
                .member_list_settings_container {
                    height: 100%;
                }
            }
        }
    }

    .two-pane-settings-creation-simplebar-container.subscribers-visible,
    .two-pane-settings-creation-simplebar-container.members-visible {
        /* When the subscribers/members step is visible in the stream/group
        creation form, disable simplebar on the outer container and use
        flex layout so only the subscriber/member list table scrolls
        via its own simplebar. */
        overflow-y: hidden;

        .simplebar-content:has(> .stream-creation-body),
        .simplebar-content:has(> .user-group-creation-body) {
            height: 100%;
            display: flex;
            flex-direction: column;

            .stream-creation-body,
            .user-group-creation-body {
                flex: 1;
                overflow: hidden;

                .subscribers_container,
                .user_group_members_container {
                    height: 100%;
                    display: flex;
                    flex-direction: column;

                    .stream_create_add_subscriber_container,
                    #choose_member_section,
                    #people_to_add,
                    #people_to_add_in_group {
                        flex: 1;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                    }
                }
            }
        }
    }

    #stream_settings.subscribers-tab-active .subscriber-list-box,
    #user_group_settings.members-tab-active .member-list-box,
    .two-pane-settings-creation-simplebar-container.subscribers-visible
        .subscriber-list-box,
    .two-pane-settings-creation-simplebar-container.members-visible
        .member-list-box {
        /* flex: 1 takes remaining space after the auto-sized siblings. */
        flex: 1;
        overflow: hidden;
        /* Hide borders here since they would extend to the
           full flex item height; they are redeclared on
           .subscriber_list_container/.member_list_container instead. */
        border-left: none;
        border-right: none;
        /* This is slightly larger than the height required to show at least one
           subscriber/member row is shown along with the table header. It is not easy
           to calculate exact height since it depends whether the user has
           permission to remove subscribers/members or not. */
        min-height: 4.7em;

        .subscriber_list_container,
        .member_list_container {
            box-sizing: border-box;
            max-height: 100%;
            /* overflow: clip prevents the native scrollbar that would otherwise
               appear because the simplebar placeholder can overflow the
               container. Unlike overflow: hidden, clip does not disable
               simplebar (simplebar only disables on overflow: hidden). */
            overflow: clip;
            border-left: 1px solid var(--color-border-table-subscriber-list);
            border-right: 1px solid var(--color-border-table-subscriber-list);
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
    }

    #personal-stream-settings {
        .stream_change_property_status {
            margin: 9px auto 3px 3px;
        }
    }

    .stream_details_box,
    .group_detail_box {
        margin: 0 0 10px; /* mimic paragraph spacing */
    }

    .loading_indicator_text {
        font-weight: 400;
        line-height: 20px;
    }

    .subsection-parent .input-group {
        & input[type="checkbox"] {
            margin-top: 0;
        }

        &:last-of-type {
            border-bottom: none;
        }

        & input[type="radio"] {
            margin-right: 5px;
        }

        .inline {
            display: inline !important;
        }
    }

    .icon-button {
        font-size: 1.2em;
    }
}

.new-stream-configuration,
.channel-permissions,
.group-permissions,
.stream_details_box {
    .input-group {
        &.message-retention-setting-group {
            & input {
                width: 5ch;
                text-align: right;
            }
        }
    }

    .settings_select {
        /* Match with select elements in settings page. See there
           for comments about these values. */
        box-sizing: unset;
        width: calc(var(--modal-input-width) - 33px);
        max-width: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
        height: 1.4em;
    }
}

#subscription_overlay .default-stream,
#subscription_overlay .history-public-to-subscribers {
    width: fit-content;

    .inline {
        display: inline;
    }
}

#stream_creation_form .default-stream {
    margin: 20px 0;
}

.group-permissions .pill-container,
.advanced-configurations-container .pill-container,
.channel-permissions .pill-container {
    /* Subtract 2 * (2px padding) + 2 * (1px border) */
    min-width: calc(var(--modal-input-width) - 6px);

    .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }
}

.group-permissions .dropdown_widget_with_label_wrapper {
    display: inline-block;
    height: 30px;
    margin-bottom: 10px;
}

#change_user_group_description,
#change_stream_description,
#new_channel_folder_description,
#edit_channel_folder_description {
    height: 80px;
    margin-bottom: 4px;
}

.advanced-configurations-container,
.channel-permissions {
    .stream-message-retention-days-input input[type="text"] {
        border-radius: 5px;
        box-shadow: none;
        margin: 0;
        height: inherit;
    }
}

.group-setting-label {
    /* Avoid having the clickable area extend to the full width of the containing element */
    width: fit-content;
}

.stream-settings-color-selector {
    border: 1px solid var(--color-border-zulip-button);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;

    &.action-button-subtle-neutral {
        box-shadow: none;
    }
}

.stream-settings-color-preview {
    /* 28px at 16px font size */
    width: 1.75em;
    height: 1.75em;
    /* -6px 0 -6px 10px at 16px font size. */
    margin: -0.375em 0 -0.375em -0.625em;
}

#subscription_overlay .channel-folder-widget-container {
    display: flex;
    gap: 0.5em;
    width: auto;
    /* Set minimum width such that the total width of dropdown
    button and "Create folder" button is at least equal to the
    minimum width of pill inputs for permission settings. */
    min-width: var(--modal-input-width);
    flex-wrap: wrap;

    .dropdown_widget_value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

#deactivation-confirm-modal {
    .alert {
        padding-right: 14px;
        background-color: var(--color-background-error-main-view-banner);
    }

    .cannot-deactivate-group-banner {
        border: none;
        margin: 0;

        .banner-text {
            margin: 0;
            padding-right: 4px;
        }

        .permissions-button {
            text-wrap: nowrap;

            &:focus {
                outline: 0;
            }

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

@media (width < $lg_min) {
    .two-pane-settings-container {
        max-width: 95%;
    }
}

/* This ensures the left-border is tall enough. We can't keep this style for
    narrow screens because `right` is absolutely positioned on narrow screens. */
@container settings-overlay (width >= $settings_overlay_sidebar_collapse_breakpoint) {
    .two-pane-settings-container .right {
        height: 100%;
    }
}

/* We should eventually consolidate some of these styles with the styles
   in settings.css, using shared classnames. */
@container settings-overlay (width < $settings_overlay_sidebar_collapse_breakpoint) {
    .two-pane-settings-container {
        position: relative;
        overflow: hidden;

        /* This variable allows JavaScript to detect whether we are showing both
        the left sidebar and settings content for the current screen width or not. */
        --column-count: 1;

        .two-pane-settings-header .fa-chevron-left {
            visibility: visible;
        }

        .two-pane-settings-header.slide-left {
            border-bottom: none;
        }
    }

    .two-pane-settings-overlay .left {
        overflow: hidden;
        width: 100%;
    }

    .two-pane-settings-overlay .right {
        position: absolute;
        transform: translateX(101%);
        transition: transform 0.3s ease;
        background-color: var(--color-background-modal);
        z-index: 10;
        width: 100%;

        &.show {
            transform: translateX(0%);
        }
    }

    .two-pane-settings-overlay .settings {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (width < $sm_min) {
    #groups_overlay .user_group_settings_wrapper,
    #subscription_overlay .subscription_settings {
        .button-group {
            display: block;
            float: right;
            margin-top: 10px;
        }
    }
}

#stream_members_list,
#user_group_settings .member-list,
#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
    table-layout: fixed;
    width: 100%;

    th,
    td {
        box-sizing: border-box;
    }

    .panel_user_list {
        width: 50%;

        .pill-container {
            max-width: 100%;

            .pill-value {
                /* This is needed to unset the max-width value of 165px
                set for user pills in other tables. */
                max-width: unset;
            }
        }
    }
}

#stream_members_list,
#user_group_settings .member-list {
    .remove-button-column {
        width: 3em;
    }

    .settings-email-column {
        width: calc(50% - 3em);
    }
}

#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
    .action-column {
        width: 6em;
    }

    .settings-email-column {
        width: calc(50% - 6em);
    }
}

@media (width < $lg_min) {
    #stream_members_list,
    #user_group_settings .member-list,
    #stream_creation_form .subscriber-list,
    #user_group_creation_form .member-list {
        .panel_user_list {
            width: auto;
        }
    }
}