mirror of
https://github.com/p-stream/p-stream.git
synced 2026-03-11 17:55:33 +00:00
add "jiggle physics"
This commit is contained in:
parent
1390f653c1
commit
e26f58e9dc
2 changed files with 18 additions and 1 deletions
|
|
@ -238,3 +238,16 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
|
|||
/* default - otherwise it overwrites*/
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
|
||||
}
|
||||
|
||||
@keyframes jiggle {
|
||||
0%, 100% {
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
.jiggle {
|
||||
animation: jiggle 0.25s infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,7 +129,11 @@ function MediaCardContent({
|
|||
};
|
||||
|
||||
return (
|
||||
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
|
||||
<div
|
||||
className={classNames("media-card-content", { jiggle: closable })}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<Flare.Base
|
||||
className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
|
||||
canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
|
||||
|
|
|
|||
Loading…
Reference in a new issue