Darkbooru CSS style

@楓黒澤: I like this! Thank you~! <3

2018-12-13T11:41:59-05:00

I like this! Thank you~! <3

@AyayaAyaya: Thanks so much for creating and maintaining...

2018-09-28T15:36:06-04:00

Thanks so much for creating and maintaining great style! It's made browsing Danbooru much easier on the eyes since I've had it installed.

I have two modifications I'd like to suggest.

The first is an insertion of a single character: changing that Imgur link to use HTTPS. When it's hardcoded as plain HTTP, it causes an issue with mixed content loading in an otherwise secure webpage.

The second is a bit broader: making the table headers lighter. On places like the tag search and upload tag changes report pages, the table header text is so dark (#333, which is unmodified from vanilla Danbooru) that it's quite difficult to read against the #1B1B1B background. I targeted it very naïvely with this snippet, making it a tad darker than the #777 used elsewhere (e.g. the "Upload tag changes report for [username]" on the aforementioned page):

table.striped thead th {
        color: #666
}

This did the trick in those two locations where I noticed the problem, but a more general approach might be more appropriate; I don't know the first thing about CSS, and I'm not too sure where else this issue of dark text may appear.

Thank you for your consideration!

@紫希貴: Oh well. I'll just leave it as it is. Thanks...

2018-08-24T00:40:15-04:00

Oh well. I'll just leave it as it is.
Thanks for your hard work~

@Gollgagh: > 紫希貴 said: > > Table colors are broken. I...

2018-08-23T22:59:19-04:00

紫希貴 said:

Table colors are broken. I used this code to bring it back

Thanks, I hadn't had time to look at it yet. Fixed.

Edit: I also want to restore the taglist gradient I mentioned before in forum #131889, is it still possible?

I'm about 95% certain that fixing that is going to require some kind of Javascript solution. The gradient numbers are generated entirely server-side and afaik (I would welcome being wrong) there is no way of obtaining that value in CSS and also dynamically creating a gradient with it in CSS.

@紫希貴: Table colors are broken. I used this code to...

2018-08-23T08:03:45-04:00

Table colors are broken. I used this code to bring it back

table.striped tr:nth-child(2n) {background-color: #2c2c2c;}
    table.striped tr:hover {background-color: #2b2b2b;}
    table.striped tr:nth-child(2n):hover {background-color: #3c3c3c;}

I dunno if you can optimize it further, I believe this is just a bandaid solution to the problem...
Also I think I have the colors wrong

Edit: I also want to restore the taglist gradient I mentioned before in forum #131889, is it still possible?
Edit2: Apparently the user feedback tables are also affected. Now that I see it the tables no longer use even and odd, instead even is replaced by nth-child(2n)

@Gollgagh: Yeahhh, lemme get on that. I've been taking a...

2017-09-01T17:35:47-04:00

Yeahhh, lemme get on that.

I've been taking a break from Danbooru, but I'd also been meaning to fix that up for a while now.

edit: done

@紫希貴: Is there a way to... * Fix the in-page...

2017-09-01T06:30:19-04:00

Is there a way to...

Fix the in-page windows' font colors (when adding to a pool, adding commentary, flagging, etc...)?
Restore/add background colors to the user feedbacks?

@Gollgagh: > sweetpeɐ said: > > o on the mod queue there...

2017-03-23T07:23:07-04:00

sweetpeɐ said:

o on the mod queue there are these spaces that are colored different and brighter:

https://files.catbox.moe/rpirok.png

I don't have access to the modqueue, so you're going to have to try this for me:
Pop this onto the bottom of your CSS:

.post-pos-score {background: rgb(27, 40, 27);}

.post-neg-score {background: rgb(40, 27, 27);}

Also if you have colored usernames turned on the coloring is often incorrect.

I changed those more or less arbitrarily because I didn't like how at least three user classes were similar shades of blue, so I picked colors that were largely identifiable at a glance. If you want the standard colors, take out the two sections near the bottom named "Username Alternate Colors" and "Hover Color".

@chilled_sake: @Gollgagh So on the mod queue there are these...

2017-03-23T03:27:47-04:00

@Gollgagh So on the mod queue there are these spaces that are colored different and brighter:

https://files.catbox.moe/rpirok.png

Also if you have colored usernames turned on the coloring is often incorrect.

@user_460797: Ah ok. Thanks for the quick answer :3.

2017-02-05T15:56:18-05:00

Ah ok. Thanks for the quick answer :3.

@Gollgagh: That's an optional behavior. Remove the last...

2017-02-05T15:54:32-05:00

That's an optional behavior. Remove the last two lines which say

#remove-from-favorites {display:none !important;}

@user_460797: @Gollgagh It seems that there is a bug when...

2017-02-05T15:51:17-05:00

@Gollgagh
It seems that there is a bug when favoriting a post: You see on the left bar, that there is the option to "Favorite" a post. But when you have done it, then this option should change to "Unfavorite". But if using the Dark CSS, then this option will be hidden and I can't click "Unfavorite". Is this known or is that only for me the case?

@user_460797: The Dark style looks great, I can only repeat...

2017-02-01T08:56:48-05:00

The Dark style looks great, I can only repeat myself :3.

@Jarlath: I love this dark theme, especially when I...

2017-02-01T01:43:26-05:00

I love this dark theme, especially when I browse the site late at night and without a lot of light.

About the only thing I'd like to change is how some of the text in popup boxes like the artist commentary blends in with the background due to being dark grey on darker grey.

@Gollgagh: Alright, I've refined this quite a bit since...

2014-07-26T16:45:20-04:00

Alright, I've refined this quite a bit since last year; I think I've got almost everything covered now. The updated CSS is in the first post, and nearly everything is commented, so anyone can use this as a base and tweak it as needed.

Things I still haven't figured out: post previews with multiple statuses (i.e. Parent and Pending), the fancy gradient in the tag-count cell for the tag list, the p in a comment preview.

@Gollgagh: Ooh neat, I'll give yours a try then, since I...

2013-07-07T06:25:54-04:00

Ooh neat, I'll give yours a try then, since I know jack about this stuff.

@kounishin: There's a similar style as part of my Small...

2013-07-05T23:16:14-04:00

There's a similar style as part of my Small Modo style set in topic #9037; you can use it on its own or with the other components. (You may have missed it because the threads here tend to refer to them as "styles" rather than "themes".)

I hadn't updated it in some time, though; your post caused me to check and discover that it needed tweaking for the current Danbooru CSS, so thanks. There was also a separate "Darkbooru" style, which I could have sworn was updated for Danbooru 2 - but I may be delusional, since I can no longer find any trace of the style or its author.

@Toks: > Fred1515 said: > > Really? The Misc Tweaks...

2013-07-04T15:58:34-04:00

Fred1515 said:

Really? The Misc Tweaks script and a whole bunch of other scripts for sites from Danbooru to 4chan are still hosted there.

That site is userscripts.org. He's referring to http://userstyles.org/, which is not related as far as I know.

@Fred1515: > Gollgagh said: > Posting this here since...

2013-07-04T15:43:26-04:00

Gollgagh said:
Posting this here since userstyles.org doesn't like "adult" sites any more.

Really? The Misc Tweaks script and a whole bunch of other scripts for sites from Danbooru to 4chan are still hosted there.

Edit: derp, never mind, it seems the heat is getting to me.

@Gollgagh: I know there were some people that used a dark...

2013-07-04T13:33:39-04:00

I know there were some people that used a dark theme back on Danbooru 1; I kind of liked having it that way. This thing also reduces the font size to the old one. Posting this here since userstyles.org doesn't like "adult" sites any more. Here is the result of my efforts:

/*      Main content darkening      */

    header,
    .main {
        color: #333 !important;
        background-color: #1b1b1b !important;
    }

    body,
    section,
    #page,
    .new-comment p,
    .related-tags,
    .row.notices {
        color: #777 !important;
        background-color: #1b1b1b !important;
    }

    /*   "mobile" paginator    */

    @media screen and (max-width: 660px) {
        .paginator,
        .paginator a,
        .paginator menu {
            background-color: #2b2b2b !important;
            border-color: #2b2b2b !important;
        }
	    .forum-post .author {
			background-color: #111 !important;
			border: none;
			border-radius: 6px 6px 0px 0px;
		}
    }

    blockquote,
    #dmail-notice {
        color: #888 !important;
        background: #222 !important;
        border-style: none !important;
        border-radius: 3px;
    }

    /*      Nested quote coloring       */

    blockquote{
        border-left: solid medium #0073ff !important;
    }

    blockquote > blockquote {
        border-left: solid medium #FA0 !important;
        background-color: #1e1e1e !important;
    }

    blockquote > blockquote > blockquote{
        border-left: solid medium #0F5 !important;
        background-color: #191919 !important;
    }

    .current a,
    .paginator a {
        border-style: none !important;
        background: #272727 !important;
    }

    footer,
    nav menu,
    .expandable,
    .nav-notice,
	.prose pre,
    .ui-dialog,  /* pop-out dialogs */
    .ui-dialog-content,
    .ui-dialog-buttonpane,
    #edit-dialog {
        color: #777;
        border-style: none !important;
        background: #272727 !important;
    }

    .ui-widget-header{
        color: #777;
        border-style: none !important;
        background: #777 url("http://i.imgur.com/32BVwYb.png");
    }

    #news-updates {
        color: #888 !important;
        background: #272727 !important;
    }

    .note-body {
        color: black;
    }

    article:target {
        background-color: #30301b !important;
        color: #aaa !important;
    }
	
    /*    Buttons, textboxes    */

    button,
    input,
    select,
    textarea {
        border-style: none !important;
        background:#111111 !important;
        color:#eee !important;
        padding: 0.2em;
    }

    /*   FORUM POST BACKGROUND    */

    .comment,
    div.list-of-forum-posts article {
        background-color: #151515;
        border: none;
        border-radius: 6px;
        box-shadow: none;
        max-width: 800px;
    }

    /*  Text sizing  */

    header h1 {
        font-size: 200% !important;
    }

    h1, h2, h3  {
        font-size: 120% !important;
    }

    body,
    #page menu,
    .new-comment p,
    .row.notices {
        font-size: 83% !important;
    }


/*    Stickied Comment Styling    */

    article.comment[data-is-sticky="true"] {
        background:#600 !important;
        color:#ccc !important;
        width: 780px;
        border-radius: 5px;
    }


/*      Post Modes       */

    .mode-edit       { background-color: #1b5b1b !important; }
    .mode-tag-script { background-color: #6b1b5b !important; }
    .mode-add-fav,
    .mode-remove-fav { background-color: #772    !important; }
    .mode-rating-s   { background-color: #1b8b1b !important; }
    .mode-rating-q   { background-color: #444    !important; }
    .mode-rating-e   { background-color: #8b1b1b !important; }
    .mode-vote-up    { background-color: #2b5b2b !important; }
    .mode-vote-down  { background-color: #5b2b2b !important; }
    .mode-approve    { background-color: #0A9    !important; }

/*  Styles forum and other lists with alternating colors    */


    .striped tr:nth-child(even),
	.feedback-category-neutral td:nth-child(even) {
        background: #282828 !important;
    }
    .striped,
	.feedback-category-neutral td {
        background: #1b1b1b !important;
    }
    .striped tr:hover {
        background: #444 !important;
    }

    .feedback-category-positive td {
        background: #003300 !important;
    }

    .feedback-category-positive td:nth-child(even) {
        background: #003800 !important;
    }

    .feedback-category-negative td {
        background: #330000 !important;
    }

    .feedback-category-negative td:nth-child(even) {
        background: #380000 !important;
    }

    table {
        border-collapse: separate;
    }


/*    Hover spoilers     */

    .spoiler:hover {
        background: #121212 !important;
        color: #777 !important;
    }


/*  Artist Commentary Bubble  */

    #artist-commentary,
    #artist-commentary menu,
    #notice,
    #original-artist-commentary,
    #translated-artist-commentary {
        background-color: #222 !important;
        border-style: none !important;
        max-width: 780px;
        color: #777 !important;
    }


/*  Terms of Service Bubble  */

    #tos-notice,
    #tos-notice a,
    #tos-notice h1 {
        background-color: #443 !important;
        border-style: none !important;
        color: #07F !important;
    }


/*      General Navigation Bars      */

    #nav-links,
    #nav-links li:hover {
        background-color: #222 !important;
        border-color: #333 !important;
    }


/*      Post Status Notices      */

    .notice-parent {
        background-color: #242 !important;
        color: #272;
        border-style: none !important;
        display: inline-block;
        min-width: 335px;
    }

    .notice-child {
        background-color: #585020 !important;
        color: #872;
        border-style: none !important;
        display: inline-block;
        min-width: 335px;
    }

    .notice-resized,
    .notice-pending {
        background-color: #224 !important;
        border-style: none !important;
        max-width: 335px;
        color: #44C !important;
    }

    .notice-appealed {
        background-color: #446 !important;
        border-style: none !important;
        max-width: 335px;
        color: #88F !important;
    }

    .notice-flagged,
    .notice-deleted {
        background-color: #622 !important;
        border-style: none !important;
        color: #F00;
        display: inline-block;
        min-width: 335px;
        max-width: 600px;
    }

/*        Limit Comment width          */
/* Remove if you want full width stuff */

    blockquote,
    pre,
    .comment .content {
        max-width: 600px;
    }

    .expandable {
        width: 620px;
    }

/*      Username Alternate Colors       */

    a.user-gold.with-style,       /* Gold users are gold */
    a.user-gold                   { color:gold    }
    a.user-platinum.with-style,
    a.user-platinum               { color:#D0D0F5 }
    a.user-builder.with-style,
    a.user-builder                { color:#00D000 }
    a.user-moderator.with-style,
    a.user-moderator              { color:#CC005B }
    a.user-admin.with-style,
    a.user-admin                  { color:#F00    }

/*         Hover Color        */

    a.user-gold.with-style:hover,
    a.user-gold:hover             { color:#FFF09E }
    a.user-platinum.with-style:hover,
    a.user-platinum:hover         { color:#EEEEFF }
    a.user-builder.with-style:hover,
    a.user-builder:hover          { color:#49FF49 }
    a.user-moderator.with-style:hover,
    a.user-moderator:hover        { color:#F92D88 }
    a.user-admin.with-style:hover,
    a.user-admin:hover            { color:#F77    }

I don't hardly know what I'm doing, so things are broken, I'm sure. Feel free to do whatever with it, I'm mostly posting this since I couldn't find anyone else doing it. Suggestions are welcomed and encouraged enthusiastically.

2016 edit: took out some useless sections and simplified a couple other lines
2017 edit: further style maturation:

more notices styled

parent/child notices now grow to fit number of siblings

hover-highlighting on usernames
buttons and input boxes
borders removed from most everything (I like the way that it looks, but I can provide a version that restores them if people want)
pop-out dialogs
May-2017:
added nested quote-box colorization: blue -> yellow -> green
bg image for widget header now points to imgur image instead of embedded (which doesn't work for on-site CSS)
removed Janitor type and changed Builder to green
overwrote tag count gradient background color
September-2017:
Completed ui-dialog boxes so that text would actually be legible
Re-added color for user-feedback
Cleaned up trailing whitespace and stray tab characters
7-27-2018:
Forum and comment borders tweaked
8-23-2018:
Tables fixed

Apparently !important declarations are redundant when using the built in styler, but I'm going to leave them in for userstyles users.