/* ==UserStyle==
@name           Gitlab Gruvbox
@namespace      github.com/0x61nas/gitlab-gruvbox-styl
@version        1.1.0
@description    Customizable Gruvbox color scheme for Gitlab
@author         Anas Elgarhy <anas.elgarhy.dev@gmail.com>
@homepageURL    https://github.com/0x61nas/gitlab-gruvbox-styl
@supportURL     https://github.com/0x61nas/gitlab-gruvbox-styl/issues
@updateURL      https://raw.githubusercontent.com/0x61nas/gitlab-gruvbox-styl/aurora/gitlab-gruvbox.user.styl
@preprocessor   stylus
@license        CC-BY-SA-4.0

@var select theme-variant "Gruvbox variant" {
    'Light Soft' : 'light-soft-theme-variant',
    'Light' : 'light-theme-variant',
    'Light Hard': 'light-hard-theme-variant',
    'Dark Soft' : 'dark-soft-theme-variant',
    'Dark' : 'dark-theme-variant',
    'Dark Hard': 'dark-hard-theme-variant'
}
==/UserStyle== */

@-moz-document domain("gitlab.com"),
domain("gitgud.io"),
domain("gitlab.archlinux.org") {
    if theme-variant is light-soft-theme-variant {
        :root {
            --gruvbox-ansi00: #f2e5bc;
            --gruvbox-ansi01: #cc241d;
            --gruvbox-ansi02: #98971a;
            --gruvbox-ansi03: #d79921;
            --gruvbox-ansi04: #458588;
            --gruvbox-ansi05: #b16286;
            --gruvbox-ansi06: #689d6a;
            --gruvbox-ansi07: #7c6f64;
            --gruvbox-ansi08: #928374;
            --gruvbox-ansi09: #9d0006;
            --gruvbox-ansi10: #79740e;
            --gruvbox-ansi11: #b57614;
            --gruvbox-ansi12: #076678;
            --gruvbox-ansi13: #8f3f71;
            --gruvbox-ansi14: #427b58;
            --gruvbox-ansi15: #3c3836;
            --the-primary-color: var(--gruvbox-ansi12); /* TODO(anas): make this Customizable */
            --gruvbox-bg1: #e8d5a0;
            --gruvbox-bg2: #dfd0a0;
            --gruvbox-surface0: #ebd9a8;
            --gruvbox-surface1: #d5c4a1;
        }
    }
    else if theme-variant is light-theme-variant {
        :root {
            --gruvbox-ansi00: #fbf1c7;
            --gruvbox-ansi01: #cc241d;
            --gruvbox-ansi02: #98971a;
            --gruvbox-ansi03: #d79921;
            --gruvbox-ansi04: #458588;
            --gruvbox-ansi05: #b16286;
            --gruvbox-ansi06: #689d6a;
            --gruvbox-ansi07: #7c6f64;
            --gruvbox-ansi08: #928374;
            --gruvbox-ansi09: #9d0006;
            --gruvbox-ansi10: #79740e;
            --gruvbox-ansi11: #b57614;
            --gruvbox-ansi12: #076678;
            --gruvbox-ansi13: #8f3f71;
            --gruvbox-ansi14: #427b58;
            --gruvbox-ansi15: #3c3836;
            --the-primary-color: var(--gruvbox-ansi12); /* TODO(anas): make this Customizable */
            --gruvbox-bg1: #ebdbb2;
            --gruvbox-bg2: #d5c4a1;
            --gruvbox-surface0: #f2e5bc;
            --gruvbox-surface1: #d5c4a1;
        }
    }
    else if theme-variant is light-hard-theme-variant {
        :root {
            --gruvbox-ansi00: #f9f5d7;
            --gruvbox-ansi01: #cc241d;
            --gruvbox-ansi02: #98971a;
            --gruvbox-ansi03: #d79921;
            --gruvbox-ansi04: #458588;
            --gruvbox-ansi05: #b16286;
            --gruvbox-ansi06: #689d6a;
            --gruvbox-ansi07: #7c6f64;
            --gruvbox-ansi08: #928374;
            --gruvbox-ansi09: #9d0006;
            --gruvbox-ansi10: #79740e;
            --gruvbox-ansi11: #b57614;
            --gruvbox-ansi12: #076678;
            --gruvbox-ansi13: #8f3f71;
            --gruvbox-ansi14: #427b58;
            --gruvbox-ansi15: #3c3836;
            --the-primary-color: var(--gruvbox-ansi12); /* TODO(anas): make this Customizable */
            --gruvbox-bg1: #f2e5bc;
            --gruvbox-bg2: #ebdbb2;
            --gruvbox-surface0: #fbf1c7;
            --gruvbox-surface1: #d5c4a1;
        }
    }
    else if theme-variant is dark-soft-theme-variant {
        :root {
            --gruvbox-ansi00: #32302f;
            --gruvbox-ansi01: #cc241d;
            --gruvbox-ansi02: #98971a;
            --gruvbox-ansi03: #d79921;
            --gruvbox-ansi04: #458588;
            --gruvbox-ansi05: #b16286;
            --gruvbox-ansi06: #689d6a;
            --gruvbox-ansi07: #a89984;
            --gruvbox-ansi08: #928374;
            --gruvbox-ansi09: #fb4934;
            --gruvbox-ansi10: #b8bb26;
            --gruvbox-ansi11: #fabd2f;
            --gruvbox-ansi12: #83a598;
            --gruvbox-ansi13: #d3869b;
            --gruvbox-ansi14: #8ec07c;
            --gruvbox-ansi15: #ebdbb2;
            --the-primary-color: var(--gruvbox-ansi12); /* TODO(anas): make this Customizable */
            --gruvbox-bg1: #282828;
            --gruvbox-bg2: #1d2021;
            --gruvbox-surface0: #3c3836;
            --gruvbox-surface1: #504945;
        }
    }
    else if theme-variant is dark-theme-variant {
        :root {
            --gruvbox-ansi00: #282828;
            --gruvbox-ansi01: #cc241d;
            --gruvbox-ansi02: #98971a;
            --gruvbox-ansi03: #d79921;
            --gruvbox-ansi04: #458588;
            --gruvbox-ansi05: #b16286;
            --gruvbox-ansi06: #689d6a;
            --gruvbox-ansi07: #a89984;
            --gruvbox-ansi08: #928374;
            --gruvbox-ansi09: #fb4934;
            --gruvbox-ansi10: #b8bb26;
            --gruvbox-ansi11: #fabd2f;
            --gruvbox-ansi12: #83a598;
            --gruvbox-ansi13: #d3869b;
            --gruvbox-ansi14: #8ec07c;
            --gruvbox-ansi15: #ebdbb2;
            --the-primary-color: var(--gruvbox-ansi12); /* TODO(anas): make this Customizable */
            --gruvbox-bg1: #1d2021;
            --gruvbox-bg2: #17191a;
            --gruvbox-surface0: #32302f;
            --gruvbox-surface1: #3c3836;
        }
    }
    else if theme-variant is dark-hard-theme-variant {
        :root {
            --gruvbox-ansi00: #1d2021;
            --gruvbox-ansi01: #cc241d;
            --gruvbox-ansi02: #98971a;
            --gruvbox-ansi03: #d79921;
            --gruvbox-ansi04: #458588;
            --gruvbox-ansi05: #b16286;
            --gruvbox-ansi06: #689d6a;
            --gruvbox-ansi07: #a89984;
            --gruvbox-ansi08: #928374;
            --gruvbox-ansi09: #fb4934;
            --gruvbox-ansi10: #b8bb26;
            --gruvbox-ansi11: #fabd2f;
            --gruvbox-ansi12: #83a598;
            --gruvbox-ansi13: #d3869b;
            --gruvbox-ansi14: #8ec07c;
            --gruvbox-ansi15: #ebdbb2;
            --the-primary-color: var(--gruvbox-ansi12); /* TODO(anas): make this Customizable */
            --gruvbox-bg1: #17191a;
            --gruvbox-bg2: #121415;
            --gruvbox-surface0: #282828;
            --gruvbox-surface1: #3c3836;
        }
    }
    * {
        /*Some base colors*/
        --gl-color-neutral-600: var(--gruvbox-ansi15) !important;
        --gl-color-neutral-50: var(--gruvbox-ansi15) !important;
        --gl-text-color-heading: var(--gruvbox-ansi15) !important;

        --gl-text-secondary: var(--gruvbox-ansi08) !important;

        --gl-text-color-subtle: var(--gruvbox-ansi08) !important;

        --gl-border-color-strong: var(--gruvbox-ansi07) !important;

        /*Different UI colors*/
        --gl-color-neutral-950: var(--gruvbox-ansi00) !important;
        --gl-color-neutral-900: var(--gruvbox-bg1) !important;
        --gl-text-color-default: var(--gruvbox-ansi15) !important;
        --gl-avatar-border-color-default: var(--gruvbox-surface1) !important;
        --gl-dropdown-option-text-color-disabled: var(--gruvbox-surface1) !important;

        --gl-background-color-default: var(--gruvbox-ansi00) !important;
        --gl-text-color-link: var(--the-primary-color) !important;
        --gl-background-color-subtle: var(--gruvbox-bg1) !important;
        --gl-border-color-default: var(--gruvbox-surface1) !important;
        --gl-color-neutral-800: var(--gruvbox-surface1) !important;
        --gray-100: var(--gruvbox-surface1) !important;
        --gl-control-border-color-default: var(--gruvbox-surface1) !important;

        /* main buttons */
        --gl-button-default-primary-background-color-default: var(--gruvbox-surface0) !important;
        --gl-button-default-primary-background-color-active: var(--gruvbox-ansi00) !important;
        /* not sure! */
        --gl-button-default-primary-background-color-focus: var(--gruvbox-surface1) !important;
        --gl-button-default-primary-background-color-hover: var(--gruvbox-surface1) !important;

        --gl-button-confirm-primary-background-color-active: var(--the-primary-color) !important;
        --gl-button-confirm-primary-background-color-default: var(--the-primary-color) !important;
        --gl-button-confirm-primary-background-color-focus: var(--the-primary-color) !important;
        --gl-button-confirm-primary-background-color-hover: var(--the-primary-color) !important;
        /* sidebar buttons */
        --super-sidebar-user-bar-button-active-bg: var(--gruvbox-surface1) !important;
        --super-sidebar-user-bar-button-bg: var(--gruvbox-surface0) !important;
        --super-sidebar-user-bar-button-border-color: var(--gruvbox-surface1) !important;
        --super-sidebar-user-bar-button-color: var(--gruvbox-ansi15) !important;
        --super-sidebar-user-bar-button-hover-bg: var(--gruvbox-surface1) !important;
        --super-sidebar-user-bar-button-hover-color: var(--gruvbox-ansi15) !important;

        /* sidebar */
        --super-sidebar-user-bar-bg: var(--gruvbox-bg2) !important;
        --super-sidebar-context-header-color: var(--the-primary-color) !important;
        --super-sidebar-accent-color: var(--the-primary-color) !important;
        --super-sidebar-nav-item-active-bg: var(--gruvbox-surface1) !important;
        --super-sidebar-nav-item-current-bg: var(--gruvbox-surface0) !important;
        --super-sidebar-nav-item-hover-bg: var(--gruvbox-surface0) !important;

        /*Badges*/
        --gl-badge-muted-background-color-default: var(--gruvbox-ansi07) !important;
        --gl-badge-success-background-color-default: var(--gruvbox-ansi14) !important;

        --gl-action-strong-confirm-background-color-active: var(--the-primary-color) !important;
        --gl-alert-info-border-top-color: var(--the-primary-color) !important;
        --gl-button-confirm-primary-background-color-active: var(--the-primary-color) !important;

        /*Checkbox*/
        --gl-control-border-color-selected-default: var(--the-primary-color) !important;
        --gl-control-background-color-selected-default: var(--the-primary-color) !important;
        --gl-control-background-color-selected-hover: var(--the-primary-color) !important;
        --gl-control-border-color-selected-hover: var(--the-primary-color) !important;

        --gl-focus-ring-outer-color: var(--the-primary-color) !important;
        --gl-progress-bar-indicator-color-default: var(--the-primary-color) !important;
        --gl-status-info-icon-color: var(--the-primary-color) !important;
        --gl-tab-selected-indicator-color-default: var(--the-primary-color) !important;
        --gl-toggle-switch-icon-color-checked-active: var(--the-primary-color) !important;
        --info: var(--the-primary-color) !important;

        --gl-action-neutral-background-color-hover: var(--gruvbox-surface0) !important;

        /*Danger button*/
        --gl-text-color-danger: var(--gruvbox-ansi09) !important;
        --gl-button-danger-primary-background-color-default: var(--gruvbox-ansi09) !important;
        --gl-button-danger-primary-background-color-hover: var(--gruvbox-ansi09) !important;
        --gl-button-danger-primary-background-color-active: var(--gruvbox-ansi09) !important;

        /*Repository file tree selected border*/
        --gl-action-selected-border-color-default: var(--the-primary-color) !important;

        /*CI icon colors*/
        --ci-icon-success-background-color: var(--gruvbox-ansi14) !important;
        --ci-icon-success-text-color: var(--gruvbox-ansi02) !important;
        --ci-icon-success-icon-color: var(--gruvbox-ansi14) !important;
        --ci-icon-success-icon-background-color: var(--gruvbox-ansi02) !important;
        --ci-icon-warning-background-color: var(--gruvbox-ansi11) !important;
        --ci-icon-warning-text-color: var(--gruvbox-ansi03) !important;
        --ci-icon-warning-icon-color: var(--gruvbox-ansi11) !important;
        --ci-icon-warning-icon-background-color: var(--gruvbox-ansi03) !important;
        --ci-icon-danger-background-color: var(--gruvbox-ansi09) !important;
        --ci-icon-danger-text-color: var(--gruvbox-ansi01) !important;
        --ci-icon-danger-icon-color: var(--gruvbox-ansi09) !important;
        --ci-icon-danger-icon-background-color: var(--gruvbox-ansi01) !important;
        --ci-icon-info-background-color: var(--gruvbox-ansi12) !important;
        --ci-icon-info-text-color: var(--gruvbox-ansi04) !important;
        --ci-icon-info-icon-color: var(--gruvbox-ansi12) !important;
        --ci-icon-info-icon-background-color: var(--gruvbox-ansi04) !important;
        --ci-icon-neutral-background-color: var(--gruvbox-ansi07) !important;
        --ci-icon-neutral-text-color: var(--gruvbox-ansi08) !important;
        --ci-icon-neutral-icon-color: var(--gruvbox-ansi07) !important;
        --ci-icon-neutral-icon-background-color: var(--gruvbox-ansi08) !important;

        /*Diff & timeline*/
        --diff-warning-background-color: var(--gruvbox-ansi01) !important;
        --timeline-entry-draft-note-background-color: var(--gruvbox-ansi01) !important;
        --timeline-entry-internal-note-background-color: var(--gruvbox-ansi01) !important;
        --timeline-entry-target-background-color: var(--gruvbox-ansi04) !important;

        /*Contribution graph*/
        --user-contribution-graph-cell-level-0: var(--gruvbox-bg1) !important;
        --user-contribution-graph-cell-level-1: var(--gruvbox-ansi04) !important;
        --user-contribution-graph-cell-level-2: var(--gruvbox-ansi12) !important;
        --user-contribution-graph-cell-level-3: var(--gruvbox-ansi12) !important;
        --user-contribution-graph-cell-level-4: var(--gruvbox-ansi14) !important;

        /*Severity*/
        --severity-color-critical: var(--gruvbox-ansi09) !important;
        --severity-color-high: var(--gruvbox-ansi09) !important;
        --severity-color-medium: var(--gruvbox-ansi11) !important;
        --severity-color-low: var(--gruvbox-ansi03) !important;
        --severity-color-info: var(--gruvbox-ansi12) !important;
        --severity-color-unknown: var(--gruvbox-ansi07) !important;

        /*Find and replace*/
        --find-and-replace-match-active-text-color: var(--gruvbox-ansi15) !important;
        --find-and-replace-match-active-background-color: var(--gruvbox-ansi03) !important;
    }

    /*Search bar with buttons*/
    .gl-search-box-by-click-with-search-button {
        background-color: var(--gruvbox-surface0) !important
    }

    /*Projects page search buttons*/
    .input-group .input-group-prepend,
    .input-group .input-group-append {
        background-color: var(--gruvbox-surface0) !important
    }

    /*Repository files tree*/
    .tree-holder table.tree-table tr th:where(.gl-dark *) {
        background-color: var(--gruvbox-bg2) !important
    }

    .tree-holder table.tree-table:where(.gl-dark *) {
        background-color: var(--gruvbox-bg1)!important
    }

    /*Repository Empty*/
    .gl-card-body {
        background-color: var(--gruvbox-bg1) !important;
    }
    .gl-card-header {
        background-color: var(--gruvbox-bg2) !important;
    }
    .code {
        background-color: var(--gruvbox-ansi00) !important;
        color: var(--gruvbox-ansi15) !important;
    }

    /*Projects list*/
    .group-row-contents:hover {
        background-color: var(--gruvbox-surface0) !important;
        border-color: var(--gruvbox-surface1) !important;
    }

    /*Some pluses on the side of the repository were still blue*/
    .\!gl-text-blue-500 {
        color: var(--the-primary-color) !important
    }

    /* File normal viewer*/
    .code.white pre.code {
        background-color: var(--gruvbox-ansi00) !important;
    }

    .code.white .line-numbers,
    .code.white .diff-line-num {
        background-color: var(--gruvbox-bg1) !important;
    }

    .code.white .diff-line-num a {
        color: var(--gruvbox-ansi15) !important;
    }

    .code.white .diff-line-num {
        border-color: var(--gruvbox-surface1) !important;
    }

    .code pre {
        color: var(--gruvbox-ansi15) !important
    }

    .code.white pre .hll {
        background-color: var(--gruvbox-surface1) !important;
    }

    .code.white .file-line-blame:before {
        background-color: rgba(150, 140, 130, 0.5)
    }
    .code.white .file-line-blame:hover:before {
        background-color: rgba(168, 153, 132, 1)
    }

    .blame .blame-commit {
        background-color: var(--gruvbox-bg2) !important;
        border-left-color: var(--the-primary-color) !important;
    }

    .commit .commit-sha,
    .generic-commit-status .commit-sha,
    .branch-commit .commit-sha {
        color: var(--the-primary-color) !important;
    }

    .event-item .event-commits li.commits-stat a {
        color: var(--the-primary-color) !important;
    }

    .gl-button.gl-button.btn-confirm,
    .gl-button.gl-button.btn-info {
        background-color: var(--the-primary-color) !important;
        color: var(--gruvbox-ansi00) !important;
    }

    .gl-bg-white {
        background-color: var(--gruvbox-bg1) !important;
    }

    /*Drop down menu like when pressing on profile picture*/
    .gl-new-dropdown .gl-new-dropdown-panel {
        background-color: var(--gruvbox-bg1) !important;
        border-color: var(--gruvbox-surface1) !important;
    }

    .gl-new-dropdown-item:hover .gl-new-dropdown-item-content {
        background-color: var(--gruvbox-surface0) !important;
    }

    /*Badges*/
    .gl-badge.badge-neutral {
        background-color: var(--gruvbox-ansi07) !important;
    }
    .gl-badge-content {
        color: var(--gruvbox-ansi00) !important;
    }

    /*Danger button*/
    .btn-danger {
        background-color: var(--gruvbox-ansi09) !important;
    }
}