mirror of
https://github.com/zulip/zulip.git
synced 2025-11-07 15:33:30 +00:00
f86a41da4b
Fixes the click targets for the four links in the top left side bar (All messages, Private messages, Mentions and Starred messages). The click target now cover the whole row for these links. Fixes #12449
564 lines
10 KiB
SCSS
564 lines
10 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: $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: 10em;
|
|
}
|
|
|
|
#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 {
|
|
margin: 1px 0px;
|
|
}
|
|
|
|
.narrows_panel li a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#stream_filters li {
|
|
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%;
|
|
}
|
|
|
|
#stream-filters-container .simplebar-content {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#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: 1px;
|
|
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.show-more-topics,
|
|
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 .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;
|
|
}
|
|
|
|
li.show-more-topics a {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.searching-for-more-topics {
|
|
display: none;
|
|
}
|
|
|
|
.searching-for-more-topics img {
|
|
height: 16px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.no-more-topics-found {
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
margin: 2px 0px 0px 6px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.no-more-topics-found {
|
|
display: none;
|
|
}
|
|
|
|
.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;
|
|
}
|