hoogle-gruvbox by elkowar

/* ==UserStyle==
@name           hoogle-gruvbox
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         ElKowar
@preprocessor   stylus
==/UserStyle== */
@-moz-document domain("hoogle.haskell.org") {
    :root {
        --elk-font-family: "Terminus (TTF)";
        --elk-font-size: 14px;
        
        --elk-bg-dark: #1d2021;
        --elk-bg-darkisher: #202020;
        --elk-bg-darkish: #222222;
        --elk-bg-normal: #282828;
        --elk-bg-brighter: #504945;
        
        --elk-border: #353331;
        
        --elk-fg-normal: #ebdbb2;
        --elk-fg-brighter: #fbf1c7;
        --elk-fg-darker: #d5c4a1;
        --elk-fg-dark: #a89984;
        --elk-fg-inactive: #696969;
        
        --elk-red: #fb4934;
        --elk-purple: #b16286;
        --elk-blue: #458588;
        --elk-green: #b8bb26;
        --elk-aqua: #83c07c;
        --elk-yellow: #fabd2f;
        --elk-orange: #fe8019;
        
        --elk-accent: var(--elk-aqua);
    }

    :root {
        --monospaced: "Jetbrains Mono";
        --monospaced-size: 14px;
        --monospaced-small: cozette;
    }

    * {
        color: var(--elk-fg-normal);
        border-color: var(--elk-fg-normal) !important;
    }

    body {
        background-color: var(--elk-bg-normal);
        color: var(--elk-fg-normal);
    }


    #links {
        border: none;
        background-color: var(--elk-bg-dark);
        padding: 0.3rem;
        * {
            color: var(--elk-fg-normal) !important;
        }
    }
    #logo img {
        display: inline-block;
        opacity: 0;
    }

    a {
        &[href]:link {
            color: var(--col_blue);
        }
        &[href]:visited {
            color: var(--col_aqua);
        }
    }
    #footer {
        display: none;
    }

    #example {
        background-color: var(--elk-bg-dark);
        border: none !important;
        color: var(--elk-fg-normal);
        padding: 1rem;
    }

    input {
        background-color: var(--elk-bg-dark);
        border: unset;
        border-color: var(--elk-bg-brighter);
        padding: 0.2rem 1rem;;
        transition: box-shadow 0.2s ease-in-out;
        &[type="submit"]:hover {
            box-shadow: 2px 2px 5px 0 rgba(0,0,0, 0.2);
        }
    }
    #scope_chosen {
        background-color: var(--elk-bg-dark);
        padding: 0.2rem;
        > * {
            background: none;
            border: none;
            box-shadow: none;
        }
        .chosen-drop {
            background-color: var(--elk-bg-dark);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
            padding: 0.5rem;
            input {
                border: none;
            }
            .no-results {
                background: none;
            }
        }
    }


    h1,
    h2,
    h3,
    h4,
    h5,
    th,
    .caption {
        border: none !important;
        color: var(--col_blue) !important;
        a {
            color: inherit !important;
        }
    }

    a {
        color: var(--col_blue) !important;
    }

    .result {
        a:hover {
            background-color: inherit;
        }
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
        .from {
            padding: 0.5rem 0.9rem;
        }
        .ans {
            background-color: var(--elk-bg-dark);
            border: none;
            padding: 0.3rem 1rem;
            .name {
                color: var(--col_aqua);
                b {
                    color: var(--col_aqua);
                    font-weight: normal;
                }
            }
        }
    }
    .doc.newline:not(:empty) {
        background: none;
        &::before {
            margin-left: -0.8rem;
            width: 1rem;
            display: inline-block;
            color: var(--col_aqua);
            cursor: pointer;
        }
        &.shut::before {
            content: "+";
        }
        &.open::before {
            content: "-";
        }
    }

    .minus {
        margin-left: -1rem;
    }
    .minus,
    .plus {
        background: none !important;
        &::after {
            text-align: center;
            width: 0.6rem;
            height: 1rem;
            margin: 0 0.2rem;
            display: inline-block;
            color: var(--col_aqua);
            cursor: pointer;
        }
    }
    .minus::after {
        content: "-"
    }
    .plus::after {
        content: "+"
    }
}