124 lines
3.0 KiB
CSS
124 lines
3.0 KiB
CSS
.catified>:not(.status-container) .Avatar::before, .catified>:not(.status-container) .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: 0;
|
|
}
|
|
|
|
.catified>:not(.status-container) .Avatar {
|
|
overflow: visible;
|
|
border-radius: 100%!important;
|
|
}
|
|
|
|
.catified .user-info-avatar-link-overlay {
|
|
border-radius: 100%!important;
|
|
z-index: 1;
|
|
}
|
|
|
|
.catified>:not(.status-container) .Avatar img, .catified>:not(.status-container) .Avatar canvas {
|
|
border-radius: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
position: absolute;
|
|
}
|
|
|
|
.catified>:not(.status-container) .Avatar::before {
|
|
transform: rotate(-37.6deg) skew(-30deg);
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.catified.cat>:not(.status-container) .Avatar::before {
|
|
border-radius: 75% 0 75% 75%;
|
|
}
|
|
|
|
.catified.bear>:not(.status-container) .Avatar::before {
|
|
border-radius: 75%;
|
|
top: -3px;
|
|
}
|
|
|
|
.catified .Avatar:hover::before {
|
|
animation: earwiggleright 1s infinite;
|
|
}
|
|
|
|
.catified>:not(.status-container) .Avatar::after {
|
|
transform: rotate(37.6deg) skew(30deg);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.catified.cat>:not(.status-container) .Avatar::after {
|
|
border-radius: 0 75% 75%;
|
|
}
|
|
|
|
.catified.bear>:not(.status-container) .Avatar::after {
|
|
border-radius: 75%;
|
|
top: -3px;
|
|
}
|
|
|
|
.catified .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); }
|
|
}
|
|
|
|
.catified.rabbit>:not(.status-container) .Avatar::before,
|
|
.catified.rabbit>:not(.status-container) .Avatar::after {
|
|
/* 100px makes that it's actually just rounding and not a curve between the top and the sides */
|
|
border-radius: 100px 100px 0 0;
|
|
border-width: 3px;
|
|
height: 100%;
|
|
}
|
|
.catified.rabbit>:not(.status-container) .Avatar::before {
|
|
transform: rotate(10deg);
|
|
top: -.5rem;
|
|
right: 13.25%;
|
|
width: 18.5%;
|
|
}
|
|
.catified.rabbit>:not(.status-container) .Avatar::after {
|
|
transform: none;
|
|
top: -.7rem;
|
|
left: 13.25%;
|
|
width: 20%;
|
|
}
|
|
.catified.rabbit .Avatar:hover::before { animation: earwiggleright-rabbit 0.65s infinite; }
|
|
.catified.rabbit .Avatar:hover::after { animation: earwiggleleft-rabbit 0.65s infinite; }
|
|
|
|
@keyframes earwiggleleft-rabbit {
|
|
from { transform: rotate(0deg); }
|
|
75% { transform: rotate(-25deg); }
|
|
to { transform: rotate(0deg); }
|
|
}
|
|
|
|
@keyframes earwiggleright-rabbit {
|
|
from { transform: rotate(10deg); }
|
|
75% { transform: rotate(25deg); }
|
|
to { transform: rotate(10deg); }
|
|
}
|