mirror of
https://github.com/zulip/zulip.git
synced 2026-07-03 21:10:12 +08:00
a96fdd18b1
Some of the work here was done Tomasz Kolek. When we click on "more conversations" in "Private Messages," we call it being "zoomed in." Before this change, when new PMs arrived, we would rebuild the list and zoom out again. Now we track the zoomed_in state with a variable. Also, if you are zoomed in and switch from one PM narrow to another, we also keep you zoomed in. This fix also removes some extraneous/redundant code. Fixes: #2561
449 lines
7.1 KiB
CSS
449 lines
7.1 KiB
CSS
#left-sidebar .brand {
|
|
display: table-row;
|
|
}
|
|
|
|
#left-sidebar #user-list,
|
|
#left-sidebar #group-pm-list {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
#streams_inline_cog,
|
|
#streams_filter_icon {
|
|
float: right;
|
|
color: #000;
|
|
font-size: 13px;
|
|
margin-top: 3px;
|
|
margin-left: 6px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#streams_inline_cog:hover,
|
|
#streams_filter_icon:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
#streams_header a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tooltip {
|
|
max-width: 10em;
|
|
}
|
|
|
|
#stream_filters {
|
|
overflow: visible;
|
|
margin: 2px 0px 2px 0px;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#stream-filters-container {
|
|
overflow-y: hidden;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
#stream-filters-container .ps-scrollbar-y-rail {
|
|
right: 0px !important;
|
|
width: 4px !important;
|
|
}
|
|
|
|
#stream-filters-container .ps-scrollbar-y {
|
|
width: 4px !important;
|
|
}
|
|
|
|
.stream-list-filter {
|
|
margin-left: 1ex;
|
|
}
|
|
|
|
#global_filters li:hover,
|
|
#stream_filters li:hover {
|
|
background-color: #e2e8dd;
|
|
}
|
|
|
|
#stream_filters li.active-sub-filter:hover {
|
|
background-color: #ccd6cc;
|
|
}
|
|
|
|
ul.filters {
|
|
list-style-type: none;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
ul.filters a {
|
|
color: #333;
|
|
}
|
|
|
|
ul.filters hr {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
li.active-filter,
|
|
li.active-sub-filter {
|
|
font-weight: 600 !important;
|
|
background: #ddedf6;
|
|
position: relative;
|
|
}
|
|
|
|
li.hidden-filter {
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.filter-icon {
|
|
display: inline-block;
|
|
width: 18px;
|
|
text-align: center;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.stream-pin-icon {
|
|
margin-right: 4px !important;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
#global_filters .global-filter {
|
|
position: relative;
|
|
padding: 1px 10px;
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
#global_filters .global-filter i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#global_filters .count,
|
|
#stream_filters .count {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 4px;
|
|
padding: 2px 3px 1px 3px;
|
|
background: #80837f;
|
|
border-radius: 0px;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.6px;
|
|
}
|
|
|
|
#stream_filters .count,
|
|
#global_filters .count {
|
|
margin-left: 0.5em;
|
|
display: none;
|
|
}
|
|
|
|
#global_filters .count {
|
|
line-height: 13px;
|
|
top: 2px;
|
|
}
|
|
|
|
.topic-name {
|
|
display: block;
|
|
line-height: 1.3em;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.topic-unread-count,
|
|
.private_message_count {
|
|
display: block;
|
|
position: absolute;
|
|
line-height: 1em;
|
|
top: 2px;
|
|
padding: 2px 3px 0px 3px;
|
|
background: #a6ada4;
|
|
color: #ffffff;
|
|
border-radius: 1px;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.6px;
|
|
}
|
|
|
|
.topic-unread-count {
|
|
right: 20px;
|
|
}
|
|
|
|
.private_message_count {
|
|
right: 10px;
|
|
}
|
|
|
|
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;
|
|
right: 0px;
|
|
top: 2px;
|
|
font-size: 0.8em;
|
|
display: none;
|
|
}
|
|
|
|
ul.filters li:hover .arrow {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: #888;
|
|
}
|
|
|
|
ul.filters li .arrow:hover {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: #000;
|
|
}
|
|
|
|
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: #888;
|
|
}
|
|
|
|
li.topic-list-item .topic-sidebar-arrow:hover {
|
|
display: inline;
|
|
cursor: pointer;
|
|
color: #000;
|
|
}
|
|
|
|
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-bottom: 3px;
|
|
line-height: 12px;
|
|
padding-top: 4px;
|
|
margin-right: 15px;
|
|
padding-left: 33px;
|
|
}
|
|
|
|
#stream_filters .subscription_block .stream-name {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
#stream_filters .subscription_block.stream-with-count {
|
|
margin-right: 38px;
|
|
}
|
|
|
|
.streamlist_swatch {
|
|
display: block;
|
|
width: 11px;
|
|
height: 11px;
|
|
vertical-align: middle;
|
|
float: left;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 5px;
|
|
box-shadow: inset 0px 0px 3px -2px #000;
|
|
}
|
|
|
|
.streamlist_swatch.private-stream-swatch {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.stream-privacy {
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 3px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
ul.topic-list {
|
|
list-style-type: none;
|
|
font-weight: normal;
|
|
margin-left: 0px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
ul.expanded_private_messages {
|
|
list-style-type: none;
|
|
font-weight: 300;
|
|
font-size: 84%;
|
|
margin-left: 0px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
li.show-more-topics,
|
|
li.topic-list-item {
|
|
position: relative;
|
|
padding-left: 33px;
|
|
}
|
|
|
|
li.show-more-private-messages,
|
|
li.expanded_private_message {
|
|
position: relative;
|
|
padding-left: 24px;
|
|
padding-bottom: 1px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.show-all-streams a {
|
|
color: #333;
|
|
}
|
|
|
|
.all-streams-padding {
|
|
padding-top: 5px;
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
.pm-box,
|
|
.topic-box {
|
|
display: block;
|
|
margin-right: 38px;
|
|
}
|
|
|
|
.zero-subject-unreads .pm-box,
|
|
.zero-subject-unreads .topic-box {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.zoom-out #topics_header {
|
|
display: none;
|
|
}
|
|
|
|
#global_filters {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#topics_header,
|
|
#sharethelove-header {
|
|
border-top: 1px solid #e2e2e2;
|
|
margin-top: 5px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#streams_header {
|
|
margin-right: 0px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
#stream_filters .inactive_stream {
|
|
opacity: .5;
|
|
}
|
|
|
|
.zero_count {
|
|
display: none;
|
|
}
|
|
|
|
#share-the-love {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-bottom: 5px;
|
|
line-height: 18px;
|
|
display: none;
|
|
}
|
|
|
|
#share-the-love-contents {
|
|
display: none;
|
|
}
|
|
|
|
#share-the-love-expand-collapse {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#share-the-love-expand-collapse h4 {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
#share-the-love-expand-collapse .toggle {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 50%;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
#share-the-love input,
|
|
#share-the-love p {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#referral-form label {
|
|
margin: 0;
|
|
}
|
|
|
|
#share-the-love .icon-vector-heart {
|
|
color: red;
|
|
}
|
|
|
|
#share-the-love .still-have-invites {
|
|
clear: both;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#share-the-love .no-more-invites {
|
|
clear: both;
|
|
display: none;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#share-the-love .invite-count-area {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#share-the-love .alert {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#referral-form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#tell-a-friend-success {
|
|
display: none;
|
|
}
|
|
|
|
li.show-more-topics a {
|
|
font-size: 75%;
|
|
}
|
|
|
|
li.show-more-private-messages a {
|
|
font-size: 90%
|
|
}
|
|
|
|
.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;
|
|
}
|