mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 21:13:36 +00:00
3ef9d18baf
The border makes the alignment look nicer. Without a border your eyes plays tricks on you and makes it seem like numbers are not in the same column. The border color is the same subtle color as the backgrounds in others. Because CSS is annoying, you have to tweak the padding to make room for the border. (It should look ok in night mode, too.)
508 lines
8.6 KiB
SCSS
508 lines
8.6 KiB
SCSS
#left-sidebar {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
font-size: 0.89rem;
|
|
}
|
|
|
|
#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: "#";
|
|
font-size: 1.3rem;
|
|
font-weight: 800;
|
|
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: -1px 0px 22px 0px;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.left-sidebar li {
|
|
margin: 1px 0px;
|
|
}
|
|
|
|
.left-sidebar 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: 2px 0px 2px 29px;
|
|
}
|
|
|
|
#stream-filters-container {
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-append input[type=text].stream-list-filter {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#global_filters li:hover,
|
|
#stream_filters li:hover,
|
|
#stream_filters li.highlighted_stream {
|
|
background-color: hsl(93, 19%, 88%);
|
|
}
|
|
|
|
#stream_filters li.active-sub-filter:hover {
|
|
background-color: hsl(120, 11%, 82%);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.left-sidebar .sidebar-title a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.left-sidebar .sidebar-title:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
#left-sidebar .filter-icon {
|
|
display: inline-block;
|
|
width: 18px;
|
|
text-align: center;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
#global_filters .global-filter {
|
|
position: relative;
|
|
padding: 1px 10px;
|
|
}
|
|
|
|
.left-sidebar li {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#global_filters .global-filter i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#global_filters .global-filter a {
|
|
display: block;
|
|
}
|
|
|
|
.left-sidebar li a.conversation-partners:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#global_filters .global-filter i.fa-home {
|
|
position: relative;
|
|
top: 1px;
|
|
left: -1px;
|
|
|
|
font-size: 16px;
|
|
}
|
|
|
|
#global_filters .global-filter i.fa-envelope {
|
|
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;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
color: inherit;
|
|
padding-left: 3px;
|
|
padding-right: 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;
|
|
}
|
|
|
|
.left-sidebar li a.topic-name:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul.filters i {
|
|
padding-right: 0.25em;
|
|
/* Make filter icons the same width so labels line up. */
|
|
display: inline-block;
|
|
width: 13px;
|
|
}
|
|
|
|
ul.filters .arrow {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 10px;
|
|
font-size: 0.8em;
|
|
display: none;
|
|
}
|
|
|
|
ul.filters li:hover .arrow {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: hsl(0, 0%, 53%);
|
|
}
|
|
|
|
ul.filters li .arrow:hover {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: hsl(0, 0%, 0%);
|
|
}
|
|
|
|
ul.filters .topic-sidebar-arrow {
|
|
font-size: 0.7em;
|
|
top: 1px;
|
|
display: none !important;
|
|
}
|
|
|
|
li.topic-list-item:hover .topic-sidebar-arrow {
|
|
display: inline !important;
|
|
cursor: pointer;
|
|
color: hsl(0, 0%, 53%);
|
|
}
|
|
|
|
li.topic-list-item .topic-sidebar-arrow:hover {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: hsl(0, 0%, 0%);
|
|
}
|
|
|
|
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: 10px;
|
|
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;
|
|
}
|
|
|
|
.stream-privacy {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.stream-privacy .fa-lock {
|
|
display: inline-block;
|
|
width: 9px;
|
|
margin-right: 2px;
|
|
margin-left: 1px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.stream-privacy .hashtag {
|
|
position: relative;
|
|
top: 2px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
ul.topic-list {
|
|
list-style-type: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
ul.expanded_private_messages {
|
|
list-style-type: none;
|
|
font-weight: 300;
|
|
font-size: 0.9em;
|
|
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.show-more-private-messages,
|
|
li.expanded_private_message {
|
|
position: relative;
|
|
padding: 1px 0px 1px 24px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.zero-topic-unreads .pm-box,
|
|
.zero-topic-unreads .topic-box {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.zoom-out #topics_header {
|
|
display: none;
|
|
}
|
|
|
|
#global_filters {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#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: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#stream_filters .inactive_stream {
|
|
opacity: .5;
|
|
}
|
|
|
|
.zero_count {
|
|
visibility: hidden;
|
|
}
|
|
|
|
li.show-more-topics a {
|
|
margin-left: 5px;
|
|
font-size: 80%;
|
|
}
|
|
|
|
li.show-more-private-messages a {
|
|
font-size: 90%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.zoomed-in .show-more-private-messages {
|
|
display: none;
|
|
}
|
|
|
|
.zoomed-out .zoom-out-hide {
|
|
display: none;
|
|
}
|
|
|
|
.zoom-out .zoom-out-hide {
|
|
display: none;
|
|
}
|
|
|
|
.zoom-in .zoom-in-hide {
|
|
display: none;
|
|
}
|
|
|
|
.show-all-streams .fa-chevron-left {
|
|
text-decoration: none;
|
|
}
|