frontend/src/styles/components/_connected-users.css

/* ---------------------------------------------------------------------------
   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%;
  overflow: hidden;
  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: 2;
}

.connected-users__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.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;
}

.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;
}