Donmai

Custom CSS Thread

Posted under General

jhs master

Nameless_Contributor said:

@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;
    }
}

Yes, that's it! Thank you very much for the help!

Reply
Sibyl
Add animation to preview images border

Add blink animation or flow animation to any preview images with a colored border.
Compatible with Chrome. May be compatible with Safari 16.4+.
At least preview images with a single colored border work on both Firefox and Safari.
Some animaiton needs hover to show except pending and flagged posts.
Find and replace all :hover to make animation always show.

Show
:root {
    --angle: 0deg;
    --flow-animation: rotate 4s linear infinite;
    --current-flagged-color: var(--preview-pending-color);
}

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

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes blink {
    to {
        border-color: transparent;
    }
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

.post-status-has-children img:hover,
.post-status-has-parent img:hover,
.post-status-deleted img:hover,
.post-status-pending img,
.post-status-flagged img {
    animation: blink 1.0s infinite alternate;
}

/* CSS Specificity: https://www.w3schools.com/css/css_specificity.asp */
article[data-tags~="loli"] img.post-preview-image,
article[data-tags~="shota"] img.post-preview-image {
    border-color: pink;
}

article[data-tags~="loli"] img:hover,
article[data-tags~="shota"] img:hover {
    border-image: conic-gradient(from var(--angle), transparent 50%, pink) 1;
    animation: var(--flow-animation);
}

/* 2 colors */
.post-status-pending[data-tags~="loli"] img.post-preview-image,
.post-status-pending[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged[data-tags~="loli"] img.post-preview-image,
.post-status-flagged[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-has-children-color) 62% 88%, transparent) 1;
}

.post-status-deleted.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

.post-status-deleted.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

.post-status-has-parent[data-tags~="loli"] img.post-preview-image,
.post-status-has-parent[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-has-parent-color) 62% 88%, transparent) 1;
}

.post-status-has-children[data-tags~="loli"] img.post-preview-image,
.post-status-has-children[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-has-children-color) 62% 88%, transparent) 1;
}

.post-status-deleted[data-tags~="loli"] img.post-preview-image,
.post-status-deleted[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

/* 3 colors */
.post-status-pending.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-children[data-tags~="loli"] img,
.post-status-pending.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-children-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-children[data-tags~="loli"] img,
.post-status-flagged.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-children-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-parent[data-tags~="loli"] img,
.post-status-pending.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent[data-tags~="loli"] img,
.post-status-flagged.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img {
    /* Shorter loli/shota border?
     * 5% 32.5%, 42.5% 70%, 80% 95% */
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, pink 55% 95%, transparent) 1;
}

.post-status-deleted.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 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: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 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: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 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 {
    /* Longer pending/flagged border?
     * 10% 22.5%, 32.5% 42.5%, 52.5% 65%, 80% 95% */
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-has-children-color) 55% 70%, transparent, var(--preview-pending-color) 80% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.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: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-has-parent-color) 55% 70%, transparent, var(--current-flagged-color) 80% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.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: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-has-children-color) 55% 70%, transparent, var(--preview-deleted-color) 80% 95%, transparent) 1;
}

.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children img:hover,
.post-status-deleted.post-status-has-parent img:hover,
.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-deleted[data-tags~="shota"] img:hover,
.post-status-has-parent.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img:hover {
    animation: var(--flow-animation);
}
Only blink animation + gradient border

Works on Chrome. Gradient border only snippet is here: forum #239804

Show
: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;
}

@keyframes blinkColor {
  to {
    border-color: transparent;
  }
}

article[data-tags~="loli"] img:hover,
article[data-tags~="shota"] img:hover,
.post-status-has-children img:hover,
.post-status-has-parent img:hover,
.post-status-deleted img:hover,
.post-status-pending img,
.post-status-flagged img {
  animation: blinkColor 1.0s infinite alternate;
}

@keyframes blink {
  to {
    border-image: linear-gradient(to right, transparent, transparent) 1;
  }
}

.post-status-pending.post-status-has-children img,
.post-status-pending.post-status-has-parent img,
.post-status-flagged.post-status-has-children img,
.post-status-flagged.post-status-has-parent img,
.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children img:hover,
.post-status-deleted.post-status-has-parent img:hover,
.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-deleted[data-tags~="shota"] img:hover {
  animation: blink 1.0s infinite alternate;
}
Reply
Laudividni

I use shades of pink to discern Contributors and Approvers without making the site too colorful on dark mode. Simple and kinda pointless, but sharing it anyway.

.user-contributor {color: #e684e9 !important}
.user-approver {color: #f5cdf6 !important}

Additionaly, I highlight my username a tiny bit with a glowing effect:

a[href="/users/825936"] {animation: glow 1s ease-in-out infinite alternate !important;}

@keyframes glow {
  from {text-shadow: 0 0 2px var(--user-member-color), 0 0 3px var(--user-builder-color);}
  to {text-shadow: 0 0 3px #f5cdf6, 0 0 2px #e684e9;}
}
Reply
hdk5

Maiden_in_Orange said:

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?

    .forum-updated a {
        font-style: unset !important;
    }
Reply
Laudividni

Sharing for dumbos like me. If someone didn't use the wiki tab before the recent change and/or won't use it now, this can remove it:

.current-tag-wiki {display: none}

I only use the related, translated, suggested and frequent tabs when I tag posts, so additionaly, this is to remove the recent tags tab:

.recent-related-tags-column {display: none}
Reply
Laudividni

I wanted the "highlight posts with dangerous tags in the modqueue grid view" to work in the list view. I wanted the entire card to be red, but you know the drill, Idk how and if it's possible with CSS only. This is what I've been using for months now:

#c-modqueue .post-preview[data-tags~='md5_mismatch']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='third-party_edit']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='screenshot']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='anime_screencap']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='duplicate']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='image_sample']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='resized']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='ai-generated']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='ai-assisted']  .mod-queue-preview{
   background-color: var(--modqueue-tag-warning-color)
}

I also tried using an edit of the "blur E and Q rated posts" CSS before that was somewhat like this:

#c-modqueue .post-preview[data-tags~='anime_screencap']  .post-preview-image{
   filter: invert(9%) sepia(93%) saturate(3822%) hue-rotate(6deg) brightness(35%) contrast(122%) opacity(0.2) blur(10px)
}
#c-modqueue .post-preview[data-tags~='anime_screencap']  .post-preview-image:hover{
   filter: none
}

It works on every page with a post preview if you remove #c-modqueue and it can be used along with the other code, but it was obviously bad to look at the thumbnails on mobile.

EDIT: I love you, thanks!

Updated

Reply
hdk5

Sessyoin_Kiara said:

...I wanted the entire card to be red...

Try:

#c-modqueue div.mod-queue-preview[data-tags~='third-party_edit'],
#c-modqueue div.mod-queue-preview[data-tags~='screenshot'],
#c-modqueue div.mod-queue-preview[data-tags~='anime_screencap'],
#c-modqueue div.mod-queue-preview[data-tags~='duplicate'],
#c-modqueue div.mod-queue-preview[data-tags~='image_sample'],
#c-modqueue div.mod-queue-preview[data-tags~='md5_mismatch'],
#c-modqueue div.mod-queue-preview[data-tags~='resized'],
#c-modqueue div.mod-queue-preview[data-tags~='ai-generated']
{
    background-color: var(--modqueue-tag-warning-color) !important;
}
Reply
alphashitlord

Not sure if this is the right place to ask but I can't seem to get the OLED black theme (from the about:custom css style page) to work:

/* Custom theme. OLED dark-mode theme */
body.dark, body[data-current-user-theme="dark"] {
    --grey-0: #e8e8e8;
    --grey-1: #d1d1d1;
    --grey-2: #ababab;
    --grey-3: #919191;
    --grey-4: #777777;
    --grey-5: #5b5b5b;
    --grey-6: #3f3f3f;
    --grey-7: #2c2c2c;
    --grey-8: #191919;
    --grey-9: #000000;
    
    --link-color: #ff4500;
    --link-hover-color: #f47464;

    --collection-pool-color: var(--link-color);
    --collection-pool-hover-color: var(--link-hover-color);
    
    --text-color: var(--grey-2);
    --header-color: var(--grey-1);
    
    --post-resized-notice-background: var(--post-search-notice-background);
    --notice-info-background: var(--post-search-notice-background);
    --post-child-notice-background: var(--post-search-notice-background);
    --post-parent-notice-background: var(--post-search-notice-background);

    --notice-info-border-color: var(--grey-5);
    
    --form-input-background: var(--grey-8);
    --form-input-text-color: var(--grey-3);
    --form-input-border-color: var(--grey-6);
    
    --form-button-background: var(--grey-3);
    --form-button-border-color: var(--grey-5);
}
Reply
Nameless Contributor

alphashitlord said:

Not sure if this is the right place to ask but I can't seem to get the OLED black theme (from the about:custom css style page) to work:

You have to set the site theme to dark in user settings, this CSS replaces the regular dark theme.

Reply
user 1170511

https://danbooru.donmai.us/forum_posts/156133
this works
(text color green) custom text links colors

Show

a:not(.search-tag){
color: #2ecc71 !important;
}

different
color choice hex:
yellow text #ccd123 orange #f79817 black #0e1111 purple #BF40BF light green #AAEAC4

combine with custom background color green
*{ background-color:#AAE5A4 }

(from https://danbooru.donmai.us/forum_posts/90590 )

orange danbooru https://files.catbox.moe/eel7m5.png

Updated

Reply
gfz

Is there a CSS method to making the Tag Script input box, tag-script-field, have multiple lines? When I'm gardening with large tag names it's hard to work with such a small box.

Reply
alphashitlord

The "add red borders to flagged posts" code doesn't seem to be working. Does it not work alongside the OLED black theme?

Show
/* Enable flagged posts to have red borders for non-approvers. */
body[data-current-user-is-approver=false] .post-preview.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-flagged-color);
}
body[data-current-user-is-approver=false] .post-preview.post-status-has-children.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);
}
body[data-current-user-is-approver=false] .post-preview.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
body[data-current-user-is-approver=false] .post-preview.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
body[data-post-is-flagged=true] .post-notice-pending {
  background: var(--post-deleted-notice-background) !important;
}
Reply
Nameless Contributor

alphashitlord said:

The "add red borders to flagged posts" code doesn't seem to be working. Does it not work alongside the OLED black theme?

Works for me with just these two. Make sure you don't have any errors in your CSS, like missing or extraneous {braces}.

Reply
notfrontloaded

some modified old CSS working again

forum #90583
@Nameless_Contributor

Show

/* Color user names */
body a.user-banned { color:black }
body a.user-member { }
body a.user-gold { color:#0000FF }
body a.user-platinum { color:#0000FF }
body a.user-builder { color:#6633FF }
body a.user-contributor { color:purple }
body a.user-approver { color:green }
body a.user-moderator { color:orange }
body a.user-admin { color:red }
body a.user-owner { color:red }
/* Default colors */
/* user-member {009BE6}. user-gold {EAD084}. user-platinum {#ABABBC}. user-builder, user-contributor, user-approver {C797FF}, user-moderator {#36C64B}, user-admin, user-owner {FF8A8B} */

forum #108909
@nonfrontloaded

Show

/*Show unrestricted upload permission as underline*/
.user-contributor { text-decoration:underline;}
/*Show approval permission green check mark*/
.user-approver::after { content:"✓"; color:green; font-size:80%; display:inline-block; padding-left:0.5em;}

Reply
whatthf

https://danbooru.donmai.us/forum_posts/280496
small edit

a:not(.search-tag){ color: #2ecc71 }

make the edit buttons disappear

/*post page sidebar*/
#post-edit-link { display: none;}

#post-option-edit { display: none;}

#pool { display: none;}

#translate { display: none;}

#add-commentary { display: none;}

a[href^="/post_flags/new"] { display: none;}

also,

Show

img[src="/packs/static/danbooru-logo-128x128-ea111b6658173e847734.png"] { font-size: 1000% }

#app-name { display: none;}

Updated

Reply
1 15 16 17 18 19 20