mastodon-cat-ears/glitchsoc-cat-ears.css

/* replace the names with whatever you'd like to have */

.status__avatar[href*="agatha" i] .account__avatar-overlay-base::before,
.status__avatar[href*="agatha" i] .account__avatar-overlay-base::after,
.status__avatar[href*="agatha" i] .account__avatar::before,
.status__avatar[href*="agatha" i] .account__avatar::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: -1;
}

.status__avatar,
.account__avatar {
  overflow: visible;
  border-radius: 100%;
}

.status__avatar div {
  border-radius: 100%;
}

.status__avatar[href*="agatha" i] .account__avatar-overlay-base,
.status__avatar[href*="agatha" i] .account__avatar {
  position: absolute;
}

.status__avatar[href*="agatha" i] .account__avatar-overlay-base::before,
.status__avatar[href*="agatha" i] .account__avatar::before {
  border-radius: 75% 0 75% 75%;
  transform: rotate(-37.6deg) skew(-30deg);
  top: 0;
  bottom: 0;
  right: 0;
}

.status__avatar[href*="agatha" i] .account__avatar-overlay-base::after,
.status__avatar[href*="agatha" i] .account__avatar::after {
  border-radius: 0 75% 75%;
  transform: rotate(37.6deg) skew(30deg);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.status__avatar[href*="agatha" i] .account__avatar-overlay-base:hover::before,
.status__avatar[href*="agatha" i] .account__avatar:hover::before {
  animation: earwiggleright 1s infinite;
}

.status__avatar[href*="agatha" i] .account__avatar-overlay-base:hover::after,
.status__avatar[href*="agatha" i] .account__avatar: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); }
}

/* each of these changes cat ears colors for one user */

.status__avatar[href*="agatha" i] .account__avatar-overlay-base::before,
.status__avatar[href*="agatha" i] .account__avatar-overlay-base::after,
.status__avatar[href*="agatha" i] .account__avatar::before,
.status__avatar[href*="agatha" i] .account__avatar::after {
  background-color: #b87e99;
  border-color: #905671;
}

.status__avatar[href*="agatha_ebooks" i] .account__avatar-overlay-base::before,
.status__avatar[href*="agatha_ebooks" i] .account__avatar-overlay-base::after,
.status__avatar[href*="agatha_ebooks" i] .account__avatar::before,
.status__avatar[href*="agatha_ebooks" i] .account__avatar::after {
  background-color: #486859;
  border-color: #86c69a;
}

.status__avatar[href*="agathasorceress" i] .account__avatar-overlay-base::before,
.status__avatar[href*="agathasorceress" i] .account__avatar-overlay-base::after,
.status__avatar[href*="agathasorceress" i] .account__avatar::before,
.status__avatar[href*="agathasorceress" i] .account__avatar::after {
  background-color: #6f4f74;
  border-color: #47274c;
}