103 lines
3.6 KiB
CSS
103 lines
3.6 KiB
CSS
/* replace the names with whatever you'd like to have */
|
|
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base::before,
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base::after,
|
|
.status__display-name[href*="agatha" i] .status__avatar .account__avatar::before,
|
|
.status__display-name[href*="agatha" i] .status__avatar .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__display-name .status__avatar,
|
|
.account__avatar {
|
|
overflow: visible;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.status__display-name .status__avatar div {
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base,
|
|
.status__display-name[href*="agatha" i] .status__avatar .account__avatar {
|
|
position: absolute;
|
|
}
|
|
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base::before,
|
|
.status__display-name[href*="agatha" i] .status__avatar .account__avatar::before {
|
|
border-radius: 75% 0 75% 75%;
|
|
transform: rotate(-37.6deg) skew(-30deg);
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base::after,
|
|
.status__display-name[href*="agatha" i] .status__avatar .account__avatar::after {
|
|
border-radius: 0 75% 75%;
|
|
transform: rotate(37.6deg) skew(30deg);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base:hover::before,
|
|
.status__display-name[href*="agatha" i] .status__avatar .account__avatar:hover::before {
|
|
animation: earwiggleright 1s infinite;
|
|
}
|
|
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base:hover::after,
|
|
.status__display-name[href*="agatha" i] .status__avatar .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__display-name[href*="agatha" i] .account__avatar-overlay-base::before,
|
|
.status__display-name[href*="agatha" i] .account__avatar-overlay-base::after,
|
|
.status__display-name[href*="agatha" i] .status__avatar .account__avatar::before,
|
|
.status__display-name[href*="agatha" i] .status__avatar .account__avatar::after {
|
|
background-color: #b87e99;
|
|
border-color: #905671;
|
|
}
|
|
|
|
.status__display-name[href*="agatha_ebooks" i] .account__avatar-overlay-base::before,
|
|
.status__display-name[href*="agatha_ebooks" i] .account__avatar-overlay-base::after,
|
|
.status__display-name[href*="agatha_ebooks" i] .status__avatar .account__avatar::before,
|
|
.status__display-name[href*="agatha_ebooks" i] .status__avatar .account__avatar::after {
|
|
background-color: #486859;
|
|
border-color: #86c69a;
|
|
}
|
|
|
|
.status__display-name[href*="agathasorceress" i] .account__avatar-overlay-base::before,
|
|
.status__display-name[href*="agathasorceress" i] .account__avatar-overlay-base::after,
|
|
.status__display-name[href*="agathasorceress" i] .status__avatar .account__avatar::before,
|
|
.status__display-name[href*="agathasorceress" i] .status__avatar .account__avatar::after {
|
|
background-color: #6f4f74;
|
|
border-color: #47274c;
|
|
} |