/* Fable: Teletext — page 100 on a 1980s television: pure black, eight blocky
   colours, cyan-on-blue banners, and nothing that isn't monospace. */

body, input, button, textarea, select {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 12pt;
    font-weight: bold;
    color: #ffffff;
}

body { background: #000000; }

.wrapper { max-width: 760px; }

header {
    background: #0000c0;
    color: #ffff00;
    border-radius: 0;
    text-shadow: none;
    text-transform: uppercase;
    padding: 4px 8px;

    a { color: #ffff00; }
    /* page number, as is proper */
    &::before { content: 'P100 '; color: #00ffff; }
}

.subheader {
    background: #000000;

    .title {
        color: #00ffff;
        text-transform: uppercase;
        background: #0000c0;
        padding: 2px 8px;

        a { color: #00ffff; }
    }
    .title .thread-views { color: #ffffff; background: transparent; }
}

.boards h2, .recent-attachments h2, .recent-posts-header h2 {
    color: #ffff00;
    background: #0000c0;
    text-transform: uppercase;
    padding: 2px 8px;

    a { color: #ffff00; }
}

.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    background: #000000;
    border: 0;
    border-top: 0;
    border-bottom: 0;
    color: #ffffff;
    margin-bottom: 2px;
    padding: 4px 8px;
}

/* alternating teletext row colours */
.thread:nth-child(odd) .name, .board:nth-child(odd) .name, .recent-post:nth-child(odd) .name { color: #00ff00; }
.thread:nth-child(even) .name, .board:nth-child(even) .name, .recent-post:nth-child(even) .name { color: #00ffff; }

.board .name, .thread .name, .recent-post .name { text-transform: uppercase; }
.board .description { color: #ffffff; font-weight: normal; }
.thread {
    .author { color: #ff00ff; }
    .time { color: #ffffff; a { color: #ffffff; } }
    .reply-count { color: #ffff00; }
    .view-count { color: #ffff00; }
    &:visited .name { color: #b0b0b0; }
    &.deleted .name { color: #ff0000; }
}

a { color: #00ffff; text-decoration: none; }
a:visited { color: #ff00ff; }
a:hover { background: #00ffff; color: #000000; }

.post {
    .author { color: #ff00ff; }
    .time a { color: #ffffff; }
    .ip_hash { background: #0000c0; color: #ffff00; border-radius: 0; }
    .text {
        color: #ffffff;
        font-weight: normal;

        .greentext { color: #00ff00; }
        .title { color: #ffff00; }
    }
    .post-buttons .post-button {
        background: #0000c0;
        border: 0;
        color: #ffff00;
    }
}

.posts .post-meta {
    background: #0000c0;
    border-top: 0;

    a { color: #00ffff; }
}

:is(.subheader .right .button, form input[type=submit]) {
    background: #ffff00;
    color: #000000;
    border: 0;
    border-radius: 0;
    text-shadow: none;
    font-family: inherit;
    font-weight: bold;

    &:hover { background: #00ff00; }
}

.form, form { background: #000000; border: 2px solid #0000c0; }

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #000000;
    border: 1px solid #00ffff;
    color: #00ff00;
    font-family: inherit;
    font-weight: bold;

    &:focus { outline: 2px solid #ffff00; }
}

.pager {
    /* pages are teletext pages */
    a, span, span.current {
        background: #000000;
        border: 0;
        color: #00ffff;
        border-radius: 0;
    }
    span.current { background: #ffff00; color: #000000; }
    a:hover { background: #00ffff; color: #000000; }
}

.recent-attachments-gallery .recent-attachment {
    background: #000000;
    border: 2px solid #0000c0;
}

mark { background: #ffff00; color: #000000; }

.sort-bar {
    color: #ffffff;
    text-transform: uppercase;
    a { color: #00ffff; &.sort-active { color: #ffff00; } }
}

.thread-warning {
    background: #0000c0;
    color: #ffff00;
    text-transform: uppercase;
    &.thread-deleted-notice { background: #ff0000; color: #ffffff; }
}
.flashed-message { background: #00ff00; color: #000000; text-transform: uppercase; }
.no-threads { color: #ff00ff; text-transform: uppercase; }

footer {
    color: #ffffff;
    a { color: #00ffff; }
    /* the eternal teletext footer row */
    &::after {
        content: 'RED GREEN YELLOW CYAN';
        display: block;
        color: #000000;
        background: linear-gradient(90deg, #ff0000 0 25%, #00ff00 25% 50%, #ffff00 50% 75%, #00ffff 75% 100%);
        text-align: center;
        margin-top: 4px;
    }
}