Pixiv Visuals by FATamerican

@-moz-document url-prefix("https://www.pixiv.net") {
/* ==UserStyle==
@name			Pixiv Visuals
@namespace		github.com/openstyles/stylus
@version		1.0.0
@description	adds animations, color flavor to artist's name, and removes ads
@author			GlawGlack
@license		unlicense
@preprocessor	stylus
==/UserStyle== */

/* add some color flavor to artist's names */
.zpXSa,.IYOBi,.jIsznR,.hhXJW,.hZKJGk,.sc-iCoGMd,
.bEJEdF, /*recommended users doesn't work?*/
.MJMrP,.ckOiyJ,.bTtACY,.ibhMns,.gqaiMp,.QHGGh
{
    animation: glow 2s ease-in-out infinite alternate !important;
}

/* animate follow buttons (artist + related/recommended) on hover */
.Rlftz:hover,.dMrNyO:hover,.gODvOj:hover,
._2Of8xxg:hover, .bOA-dWm:hover,.fliWFr:hover
{
    animation: shift .5s ease-in-out infinite !important;
}

/* favorited outter heart */
.bXjFLc
{
    color: rgb(0, 0, 0);
    transform: scale(1, 1);
}

/* favorited outter heart hover */
.bXjFLc:hover
{
    color: rgb(0, 0, 0);
}

/* favorited inner heart */
.bXjFLc .sc-j89e3c-0
{
    fill: rgb(255, 116, 172);
    transform: scale(1, 1);
}

/* favorited inner heart hover */
.bXjFLc .sc-j89e3c-0:hover
{
    fill: rgb(255, 255, 255);
}

/* right user pane, lots of blank space / 'no mo ads' text */
.gvleGn
{
    height: 150px;
    width: 350px;
}

/* unfavorited outter heart */
.fYcrPo
{
    fill: rgb(0, 0, 0);
    transform: scale(1.25, 1.25);
}

/* unfavorited inner heart */
.fYcrPo .sc-j89e3c-0
{
    fill: rgb(255, 255, 255);
    transform: scale(1, 1);
}

/* unfavorited inner heart hover */
.fYcrPo .sc-j89e3c-0:hover
{
    fill: rgb(255, 116, 172);
}

/* heart alignment */
.iHfghO
{
    bottom: -2px;
    right: -2px;
    height: 32px;
}

/* animate all favorite buttons (current + related/recommended) */
.fgVkZi,
.fYcrPo,
.cXSAgn
{
    background-color: transparent !important;
    animation: move 3.0s ease-in-out infinite !important;
    color: #ff4767 !important;
}

/*animate favorite buttons (current + related/recommended) on hover */
.fgVkZi:hover,
.cXSAgn:hover
{
    animation: combo 3.0s ease-in-out infinite !important;
}

/* ads / blank spaces */
#root > div.charcoal-token > div > div:nth-child(3) > div > div > div.sc-1nr368f-3.dkdRNk > main > section > div.sc-171jvz-0.gcrJTU > div > div.sc-185y4-0.bisbq > iframe,
#root > div.charcoal-token > div > div:nth-child(3) > div > div > div.sc-1nr368f-3.dkdRNk > main > section > div.sc-171jvz-0.gcrJTU > div > div.sc-185y4-0.bisbq,
#root > div.charcoal-token > div > div:nth-child(3) > div > div > div.sc-1nr368f-3.dkdRNk > main > section > div.sc-171jvz-0.gcrJTU > div > div.sc-rsntqo-0.fPeueM > div > div.sc-ye57th-1.lbzRfC > section > div.sc-181ts2x-2.bTImJG > button > svg,
.kAlgZr,
.lxYKE, .sc-185y4-0,
.hKYKav
{
    height: 0px !important;
    pointer-events: none;
    width: 0px;
    visibility: hidden;
}

/* change image title, mainpage titles to lime color */
/*
.bOcolJ,.kWbWNM,.hduKTf,.eASOvo
{
color: lime;
}
*/
.sc-4nj1pr-5, .cRPGXW/* remove premium/trial blurbs */
{
    visibility: hidden !important;
    height: 0px;
}

/* animations*/
@keyframes combo
{
    0%
    {
        transform: translate(0px, -1px) rotateZ(0deg);
    }

    25%
    {
        transform: translate(0px, -2px) rotateZ(30deg);
    }

    50%
    {
        transform: translate(0px, -1px) rotateZ(0deg);
    }

    75%
    {
        transform: translate(0px, -3px) rotateZ(-30deg);
    }

    100%
    {
        transform: translate(0px, -1px) rotateZ(0deg);
    }
}

@keyframes move
{
    0%
    {
        transform: translate(0px, -1px);
    }

    25%
    {
        transform: translate(0px, -2px);
    }

    50%
    {
        transform: translate(0px, -1px);
    }

    75%
    {
        transform: translate(0px, -3px);
    }

    100%
    {
        transform: translate(0px, -1px);
    }
}

@keyframes shift
{
    0%
    {
        transform: translate(0%, 0);
    }

    25%
    {
        transform: translate(2%, 5%);
    }

    50%
    {
        transform: translate(5%, 0%);
    }

    75%
    {
        transform: translate(2%, 5%);
    }

    100%
    {
        transform: translate(0%, 0);
    }
}

@keyframes glow
{
    from
    {
        color: #e26fff;
    }

    to
    {
        color: #79fff5;
    }
}

/*
@keyframes wiggle {
    0%,
    7% {
        transform: rotateZ(0);
    }
    15% {
        transform: rotateZ(-15deg);
    }
    20% {
        transform: rotateZ(10deg);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    30% {
        transform: rotateZ(6deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    40%,
    100% {
        transform: rotateZ(0);
    }
}*/
}