Skip to content

Gitlab Catppuccin by rouffy-dawg

Mirrored from https://gitlab.killuaa.dev/smokey-circuit/gitlab-catppuccin/-/blob/mrrow/mocha.user.css

Homepage Write a review Install Get Stylus

Details

Authorrouffy-dawg

LicenseGNU General Public License, version 3

Categorygitlab

Created

Updated

Code size8.2 kB

Code checksum347e2b89

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A catppuccin gitlab theme.

Notes

Currently very work in progress and supports only mocha mauve for now. Other catppuccin color schemes might be supported in the future.

Source code

/* ==UserStyle==
@name           Gitlab Catppuccin
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Rouffy Dawg, Mr.Snowy
==/UserStyle== */

@-moz-document  url("https://gitlab.com"), url-prefix("https://gitlab"), url-prefix("http://gitlab") {
    * {

    /*Catppucin colors*/
    --cat-base: #1e1e2e;
    --cat-mantle: #181825;
    --cat-crust: #11111b;
    --cat-surface-0: #313244;
    --cat-surface-1: #45475a;
    --cat-surface-2: #9399b2;
    --cat-text: #cdd6f4;
    --cat-subtext-0: #a6adc8;
    --cat-theme: #cba6f7;
    --cat-blue: #89b4fa;
    --cat-red: #f38ba8;
    --cat-maroon: #eba0ac;
    --cat-green: #a6e3a1;

    /*Some base colors*/
    --gl-color-neutral-600: var(--cat-text) !important;
    --gl-color-neutral-50: var(--cat-text) !important;
    --gl-text-color-heading: var(--cat-text) !important;

    --gl-text-secondary: var(--cat-subtext-0) !important;

    --gl-text-color-subtle: var(--cat-subtext-0) !important;

    --gl-border-color-strong: var(--cat-surface-2) !important;

    /*Different UI colors*/
    /*--gl-color-neutral-950: var(--cat-base) !important; 
        --gl-color-neutral-900: var(--cat-mantle) !important;
        --gl-text-color-default: var(--cat-text) !important;
        --gl-avatar-border-color-default: #45475a !important;*/
    --gl-dropdown-option-text-color-disabled: #45475a !important;

    --gl-background-color-default: var(--cat-base) !important;
    --gl-text-color-link: var(--cat-theme) !important;
    --gl-background-color-subtle: var(--cat-mantle) !important;
    --gl-border-color-default: var(--cat-surface-1) !important;
    --gl-color-neutral-800: var(--cat-surface-1) !important;
    --gray-100: var(--cat-surface-1) !important;
    --gl-control-border-color-default: var(--cat-surface-1) !important;

    /* main buttons */
    --gl-button-default-primary-background-color-default: var(--cat-surface-0) !important;
    --gl-button-default-primary-background-color-active: var(--cat-base) !important;
    /* not sure! */
    --gl-button-default-primary-background-color-focus: var(--cat-surface-1) !important;
    --gl-button-default-primary-background-color-hover: var(--cat-surface-1) !important;

    /*--gl-button-confirm-primary-background-color-active: #428fdc;
    --gl-button-confirm-primary-background-color-default: var(--cat-theme);
    --gl-button-confirm-primary-background-color-focus: #9dc7f1;
    --gl-button-confirm-primary-background-color-hover: #9dc7f1;*/
    /* sidebar buttons */
    --super-sidebar-user-bar-button-active-bg: var(--cat-surface-1);
    --super-sidebar-user-bar-button-bg: var(--cat-surface-0) !important;
    --super-sidebar-user-bar-button-border-color: var(--cat-surface-1);
    --super-sidebar-user-bar-button-color: var(--cat-text) !important;
    --super-sidebar-user-bar-button-hover-bg: var(--cat-surface-1);
    --super-sidebar-user-bar-button-hover-color: var(--cat-text) !important;

    /* sidebar */
    --super-sidebar-user-bar-bg: var(--cat-crust) !important;
    --super-sidebar-context-header-color: var(--cat-theme) !important;
    --super-sidebar-accent-color: var(--cat-theme) !important;
    --super-sidebar-nav-item-active-bg: var(--cat-surface-1) !important;
    --super-sidebar-nav-item-current-bg: var(--cat-surface-0) !important;
    --super-sidebar-nav-item-hover-bg: var(--cat-surface-0) !important;

    /*Badges*/
    --gl-badge-muted-background-color-default: var(--cat-surface-2) !important;
    --gl-badge-success-background-color-default: var(--cat-green) !important;

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

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

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

    --gl-action-neutral-background-color-hover: var(--cat-surface-0) !important;

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

    /*Repository file tree selected border*/
    --gl-action-selected-border-color-default: var(--cat-theme) !important;
}

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

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

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

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

/*Repository Empty*/
.gl-card-body {
    background-color: var(--cat-mantle) !important;
}
.gl-card-header {
    background-color: var(--cat-crust) !important;
}
.code {
    background-color: var(--cat-base) !important;
    color: var(--cat-text) !important;
}

/*Projects list*/
.group-row-contents:hover {
    background-color: var(--cat-surface-0) !important;
    border-color: var(--cat-surface-1) !important;
}


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


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

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

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

.code.white .diff-line-num {
    border-color: var(--cat-surface-1) !important;
}

.code pre {
    color: var(--cat-text) !important
}

.code.white pre .hll {
    background-color: var(--cat-surface-1) !important;
}


.code.white .file-line-blame:before {
    background-color: rgba(108, 112, 134, 0.5)
}
.code.white .file-line-blame:hover:before {
    background-color: rgba(127, 132, 156, 1)
}

.blame .blame-commit {
    background-color: var(--cat-crust) !important;
    border-left-color: var(--cat-theme) !important;
}



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

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

.gl-button.gl-button.btn-confirm,
.gl-button.gl-button.btn-info {
    background-color: var(--cat-theme) !important;
    color: var(--cat-base) !important;
}

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

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

.gl-new-dropdown-item:hover .gl-new-dropdown-item-content {
    background-color: var(--cat-surface-0) !important;
}

/*Badges*/
.gl-badge.badge-neutral {
    background-color: var(--cat-surface-2) !important;
}
.gl-badge-content {
    color: var(--cat-base) !important;
}

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

Reviews

No reviews yet.