64898b2c79
Some checks failed
Code scanning / CodeQL (push) Failing after 15s
Zulip production suite / Ubuntu 22.04 production build (push) Failing after 26s
Zulip production suite / Debian 12 production install with custom db name and user (push) Has been skipped
Zulip production suite / Ubuntu 22.04 production install and PostgreSQL upgrade with pgroonga (push) Has been skipped
Zulip production suite / Ubuntu 24.04 production install (push) Has been skipped
Zulip production suite / Ubuntu 26.04 production install (push) Has been skipped
Zulip production suite / Debian 13 production install (push) Has been skipped
Zulip production suite / 7.0 Version Upgrade (push) Has been skipped
Zulip production suite / 8.0 Version Upgrade (push) Has been skipped
Zulip production suite / 6.0 Version Upgrade (push) Has been skipped
Zulip production suite / 10.0 Version Upgrade (push) Has been skipped
Zulip production suite / 9.0 Version Upgrade (push) Has been skipped
Zulip production suite / 12.0 Version Upgrade (push) Has been skipped
Zulip production suite / 11.0 Version Upgrade (push) Has been skipped
GitHub Actions Security Analysis with zizmor / zizmor (push) Failing after 3s
Zulip CI / Debian 12 (Python 3.11, backend + documentation) (push) Failing after 26s
Zulip CI / Ubuntu 22.04 (Python 3.10, backend + frontend) (push) Failing after 3s
Zulip CI / Ubuntu 24.04 (Python 3.12, backend) (push) Failing after 25s
Zulip CI / Ubuntu 26.04 (Python 3.14, backend) (push) Failing after 25s
Zulip CI / Debian 13 (Python 3.13, backend) (push) Failing after 28s
Zulip production suite / Required jobs (push) Has been cancelled
Zulip CI / Required jobs (push) Has been cancelled
API Documentation Update Check / check-feature-level-updated (push) Has been cancelled
API Documentation Update Check / notify-if-api-docs-changed (push) Has been cancelled
1778 lines
46 KiB
CSS
1778 lines
46 KiB
CSS
#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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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-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;
|
|
}
|
|
|
|
/* Only reserve bottom margin when a banner is actually present, so
|
|
the empty wrapper doesn't take up space. */
|
|
&:not(:empty) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
/* Section title <h3>s in .realm-group-permissions /
|
|
.channel-group-permissions / .user-group-permissions. Was
|
|
supplied by the universal h1-h4 reset in bootstrap.app.css;
|
|
set explicitly so these section titles survive that reset's
|
|
removal. font-weight is left at the user-agent default
|
|
(bold). */
|
|
.group-permissions-section > h3 {
|
|
font-size: 1.5313em; /* 24.5px at 16px em */
|
|
line-height: var(--header-line-height);
|
|
margin: 10px 0;
|
|
}
|
|
|
|
/* Per-permission subsection headings; a larger margin than other
|
|
subsection headings, with font from the shared
|
|
'.settings-subsection-title' rule. */
|
|
.subsection-header .settings-subsection-title {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.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;
|
|
/* Leave space between the channel/group name
|
|
and its inset focus ring, and between that
|
|
focus ring and the adjacent edit button's
|
|
focus ring. */
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* Focus outlines in this header are inset and forced
|
|
to the regular focus blue. The ancestor
|
|
.stream-info-title and .display-type both set
|
|
`overflow: hidden`, which would otherwise clip an
|
|
outside-drawn focus outline. */
|
|
.selected-stream:focus-visible {
|
|
outline: 2px solid var(--color-outline-focus);
|
|
outline-offset: -2px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* `!important` is required to win against the
|
|
`.icon-button:focus-visible` and
|
|
`.action-button:focus-visible` rules in
|
|
buttons.css, which use `!important` themselves. */
|
|
.button-group :is(.icon-button, .action-button):focus-visible {
|
|
outline: 2px solid var(--color-outline-focus) !important;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* 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 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 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left .no-groups-to-show .settings-empty-option-text {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.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 {
|
|
margin-top: calc(45vh - 75px);
|
|
}
|
|
|
|
.left .no-groups-to-show {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
.right .nothing-selected {
|
|
padding: 5px 5px 0;
|
|
|
|
.stream-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 {
|
|
background-color: var(
|
|
--color-background-pill-container-input-disabled
|
|
);
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
#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: 100% !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,
|
|
#subscription_overlay .default-push-notifications {
|
|
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;
|
|
}
|
|
}
|
|
}
|