Gazelle/static/styles/bookish/matcha/matcha.scss

/**
 * Matcha Additions
 */

body.style_matcha {
    /* Body */
    background: #edeae5;

    /* Header and logo */
    #header {
        background: url("/static/styles/bookish/matcha/sam-komon.png");
    }

    #logo {
        background: url("/static/common/logos/matcha.png") no-repeat center;
        background-size: contain;
        width: 250px;
        height: 50px;
        margin: 0 0 0 10%;
    }

    /* Main menu */
    #menu {
        background-color: #016670;
    }

    #menu ul li a.active {
        background-color: #016670;
    }

    #menu ul li a:hover {
        background-color: #0298a6;
    }

    /* Dropdown menu */
    #menu .nav_dropdown {
        background: #016670;
        margin-top: 0;
    }

    .nav_dropdown > div {
        box-shadow: 2px 2px 10px -2px slategray;
        position: absolute;
        background-color: #016670;
        width: 100%;
        z-index: 99999;
        margin-top: 2.4em;
        /* margin-top: 32px; */
        left: 0;
    }

    .nav_dropdown > div > a {
        display: none;
        color: white;
        height: 2.4em;
        line-height: 2.4em;
        text-decoration: none;
    }

    .nav_dropdown:hover > div > a {
        display: block;
    }

    /* Search bars */
    #searchbars {
        text-align: center;
        background-color: #9fedd7;
        box-sizing: content-box;
        padding: 0.5em 10%;
        display: flex;

        input {
            position: relative;
            border: 1px solid transparent;
            box-sizing: border-box;
            padding: 0.25em 0.25em 0.25em 0.5em;
            background-color: white;
            width: 100%;
            color: black;
        }

        ul {
            margin: 0 auto;
            display: block;
            text-align: center;

            li {
                display: inline;
                margin: 0px 1px;
                list-style: none;
                position: relative;

                form {
                    display: inline;
                }

                ul {
                    display: block;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    z-index: 1000;
                    background-color: white;
                    width: 12em;
                    margin-top: 1em;

                    li {
                        margin: 0 0 0 0;
                        padding: 0;
                        display: block;
                        width: 100%;

                        .highlight {
                            background: white;
                        }
                    }
                }
            }
        }
    }

    #searchbars > .search_form {
        flex: 1 1 auto;
        text-align: center;
        margin: 0 0.1em;
    }

    /* Upload, Invite, etc. */
    #userinfo {
        background: #fff9c7;
        box-shadow: 0 2px 10px -2px slategray;
        color: black;
        padding: 0.5em 0;
        width: 100%;
        text-align: center;

        a {
            color: black;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        b a {
            font-weight: normal;
            font-size: 0.9em;
            font-weight: bold;
        }

        ul {
            display: inline;
            margin: 0 1%;

            li {
                display: inline;
                margin: 0 0.1em;
                line-height: 2em;
                vertical-align: middle;
                padding: 0;
            }
        }
    }

    #userinfo_minor > li > ul {
        display: none;
        position: absolute;
        padding: 5px;
        left: -5px;
        background-color: #fff9c7;
        z-index: 100;
    }

    /* Alerts, Toolbox, etc. */
    .alertbar {
        background-color: #fff9c7;
        text-align: center;
        color: black;
        font-weight: bold;
        width: 320px;
        margin: 2em auto;
        padding: 1em;

        a {
            color: black;
            text-decoration: none;

            &:hover {
                color: black;
                text-decoration: underline;
            }
        }

        .warning {
            background-color: #ffe68a;
        }

        .error {
            background-color: #ff8a8a;
        }
    }

    /* Column heads */
    .head {
        background: #9fedd7;
        color: black;
        padding: 0.5em 1em;
    }

    .colhead {
        background: #9fedd7;
        font-weight: bold;
        color: black;
    }

    .colhead_dark {
        background: #9fedd7;
        color: black;
    }

    /* Box */
    .box,
    section {
        background-color: white;
        border: none;
        margin-bottom: 1em;
    }

    /* Shadows */
    .box,
    .border,
    .alertbar,
    .artist_table,
    .request_table,
    .forum_index,
    #userinfo_minor > li > ul,
    .permissions table {
        box-shadow: 2px 2px 10px -2px slategray;
    }

    /* Links */
    a {
        color: #016670;
        text-decoration: none;

        &:hover {
            color: black;
            text-decoration: underline;
        }
    }

    /* Special links */
    .forum_post .body a:not([href="#"]),
    .rule_summary a,
    .wiki_article a,
    #actual_rules a,
    .news_post .pad a,
    .store_table a {
        color: #016670;
        text-decoration: none;
    }

    .forum_post .body a:hover:not([href="#"]),
    .rule_summary a:hover,
    .wiki_article a:hover,
    #actual_rules a:hover,
    .news_post .pad a:hover,
    .store_table a:hover {
        color: black;
        text-decoration: underline;
    }

    /* Blockquote */
    blockquote {
        margin: 0.5em 2em;
        padding: 1em;
        border: 1px solid #bbb;
    }

    /* Buttons */
    button:not(.editor-toolbar button),
    input[type="button"],
    input[type="submit"] {
        background: #fbe180;
        border-radius: 0.25rem;
        box-shadow: 2px 2px 10px -5px slategray;
    }

    button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover {
        background: #fff9c7;
    }

    button:focus,
    input[type="button"]:focus,
    input[type="submit"]:focus {
        background: #fff9c7;
    }

    /* Text input */
    input.inputtext {
        border: none;
        border-bottom: 1px solid #edeae5;
        background-color: white;
        font-size: 13px;
        outline: none;
        transition: ease-in-out 0.12s;

        &:focus {
            border-bottom: 1px solid #fbe180;
        }
    }

    /* Cover images */
    #coverCont {
        background-color: #fff9c7;
        padding: 5px;
        box-shadow: 2px 2px 10px -2px slategray;
    }

    #coverCont img {
        background-color: #fff9c7;
    }

    /* Captions */
    caption {
        border-bottom: 1px solid #edeae5;
        font-weight: bold;
    }

    /* Messages */
    .error_message {
        padding: 1em;
        background-color: #ff8a8a;
        text-align: center;
        color: white;
        font-weight: bold;
        box-shadow: 2px 2px 10px -5px slategray;
    }

    .save_message {
        padding: 1em;
        width: 50%;
        margin: 2em auto;
        background: #fbe180;
        text-align: center;
        color: black;
        font-weight: bold;
        box-shadow: 2px 2px 10px -5px slategray;
    }

    /* Forums */
    .forum_post .colhead_dark {
        background: #9fedd7;
    }

    .forum_post.staff_post .colhead_dark {
        background: #fbe180;
    }

    .forum_post.sticky_post {
        border: 2px solid #fbe180;
    }

    /* Inbox */
    tr.unreadpm {
        background-color: #fff9c7;
    }
} /* end body.style_matcha */