@gravity-ui/uikit/build/esm/components/User/User.css

Gravity UI base styling and components

.g-user {
  --_--avatar-offset: var(--g-spacing-2);
  --_--name-font-weight: var(--g-text-body-font-weight);
  --_--name-font-size: var(--g-text-body-short-font-size);
  --_--name-line-height: var(--g-text-body-short-line-height);
  --_--description-font-weight: var(--g-text-body-font-weight);
  --_--description-font-size: var(--g-text-body-short-font-size);
  --_--description-line-height: var(--g-text-body-short-line-height);
  display: flex;
  align-items: center;
  gap: var(--g-user-avatar-offset, var(--_--avatar-offset));
}
.g-user_size_3xs, .g-user_size_2xs, .g-user_size_xs, .g-user_size_s {
  --_--avatar-offset: calc(var(--g-spacing-base) * 1.5);
}
.g-user_size_m {
  --_--avatar-offset: var(--g-spacing-2);
}
.g-user_size_l, .g-user_size_xl {
  --_--avatar-offset: var(--g-spacing-3);
}
.g-user_size_3xs, .g-user_size_2xs, .g-user_size_xs, .g-user_size_s, .g-user_size_m, .g-user_size_l {
  --_--name-font-size: var(--g-text-body-short-font-size);
  --_--name-line-height: var(--g-text-body-short-line-height);
}
.g-user_size_xl {
  --_--name-font-size: var(--g-text-body-2-font-size);
  --_--name-line-height: var(--g-text-body-2-line-height);
}
.g-user__avatar {
  display: flex;
  align-items: center;
}
.g-user__info {
  flex: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.g-user__info .g-user__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--g-color-text-primary);
  font-weight: var(--g-user-name-font-weight, var(--_--name-font-weight));
  font-size: var(--g-user-name-font-size, var(--_--name-font-size));
  line-height: var(--g-user-name-line-height, var(--_--name-line-height));
}
.g-user__info .g-user__description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--g-color-text-secondary);
  font-weight: var(--g-user-description-font-weight, var(--_--description-font-weight));
  font-size: var(--g-user-description-font-size, var(--_--description-font-size));
  line-height: var(--g-user-description-line-height, var(--_--description-line-height));
}