Is there any CSS code that makes flagged posts have a red border again?
Posted under General
tapnek said:
Is there any CSS code that makes flagged posts have a red border again?
BrokenEagle98’s version clobbers parent/child status. If you also want the green/red and yellow/red borders for flagged parent and child posts, use these:
.post-preview.post-status-has-children.post-status-flagged img {border-color: lime red red lime} .post-preview.post-status-has-parent.post-status-flagged img {border-color: #CC0 red red #CC0} .post-preview.post-status-flagged img {border-color: red}
If you want purple no matter what...
.post-preview[data-flags="banned"] img { border-color: #F0F; }
...or using kittey's variant above...
.post-preview.post-status-has-children[data-flags="banned"] img {border-color: lime #F0F #F0F lime} .post-preview.post-status-has-parent[data-flags="banned"] img {border-color: #CC0 #F0F #F0F #CC0} .post-preview[data-flags="banned"] img {border-color: #F0F}
That makes sense. Thanks, BrokenEagle98. I hacked together a simple userscript for it over in topic #8502/p2, in case it might be useful to anyone.
The following is an example of an icon overlay that can be used for post information visualization. For the following example, it indicates that the post is part of a pool, although it can be adapted to indicate other data conditions as well.
Note: The below is mostly the same CSS code used to display the animation icon for animated pictures.
#c-posts .post-preview[data-pools^="pool:"]:after, #c-comments .post-preview[data-pools^="pool:"] .preview:after { content: "P"; position: absolute; width: 20px; height: 20px; color: white; font-weight: bold; background-color: rgba(0,0,0,0.5); margin: 2px; text-align: center; right: 0px; top: 0px; } #c-comments .post-preview[data-pools^="pool:"] .preview { position: relative; }
To change the data being tested, just adjust the selector between the square brackets "[ ]". Many of the other stylings can also be freely adjusted, such as content and color.
(2017-05-25) Adjusted the above so that it appears in the upper right-hand corner, which avoids some slight issues it had overlapping with the animation icon.
(2017-05-27) Fixed issue with how the overlay icon was appearing on the comments page.
Updated
Does anyone know how to change the colors of the tag-count gradient in the tag list? I am using Darkbooru from topic #9588, and the white plus gray color of the gradient makes it rather hard to see. It has been pointed out in the said forum that Gollgagh haven't figured it out yet, but that was three years ago, maybe now someone knows.
I tried to figure it out through googling and inspecting the elements, but I do not know CSS...(I just copypaste CSS codes here and there)
It's not possible to replicate the gradient effect, however if you just want to make the color solid, that's doable.
table.striped td, table.striped th { background: darkgrey; }
Replace the value of darkgrey with whatever you want, to include 4-bit or 8-bit RGB values, e.g. #DDD (4-bit) or #FF0F3F (8-bit).
The reason why the gradient effect cannot be replicated is because it's calculated by the server for each tag on the fly and attached to each element. Additionally, CSS properties cannot be modified, they can only be replaced.
background: linear-gradient(to left, #DDD 19.19517372054323%, white 19.19517372054323%);
For example, with the above, the values that would need to be changed are the #DDD and white values, however the whole linear-gradient(...)
counts as one element and cannot be replaced piecemeal.
See the problem there is that particular element uses a linear-gradient() function, the arguments for which are generated logarithmically in Ruby from the tag count: the top tag, 1girl with a 100% gradient and 1.8M posts to its name, down to any empty tag with 0% gradient.
The solution will probably require a script, as (afaik) I can't get the tag count to do anything useful with in pure CSS.
Edit: I fixed my style so that it just clobbers the gradient.
I was previously using the .even and .odd classes to style for table striping, but I guess I needed to specify td
Updated
.odd td { background-color: #1b1b1b !important; } .even td { background-color: #282828 !important; } .even:hover td, .odd:hover td { background-color: #444 !important; } table.striped td, table.striped th { background-blend-mode: multiply; }
This will blend your background-color and the linear-gradient to give the effect back.
For browsers that support it, that is.
Updated
Since the data-is-favorited attribute has been added, it is now possible to add effects to images you have favorited.
The following causes favorited images to be faded, and normal when hovering over. (Credit to reiyasona for this visualization idea)
.post-preview[data-is-favorited="true"] { opacity: 0.5; } .post-preview[data-is-favorited="true"]:hover { opacity: 1.0; }
Updated
BrokenEagle98 said:
Since the data-is-favorited attribute has been added, it is now possible to add effects to images you have favorited.
The following causes favorited images to be faded, and normal when hovering over. (Credit to reiyasona for this visualization idea)
[data-is-favorited="true"] img { opacity: 0.5; } [data-is-favorited="true"] img:hover { opacity: 1.0; }
I tweaked your CSS code a little bit so that it only affects post previews instead of all images.
article.post-preview[data-is-favorited="true"] { opacity: 0.15; } article.post-preview[data-is-favorited="true"]:hover { opacity: 1.0; }
See topic #14113 for the full discussion. Basically though, blacklisted items will appear momentarily as the page loads before the Javascript can hide them. The following CSS codes fixes that and prevents them from displaying at all.
/*Blacklist thumbnails hidden (Common case)*/ article.post-preview.blacklisted.blacklisted-active {display: none !important;} article.post-preview.blacklisted {display: block !important;} article.post-preview {display: none !important;} /*Flex previews*/ article.post-preview.post-preview-fit-fixed.blacklisted.blacklisted-active {display: none !important;} article.post-preview.post-preview-fit-fixed.blacklisted {display: inline-flex !important;} /*Inline block previews*/ .post-gallery-inline article.post-preview.blacklisted.blacklisted-active {display: none !important;} .post-gallery-inline article.post-preview.blacklisted {display: inline-block !important;} /*Blacklist image hidden*/ .image-container.blacklisted.blacklisted-active {display: none !important;} .image-container.blacklisted {display: inline-block !important;} .image-container {display: none !important;} /*Images added after blacklist has been processed*/ #recommended article.post-preview {display: block !important;} .post-tooltip-body article.post-preview {display: inline-flex !important;} /*Pages without blacklist controls*/ #c-iqdb-queries article.post-preview {display: inline-flex !important;} #iqdb-similar article.post-preview {display: inline-flex !important;} #related-posts-by-source article.post-preview {display: inline-flex !important;} #related-posts-by-source, #iqdb-similar {vertical-align: top;} .iqdb-posts article.post-preview:not(.hidden) {display: block !important;}
inline-block
!important
by default from custom CSSUpdated