2021-04-22 16:11:47 -04:00
|
|
|
.topic-above-footer-buttons-outlet.presence {
|
|
|
|
min-height: 1.8em; // height of the avatars, prevents layout shift
|
|
|
|
margin: var(--below-topic-margin) 0;
|
|
|
|
}
|
|
|
|
|
2017-12-06 15:58:59 -05:00
|
|
|
.presence-users {
|
2021-05-12 08:56:15 -04:00
|
|
|
background-color: var(--secondary);
|
|
|
|
color: var(--primary-medium);
|
2017-12-20 16:45:07 -05:00
|
|
|
display: flex;
|
2018-06-08 05:49:31 -04:00
|
|
|
|
2017-12-20 16:45:07 -05:00
|
|
|
span.presence-text {
|
2021-12-24 06:38:33 -05:00
|
|
|
align-items: center;
|
|
|
|
display: flex;
|
2018-01-19 19:15:08 -05:00
|
|
|
flex: 0 0 auto;
|
2021-12-24 06:38:33 -05:00
|
|
|
margin-left: 8px;
|
2018-01-19 19:15:08 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
.presence-avatars {
|
|
|
|
display: flex;
|
|
|
|
overflow: hidden;
|
2018-06-08 05:49:31 -04:00
|
|
|
flex-wrap: wrap;
|
2017-12-20 16:45:07 -05:00
|
|
|
}
|
2017-09-07 03:40:18 -04:00
|
|
|
|
|
|
|
.wave {
|
2018-01-19 19:15:08 -05:00
|
|
|
flex: 0 0 auto;
|
2018-06-08 05:49:31 -04:00
|
|
|
|
2017-09-07 03:40:18 -04:00
|
|
|
.dot {
|
|
|
|
display: inline-block;
|
|
|
|
animation: wave 1.8s linear infinite;
|
|
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
|
animation-delay: -1.6s;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:nth-child(3) {
|
|
|
|
animation-delay: -1.4s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes wave {
|
2018-06-08 05:49:31 -04:00
|
|
|
0%,
|
|
|
|
60%,
|
|
|
|
100% {
|
2017-09-07 03:40:18 -04:00
|
|
|
transform: initial;
|
|
|
|
}
|
|
|
|
|
|
|
|
30% {
|
|
|
|
transform: translateY(-0.2em);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-06 15:58:59 -05:00
|
|
|
.composer-fields .presence-users {
|
2021-12-08 11:18:49 -05:00
|
|
|
overflow: hidden;
|
|
|
|
flex-shrink: 1;
|
|
|
|
.presence-avatars {
|
|
|
|
flex-wrap: nowrap;
|
2018-01-19 19:15:08 -05:00
|
|
|
}
|
2017-12-06 15:58:59 -05:00
|
|
|
}
|
|
|
|
|
2021-12-08 11:18:49 -05:00
|
|
|
.mobile-view .composer-fields .presence-users .description {
|
|
|
|
display: none;
|
2017-11-27 15:23:18 -05:00
|
|
|
}
|
2019-09-09 08:47:29 -04:00
|
|
|
|
|
|
|
// TMP: RTL overrides
|
|
|
|
.rtl {
|
|
|
|
span.presence-text {
|
2021-12-24 06:38:33 -05:00
|
|
|
margin-right: 8px;
|
2019-09-09 08:47:29 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.composer-fields .presence-users {
|
|
|
|
right: unset;
|
|
|
|
left: 95px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.mobile-view {
|
|
|
|
.composer-fields .presence-users {
|
|
|
|
right: unset;
|
|
|
|
left: 65px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|