Mojeek - Gruvbox Dark by Xifax

/* ==UserStyle==
@name           Mojeek - Gruvbox Dark
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A gruvbox-inspired dark theme for Mojeek search
@author         Xifax
==/UserStyle== */
@-moz-document domain("mojeek.com") {

    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

    /* Gruvbox color palette */
    :root {
        --gb-dark0: #282828;
        --gb-dark1: #3c3836;
        --gb-dark2: #504945;
        --gb-dark3: #665c54;
        --gb-dark4: #7c6f64;

        --gb-light0: #fbf1c7;
        --gb-light1: #ebdbb2;
        --gb-light2: #d5c4a1;
        --gb-light3: #bdae93;
        --gb-light4: #a89984;

        --gb-red: #cc241d;
        --gb-green: #98971a;
        --gb-yellow: #d79921;
        --gb-blue: #458588;
        --gb-purple: #b16286;
        --gb-aqua: #689d6a;
        --gb-orange: #d65d0e;
        --gb-gray: #928374;
    }

    /* Base styles */
    body {
        background-color: var(--gb-dark0) !important;
        color: var(--gb-light1) !important;
        font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        font-weight: 400;
        line-height: 1.6;
    }

    /* Headers and titles */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .title,
    .results-count-container p {
        font-family: 'Raleway', sans-serif !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }


    /* Header */
    .header {
        background-color: var(--gb-dark0) !important;
        border-bottom: 1px solid var(--gb-dark2) !important;
    }

    .header-logo img {
        filter: brightness(1.2) saturate(0.8) !important;
    }

    /* Search button */
    button[type="submit"] {
        background-color: var(--gb-dark2) !important;
        color: var(--gb-light1) !important;
        border-radius: 4px !important;
    }

    button[type="submit"]:hover {
        background-color: var(--gb-dark3) !important;
    }

    /* Results */
    .result-col {
        background-color: var(--gb-dark0) !important;
    }

    .results-count-container p {
        color: var(--gb-light4) !important;
    }

    /* Result links */
    .title {
        color: var(--gb-blue) !important;
    }

    .title:visited {
        color: var(--gb-purple) !important;
    }

    .title:hover {
        color: var(--gb-aqua) !important;
        text-decoration: underline !important;
    }

    .url {
        color: var(--gb-green) !important;
    }

    .s {
        color: var(--gb-light2) !important;
    }

    /* Pagination */
    .pagination ul li a {
        color: var(--gb-yellow) !important;
        background-color: var(--gb-dark1) !important;
        border-radius: 3px !important;
    }

    .pagination ul li a:hover {
        background-color: var(--gb-dark2) !important;
    }

    .pagination ul li span {
        background-color: var(--gb-dark2) !important;
        color: var(--gb-orange) !important;
        border-radius: 3px !important;
    }


    /* Footer */
    .footer-search {
        background-color: var(--gb-dark1) !important;
        border-top: 1px solid var(--gb-dark2) !important;
    }

    .footer-loc,
    .footer a {
        color: var(--gb-light4) !important;
    }

    .footer a:hover {
        color: var(--gb-yellow) !important;
    }

    /* Hamburger menu */
    .hamburger span {
        background-color: var(--gb-light1) !important;
    }

    /* Modal */
    .modal-content {
        background-color: var(--gb-dark1) !important;
        border: 1px solid var(--gb-dark3) !important;
    }

    .close-btn {
        color: var(--gb-light1) !important;
    }

    /* Highlighted text */
    strong {
        color: var(--gb-orange) !important;
    }

    /* Buttons */
    .js-clear-search-btn {
        color: var(--gb-light4) !important;
    }

    .js-clear-search-btn:hover {
        color: var(--gb-red) !important;
    }
}