Hi, when you press "Add to favgroup" there is a small window listing your favgroups, is there a way to increase the space between each line? In mobile I press the wrong favgroup very often...
Posted under General
Maiguel said:
Hi, when you press "Add to favgroup" there is a small window listing your favgroups, is there a way to increase the space between each line? In mobile I press the wrong favgroup very often...
#add-to-favgroup-dialog div {
padding-bottom: 1em;
}change the number on 1em to change how much the spacing between the lines
Updated by CommentaryRequest
Made a code to hide spoiler posts, I know the blacklist is probably more practical but I kinda just wanted to see if I could
/*Hide spoiler posts*/
img.post-preview-image[title*="spoilers"],
img.post-preview-image[data-title*="spoilers"] {
opacity: 0%;
}
img.post-preview-image[title*="spoilers"]:hover,
img.post-preview-image[data-title*="spoilers"]:hover {
opacity: 100%;
}
.post-preview-link:has(img.post-preview-image[title*="spoilers"]:not(:hover)),
.post-preview-link:has(img.post-preview-image[data-title*="spoilers"]:not(:hover)) {
background-image: url(https://files.catbox.moe/hxwzx0.png) !important;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.post-preview[data-rating="e"] .post-preview-link:has(img.post-preview-image[title*="spoilers"]:not(:hover)),
.post-preview[data-rating="e"] .post-preview-link:has(img.post-preview-image[data-title*="spoilers"]:not(:hover)),
.post-preview[data-rating="q"] .post-preview-link:has(img.post-preview-image[title*="spoilers"]:not(:hover)),
.post-preview[data-rating="q"] .post-preview-link:has(img.post-preview-image[data-title*="spoilers"]:not(:hover)) {
background-image: url(https://files.catbox.moe/rrbi85.png) !important;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
As an alternative to some of the role-related CSS on the CSS styles wiki or otherwise, I apply a 50% colour to Builders and Approvers. The idea is to show that they're halfway in permissions to another role: Builders are Blue -> Purple because they still use the modqueue to upload but have elevated permissions for janitorial purposes and Approvers are Purple -> Green because they're (quasi-)staff as the first role with "power" through approvals and post bans.
/* Recolour builders so they're easier to see */
a.user-builder {
background: var(--user-builder-color);
background: linear-gradient(to right, var(--user-member-color) 0%,var(--user-member-color) 50%,var(--user-builder-color) 50%,var(--user-builder-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}
/* Approvers can approve, delete and ban posts */
a.user-approver {
background: var(--user-builder-color);
background: linear-gradient(to right, var(--user-builder-color) 0%,var(--user-builder-color) 50%,var(--user-moderator-color) 50%,var(--user-moderator-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}I was/am too lazy to make it work with strikethroughs for bans. If you have any other name-colouring CSS that this overrides, you may need to unset some of the properties (use the actual value unset to return it to its previous/default).
I'm looking for a CSS that either changes the border color of children posts from orange to another color, or changes the flagged post color to something other than red. The two colors are similar enough that it often fools me into thinking I have flagged posts when it's just a child post. I realize I could just deactivate the red border CSS script, but I do like the distinction between that and pending posts.
Placeholder1996 said:
I'm looking for a CSS that either changes the border color of children posts from orange to another color, or changes the flagged post color to something other than red. The two colors are similar enough that it often fools me into thinking I have flagged posts when it's just a child post. I realize I could just deactivate the red border CSS script, but I do like the distinction between that and pending posts.
/* Change the border color of child posts */
.post-preview.post-status-has-parent .post-preview-image {
border-color: purple !important; /* change purple to other color if needed */
}
Random question about a possibly pointless code. I've been thinking about giving each rating a border color to visually aid when browsing the site and I've gotten the basic code to work, however I'm having trouble with integrating it with the existing status colors, so they don't interfere with each other. I don't necessarily need a full script, just a bit of an explainer to help me out.
Placeholder1996 said:
Random question about a possibly pointless code. I've been thinking about giving each rating a border color to visually aid when browsing the site and I've gotten the basic code to work, however I'm having trouble with integrating it with the existing status colors, so they don't interfere with each other. I don't necessarily need a full script, just a bit of an explainer to help me out.
After a bit of experimenting, I came up with this stylesheet to put a 2nd border around posts based on their rating.
.post-preview[data-rating=g] .post-preview-image {
box-shadow: 0 0 0 3px green;
}
.post-preview[data-rating=s] .post-preview-image {
box-shadow: 0 0 0 3px yellow;
}
.post-preview[data-rating=q] .post-preview-image {
box-shadow: 0 0 0 3px magenta;
}
.post-preview[data-rating=e] .post-preview-image {
box-shadow: 0 0 0 3px red;
}
Just as a note in case anyone is interested in doing the same thing, this is the code I settled on.
.post-preview[data-rating=g] .post-preview-image {
box-shadow: 0 0 0 2px #27a536; /* green */
}
.post-preview[data-rating=s] .post-preview-image {
box-shadow: 0 0 0 2px #d6c62a; /* yellow */
}
.post-preview[data-rating=q] .post-preview-image {
box-shadow: 0 0 0 2px #d14747; /* red */
}
.post-preview[data-rating=e] .post-preview-image {
box-shadow: 0 0 0 2px #651919; /* dark red */
}
h5. Fix border color on small screen
/wiki_pages/about:custom_css_style#dtext-enable-colored-thumbnail-borders-on-mobile/wiki_page_versions/diff?otherpage=508245&thispage=507403&commit=Diff
I prefer not to overuse !important. Using box-shadow also works well on small-screen devices.
/* Border settings */
@keyframes blink {
to {
border-color: transparent;
box-shadow: 0 0 transparent;
}
}
.post-preview.post-status-has-children .post-preview-image:hover,
.post-preview.post-status-has-parent .post-preview-image:hover,
.post-preview.post-status-deleted .post-preview-image:hover,
.post-preview.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.post-preview.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
animation: blink 1s infinite alternate;
}
/* Fix border color on small screen */
@media (max-width: 660px) {
.post-preview.post-status-has-children .post-preview-image {
box-shadow: 0 0 0 0.1em var(--preview-has-children-color);
}
.post-preview.post-status-has-parent .post-preview-image {
box-shadow: 0 0 0 0.1em var(--preview-has-parent-color);
}
.post-preview.post-status-deleted .post-preview-image {
box-shadow: 0 0 0 0.1em var(--preview-deleted-color);
}
.post-preview.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.post-preview.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
box-shadow: 0 0 0 0.1em var(--preview-pending-color);
}
.post-preview.post-status-has-children.post-status-has-parent .post-preview-image {
box-shadow: 0 -0.1em 0 0 var(--preview-has-children-color), 0.1em 0 0 0 var(--preview-has-parent-color), 0 0.1em 0 0 var(--preview-has-parent-color),
-0.1em 0 0 0 var(--preview-has-children-color), -0.05em -0.05em 0 0.05em var(--preview-has-children-color), 0.05em -0.05em 0 0.05em var(--preview-has-parent-color),
-0.05em 0.05em 0 0.05em var(--preview-has-children-color), 0.05em 0.05em 0 0.05em var(--preview-has-parent-color);
}
.post-preview.post-status-has-children.post-status-deleted .post-preview-image {
box-shadow: 0 -0.1em 0 0 var(--preview-has-children-color), 0.1em 0 0 0 var(--preview-deleted-color), 0 0.1em 0 0 var(--preview-deleted-color),
-0.1em 0 0 0 var(--preview-has-children-color), -0.05em -0.05em 0 0.05em var(--preview-has-children-color), 0.05em -0.05em 0 0.05em var(--preview-deleted-color),
-0.05em 0.05em 0 0.05em var(--preview-has-children-color), 0.05em 0.05em 0 0.05em var(--preview-deleted-color);
}
.post-preview.post-status-has-parent.post-status-deleted .post-preview-image {
box-shadow: 0 -0.1em 0 0 var(--preview-has-parent-color), 0.1em 0 0 0 var(--preview-deleted-color), 0 0.1em 0 0 var(--preview-deleted-color),
-0.1em 0 0 0 var(--preview-has-parent-color), -0.05em -0.05em 0 0.05em var(--preview-has-parent-color), 0.05em -0.05em 0 0.05em var(--preview-deleted-color),
-0.05em 0.05em 0 0.05em var(--preview-has-parent-color), 0.05em 0.05em 0 0.05em var(--preview-deleted-color);
}
.post-preview.post-status-has-children.post-status-has-parent.post-status-deleted .post-preview-image {
box-shadow: 0 -0.1em 0 0 var(--preview-has-children-color), 0.1em 0 0 0 var(--preview-deleted-color), 0 0.1em 0 0 var(--preview-deleted-color),
-0.1em 0 0 0 var(--preview-has-parent-color), -0.05em -0.05em 0 0.05em var(--preview-has-children-color), 0.05em -0.05em 0 0.05em var(--preview-deleted-color),
-0.05em 0.05em 0 0.05em var(--preview-has-parent-color), 0.05em 0.05em 0 0.05em var(--preview-deleted-color);
}
.post-preview.post-status-has-children.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.post-preview.post-status-has-children.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
box-shadow: 0 -0.1em 0 0 var(--preview-has-children-color), 0.1em 0 0 0 var(--preview-pending-color), 0 0.1em 0 0 var(--preview-pending-color),
-0.1em 0 0 0 var(--preview-has-children-color), -0.05em -0.05em 0 0.05em var(--preview-has-children-color), 0.05em -0.05em 0 0.05em var(--preview-pending-color),
-0.05em 0.05em 0 0.05em var(--preview-has-children-color), 0.05em 0.05em 0 0.05em var(--preview-pending-color);
}
.post-preview.post-status-has-parent.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.post-preview.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
box-shadow: 0 -0.1em 0 0 var(--preview-has-parent-color), 0.1em 0 0 0 var(--preview-pending-color), 0 0.1em 0 0 var(--preview-pending-color),
-0.1em 0 0 0 var(--preview-has-parent-color), -0.05em -0.05em 0 0.05em var(--preview-has-parent-color), 0.05em -0.05em 0 0.05em var(--preview-pending-color),
-0.05em 0.05em 0 0.05em var(--preview-has-parent-color), 0.05em 0.05em 0 0.05em var(--preview-pending-color);
}
.post-preview.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.post-preview.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
box-shadow: 0 -0.1em 0 0 var(--preview-has-children-color), 0.1em 0 0 0 var(--preview-pending-color), 0 0.1em 0 0 var(--preview-pending-color),
-0.1em 0 0 0 var(--preview-has-parent-color), -0.05em -0.05em 0 0.05em var(--preview-has-children-color), 0.05em -0.05em 0 0.05em var(--preview-pending-color),
-0.05em 0.05em 0 0.05em var(--preview-has-parent-color), 0.05em 0.05em 0 0.05em var(--preview-pending-color);
}
}Updated by Sibyl
Hello. For users who want to edit tags efficiently with as minimalistic of a UI as possible, I have found this CSS to be very nice:
/* =========================================
Danbooru custom CSS — cleaned final version
========================================= */
/* Hide selected related-tag panels in the edit sidebar */
#related-tags-container > .general-related-tags-column,
#related-tags-container > .translated-tags-related-tags-column,
#related-tags-container > .recent-related-tags-column {
display: none !important;
}
/* Make the "Add" button on the ai_tags page larger */
.c-ai-tags article button {
height: 150%;
width: 150%;
}
/* =========================
Danbooru: clean tag-edit view
========================= */
/* 1) Hide clutter above the edit area */
.fav-buttons-container,
#artist-commentary,
ul.notice.post-notice.post-notice-search {
display: none !important;
}
/* Optional: hide "Mark as translated" strip too */
/*
#mark-as-translated-section {
display: none !important;
}
*/
/* 2) Show only the Edit area */
#post-sections {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#post-sections > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
background: transparent !important;
}
#post-sections > li:not(:has(#post-edit-link)) {
display: none !important;
}
#post-sections > li:has(#post-edit-link) {
display: block !important;
width: 100% !important;
max-width: none !important;
background: transparent !important;
}
/* 3) Make Edit a wide bar directly below the image */
#post-edit-link,
#post-edit-link:link,
#post-edit-link:visited,
#post-edit-link:hover,
#post-edit-link:focus,
#post-edit-link:active {
display: block !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
min-height: 0 !important;
height: 5rem !important;
box-sizing: border-box !important;
padding: 0 !important;
background: #f08a00 !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
font-size: 0 !important;
line-height: 0 !important;
}
#post-edit-link::after {
content: none !important;
}
#post-edit-link::before {
content: "Edit";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 5rem;
font-weight: 800;
line-height: 0;
color: #000000;
background: transparent;
border-radius: 0;
box-shadow: none;
}
/* 4) Hide the Edit button row after opening Edit */
#content:has(#edit:not([style*="display: none"])) #post-sections,
#content:has(#edit:target) #post-sections {
display: none !important;
}
/* 5) Hide the comments block shown before clicking Edit */
#comments,
#recommended {
display: none !important;
}
/* 6) Remove extra edit-form sections above Tags */
#edit > div:first-child, /* "Before editing..." */
#edit .source-data, /* Fetch source data */
#form .post_rating, /* Rating */
#form .post_has_embedded_notes, /* Embed notes */
#form .post_parent_id, /* Parent */
#form .post_source { /* Source */
display: none !important;
}
/* 7) Remove "Ctrl+Enter to submit" under tag box */
#form .post_tag_string .hint,
#form .post_tag_string .fineprint {
display: none !important;
}
/* 8) Hide footer links/social icons at bottom */
#page-footer {
display: none !important;
}
/* 9) Reduce outer page gutters */
#page {
margin-left: 1px !important;
margin-right: 1px !important;
}
/* 10) Tighten sidebar / content spacing */
.sidebar-container {
gap: 0 !important;
}
#content {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* 11) Force the whole left sidebar to the working narrow width */
.sidebar-container > #sidebar {
flex: 0 0 189px !important;
width: 189px !important;
min-width: 189px !important;
max-width: 189px !important;
margin-right: 1px !important;
padding-right: 1px !important;
}
#search-box,
#blacklist-box,
#tag-list,
#post-information,
#post-options,
#post-history {
width: 189px !important;
max-width: 189px !important;
min-width: 189px !important;
margin-right: 1px !important;
padding-right: 1px !important;
}
/* 12) Tighten the search box row */
#search-box-form {
display: flex !important;
gap: 0 !important;
}
#search-box-form #tags {
min-width: 0 !important;
}
#search-box-submit {
flex: 0 0 32px !important;
}
/* 13) Hide gray tag counts only in the tag list */
#tag-list .post-count {
display: none !important;
}
/* 14) Tighten spacing after hidden edit blocks */
#edit,
#form {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 15) Show a checkerboard pattern behind transparent images */
#image {
--checkerboard: repeating-conic-gradient(
transparent 0% 25%,
#77789244 0% 50%
) 0 0 / 32px 32px;
background: var(--checkerboard);
}
/* 16) Remove the gap under the image before the tag editor */
.image-container,
.image-container.note-container,
.image-container picture,
.image-container #image {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.image-container,
.image-container.note-container {
line-height: 0 !important;
}
#image {
display: block !important;
}
#edit {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 17) Hide gray counts in the Blacklisted box */
#blacklist-box .post-count {
display: none !important;
}I hope it helps someone. It has made editing tags on images much better for me.
Updated by しすた-しにかる
Knowledge_Seeker said in forum #265078:
Hello there. Is there any CSS code that removes the forum activity indicator (as in, makes it not italicize when there's unread forum posts) for me?
hdk5 said in forum #265079:
.forum-updated a { font-style: unset !important; }
This doesn't seem to work anymore. Is there another way to do this?
Placeholder1996 said in forum #427403:
This doesn't seem to work anymore. Is there another way to do this?
.forum-updated.font-italic {
font-style: unset !important;
}
BrokenEagle98 said in forum #427471:
.forum-updated.font-italic { font-style: unset !important; }
thanks a bunch