mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 05:23:35 +00:00
56b1b6c067
This commit is kept separate so that we can easily move the place where the recent topic button should be finally kept.
536 lines
9.9 KiB
SCSS
536 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 {
|
|
#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;
|
|
}
|
|
|
|
li.show-more-topics {
|
|
a {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
#streams_inline_cog,
|
|
#streams_filter_icon,
|
|
#recent_topics_icon {
|
|
float: right;
|
|
opacity: 0.50;
|
|
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;
|
|
/* 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;
|
|
|
|
li {
|
|
a {
|
|
padding: 1px 0px;
|
|
}
|
|
|
|
ul {
|
|
margin-left: 0px;
|
|
|
|
&.topic-list li {
|
|
padding-top: 2px;
|
|
padding-right: 0px;
|
|
padding-bottom: 2px;
|
|
padding-left: $topic_indent;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.active-sub-filter:hover {
|
|
background-color: hsl(120, 11%, 82%);
|
|
}
|
|
|
|
.count {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.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;
|
|
|
|
&::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: .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;
|
|
}
|
|
|
|
.top_left_row:hover,
|
|
.bottom_left_row:hover,
|
|
#stream_filters li.highlighted_stream {
|
|
background-color: hsl(93, 18%, 82%);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#add-stream-link {
|
|
text-decoration: none;
|
|
margin-left: 10px;
|
|
margin-bottom: 18px;
|
|
i {
|
|
min-width: 19px;
|
|
text-align: center;
|
|
&::before {
|
|
padding-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.filters {
|
|
list-style-type: none;
|
|
margin-left: 0px;
|
|
|
|
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;
|
|
}
|
|
|
|
.count {
|
|
margin-right: 20px;
|
|
margin-top: 2px;
|
|
display: none;
|
|
}
|
|
|
|
i {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
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%);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
If you hover directly over the chevron itself,
|
|
show it in black.
|
|
*/
|
|
|
|
&:hover {
|
|
color: hsl(0, 0%, 0%) !important;
|
|
}
|
|
}
|
|
|
|
/*
|
|
The All Messages and Stream chevrons are
|
|
pretty similar.
|
|
*/
|
|
.all-messages-sidebar-menu-icon,
|
|
.starred-messages-sidebar-menu-icon,
|
|
.stream-sidebar-menu-icon {
|
|
top: 3px;
|
|
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-menu-icon {
|
|
top: 1px;
|
|
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-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-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;
|
|
|
|
a {
|
|
margin: 1px 0px;
|
|
}
|
|
}
|
|
|
|
.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: 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;
|
|
}
|
|
}
|
|
|
|
#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: 0px;
|
|
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;
|
|
}
|