File size: 2,564 Bytes
aa09c01 a286ca4 aa09c01 a286ca4 aa09c01 a286ca4 aa09c01 a286ca4 aa09c01 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | /* ---------------------------------------------------------------------------
Connected users pill (editor top bar)
Small overlapping avatars of everyone else currently editing the
document. Each avatar's border matches the user's collab color
(same color as their cursor caret in the document), so it's easy
to tell at a glance who's behind a given selection.
--------------------------------------------------------------------------- */
.connected-users {
display: inline-flex;
align-items: center;
padding: 0 6px 0 4px;
}
.connected-users__avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
/* No overflow:hidden here: the circular clip lives on the img/initials so
the count badge can sit on top of (and slightly outside) the avatar. */
border: 2px solid var(--border-color);
background: var(--surface-bg);
margin-left: -6px;
transition: transform 120ms ease, z-index 0s;
z-index: 1;
}
.connected-users__avatar:first-child {
margin-left: 0;
}
.connected-users__avatar:hover {
transform: translateY(-1px) scale(1.08);
z-index: 3;
}
/* Keep badged avatars above their right-hand neighbour so the count
(which sits on the right edge, where avatars overlap) stays visible. */
.connected-users__avatar:has(> .connected-users__count) {
z-index: 2;
}
.connected-users__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.connected-users__initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
line-height: 1;
border-radius: 50%;
}
.connected-users__count {
position: absolute;
bottom: -3px;
right: -4px;
min-width: 14px;
height: 14px;
padding: 0 3px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: var(--primary-color);
color: var(--on-primary, #fff);
font-size: 9px;
font-weight: 700;
line-height: 1;
border: 1.5px solid var(--surface-bg);
font-variant-numeric: tabular-nums;
}
.connected-users__more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--surface-bg);
color: var(--muted-color);
font-size: 11px;
font-weight: 700;
border: 2px solid var(--border-color);
margin-left: -6px;
}
|