Topic: css broke

after the latest site update, the css script that i stole took from the now-locked layout-change-containment-thread broke :/
were there any css tag changes that weren't listed or something to that effect?

oceanman666 said:
after the latest site update, the css script that i stole took from the now-locked layout-change-containment-thread broke :/
were there any css tag changes that weren't listed or something to that effect?

I mean... what did it do? Do you have the CSS?

without knowing what your CSS is or what it was supposed to do there's not really anything anyone can do to try to resolve... whatever your issue is.

I have something similar. I was using CSS that reverted the recent layout changes, but it seems yesterday's update messed with the card backgrounds and thumbnail previews. Not fatal, but the thumbnails not displaying properly is a big annoyance.

article img {
  pointer-events: unset;
}
.wiki-excerpt { display: none; }

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

Here's a fixed CSS:
post #4204011

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

theoldguy said:
Here's a fixed CSS:
post #4204011

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

That did the trick. Cheers, legend.

mklxiv said:
I mean... what did it do? Do you have the CSS?

i was going to do a quote/link to the original post, buut i got sidetracked and forgot
anyway, here's the css that i was/am using:

/* restore old layout */

@media (min-width: 800px) {
    body[data-st-contain="true"] article.thumbnail {
        min-height: unset;
        max-width: var(--thumb-image-size);
    }
}

body[data-st-contain="true"] article.thumbnail a { 
    background: unset;
    height: unset;
}

body[data-st-contain="true"] article.thumbnail img { 
    width: unset;
    max-width: 100%;
}

article.thumbnail .desc { 
    max-width: var(--thumb-image-size);
    height: unset;
}

/* make blacklisted avatars less scuffed */

.comment-post-grid .author-info .avatar .post-thumbnail.blacklisted img {
    padding: 150px 150px 0 0;
    background-size: 150px;
}

it made it so that there was far less deadspace on the site, pretty much reverting like most of the changes from 2 weeks ago (i think the blacklisted avatar thing got fixed, though, and probably isn't needed)
since about yesterday, it no longer appears to do... much of anything, really. i tried clearing my cache and stuff but nothing changed.

They broke the css again.

theoldguy said:
Here's a fixed CSS:
post #4204011

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

Worked flawlessly.

daneasaur said:
Worked flawlessly.

critical_stiban said:
They broke the css again.

sure enough refreshing the CSS fixes it. Dammit e6....

New update appears to have broken this once again.

critical_stiban said:
sure enough refreshing the CSS fixes it. Dammit e6....

I am committed to breaking y'all's custom CSS at least once or twice a month.

Deleted images are still broken with this

theoldguy said:
Here's a fixed CSS:
post #4204011

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

cinder said:
I am committed to breaking y'all's custom CSS at least once or twice a month.

But why ;.;

theoldguy said:
Here's a fixed CSS:
post #4204011

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

New update broke it again, I've been using this and need a fix

cinder said:
I am committed to breaking y'all's custom CSS at least once or twice a month.

I do want to say, I'm not sure if this is just part of the process or an intended function, but I'm glad that class names of overhauled elements are not the same as the old ones. I mean, I can't even imagine how fucked up the site would look if BitWolfy's gigantic list of CSS fixes (from way back during the early days of NG) still did stuff for for anyone who had it in their settings.

cinder said:
I am committed to breaking y'all's custom CSS at least once or twice a month.

Clearly! I made that response four months ago and it was relevant today xD
It’s why I went ahead and forwarded the idea to have the letterboxing be a toggle.

Anyone know of a way to re-fix the Parent/Child/etc letter labels I had fixed with this bit of CSS someone made?

.has-children div.desc .rating::after { content:" P"; color:white; font-weight:normal; }
.has-parent div.desc .rating::after { content:" C"; color:white; font-weight:normal; }
.has-children.has-parent div.desc .rating::after { content:" PC"; color:white; font-weight:normal; }

This no longer works, is really necessary for me to tell from the thumbnails whether a post is a parent or child of another posts, where they may need to be added or fixed (the color borders just don't work for me; the colors are often difficult to discern, can blend into the image, and I can't keep straight which colors means what; the letter labels are far more intuitive and easy to see). If it could be updated to include U (pending) and F (flagged) like was originally there as well, I would love you.

Also something to fix each row of thumbnails to have a consistent height and be vertically centered as necessary would be appreciated.

poppintarts said:
New update broke it again, I've been using this and need a fix

So I was able to kinda fix it by adding "aspect-ratio: 0 !important;" to the "article.thumbnail a" properties. I have no idea if this will break anything else on the site and if it does a better fix may be needed.

watsit said:
Anyone know of a way to re-fix the Parent/Child/etc letter labels I had fixed with this bit of CSS someone made?

.has-children div.desc .rating::after { content:" P"; color:white; font-weight:normal; }
.has-parent div.desc .rating::after { content:" C"; color:white; font-weight:normal; }
.has-children.has-parent div.desc .rating::after { content:" PC"; color:white; font-weight:normal; }

This no longer works, is really necessary for me to tell from the thumbnails whether a post is a parent or child of another posts, where they may need to be added or fixed (the color borders just don't work for me; the colors are often difficult to discern, can blend into the image, and I can't keep straight which colors means what; the letter labels are far more intuitive and easy to see). If it could be updated to include U (pending) and F (flagged) like was originally there as well, I would love you.

Is this what you wanted?

waydence said:
Is this what you wanted?

Took me a bit to find the actual bit of CSS (I think it's this?)

/* (Post index/Thumbs) Adds P to posts with parents, C with children, U for pending, F for flagged 25-11-06 */
.thumbnail {.thm-desc-a:after {content: var(--has-parent, "") var(--has-children, "") var(--pending, "") var(--flagged, ""); font-weight: normal}
&.has-parent {--has-parent: "P"} &.has-children {--has-children: "C"} &.pending {--pending: "U"} &.flagged {--flagged: "F"} }

Unfortunately it doesn't work. I added that to my custom CSS (removing what was already there for it), but it only shows the score, favorite count, comment count, and rating in that new style since the update.

watsit said:
Took me a bit to find the actual bit of CSS (I think it's this?)

/* (Post index/Thumbs) Adds P to posts with parents, C with children, U for pending, F for flagged 25-11-06 */
.thumbnail {.thm-desc-a:after {content: var(--has-parent, "") var(--has-children, "") var(--pending, "") var(--flagged, ""); font-weight: normal}
&.has-parent {--has-parent: "P"} &.has-children {--has-children: "C"} &.pending {--pending: "U"} &.flagged {--flagged: "F"} }

Unfortunately it doesn't work. I added that to my custom CSS (removing what was already there for it), but it only shows the score, favorite count, comment count, and rating in that new style since the update.

I think Pale Moon doesn't support CSS Nesting Selector: https://forum.palemoon.org/viewtopic.php?p=262652. Here's the un-nested code:

/* (Post index/Thumbs) Adds P to posts with parents, C with children, U for pending, F for flagged 25-11-06 */
.thm-desc-a:after {content: var(--has-parent, "") var(--has-children, "") var(--pending, "") var(--flagged, ""); font-weight: normal}
.has-parent {--has-parent: "P"} .has-children {--has-children: "C"} .pending {--pending: "U"} .flagged {--flagged: "F"}

It's kind of unnecessary here anyway, and I'll remove it in other styles where possible.

Not sure why you couldn't find it, it should've scrolled you down to the snippet, palemoon supports that - I checked.

waydence said:
Not sure why you couldn't find it, it should've scrolled you down to the snippet, palemoon supports that - I checked.

Palemoon does support auto-scroll to anchors in links, yes. But maybe there's an issue with it being in a collapsed/hidden section and not visible? Clicking Reply for forum posts has a similar issue where it doesn't automatically scroll to the reply box, which isn't opened by that click (I have to click the "Reply »" link at the bottom to open the reply box, where it will have the post quoted for me to reply already). If I click "Reply »" first to open the reply box, then click Reply on a specific forum post, then it does automatically scroll to the reply box with the message quoted.

The updated CSS snippet does work regardless. Thanks a bunch for it.

So has there been a fix for the CSS as it still has the wacky cropping and nothing is framed right.

daneasaur said:
So has there been a fix for the CSS as it still has the wacky cropping and nothing is framed right.

.posts-container { align-items: end; } 
.c-pools.a-gallery .posts-container { align-items: start; }
a.thm-link {
  aspect-ratio: unset;
  max-height: var(--thumb-image-size, 150px);
  min-height: calc(var(--thumb-image-size, 150px) / 3);
}

if you're talking about thumbnail resizing and alignment, I believe that this is all that I use to have it to what I prefer.

dfn-451 said:

.posts-container { align-items: end; } 
.c-pools.a-gallery .posts-container { align-items: start; }
a.thm-link {
  aspect-ratio: unset;
  max-height: var(--thumb-image-size, 150px);
  min-height: calc(var(--thumb-image-size, 150px) / 3);
}

if you're talking about thumbnail resizing and alignment, I believe that this is all that I use to have it to what I prefer.

Should this be just added wholesale to the current CSS in the thread or on it's own or does it replace something?

daneasaur said:
Should this be just added wholesale to the current CSS in the thread or on it's own or does it replace something?

Uhh, here's what I got, it's as "fixed" as I've been able to get it on my end. I don't remember if I just copied it wholesale or not. Pretty sure I did? Give it a shot, save your old stuff in a text file first, though.

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
    aspect-ratio: 0 !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

.posts-container { align-items: end; } 
.c-pools.a-gallery .posts-container { align-items: start; }
a.thm-link {
  aspect-ratio: unset;
  max-height: var(--thumb-image-size, 150px);
  min-height: calc(var(--thumb-image-size, 150px) / 3);
}

votp said:
Uhh, here's what I got, it's as "fixed" as I've been able to get it on my end. I don't remember if I just copied it wholesale or not. Pretty sure I did? Give it a shot, save your old stuff in a text file first, though.

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
    aspect-ratio: 0 !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

.posts-container { align-items: end; } 
.c-pools.a-gallery .posts-container { align-items: start; }
a.thm-link {
  aspect-ratio: unset;
  max-height: var(--thumb-image-size, 150px);
  min-height: calc(var(--thumb-image-size, 150px) / 3);
}

I noticed that while this fixes the dead space, the grid items aren't centered. I was able to fix this by adding "align-items: center !important;" and "justify-items: center !important;" to any of the "section.posts-container" code blocks.

soskem said:
I noticed that while this fixes the dead space, the grid items aren't centered. I was able to fix this by adding "align-items: center !important;" and "justify-items: center !important;" to any of the "section.posts-container" code blocks. Note that I didn't use the snippet provided by dfn-451 when I tested this, so it may conflict.

as a note, align-items is vertical (up/down), justify-items is horizontal. you probably don't want align-items.

_{now, text-align is horizontal, for some reason, but every other usage of the word "align" is vertical... I... think. totally not confusing.}

dfn-451 said:
as a note, align-items is vertical (up/down), justify-items is horizontal. you probably don't want align-items.

_{now, text-align is horizontal, for some reason, but every other usage of the word "align" is vertical... I... think. totally not confusing.}

I considered that and I tried it with just justify-items, but for me personally it looked better when the grid items were centered both vertically and horizontally, but this can be changed to suit one's preference.

votp said:
Uhh, here's what I got, it's as "fixed" as I've been able to get it on my end. I don't remember if I just copied it wholesale or not. Pretty sure I did? Give it a shot, save your old stuff in a text file first, though.

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
    aspect-ratio: 0 !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

.posts-container { align-items: end; } 
.c-pools.a-gallery .posts-container { align-items: start; }
a.thm-link {
  aspect-ratio: unset;
  max-height: var(--thumb-image-size, 150px);
  min-height: calc(var(--thumb-image-size, 150px) / 3);
}

This version seems to be the fix for me, so thank you (until it is broken again).

daneasaur said:
This version seems to be the fix for me, so thank you (until it is broken again).

So probably all of a week.
post #2912215

Seriously, I don't get it. Maybe we need a long-term "Site Defuckification" thread to act as a staging area for CSS repair so people have a set place to go and get updates every time another change is made.

Is there anyone that can help me fix my css and get the thumbnails closer to what I had before? I have before/after screenshots from an old tab if needed for reference.

.tag-list-item { border: none; }
.tag-list { gap: 0; }


h5.tag-list-header,
ul.tag-list {
	font-size: .85rem
}

ul.tag-list {
	flex-flow: column;
	gap: 0;
	line-height: 1rem;
	margin: 0 -.5rem .25rem 0
}

ul.tag-list li {
	gap: 0;
	padding-right: 1rem
}

ul.tag-list li a {
	display: block;
	line-height: 1rem;
	padding: 0
}

ul.tag-list li.tag-general a,
ul.tag-list li.tag-general a:link,
ul.tag-list li.tag-general a:visited {
	background: unset;
	color: var(--color-tag-general)
}

ul.tag-list li.tag-general a:hover {
	background: unset;
	color: var(--color-tag-general-alt)
}

ul.tag-list li.tag-artist a,
ul.tag-list li.tag-artist a:link,
ul.tag-list li.tag-artist a:visited {
	background: unset;
	color: var(--color-tag-artist)
}

ul.tag-list li.tag-artist a:hover {
	background: unset;
	color: var(--color-tag-artist-alt)
}

ul.tag-list li.tag-contributor a,
ul.tag-list li.tag-contributor a:link,
ul.tag-list li.tag-contributor a:visited {
	background: unset;
	color: var(--color-tag-contributor)
}

ul.tag-list li.tag-contributor a:hover {
	background: unset;
	color: var(--color-tag-contributor-alt)
}

ul.tag-list li.tag-copyright a,
ul.tag-list li.tag-copyright a:link,
ul.tag-list li.tag-copyright a:visited {
	background: unset;
	color: var(--color-tag-copyright)
}

ul.tag-list li.tag-copyright a:hover {
	background: unset;
	color: var(--color-tag-copyright-alt)
}

ul.tag-list li.tag-character a,
ul.tag-list li.tag-character a:link,
ul.tag-list li.tag-character a:visited {
	background: unset;
	color: var(--color-tag-character)
}

ul.tag-list li.tag-character a:hover {
	background: unset;
	color: var(--color-tag-character-alt)
}

ul.tag-list li.tag-species a,
ul.tag-list li.tag-species a:link,
ul.tag-list li.tag-species a:visited {
	background: unset;
	color: var(--color-tag-species)
}

ul.tag-list li.tag-species a:hover {
	background: unset;
	color: var(--color-tag-species-alt)
}

ul.tag-list li.tag-invalid a,
ul.tag-list li.tag-invalid a:link,
ul.tag-list li.tag-invalid a:visited {
	background: unset;
	color: var(--color-tag-invalid)
}

ul.tag-list li.tag-invalid a:hover {
	background: unset;
	color: var(--color-tag-invalid-alt)
}

ul.tag-list li.tag-meta a,
ul.tag-list li.tag-meta a:link,
ul.tag-list li.tag-meta a:visited {
	background: unset;
	color: var(--color-tag-meta)
}

ul.tag-list li.tag-meta a:hover {
	background: unset;
	color: var(--color-tag-meta-alt)
}

ul.tag-list li.tag-lore a,
ul.tag-list li.tag-lore a:link,
ul.tag-list li.tag-lore a:visited {
	background: unset;
	color: var(--color-tag-lore)
}

ul.tag-list li.tag-lore a:hover {
	background: unset;
	color: var(--color-tag-lore-alt)
}

ul.tag-list li .tag-list-inc,
ul.tag-list li .tag-list-wiki {
	display: flex
}

ul.tag-list li .tag-list-search {
	border-radius: 0
}

ul.tag-list li .tag-list-search svg {
	color: var(--color-tag-artist)
}

ul.tag-list li .tag-list-search svg .check {
	color: var(--color-text)
}

ul.tag-list li .tag-list-count {
	color: var(--color-text-muted);
	font-size: .85em;
	margin: unset;
	padding: unset
}

ul.tag-list li .tag-list-actions {
	display: flex
}

ul.tag-list li.blacklisted,
ul.tag-list li:hover {
	padding-right: 0
}

ul.tag-list li.blacklisted .tag-list-quick-blacklist,
ul.tag-list li:hover .tag-list-quick-blacklist {
	display: flex
}

ul.tag-list li.blacklisted .tag-list-quick-blacklist svg {
	color: var(--color-text-muted)
}

ul.tag-list li.blacklisted .tag-list-quick-blacklist svg:hover {
	color: var(--color-link-hover)
}

ul.tag-list li.blacklisted .tag-list-quick-blacklist svg .line {
	color: transparent
}

article.thumbnail img {
object-fit: contain;
}

section.posts-container {
--thumb-image-size: 150px;
}

@media (max-width: 50rem) {
section.posts-container { grid-template-columns: repeat(3, 1fr); }}

.posts-container a, .posts-container img { height: fit-content; }
.posts-container .thumbnail { align-self: start; }

@media (max-width: 50rem) {
section.posts-container { grid-template-columns: repeat(3, 1fr); }}

.posts-container img { height: fit-content; }
.posts-container { align-items: start;

#ptbr-wrapper .ptbr-favorite-button[favorited="false"] {
 background-color: rgb(47, 157, 47);
 box-shadow: 0 .25rem rgb(0, 100, 0);
}
#ptbr-wrapper .ptbr-favorite-button[favorited="true"] {
 background-color: rgb(47, 157, 47);
 box-shadow: 0 .25rem rgb(0, 100, 0);
}

votp said:
So probably all of a week.
post #2912215

Seriously, I don't get it. Maybe we need a long-term "Site Defuckification" thread to act as a staging area for CSS repair so people have a set place to go and get updates every time another change is made.

Probably something we should just upkeep.

Also there is ONE flaw which is that this CSS doesn't show deleted submissions so you can't view the comments and such on them.

collarslut said:
Is there anyone that can help me fix my css and get the thumbnails closer to what I had before? I have before/after screenshots from an old tab if needed for reference.

I am, send me the description of what it's supposed to do and the screenshots.

Haven't read the whole thread but do we have a script that makes all the little symbols and stuff at the bottom of each thumbnail look like before?

supina said:
Haven't read the whole thread but do we have a script that makes all the little symbols and stuff at the bottom of each thumbnail look like before?

.thm-desc-m {
  font-size: .85rem;
  font-weight: normal;
  margin-right: -.125em;
}
.thm-desc-m svg { display: none; }
.thm-favorites { color: white; }
.thm-score-neutral { color: grey; }
.thm-desc-m.thm-score { font-weight: bold; }
.thm-desc-m::before { margin-right: -.125em; }
.thm-score-positive::before { content:"↑"; }
.thm-score-negative::before { content:"↓-"; }
.thm-score-neutral::before { content:"↕"; }
.thm-favorites::before { content:"♥"; }
.thm-comments::before { content:"C"; }

that changes the look of most of it back to how it was before. the ratings dogear thing is still the same, and the numbers still get shortened to #.#k.

/*Unploader usernames*/
#image-container::after {
  white-space: pre;
  content: "\aUploaded by: " attr(data-uploader);
}

This used to put the uploader username below the image, but some recent update now puts the username on the right side of image (which is often out of the intended bounds of the display). Does someone know how to fix it?

ruppari said:

/*Unploader usernames*/
#image-container::after {
  white-space: pre;
  content: "\aUploaded by: " attr(data-uploader);
}

This used to put the uploader username below the image, but some recent update now puts the username on the right side of image (which is often out of the intended bounds of the display). Does someone know how to fix it?

This is the fix, there's also a version that puts it above the image, with size, filetype, score and favcount.

waydence said:
This is the fix, there's also a version that puts it above the image, with size, filetype, score and favcount.

Thank you!

votp said:
Uhh, here's what I got, it's as "fixed" as I've been able to get it on my end. I don't remember if I just copied it wholesale or not. Pretty sure I did? Give it a shot, save your old stuff in a text file first, though.

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
    aspect-ratio: 0 !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

.posts-container { align-items: end; } 
.c-pools.a-gallery .posts-container { align-items: start; }
a.thm-link {
  aspect-ratio: unset;
  max-height: var(--thumb-image-size, 150px);
  min-height: calc(var(--thumb-image-size, 150px) / 3);
}

deleted posts are still broken sadly

dfn-451 said:
that changes the look of most of it back to how it was before. the ratings dogear thing is still the same, and the numbers still get shortened to #.#k.

Thanks!