Topic: Thumbnail Highlighters for 'animated' Posts (userstyle snippets)

These snippets visually distinguish thumbnails for posts that are tagged 'animated'. They have no way of checking if a post is actually animated.

The two styles can be used together, if desired.

Dashed Border

Applies a sky blue border of dashed lines. If the thumb would otherwise normally have a border, the normal border color is used with dashed lines. This applies wherever thumbnails normally have borders: the posts page, forum posts, blips, etc. but not avatars. If you want to know when avatars are animated too, just remove ":not(.avatar)"

@-moz-document domain("e621.net"), domain("e926.net") {
[alt~=animated]:not(.avatar).preview {
    border-style: dashed !important;
    border-color: rgb(0, 182, 255);
    border-width: 3px;
}

img.flagged { border-color: #F00 !important; }
img.deleted { border-color: #DD511F !important; }
img.has-children { border-color: #0F0 !important; }
img.has-parent { border-color: #CC0 !important; }
img.pending { border-color: #00F !important; }

}

Thick Top Border

Applies a sky blue solid border to the top of thumbnails that is a bit thicker than the normal border. This style does not apply to thumbnails inserted via DText, and it does not interfere with the normal borders.

@-moz-document domain("e621.net"), domain("e926.net") {
span.thumb [alt~=animated].preview {
    box-shadow: 0 -2px 0 black, 0 -8px 0 rgb(0, 182, 255) !important;
}

#child-posts-expanded-thumbs {
    margin-top: 18px;
}
}

@-moz-document url-prefix("https://e621.net/user/show/"), url-prefix("https://e926.net/user/show/") {
div#userpage>div:not(#recent-user):not(#blog)>h4+div, div#content>div#userpage+div>h4+div {
    margin-bottom: 10px;
    margin-top: 10px;
}
}

@-moz-document domain("e621.net"), domain("e926.net") {
span.thumb [alt~=animated].preview {
    box-shadow: 0 -2px 0 black, 0 -8px 0 rgb(0, 182, 255) !important;
}
span.thumb.blacklistedPost [alt~=animated].preview {
    box-shadow: 0 -2px 0 black, 0 -8px 0 rgb(0, 182, 255), 0 0 6px #F00 !important;
}

#child-posts-expanded-thumbs {
    margin-top: 18px;
}
}

@-moz-document url-prefix("https://e621.net/user/show/"), url-prefix("https://e926.net/user/show/") {
div#userpage>div:not(#recent-user):not(#blog)>h4+div, div#content>div#userpage+div>h4+div {
    margin-bottom: 10px;
    margin-top: 10px;
}
}

If you don't know how to use userstyles, the easiest way is probably to use the Stylish extension for Firefox and Chrome. In the options, create a new style, name it, and then import the snippets as Mozilla format.

I have animated type:gif blacklisted to avoid loading huge GIFs. This CSS may work better.

Thick Top Border was updated to fix a few minor annoyances.