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

Posted under e621 Tools and Applications

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;
}
}
Note about eSix Extend compatibility

If you use the 'red glow' on blacklisted posts, use this snippet instead to keep the glow:

@-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.

Updated

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

Updated by anonymous

  • 1