Donmai

Custom CSS Thread

Posted under General

user 499293

tapnek said:

Usernames in both comments and forum threads are no longer bolded. I don't know if this is a temporary measure, but this is disorienting. Is there CSS to make them bolded again?

div.author-name {
  font-weight: bold;
}
Reply
Hyozen

Not sure if it was already posted here, but I couldn't find it so far, CSS settings to avoid accidentally uploading dupes or 1upping when the site not automatically redirect you to the duplicate page, because the file was updated, is a revision or anything that changes the MD5.

From discord also, makes similar posts visible by default, sometimes a dupe gets hidden and you have to expand it:

.iqdb-posts-low-similarity {display: inline-block !important;}

Makes posts with high similarity have a red background, in case you're too fast:

.iqdb-posts-high-similarity{display:inline-block;background-color:#ff0000;}

Or, in case you're scatterbrained like me, I use a rainbow background because sometimes the red is not clear enough in dark mode:

.iqdb-posts-high-similarity{display: inline-block;
 background-color: red;
 animation: rainbow 15s infinite;
} 

@keyframes rainbow {
  25%  {background-color:yellow}
  50%  {background-color:blue}
  75%  {background-color:green}
  100% {background-color:red}		
}

Here is the link containing more options to customize it.

Updated

Reply
Nameless Contributor

Dramorian said:

Any solution for hiding tags with "Remove" in AI tags section? I want to leave only those where tags can be added.

Not with CSS but you can use this userscript:

// ==UserScript==
// @name        AI tags hide remove suggestions
// @include     /^https?://\w+.donmai.us/ai_tags(\?.*)?$/
// @version     0.1.0
// @author      Nameless Contributor
// ==/UserScript==

const buttons = document.querySelectorAll('button.button-outline-danger');
for (const button of buttons) button.closest('article').remove();

You can also add these two lines at the bottom to hide all results suggesting rating:s (most of them are currently wrong):

const tags = document.querySelectorAll('a[data-tag-name="rating:s"]');
for (const tag of tags) tag.closest('article').remove();

Updated

Reply
Dramorian

Nameless_Contributor said:

Not with CSS but you can use this userscript:

// ==UserScript==
// @name        AI tags hide remove suggestions
// @include     /^https?://\w+.donmai.us/ai_tags(\?.*)?$/
// @version     0.1.0
// @author      Nameless Contributor
// ==/UserScript==

const buttons = document.querySelectorAll('button.button-outline-danger');
for (const button of buttons) button.closest('article').remove();

You can also add these two lines at the bottom to hide all results suggesting rating:s (most of them are currently wrong):

const tags = document.querySelectorAll('a[data-tag-name="rating:s"]');
for (const tag of tags) tag.closest('article').remove();

Base functionality is good. For the script to be perfect, it should remove all the pages that contain removed posts. Is it possible?

Reply
Jigsy

tapnek said:

CSS to make usernames not color-coded according to level.

.user { color: var(--link-color) !important }

Thanks for this. I've had it disabled for years, but the option to remove it is now gone. orz

Reply
BrokenEagle98

The following adds a text indicator letting one know if a comment was bumping or not.

.comment menu:before {
    font-size: 0.8em;
    font-weight: bold;
}

[data-do-not-bump-post="true"] menu:before {
   content: "(unbumped)";
   color: #C44;
}

[data-do-not-bump-post="false"] menu:before {
   content: "(bumped)";
   color: #0AA;
}

One primary use case for this was me wondering whether I had actually clicked the "do not bump" input or not, and having to manually check the HTML every time.

Reply
lizardman

I was wondering if there was a Danbooru-based reader like what cubari.moe is to imgur.

It's just somewhat tedious browsing through images having to hover over every notes and the individual loading times for each image.

Alternatively, a script that auto-shows all notes and hides them at the press of a button.

Reply
lizardman

Toggling notes on and off doesn't work (used 't' as my toggle, unsure if it's a problem on my side) but the notes are auto-shown, which is good enough for me.

Thanks!

(still doesn't work, this time tried 'x' but I completely forgot that I can just click to hide notes)

Updated

Reply
Sibyl
Gradient border for preview image

Make the border of preview images that have more than one color look more natural. Also you can set a color for posts that contain specified tags.

Show
/* Border settings */
:root {
  --current-flagged-color: var(--preview-pending-color);
}

body[data-current-user-is-approver=true] {
  --current-flagged-color: var(--preview-flagged-color);
}

/* Border settings */
article[data-tags~="loli"] img.post-preview-image,
article[data-tags~="shota"] img.post-preview-image {
  border-color: pink;
}

/* 2 colors */
.post-status-pending.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--preview-pending-color)) 1;
}

.post-status-flagged.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--current-flagged-color)) 1;
}

.post-status-pending.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-pending-color)) 1;
}

.post-status-flagged.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--current-flagged-color)) 1;
}

.post-status-has-parent.post-status-has-children img,
.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-has-children-color)) 1;
}

.post-status-deleted.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--preview-deleted-color)) 1;
}

.post-status-deleted.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-deleted-color)) 1;
}

.post-status-has-children[data-tags~="loli"] img,
.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-has-children-color)) 1;
}

.post-status-has-parent[data-tags~="loli"] img,
.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-has-parent-color)) 1;
}

.post-status-pending[data-tags~="loli"] img,
.post-status-pending[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-pending-color)) 1;
}

.post-status-flagged[data-tags~="loli"] img,
.post-status-flagged[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--current-flagged-color)) 1;
}

.post-status-deleted[data-tags~="loli"] img,
.post-status-deleted[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-deleted-color)) 1;
}

/* 3 colors */
.post-status-has-parent.post-status-has-children[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-has-children-color) 90%) 1;
}

.post-status-pending.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-pending.post-status-has-children[data-tags~="loli"] img,
.post-status-pending.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-children[data-tags~="loli"] img,
.post-status-flagged.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-pending.post-status-has-parent[data-tags~="loli"] img,
.post-status-pending.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-parent[data-tags~="loli"] img,
.post-status-flagged.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-deleted.post-status-has-children[data-tags~="loli"] img,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--preview-deleted-color) 90%) 1;
}

.post-status-deleted.post-status-has-parent[data-tags~="loli"] img,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-deleted-color) 90%) 1;
}

.post-status-deleted.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--preview-deleted-color) 90%) 1;
}

/* 4 colors */
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--preview-deleted-color) 90%) 1;
}
Blur instead of hiding blacklisted preview

forum #161959, simplify and Safari-friendly improvement

Show
/* Blur instead of hiding blacklisted preview  */
.post-preview.blacklisted-active {
  display: block !important;
}
.post-preview.blacklisted-active .post-animation-icon {
  z-index: 1;
}
.post-preview.blacklisted-active img {
  filter: blur(4px) brightness(0.8);
  /* Fix render bug in Safari https://github.com/mdn/browser-compat-data/issues/17726#issuecomment-1286324855 */
  transform: translateZ(0);
}
.post-preview.blacklisted-active:hover img {
  filter: blur(0px) brightness(1);
  transition: .3s all;
}
Make table elements scroll horizontally on mobile devices

Make wide tables scroll horizontally on mobile devices instead of whole page. Forum thread list can also show more infomation.

Show
/* Make table elements scroll horizontally on mobile devices */
@media screen and (max-width: 660px) {

table.autofit,
#artist-urls-table,
#bulk-update-requests-table,
#favorite-groups-table,
#forum-topics-table,
#post-appeals-table,
#post-flags-table,
#user-name-change-requests-table,
#wiki-page-versions-table,
#artist-commentary-versions-table,
#c-related-tags table {
display: block !important;
overflow-x: auto;
/* border-collapse: collapse; */
}

/* Column fix */
#artist-urls-table .url-column,
#post-versions-table .tags-column,
#post-versions-table .edits-column,
#artist-commentary-versions-table .original-column,
#artist-commentary-versions-table .translated-column {
min-width: 80vw;
}
#artist-urls-table .created-column,
#artist-urls-table .updated-column,
#post-appeals-table .uploaded-column,
#post-appeals-table .appealed-column,
#post-flags-table .uploaded-column,
#post-flags-table .appealed-column,
#wiki-page-versions-table .updated-column,
#artist-commentary-versions-table .updated-column {
min-width: 10rem;
}
#post-appeals-table .reason-column,
#post-flags-table .reason-column {
min-width: 50vw;
}
#user-feedbacks-table .message-column {
min-width: 95vw;
}

/* Fix preview image on post history page and make it sticky */
#p-revert-listing {
flex-direction: column;
}

#p-revert-listing>article {
display: inline-block;
margin-top: 0 !important;
position: sticky;
top: 0.5em;
}

#bulk-update-requests-table .request-column,
/* Fix forum thread list */
#forum-topics-table .title-column {
min-width: calc(100vw - 1rem);
}

#forum-topics-table .status-column {
text-align: left;
}

#forum-topics-table .creator-column,
#forum-topics-table .updated-by-column {
white-space: normal;
}

#forum-topics-table .desktop-only {
display: table-cell !important;
}
}
Hide ?, + and - in tag list. Only hover to show them.
Show
/* Hide ?, + and - in tag list */
#sidebar .tag-list li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem;
  row-gap: 0.05em;
}

.tag-list li>.search-tag {
  order: 0;
}

#sidebar .tag-list li>.post-count {
  order: 1;
}

.tag-list li>.search-inc-tag {
  order: 2;
}

.tag-list li>.search-exl-tag {
  order: 3;
}

.tag-list li>.wiki-link {
  order: 4;
  margin-right: unset;
}

.tag-list li a:not(a:last-of-type) {
  display: none;
}

.tag-list li:hover a:not(a:last-of-type) {
  display: inline;
}

.tag-list h3,
#sidebar .tag-list li :not(a:last-of-type) {
  user-select: none;
}

Updated

Reply
Prinz Poigen

This will hide the 'Fetch source data' and translated tag boxes on an item's edit page that pop in after the rest of the page has loaded.
Very useful if you never use these boxes anyway and are tired of the pop in making you clicking the wrong thing in your frequent tags list.

.source-data {
    display: none;
}
.translated-tags-related-tags-column {
    display: none;
}
Reply
Mayhem-Chan

jhs_master said:

Is there a CSS to always stretch smaller post preview images to max width, so they can always be viewed in one long strip? I want to minimize my download, so it's okay if the images are blurry.

Are you talking about the "view original" vs "view smaller" functionality on post pages?

Reply
jhs master

Mayhem-Chan said:

Are you talking about the "view original" vs "view smaller" functionality on post pages?

Sorry if my query was confusing. What I meant was the thumbnails at the Posts page. At the Posts page, when you're using mobile view you can get the one long strip that I mentioned in previous comment only if you use Huge image size. Use anything less than Huge and you will get two or more rows of thumbnails instead. What I want is the CSS so there would always be only one row even if I use Small or Medium image size. Is it possible?

Reply
Nameless Contributor

@jhs_master something like this? It will be bad for very tall images.

/* Single-column full-width post thumbnails regardless of size */
@media screen and (max-width: 660px) {
    #c-posts .post-preview-image {
        width: 100vw;
        max-height: unset;
    }
    #c-posts .posts-container {
        grid-template-columns: unset;
    }
}
Reply
1 14 15 16 17 18 19 20