mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 04:53:36 +00:00
34cb0034e1
This commit updates the subscribers and group members table CSS to use fixed layout. This helps in having user pill take the width if available and we can show more characters. Previously the width of name in user pill was set to have a max width of 165px which meant the there was some empty unused space in the rows especially on narrow screens when email column was hidden. Fixes #35157.
1595 lines
35 KiB
CSS
1595 lines
35 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: 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 {
|
|
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;
|
|
}
|
|
}
|
|
}
|