/* 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 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.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; }