mirror of
https://github.com/zulip/zulip.git
synced 2026-07-06 21:18:58 +08:00
fd01ebdc5d
This expresses the colors for vdots icons in just three variations, all as CSS variables. The colors are all derived from the existing design, and the dots colors in the streams/topics area was used as as reference. The only visual change here, then, is to the global filters area, whose vdots were the outliers prior to this change. The three variations are: 1. hint: for touchscreens where a :hover state is not available 2. visible: for all screens when a parent element is highlighted 3. hover: for when the vdots themselves are hovered The selectors have been streamlined to use the .sidebar-menu-icon utility class, and the hover-within-a-hover color on vdots is expressed more directly, eliminating the need for selector-specificity busting via !important. Fixes: #20600
930 lines
19 KiB
CSS
930 lines
19 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);
|
|
$topic_resolve_width: 13px;
|
|
/* Space between section in the left sidebar. */
|
|
$sections_vertical_gutter: 8px;
|
|
$bottom_scrolling_buffer: 25px;
|
|
/* space direct message / stream / topic names from unread counters
|
|
and @ mention indicators by 3px on the right */
|
|
$before_unread_count_padding: 3px;
|
|
|
|
.hashtag {
|
|
&:empty {
|
|
&::after {
|
|
content: "#";
|
|
line-height: 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stream-privacy {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
min-width: $left_col_size;
|
|
text-align: center;
|
|
|
|
.zulip-icon.zulip-icon-globe {
|
|
font-size: 12px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.zulip-icon.zulip-icon-hashtag {
|
|
font-size: 13px;
|
|
position: relative;
|
|
top: 1.5px;
|
|
}
|
|
|
|
.zulip-icon.zulip-icon-lock {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
#left-sidebar .filter-icon i {
|
|
padding-right: 3px;
|
|
|
|
&.zulip-icon-lock {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
#global_filters .filter-icon i {
|
|
color: var(--color-global-filter-icon);
|
|
}
|
|
|
|
#stream_filters,
|
|
#global_filters {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
li.show-more-topics {
|
|
& a {
|
|
font-size: 12px;
|
|
margin-left: $topic_resolve_width;
|
|
}
|
|
}
|
|
|
|
#streams_inline_icon,
|
|
.streams_filter_icon {
|
|
float: right;
|
|
opacity: 0.5;
|
|
padding: 3px;
|
|
margin-left: 4px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.streams_inline_icon_wrapper {
|
|
float: right;
|
|
}
|
|
|
|
.streams_filter_icon.web_public {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#streams_inline_icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.tooltip {
|
|
max-width: 18em;
|
|
}
|
|
|
|
#stream_filters {
|
|
overflow: visible;
|
|
margin-bottom: 5px;
|
|
margin-right: 12px;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
|
|
.input-append.topic_search_section {
|
|
padding: 2px 0 2px calc($topic_indent - $topic_resolve_width);
|
|
margin-bottom: 3px;
|
|
margin-left: 3px;
|
|
|
|
& input {
|
|
width: calc(100% - 50px);
|
|
}
|
|
|
|
.clear_search_button {
|
|
margin-left: -1px;
|
|
}
|
|
}
|
|
|
|
& li {
|
|
& a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
& ul {
|
|
margin-left: 0;
|
|
|
|
&.topic-list li {
|
|
padding: 2px 0 2px calc($topic_indent - $topic_resolve_width);
|
|
|
|
&.filter-topics {
|
|
padding-bottom: 0;
|
|
position: sticky;
|
|
top: calc($sections_vertical_gutter + 43px);
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.subscription_block {
|
|
margin-right: 25px;
|
|
margin-left: $far_left_gutter_size;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
& .unread_count {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
& .masked_unread_count {
|
|
/* TODO: In theory this should be 19, to make it center aligned with
|
|
unread_count span which has a padding of 4px
|
|
horizontally in addition to 15px margin. But 18px looks
|
|
better centered. */
|
|
margin-right: 18px;
|
|
}
|
|
|
|
&.stream-with-count {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
.stream-with-count.hide_unread_counts {
|
|
.masked_unread_count {
|
|
display: inline;
|
|
}
|
|
|
|
.unread_count {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.narrow-filter
|
|
> .bottom_left_row:hover
|
|
> .stream-with-count.hide_unread_counts {
|
|
.masked_unread_count {
|
|
display: none;
|
|
}
|
|
|
|
.unread_count {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.stream-expanded {
|
|
.stream-with-count.hide_unread_counts {
|
|
.masked_unread_count {
|
|
display: none;
|
|
}
|
|
|
|
.unread_count {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-unmuted-unreads.hide_unread_counts {
|
|
.masked_unread_count {
|
|
display: none;
|
|
}
|
|
|
|
.unread_count {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.inactive_stream:not(.active-filter) {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.toggle_stream_mute {
|
|
margin-right: 3px;
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.narrows_panel {
|
|
& li a {
|
|
margin-top: 1px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#left_sidebar_scroll_container {
|
|
outline: none;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.private_messages_container {
|
|
margin-right: 16px;
|
|
margin-left: 6px;
|
|
z-index: 1;
|
|
|
|
#toggle_private_messages_section_icon {
|
|
opacity: 0.7;
|
|
margin-left: -15px;
|
|
min-width: 12px;
|
|
|
|
&.fa-caret-right {
|
|
position: relative;
|
|
left: 3px;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#private_messages_section_header {
|
|
cursor: pointer;
|
|
padding: 0 10px 1px 6px;
|
|
white-space: nowrap;
|
|
|
|
#show_all_private_messages {
|
|
right: 0;
|
|
float: right;
|
|
position: absolute;
|
|
opacity: 0.7;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
margin-right: 21px;
|
|
margin-top: 1px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.unread_count {
|
|
margin-right: 16px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
& ul.pm-list {
|
|
list-style-type: none;
|
|
font-weight: 400;
|
|
margin-left: 0;
|
|
margin-bottom: 0;
|
|
|
|
& span.fa-group {
|
|
font-size: 90%;
|
|
}
|
|
|
|
& li.pm-list-item {
|
|
position: relative;
|
|
padding: 1px 10px 1px 4px;
|
|
margin-left: 2px;
|
|
|
|
& a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.pm_left_col {
|
|
min-width: $left_col_size;
|
|
|
|
& span:not(.user_circle) {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
& li#show_more_private_messages {
|
|
cursor: pointer;
|
|
padding-right: 26px;
|
|
padding-left: 6px;
|
|
|
|
& a {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.unread_count {
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.active_private_messages_section {
|
|
#private_messages_section,
|
|
#private_messages_list,
|
|
#hide_more_private_messages {
|
|
background-color: hsl(202deg 56% 91%);
|
|
}
|
|
|
|
#private_messages_section {
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
#private_messages_list {
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
|
|
#more_private_messages_sidebar_title {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
:not(.active-sub-filter) {
|
|
&.top_left_row:hover,
|
|
&.bottom_left_row:hover {
|
|
background-color: var(--color-background-hover-narrow-filter);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
#stream_filters .narrow-filter.highlighted_stream {
|
|
&.active-filter > .bottom_left_row {
|
|
background-color: var(--color-background-hover-narrow-filter);
|
|
}
|
|
|
|
&.active-filter .topic-list .bottom_left_row {
|
|
background-color: var(--color-background-active-narrow-filter);
|
|
}
|
|
|
|
.bottom_left_row:not(.active-sub-filter) {
|
|
background-color: var(--color-background-hover-narrow-filter);
|
|
}
|
|
}
|
|
|
|
#login-link-container,
|
|
#subscribe-to-more-streams {
|
|
text-decoration: none;
|
|
margin: 5px auto 5.5px 10px;
|
|
margin-bottom: $bottom_scrolling_buffer;
|
|
|
|
& i {
|
|
min-width: 19px;
|
|
text-align: center;
|
|
|
|
&::before {
|
|
padding-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.filters {
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
color: hsl(0deg 0% 20% / 100%);
|
|
|
|
& a {
|
|
color: inherit;
|
|
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
& hr {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.has-only-muted-unreads {
|
|
.unread_count {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.has-only-muted-mentions .unread_mention_info {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* This is a noop in the current design, because unread counts for
|
|
muted streams have the same opacity, but the logic is here to
|
|
be explicit and because the design may change in the future. */
|
|
.more_topic_unreads_muted_only .unread_count {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
& li.muted_topic,
|
|
li.out_of_home_view {
|
|
color: hsl(0deg 0% 20% / 50%);
|
|
|
|
.has-unmuted-mentions .unread_mention_info {
|
|
color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
.stream-privacy {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
& .unread_count {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
& .masked_unread_count {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.has-unmuted-unreads {
|
|
.unread_count {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
& li.unmuted_or_followed_topic {
|
|
color: var(--color-unmuted-or-followed-topic-list-item);
|
|
|
|
.unread_count {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
& li.out_of_home_view {
|
|
&:hover {
|
|
color: hsla(0deg 0% 20% / 75%);
|
|
|
|
.stream-privacy {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.unread_count {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.has-unmuted-unreads {
|
|
.unread_count {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
& 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 unreadably low opacity. */
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.active-filter,
|
|
li.active-sub-filter {
|
|
font-weight: 600 !important;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
background-color: var(--color-background-active-narrow-filter);
|
|
}
|
|
|
|
#stream_filters .narrow-filter.active-filter {
|
|
.topic-list .filter-topics,
|
|
> .bottom_left_row {
|
|
background-color: var(--color-background-active-narrow-filter);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
#global_filters {
|
|
margin-bottom: $sections_vertical_gutter;
|
|
|
|
.global-filter-container {
|
|
display: flex;
|
|
padding-right: 20px;
|
|
|
|
.global-filter-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.filter-icon {
|
|
display: inline-block;
|
|
min-width: $left_col_size;
|
|
text-align: center;
|
|
}
|
|
|
|
.top_left_row .unread_count {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.top_left_starred_messages .unread_count,
|
|
.top_left_drafts .unread_count,
|
|
.top_left_scheduled_messages .unread_count {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
border: 0.5px solid hsl(105deg 2% 50%);
|
|
/* The border takes up space, so we need to
|
|
subtract 1px from the usual 2px margin-top */
|
|
margin-top: 1px !important;
|
|
}
|
|
|
|
.zulip-icon-inbox {
|
|
font-size: 14px;
|
|
top: 2px;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
li.top_left_all_messages,
|
|
li.top_left_mentions,
|
|
li.top_left_starred_messages,
|
|
li.top_left_drafts,
|
|
li.top_left_inbox,
|
|
li.top_left_recent_view,
|
|
li.top_left_scheduled_messages {
|
|
position: relative;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
|
|
& a {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.top_left_row {
|
|
padding-left: $far_left_gutter_size;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.conversation-partners {
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.top_left_all_messages i.fa-align-left {
|
|
position: relative;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.top_left_mentions i.fa-at,
|
|
.top_left_starred_messages i.fa-star {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.topic-box {
|
|
padding-left: 5px;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.sidebar-topic-check {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: $topic_resolve_width;
|
|
font-size: 15px;
|
|
height: 20px;
|
|
}
|
|
|
|
.conversation-partners,
|
|
.topic-name,
|
|
.stream-name {
|
|
flex: auto;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow-x: hidden;
|
|
overflow-x: clip;
|
|
text-overflow: ellipsis;
|
|
padding: 1px $before_unread_count_padding 1px 0;
|
|
}
|
|
|
|
.topic-name {
|
|
/* TODO: We should figure out how to remove this without changing the spacing */
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.left_sidebar_menu_icon_visible {
|
|
display: block !important;
|
|
}
|
|
|
|
/*
|
|
All of our left sidebar handlers use absolute
|
|
positioning. We should fix that.
|
|
*/
|
|
.top_left_row .sidebar-menu-icon,
|
|
.bottom_left_row .sidebar-menu-icon {
|
|
position: absolute;
|
|
display: none;
|
|
top: 1px;
|
|
right: 0;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
padding: 0 6px;
|
|
|
|
& i {
|
|
padding-right: 0.35em;
|
|
display: inline-block;
|
|
width: 13px;
|
|
font-size: 17px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/*
|
|
If you hover directly over the ellipsis itself,
|
|
show it in black.
|
|
*/
|
|
|
|
&:hover {
|
|
color: var(--color-vdots-hover);
|
|
}
|
|
|
|
/*
|
|
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;
|
|
/* Show dots on touchscreens in a less distracting,
|
|
lighter shade. */
|
|
color: var(--color-vdots-hint);
|
|
}
|
|
}
|
|
|
|
/*
|
|
When you hover over list items, we hover
|
|
the vdots in light gray.
|
|
|
|
The stream icon should always display when
|
|
any topic is hovered, which is why it gets
|
|
a more specific selector here.
|
|
*/
|
|
#stream_filters li:hover .stream-sidebar-menu-icon,
|
|
.top_left_row:hover .sidebar-menu-icon,
|
|
.bottom_left_row:hover .sidebar-menu-icon {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: var(--color-vdots-visible);
|
|
|
|
/*
|
|
If you hover directly over the vdots icon,
|
|
show it in black.
|
|
*/
|
|
&:hover {
|
|
color: var(--color-vdots-hover);
|
|
}
|
|
}
|
|
|
|
/*
|
|
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.
|
|
*/
|
|
.bottom_left_row .topic-sidebar-menu-icon {
|
|
top: 2px;
|
|
right: 0;
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
padding: 1px 6px 0;
|
|
}
|
|
|
|
ul.topic-list {
|
|
list-style-type: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
li.topic-list-item {
|
|
position: relative;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.pm-box,
|
|
.topic-box {
|
|
display: flex;
|
|
padding-top: 1px;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
|
|
.pm-box {
|
|
margin-right: 16px;
|
|
align-items: baseline; /* Sets .user_circle alignment relative to text; standard icons do not participate in flex. */
|
|
|
|
.user_circle {
|
|
min-width: 8px;
|
|
height: 8px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 2px;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
|
|
.zulip-icon.zulip-icon-bot {
|
|
font-size: 90%; /* Reduce the bulkiness of this icon */
|
|
padding: 3px 0 3px 1px; /* Shift reduced icon a pixel left to maintain horizontal centering. */
|
|
}
|
|
}
|
|
|
|
.zero-pm-unreads .pm-box,
|
|
.zero-topic-unreads .topic-box {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.zoom-out {
|
|
#topics_header {
|
|
display: none;
|
|
}
|
|
|
|
.zoom-out-hide {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#topics_header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
margin-right: 10px;
|
|
padding-top: $sections_vertical_gutter;
|
|
color: hsl(0deg 0% 43%);
|
|
background-color: var(--color-background);
|
|
|
|
.show-all-streams {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
margin-left: calc($far_left_gutter_size + 2px);
|
|
|
|
& i {
|
|
margin: 0 6px 0 13px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#streams_header {
|
|
margin-right: 12px;
|
|
cursor: pointer;
|
|
padding: $sections_vertical_gutter 0 3px calc($far_left_gutter_size + 2px);
|
|
position: sticky;
|
|
background-color: var(--color-background);
|
|
/* Ideally, 0px should work here, but maybe simplebar is doing something
|
|
that is creating `0.5px` extra gap in zoomed-in windows. */
|
|
top: -0.5px;
|
|
z-index: 1;
|
|
|
|
.input-append {
|
|
white-space: nowrap;
|
|
margin-bottom: 10px;
|
|
|
|
& input {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.clear_search_button {
|
|
margin-left: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.streams_subheader {
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
padding-left: $far_left_gutter_size;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
margin-right: 12px;
|
|
color: hsl(240deg 10% 50%);
|
|
|
|
& span {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
left: 0.5em;
|
|
right: 0.5em;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
& span::before,
|
|
span::after {
|
|
content: " ";
|
|
flex: 1 1;
|
|
vertical-align: middle;
|
|
margin: auto;
|
|
border: 0.5px solid hsl(240deg 10% 50%);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
& span::before {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
& span::after {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
.stream-list-filter {
|
|
width: 216px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.topic-list-filter {
|
|
/* Input width = 100% - 30px right-margin - 6px right-padding */
|
|
/* To keep the right edge of input along with its borders inline with other
|
|
topic items we consider to subtract the space given for right margin of
|
|
other items, and right padding of input element. */
|
|
width: calc(100% - 36px);
|
|
}
|
|
|
|
.zero_count {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.zero-topic-unreads.show-more-topics .topic-box {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.searching-for-more-topics img {
|
|
height: 16px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.zoom-in {
|
|
.narrow-filter > .bottom_left_row {
|
|
position: sticky;
|
|
top: calc($sections_vertical_gutter + 20px);
|
|
z-index: 2;
|
|
padding-bottom: 1px;
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
#subscribe-to-more-streams,
|
|
.show-more-topics {
|
|
display: none;
|
|
}
|
|
|
|
&.private_messages_container ul.pm-list {
|
|
margin-bottom: $bottom_scrolling_buffer;
|
|
}
|
|
|
|
#more_private_messages_sidebar_title {
|
|
display: inline;
|
|
}
|
|
|
|
#hide_more_private_messages {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
font-size: 12px;
|
|
|
|
& span {
|
|
display: block;
|
|
padding: 2px 0 2px 4px;
|
|
}
|
|
|
|
&:hover {
|
|
& span {
|
|
background-color: hsl(120deg 12.3% 71.4% / 38%);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zoom-in-hide {
|
|
display: none;
|
|
}
|
|
|
|
.zoom-in-sticky {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 3px 0 3px $far_left_gutter_size;
|
|
}
|
|
|
|
#show_all_private_messages {
|
|
margin-right: 5px !important;
|
|
}
|
|
}
|