src/static/css/profileindicator_inject.css

@keyframes loading-indicator {
  from {
    opacity: 0.25;
  }

  to {
    opacity: 1;
  }
}

ec-user-link.name > *, .thread-message-header__name > *, .thread-message-header__name > span:nth-child(3) > * {
  vertical-align: middle;
}

.profile-indicator {
  display: inline-block;
  font-size: 16px;
  margin-inline-start: 4px;
}

.profile-indicator a {
  text-decoration: none!important;
}

.profile-indicator.profile-indicator--loading a {
  color: #6f6f6f;

  animation-duration: 0.75s;
  animation-name: loading-indicator;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.profile-indicator.profile-indicator--first-post a {
  color: #4285f4;
}

.profile-indicator.profile-indicator--other-posts-read a {
  color: #FF8F00;
}

.profile-indicator.profile-indicator--other-posts-unread a {
  color: #C62828;
}

.profile-indicator a {
  opacity: 1;
  transition: opacity .5s, color .5s;
}

.num-posts-indicator {
  display: inline-block;
  padding: 3px 7px;
  margin-inline-start: 8px;
  border-radius: 16px;
  height: 14px;
  min-width: 12px;

  font-size: 12px;
  line-height: 14px;
  text-align: center;

  background-color: #E0E0E0;
  color: black;
  transition: background-color .5s;
}

.num-posts-indicator.num-posts-indicator--loading {
  background-color: #AFAFAF;

  animation-duration: 0.75s;
  animation-name: loading-indicator;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.num-posts-indicator.num-posts-indicator--first-post {
  background-color: #BBDEFB;
}

.num-posts-indicator.num-posts-indicator--other-posts-read {
  background-color: #FFE0B2;
}

.num-posts-indicator.num-posts-indicator--other-posts-unread {
  color: white;
  background-color: #F44336;
}

.num-posts-indicator .num-posts-indicator--num {
  display: inline-block;
  opacity: 1;
  transition: opacity .5s;
}

.num-posts-indicator .num-posts-indicator--num.num-posts-indicator--num--loading {
  opacity: 0;
}