zulip/static/styles/right-sidebar.css
Brock Whittaker 79d0f13885 sidebars: Move arrows and unread counts away from scrollbars.
The arrows were too close to the scrollbars that it would be
difficult to click them sometimes. This moves over the arrows and
unread counts to combat the issue.
2017-10-20 13:29:10 -07:00

221 lines
4.6 KiB
CSS

.right-sidebar {
-webkit-font-smoothing: antialiased;
color: hsl(0, 0%, 33%);
font-size: 0.89rem;
}
#group-pms li:hover,
#user_presences li:hover {
background-color: hsl(93, 19%, 88%);
}
#user_presences,
#group-pms {
position: relative;
list-style-position: inside; /* Draw the bullets inside our box */
margin-left: 0;
overflow: auto;
}
#user_presences:hover,
#group-pms:hover {
overflow-y: auto;
}
#user_presences li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user_sidebar_entry .count,
.group-pms-sidebar-entry .count {
display: none;
}
#user_presences li,
#group-pms li {
list-style-type: none;
}
#user_presences .arrow {
top: 0px;
}
#group-pm-title {
margin: 10px 0px 0px 0px;
display: inline-block;
}
.user-status-indicator,
.group-pm-status-indicator {
display: block;
width: 8px;
height: 8px;
margin: 0px 5px;
border-radius: 50%;
border: 1px solid;
float: left;
position: relative;
top: 5px;
}
.user_active .user-status-indicator,
.group-pm-status-indicator {
background-color: hsl(106, 74%, 44%);
border-color: hsl(106, 74%, 44%);
}
.user_idle .user-status-indicator {
border-color: hsl(29, 84%, 51%);
background-color: hsl(29, 84%, 51%);
background: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,hsla(0, 0%, 100%, 0.0)), color-stop(50%,hsla(29, 84%, 51%, 1.0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* IE10+ */
background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec7e18',GradientType=0 ); /* IE6-9 */
}
.user_offline .user-status-indicator {
background-color: none;
border-color: gray;
}
.user_unknown .user-status-indicator {
display: none;
}
#user_presences a,
#group-pms a {
color: inherit;
}
#invite-user-link i {
text-decoration: none;
margin-right: 5px;
}
.group-pms-sidebar-entry .selectable_sidebar_block {
width: 235px;
display: block;
}
.user_sidebar_entry .selectable_sidebar_block {
width: 208px;
display: block;
}
.user_sidebar_entry .selectable_sidebar_block.user-with-mobile {
width: 204px;
}
.group-pm-link {
margin-left: 17px;
display: block;
}
.user_sidebar_entry .selectable_sidebar_block {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user_sidebar_entry.user-with-count .selectable_sidebar_block {
width: 200px;
}
.user_sidebar_entry.user-with-count .selectable_sidebar_block.user-with-mobile {
width: 180px;
}
.user_sidebar_entry.user-with-count .count {
display: inherit;
}
.group-pms-sidebar-entry.group-with-count .selectable_sidebar_block {
width: 185px;
}
.selectable_sidebar_block {
cursor: pointer;
}
.user_sidebar_entry .count,
.group-pms-sidebar-entry .count {
position: absolute;
right: 29px;
top: 4px;
padding: 1px 4px 2px 4px;
background: hsl(105, 2%, 50%);
border-radius: 0px;
color: #ffffff;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.6px;
border-radius: 4px;
}
.group-pms-sidebar-entry .count {
right: 29px;
}
.user_sidebar_entry .count,
.group-pms-sidebar-entry .count {
line-height: 13px;
top: 2px;
}
#userlist-toggle {
display: none;
position: absolute;
top: 0px;
right: 0px;
text-align: center;
vertical-align: middle;
border-left: 2px solid hsl(204, 20%, 74%);
}
#userlist-toggle-button {
text-decoration: none;
background-color: hsl(0, 0%, 89%);
color: hsl(0, 0%, 52%);
display: block;
width: 40px;
height: 19px;
padding-top: 12px;
padding-bottom: 9px;
}
#group-pm-list {
display: none;
}
#group-pm-list.show {
display: block;
}
#userlist-header,
#group-pm-header {
margin-right: 10px;
}
.sidebar-items:first-of-type #userlist-header {
border-top: none;
}
#feedback_section {
text-align: left;
padding-bottom: 15px;
border-bottom: 1px solid hsl(0, 0%, 88%);
margin-right: 10px;
}
.user-list-filter,
.add-user-list-filter {
width: 80%;
}