@charset "utf-8";
.like-button {
border: 2px solid #c7c7c7;
border-radius: 40px;
padding: 0.7rem .75rem;
color: #878787;
font-weight: bold;
display: inline-block;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.like-button.liked {
color: #ff6e6f;
border-color: currentColor;
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
.like-button:hover {
border-color: currentColor;
}
.like-button .text{display: inline-block;vertical-align: middle;margin: 0;}
.like-icon {
width: 18px;
height: 16px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: .25em;
font-size: 1.5rem;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: 100%;
-webkit-animation: heartUnlike 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartUnlike 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon {
-webkit-animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon [class^="heart-animation-"] {
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 14px;
opacity: 0;
}
.liked .like-icon [class^="heart-animation-"]::before, .liked .like-icon [class^="heart-animation-"]::after {
content: '';
background: inherit;
background-size: 100%;
width: inherit;
height: inherit;
display: inherit;
position: relative;
top: inherit;
left: inherit;
opacity: 0;
}
.liked .like-icon .heart-animation-1 {
-webkit-animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon .heart-animation-1::before, .liked .like-icon .heart-animation-1::after {
width: 12px;
height: 10px;
visibility: hidden;
}
.liked .like-icon .heart-animation-1::before {
opacity: .6;
-webkit-animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon .heart-animation-1::after {
-webkit-animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: .75;
}
.liked .like-icon .heart-animation-2 {
-webkit-animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon .heart-animation-2::before, .liked .like-icon .heart-animation-2::after {
width: 10px;
height: 8px;
visibility: hidden;
}
.liked .like-icon .heart-animation-2::before {
-webkit-animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: .25;
}
.liked .like-icon .heart-animation-2::after {
-webkit-animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: .4;
}
@-webkit-keyframes heartPulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@keyframes heartPulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@-webkit-keyframes heartUnlike {
50% {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
}
@keyframes heartUnlike {
50% {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
}
@-webkit-keyframes heartFloatMain-1 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
opacity: 1;
-webkit-transform: translate(0, -25px) rotate(-20deg);
transform: translate(0, -25px) rotate(-20deg);
}
}
@keyframes heartFloatMain-1 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
opacity: 1;
-webkit-transform: translate(0, -25px) rotate(-20deg);
transform: translate(0, -25px) rotate(-20deg);
}
}
@-webkit-keyframes heartFloatMain-2 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0) scale(0);
transform: translate(0) rotate(0) scale(0);
}
50% {
opacity: .9;
-webkit-transform: translate(-10px, -38px) rotate(25deg) scale(1);
transform: translate(-10px, -38px) rotate(25deg) scale(1);
}
}
@keyframes heartFloatMain-2 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0) scale(0);
transform: translate(0) rotate(0) scale(0);
}
50% {
opacity: .9;
-webkit-transform: translate(-10px, -38px) rotate(25deg) scale(1);
transform: translate(-10px, -38px) rotate(25deg) scale(1);
}
}
@-webkit-keyframes heartFloatSub-1 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(13px, -13px) rotate(30deg);
transform: translate(13px, -13px) rotate(30deg);
}
}
@keyframes heartFloatSub-1 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(13px, -13px) rotate(30deg);
transform: translate(13px, -13px) rotate(30deg);
}
}
@-webkit-keyframes heartFloatSub-2 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(18px, -10px) rotate(55deg);
transform: translate(18px, -10px) rotate(55deg);
}
}
@keyframes heartFloatSub-2 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(18px, -10px) rotate(55deg);
transform: translate(18px, -10px) rotate(55deg);
}
}
@-webkit-keyframes heartFloatSub-3 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(-10px, -10px) rotate(-40deg);
transform: translate(-10px, -10px) rotate(-40deg);
}
100% {
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
}
@keyframes heartFloatSub-3 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(-10px, -10px) rotate(-40deg);
transform: translate(-10px, -10px) rotate(-40deg);
}
100% {
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
}
@-webkit-keyframes heartFloatSub-4 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(2px, -18px) rotate(-25deg);
transform: translate(2px, -18px) rotate(-25deg);
}
}
@keyframes heartFloatSub-4 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(2px, -18px) rotate(-25deg);
transform: translate(2px, -18px) rotate(-25deg);
}
}