Avatar cat for mastodon

avatar-cat.md

.notification .status__avatar::before,
.notification .status__avatar::after {
  display: none !important;
}

.status__wrapper .status:first-child .status__avatar::before,
.status__wrapper .status:first-child .status__avatar::after,
.entry.h-entry .status__avatar div::before,
.entry.h-entry .status__avatar div::after,
.entry.entry-reblog .status__avatar div::before,
.entry.entry-reblog .status__avatar div::after {
  content: "";
  display: inline-block;
  border: 4px solid;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  background-color: inherit;
  border-color: inherit;
  position: absolute;
  z-index: 0;
}

.status__avatar::before,
.entry.h-entry .status__avatar div::before,
.entry.entry-reblog .status__avatar div::before {
  border-radius: 75% 0 75% 75%;
  transform: rotate(-37.6deg) skew(-30deg);
  right: 0;
}

.status__avatar::after,
.entry.h-entry .status__avatar div::after,
.entry.entry-reblog .status__avatar div::after {
  border-radius: 0 75% 75%;
  transform: rotate(37.6deg) skew(30deg);
  top: 0;
  left: 0;
}

.detailed-status__display-name {
  overflow: visible !important;
}

.detailed-status__display-avatar {
  position: relative;
}

.detailed-status__display-avatar::before,
.detailed-status__display-avatar::after {
  content: "";
  display: inline-block;
  border: 4px solid;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: inherit;
  border-color: inherit;
  position: absolute;
  z-index: 0;
}

.detailed-status__display-avatar::before {
  border-radius: 75% 0 75% 75%;
  transform: rotate(-37.6deg) skew(-30deg);
  right: 0px;
}

.detailed-status__display-avatar::after {
  border-radius: 0 75% 75%;
  transform: rotate(37.6deg) skew(30deg);
  top: 0;
}

.account__avatar {
  border-radius: 100%;
  z-index: 1;
}

.status__avatar:hover::before,
.detailed-status__display-avatar:hover::before,
.entry.h-entry .status__avatar div:hover::before,
.entry.entry-reblog .status__avatar div:hover::before {
  animation: earwiggleright 1s infinite;
}

.status__avatar:hover::after,
.detailed-status__display-avatar:hover::after,
.entry.h-entry .status__avatar div:hover::after,
.entry.entry-reblog .status__avatar div:hover::after {
  animation: earwiggleleft 1s infinite;
}

@keyframes earwiggleleft {
  from { transform: rotate(37.6deg) skew(30deg); }
  25% { transform: rotate(10deg) skew(30deg); }
  50% { transform: rotate(20deg) skew(30deg); }
  75% { transform: rotate(0deg) skew(30deg); }
  to { transform: rotate(37.6deg) skew(30deg); }
}

@keyframes earwiggleright {
  from { transform: rotate(-37.6deg) skew(-30deg); }
  30% { transform: rotate(-10deg) skew(-30deg); }
  55% { transform: rotate(-20deg) skew(-30deg); }
  75% { transform: rotate(-0deg) skew(-30deg); }
  to { transform: rotate(-37.6deg) skew(-30deg); }
}

Version

Revision 6

Changlog

• Fixed bug on notification (credit to neb)
• Included support for detailed statuses
• Included support for public layout pages
• Included support for reblogs or pinned statuses on public layout pages

Version

Revision 7

Changlog

• Fixed broken style on some older version of instances

To change color, modify background-color and border-color according to your own preference.