Hello! I am curious if it is possible to add in the feature to the thumbnail information box to show that you favorited that post. Perhaps change the heart that represents the # of people who favorited the post to red when the post is favorited. This would help a lot to quickly see what images I have added to my favorites and to quickly see if I favorited a parent/child post.

Thanks!

red is used for flagged content, but if you for example use -fav:poontang it removes content you've already favorited.

Changing the color of the heart sounds trivial but it's displayed as an emoji on mobile devices, which is already red.

I believe there's a Unicode character that forces it to not display as an emoji, but I'm not sure if that's fully supported by all devices or not. It wouldn't shock me at all if it didn't work on iOS.

I know i'm late and probably necroing this thread, but I have just stumbled upon this problem. Luckily e621 already tags images with the data-is-favorited attribute, so we can play with that in CSS...

We can change the color of the fav counter

[data-is-favorited=true] span.post-score-faves {
    color: orange;
}

Or we can insert a symbol (a star) to the top left corner

article[data-is-favorited=true]:before {
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #ffeb3b, #ff5722);

    content: "";
    position: absolute;
    margin: 5px;
    display: block;
    clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);
}

You can play with the colors, sizes and the shape

You need to put one or both into Settings > Advanced > Custom CSS style

That is very nice. I've added it to my custom CSS for now.

I think I mentioned somewhere that we could use a data-is-voted attribute with up, down, or false values next to data-is-favorited.

re621 adds this

After using this for a few hours, I realized that the star can easily blend into a lot of thumbnails

This code will give it a little border:

article[data-is-favorited=true]::before, article[data-is-favorited=true]::after {
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #ffeb3b, #ff5722);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    display: block;
    z-index: 11;
}

article[data-is-favorited=true]::after {
    background: linear-gradient(45deg, #3F51B5, #2196F3);
    z-index: 10;
    transform: scale(1.5);
}

Yes, I heard about re621, but I prefer pure CSS for these simple problems if possible

As for the voting visualization, the data-is-voted would be fantastic