/* Fable: Noir — a black-and-white detective picture: venetian-blind shadows,
   a single spotlight, and one red accent reserved for trouble. */

body, input, button, textarea, select {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 11pt;
    color: #d8d8d8;
}

body {
    background-color: #101010;
    /* streetlight through the blinds */
    background-image:
        radial-gradient(ellipse 900px 500px at 50% 0%, rgba(255, 255, 255, .10), transparent 70%),
        repeating-linear-gradient(115deg, transparent 0 46px, rgba(0, 0, 0, .55) 46px 72px);
    background-attachment: fixed;
}

.wrapper { max-width: 840px; }

header {
    background: #000000;
    color: #f0f0f0;
    border-radius: 0;
    border-bottom: 1px solid #3a3a3a;
    text-shadow: 0 0 12px rgba(255, 255, 255, .25);
    font-style: italic;
    letter-spacing: 2px;
    padding: 8px 12px;

    a { color: #f0f0f0; }
}

.subheader {
    background: transparent;

    .title {
        color: #f0f0f0;
        font-style: italic;
        letter-spacing: 1px;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, .9);

        a { color: #f0f0f0; }
    }
    .title .thread-views { color: #8a8a8a; }
}

.boards h2, .recent-attachments h2, .recent-posts-header h2 {
    color: #f0f0f0;
    font-style: italic;
    letter-spacing: 2px;
    border-bottom: 1px solid #3a3a3a;

    a { color: #f0f0f0; }
}

.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    background: #1a1a1a;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, .05), transparent 55%);
    border: 0;
    border-left: 2px solid #4a4a4a;
    color: #d8d8d8;
    margin-bottom: 8px;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, .8);
}

.board .name, .thread .name, .recent-post .name {
    color: #ffffff;
    font-size: 11pt;
    letter-spacing: .5px;
}
.board .description { color: #8a8a8a; font-style: italic; }
.thread {
    .author { color: #b8b8b8; }
    .time, .view-count, .reply-count { color: #8a8a8a; }
    .time a { color: #8a8a8a; }
    &:visited .name { color: #9a9a9a; }
    &.deleted .name { color: #6a6a6a; }
}

a { color: #e8e8e8; text-decoration: underline; text-decoration-color: #5a5a5a; }
a:visited { color: #a8a8a8; }
a:hover { color: #ffffff; text-decoration-color: #ffffff; }

.post {
    .author { color: #ffffff; }
    .time a { color: #8a8a8a; }
    .ip_hash { background: #000000; color: #b8b8b8; }
    .text {
        line-height: 1.65;
        color: #cfcfcf;

        .greentext { color: #9a9a9a; font-style: italic; }
        .title { color: #ffffff; }
    }
    .post-buttons .post-button {
        background: #000000;
        border: 1px solid #4a4a4a;
        color: #d8d8d8;
    }
}

.posts .post-meta {
    background: #000000;
    border-top: 1px solid #3a3a3a;

    a { color: #b8b8b8; }
}

:is(.subheader .right .button, form input[type=submit]) {
    background: #f0f0f0;
    color: #101010;
    border: 0;
    border-radius: 0;
    text-shadow: none;
    letter-spacing: 2px;
    font-family: inherit;

    &:hover { background: #ffffff; box-shadow: 0 0 14px rgba(255, 255, 255, .35); }
}

.form, form { background: #161616; border: 1px solid #3a3a3a; }

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #0a0a0a;
    border: 1px solid #4a4a4a;
    color: #e8e8e8;
    font-family: inherit;

    &:focus { outline: none; border-color: #b8b8b8; }
}

.pager {
    a, span, span.current {
        background: #1a1a1a;
        border: 1px solid #4a4a4a;
        color: #d8d8d8;
        border-radius: 0;
    }
    span.current { background: #f0f0f0; color: #101010; border-color: #f0f0f0; }
    a:hover { border-color: #b8b8b8; }
}

.recent-attachments-gallery .recent-attachment {
    background: #1a1a1a;
    border: 1px solid #4a4a4a;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, .8);
    filter: grayscale(1) contrast(1.15);

    &:hover { filter: grayscale(0); }
}

/* the whole case file is in black and white */
.post .attachment .thumb img { filter: grayscale(1) contrast(1.15); }
.post .attachment .thumb:hover img { filter: grayscale(0); }

mark { background: #f0f0f0; color: #101010; }

.sort-bar {
    color: #6a6a6a;
    a { color: #8a8a8a; &.sort-active { color: #ffffff; } }
}

/* red is only for trouble */
.thread-warning {
    background: #1a1a1a;
    border-left-color: #8a8a8a;
    font-style: italic;
    &.thread-deleted-notice { color: #c02020; border-left-color: #c02020; }
}
.flashed-message { border-left-color: #f0f0f0; }
.no-threads { color: #6a6a6a; font-style: italic; }

footer {
    color: #6a6a6a;
    a { color: #8a8a8a; }
}