mirror of
https://github.com/zulip/zulip.git
synced 2026-07-03 21:10:12 +08:00
c58414b0ca
This commit restructures the HTML for stream and group settings overlay such that we first write all the HTML for left side and then right side. This change is important so that focus behavior during keyboard navigation is correct in narrow screens and does not move to the elements which are hidden after we fix it in #26941. This changes the focus behavior on keyboard navigation in wide screens where first all of the left panel will be covered from top to bottom and then the right panel, but it is fine.
1607 lines
36 KiB
CSS
1607 lines
36 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;
|
|
}
|
|
|
|
.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;
|
|
|
|
&: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 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;
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
|
|
& 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-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);
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
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: hsl(178deg 100% 40%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.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 var(--color-border-settings-radio-input-parent);
|
|
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: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;
|
|
}
|
|
}
|
|
}
|