mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
e41fffc43e
We only update the `.private_messages_header` here since unread_counts of `.expanded_private_message` are updated via `pm_list.update_private_messages`. This fixes the bug of PMs in `.expanded_private_message` having the same unread count as `private_messages_header`. Since we rerender the DOM of `.expanded_private_message` every time we update unread count of PMs, we don't need to manually update them here. Also, we always keep them on display since there is no real need to toggle them. They are not visible when they have 0 unread counts via `.zero_count`.
528 lines
10 KiB
CSS
528 lines
10 KiB
CSS
/* The width of the empty space in the sidebar to separate
|
|
content from the edge of the window */
|
|
$far_left_gutter_size: 10px;
|
|
/* This represents the space in the sidebar reserved for symbols like
|
|
the #; labels like the the stream name go to the right of this. */
|
|
$left_col_size: 19px;
|
|
/* The full topic indentation includes 4px of indent in addition to
|
|
the above (and another 5px of padding not measured here) */
|
|
$topic_indent: calc($far_left_gutter_size + $left_col_size + 4px);
|
|
|
|
#left-sidebar {
|
|
#user-list {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
.hashtag {
|
|
&:empty {
|
|
&::after {
|
|
content: "#";
|
|
line-height: 0;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stream-privacy {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
min-width: $left_col_size;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Ideally we'd handle hashtags using an <i> and just have a single rule here. */
|
|
.stream-privacy span.hashtag,
|
|
#left-sidebar .filter-icon i {
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.pm_left_col {
|
|
min-width: $left_col_size;
|
|
}
|
|
|
|
#stream_filters,
|
|
#global_filters {
|
|
font-size: 14px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
li.show-more-topics {
|
|
a {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
#streams_inline_cog,
|
|
#streams_filter_icon {
|
|
float: right;
|
|
opacity: 0.5;
|
|
font-size: 13px;
|
|
margin-top: 3px;
|
|
margin-left: 10px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#streams_inline_cog {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.tooltip {
|
|
max-width: 18em;
|
|
}
|
|
|
|
#stream_filters {
|
|
overflow: visible;
|
|
margin-bottom: 5px;
|
|
margin-right: 12px;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
|
|
li {
|
|
a {
|
|
padding: 1px 0;
|
|
}
|
|
|
|
ul {
|
|
margin-left: 0;
|
|
|
|
&.topic-list li {
|
|
padding-top: 2px;
|
|
padding-right: 0;
|
|
padding-bottom: 2px;
|
|
padding-left: $topic_indent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.subscription_block .unread_count {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.subscription_block {
|
|
padding: 0;
|
|
margin-right: 25px;
|
|
margin-left: $far_left_gutter_size;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.stream-name {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: relative;
|
|
width: 100%;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
&.stream-with-count {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
.inactive_stream {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.narrows_panel {
|
|
margin-bottom: 4px;
|
|
li a {
|
|
margin-top: 1px;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#private-container,
|
|
#stream-filters-container {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#private-container {
|
|
max-height: 200px;
|
|
}
|
|
|
|
:not(.active-sub-filter) {
|
|
&.top_left_row:hover,
|
|
&.bottom_left_row:hover,
|
|
&#stream_filters li.highlighted_stream {
|
|
background-color: hsla(120, 12.3%, 71.4%, 0.38);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
#add-stream-link {
|
|
text-decoration: none;
|
|
margin-left: 10px;
|
|
i {
|
|
min-width: 19px;
|
|
text-align: center;
|
|
&::before {
|
|
padding-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.filters {
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
li.muted_topic,
|
|
li.out_of_home_view {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
li.out_of_home_view {
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
li.muted_topic {
|
|
/* If stream is muted, this resets opacity of muted topics in muted
|
|
stream to 1; since opacity is multiplied down through child
|
|
elements, this avoids an unreadable opacity of 0.25^2. */
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.active-filter,
|
|
li.active-sub-filter {
|
|
font-weight: 600 !important;
|
|
background-color: hsl(202, 56%, 91%);
|
|
position: relative;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#global_filters {
|
|
margin-bottom: 16px;
|
|
|
|
.filter-icon {
|
|
display: inline-block;
|
|
min-width: $left_col_size;
|
|
text-align: center;
|
|
}
|
|
|
|
.top_left_row .unread_count {
|
|
margin-right: 20px;
|
|
margin-top: 2px;
|
|
display: none;
|
|
}
|
|
|
|
.top_left_starred_messages .unread_count {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
border: 0.5px solid hsl(105, 2%, 50%);
|
|
/* The border takes up space, so we need to
|
|
subtract 1px from the usual 2px margin-top */
|
|
margin-top: 1px !important;
|
|
}
|
|
|
|
.expanded_private_message .unread_count {
|
|
/* This margin accounts for the fact that the private messages
|
|
container gets a few pixels taller when expanded */
|
|
margin: 0;
|
|
display: inline;
|
|
}
|
|
|
|
i {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
li.top_left_all_messages,
|
|
.private_messages_header,
|
|
li.top_left_mentions,
|
|
li.top_left_starred_messages,
|
|
li.top_left_recent_topics {
|
|
position: relative;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
|
|
a {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.top_left_row {
|
|
padding-left: $far_left_gutter_size;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.top_left_row,
|
|
.bottom_left_row,
|
|
.top_left_private_messages {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.conversation-partners {
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.top_left_all_messages i.fa-align-left {
|
|
position: relative;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.top_left_private_messages i.fa-envelope {
|
|
position: relative;
|
|
top: -1px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.top_left_mentions i.fa-at,
|
|
.top_left_starred_messages i.fa-star {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.topic-box {
|
|
padding-left: 5px;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.conversation-partners,
|
|
.topic-name {
|
|
display: block;
|
|
width: calc(100% - 5px);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.topic-name {
|
|
/* TODO: We should figure out how to remove this without changing the spacing */
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/*
|
|
All of our left sidebar handlers use absolute
|
|
positioning. We should fix that.
|
|
*/
|
|
.all-messages-sidebar-menu-icon,
|
|
.stream-sidebar-menu-icon,
|
|
.starred-messages-sidebar-menu-icon,
|
|
.topic-sidebar-menu-icon {
|
|
position: absolute;
|
|
display: none;
|
|
right: 10px;
|
|
|
|
i {
|
|
padding-right: 0.25em;
|
|
display: inline-block;
|
|
width: 13px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/*
|
|
If you hover directly over the ellipsis itself,
|
|
show it in black.
|
|
*/
|
|
|
|
&:hover {
|
|
color: hsl(0, 0%, 0%) !important;
|
|
}
|
|
|
|
/*
|
|
Hover does not work for touch-based devices like mobile phones.
|
|
Hence the the icons does not appear, making the user unaware of its
|
|
presence on such devices. The following media property displays the
|
|
icon by default for such behaviour.
|
|
*/
|
|
|
|
@media (hover: none) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/*
|
|
The All messages and stream ellipsis-v (vertical 3 dots) are
|
|
pretty similar.
|
|
*/
|
|
.all-messages-sidebar-menu-icon,
|
|
.starred-messages-sidebar-menu-icon,
|
|
.stream-sidebar-menu-icon {
|
|
top: 1px;
|
|
right: 0;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
padding: 0 6px 0 6px;
|
|
}
|
|
|
|
/*
|
|
For topic ellipsis-v(vertical 3 dots) we use a slightly smaller
|
|
font to show they're "lower" in the hierarchy,
|
|
which also affects it positioning.
|
|
*/
|
|
.topic-sidebar-menu-icon {
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
padding: 1px 6px 0 6px;
|
|
}
|
|
|
|
/*
|
|
When you hover over list items, we hover
|
|
the relevant ellipsis-v(vertical 3 dots) in light gray.
|
|
*/
|
|
li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
|
|
li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,
|
|
#stream_filters li:hover .stream-sidebar-menu-icon,
|
|
li.topic-list-item:hover .topic-sidebar-menu-icon {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: hsl(0, 0%, 53%);
|
|
}
|
|
|
|
ul.topic-list {
|
|
list-style-type: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
ul.expanded_private_messages {
|
|
list-style-type: none;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
margin-left: 0;
|
|
padding-bottom: 2px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
li.topic-list-item {
|
|
position: relative;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
li.expanded_private_message {
|
|
position: relative;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
|
|
a {
|
|
margin: 1px 0;
|
|
}
|
|
}
|
|
|
|
.show-all-streams {
|
|
a {
|
|
color: hsl(0, 0%, 20%);
|
|
}
|
|
|
|
.fa-chevron-left {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.pm-box,
|
|
.topic-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pm-box {
|
|
margin-right: 20px;
|
|
align-items: center;
|
|
|
|
.user_circle {
|
|
min-width: 8px;
|
|
height: 8px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 2px;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zero-pm-unreads .pm-box,
|
|
.zero-topic-unreads .more-topics-box,
|
|
.zero-topic-unreads .topic-box {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.zoom-out {
|
|
#topics_header {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#topics_header {
|
|
margin-right: 10px;
|
|
color: hsl(0, 0%, 43%);
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
i {
|
|
margin: 0 5px 0 10px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#streams_header {
|
|
margin-right: 0;
|
|
padding-left: $far_left_gutter_size;
|
|
cursor: pointer;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.zero_count {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.searching-for-more-topics img {
|
|
height: 16px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.zoom-in {
|
|
.show-more-topics {
|
|
display: none;
|
|
}
|
|
.zoom-in-hide {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
li.top_left_all_messages a,
|
|
li.top_left_private_messages a,
|
|
li.top_left_mentions a,
|
|
li.top_left_starred_messages a {
|
|
display: block;
|
|
}
|