2017-04-17 22:19:47 +02:00
|
|
|
.right-sidebar {
|
2019-03-03 17:00:23 +01:00
|
|
|
font-size: 14px;
|
2017-04-17 22:19:47 +02:00
|
|
|
|
2020-06-06 13:03:54 +02:00
|
|
|
a:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
2017-12-04 22:29:16 +01:00
|
|
|
}
|
|
|
|
|
2020-05-26 13:58:18 +02:00
|
|
|
#buddy_list_wrapper {
|
2017-09-27 20:41:19 +02:00
|
|
|
position: relative;
|
2017-01-04 00:37:01 +01:00
|
|
|
margin-left: 0;
|
2017-07-31 20:25:38 +02:00
|
|
|
overflow: auto;
|
2017-01-04 00:37:01 +01:00
|
|
|
}
|
|
|
|
|
2019-05-20 12:25:48 +02:00
|
|
|
#user_presences {
|
|
|
|
max-width: 95%;
|
|
|
|
overflow-x: hidden;
|
2020-06-08 10:25:14 +02:00
|
|
|
list-style-position: inside; /* Draw the bullets inside our box */
|
2019-03-01 20:27:15 +01:00
|
|
|
|
2019-05-21 12:25:54 +02:00
|
|
|
li {
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
2020-06-08 10:25:14 +02:00
|
|
|
list-style-type: none;
|
|
|
|
border-radius: 4px;
|
|
|
|
padding-right: 15px;
|
2020-06-06 00:49:20 +02:00
|
|
|
padding-top: 1px;
|
|
|
|
padding-bottom: 2px;
|
2019-05-21 12:25:54 +02:00
|
|
|
|
2020-04-16 16:15:39 +02:00
|
|
|
.user-list-sidebar-menu-icon {
|
2019-05-21 12:25:54 +02:00
|
|
|
position: absolute;
|
2020-06-06 01:27:23 +02:00
|
|
|
top: 1px;
|
2020-08-06 02:42:07 +02:00
|
|
|
right: 0;
|
2020-08-04 23:58:56 +02:00
|
|
|
font-size: 1em;
|
2019-05-21 12:25:54 +02:00
|
|
|
display: none;
|
2020-06-06 01:27:23 +02:00
|
|
|
text-align: center;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0 6px 0 6px;
|
2019-05-21 12:25:54 +02:00
|
|
|
|
|
|
|
i {
|
|
|
|
padding-right: 0.25em;
|
|
|
|
display: inline-block;
|
|
|
|
width: 13px;
|
2020-06-06 01:27:23 +02:00
|
|
|
vertical-align: middle;
|
2019-05-21 12:25:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
display: inline;
|
|
|
|
cursor: pointer;
|
2020-06-06 00:26:16 +02:00
|
|
|
color: hsl(0, 0%, 0%) !important;
|
2019-05-21 12:25:54 +02:00
|
|
|
}
|
2021-03-02 06:24:40 +01:00
|
|
|
|
|
|
|
/*
|
|
|
|
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: inline;
|
|
|
|
}
|
2019-05-21 12:25:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
2020-04-16 16:15:39 +02:00
|
|
|
.user-list-sidebar-menu-icon {
|
2019-05-21 12:25:54 +02:00
|
|
|
display: inline;
|
|
|
|
cursor: pointer;
|
|
|
|
color: hsl(0, 0%, 53%);
|
|
|
|
}
|
|
|
|
}
|
2020-06-08 10:25:14 +02:00
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&.highlighted_user {
|
2020-07-04 12:11:27 +02:00
|
|
|
background-color: hsla(120, 12.3%, 71.4%, 0.38);
|
2020-06-08 10:25:14 +02:00
|
|
|
}
|
2019-05-21 12:25:54 +02:00
|
|
|
}
|
2019-03-01 20:27:15 +01:00
|
|
|
|
2020-06-08 10:25:14 +02:00
|
|
|
.user_circle {
|
|
|
|
width: 8px;
|
|
|
|
height: 8px;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-top: 0;
|
|
|
|
margin-bottom: 0;
|
2020-06-08 10:25:14 +02:00
|
|
|
margin-left: 5px;
|
|
|
|
margin-right: 5px;
|
|
|
|
display: block;
|
|
|
|
}
|
2017-06-19 19:03:39 +02:00
|
|
|
|
2020-06-08 10:25:14 +02:00
|
|
|
a {
|
|
|
|
color: inherit;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-left: 0;
|
2020-06-08 10:25:14 +02:00
|
|
|
}
|
2017-01-04 00:37:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#invite-user-link i {
|
|
|
|
text-decoration: none;
|
2019-06-13 16:28:23 +02:00
|
|
|
margin-right: 3px;
|
|
|
|
margin-left: 5px;
|
2017-01-04 00:37:01 +01:00
|
|
|
}
|
|
|
|
|
2018-06-27 00:08:28 +02:00
|
|
|
.user-presence-link,
|
2017-01-04 00:37:01 +01:00
|
|
|
.user_sidebar_entry .selectable_sidebar_block {
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
2018-06-23 23:52:51 +02:00
|
|
|
.user_sidebar_entry .selectable_sidebar_block {
|
2018-06-27 00:08:28 +02:00
|
|
|
width: calc(100% - 16px);
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-presence-link {
|
|
|
|
width: calc(100% - 24px);
|
2020-04-06 07:15:39 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.my_user_status {
|
|
|
|
opacity: 0.5;
|
2018-06-23 23:52:51 +02:00
|
|
|
}
|
|
|
|
|
2017-05-03 21:31:16 +02:00
|
|
|
.selectable_sidebar_block {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2018-04-11 19:00:34 +02:00
|
|
|
.user_sidebar_entry {
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
2021-04-09 20:41:29 +02:00
|
|
|
.unread_count {
|
2020-06-08 10:39:28 +02:00
|
|
|
display: none;
|
2021-04-09 20:41:29 +02:00
|
|
|
margin-top: 2.5px;
|
2020-06-08 10:39:28 +02:00
|
|
|
}
|
2017-01-04 00:37:01 +01:00
|
|
|
|
2021-04-09 20:41:29 +02:00
|
|
|
&.user-with-count .unread_count {
|
2020-06-08 10:39:28 +02:00
|
|
|
display: block;
|
|
|
|
}
|
2017-01-04 00:37:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#userlist-toggle {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
|
|
|
right: 0;
|
2017-01-04 00:37:01 +01:00
|
|
|
text-align: center;
|
|
|
|
vertical-align: middle;
|
2020-05-10 22:52:49 +02:00
|
|
|
border-left: 1px solid hsl(0, 0%, 88%);
|
2017-01-04 00:37:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#userlist-toggle-button {
|
|
|
|
text-decoration: none;
|
2020-05-10 22:52:49 +02:00
|
|
|
color: hsl(0, 0%, 60%);
|
2017-01-04 00:37:01 +01:00
|
|
|
display: block;
|
2020-05-10 20:55:32 +02:00
|
|
|
width: 45px;
|
2017-01-04 00:37:01 +01:00
|
|
|
height: 19px;
|
|
|
|
padding-top: 12px;
|
|
|
|
padding-bottom: 9px;
|
2020-05-10 22:52:49 +02:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: inherit;
|
|
|
|
}
|
2017-01-04 00:37:01 +01:00
|
|
|
}
|
|
|
|
|
2019-02-10 20:36:36 +01:00
|
|
|
.right-sidebar-items:first-of-type #userlist-header {
|
2017-01-04 00:37:01 +01:00
|
|
|
border-top: none;
|
|
|
|
}
|
|
|
|
|
2018-01-04 18:15:42 +01:00
|
|
|
#userlist-header {
|
|
|
|
cursor: pointer;
|
2019-05-25 12:26:37 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
2020-06-08 10:42:17 +02:00
|
|
|
margin-right: 10px;
|
2018-01-04 18:15:42 +01:00
|
|
|
|
2019-05-25 12:26:37 +02:00
|
|
|
#userlist-title {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#user_filter_icon {
|
|
|
|
font-size: 13px;
|
2020-08-04 23:58:56 +02:00
|
|
|
opacity: 0.5;
|
2019-05-25 12:26:37 +02:00
|
|
|
margin-right: 5px;
|
2021-02-24 00:30:45 +01:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2019-05-25 12:26:37 +02:00
|
|
|
}
|
2018-01-04 18:15:42 +01:00
|
|
|
}
|
|
|
|
|
2018-08-19 23:18:51 +02:00
|
|
|
#keyboard-icon {
|
2021-03-22 20:21:58 +01:00
|
|
|
position: relative;
|
2018-05-08 00:04:58 +02:00
|
|
|
cursor: pointer;
|
|
|
|
font-size: 20px;
|
|
|
|
}
|
2018-06-22 19:30:33 +02:00
|
|
|
|
2018-08-19 23:18:51 +02:00
|
|
|
#sidebar-keyboard-shortcuts {
|
|
|
|
color: inherit;
|
2018-06-22 19:30:33 +02:00
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
|
2021-03-22 20:21:58 +01:00
|
|
|
.right-sidebar-shortcuts {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
2021-05-01 01:06:39 +02:00
|
|
|
margin-top: 5px;
|
2021-03-22 20:21:58 +01:00
|
|
|
}
|
|
|
|
|
2019-10-24 05:38:18 +02:00
|
|
|
/* This max-width must be synced with message_viewport.is_narrow */
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $xl_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
#userlist-toggle {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $md_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
#user_search_section .user-list-filter {
|
|
|
|
/* input should be 100% - 6px padding x2 - 1px border x2. */
|
|
|
|
width: calc(100% - 12px - 2px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
#userlist-toggle {
|
|
|
|
height: 30px;
|
|
|
|
line-height: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#userlist-toggle-button {
|
|
|
|
height: 30px;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding-top: 0;
|
|
|
|
padding-bottom: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
}
|