mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
f2a11c5858
If all channels in a folder are muted, then this margin is present in "Standard view", without there being any folder present. Fixed by only applying margin if the folder has any header or rows that are not hidden by filters. This is an alternative fix to #35962 which was reverted in #36123.
770 lines
20 KiB
CSS
770 lines
20 KiB
CSS
.inbox-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-background-inbox);
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
|
|
#inbox-pane {
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: var(--navbar-fixed-height) 25px 0;
|
|
|
|
a {
|
|
color: var(--color-text-message-header);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.unread_count {
|
|
opacity: 1;
|
|
outline: 0 solid var(--color-background-unread-counter);
|
|
transition: outline-width 0.1s ease;
|
|
|
|
&:hover {
|
|
outline-width: 1.5px;
|
|
}
|
|
}
|
|
|
|
.search_group {
|
|
position: sticky;
|
|
top: var(--navbar-fixed-height);
|
|
background: var(--color-background-inbox);
|
|
display: flex;
|
|
/* This padding-top value aligns the inbox filters
|
|
with the filters in the left and right sidebars. */
|
|
padding: 10px 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.button-inbox-selected {
|
|
background-color: var(--color-background-button-inbox-selected);
|
|
}
|
|
|
|
#inbox-filters {
|
|
.inbox-search-wrapper {
|
|
flex-grow: 1;
|
|
max-width: var(--width-inbox-search);
|
|
}
|
|
}
|
|
|
|
.inbox-empty-text {
|
|
display: none;
|
|
}
|
|
|
|
#inbox-loading-indicator {
|
|
margin-top: 20px;
|
|
margin-bottom: var(--max-unmaximized-compose-height);
|
|
|
|
.searching-for-more-topics {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#inbox-list {
|
|
overflow: hidden;
|
|
/* search box left border (1px) + search box right border (1px)
|
|
+ dropdown left border (1px) + dropdown right border (1px) = 4px at 16px em */
|
|
max-width: calc(
|
|
var(--width-inbox-search) +
|
|
var(--width-inbox-filters-dropdown) + 0.25em
|
|
);
|
|
|
|
.inbox-channel-topic-list {
|
|
margin: 0;
|
|
}
|
|
|
|
.inbox-focus-border {
|
|
display: flex;
|
|
min-height: 1.875em; /* 30px at 16px em */
|
|
border: 2px solid transparent;
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.inbox-header {
|
|
user-select: none;
|
|
display: block;
|
|
height: 1.875em; /* 30px at 16px em */
|
|
|
|
.inbox-focus-border {
|
|
height: 1.875em; /* 30px at 16px em */
|
|
}
|
|
|
|
.inbox-left-part {
|
|
grid-template:
|
|
auto / minmax(auto, min-content)
|
|
auto min-content min-content;
|
|
grid-template-areas: "header_name collapse_button unread_mention_info unread_count";
|
|
}
|
|
|
|
.inbox-header-name {
|
|
grid-area: header_name;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
outline: 0;
|
|
cursor: pointer;
|
|
|
|
.inbox-header-name-text {
|
|
margin: 0;
|
|
padding: 1px 0;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
&:hover {
|
|
.collapsible-button {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fa-lock {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.stream-privacy.filter-icon {
|
|
/* 0 5px at 16px/1em */
|
|
padding: 0 0.3125em;
|
|
margin: 0;
|
|
}
|
|
|
|
.zulip-icon-user {
|
|
position: relative;
|
|
top: -1px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.collapsible-button {
|
|
grid-area: collapse_button;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zulip-icon-chevron-down {
|
|
padding: 0.3125em 0.25em; /* 5px 4px at 16px em */
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.user-circle {
|
|
/* 8.5328px at 16px/1em */
|
|
font-size: 0.5333em;
|
|
/* TODO: Refactor inbox rows to use grid, to avoid the
|
|
min-width here that holds the other rows to similar
|
|
columns. */
|
|
/* 16px at 8.5328px/1em */
|
|
min-width: 1.8751em;
|
|
top: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.zulip-icon-bot,
|
|
.conversation-partners-icon {
|
|
opacity: 0.7;
|
|
/* Required to align DM fullnames in user circle icon */
|
|
/* 2px at 16px / 1em */
|
|
margin-left: 0.125em;
|
|
}
|
|
|
|
.user_block .zulip-icon {
|
|
/* 0 5px at 16px/1em */
|
|
padding: 0 0.3125em;
|
|
|
|
&.user-circle {
|
|
/* 5px at 16px / ~ 0.5em */
|
|
padding: 0 0.586em;
|
|
}
|
|
}
|
|
|
|
.inbox-row {
|
|
user-select: none;
|
|
display: block;
|
|
background-color: var(--color-background-inbox-row);
|
|
|
|
&:hover {
|
|
background: var(--color-background-inbox-row-hover);
|
|
}
|
|
|
|
.inbox-left-part {
|
|
grid-template:
|
|
auto / min-content minmax(0, 1fr)
|
|
min-content min-content;
|
|
grid-template-areas: "match_topic_and_dm_start recipient_info unread_mention_info unread_count";
|
|
}
|
|
|
|
.inbox-topic-container .user-circle {
|
|
grid-area: match_topic_and_dm_start;
|
|
}
|
|
|
|
.recipients_info,
|
|
.inbox-topic-name {
|
|
grid-area: recipient_info;
|
|
}
|
|
}
|
|
|
|
.channel-visibility-policy-indicator,
|
|
.visibility-policy-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 3px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.unread-count-focus-outline {
|
|
/* Because the inbox view font-size will
|
|
never be smaller than the em-equivalent
|
|
of 15px, we restate the base font-size
|
|
here so that unreads match others in
|
|
the UI at legacy size (14px). */
|
|
font-size: var(--base-font-size-px);
|
|
grid-area: unread_count;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 3px;
|
|
padding: 0 5px;
|
|
/* Stretch to the row to keep unread
|
|
count from affecting overall row
|
|
size as test scales up. */
|
|
align-self: stretch;
|
|
}
|
|
|
|
.unread_mention_info {
|
|
grid-area: unread_mention_info;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.stream-privacy {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 4px;
|
|
margin-left: 17px;
|
|
|
|
.zulip-icon {
|
|
line-height: 0.875em; /* 14px at 16px em */
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
}
|
|
|
|
.inbox-topic-name {
|
|
/* 16px channel icon width + 10px padding */
|
|
padding-left: 1.625em; /* 26x at 16px em */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
& a {
|
|
padding: 1px 0;
|
|
white-space: pre;
|
|
}
|
|
}
|
|
|
|
.inbox-left-part-wrapper {
|
|
display: flex;
|
|
width: 80%;
|
|
}
|
|
|
|
#inbox-direct-messages-container {
|
|
/* Since a direct message row can have span to multiple lines,
|
|
having an underline focus will not work very well.
|
|
*/
|
|
.inbox-row:focus-visible {
|
|
box-shadow: inset 0 0 0 2px var(--color-outline-focus);
|
|
}
|
|
}
|
|
|
|
.inbox-left-part {
|
|
width: 100%;
|
|
display: grid;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.inbox-group-or-bot-dm {
|
|
position: relative;
|
|
left: -3px;
|
|
|
|
/* We don't display status emoji in group DMs,
|
|
so prepare an ordinary inline layout... */
|
|
.user-status-microlayout {
|
|
display: inline;
|
|
white-space: collapse;
|
|
}
|
|
/* ...and hide the status emoji. */
|
|
.status-emoji {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.recipients_info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 10px;
|
|
grid-area: recipient_info;
|
|
|
|
.user_block {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#inbox-collapsed-note {
|
|
display: none;
|
|
overflow: hidden;
|
|
max-width: calc(
|
|
var(--width-inbox-search) +
|
|
var(--width-inbox-filters-dropdown) + 0.25em
|
|
);
|
|
|
|
.inbox-collapsed-note-and-button-wrapper {
|
|
margin-top: 3px;
|
|
padding-left: 8px;
|
|
|
|
.inbox-collpased-note-span {
|
|
font-size: 1em;
|
|
}
|
|
|
|
#inbox-expand-all-button {
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inbox-right-part-wrapper {
|
|
flex-grow: 1;
|
|
|
|
.inbox-right-part {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-grow: 1;
|
|
|
|
> .inbox-action-button:first-child {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inbox-row,
|
|
.inbox-header {
|
|
&:hover {
|
|
.inbox-row-visibility-policy-inherit,
|
|
.inbox-action-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inbox-row-visibility-policy-inherit {
|
|
opacity: 0;
|
|
|
|
&.visibility-policy-popover-visible {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.inbox-action-button {
|
|
display: flex;
|
|
border-radius: 3px;
|
|
outline: none;
|
|
opacity: 0;
|
|
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
|
|
& i {
|
|
padding: 0.3125em; /* 5px at 16px em */
|
|
opacity: 0.3;
|
|
color: var(--color-vdots-hover);
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.inbox-header-stream-archived {
|
|
color: var(--color-text-message-header-archived);
|
|
}
|
|
}
|
|
|
|
#inbox-view {
|
|
display: none;
|
|
position: relative;
|
|
|
|
.inbox-folder {
|
|
margin-bottom: 1px;
|
|
background-color: transparent;
|
|
|
|
.inbox-header-name-text,
|
|
.unread_mention_info {
|
|
color: var(--color-folder-header);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.inbox-header-name-text {
|
|
font-style: normal;
|
|
font-weight: var(--font-weight-sidebar-heading);
|
|
line-height: 112.5%;
|
|
letter-spacing: var(--letter-spacing-sidebar-heading);
|
|
text-transform: uppercase;
|
|
outline: none;
|
|
/* 16px at 16px / 1em */
|
|
font-size: 1em;
|
|
/* Align the folder title with the channel privacy icons; 5px at 16px/1em.
|
|
|
|
TODO: Reduce the depth of selectors in this file,
|
|
so that the use of !important becomes unnecessary
|
|
here. */
|
|
padding-left: 0.3125em !important;
|
|
}
|
|
|
|
&:hover {
|
|
.inbox-header-name-text,
|
|
.collapsible-button .zulip-icon,
|
|
.unread_mention_info,
|
|
.unread_count {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden_by_filters {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.inbox-container #inbox-pane #inbox-empty-without-search {
|
|
margin-top: 70px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.inbox-empty-illustration {
|
|
width: 54px;
|
|
height: 54px;
|
|
margin-bottom: 16px;
|
|
background-color: var(--color-background-inbox-no-unreads-illustration);
|
|
mask: url("../images/empty-view-illustrations/inbox-done.svg") no-repeat
|
|
center;
|
|
}
|
|
|
|
.inbox-empty-title {
|
|
/* Matches the font-size used for .empty-list-message */
|
|
font-size: 1.5em;
|
|
color: var(--color-background-inbox-no-unreads-illustration);
|
|
}
|
|
|
|
.inbox-empty-action {
|
|
font-size: 1.3em;
|
|
padding-top: 0.5em;
|
|
}
|
|
|
|
.inbox-container #inbox-pane .inbox-empty-action-link {
|
|
color: var(--color-text-url);
|
|
|
|
&:hover {
|
|
color: var(--color-text-url-hover);
|
|
}
|
|
}
|
|
|
|
#inbox-filter_widget {
|
|
margin-right: 0.3571em; /* 5px / 14px em */
|
|
max-width: var(--width-inbox-filters-dropdown);
|
|
border: 1px solid var(--color-border-inbox-search);
|
|
background-color: var(--color-background-inbox-search);
|
|
gap: 0.3571em; /* 5px / 14px em */
|
|
/* 1.5px at 16px/1em and legacy 6px at 14px/1em. */
|
|
padding: 0.0937em 0.4285em;
|
|
|
|
&:hover {
|
|
background-color: var(--color-background-inbox-search-hover);
|
|
border: 1px solid var(--color-border-inbox-search-hover);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
#recent-view-filter_widget .dropdown_widget_value,
|
|
#inbox-filter_widget .dropdown_widget_value {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
#recent-view-filter_widget .zulip-icon-chevron-down,
|
|
#inbox-filter_widget .zulip-icon-chevron-down {
|
|
color: var(--color-icons-inbox);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dropdown-list-item-common-styles .dropdown-list-text-selected {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.recent-view-filter-dropdown-list-container .dropdown-list-wrapper,
|
|
.inbox-filter-dropdown-list-container .dropdown-list-wrapper {
|
|
/* We want these dropdowns to open to fit their
|
|
contents, which differ based on the language
|
|
in use. */
|
|
width: 100%;
|
|
/* We also don't want to set a min-width, again
|
|
so that the content is in charge. This pushes
|
|
back against more generic styles. */
|
|
min-width: unset;
|
|
}
|
|
|
|
.recent-view-filter-dropdown-list-container
|
|
.dropdown-list
|
|
.dropdown-list-item-common-styles,
|
|
.inbox-filter-dropdown-list-container
|
|
.dropdown-list
|
|
.dropdown-list-item-common-styles {
|
|
/* Parallel to the `width: 100%` set on
|
|
.dropdown-list-wrapper above, we set
|
|
min-width here to max-content so that
|
|
the box opens to accommodate different
|
|
lengths of text--and to ensure that
|
|
hovered/selectable areas look correct. */
|
|
min-width: max-content;
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* For columnar flex items, we need
|
|
to make set alignment to the start
|
|
of the flex container. This pushes
|
|
back against non-columnar flexboxes
|
|
that require centered alignment. */
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.recent-view-filter-dropdown-list-container .dropdown-list-item-name,
|
|
.inbox-filter-dropdown-list-container .dropdown-list-item-name {
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.recent-view-filter-dropdown-list-container .dropdown-list-item-description,
|
|
.inbox-filter-dropdown-list-container .dropdown-list-item-description {
|
|
white-space: nowrap;
|
|
font-weight: 400;
|
|
font-size: 0.9285em; /* 13px at 14px em */
|
|
opacity: 0.8;
|
|
padding: 0;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.inbox-container #inbox-pane .inbox-folder .unread_count {
|
|
transition: none;
|
|
cursor: default;
|
|
|
|
&:hover {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.inbox-container #inbox-pane .inbox-folder:not(#inbox-dm-header) .unread_count {
|
|
display: none;
|
|
}
|
|
|
|
#inbox-pane #inbox-list .collapsible-button {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#inbox-pane #inbox-list .inbox-collapsed-state .collapsible-button {
|
|
visibility: visible;
|
|
|
|
.zulip-icon-chevron-down {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.folder-row-chevron {
|
|
color: var(--color-folder-header);
|
|
}
|
|
|
|
.channel-row-chevron {
|
|
color: var(--color-inbox-row-chevron);
|
|
}
|
|
|
|
.inbox-collapsed-state {
|
|
.folder-row-chevron,
|
|
.channel-row-chevron {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.inbox-container #inbox-pane .inbox-folder .unread_mention_info {
|
|
display: none;
|
|
}
|
|
|
|
.inbox-container
|
|
#inbox-pane
|
|
.inbox-folder.inbox-collapsed-state
|
|
.unread_mention_info,
|
|
.inbox-container
|
|
#inbox-pane
|
|
.inbox-folder.inbox-collapsed-state:not(#inbox-dm-header)
|
|
.unread_count {
|
|
display: inline;
|
|
}
|
|
|
|
.inbox-folder-components {
|
|
border-radius: 5px;
|
|
border: 0.5px solid hsl(0deg 0% 0% / 13%);
|
|
overflow: hidden;
|
|
|
|
&:has(.inbox-row:not(.hidden_by_filters)),
|
|
&:has(.inbox-header:not(.hidden_by_filters)) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
|
|
.inbox-folder.inbox-collapsed-state,
|
|
.inbox-folder.hidden_by_filters {
|
|
+ .inbox-folder-components {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
#inbox-pane #inbox-list .inbox-collapsed-state {
|
|
+ .inbox-folder-components,
|
|
+ .inbox-topic-container {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#inbox-pane
|
|
#inbox-list
|
|
.inbox-streams-container
|
|
.inbox-header
|
|
.inbox-header-name {
|
|
/* 5px at 16px / 1em */
|
|
padding: 1px 0.3125em 1px 0;
|
|
}
|
|
|
|
#inbox-view.no-visible-focus-outlines
|
|
.inbox-container
|
|
#inbox-pane
|
|
[tabindex="0"] {
|
|
/* Remove default focus outline from elements. */
|
|
&:focus-visible {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane {
|
|
/* Only show focus outlines when user uses keyboard. */
|
|
#inbox-filter_widget {
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-outline-focus);
|
|
}
|
|
}
|
|
|
|
.inbox-header {
|
|
&:focus-visible {
|
|
.inbox-focus-border {
|
|
border-color: var(--color-outline-focus);
|
|
}
|
|
|
|
.collapsible-button > .zulip-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.collapsible-button {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inbox-row {
|
|
&:focus-visible {
|
|
.inbox-focus-border {
|
|
border: 2px solid var(--color-outline-focus);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
outline: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.channel-visibility-policy-indicator,
|
|
.visibility-policy-indicator {
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-outline-focus);
|
|
}
|
|
}
|
|
|
|
.inbox-action-button {
|
|
&:focus-visible {
|
|
box-shadow: 0 0 0 2px var(--color-outline-focus);
|
|
}
|
|
}
|
|
|
|
.unread-count-focus-outline {
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-outline-focus);
|
|
}
|
|
}
|
|
|
|
.inbox-row,
|
|
.inbox-header {
|
|
/* Don't show the icons unless user is visibly focused
|
|
on the element or one of the elements within it. */
|
|
&:focus-within:not(:focus),
|
|
&:focus-visible {
|
|
.channel-visibility-policy-indicator,
|
|
.inbox-row-visibility-policy-inherit,
|
|
.inbox-action-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inbox-folder {
|
|
&:focus-visible {
|
|
.inbox-header-name-text,
|
|
.collapsible-button .zulip-icon,
|
|
.unread_mention_info,
|
|
.unread_count {
|
|
opacity: 1;
|
|
}
|
|
|
|
background: light-dark(
|
|
transparent,
|
|
var(--color-background-hover-popover-menu)
|
|
);
|
|
}
|
|
}
|
|
}
|