githubmirror/zulip

web/styles/subscriptions.css
1 595 строк35 KB
Sahil Batra
streams-ui: Add UI to update and archive channel folders.
04 авг 2025, 23:22
04 авг 2025, 23:22524442b
#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: hsl(0deg 0% 98%);
    border: 1px solid hsl(0deg 0% 87%);
    border-radius: 4px;
}

.stream-email .email-address {
    display: block;
    flex: 0 0 90%;
    word-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;

    &: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%);
}

/* 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;
    margin: auto;
    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;
    }
}

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

.member-list-box,
.subscriber-list-box {
    text-align: center;
    border-left: 1px solid hsl(0deg 0% 87%);
    border-right: 1px solid hsl(0deg 0% 87%);
    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;
}

.subscriber_list_add,
.member_list_add {
    width: 100%;
    margin: 0 0 10px;
}

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

.subscriber_list_add .form-inline,
.member_list_add .form-inline {
    margin-bottom: 0;
}

.add_subscribers_container,
.add_members_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;
    }
}

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

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

            .channel-privacy-type-icon {
                margin-right: 4px;
            }
        }
    }

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

        .input-group {
            margin-bottom: 1.25em; /* 20px at 16px/em */

            &.control-label-disabled {
                width: fit-content;
            }
        }
    }

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

    .left {
        align-self: start;
    }

    .left,
    .right {
        display: flex;
        justify-content: center;
    }

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

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

        & a {
            color: inherit;

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

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

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

        .stream-info-title,
        .user-group-info-title {
            display: none;
            font-size: 1.5em; /* 21px at 14px/em */
            line-height: 1.25;
            font-weight: 600;
            overflow-wrap: break-word;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

            &.showing-info-title {
                display: -webkit-box;
            }

            .large-icon {
                display: inline-block;
                margin-left: 5px;

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

        .user-group-info-title {
            margin-left: 5px;
        }

        .deactivated-user-group-icon-right {
            margin-right: 5px;
        }
    }
}

.two-pane-settings-container {
    display: grid;
    grid-template:
        "settings-overlay-header   " var(--settings-overlay-header-height)
        "settings-overlay-subheader" minmax(
            var(--settings-overlay-subheader-height),
            max-content
        )
        "settings-overlay-body     " 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);

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

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

    .two-pane-settings-body {
        display: flex;
    }

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

            .upgrade-or-sponsorship-tip,
            .upgrade-tip {
                /* Center tip in parent container */
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

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

        .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: 8px 10px;
    display: grid;
    grid-template:
        "search-input clear-search dropdown-widget" auto / minmax(0, 1fr)
        30px;
    border-bottom: 1px solid var(--color-border-modal-bar);
}

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

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

.deactivated-user-group-icon-right {
    margin-left: 3px;
    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;

        & svg {
            fill: hsl(0deg 0% 72%);
            width: 70%;
            margin: 0% 15%;
        }

        &.checked:hover svg {
            fill: hsl(240deg 41% 50%);
        }

        &.not-direct-member {
            svg {
                cursor: default;
            }
        }

        &.disabled {
            &:not(.checked) svg {
                fill: hsl(0deg 0% 87%);
            }

            svg {
                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: hsl(178deg 100% 40%);
            }
        }
    }

    .checked svg {
        fill: hsl(240deg 96% 68%);
    }

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

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

    .check:not(.checked, .disabled):hover svg,
    &.active .check:not(.checked, .disabled):hover svg {
        fill: hsl(0deg 0% 27%);
    }

    &::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%);
}

.subscriber_list_settings .add_subscribers_disabled,
.member_list_settings .add_members_disabled {
    cursor: not-allowed;

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

.subscriber_list_settings,
.member_list_settings {
    & button[disabled] {
        pointer-events: none;
    }
}

.org-permissions-form,
.group-permissions,
.advanced-configurations-container {
    .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;
            }
        }
    }
}

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

        #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 {
        white-space: nowrap;
        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;
            }
        }

        .button-group {
            padding-top: 5px;
            margin-left: auto;
            margin-right: 18px;
            height: var(--settings-overlay-header-button-height);
            display: flex;

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

    .group-header,
    .stream-header {
        white-space: nowrap;
        padding-top: 5px;
        display: flex;
        align-items: center;

        .group-name-wrapper,
        .stream-name {
            position: relative;
            font-size: 1.5em;
            font-weight: 600;
            white-space: nowrap;
            max-width: 90%;
            flex: auto;
            min-width: 0;
            overflow-x: clip;
            text-overflow: ellipsis;

            .group-name,
            .sub-stream-name {
                display: block;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        #open_group_info_modal {
            display: flex;
            align-items: center;
        }

        .button-group {
            margin-left: auto;

            /* This icon is narrower in width, we have to explicitly
               set it's width to 1em so that it vertically aligns with
               other buttons near it. */
            .fa-pencil {
                width: 1em;
            }

            .deactivate,
            .reactivate {
                margin-right: 3px;
                text-decoration: none;
            }
        }

        .large-icon {
            display: flex;
            margin-right: 5px;

            &.hash::after {
                top: -1px;
                font-size: 1.09em;
                font-weight: 700;
            }

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

        .group_change_property_info,
        .stream_change_property_info {
            vertical-align: top;
            margin: 0 5px 0 0;
        }
    }

    .group-description-wrapper,
    .stream-description {
        hyphens: auto;
        margin-bottom: 5px;

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

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

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

        .stream_email_address_error {
            vertical-align: top;
            margin-left: 15px;
        }
    }

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

div.settings-radio-input-parent {
    border-bottom: 1px solid hsl(0deg 0% 87%);
    margin: 2px 0 2px 5px;
    padding: 2px 0;

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

    & label.radio {
        display: inline;
        margin: 5px;
    }

    & input {
        float: left;
        width: auto;
        cursor: pointer;
        /* Scale the height with font-size, 14px at 1em */
        height: 1em;
        /* This value came from fiddling to find what looked
           vertically centered at 12px-20px font sizes. */
        margin-top: 0.15em;

        &:focus {
            outline: 1px dotted hsl(0deg 0% 20%);
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        &:disabled {
            cursor: not-allowed;
        }
    }

    &.default_stream_private_tooltip {
        cursor: not-allowed;

        & label {
            pointer-events: none;
        }
    }
}

.stream-permissions,
.advanced-configurations-container,
.group-permissions {
    .input-group {
        margin-bottom: 0.625em; /* 10px at 16px/em */

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

    .default-stream {
        margin: 20px 0;
        width: fit-content;

        .inline {
            display: inline;
        }
    }
}

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

    .input {
        flex-grow: 1;

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

.advanced-configurations-container .pill-container {
    margin-bottom: 10px;
}

.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 {
    width: 100%;
    height: 80px;
    margin-bottom: 4px;
    box-sizing: border-box;
}

.advanced-configurations-container
    .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-quiet-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;
    }

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

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

        .permissions-button {
            text-wrap: nowrap;

            &:focus {
                outline: 0;
            }
        }
    }
}

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

    #groups_overlay .group_settings_header,
    #subscription_overlay .stream_settings_header {
        flex-wrap: wrap;
    }
}

/* 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;

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

        .group-header,
        .stream-header {
            .button-group {
                margin-top: -5px;
            }
        }

        .group_change_property_info,
        .stream_change_property_info {
            /* For small widths where there is not enough space
            to show alert beside stream name we set its display
            to block so it is shown in new line. But to avoid
            it covering whole screen width we set max-width
            so that it does not losses inline-block appearance. */

            /* TODO: This will probably be not required once
            we have tabbed navigation as button group width
            will be smaller. */
            display: block;
            max-width: max-content;
            white-space: nowrap;
        }
    }
}

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

.selected-stream-title {
    display: block;
    margin: auto;
}

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