mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
765 lines
20 KiB
CSS
765 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;
|
|
padding: 15px 0 10px;
|
|
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%);
|
|
/* 8px at 16px / 1em */
|
|
margin-bottom: 0.5em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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)
|
|
);
|
|
}
|
|
}
|
|
}
|