| @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-left: 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-left: 4px; |
| 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; |
| } |