.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); }
}
Last active
October 29, 2024 11:10
-
-
Save umonaca/8c6ceff6941dbb486006cb7d2975845b to your computer and use it in GitHub Desktop.
Avatar cat for mastodon
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Version
Revision 6
Changlog