forked from mirrors/catstodon
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
1.8 KiB
SCSS
107 lines
1.8 KiB
SCSS
// turn the timed line into a highly addictive dopamine slot machine
|
|
|
|
// fav button
|
|
.no-reduce-motion .icon-button.star-icon {
|
|
&.deactivate {
|
|
& > .fa-star {
|
|
animation: none;
|
|
}
|
|
}
|
|
&.activate {
|
|
& > .fa-star {
|
|
animation: spring-rotate-in .8s cubic-bezier(.2, 0, .4, 1);
|
|
}
|
|
}
|
|
}
|
|
@keyframes spring-rotate-in {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
60% {
|
|
transform: rotate(-380deg);
|
|
}
|
|
85% {
|
|
transform: rotate(-355deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
@keyframes spring-rotate-out {
|
|
0% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
60% {
|
|
transform: rotate(20deg);
|
|
}
|
|
85% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
// bookmark button
|
|
.no-reduce-motion .icon-button {
|
|
& > .fa-bookmark {
|
|
transform: translateY(0);
|
|
animation: none;
|
|
}
|
|
&.active > .fa-bookmark {
|
|
animation: bookmark-save .6s cubic-bezier(.2, 0, .4, 1);
|
|
}
|
|
}
|
|
@keyframes bookmark-save {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
transform: translateY(-3px);
|
|
}
|
|
60% {
|
|
transform: translateY(4px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// collapse button at the top right of all posts
|
|
.no-reduce-motion .status__collapse-button {
|
|
&.activate > .fa-angle-double-up {
|
|
animation: spring-flip-in .5s cubic-bezier(.2, 0, .4, 1);
|
|
}
|
|
&.deactivate > .fa-angle-double-up {
|
|
animation: spring-flip-out .5s cubic-bezier(.2, 0, .4, 1);
|
|
}
|
|
}
|
|
@keyframes spring-flip-in {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
60% {
|
|
transform: rotate(-190deg);
|
|
}
|
|
85% {
|
|
transform: rotate(-175deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
@keyframes spring-flip-out {
|
|
0% {
|
|
transform: rotate(-180deg);
|
|
}
|
|
60% {
|
|
transform: rotate(10deg);
|
|
}
|
|
85% {
|
|
transform: rotate(-5deg)
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|