mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 05:23:35 +00:00
f0e18b3b3e
We avoid complicated code to update unread counts by just using vdom.js. One small change here is that if click on "more topics", we replace it with the spinner instead of putting the spinner after it. This saves us a redraw under the new scheme.
544 lines
9.9 KiB
SCSS
544 lines
9.9 KiB
SCSS
/* 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 #group-pm-list {
|
|
display: none;
|
|
}
|
|
|
|
.hashtag:empty::after {
|
|
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;
|
|
}
|
|
|
|
li.show-more-topics {
|
|
a {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
#left-sidebar #user-list,
|
|
#left-sidebar #group-pm-list {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
#streams_inline_cog,
|
|
#streams_filter_icon {
|
|
float: right;
|
|
opacity: 0.50;
|
|
font-size: 13px;
|
|
margin-top: 3px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#streams_inline_cog:hover,
|
|
#streams_filter_icon:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#streams_header {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
#streams_inline_cog {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.hashtag:empty::after {
|
|
content: "#";
|
|
line-height: 0;
|
|
}
|
|
|
|
.tooltip {
|
|
max-width: 18em;
|
|
}
|
|
|
|
#stream_filters {
|
|
overflow: visible;
|
|
/* The -1px here prevents the scrollbar from going above the top of the container */
|
|
margin-top: -1px;
|
|
margin-bottom: 10px;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.narrows_panel {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.narrows_panel li a {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.narrows_panel li a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#stream_filters li a {
|
|
padding: 1px 0px;
|
|
}
|
|
|
|
#stream_filters li ul {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
#stream_filters li ul.topic-list li {
|
|
padding-top: 2px;
|
|
padding-right: 0px;
|
|
padding-bottom: 2px;
|
|
padding-left: $topic_indent;
|
|
}
|
|
|
|
#private-container,
|
|
#stream-filters-container {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#private-container {
|
|
max-height: 200px;
|
|
}
|
|
|
|
.top_left_row:hover,
|
|
.bottom_left_row:hover,
|
|
#stream_filters li.highlighted_stream {
|
|
background-color: hsl(93, 18%, 82%);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#stream_filters li.active-sub-filter:hover {
|
|
background-color: hsl(120, 11%, 82%);
|
|
}
|
|
|
|
#add-stream-link {
|
|
text-decoration: none;
|
|
margin-left: 10px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
#add-stream-link i {
|
|
min-width: 19px;
|
|
text-align: center;
|
|
}
|
|
|
|
#add-stream-link i::before {
|
|
padding-right: 3px;
|
|
}
|
|
|
|
ul.filters {
|
|
list-style-type: none;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
ul.filters a {
|
|
color: inherit;
|
|
}
|
|
|
|
ul.filters hr {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
li.active-filter,
|
|
li.active-sub-filter {
|
|
font-weight: 600 !important;
|
|
background-color: hsl(202, 56%, 91%);
|
|
position: relative;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#global_filters .filter-icon {
|
|
display: inline-block;
|
|
min-width: $left_col_size;
|
|
text-align: center;
|
|
}
|
|
|
|
li.top_left_all_messages,
|
|
.private_messages_header,
|
|
li.top_left_mentions,
|
|
li.top_left_starred_messages {
|
|
position: relative;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.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-home {
|
|
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;
|
|
}
|
|
|
|
/* We are mostly consistent in how we style
|
|
unread counts, except for starred messages.
|
|
This is the common section.
|
|
*/
|
|
.top_left_all_messages .count,
|
|
.top_left_private_messages .count,
|
|
.top_left_starred_messages .count,
|
|
.top_left_mentions .count,
|
|
#stream_filters .count,
|
|
.topic-unread-count,
|
|
.private_message_count {
|
|
float: right;
|
|
padding: 0 4px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Starred messaged counts aren't really unread
|
|
counts, so we style them differently.
|
|
*/
|
|
.top_left_starred_messages .count {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
padding: 2px 1px 0px 3px;
|
|
border-color: hsl(105, 2%, 50%);
|
|
}
|
|
|
|
/* These are true "unread" counts. */
|
|
.top_left_all_messages .count,
|
|
.top_left_private_messages .count,
|
|
.top_left_mentions .count,
|
|
#stream_filters .count,
|
|
.topic-unread-count,
|
|
.private_message_count {
|
|
background-color: hsl(105, 2%, 50%);
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
#global_filters .count {
|
|
margin-right: 20px;
|
|
margin-top: 2px;
|
|
display: none;
|
|
}
|
|
|
|
#stream_filters .count {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.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-messages-arrow i,
|
|
.stream-sidebar-arrow i,
|
|
.starred-messages-sidebar-arrow i,
|
|
.topic-sidebar-arrow i {
|
|
padding-right: 0.25em;
|
|
display: inline-block;
|
|
width: 13px;
|
|
}
|
|
|
|
/*
|
|
All of our left sidebar handlers use absolute
|
|
positioning. We should fix that.
|
|
*/
|
|
.all-messages-arrow,
|
|
.stream-sidebar-arrow,
|
|
.starred-messages-sidebar-arrow,
|
|
.topic-sidebar-arrow {
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
The All Messages and Stream chevrons are
|
|
pretty similar.
|
|
*/
|
|
.all-messages-arrow,
|
|
.starred-messages-sidebar-arrow,
|
|
.stream-sidebar-arrow {
|
|
top: 3px;
|
|
right: 10px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/*
|
|
For topic chevrons we use a slightly smaller
|
|
font to show they're "lower" in the hierarchy,
|
|
which also affects it positioning.
|
|
*/
|
|
.topic-sidebar-arrow {
|
|
top: 1px;
|
|
right: 10px;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
/*
|
|
When you hover over list items, we hover
|
|
the relevant chevrons in light gray.
|
|
*/
|
|
li.top_left_all_messages:hover .all-messages-arrow,
|
|
li.top_left_starred_messages:hover .starred-messages-sidebar-arrow,
|
|
#stream_filters li:hover .stream-sidebar-arrow,
|
|
li.topic-list-item:hover .topic-sidebar-arrow {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: hsl(0, 0%, 53%);
|
|
}
|
|
|
|
/*
|
|
If you hover directly over the chevron itself,
|
|
show it in black.
|
|
*/
|
|
.starred-messages-sidebar-arrow:hover,
|
|
.all-messages-arrow:hover,
|
|
.stream-sidebar-arrow:hover,
|
|
.topic-sidebar-arrow:hover {
|
|
color: hsl(0, 0%, 0%) !important;
|
|
}
|
|
|
|
ul.filters li.muted_topic,
|
|
ul.filters li.out_of_home_view {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
ul.filters li.out_of_home_view:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
ul.filters li.out_of_home_view 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;
|
|
}
|
|
|
|
#stream_filters .subscription_block {
|
|
padding: 0px;
|
|
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;
|
|
}
|
|
|
|
#stream_filters .subscription_block::after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
#stream_filters .subscription_block .stream-name {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: relative;
|
|
width: 100%;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
#stream_filters .subscription_block.stream-with-count {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
ul.topic-list {
|
|
list-style-type: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
ul.expanded_private_messages {
|
|
list-style-type: none;
|
|
font-weight: 300;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
margin-left: 0px;
|
|
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;
|
|
}
|
|
|
|
li.expanded_private_message a {
|
|
margin: 1px 0px;
|
|
}
|
|
|
|
.show-all-streams a {
|
|
color: hsl(0, 0%, 20%);
|
|
}
|
|
|
|
.pm-box,
|
|
.topic-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pm-box {
|
|
margin-right: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.pm-box .user_circle {
|
|
min-width: 8px;
|
|
height: 8px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
margin-left: 2px;
|
|
position: relative;
|
|
top: 0px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#global_filters {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
#global_filters i {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
#topics_header {
|
|
margin-right: 10px;
|
|
color: hsl(0, 0%, 43%);
|
|
}
|
|
|
|
#topics_header a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#topics_header a i {
|
|
margin: 0 5px 0 10px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
#streams_header {
|
|
margin-right: 0px;
|
|
padding-left: $far_left_gutter_size;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#stream_filters .inactive_stream {
|
|
opacity: .5;
|
|
}
|
|
|
|
.zero_count {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.searching-for-more-topics img {
|
|
height: 16px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.zoom-in .show-more-topics {
|
|
display: none;
|
|
}
|
|
|
|
.zoom-in .zoom-in-hide {
|
|
display: none;
|
|
}
|
|
|
|
.show-all-streams .fa-chevron-left {
|
|
text-decoration: 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;
|
|
}
|